ImageDataExtractor2

Sleeping

App Files Files Community

WebashalarForML commited on Oct 9

Commit

a96861e

•

1 Parent(s): 3f165b2

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +57 -26

templates/index.html CHANGED Viewed

@@ -11,6 +11,7 @@
             background-color: #1c1c1e;
             font-family: "Poppins", sans-serif;
             color: #f5f5f7;
         }
         h1 {
@@ -20,7 +21,7 @@
         }
         .container {
-            margin-top: 50px;
         }
         .file-upload-section {
@@ -67,7 +68,7 @@
         .alert {
             text-align: center;
-            position: absolute;
             top: 0;
             right: 15%;
         }
@@ -94,44 +95,76 @@
             }
         }
-        /* 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 active" onclick="openLink('https://webashalarforml-imagedataextractor2.hf.space/')">Visiting Card Data Extractor</button>
-            <button class="tablinks" 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 />
@@ -182,14 +215,12 @@
             }
         }, 3000);
-        // Function to open links
-        function openLink(url, element) {
-            window.open(url); // 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');
         }

             background-color: #1c1c1e;
             font-family: "Poppins", sans-serif;
             color: #f5f5f7;
+            margin: 0;
         }
         h1 {
         }
         .container {
+            margin-top: 70px;
         }
         .file-upload-section {
         .alert {
             text-align: center;
+            position: sticky;
             top: 0;
             right: 15%;
         }
             }
         }
+        /* 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="openPage('ImageExtractor', this, '#ff4d00')" id="defaultOpen">Visiting Card Data Extractor</button>
+            <button class="tablink" onclick="openPage('ResumeParserExtractor', this, '#ff4d00')">Resume Data Extractor</button>
+        </div>
+    </div>
+     <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="files" multiple class="form-control" required />
             }
         }, 3000);
+        // Function to open links in the same tab
+        function openLink(url) {
+            window.location.href = url; // Redirects to the specified URL in the same 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');
         }