add index updated

templates/index.html

@@ -26,7 +26,8 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0//static/css/all.min.css">
     <!-- Animate CSS-->
     <link href="/static/css/animate.css" rel="stylesheet" type="text/css">
-
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link rel="stylesheet" href="styles.css">
     <!--Google Webfonts-->
     <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
 </head>
@@ -77,7 +78,6 @@
 
                         <!--Main Navigation-->
                         <nav id="nav-main">
-                            <aside>
                                 <ul>
                                     <li>
                                         <a href="#about">About</a>
@@ -87,7 +87,6 @@
                                     </li>
                                 </ul>
                         </nav>
-                        </aside>
                         <!--End of Main Navigation-->
 
                         <div id="nav-trigger"><span></span></div>
@@ -103,7 +102,7 @@
                 <div class="row1"><span>Make</span><span>Life</span><span>Easier</span><span>for</span><span>Everyone</span><span>with</span><span>ExCeipt's</span><span>Smart</span><span>Text</span><span>Extraction</span></div>
                 <div class="row1"><span>ExCeipt</span><span>Seamless</span><span>Text</span><span>Extraction</span><span>Every</span><span>Day</span><span>and</span><span>Productive</span><span>Day</span></div>
                 <div class="row1"><span>Prosper</span><span>with</span><span>Effortless</span><span>Text</span><span>Extraction</span><span>Thanks</span><span>to</span><span>ExCeipt</span><span>Automation</span></div>
-            </div>
+              </div>
 
             <!-- Banner Content -->
             <div id="banner-content" class="row clearfix">
@@ -130,7 +129,9 @@
                                 </div>
                             </div>
                             <div class="buttondiv">
-                                <button class="uploadbutton wow bounceInUp" data-wow-offset="3" data-wow-duration="1.5s" data-wow-delay="0.5s" type="submit" value="Upload">Upload
+                              <button class="uploadbutton wow bounceInUp" data-wow-offset="3" data-wow-duration="1.5s" data-wow-delay="0.5s" type="submit" onclick="uploadClicked()">
+                                <span id="uploadIcon"><i class="fas fa-upload"></i></span>
+                                <span id="uploadText">Upload
                     <div class="star-1">
                         <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve"
                             xmlns="http://www.w3.org/2000/svg">
@@ -237,6 +238,40 @@
             <!--End of Row-->
         </header>
     </div>
+    <script>
+     function uploadClicked() {
+  var button = document.querySelector('.uploadbutton');
+  var uploadIcon = document.getElementById('uploadIcon');
+  var uploadText = document.getElementById('uploadText');
+  var fileInput = document.getElementById('file-input');
+  var uploadedFileName = document.getElementById('uploaded-file-name');
+
+  // Check if a file is selected
+  if (!fileInput.files || fileInput.files.length === 0) {
+    alert('Please select a file to upload.');
+    return;
+  }
+
+  // Check if the selected file is an image
+  var allowedExtensions = /(\.jpg|\.jpeg|\.png)$/i;
+  if (!allowedExtensions.exec(fileInput.value)) {
+    alert('Please upload a valid image file.');
+    return;
+  }
+
+  // Change the icon and text
+  uploadIcon.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
+  uploadText.textContent = 'Uploading...';
+
+  // Simulate the upload process (you can replace this with your actual upload logic)
+  setTimeout(function() {
+    // Reset the button after the upload is complete
+    uploadIcon.innerHTML = '<i class="fas fa-upload"></i>';
+    uploadText.textContent = 'Uploaded';
+  }, 2000); 
+}
+
+    </script>
     <!-- Include JavaScript resources -->
     <script src="/static/js/jquery.1.8.3.min.js"></script>
     <script src="/static/js/wow.min.js"></script>