let5sne.win10 4dd5482d74 Redesign UI with Industrial Cyber Console theme ...

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>

2026-01-10 02:37:45 +08:00

15 KiB

Raw Permalink Blame History

View Raw