src/webui/hacker_theme.py

"""
🎨 Hacker Theme - Cyberpunk/Matrix Style UI
Modern, colorful, futuristic design for browser automation testing
"""

import gradio as gr

# Cyberpunk Hacker Theme with Neon Colors
hacker_theme = gr.themes.Base(
    primary_hue=gr.themes.colors.cyan,
    secondary_hue=gr.themes.colors.purple,
    neutral_hue=gr.themes.colors.slate,
    font=[
        gr.themes.GoogleFont("Fira Code"),
        gr.themes.GoogleFont("JetBrains Mono"),
        "monospace"
    ],
).set(
    # Background colors - Dark cyberpunk
    body_background_fill="#0a0e27",
    body_background_fill_dark="#050814",
    
    # Panel backgrounds - Darker with glow
    block_background_fill="#0f1729",
    block_background_fill_dark="#0a0e1f",
    
    # Border colors - Neon cyan/purple
    block_border_color="#00ffff",
    block_border_color_dark="#ff00ff",
    block_border_width="2px",
    
    # Input fields - Dark with neon borders
    input_background_fill="#1a1f3a",
    input_background_fill_dark="#0f1429",
    input_border_color="#00ff88",
    input_border_color_dark="#ff0088",
    input_border_width="2px",
    
    # Buttons - Neon gradient style
    button_primary_background_fill="#00ff88",
    button_primary_background_fill_dark="#ff0088",
    button_primary_background_fill_hover="#00ffff",
    button_primary_background_fill_hover_dark="#ff00ff",
    button_primary_text_color="#000000",
    button_primary_text_color_dark="#000000",
    button_primary_border_color="#00ffff",
    
    button_secondary_background_fill="#1a1f3a",
    button_secondary_background_fill_dark="#0f1429",
    button_secondary_background_fill_hover="#2a2f4a",
    button_secondary_text_color="#00ff88",
    button_secondary_text_color_dark="#ff0088",
    button_secondary_border_color="#00ff88",
    
    # Text colors - Bright neon
    body_text_color="#00ffff",
    body_text_color_dark="#00ff88",
    
    # Link colors
    link_text_color="#ff00ff",
    link_text_color_dark="#00ffff",
    link_text_color_hover="#ffff00",
    
    # Slider colors
    slider_color="#00ff88",
    slider_color_dark="#ff0088",
    
    # Shadow effects for glow
    block_shadow="0 0 20px rgba(0, 255, 255, 0.3)",
    block_shadow_dark="0 0 20px rgba(255, 0, 255, 0.3)",
    
    # Tab colors
    block_label_background_fill="#00ff88",
    block_label_background_fill_dark="#ff0088",
    block_label_text_color="#000000",
    block_label_text_color_dark="#000000",
    
    # Checkbox/Radio
    checkbox_background_color="#1a1f3a",
    checkbox_background_color_selected="#00ff88",
    checkbox_background_color_selected_dark="#ff0088",
    checkbox_border_color="#00ffff",
    checkbox_border_color_dark="#ff00ff",
    
    # Table colors
    table_border_color="#00ff88",
    table_even_background_fill="#0f1729",
    table_odd_background_fill="#1a1f3a",
    
    # Code block
    code_background_fill="#0a0e1f",
    
    # Radius for modern look
    block_radius="8px",
    button_large_radius="8px",
    button_small_radius="6px",
    input_radius="6px",
)

