refactor index and download finished

package.json

@@ -3,7 +3,7 @@
   "version": "0.5.0",
   "description": "A web version of mat2! ",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build:css": "postcss static/src/main.css -o static/dist/main.css"
   },
   "repository": {
     "type": "git",

static/src/main.css

@@ -2,18 +2,75 @@
 @tailwind components;
 @tailwind utilities;
 
+/* rubik-300 - latin */
 @font-face {
-  font-family: 'Raleway';
+  font-family: 'Rubik';
+  font-style: normal;
+  font-weight: 300;
+  src: local(''),
+       url('/static/font/rubik-v12-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('/static/font/rubik-v12-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* rubik-regular - latin */
+@font-face {
+  font-family: 'Rubik';
   font-style: normal;
   font-weight: 400;
-  src: local('Raleway'), local('Raleway-Regular'), url(raleway-ext.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+  src: local(''),
+       url('/static/font/rubik-v12-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('/static/font/rubik-v12-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
-
+/* rubik-500 - latin */
 @font-face {
-  font-family: 'Raleway';
+  font-family: 'Rubik';
   font-style: normal;
-  font-weight: 400;
-  src: local('Raleway'), local('Raleway-Regular'), url(raleway.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+  font-weight: 500;
+  src: local(''),
+       url('/static/font/rubik-v12-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('/static/font/rubik-v12-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* rubik-600 - latin */
+@font-face {
+  font-family: 'Rubik';
+  font-style: normal;
+  font-weight: 600;
+  src: local(''),
+       url('/static/font/rubik-v12-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('/static/font/rubik-v12-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* rubik-700 - latin */
+@font-face {
+  font-family: 'Rubik';
+  font-style: normal;
+  font-weight: 700;
+  src: local(''),
+       url('/static/font/rubik-v12-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('/static/font/rubik-v12-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* rubik-300italic - latin */
+@font-face {
+  font-family: 'Rubik';
+  font-style: italic;
+  font-weight: 300;
+  src: local(''),
+       url('/static/font/rubik-v12-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('/static/font/rubik-v12-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* rubik-italic - latin */
+@font-face {
+  font-family: 'Rubik';
+  font-style: italic;
+  font-weight: 400;
+  src: local(''),
+       url('/static/font/rubik-v12-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('/static/font/rubik-v12-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* rubik-500italic - latin */
+@font-face {
+  font-family: 'Rubik';
+  font-style: italic;
+  font-weight: 500;
+  src: local(''),
+       url('/static/font/rubik-v12-latin-500italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('/static/font/rubik-v12-latin-500italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }

tailwind.config.js

@@ -7,6 +7,8 @@ module.exports = {
     theme: {
         extend: {
             colors: {
+                transparent: 'transparent',
+                current: 'currentColor',
                 blue: {
                     light: '#f4f7fb',
                     DEFAULT: '#99c1f1',
@@ -14,12 +16,10 @@ module.exports = {
                 }
             },
             fontFamily: {
-                sans: ['Inter var', ...defaultTheme.fontFamily.sans],
+                sans: ['Rubik'],
             },
         },
     },
     variants: {},
-    plugins: [
-        require('@tailwindcss/forms'),
-    ],
+    plugins: [],
 }

templates/base.html

@@ -13,25 +13,17 @@
 </head>
 
 <body class="flex flex-col h-screen justify-between">
-    <header class="h-20 w-full bg-blue-100 my-0 flex justify-center">
+    <header class="h-20 w-full bg-blue-light my-0 flex justify-center">
         <a href='.' class="mt-8">
             <img class='max-h-28' src="{{ url_for('static', filename='logo.png') }}" alt="mat2 logo" />
         </a>
     </header>
 
-
-
-    <section class="mb-auto mt-8 pt-8">
+    <section class="mb-auto mt-12 pt-8">
         {% with messages = get_flashed_messages() %}
         {% if messages %}
         {% for message in messages %}
-        <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
-            <span class="text-xl inline-block mr-5 align-middle">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                        d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                </svg>
-            </span>
+        <div class="text-white px-6 py-4 border-0 relative mb-4 bg-red-500">
             <span class="inline-block align-middle mr-8">
                 {{ message }}
             </span>

templates/download.html

@@ -2,14 +2,29 @@
 
 {% block content %}
 <div class="grid grid-rows-1 w-50">
-    <div class="flex justify-center">
-        <div class="rounded overflow-hidden shadow-lg p-4">
-            {% if not meta_after %}
+    <div class="grid grid-rows-1">
+        {% if not meta_after %}
             <div class="px-6 py-4 grid grid-rows-1">
-                <h1 class="font-bold text-xl mb-2">Metadata removed</h1>
+                <div class="font-light text-center text-4xl mb-2">Cleaned Metadata</div>
             </div>
+            <p class="text-gray-700 text-center text-sm text-opacity-80">
+                Successfully removed the metadata.
+            </p>
+        {% endif %}
+        {% if meta_after %}
+            <div class="px-6 py-4 grid grid-rows-1">
+                <div class="font-light text-center text-4xl mb-2">Metadata Partially Removed</div>
+            </div>
+            <p class="text-gray-700 text-center text-sm text-opacity-80">
+                Could not remove all the metadata. Consult the table below for the remaining metadata.
+            </p>
+        {% endif %}
+    </div>
+
+    <div class="flex justify-center mt-8">
+        <div class="rounded w-50 overflow-hidden shadow-lg p-4">
+            {% if not meta_after %}
             <p class="text-gray-700 text-base text-center">
-                Successfully removed the metadata
                 <svg class="max-h-40 fill-current text-green-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                     fill="currentColor">
                     <path fill-rule="evenodd"
@@ -20,11 +35,7 @@
             {% endif %}
 
             {% if meta_after %}
-            <div class="px-6 py-4 grid grid-rows-1">
-                <h1 class="font-bold text-xl mb-2">Metadata partially removed</h1>
-            </div>
             <p class="text-gray-700 text-base text-center">
-                Could not remove all the metadata
                 <svg class="max-h-40 fill-current text-yellow-600" xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 20 20" fill="currentColor">
                     <path fill-rule="evenodd"
@@ -37,9 +48,9 @@
 
             <a class="uk-flex-1" href='{{ download_uri }}'>
                 <button
-                    class="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded flex justify-center"
+                    class="w-full bg-blue-dark hover:bg-blue-700 text-white py-2 px-4 rounded flex justify-center"
                 >
-                    <svg class="w-4 h-4 mr-2 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                    <svg class="w-4 h-4 mr-2 text-white self-center" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                         <path style="fill: white" d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z" />
                     </svg>
                     <span>Download Cleaned File</span>
@@ -52,7 +63,7 @@
         <div class="bg-white shadow-md rounded my-6">
             <table class="text-left w-full border-collapse">
                 <div class="px-6 py-4 grid grid-rows-1">
-                    <h1 class="font-bold text-xl mb-2">Remaining Metadata</h1>
+                    <h1 class="font-light text-center text-4xl">Remaining Metadata</h1>
                 </div>
                 <thead>
                     <tr>

templates/index.html

@@ -1,24 +1,36 @@
 {% extends "base.html" %}
 {% block content %}
-<div class="flex justify-center">
+
+<div class="grid grid-rows-1">
+    <div class="font-light text-center text-4xl mb-2">Remove Metadata</div>
+    <p class="text-gray-700 text-center text-sm text-opacity-80">
+        The file you see is just the tip of the iceberg. Remove the hidden metadata.
+    </p>
+</div>
+
+<div class="flex justify-center mt-8">
     <div class="w-50 rounded overflow-hidden shadow-lg pb-4">
-        <div class="px-6 py-4">
-            <div class="font-bold text-xl mb-2">Remove Metadata</div>
-            <p class="text-gray-700 text-base">
-                The file you see is just the tip of the iceberg. Remove the hidden metadata.
-            </p>
-        </div>
         <div class="px-6 pt-4 pb-2 grid grid-rows-1">
             <form method="post" enctype="multipart/form-data" class="grid grid-rows-1">
-                <input type="file" name="file" id="upload_file" accept="{{ mimetypes |  join(', ') }}">
-                <button class="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" type="submit"
-                    value="Upload">Remove Metadata</button>
+                <input class="border rounded" type="file" name="file" id="upload_file" accept="{{ mimetypes |  join(', ') }}">
+                <button
+                    class="w-full mt-4 bg-blue-dark hover:bg-blue-700 text-white py-2 px-4 rounded flex justify-center"
+                    type="submit"
+                    value="Upload"
+                >
+                    <svg class="w-4 h-4 mr-2 text-white self-center" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                     </svg>
+                    <span>               
+                        Remove Metadata
+                    </span>
+                </button>
             </form>
         </div>
     </div>
 </div>
 <button
-    class="p-0 w-10 h-10 absolute sm:bottom-8 md:bottom-16 sm:right-8 md:right-16  bg-blue-300 hover:bg-blue-400 rounded-full active:shadow-lg mouse shadow transition ease-in duration-200 focus:outline-none">
+    class="p-0 w-10 h-10 absolute bottom-8 md:bottom-16 lg:bottom-24 right-8 md:right-16 lg:right-24 bg-blue-300 hover:bg-blue-400 rounded-full active:shadow-lg mouse shadow transition ease-in duration-200 focus:outline-none">
     <a href="/info" role="link" class="w-6 h-6 text-white inline-block font-bold">
         ?
     </a>