ImageDataExtractor2

Sleeping

App Files Files Community

WebashalarForML commited on Oct 8

Commit

961552c

•

1 Parent(s): 2ed1d5c

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +111 -143

templates/index.html CHANGED Viewed

@@ -2,187 +2,155 @@
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Visiting Card Data Extractor</title>
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
     <style>
         body {
-            background-color: #1d2329;
-            color: #e0e0e0;
-            font-family: 'Arial', sans-serif;
         }
-        .container {
-            margin-top: 50px;
-        }
-        .card {
-            background-color: #2a2f36;
-            border: none;
-            border-radius: 10px;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
-        }
-        .card-header {
-            background-color: #3a4149;
-            color: white;
-            border-top-left-radius: 10px;
-            border-top-right-radius: 10px;
         }
-        .btn-primary,
-        .btn-success,
-        .btn-info {
-            border-radius: 50px;
-            padding: 10px;
-            width: 100%;
         }
-        .btn-primary {
-            background-color: #007bff;
-            border: none;
         }
-        .btn-success {
-            background-color: #28a745;
-            border: none;
         }
-        .btn-info {
-            background-color: #17a2b8;
             border: none;
         }
-        .uploaded-file {
-            margin-top: 15px;
-            display: flex;
-            align-items: center;
-        }
-        .uploaded-file span {
-            font-size: 16px;
-            margin-left: 10px;
-            color: #e0e0e0;
-        }
-        .remove-file {
-            cursor: pointer;
-            color: #dc3545;
-            margin-left: 10px;
-        }
-        .form-control-file {
-            border-radius: 50px;
-            border: 2px solid #4e5d6c;
-            padding: 10px;
-            background-color: #3a4149;
-            color: #e0e0e0;
-            font-size: 16px;
         }
-        .form-control {
-            border-radius: 50px;
-            background-color: #3a4149;
-            color: #e0e0e0;
-            border: 2px solid #4e5d6c;
         }
-        .mt-3 {
-            margin-top: 20px !important;
         }
-        .card-footer {
-            text-align: center;
-            border-top: 1px solid #4e5d6c;
             padding: 15px;
         }
-        .custom-file-upload {
-            border: 1px solid #4e5d6c;
-            display: inline-block;
-            padding: 6px 12px;
-            cursor: pointer;
-            border-radius: 50px;
-            background-color: #3a4149;
-            color: #e0e0e0;
-        }
-        .custom-file-upload input[type="file"] {
             display: none;
         }
-        .form-group {
-            margin-top: 20px;
-        }
-        #loadingSpinner {
-            display: none;
-            margin-top: 20px;
         }
     </style>
 </head>
 <body>
     <div class="container">
-        <div class="row justify-content-center">
-            <div class="col-md-8">
-                <div class="card">
-                    <div class="card-header text-center">
-                        <h2>Upload and Process Files</h2>
-                    </div>
-                    <div class="card-body">
-                        <form id="uploadForm" action="{{ url_for('upload_file') }}" method="post"
-                            enctype="multipart/form-data">
-                            <h4 class="text-center">Upload Images</h4>
-                            <input type="file" name="files" multiple class="form-control-file" required>
-                            <button type="submit" class="btn btn-primary mt-3">Upload</button>
-                        </form>
-                        {% if uploaded_files %}
-                        <h4 class="mt-4">Uploaded Files:</h4>
-                        <ul class="list-group">
-                            {% for file in uploaded_files %}
-                            <li class="list-group-item d-flex justify-content-between align-items-center"
-                                style="background-color: #3a4149; color: #e0e0e0;">
-                                {{ file }}
-                                <a href="{{ url_for('remove_file', filename=file) }}" class="remove-file" title="Remove File">&times;</a>
-                            </li>
-                            {% endfor %}
-                        </ul>
-                        {% endif %}
-                        <form id="processForm" method="post" action="/process" class="mt-3">
-                            <button id="processBtn" type="submit" class="btn btn-success">Process All Files</button>
-                        </form>
-                        <div id="loadingSpinner" class="text-center">
-                            <div class="spinner-border text-primary" role="status">
-                                <span class="sr-only">Processing...</span>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="card-footer">
-                        <small>&copy; 2024 | Webashalar Pvt. Ltd.</small>
-                        <br>
-                        <a href="https://webashalarforml-imagedataextractor2.hf.space/" target="_blank" style="color: #007bff; text-decoration: none;">The app</a>
-                    </div>
-                </div>
-            </div>
         </div>
