Update templates/index.html

templates/index.html

@@ -9,114 +9,162 @@
  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: #ff9f0a;
- 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: #e68a00;
- }
- .file-actions a {
- margin: 0 10px;
- text-decoration: none;
- color: #ff9f0a;
- }
- .file-actions a:hover {
- color: #e68a00;
- }
- .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 #ff9f0a;
- 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); }
- }
- 
- /* 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;
- }
- 
+ body {
+ background-color: #1c1c1e;
+ font-family: "Poppins", sans-serif;
+ color: #f5f5f7;
+ margin: 0;
+ }
+
+ h1 {
+ color: #e5e5e7;
+ text-align: center;
+ margin-bottom: 20px;
+ }
+
+ .container {
+ margin-top: 70px;
+ }
+
+ .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: #e68a00;
+ 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: #e68a00;
+ }
+
+ .file-actions a {
+ margin: 0 10px;
+ text-decoration: none;
+ color: #e68a00;
+ }
+
+ .file-actions a:hover {
+ color: #e68a00;
+ }
+
+ .flash-message {
+ margin-bottom: 20px;
+ padding: 15px;
+ border-radius: 5px;
+ color: #333;
+ }
+
+ .alert {
+ text-align: center;
+ position: sticky;
+ top: 0;
+ right: 15%;
+ }
+
+ /* Loader styles */
+ .loader {
+ border: 8px solid #f3f3f3;
+ border-top: 8px solid #e68a00;
+ 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);
+ }
+ }
+
+ /* 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>
- <div class="container">
- <h1>Resume 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 class="top-bar">
+ <h2>Capture AI</h2>
+ <!-- Navigation Tabs -->
+ <div class="tab">
+ <button class="tablinks" onclick="openLink('https://webashalarforml-imagedataextractor2.hf.space/', this, '#ff4d00')">Visiting Card Data Extractor</button>
+ <button class="tablinks" onclick="openLink('https://webashalarforml-resumeextractor2.hf.space/', this, '#ff4d00')" id="defaultOpen">Resume Data Extractor</button>
  </div>
-
+ </div>
+ <div class="container">
+ <h1>Resume Data Extractor</h1>
  <div class="file-upload-section"> 
 
  <form