Spaces:
Sleeping
Sleeping
🎨 MazeBench UI Visual Guide
This document describes the visual layout and design of the custom MazeBench frontend.
🖼️ Overall Layout
┌─────────────────────────────────────────────────────────────┐
│ HEADER │
│ ❄️ MAZE BENCH ENVIRONMENT │
│ ICE SLIDING PUZZLE │
└─────────────────────────────────────────────────────────────┘
┌──────────┬─────────────────────────────┬──────────────────┐
│ │ │ │
│ LEFT │ CENTER │ RIGHT │
│ PANEL │ PANEL │ PANEL │
│ │ │ │
│ Controls │ Game Board │ Telemetry │
│ D-Pad │ │ Live Stats │
│ Status │ [Maze Grid Display] │ Rewards │
│ │ │ Observation │
│ │ │ Move History │
│ │ │ │
└──────────┴─────────────────────────────┴──────────────────┘
📐 Detailed Layout
Header Section
┌─────────────────────────────────────────────────────────────┐
│ │
│ ❄️ MAZE BENCH ENVIRONMENT │
│ (2.5rem, 900 weight, letter-spacing: 3px) │
│ │
│ ICE SLIDING PUZZLE │
│ (0.9rem, 700 weight, letter-spacing: 4px) │
│ │
└─────────────────────────────────────────────────────────────┘
- Background: Linear gradient (dark blue shades)
- Border: 1px solid line color
- Text: White with blue glow shadow
- Center aligned, full width
Left Panel (320px wide)
1. Controls Section
┌──────────────────────────┐
│ CONTROLS │ ← Section title
├──────────────────────────┤
│ ┌─────────┬─────────┐ │
│ │ 🔄 │ 📊 │ │
│ │ RESET │ STATE │ │ ← Two buttons
│ └─────────┴─────────┘ │
└──────────────────────────┘
- Buttons: Gradient backgrounds, hover lift effect
- Icons: Emoji for visual identity
- Grid layout: 2 columns
2. Level Selection
┌──────────────────────────┐
│ LEVEL SELECTION │
├──────────────────────────┤
│ Choose Level (1-30) │
│ ┌─────────────────────┐ │
│ │ Level 0 ▼ │ │ ← Dropdown
│ └─────────────────────┘ │
└──────────────────────────┘
- Dropdown: Custom styled select
- Arrow icon: Blue chevron
- 30 level options (0-29)
3. Direction Pad
┌──────────────────────────┐
│ DIRECTION PAD │
│ Use arrow keys or WASD │ ← Hint text
├──────────────────────────┤
│ ╔═══╗ │
│ ║ ▲ ║ │ ← Up button
│ ╚═══╝ │
│ ╔═══╗ ╔═══╗ ╔═══╗ │
│ ║ ◀ ║ ║ • ║ ║ ▶ ║ │ ← Left, Center, Right
│ ╚═══╝ ╚═══╝ ╚═══╝ │
│ ╔═══╗ │
│ ║ ▼ ║ │ ← Down button
│ ╚═══╝ │
└──────────────────────────┘
- 3x3 grid layout
- Corner slots: Empty dashed borders
- Center: Static core (non-interactive)
- Arrows: Large, bold, blue colored
- Hover: Lifts up with glow effect
4. Session Status
┌──────────────────────────┐
│ SESSION STATUS │
├──────────────────────────┤
│ ⚡ Ready to start... │ ← Icon + message
└──────────────────────────┘
- Icon changes based on state
- Dark inset background
- Updates with each action
Center Panel (Flexible width, ~600px)
Game Board Area
┌────────────────────────────────────┐
│ │
│ ┌────────────────────────────┐ │
│ │ # # # # # # # # # # │ │
│ │ # . . . . . . . . # │ │
│ │ # . . . . . . . . # │ │
│ │ # . . a . . . . . # │ │ ← Maze grid
│ │ # . . . . . . . . # │ │ (48px cells)
│ │ # . . . . . . e . # │ │
│ │ # . . . . . . . . # │ │
│ │ # # # # # # # # # # │ │
│ └────────────────────────────┘ │
│ │
│ ┌─────────────────────────────┐ │
│ │ ✨ PUZZLE SOLVED ✨ │ │ ← Solved banner
│ └─────────────────────────────┘ │ (if completed)
│ │
└────────────────────────────────────┘
Cell Types:
#Wall: Blue gradient, inset shadow.Path: Dark blue, flateExit: Green tint, rotating diamond ◇aAgent: Glowing blue orb ●bAgent on Exit: Blue orb on green background
Animations:
- Exit diamond pulses (scale + opacity)
- Agent orb glows (shadow intensity)
- Board fades in on load
- Solved banner slides up with celebration
Right Panel (380px wide)
1. Live Stats
┌──────────────────────────────┐
│ TELEMETRY │
├──────────────────────────────┤
│ LIVE STATS │
├──────────────────────────────┤
│ ┌──────────────────────────┐ │
│ │ Level │ │
│ │ 5 │ │ ← Full width
│ └──────────────────────────┘ │
│ ┌────────────┬─────────────┐ │
│ │ Moves │ Status │ │
│ │ 12/50 │ RUNNING │ │ ← 2 columns
│ └────────────┴─────────────┘ │
└──────────────────────────────┘
- Grid layout: 1 full + 2 half columns
- Values: Large, bold font
- Status: Blue (running) or Green (solved)
2. Rewards Panel
┌──────────────────────────────┐
│ ┌────────────┬─────────────┐ │
│ │ Total Rew. │ Last Step │ │
│ │ +2.340 │ -0.010 │ │ ← Large numbers
│ └────────────┴─────────────┘ │
│ │
│ Recent step rewards │
│ (newest → oldest) │
│ ┌──┬──┬──┬──┬──┬──┬──┬──┐ │
│ │+1│-1│+0│-1│+2│-1│+0│-1│ │ ← Pill chips
│ └──┴──┴──┴──┴──┴──┴──┴──┘ │
└──────────────────────────────┘
- Total: Large (1.8rem), green/red colored
- Step: Medium (1.4rem), green/red/gray
- Chips: Rounded pills, last 8 rewards
- Colors: Green (+), Red (-), Gray (0)
3. Observation Panel
┌──────────────────────────────┐
│ OBSERVATION │
├──────────────────────────────┤
│ ┌──────────────────────────┐ │
│ │ Players │ 1 │ │
│ ├──────────┴───────────────┤ │
│ │ Agent Pos│ [[3,4]] │ │ ← Monospace
│ ├──────────┴───────────────┤ │
│ │ Exit Pos │ [[6,7]] │ │ ← Monospace
│ └──────────────────────────┘ │
│ │
│ ┌──────────────────────────┐ │
│ │ 💬 Moved LEFT. Step 12. │ │ ← Message
│ └──────────────────────────┘ │
└──────────────────────────────┘
- Key-value pairs
- Positions: Monospace font, blue color
- Message: Icon + text, slides in
4. Move History
┌──────────────────────────────┐
│ MOVE HISTORY — newest left │
│ (showing 10 of 10) │
├──────────────────────────────┤
│ ┌────────────────────────┐ │
│ │ ▶ ▲ ▲ ▶ ▼ ◀ ▲ ▶ ... │ │ ← Horizontal scroll
│ └────────────────────────┘ │
└──────────────────────────────┘
- Horizontal scroll strip
- Last 30 moves shown
- Arrow icons: ▲ ▼ ◀ ▶
- Recent moves: Bright blue
- Old moves: Muted gray
🎨 Color Palette
Background Colors
Deep: #0d1525 ███ Darkest background
BG1: #111827 ███ Primary background
BG2: #151e2e ███ Secondary background
Panel: #1a2438 ███ Card backgrounds
Panel Mid: #1e2a40 ███ Gradient mid-point
Panel Inset:#0f1929 ███ Inset areas
Border & Line Colors
Line: #2a3a52 ███ Primary borders
Line Soft: #1e2d42 ███ Subtle borders
Text Colors
Text: #c8daf0 ███ Body text
Text Head: #e2eeff ███ Headings
Muted: #4a6080 ███ Secondary text
Accent Colors
Blue: #38bdf8 ███ Primary actions
Blue Bright:#0ea5e9 ███ Buttons
Blue Dim: #1e6fa8 ███ Hover states
Green: #10b981 ███ Positive/Success
Green Dim: #065f46 ███ Green tints
Red: #f87171 ███ Negative/Error
Amber: #f59e0b ███ Warning
Purple: #a78bfa ███ Special states
🎭 Visual Effects
Shadows
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.45); /* Cards */
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3); /* Header */
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2); /* Buttons */
Gradients
/* Card backgrounds */
linear-gradient(180deg, #1a2438 0%, #1e2a40 100%)
/* Button backgrounds */
linear-gradient(180deg, #1e2a40, #0f1929)
/* Primary button */
linear-gradient(135deg, #0ea5e9, #1e6fa8)
/* Wall cells */
linear-gradient(135deg, #2563a8, #1a4a80)
/* Exit cells */
linear-gradient(180deg, #0a2a1e, #052016)
/* Solved banner */
linear-gradient(135deg, #10b981, #059669)
Animations
/* Board appearance */
@keyframes fadeIn {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
/* Exit marker pulse */
@keyframes pulse {
0%, 100% { opacity: 1; transform: rotate(45deg) scale(1); }
50% { opacity: 0.7; transform: rotate(45deg) scale(0.95); }
}
/* Agent glow */
@keyframes glow {
0%, 100% { box-shadow: 0 0 16px rgba(47,143,255,0.6); }
50% { box-shadow: 0 0 24px rgba(47,143,255,0.8); }
}
/* Solved celebration */
@keyframes celebrate {
0% { transform: scale(0.8) rotate(-5deg); }
50% { transform: scale(1.1) rotate(5deg); }
100% { transform: scale(1) rotate(0deg); }
}
Hover Effects
/* Buttons lift on hover */
:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
/* Active state scales down */
:active {
transform: scale(0.95);
}
📱 Responsive Breakpoints
/* Desktop (default) */
@media (min-width: 1400px) {
.mz-container { grid-template-columns: 320px 1fr 380px; }
}
/* Medium screens */
@media (max-width: 1400px) {
.mz-container { grid-template-columns: 280px 1fr 340px; }
}
/* Mobile/Tablet */
@media (max-width: 1024px) {
.mz-container { grid-template-columns: 1fr; }
/* Stacks panels vertically */
}
/* Small mobile */
@media (max-width: 768px) {
.mz-title { font-size: 1.8rem; }
.board-cell { width: 40px; height: 40px; }
}
🎯 Interactive States
Button States
- Default: Gradient background, subtle shadow
- Hover: Lifts up 2px, stronger shadow, blue border
- Active: Scales down to 0.95, immediate feedback
- Disabled: 50% opacity, no pointer events
Cell States
- Wall: Static, inset shadow
- Path: Static
- Exit: Pulsing diamond animation (2s loop)
- Agent: Glowing orb animation (1.5s loop)
Status Messages
- Success: ✅ Green checkmark
- Action: 🎮 Game controller
- Info: ℹ️ Information
- Error: ❌ Red X
- Loading: ⚡ Lightning bolt
🖱️ Interaction Feedback
Visual Feedback Timeline
Click Button
↓ (0ms)
Button scales down (transform: scale(0.95))
↓ (10ms)
API call initiated
↓ (150ms)
Button disabled (opacity: 0.5)
↓ (200-500ms)
API response received
↓ (0ms)
Board updates (fade in animation)
Stats update (instant)
Rewards update (instant)
History updates (slide in)
↓ (300ms)
Button re-enabled
Animation complete
Loading States
Action Initiated
↓
Loading overlay appears (backdrop blur)
Spinner starts rotating
Buttons disabled
↓
Action completes
↓
Loading overlay fades out
Buttons re-enabled
Status updated
📋 Typography Scale
Title: 2.5rem / 900 weight ❄️ MAZE BENCH ENVIRONMENT
Subtitle: 0.9rem / 700 weight ICE SLIDING PUZZLE
Section: 1rem / 900 weight TELEMETRY
Section Small: 0.75rem / 900 weight LIVE STATS
Reward Total: 1.8rem / 900 weight +2.340
Reward Step: 1.4rem / 900 weight -0.010
Stat Value: 1.1rem / 800 weight 12/50
Body: 0.85rem / 700 weight Regular text
Small: 0.7rem / 700 weight Hints, labels
Tiny: 0.65rem / 900 weight UPPERCASE LABELS
This visual guide describes the complete layout and design system of the MazeBench custom frontend. Every element has been carefully crafted for optimal user experience and aesthetic appeal.