From 7f253f71866a35a4c681a9ac37109d0ea4ab3d0e Mon Sep 17 00:00:00 2001
From: Jfriedli
Date: Thu, 18 Mar 2021 10:38:18 +0100
Subject: started restyling

---
 package-lock.json    | 27 +++++++++++++++++++++++++++
 package.json         |  1 +
 tailwind.config.js   | 13 ++++++++++---
 templates/base.html  | 30 ++++++++++--------------------
 templates/index.html | 39 ++++++++++++++++++++-------------------
 5 files changed, 68 insertions(+), 42 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c2f7457..ceea4cd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "license": "MIT",
       "dependencies": {
         "@fullhuman/postcss-purgecss": "^4.0.2",
+        "@tailwindcss/forms": "^0.2.1",
         "autoprefixer": "^10.2.5",
         "postcss": "^8.2.8",
         "postcss-cli": "^8.3.1",
@@ -137,6 +138,14 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@tailwindcss/forms": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.2.1.tgz",
+      "integrity": "sha512-czfvEdY+J2Ogfd6RUSr/ZSUmDxTujr34M++YLnp2cCPC3oJ4kFvFMaRXA6cEXKw7F1hJuapdjXRjsXIEXGgORg==",
+      "dependencies": {
+        "mini-svg-data-uri": "^1.2.3"
+      }
+    },
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@@ -946,6 +955,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/mini-svg-data-uri": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.2.3.tgz",
+      "integrity": "sha512-zd6KCAyXgmq6FV1mR10oKXYtvmA9vRoB6xPSTUJTbFApCtkefDnYueVR1gkof3KcdLZo1Y8mjF2DFmQMIxsHNQ=="
+    },
     "node_modules/minimatch": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
@@ -1785,6 +1799,14 @@
         "fastq": "^1.6.0"
       }
     },
+    "@tailwindcss/forms": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.2.1.tgz",
+      "integrity": "sha512-czfvEdY+J2Ogfd6RUSr/ZSUmDxTujr34M++YLnp2cCPC3oJ4kFvFMaRXA6cEXKw7F1hJuapdjXRjsXIEXGgORg==",
+      "requires": {
+        "mini-svg-data-uri": "^1.2.3"
+      }
+    },
     "@types/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@@ -2393,6 +2415,11 @@
         "picomatch": "^2.0.5"
       }
     },
+    "mini-svg-data-uri": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.2.3.tgz",
+      "integrity": "sha512-zd6KCAyXgmq6FV1mR10oKXYtvmA9vRoB6xPSTUJTbFApCtkefDnYueVR1gkof3KcdLZo1Y8mjF2DFmQMIxsHNQ=="
+    },
     "minimatch": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
diff --git a/package.json b/package.json
index 0da90b1..8674c0a 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
   "license": "MIT",
   "dependencies": {
     "@fullhuman/postcss-purgecss": "^4.0.2",
+    "@tailwindcss/forms": "^0.2.1",
     "autoprefixer": "^10.2.5",
     "postcss": "^8.2.8",
     "postcss-cli": "^8.3.1",
diff --git a/tailwind.config.js b/tailwind.config.js
index ce94ce1..74b3d31 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,17 +2,24 @@ const defaultTheme = require('tailwindcss/defaultTheme')
 
 module.exports = {
     future: {
-        // removeDeprecatedGapUtilities: true,
-        // purgeLayersByDefault: true,
     },
     purge: [],
     theme: {
         extend: {
+            colors: {
+                blue: {
+                    light: '#f4f7fb',
+                    DEFAULT: '#99c1f1',
+                    dark: '#1b5eb4',
+                }
+            },
             fontFamily: {
                 sans: ['Inter var', ...defaultTheme.fontFamily.sans],
             },
         },
     },
     variants: {},
-    plugins: [],
+    plugins: [
+        require('@tailwindcss/forms'),
+    ],
 }
diff --git a/templates/base.html b/templates/base.html
index b337df5..17c28f2 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -10,20 +10,14 @@
             <link rel="stylesheet" href="{{ ASSET_URL }}">
         {% endassets %}
     </head>
-<body>
-    <header class="">
-        <div class="container">
-            <div>
-                <div>
-                    <a href='.'>
-                        <img class='logo' src="{{ url_for('static', filename='logo.png') }}" alt="mat2 logo"/>
-                    </a>
-                </div>
-            </div>
-        </div>
+<body class="flex flex-col h-screen justify-between">
+    <header class="h-20 w-full bg-blue-100 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>
 
-    <div class="container mx-auto">
+    <div class="container h-10 mt-8">
         <div>
             {% with messages = get_flashed_messages() %}
                 {% if messages %}
@@ -39,15 +33,11 @@
         </div>
     </div>
 
-    <div>
-        <section>
-            <div>
-                {% block content %}{% endblock %}
-            </div>
-        </section>
-    </div>
+    <section class="container mb-auto mx-auto mt-8">
+        {% block content %}{% endblock %}
+    </section>
 
-    <footer>
+    <footer class="h-10 flex justify-center">
         © <a href='https://dustri.org'>jvoisin</a> -
         <a href='https://0xacab.org/jvoisin/mat2-web'>source</a> -
         ♥
diff --git a/templates/index.html b/templates/index.html
index f92ef69..008f5f3 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,25 +1,26 @@
 {% extends "base.html" %}
 {% block content %}
-    <div class="shadowed-box u-text-center u-center-block">
-        <h2 class="uk-text-center">Remove metadata</h2>
-        <p class="uk-text-center">
-            The file you see is just the tip of the iceberg. Remove the hidden metadata.
-        </p>
-        <div class="uk-flex uk-flex-center">
-            <div>
-                <form method=post enctype=multipart/form-data>
-                    <div class="uk-margin">
-                        <input type="file" name=file id="upload_file" accept="{{ mimetypes |  join(', ') }}">
-                        <button class="uk-button uk-button-primary" type="submit" value="Upload">Upload</button>
-                    </div>
+    <div class="flex justify-center">
+        <div class="max-w-lg 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>
                 </form>
             </div>
-        </div>
-        <a href="/info" role="link" class="">
-            <span class="info-link">
-                ?
-            </span>
-        </a>
-
+          </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"
+    >
+        <a href="/info" role="link" class="w-6 h-6 text-white inline-block font-bold">
+            ?
+        </a>
+    </button>
 {% endblock %}
-- 
cgit v1.3