This commit introduces a complete visual overhaul of the AutoGLM Dashboard
with a distinctive "Industrial Cyber Console" aesthetic that transforms
the interface into a futuristic control center.
Design Concept:
- Industrial control panels + Cyberpunk + Retro CRT terminal aesthetics
- Dark background with neon status indicators (green/amber/red)
- Monospace code fonts + Sci-fi display typography
- Grid lines, scanlines, glowing borders, tech effects
- CRT effects, blinking cursors, data flow animations
New Files:
- dashboard/static/css/cyber-core.css - Core theme variables, global effects,
and utility classes (364 lines)
Updated Files:
- dashboard/static/css/dashboard.css - Main dashboard styles (577 lines)
• Animated header with blinking prompt cursor
• Device cards with neon glow on hover
• Task items with status indicators and data flow effects
• Custom button styles with light sweep animation
• Toast notifications with colored left borders
- dashboard/static/css/video-learning.css - Video learning page styles (649 lines)
• Config section with tech-inspired form inputs
• Custom checkbox with neon glow effect
• Progress bars with shimmer animation
• Session cards with holographic border effects
• Video placeholders with "NO_SIGNAL" indicator
- dashboard/static/css/sessions.css - Sessions list page styles (589 lines)
• Session cards with status indicator dots
• Progress bars with striped overlays
• Filter buttons with active state glow
• Empty state with pulsing circle animation
• Action buttons with type-specific colors
Key Visual Elements:
- Font: Orbitron (display) + JetBrains Mono (code)
- Colors: Neon green (#00ff9f), Amber (#ffb800), Red (#ff4757)
- Backgrounds: Deep navy (#0a0e27) with grid overlay
- Effects: CRT scanlines, data flow, pulse animations, glow shadows
- Decorations: Corner accents, status indicators, tech borders
Technical Details:
- CSS custom properties for consistent theming
- @import for core styles across all pages
- Pseudo-elements for decorative effects (::before, ::after)
- Keyframe animations: scanline, pulse, shimmer, blink, dataFlow
- Backdrop filters for glass effects
- Box-shadow for neon glow effects
Co-Authored-By: Claude <noreply@anthropic.com>
4dd5482d74