ImageDataExtractor2

Running

App Files Files Community

WebashalarForML commited on Oct 9, 2024

Commit

842ccb9

verified ·

1 Parent(s): 2ffbfcc

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +54 -97

templates/index.html CHANGED Viewed

@@ -11,7 +11,6 @@
             background-color: #1c1c1e;
             font-family: "Poppins", sans-serif;
             color: #f5f5f7;
-            margin: 0;
         }
         h1 {
@@ -21,7 +20,7 @@
         }
         .container {
-            margin-top: 70px;
         }
         .file-upload-section {
@@ -68,7 +67,7 @@
         .alert {
             text-align: center;
-            position: sticky;
             top: 0;
             right: 15%;
         }
@@ -95,115 +94,79 @@
             }
         }
-        /* Top bar styles */
-        .top-bar {
-            background-color: #333;
-            position: fixed;
-            top: 0;
-            width: 100%;
-            z-index: 1000;
-            padding: 10px 20px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        .top-bar h2 {
-            color: white;
-        }
-        /* Navigation tab styles */
         .tab {
-            display: flex;
-            gap: 10px;
         }
         .tab button {
-            background-color: inherit;
             border: none;
-            outline: none;
             cursor: pointer;
-            padding: 10px 16px;
-            transition: 0.3s;
-            font-size: 17px;
-            color: white;
         }
         .tab button:hover {
-            background-color: #575757;
         }
         .tab button.active {
             background-color: #444;
         }
-        /* Tab content styles */
-        .tabcontent {
-            display: none;
-            padding: 20px;
-            margin-top: 70px;
-        }
-        /* Responsive design */
-        @media (max-width: 768px) {
-            .tab {
-                flex-direction: column;
-            }
-        }
     </style>
 </head>
 <body>
-    <!-- Locked Top Bar with Tabs -->
-    <div class="top-bar">
-        <h2>Capture AI</h2>
-        <!-- Navigation Tabs -->
         <div class="tab">
-            <button class="tablink" onclick="openLink('https://webashalarforml-imagedataextractor2.hf.space/', this, '#ff4d00')" id="defaultOpen">Visiting Card Data Extractor</button>
-            <button class="tablink" onclick="openLink('https://webashalarforml-resumeextractor2.hf.space/', this, '#ff4d00')">Resume Data Extractor</button>
         </div>
-    </div>
-    <!-- Tab Content for Image Extractor -->
-    <div id="ImageExtractor" class="tabcontent">
         <div class="container">
-            <h1>Visiting Card Data Extractor</h1>
-            <div class="file-upload-section">
-                <form id="fileUploadFormImageExtractor" action="{{ url_for('upload_file') }}" method="POST" enctype="multipart/form-data">
-                    <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_files') %}
-                <p class="mt-4">
-                    Uploaded:
-                    <span class="text-danger">{{ session.get('uploaded_files') }}</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>
-        <!-- Loader -->
-        <div class="loader" id="loader"></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 for both forms
-        document.getElementById('fileUploadFormImageExtractor').onsubmit = function () {
             document.getElementById('loader').style.display = 'block';
         };
@@ -217,23 +180,17 @@
             }
         }, 3000);
-        // Tab functionality
-        function openPage(pageName, elmnt, color) {
-            var i, tabcontent, tablinks;
-            tabcontent = document.getElementsByClassName("tabcontent");
-            for (i = 0; i < tabcontent.length; i++) {
-                tabcontent[i].style.display = "none";
-            }
-            tablinks = document.getElementsByClassName("tablink");
-            for (i = 0; i < tablinks.length; i++) {
-                tablinks[i].style.backgroundColor = "";
-            }
-            document.getElementById(pageName).style.display = "block";
-            elmnt.style.backgroundColor = color;
-        }
-        // Set default tab
-        document.getElementById("defaultOpen").click();
     </script>
 </body>

             background-color: #1c1c1e;
             font-family: "Poppins", sans-serif;
             color: #f5f5f7;
         }
         h1 {
         }
         .container {
+            margin-top: 50px;
         }
         .file-upload-section {
         .alert {
             text-align: center;
+            position: absolute;
             top: 0;
             right: 15%;
         }
             }
         }
+        /* Tabs styles */
         .tab {
+            position: absolute;
+            top: 10px;
+            left: 10px;
         }
         .tab button {
+            background-color: #ee4410;
             border: none;
+            padding: 10px;
+            margin: 0 5px;
+            color: #f5f5f7;
             cursor: pointer;
+            border-radius: 5px;
+            transition: background-color 0.3s ease;
         }
         .tab button:hover {
+            background-color: #444;
         }
+        .tab button:active,
         .tab button.active {
             background-color: #444;
         }
     </style>
 </head>
 <body>
+    <div class="container">
+        <h1>Visiting Card Data Extractor</h1>
         <div class="tab">
+            <button class="tablinks" onclick="openLink('https://webashalarforml-imagedataextractor2.hf.space/')">Image Data Extractor</button>
+            <button class="tablinks active" onclick="openLink('https://webashalarforml-resumeextractor2.hf.space/')">Resume Data Extractor</button>
+       </div>
+        <div class="file-upload-section">
+            <form id="fileUploadForm" action="{{ url_for('upload_file') }}" method="POST" enctype="multipart/form-data">
+                <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_files') %}
+            <p class="mt-4">
+                Uploaded:
+                <span class="text-danger">{{ session.get('uploaded_files') }}</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';
         };
             }
         }, 3000);
+        // Function to open links
+        function openLink(url, element) {
+            window.open(url, '_blank'); // Opens the link in a new tab
+            // Remove "active" class from all buttons
+            const buttons = document.querySelectorAll('.tab button');
+            buttons.forEach(button => button.classList.remove('active'));
+            // Add "active" class to the clicked button
+            element.classList.add('active');
+        }
     </script>
 </body>