more vibecoded additions to string tools lol'

Web-Tools/String-Tools.html

@@ -57,6 +57,16 @@
             border-color: #0066ff;
             background-color: #fff;
         }
+        .section-header {
+            font-size: 0.85rem;
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            color: #0066ff;
+            margin: 20px 0 10px 0;
+            padding-bottom: 4px;
+            border-bottom: 2px solid #e1effe;
+        }
         .output-card {
             background-color: #f8f9fa;
             border: 1px solid #e9ecef;
@@ -64,6 +74,9 @@
             padding: 12px;
             margin-bottom: 12px;
         }
+        .output-card.hidden {
+            display: none;
+        }
         .output-card.error {
             border-color: #ffc9c9;
             background-color: #fff5f5;
@@ -99,6 +112,8 @@
         <textarea id="strInput" placeholder="Type or paste something here..."></textarea>
     </div>
 
+    <div class="section-header">String Transformations</div>
+
     <div class="output-card">
         <div class="title">Character Count (Length)</div>
         <div class="value" id="outLength">0</div>
@@ -124,15 +139,32 @@
         <div class="value" id="outDecoded">---</div>
     </div>
 
-    <div class="output-card" id="b64EncCard">
+    <div class="output-card">
         <div class="title">Base64 Encoded</div>
         <div class="value" id="outB64Enc">---</div>
     </div>
 
-    <div class="output-card" id="b64DecCard">
+    <div class="output-card hidden" id="b64DecCard">
         <div class="title">Base64 Decoded</div>
         <div class="value" id="outB64Dec">---</div>
     </div>
+
+    <div class="section-header">Hashes</div>
+
+    <div class="output-card">
+        <div class="title">SHA-1</div>
+        <div class="value" id="outSha1">---</div>
+    </div>
+
+    <div class="output-card">
+        <div class="title">SHA-256</div>
+        <div class="value" id="outSha256">---</div>
+    </div>
+
+    <div class="output-card">
+        <div class="title">SHA-512</div>
+        <div class="value" id="outSha512">---</div>
+    </div>
 </div>
 
 <script>
@@ -145,11 +177,14 @@
     const urlDecodedCard = document.getElementById('urlDecodedCard');
     
     const outB64Enc = document.getElementById('outB64Enc');
-    const b64EncCard = document.getElementById('b64EncCard');
     const outB64Dec = document.getElementById('outB64Dec');
     const b64DecCard = document.getElementById('b64DecCard');
 
-    // Helper functions to handle Unicode safely in Base64 (UTF-8 support)
+    const outSha1 = document.getElementById('outSha1');
+    const outSha256 = document.getElementById('outSha256');
+    const outSha512 = document.getElementById('outSha512');
+
+    // Safe Unicode Base64 Helper
     function utf8ToBase64(str) {
         return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (match, p1) => {
             return String.fromCharCode('0x' + p1);
@@ -162,7 +197,16 @@
         }).join(''));
     }
 
-    strInput.addEventListener('input', () => {
+    // Helper function to calculate Web Crypto hashes
+    async function computeHash(algo, text) {
+        if (!text) return '---';
+        const msgUint8 = new TextEncoder().encode(text);
+        const hashBuffer = await crypto.subtle.digest(algo, msgUint8);
+        const hashArray = Array.from(new Uint8Array(hashBuffer));
+        return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
+    }
+
+    strInput.addEventListener('input', async () => {
         const val = strInput.value;
 
         if (val.length === 0) {
@@ -173,14 +217,16 @@
             outDecoded.textContent = '---';
             outB64Enc.textContent = '---';
             outB64Dec.textContent = '---';
+            outSha1.textContent = '---';
+            outSha256.textContent = '---';
+            outSha512.textContent = '---';
             
             urlDecodedCard.classList.remove('error');
-            b64EncCard.classList.remove('error');
+            b64DecCard.classList.add('hidden');
-            b64DecCard.classList.remove('error');
             return;
         }
 
-        // String Length, Uppercase, Lowercase, URL Encoded
+        // Basic Transformations
         outLength.textContent = val.length;
         outUpper.textContent = val.toUpperCase();
         outLower.textContent = val.toLowerCase();
@@ -198,25 +244,34 @@
         }
 
         // Base64 Encoded
-        try {
         outB64Enc.textContent = utf8ToBase64(val);
-            outB64Enc.classList.remove('error-text');
+
-            b64EncCard.classList.remove('error');
+        // Base64 Decoded (Hidden unless input is valid Base64)
+        const trimmedVal = val.trim();
+        // Regex validates Base64 formatting before attempting decoding
+        const isB64Format = /^[A-Za-z0-9+/=]+$/.test(trimmedVal) && (trimmedVal.length % 4 === 0);
+        
+        if (isB64Format) {
+            try {
+                const decoded = base64ToUtf8(trimmedVal);
+                outB64Dec.textContent = decoded;
+                b64DecCard.classList.remove('hidden');
             } catch (e) {
-            outB64Enc.textContent = "Error encoding to Base64";
+                b64DecCard.classList.add('hidden');
-            outB64Enc.classList.add('error-text');
+            }
-            b64EncCard.classList.add('error');
+        } else {
+            b64DecCard.classList.add('hidden');
         }
 
-        // Base64 Decoded
+        // Calculate Cryptographic Hashes asynchronously
         try {
-            outB64Dec.textContent = base64ToUtf8(val.trim());
+            outSha1.textContent = await computeHash('SHA-1', val);
-            outB64Dec.classList.remove('error-text');
+            outSha256.textContent = await computeHash('SHA-256', val);
-            b64DecCard.classList.remove('error');
+            outSha512.textContent = await computeHash('SHA-512', val);
         } catch (e) {
-            outB64Dec.textContent = "Error: Invalid Base64 string";
+            outSha1.textContent = "Error computing hash";
-            outB64Dec.classList.add('error-text');
+            outSha256.textContent = "Error computing hash";
-            b64DecCard.classList.add('error');
+            outSha512.textContent = "Error computing hash";
         }
     });
 </script>