Update UI with hacker theme styling

src/webui/interface.py

@@ -15,6 +15,7 @@ from src.webui.webui_manager import WebuiManager
 from src.webui.components.agent_settings_tab import create_agent_settings_tab
 from src.webui.components.browser_settings_tab import create_browser_settings_tab
 from src.webui.components.browser_use_agent_tab import create_browser_use_agent_tab
+from src.webui.hacker_theme import get_hacker_theme
 
 theme_map = {
     "Default": gr.themes.Default(),
@@ -24,18 +25,22 @@ theme_map = {
     "Origin": gr.themes.Origin(),
     "Citrus": gr.themes.Citrus(),
     "Ocean": gr.themes.Ocean(),
-    "Base": gr.themes.Base()
+    "Base": gr.themes.Base(),
+    "Hacker": get_hacker_theme()[0]
 }
 
 
-def create_ui(theme_name="Ocean"):
-    css = """
+def create_ui(theme_name="Hacker"):
+    # Get hacker theme CSS
+    hacker_theme, hacker_css = get_hacker_theme()
+    
+    css = hacker_css + """
     .gradio-container {
-        width: 70vw !important; 
-        max-width: 70% !important; 
+        width: 85vw !important; 
+        max-width: 85% !important; 
         margin-left: auto !important;
         margin-right: auto !important;
-        padding-top: 100px !important;
+        padding-top: 120px !important;
     }
     .header-text {
         text-align: center;
@@ -45,9 +50,10 @@ def create_ui(theme_name="Ocean"):
         left: 0 !important;
         right: 0 !important;
         z-index: 1000 !important;
-        background-color: var(--body-background-fill) !important;
-        padding: 20px 0 !important;
-        border-bottom: 2px solid var(--border-color-primary) !important;
+        background: linear-gradient(135deg, #0a0e27 0%, #1a0e3a 100%) !important;
+        padding: 25px 0 !important;
+        border-bottom: 3px solid #00ff88 !important;
+        box-shadow: 0 4px 20px rgba(0, 255, 255, 0.3) !important;
         box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
         line-height: 1.2 !important;
     }
@@ -132,38 +138,54 @@ def create_ui(theme_name="Ocean"):
             """,
     ) as demo:
         with gr.Row():
-            gr.Markdown(
+            gr.HTML(
                 """
-                # 🤖 Fagun Browser Automation Testing Agent
+                <div class="header-text matrix-text">
+                    <h1 style="font-size: 3em; margin: 0; background: linear-gradient(90deg, #00ff88, #00ffff, #ff00ff, #00ff88); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: matrix-rain 3s linear infinite;">
+                        ⚡ FAGUN CYBER TESTING LAB ⚡
+                    </h1>
+                    <h3 style="margin: 10px 0 0 0; color: #00ffff; text-shadow: 0 0 10px #00ffff; letter-spacing: 3px;">
+                        [ BROWSER AUTOMATION • SECURITY TESTING • AI POWERED ]
+                    </h3>
+                    <p style="margin: 5px 0 0 0; color: #00ff88; font-size: 0.9em; letter-spacing: 2px;">
+                        >> SYSTEM STATUS: <span style="color: #00ffff; text-shadow: 0 0 5px #00ffff;">ONLINE</span> <<
+                    </p>
+                </div>
                 """,
                 elem_classes=["header-text"],
             )
 
         with gr.Tabs() as tabs:
-            with gr.TabItem("⚙️ Agent Settings"):
+            with gr.TabItem("⚙️ AGENT CONFIG"):
                 create_agent_settings_tab(ui_manager)
 
-            with gr.TabItem("🌐 Browser Settings"):
+            with gr.TabItem("🌐 BROWSER SETUP"):
                 create_browser_settings_tab(ui_manager)
 
-            with gr.TabItem("🤖 Run Agent"):
+            with gr.TabItem("⚡ EXECUTE MISSION"):
                 create_browser_use_agent_tab(ui_manager)
 
         # Custom Footer
         with gr.Row():
             gr.HTML(
                 """
-                <div style="text-align: center; margin-top: 20px; padding: 10px; border-top: 1px solid #ccc;">
-                    <p style="margin: 5px 0;">
-                        <a href="https://www.linkedin.com/in/mejbaur/" target="_blank" style="text-decoration: none; color: #0077b5;">
-                            Connect with Builder
-                        </a>
+                <div style="text-align: center; margin-top: 30px; padding: 20px; border-top: 2px solid #00ff88; background: linear-gradient(135deg, rgba(0, 255, 136, 0.05), rgba(0, 255, 255, 0.05));">
+                    <p style="margin: 10px 0; color: #00ffff; font-size: 0.9em; letter-spacing: 1px;">
+                        >> CONNECT WITH THE ARCHITECT <<
                     </p>
-                    <p style="margin: 5px 0; font-weight: bold; font-size: 1.1em; background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff9ff3, #54a0ff); background-size: 400% 400%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradientShift 3s ease-in-out infinite;">
-                        Mejbaur Bahar Fagun
+                    <p style="margin: 10px 0; font-weight: bold; font-size: 1.3em; background: linear-gradient(90deg, #00ff88, #00ffff, #ff00ff, #00ff88); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: matrix-rain 3s linear infinite; letter-spacing: 2px;">
+                        MEJBAUR BAHAR FAGUN
+                    </p>
+                    <p style="margin: 10px 0; color: #ff00ff; font-size: 1em; text-shadow: 0 0 5px #ff00ff; letter-spacing: 1px;">
+                        [ SOFTWARE ENGINEER IN TEST ]
+                    </p>
+                    <p style="margin: 15px 0;">
+                        <a href="https://www.linkedin.com/in/mejbaur/" target="_blank" style="text-decoration: none; color: #00ff88; font-weight: 600; padding: 10px 20px; border: 2px solid #00ff88; border-radius: 6px; display: inline-block; transition: all 0.3s ease; letter-spacing: 1px;">
+                            🔗 LINKEDIN PROFILE
+                        </a>
                     </p>
-                    <p style="margin: 5px 0; color: #666; font-size: 0.9em;">
-                        Software Engineer in Test
+                    <p style="margin: 10px 0; color: #00ffff; font-size: 0.8em; font-family: 'Fira Code', monospace;">
+                        >> SYSTEM BUILD: v2.0.0 | STATUS: OPERATIONAL | UPTIME: 99.9% <<
                     </p>
                 </div>
                 <style>