# Custom CSS for additional hacking effects
hacker_css = """
/* Matrix-style background animation */
@keyframes matrix-rain {
    0% { background-position: 0% 0%; }
    100% { background-position: 0% 100%; }
}

/* Glowing text effect */
@keyframes glow {
    0%, 100% { text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff, 0 0 15px #00ffff; }
    50% { text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff, 0 0 30px #ff00ff; }
}

/* Neon border pulse */
@keyframes neon-pulse {
    0%, 100% { border-color: #00ffff; box-shadow: 0 0 10px #00ffff; }
    50% { border-color: #ff00ff; box-shadow: 0 0 20px #ff00ff; }
}

/* Apply to body */
body {
    background: linear-gradient(135deg, #0a0e27 0%, #1a0e3a 50%, #0a0e27 100%);
    background-size: 400% 400%;
    animation: matrix-rain 20s ease infinite;
}

/* Main container glow */
.gradio-container {
    box-shadow: 0 0 40px rgba(0, 255, 255, 0.2), 
                0 0 80px rgba(255, 0, 255, 0.1) !important;
    border: 2px solid rgba(0, 255, 255, 0.3) !important;
    border-radius: 12px !important;
}

/* Headers with glow effect */
h1, h2, h3 {
    animation: glow 3s ease-in-out infinite !important;
    font-family: 'Fira Code', 'JetBrains Mono', monospace !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
}

/* Tab buttons */
.tab-nav button {
    background: linear-gradient(135deg, #1a1f3a 0%, #2a2f4a 100%) !important;
    border: 2px solid #00ff88 !important;
    color: #00ffff !important;
    font-family: 'Fira Code', monospace !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
}

.tab-nav button:hover {
    background: linear-gradient(135deg, #00ff88 0%, #00ffff 100%) !important;
    color: #000000 !important;
    box-shadow: 0 0 20px #00ffff !important;
    transform: translateY(-2px) !important;
}

.tab-nav button.selected {
    background: linear-gradient(135deg, #00ff88 0%, #ff0088 100%) !important;
    color: #000000 !important;
    border-color: #ff00ff !important;
    box-shadow: 0 0 30px #ff00ff !important;
}

/* Input fields with neon glow */
input, textarea, select {
    background: rgba(26, 31, 58, 0.8) !important;
    border: 2px solid #00ff88 !important;
    color: #00ffff !important;
    font-family: 'Fira Code', monospace !important;
    transition: all 0.3s ease !important;
}

input:focus, textarea:focus, select:focus {
    border-color: #ff00ff !important;
    box-shadow: 0 0 15px #ff00ff, inset 0 0 10px rgba(255, 0, 255, 0.2) !important;
    background: rgba(26, 31, 58, 1) !important;
}

/* Buttons with cyberpunk style */
button {
    background: linear-gradient(135deg, #00ff88 0%, #00ffff 100%) !important;
    border: 2px solid #00ffff !important;
    color: #000000 !important;
    font-family: 'Fira Code', monospace !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

button:hover {
    background: linear-gradient(135deg, #ff0088 0%, #ff00ff 100%) !important;
    border-color: #ff00ff !important;
    box-shadow: 0 0 25px #ff00ff !important;
    transform: translateY(-2px) scale(1.02) !important;
}

button:active {
    transform: translateY(0px) scale(0.98) !important;
}

/* Primary action buttons */
button.primary {
    background: linear-gradient(135deg, #ff0088 0%, #ff00ff 100%) !important;
    animation: neon-pulse 2s ease-in-out infinite !important;
}

/* Code blocks */
code, pre {
    background: rgba(10, 14, 31, 0.9) !important;
    border: 1px solid #00ff88 !important;
    color: #00ffff !important;
    font-family: 'Fira Code', monospace !important;
    padding: 10px !important;
    border-radius: 6px !important;
}

/* Progress bars */
.progress-bar {
    background: linear-gradient(90deg, #00ff88 0%, #00ffff 50%, #ff00ff 100%) !important;
    animation: matrix-rain 3s linear infinite !important;
}

/* Checkboxes and radio buttons */
input[type="checkbox"], input[type="radio"] {
    accent-color: #00ff88 !important;
    border: 2px solid #00ffff !important;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 12px !important;
    background: #0a0e27 !important;
}

::-webkit-scrollbar-track {
    background: #0f1729 !important;
    border: 1px solid #00ff88 !important;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #00ff88 0%, #00ffff 100%) !important;
    border-radius: 6px !important;
    border: 1px solid #00ffff !important;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ff0088 0%, #ff00ff 100%) !important;
}

/* Labels with neon effect */
label {
    color: #00ffff !important;
    font-family: 'Fira Code', monospace !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 0.9em !important;
}

/* Info boxes */
.info, .warning, .error {
    border-left: 4px solid #00ff88 !important;
    background: rgba(0, 255, 136, 0.1) !important;
    padding: 12px !important;
    border-radius: 6px !important;
    font-family: 'Fira Code', monospace !important;
}

.warning {
    border-left-color: #ffff00 !important;
    background: rgba(255, 255, 0, 0.1) !important;
}

.error {
    border-left-color: #ff0088 !important;
    background: rgba(255, 0, 136, 0.1) !important;
}

/* Ladybug Loading Animation */
.loading, .loader, [class*="loading"], .wrap.svelte-1cl284s {
    position: relative !important;
    width: 80px !important;
    height: 80px !important;
    border: none !important;
    background: transparent !important;
}

.loading::before, .loader::before, [class*="loading"]::before {
    content: "🐞" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 60px !important;
    animation: ladybug-crawl 2s ease-in-out infinite !important;
    filter: drop-shadow(0 0 10px #ff0088) !important;
}

.loading::after, .loader::after, [class*="loading"]::after {
    content: "Loading..." !important;
    position: absolute !important;
    bottom: -30px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    color: #00ff88 !important;
    font-family: 'Fira Code', monospace !important;
    font-size: 12px !important;
    letter-spacing: 2px !important;
    text-shadow: 0 0 5px #00ff88 !important;
    animation: pulse-text 1.5s ease-in-out infinite !important;
}

@keyframes ladybug-crawl {
    0%, 100% { 
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }
    25% { 
        transform: translate(-50%, -50%) rotate(-10deg) scale(1.1);
    }
    50% { 
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }
    75% { 
        transform: translate(-50%, -50%) rotate(10deg) scale(1.1);
    }
}

@keyframes pulse-text {
    0%, 100% { 
        opacity: 0.6;
        text-shadow: 0 0 5px #00ff88;
    }
    50% { 
        opacity: 1;
        text-shadow: 0 0 15px #00ff88, 0 0 25px #00ff88;
    }
}

/* Gradio specific loading indicators */
.pending, .generating {
    position: relative !important;
}

.pending::before, .generating::before {
    content: "🐞" !important;
    font-size: 40px !important;
    animation: ladybug-crawl 2s ease-in-out infinite !important;
    filter: drop-shadow(0 0 10px #ff0088) !important;
}

/* Dropdown menus */
.dropdown {
    background: rgba(26, 31, 58, 0.95) !important;
    border: 2px solid #00ff88 !important;
    box-shadow: 0 8px 32px rgba(0, 255, 255, 0.3) !important;
}

.dropdown-item:hover {
    background: rgba(0, 255, 136, 0.2) !important;
    color: #00ffff !important;
}

/* File upload area */
.file-upload {
    border: 2px dashed #00ff88 !important;
    background: rgba(26, 31, 58, 0.5) !important;
    transition: all 0.3s ease !important;
}

.file-upload:hover {
    border-color: #ff00ff !important;
    background: rgba(255, 0, 255, 0.1) !important;
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.3) !important;
}

/* Status indicators */
.status-success {
    color: #00ff88 !important;
    text-shadow: 0 0 10px #00ff88 !important;
}

.status-error {
    color: #ff0088 !important;
    text-shadow: 0 0 10px #ff0088 !important;
}

.status-warning {
    color: #ffff00 !important;
    text-shadow: 0 0 10px #ffff00 !important;
}

/* Terminal-style output */
.terminal-output {
    background: #0a0e1f !important;
    border: 2px solid #00ff88 !important;
    color: #00ff88 !important;
    font-family: 'Fira Code', monospace !important;
    padding: 15px !important;
    border-radius: 8px !important;
    box-shadow: inset 0 0 20px rgba(0, 255, 136, 0.1) !important;
}

/* Accordion/Collapsible sections */
.accordion-header {
    background: linear-gradient(135deg, #1a1f3a 0%, #2a2f4a 100%) !important;
    border: 2px solid #00ff88 !important;
    color: #00ffff !important;
    font-family: 'Fira Code', monospace !important;
    font-weight: 600 !important;
}

.accordion-header:hover {
    background: linear-gradient(135deg, #00ff88 0%, #00ffff 100%) !important;
    color: #000000 !important;
    box-shadow: 0 0 15px #00ffff !important;
}

/* Matrix-style text effect for headers */
.matrix-text {
    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;
}

/* Glitch effect for important elements */
@keyframes glitch {
    0% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
    100% { transform: translate(0); }
}

.glitch-effect:hover {
    animation: glitch 0.3s ease-in-out !important;
}

/* Neon divider */
hr {
    border: none !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, #00ffff, #ff00ff, #00ffff, transparent) !important;
    margin: 20px 0 !important;
}

/* Card-style containers */
.card {
    background: rgba(15, 23, 41, 0.8) !important;
    border: 2px solid #00ff88 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.2) !important;
    transition: all 0.3s ease !important;
}

.card:hover {
    border-color: #ff00ff !important;
    box-shadow: 0 0 40px rgba(255, 0, 255, 0.3) !important;
    transform: translateY(-5px) !important;
}
"""

def get_hacker_theme():
    """Returns the hacker theme and CSS"""
    return hacker_theme, hacker_css