Hugging Face's logo

Spaces:
WebashalarForML
/
ImageDataExtractor2
Sleeping

App Files Community
WebashalarForML commited on
Commit
842ccb9
•
1 Parent(s): 2ffbfcc

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +54 -97
templates/index.html CHANGED
@@ -11,7 +11,6 @@
11
  background-color: #1c1c1e;
12
  font-family: "Poppins", sans-serif;
13
  color: #f5f5f7;
14
- margin: 0;
15
  }
16
 
17
  h1 {
@@ -21,7 +20,7 @@
21
  }
22
 
23
  .container {
24
- margin-top: 70px;
25
  }
26
 
27
  .file-upload-section {
@@ -68,7 +67,7 @@
68
 
69
  .alert {
70
  text-align: center;
71
- position: sticky;
72
  top: 0;
73
  right: 15%;
74
  }
@@ -95,115 +94,79 @@
95
  }
96
  }
97
 
98
- /* Top bar styles */
99
- .top-bar {
100
- background-color: #333;
101
- position: fixed;
102
- top: 0;
103
- width: 100%;
104
- z-index: 1000;
105
- padding: 10px 20px;
106
- display: flex;
107
- justify-content: space-between;
108
- align-items: center;
109
- }
110
-
111
- .top-bar h2 {
112
- color: white;
113
- }
114
-
115
- /* Navigation tab styles */
116
  .tab {
117
- display: flex;
118
- gap: 10px;
 
119
  }
120
 
121
  .tab button {
122
- background-color: inherit;
123
  border: none;
124
- outline: none;
 
 
125
  cursor: pointer;
126
- padding: 10px 16px;
127
- transition: 0.3s;
128
- font-size: 17px;
129
- color: white;
130
  }
131
 
132
  .tab button:hover {
133
- background-color: #575757;
134
  }
135
 
 
136
  .tab button.active {
137
  background-color: #444;
138
  }
139
-
140
- /* Tab content styles */
141
- .tabcontent {
142
- display: none;
143
- padding: 20px;
144
- margin-top: 70px;
145
- }
146
-
147
- /* Responsive design */
148
- @media (max-width: 768px) {
149
- .tab {
150
- flex-direction: column;
151
- }
152
- }
153
  </style>
154
  </head>
155
 
156
  <body>
157
- <!-- Locked Top Bar with Tabs -->
158
- <div class="top-bar">
159
- <h2>Capture AI</h2>
160
- <!-- Navigation Tabs -->
161
  <div class="tab">
162
- <button class="tablink" onclick="openLink('https://webashalarforml-imagedataextractor2.hf.space/', this, '#ff4d00')" id="defaultOpen">Visiting Card Data Extractor</button>
163
- <button class="tablink" onclick="openLink('https://webashalarforml-resumeextractor2.hf.space/', this, '#ff4d00')">Resume Data Extractor</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
164
  </div>
165
- </div>
166
 
167
- <!-- Tab Content for Image Extractor -->
168
- <div id="ImageExtractor" class="tabcontent">
169
  <div class="container">
170
- <h1>Visiting Card Data Extractor</h1>
171
- <div class="file-upload-section">
172
- <form id="fileUploadFormImageExtractor" action="{{ url_for('upload_file') }}" method="POST" enctype="multipart/form-data">
173
- <input type="file" name="files" multiple class="form-control" required />
174
- <input type="submit" value="Upload your Images" class="btn btn-outline-primary" />
175
- </form>
176
-
177
- {% if session.get('uploaded_files') %}
178
- <p class="mt-4">
179
- Uploaded:
180
- <span class="text-danger">{{ session.get('uploaded_files') }}</span>
181
- </p>
182
- <form action="{{ url_for('remove_file') }}" method="post">
183
- <button type="submit" class="btn btn-outline-danger">
184
- <i class="bi bi-trash"></i> Remove Uploaded File
185
- </button>
186
- </form>
187
- {% endif %}
188
- </div>
189
  </div>
190
 
191
- <!-- Loader -->
192
- <div class="loader" id="loader"></div>
193
-
194
- {% with messages = get_flashed_messages() %}
195
- {% if messages %}
196
  <div class="alert alert-success mt-4" id="flash-message">
197
  {{ messages[0] }}
198
  </div>
199
- {% endif %}
200
- {% endwith %}
201
  </div>
202
 
203
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
204
  <script>
205
- // Loader functionality for both forms
206
- document.getElementById('fileUploadFormImageExtractor').onsubmit = function () {
207
  document.getElementById('loader').style.display = 'block';
208
  };
209
 
