Spaces:

WebashalarForML
/

SpacyModelCreator

Sleeping

App Files Files Community

WebashalarForML commited on Oct 22, 2024

Commit

31c34f6

verified ·

1 Parent(s): 96d4e69

Update templates/upload.html

Browse files

Files changed (1) hide show

templates/upload.html +266 -266

templates/upload.html CHANGED Viewed

@@ -1,266 +1,266 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>File Uploader</title>
-    <link
-      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.5/font/bootstrap-icons.min.css"
-      rel="stylesheet"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
-    />
-    <style>
-      body {
-        background-color: #121212;
-        font-family: "Poppins", sans-serif;
-        color: #e0e0e0;
-        margin: 0;
-        padding: 0;
-      }
-      h1 {
-        color: #ffffff;
-        text-align: center;
-        margin: 50px 0 20px;
-        animation: fadeIn 1s ease;
-      }
-      .container {
-        max-width: 600px;
-        margin: 0 auto;
-      }
-      .file-upload-section {
-        background-color: #1e1e1e;
-        padding: 30px;
-        border-radius: 15px;
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
-        text-align: center;
-        position: relative;
-        animation: fadeInUp 1.5s ease;
-      }
-      .file-upload-section input[type="file"] {
-        background-color: #2c2c2c;
-        border: 1px solid #444;
-        color: #e0e0e0;
-        border-radius: 5px;
-        width: 100%;
-        margin-bottom: 20px;
-        /* padding: 10px; */
-        transition: background-color 0.3s ease;
-      }
-      .file-upload-section input[type="file"]:hover,
-      .file-upload-section input[type="file"]:focus {
-        background-color: #3a3a3a;
-        outline: none;
-      }
-      .file-upload-section button {
-        background-color: #4caf50;
-        color: white;
-        border: none;
-        padding: 10px 20px;
-        border-radius: 5px;
-        font-size: 16px;
-        cursor: pointer;
-        transition: background-color 0.3s ease, transform 0.3s ease;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        border: 1px solid #4caf50;
-      }
-      .file-upload-section button:hover,
-      .file-upload-section button:focus {
-        background-color: transparent;
-        border: 1px solid #4caf50;
-      }
-      .file-actions {
-        margin-top: 20px;
-        display: flex;
-        justify-content: space-around;
-      }
-      .alert {
-        text-align: center;
-      }
-      .instructions {
-        margin-top: 10px;
-        font-size: 14px;
-        color: #b0b0b0;
-        text-align: left;
-      }
-      .instructions strong {
-        color: #ffffff;
-      }
-      @media (max-width: 768px) {
-        .container {
-          padding: 20px;
-        }
-      }
-      .guide {
-        background-color: #1e1e1e;
-        padding: 20px;
-        border-radius: 10px;
-        margin-top: 20px;
-      }
-      .guide-button {
-        position: fixed;
-        top: 20px; /* Adjust the top margin as per your need */
-        right: 20px; /* Adjust the right margin as per your need */
-        z-index: 1000; /* Ensure the button is always on top */
-      }
-      .guide-button a {
-        font-size: 16px;
-        color: #17a2b8;
-        padding: 5px 10px;
-        border-radius: 5px;
-        text-decoration: none;
-      }
-      .guide-button a:hover {
-        background-color: #138496b9; /* Darken on hover */
-      }
-      .fas.fa-info-circle {
-        margin-right: 5px;
-      }
-    </style>
-  </head>
-  <body>
-    <!-- Guide Button -->
-    <div class="guide-button">
-      <a href="{{ url_for('guide') }}" class="btn">
-        <i class="fas fa-info-circle"></i> Guide
-      </a>
-    </div>
-    <div class="container">
-      <h1>Upload Your Resume</h1>
-      <p class="text-center text-secondary">
-        Welcome! Please select a Resume to upload.
-      </p>
-      <div class="progress">
-        <div
-          class="progress-bar"
-          role="progressbar"
-          style="width: 10%"
-          aria-valuenow="10"
-          aria-valuemin="0"
-          aria-valuemax="100"
-        >
-          Step 1 of 5
-        </div>
-      </div>
-      <div class="file-upload-section">
-        <form
-          action="{{ url_for('upload_file') }}"
-          method="POST"
-          enctype="multipart/form-data"
-          id="file-upload-form"
-        >
-          <input
-            type="file"
-            name="file"
-            class="form-control"
-            id="file-input"
-            required
-          />
-          <button type="submit" class="btn btn-custom">
-            <i class="bi bi-cloud-upload"></i> Upload & Extract Text
-          </button>
-          <div class="instructions mt-3">
-            <p>
-              <strong>Supported Formats:</strong> PDF, DOCX, RSF, ODT, PNG, JPG,
-              JPEG
-            </p>
-            <p><strong>File Size Limit:</strong> 5MB</p>
-            <p>
-              Please ensure the file is correctly formatted before uploading.
-            </p>
-          </div>
-        </form>
-        {% if session.get('uploaded_file') %}
-        <p class="mt-4">
-          Uploaded:
-          <span class="text-danger">{{ session.get('uploaded_file') }}</span>
-        </p>
-        <div class="file-actions">
-          <form action="{{ url_for('remove_file') }}" method="post">
-            <button type="submit" class="btn btn-outline-danger">
-              <i class="bi bi-trash"></i> Remove Uploaded File
-            </button>
-          </form>
-        </div>
-        {% endif %}
-      </div>
-      {% with messages = get_flashed_messages() %} {% if messages %}
-      <div class="alert alert-success mt-4" id="flash-message">
-        {{ messages[0] }}
-      </div>
-      {% endif %} {% endwith %}
-      <div class="guide">
-        <h5>Instructions:</h5>
-        <ol class="">
-          <li>Select a file from your device.</li>
-          <li>Click the "Upload & Extract Text" button.</li>
-          <li>
-            Once uploaded, you can view the extracted text and download it.
-          </li>
-          <li>
-            If needed, remove the uploaded file using the "Remove Uploaded File"
-            button.
-          </li>
-        </ol>
-      </div>
-    </div>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
-    <script>
-      document.querySelector("form").addEventListener("submit", function (e) {
-        const fileInput = document.querySelector("#file-input");
-        const file = fileInput.files[0];
-        const allowedTypes = [
-          "application/pdf",
-          "application/msword",
-          "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
-          "image/png",
-          "image/jpeg",
-          "application/json",
-          "application/vnd.oasis.opendocument.text",
-          "text/plain",
-        ];
-        const maxSize = 5 * 1024 * 1024; // 5MB size limit
-        if (!allowedTypes.includes(file.type)) {
-          e.preventDefault();
-          alert(
-            "Only PDF, DOCX, RSF, ODT, PNG, JPG, JPEG, and JSON files are allowed."
-          );
-        } else if (file.size > maxSize) {
-          e.preventDefault();
-          alert("File size must be less than 5MB.");
-        }
-      });
-      // Close flash messages after a timeout
-      setTimeout(function () {
-        let flashMessage = document.getElementById("flash-message");
-        if (flashMessage) {
-          flashMessage.style.transition = "opacity 1s ease";
-          flashMessage.style.opacity = 0;
-          setTimeout(() => flashMessage.remove(), 1000);
-        }
-      }, 3000);
-    </script>
-  </body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>File Uploader</title>
+    <link
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+    />
+    <link
+      href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.5/font/bootstrap-icons.min.css"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
+    />
+    <style>
+      body {
+        background-color: #121212;
+        font-family: "Poppins", sans-serif;
+        color: #e0e0e0;
+        margin: 0;
+        padding: 0;
+      }
+      h1 {
+        color: #ffffff;
+        text-align: center;
+        margin: 50px 0 20px;
+        animation: fadeIn 1s ease;
+      }
+      .container {
+        max-width: 600px;
+        margin: 0 auto;
+      }
+      .file-upload-section {
+        background-color: #1e1e1e;
+        padding: 30px;
+        border-radius: 15px;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
+        text-align: center;
+        position: relative;
+        animation: fadeInUp 1.5s ease;
+      }
+      .file-upload-section input[type="file"] {
+        background-color: #2c2c2c;
+        border: 1px solid #444;
+        color: #e0e0e0;
+        border-radius: 5px;
+        width: 100%;
+        margin-bottom: 20px;
+        /* padding: 10px; */
+        transition: background-color 0.3s ease;
+      }
+      .file-upload-section input[type="file"]:hover,
+      .file-upload-section input[type="file"]:focus {
+        background-color: #3a3a3a;
+        outline: none;
+      }
+      .file-upload-section button {
+        background-color: #4caf50;
+        color: white;
+        border: none;
+        padding: 10px 20px;
+        border-radius: 5px;
+        font-size: 16px;
+        cursor: pointer;
+        transition: background-color 0.3s ease, transform 0.3s ease;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        border: 1px solid #4caf50;
+      }
+      .file-upload-section button:hover,
+      .file-upload-section button:focus {
+        background-color: transparent;
+        border: 1px solid #4caf50;
+      }
+      .file-actions {
+        margin-top: 20px;
+        display: flex;
+        justify-content: space-around;
+      }
+      .alert {
+        text-align: center;
+      }
+      .instructions {
+        margin-top: 10px;
+        font-size: 14px;
+        color: #b0b0b0;
+        text-align: left;
+      }
+      .instructions strong {
+        color: #ffffff;
+      }
+      @media (max-width: 768px) {
+        .container {
+          padding: 20px;
+        }
+      }
+      .guide {
+        background-color: #1e1e1e;
+        padding: 20px;
+        border-radius: 10px;
+        margin-top: 20px;
+      }
+      .guide-button {
+        position: fixed;
+        top: 20px; /* Adjust the top margin as per your need */
+        right: 20px; /* Adjust the right margin as per your need */
+        z-index: 1000; /* Ensure the button is always on top */
+      }
+      .guide-button a {
+        font-size: 16px;
+        color: #17a2b8;
+        padding: 5px 10px;
+        border-radius: 5px;
+        text-decoration: none;
+      }
+      .guide-button a:hover {
+        background-color: #138496b9; /* Darken on hover */
+      }
+      .fas.fa-info-circle {
+        margin-right: 5px;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Guide Button -->
+    <div class="guide-button">
+      <a href="{{ url_for('guide') }}" class="btn">
+        <i class="fas fa-info-circle"></i> Guide
+      </a>
+    </div>
+    <div class="container">
+      <h1>Upload Your Resume</h1>
+      <p class="text-center text-secondary">
+        Welcome! Please select a Resume to upload.
+      </p>
+      <div class="progress">
+        <div
+          class="progress-bar"
+          role="progressbar"
+          style="width: 10%"
+          aria-valuenow="10"
+          aria-valuemin="0"
+          aria-valuemax="100"
+        >
+          Step 1 of 5
+        </div>
+      </div>
+      <div class="file-upload-section">
+        <form
+          action="{{ url_for('upload_file') }}"
+          method="POST"
+          enctype="multipart/form-data"
+          id="file-upload-form"
+        >
+          <input
+            type="file"
+            name="file"
+            class="form-control"
+            id="file-input"
+            required
+          />
+          <button type="submit" class="btn btn-custom">
+            <i class="bi bi-cloud-upload"></i> Upload & Extract Text
+          </button>
+          <div class="instructions mt-3">
+            <p>
+              <strong>Supported Formats:</strong> PDF, DOCX, RSF, ODT, PNG, JPG,
+              JPEG
+            </p>
+            <p><strong>File Size Limit:</strong> 5MB</p>
+            <p>
+              Please ensure the file is correctly formatted before uploading.
+            </p>
+          </div>
+        </form>
+        {% if session.get('uploaded_file') %}
+        <p class="mt-4">
+          Uploaded:
+          <span class="text-danger">{{ session.get('uploaded_file') }}</span>
+        </p>
+        <div class="file-actions">
+          <form action="{{ url_for('upload_file') }}" method="post" enctype="multipart/form-data">
+            <button type="submit" class="btn btn-outline-danger">
+              <i class="bi bi-trash"></i> Remove Uploaded File
+            </button>
+          </form>
+        </div>
+        {% endif %}
+      </div>
+      {% with messages = get_flashed_messages() %} {% if messages %}
+      <div class="alert alert-success mt-4" id="flash-message">
+        {{ messages[0] }}
+      </div>
+      {% endif %} {% endwith %}
+      <div class="guide">
+        <h5>Instructions:</h5>
+        <ol class="">
+          <li>Select a file from your device.</li>
+          <li>Click the "Upload & Extract Text" button.</li>
+          <li>
+            Once uploaded, you can view the extracted text and download it.
+          </li>
+          <li>
+            If needed, remove the uploaded file using the "Remove Uploaded File"
+            button.
+          </li>
+        </ol>
+      </div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+      document.querySelector("form").addEventListener("submit", function (e) {
+        const fileInput = document.querySelector("#file-input");
+        const file = fileInput.files[0];
+        const allowedTypes = [
+          "application/pdf",
+          "application/msword",
+          "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+          "image/png",
+          "image/jpeg",
+          "application/json",
+          "application/vnd.oasis.opendocument.text",
+          "text/plain",
+        ];
+        const maxSize = 5 * 1024 * 1024; // 5MB size limit
+        if (!allowedTypes.includes(file.type)) {
+          e.preventDefault();
+          alert(
+            "Only PDF, DOCX, RSF, ODT, PNG, JPG, JPEG, and JSON files are allowed."
+          );
+        } else if (file.size > maxSize) {
+          e.preventDefault();
+          alert("File size must be less than 5MB.");
+        }
+      });
+      // Close flash messages after a timeout
+      setTimeout(function () {
+        let flashMessage = document.getElementById("flash-message");
+        if (flashMessage) {
+          flashMessage.style.transition = "opacity 1s ease";
+          flashMessage.style.opacity = 0;
+          setTimeout(() => flashMessage.remove(), 1000);
+        }
+      }, 3000);
+    </script>
+  </body>
+</html>