create the web site from the beginning

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Swiss Army Web Tools 🛠️</title>
-    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/feather-icons"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
@@ -53,7 +53,7 @@
                 <button class="tab-btn px-6 py-3 font-medium text-gray-500 hover:text-indigo-600" data-tab="shortener">Link Shortener</button>
                 <button class="tab-btn px-6 py-3 font-medium text-gray-500 hover:text-indigo-600" data-tab="bgremover">BG Remover</button>
                 <button class="tab-btn px-6 py-3 font-medium text-gray-500 hover:text-indigo-600" data-tab="password">Password Gen</button>
-</div>
+            </div>
 
             <div class="p-6">
                 <!-- QR Code Generator -->
@@ -82,6 +82,7 @@
                                 </div>
                             </div>
                             <p class="text-sm text-gray-500">Scan the QR code with your phone</p>
+                        </div>
                     </div>
                 </div>
 
@@ -152,8 +153,8 @@
                         </div>
                     </div>
                 </div>
-            </div>
-<!-- Text Counter -->
+
+                <!-- Text Counter -->
                 <div id="counter" class="tab-content">
                     <h2 class="text-2xl font-semibold text-gray-800 mb-4">Text & Character Counter</h2>
                     <div class="mb-4">
@@ -196,9 +197,10 @@
                         </div>
                     </div>
                 </div>
+
                 <!-- Background Remover -->
                 <div id="bgremover" class="tab-content">
-<h2 class="text-2xl font-semibold text-gray-800 mb-4">Background Remover</h2>
+                    <h2 class="text-2xl font-semibold text-gray-800 mb-4">Background Remover</h2>
                     <div class="mb-4">
                         <label for="imageUpload" class="block text-gray-700 mb-2">Upload image</label>
                         <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center cursor-pointer hover:border-indigo-400 transition" id="dropZone">
@@ -241,6 +243,7 @@
             <p>Made with <i data-feather="heart" class="inline text-red-500 w-4 h-4"></i> for the web</p>
         </footer>
     </div>
+
     <script>
         // Tab switching
         document.querySelectorAll('.tab-btn').forEach(btn => {
@@ -266,8 +269,7 @@
             });
         });
 
-        let fileInput = document.getElementById('imageUpload');
-// QR Code Generator
+        // QR Code Generator
         document.getElementById('generateQR').addEventListener('click', () => {
             const text = document.getElementById('qrText').value.trim();
             if (!text) {
@@ -312,6 +314,7 @@
             const sentences = text.trim() ? text.split(/[.!?]+/).filter(s => s.trim().length > 0).length : 0;
             document.getElementById('sentenceCount').textContent = sentences;
         });
+
         // Link Shortener with Rebrandly API
         document.getElementById('shortenBtn').addEventListener('click', async () => {
             const longUrl = document.getElementById('longUrl').value.trim();
@@ -345,7 +348,8 @@
                 alert('Failed to shorten URL. Please try again later.');
             }
         });
-document.getElementById('copyShortUrl').addEventListener('click', () => {
+
+        document.getElementById('copyShortUrl').addEventListener('click', () => {
             const shortUrl = document.getElementById('shortUrl');
             shortUrl.select();
             document.execCommand('copy');
@@ -359,8 +363,9 @@ document.getElementById('copyShortUrl').addEventListener('click', () => {
                 feather.replace();
             }, 2000);
         });
+
         // Background Remover with remove.bg API
-const dropZone = document.getElementById('dropZone');
+        const dropZone = document.getElementById('dropZone');
         const fileInput = document.getElementById('imageUpload');
         
         dropZone.addEventListener('click', () => fileInput.click());
@@ -410,6 +415,7 @@ const dropZone = document.getElementById('dropZone');
             };
             reader.readAsDataURL(file);
         }
+
         document.getElementById('removeBgBtn').addEventListener('click', async () => {
             const preview = document.getElementById('bgRemoverPreview');
             const originalImg = document.getElementById('originalImage');
@@ -449,6 +455,7 @@ const dropZone = document.getElementById('dropZone');
             link.href = processedImg.src;
             link.click();
         });
+
         // Password Generator
         document.getElementById('passwordLength').addEventListener('input', function() {
             document.getElementById('lengthValue').textContent = this.value;
@@ -550,6 +557,6 @@ const dropZone = document.getElementById('dropZone');
 
         // Initialize feather icons
         feather.replace();
-</script>
+    </script>
 </body>
-</html>
+</html>