@@ -217,23 +180,17 @@
217
  }
218
  }, 3000);
219
 
220
- // Tab functionality
221
- function openPage(pageName, elmnt, color) {
222
- var i, tabcontent, tablinks;
223
- tabcontent = document.getElementsByClassName("tabcontent");
224
- for (i = 0; i < tabcontent.length; i++) {
225
- tabcontent[i].style.display = "none";
226
- }
227
- tablinks = document.getElementsByClassName("tablink");
228
- for (i = 0; i < tablinks.length; i++) {
229
- tablinks[i].style.backgroundColor = "";
230
- }
231
- document.getElementById(pageName).style.display = "block";
232
- elmnt.style.backgroundColor = color;
233
- }
234
 
235
- // Set default tab
236
- document.getElementById("defaultOpen").click();
 
237
  </script>
238
  </body>
239
 
 
11
  background-color: #1c1c1e;
12
  font-family: "Poppins", sans-serif;
13
  color: #f5f5f7;
 
14
  }
15
 
16
  h1 {
 
20
  }
21
 
22
  .container {
23
+ margin-top: 50px;
24
  }
25
 
26
  .file-upload-section {
 
67
 
68
  .alert {
69
  text-align: center;
70
+ position: absolute;
71
  top: 0;
72
  right: 15%;
73
  }
 
94
  }
95
  }
96
 
97
+ /* Tabs styles */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
98
  .tab {
99
+ position: absolute;
100
+ top: 10px;
101
+ left: 10px;
102
  }
103
 
104
  .tab button {
105
+ background-color: #ee4410;
106
  border: none;
107
+ padding: 10px;
108
+ margin: 0 5px;
109
+ color: #f5f5f7;
110
  cursor: pointer;
111
+ border-radius: 5px;
112
+ transition: background-color 0.3s ease;
 
 
113
  }
114
 
115
  .tab button:hover {
116
+ background-color: #444;
117
  }
118
 
119
+ .tab button:active,
120
  .tab button.active {
121
  background-color: #444;
122
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
123
  </style>
124
  </head>
125
 
126
  <body>
127
+ <div class="container">
128
+ <h1>Visiting Card Data Extractor</h1>
129
+
 
130
  <div class="tab">
131
+ <button class="tablinks" onclick="openLink('https://webashalarforml-imagedataextractor2.hf.space/')">Image Data Extractor</button>
132
+ <button class="tablinks active" onclick="openLink('https://webashalarforml-resumeextractor2.hf.space/')">Resume Data Extractor</button>
133
+ </div>
134
+
135
+ <div class="file-upload-section">
136
+ <form id="fileUploadForm" action="{{ url_for('upload_file') }}" method="POST" enctype="multipart/form-data">
137
+ <input type="file" name="files" multiple class="form-control" required />
138
+ <input type="submit" value="Upload your Images" class="btn btn-outline-primary" />
139
+ </form>
140
+
141
+ {% if session.get('uploaded_files') %}
142
+ <p class="mt-4">
143
+ Uploaded:
144
+ <span class="text-danger">{{ session.get('uploaded_files') }}</span>
145
+ </p>
146
+ <form action="{{ url_for('remove_file') }}" method="post">
147
+ <button type="submit" class="btn btn-outline-danger">
148
+ <i class="bi bi-trash"></i> Remove Uploaded File
149
+ </button>
150
+ </form>
151
+ {% endif %}
152
  </div>
 
153
 
 
 
154
  <div class="container">
155
+ <!-- Loader -->
156
+ <div class="loader" id="loader"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
157
  </div>
158
 
159
+ {% with messages = get_flashed_messages() %} {% if messages %}
 
 
 
 
160
  <div class="alert alert-success mt-4" id="flash-message">
161
  {{ messages[0] }}
162
  </div>
163
+ {% endif %} {% endwith %}
 
164
  </div>
165
 
166
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
167
  <script>
168
+ // Loader functionality
169
+ document.getElementById('fileUploadForm').onsubmit = function () {
170
  document.getElementById('loader').style.display = 'block';
171
  };
172
 
 
180
  }
181
  }, 3000);
182
 
183
+ // Function to open links
184
+ function openLink(url, element) {
185
+ window.open(url, '_blank'); // Opens the link in a new tab
186
+
187
+ // Remove "active" class from all buttons
188
+ const buttons = document.querySelectorAll('.tab button');
189
+ buttons.forEach(button => button.classList.remove('active'));
 
 
 
 
 
 
 
190
 
191
+ // Add "active" class to the clicked button
192
+ element.classList.add('active');
193
+ }
194
  </script>
195
  </body>
196