From 04f237e28f81ed55bb42d1d256e1f4b16c252b8b Mon Sep 17 00:00:00 2001
From: PragatiVerma18 <itispragativerma@gmail.com>
Date: Thu, 8 Oct 2020 01:09:25 +0530
Subject: [PATCH] Fix UI - Added CSS to upload page

---
 static/css/style.css | 29 +++++++++++++
 templates/index.html | 96 +++++++++++++++++++++++++++++++++++++-------
 2 files changed, 111 insertions(+), 14 deletions(-)
 create mode 100644 static/css/style.css
diff --git a/static/css/style.css b/static/css/style.css
new file mode 100644
index 0000000..70bb15a
--- /dev/null
+++ b/static/css/style.css
@@ -0,0 +1,29 @@
+html,
+body {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+}
+.card {
+  border-radius: 10px;
+  margin-top: 40px !important;
+  height: 500px !important;
+  width: 400px;
+}
+
+.card.has-text-centered .card-header,
+.card.has-text-centered .card-content,
+.card.has-text-centered .card-footer {
+  justify-content: center;
+  align-items: center;
+}
+.card.has-text-centered h1 {
+  font-size: 1.75rem;
+  font-weight: bold;
+}
+
+.navbar {
+  margin-bottom: 20px !important;
+}
diff --git a/templates/index.html b/templates/index.html
index a7916ae..7a77e46 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,18 +1,86 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{{ url_for('static',filename='css/style.css') }}"
+    />
+    <title>MLH Quizzet</title>
+  </head>
 
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Home</title>
-</head>
+  <body>
+    <nav
+      class="navbar is-dark is-fixed-top has-text-centered"
+      role="navigation"
+      aria-label="main navigation"
+    >
+      <div class="navbar-brand">
+        <a class="navbar-item has-text-centered" href="#"
+          ><strong>MLH Quizzet</strong></a
+        >
+        <div class="navbar-burger" data-target="navMenu">
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+      </div>
+    </nav>
+    <main role="main">
+      <div class="card has-text-centered">
+        <img
+          src="https://cdn1.iconfinder.com/data/icons/leto-files/64/leto_files-72-512.png"
+          alt="upload"
+        />
+        <form
+          action="http://localhost:5000/quiz"
+          method="POST"
+          enctype="multipart/form-data"
+        >
+          <div id="file-js-example" class="file has-name is-fullwidth">
+            <label class="file-label">
+              <input
+                class="file-input"
+                type="file"
+                name="file"
+                accept=".txt, application/pdf"
+              />
+              <span class="file-cta">
+                <span class="file-icon">
+                  <i class="fas fa-upload"></i>
+                </span>
+                <span class="file-label"> Choose a file… </span>
+              </span>
+              <span class="file-name"> No file uploaded </span>
+            </label>
+          </div>
 
-<body>
-    <form action="http://localhost:5000/quiz" method="POST" enctype="multipart/form-data">
-        <!-- Accept only pdf/txt files -->
-        <input type="file" name="file" accept=".txt, application/pdf" />
-        <input type="submit" name="upload file" />
-    </form>
-</body>
-
-</html>
\ No newline at end of file
+          <script>
+            const fileInput = document.querySelector(
+              "#file-js-example input[type=file]"
+            );
+            fileInput.onchange = () => {
+              if (fileInput.files.length > 0) {
+                const fileName = document.querySelector(
+                  "#file-js-example .file-name"
+                );
+                fileName.textContent = fileInput.files[0].name;
+              }
+            };
+          </script>
+          <input
+            type="submit"
+            name="upload file"
+            class="button has-text-centered is-large is-fullwidth is-link"
+          />
+        </form>
+      </div>
+    </main>
+  </body>
+</html>
