From 9f4c48d504f8e935d9825a2302b24c973b7ca665 Mon Sep 17 00:00:00 2001
From: Gandhi9381 <gandhinatte@gmail.com>
Date: Fri, 31 Oct 2025 05:16:01 -0700
Subject: [PATCH] Create index

To enhance your password tool, I focused on accessibility, user experience (UX), and semantic structure. I made it more accessible by explicitly linking all <label>s to their inputs (like the slider and checkboxes) using for/id, replacing the div-based strength bars with the proper <meter> tag, and adding aria-live so screen readers announce dynamic updates like "Copied!" or the new strength level. For better UX, I changed the checker input to type="password" to mask typing and added a "Show Password" toggle. Finally, I improved the HTML structure by wrapping the generator and checker controls in separate <form> tags and grouping the checkboxes with a <fieldset>, making the tool more robust and easier for all users to navigate.
---
 index | 106 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 106 insertions(+)
 create mode 100644 index
diff --git a/index b/index
new file mode 100644
index 0000000..9e7e74c
--- /dev/null
+++ b/index
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Advanced Password Tool 🔐</title>
+  <link rel="stylesheet" href="style.css">
+  
+  <style>
+    .sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border-width: 0;
+    }
+  </style>
+</head>
+<body>
+
+  <div class="container">
+
+    <div class="card glass">
+      <h1 class="neon">Create Your Own Password</h1>
+      
+      <div class="output">
+        <label for="password" class="sr-only">Generated Password</label>
+        <input type="text" id="password" readonly placeholder="Generated Password" aria-live="polite" autocomplete="new-password">
+        <button id="copyBtn" class="btn">Copy</button>
+        <span id="copyMessage" class="copy-feedback" aria-live="polite"></span>
+      </div>
+
+      <form id="generatorForm">
+        <div class="controls">
+          
+          <div class="control-group">
+            <label for="length">Password Length: <span id="lengthValue">12</span></label>
+            <input type="range" id="length" min="4" max="30" value="12" aria-labelledby="length">
+          </div>
+
+          <fieldset class="options">
+            <legend>Character Types</legend>
+            
+            <div class="option-item">
+              <input type="checkbox" id="uppercase" checked>
+              <label for="uppercase">Uppercase</label>
+            </div>
+            <div class="option-item">
+              <input type="checkbox" id="lowercase" checked>
+              <label for="lowercase">Lowercase</label>
+            </div>
+            <div class="option-item">
+              <input type="checkbox" id="numbers" checked>
+              <label for="numbers">Numbers</label>
+            </div>
+            <div class="option-item">
+              <input type="checkbox" id="symbols">
+              <label for="symbols">Symbols</label>
+            </div>
+          </fieldset>
+
+          <button id="generate" class="btn glow" type="submit">Generate Password</button>
+        </div>
+      </form>
+
+      <div class="strength">
+        <p id="gen-strength-label">Password Strength: 
+          <span id="strengthText" aria-live="polite">Weak</span>
+        </p>
+        <meter id="genMeter" min="0" max="4" value="0" aria-labelledby="gen-strength-label"></meter>
+      </div>
+    </div>
+
+
+    <div class="card glass">
+      <h1 class="neon">Check Your Password Strength</h1>
+      
+      <form id="checkerForm">
+        <div class="output">
+          <label for="userPassword" class="sr-only">Enter your password to check</label>
+          <input type="password" id="userPassword" placeholder="Enter your password" autocomplete="off">
+          <button id="checkBtn" class="btn secondary" type="submit">Check</button>
+        </div>
+
+        <div class="password-toggle">
+          <input type="checkbox" id="showPassword">
+          <label for="showPassword">Show Password</label>
+        </div>
+      </form>
+
+      <div class="strength">
+        <p id="user-strength-label">Strength: 
+          <span id="userStrength" aria-live="polite">-</span>
+        </p>
+        <meter id="userMeter" min="0" max="4" value="0" aria-labelledby="user-strength-label"></meter>
+      </div>
+    </div>
+  </div>
+  
+  <script src="script.js"></script>
+</body>
+</html>