-    </div>
-    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
     <script>
-        document.getElementById("processForm").addEventListener("submit", function(event) {
-            document.getElementById("loadingSpinner").style.display = "block";
-            document.getElementById("processBtn").style.display = "none";
-        });
     </script>
 </body>
-</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/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" />
     <style>
         body {
+            background-color: #1c1c1e;
+            font-family: "Poppins", sans-serif;
+            color: #f5f5f7;
         }
+        h1 {
+            color: #e5e5e7;
+            text-align: center;
+            margin-bottom: 20px;
         }
+        .container {
+            margin-top: 50px;
         }
+        .file-upload-section {
+            background-color: #2c2c2e;
+            padding: 30px;
+            border-radius: 15px;
+            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
+            text-align: center;
         }
+        .file-upload-section input[type="file"] {
+            margin: 20px 0;
         }
+        .file-upload-section input[type="submit"] {
+            background-color: #ee4410;
+            color: white;
             border: none;
+            padding: 10px 20px;
+            border-radius: 5px;
+            transition: background-color 0.3s ease;
         }
+        .file-upload-section input[type="submit"]:hover {
+            background-color: #ee4410;
         }
+        .file-actions a {
+            margin: 0 10px;
+            text-decoration: none;
+            color: #ee4410;
         }
+        .file-actions a:hover {
+            color: #ee4410;
         }
+        .flash-message {
+            margin-bottom: 20px;
             padding: 15px;
+            border-radius: 5px;
+            color: #333;
         }
+        .alert {
+            text-align: center;
+            position: absolute;
+            top: 0;
+            right: 15%;
+        }
+        /* Loader styles */
+        .loader {
+            border: 8px solid #f3f3f3;
+            border-top: 8px solid #ee4410;
+            border-radius: 50%;
+            width: 60px;
+            height: 60px;
+            animation: spin 2s linear infinite;
+            margin: 20px auto;
             display: none;
         }
+        @keyframes spin {
+            0% {
+                transform: rotate(0deg);
+            }
+            100% {
+                transform: rotate(360deg);
+            }
         }
     </style>
 </head>
 <body>
     <div class="container">
+        <h1>Visiting Card Data Extractor</h1>
+        <div class="file-upload-section">
+            <form id="fileUploadForm" action="{{ url_for('upload_file') }}" method="POST" enctype="multipart/form-data">
+                <!-- <input type="file" name="file" class="form-control" required /> -->
+                <input type="file" name="files" multiple class="form-control" required />
+                <input type="submit" value="Upload your Images" class="btn btn-outline-primary" />
+            </form>
+            {% if session.get('uploaded_file') %}
+            <p class="mt-4">
+                Uploaded:
+                <span class="text-danger">{{ session.get('uploaded_file') }}</span>
+            </p>
+            <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>
+            {% endif %}
         </div>
+        <div class="container">
+            <!-- Loader -->
+            <div class="loader" id="loader"></div>
+        </div>
+        {% with messages = get_flashed_messages() %} {% if messages %}
+        <div class="alert alert-success mt-4" id="flash-message">
+            {{ messages[0] }}
+        </div>
+        {% endif %} {% endwith %}
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
     <script>
+        // Loader functionality
+        document.getElementById('fileUploadForm').onsubmit = function () {
+            document.getElementById('loader').style.display = 'block';
+        };
+        // Flash message auto-hide
+        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>