Update app.py

app.py

@@ -1,22 +1,24 @@
 import gradio as gr
 import re
 
-# 1. Helper function for labels
+# 1. Helper function for requirement labels
 def get_label(is_met, text):
-    color = "#28a745" if is_met else "#dc3545"
+    color = "#28a745" if is_met else "#dc3545" # Green if met, Red if not
     symbol = "✅" if is_met else "❌"
     return f"<b style='color:{color}; font-size: 1.1em;'>{symbol} {text}</b>"
 
-# 2. Checklist logic
+# 2. Function to build the checklist HTML and calculate strength
 def render_html(password=""):
+    # Define Regex rules
     has_upper = re.search(r"[A-Z]", password)
     has_lower = re.search(r"[a-z]", password)
     has_num = re.search(r"\d", password)
     has_spec = re.search(r"[!@#$%^&*(),.?\":{}|<>]", password)
     has_len = len(password) >= 8
 
+    # Adaptive background for Light/Dark mode compatibility
     checklist_html = f"""
-    <div style="border: 1px solid #ddd; padding: 15px; border-radius: 10px; background-color: #fafafa;">
+    <div style="border: 1px solid #888; padding: 15px; border-radius: 10px; background-color: rgba(128, 128, 128, 0.05);">
         <p style="margin-top:0;"><b>Password Requirements:</b></p>
         {get_label(has_len, "8+ Characters")} &nbsp; | &nbsp; 
         {get_label(has_upper, "Capital (A-Z)")} &nbsp; | &nbsp; 
@@ -25,22 +27,28 @@ def render_html(password=""):
         {get_label(has_spec, "Special (!@#)")}
     </div>
     """
+    
     score = sum([bool(has_len), bool(has_upper), bool(has_lower), bool(has_num), bool(has_spec)])
     strength_pct = (score / 5) * 100
+    
     return checklist_html, strength_pct
 
-# 3. Visibility toggle
+# 3. Visibility and Dark Mode Logic
 def toggle_visibility(is_visible):
     new_type = "text" if is_visible else "password"
     new_label = "Hide Password 👁️" if is_visible else "Show Password 👁️‍🗨️"
     return gr.update(type=new_type), new_label, not is_visible
 
-# 4. UI Build
+# JavaScript snippet to toggle the .dark class on the body
+toggle_dark_js = """() => { document.body.classList.toggle('dark'); }"""
+
+# 4. Build the UI
 custom_css = ".gradio-container { max-width: 800px; margin: auto; }"
 
-with gr.Blocks() as demo: # Moved theme/css to launch()
+with gr.Blocks() as demo:
     gr.Markdown("# 🛡️ SmartPass Validator")
-    gr.Markdown("The checklist below shows what you need for a secure password.")
+    gr.Markdown("Check your password strength and toggle between light and dark modes.")
+    
     visible_state = gr.State(True)
 
     with gr.Row():
@@ -49,7 +57,7 @@ with gr.Blocks() as demo: # Moved theme/css to launch()
                 label="Your Password", 
                 placeholder="Start typing...", 
                 type="password",
-                buttons=["copy"] # Changed show_copy_button to buttons=["copy"]
+                buttons=["copy"] # Gradio 6 standard for copy button
             )
             show_btn = gr.Button("Show Password 👁️‍🗨️", variant="secondary")
             
@@ -59,12 +67,41 @@ with gr.Blocks() as demo: # Moved theme/css to launch()
                 minimum=0, maximum=100, value=0, interactive=False
             )
 
+    # Initialize with the red checklist visible immediately
     initial_html, _ = render_html("")
     checklist_area = gr.HTML(value=initial_html)
 
-    pass_input.change(fn=render_html, inputs=pass_input, outputs=[checklist_area, strength_meter])
-    show_btn.click(toggle_visibility, inputs=[visible_state], outputs=[pass_input, show_btn, visible_state])
+    # Quick Settings Panel
+    with gr.Row():
+        with gr.Column():
+             gr.Markdown("### ⚙️ Quick Settings")
+             with gr.Row():
+                 dark_btn = gr.Button("🌙 Dark Mode / ☀️ Light Mode", variant="secondary")
+                 reset_btn = gr.Button("🗑️ Clear Everything", variant="stop")
+
+    # --- Event Triggers ---
+    pass_input.change(
+        fn=render_html, 
+        inputs=pass_input, 
+        outputs=[checklist_area, strength_meter]
+    )
+    
+    show_btn.click(
+        toggle_visibility, 
+        inputs=[visible_state], 
+        outputs=[pass_input, show_btn, visible_state]
+    )
+    
+    # Dark Mode Toggle using JavaScript
+    dark_btn.click(None, None, None, js=toggle_dark_js)
+    
+    # Reset Button Logic
+    reset_btn.click(
+        lambda: ["", initial_html, 0], 
+        None, 
+        [pass_input, checklist_area, strength_meter]
+    )
 
 if __name__ == "__main__":
-    # Parameters moved here for Gradio 6 compatibility
+    # Launch with theme and css moved to launch()
     demo.launch(theme=gr.themes.Soft(), css=custom_css)