refactor index and download finished

1 files changed, 23 insertions, 11 deletions

diff --git a/templates/index.html b/templates/index.html
index f0268f3..addf868 100644
--- a/templates/index.html
+++ b/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>