Terminal Dashboard

# Terminal Dashboard Page

Create a hacker-aesthetic dashboard with green-on-black terminal styling, monospace fonts, and CLI-inspired interface elements.

## Design Specifications

**Style**: Terminal / Hacker / CLI aesthetic
**Typography**: Monospace throughout, green text
**Layout**: Dashboard with multiple "terminal windows"
**Colors**: Black background, green text, amber/red accents

## Prompt for AI Code Generation

```
Build a terminal-style dashboard with these characteristics:

LAYOUT:
- Full viewport, no scroll (dashboard fixed layout)
- Top bar with terminal title and status
- Grid of terminal "windows" with different data
- Bottom command input bar

TYPOGRAPHY:
- All text: monospace (JetBrains Mono, Fira Code, Consolas)
- ASCII art for decorative elements
- Size: 12-14px for most text, 10px for dense data

COLORS:
- Background: #0d1117 or #000000 (pure black)
- Primary text: #00ff00 (bright green)
- Secondary: #22c55e (softer green)
- Accent: #fbbf24 (amber for warnings)
- Error: #ef4444 (red)
- Dim: #4b5563 (gray for inactive)

TERMINAL ELEMENTS:
- ASCII box-drawing characters for borders (─ │ ┌ ┐ └ ┘)
- Blinking cursor animation
- Command prompts ($ or >)
- Progress bars with [=====>    ] style
- Status indicators: [OK] [WARN] [ERR]

INTERACTIONS:
- Blinking cursor (CSS animation)
- Hover highlight on rows
- Simulated typing effect (optional)
- Glowing text effect on focus

SECTIONS TO INCLUDE:
1. Top bar with fake window controls and title
2. System metrics panel (CPU, memory, network)
3. Process list / table
4. Network status with node indicators
5. Log output with color-coded levels
6. ASCII art status section
7. Command input at bottom

TECHNICAL:
- CSS animation for blinking cursor
- Preformatted text for ASCII art
- Fixed-width columns for alignment
- Scanline overlay effect (optional)
```

## Example React Component Structure

```tsx
export default function TerminalDashboard() {
  return (
    <div className="h-screen w-full overflow-hidden bg-[#0d1117] font-mono text-[#00ff00]">
      {/* Scanline effect */}
      <div
        className="pointer-events-none fixed inset-0 opacity-[0.03]"
        style={{
          background:
            'repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(0,255,0,0.03) 2px, transparent 3px)',
        }}
      />

      {/* Top Bar */}
      <div className="flex items-center justify-between border-b border-green-900 px-4 py-2">
        <div className="flex items-center gap-2">
          <span className="h-3 w-3 rounded-full bg-red-500" />
          <span className="h-3 w-3 rounded-full bg-yellow-500" />
          <span className="h-3 w-3 rounded-full bg-green-500" />
        </div>
        <span className="text-xs">NEXUS CONTROL TERMINAL v2.7.1</span>
        <span className="text-xs text-green-700">{new Date().toLocaleTimeString()}</span>
      </div>

      {/* Main Grid */}
      <div className="grid h-[calc(100vh-100px)] grid-cols-3 gap-4 p-4">
        {/* System Metrics */}
        <div className="border border-green-900 p-4">
          <div className="mb-2 text-xs text-green-700">── SYSTEM METRICS ──</div>
          <div className="space-y-2 text-sm">
            <div>CPU: [████████░░] 78%</div>
            <div>MEM: [██████░░░░] 62%</div>
            <div>NET: ↑ 1.2MB/s ↓ 4.8MB/s</div>
          </div>
        </div>

        {/* Logs */}
        <div className="col-span-2 border border-green-900 p-4">
          <div className="mb-2 text-xs text-green-700">── SYSTEM LOG ──</div>
          <div className="space-y-1 text-xs">
            <div>
              <span className="text-green-500">[INFO]</span> Connection established
            </div>
            <div>
              <span className="text-yellow-500">[WARN]</span> High memory usage
            </div>
            <div>
              <span className="text-red-500">[ERR]</span> Failed to sync node-7
            </div>
          </div>
        </div>
      </div>

      {/* Command Input */}
      <div className="absolute right-0 bottom-0 left-0 border-t border-green-900 px-4 py-3">
        <div className="flex items-center gap-2">
          <span className="text-green-700">user@nexus:~$</span>
          <input className="flex-1 bg-transparent outline-none" placeholder="Enter command..." />
          <span className="animate-pulse">█</span>
        </div>
      </div>
    </div>
  );
}
```

## CSS Variables

```css
:root {
  --color-bg: #0d1117;
  --color-green: #00ff00;
  --color-green-dim: #22c55e;
  --color-amber: #fbbf24;
  --color-red: #ef4444;
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.cursor-blink {
  animation: blink 1s step-end infinite;
}

.scanlines {
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 1px,
    rgba(0, 255, 0, 0.03) 2px,
    transparent 3px
  );
}
```

## Key Principles

1. **Monospace everything**: Consistent character widths for alignment
2. **Green on black**: Classic terminal color scheme
3. **ASCII borders**: Use box-drawing characters, not CSS borders
4. **Blinking cursor**: Essential terminal feedback
5. **Dense information**: Pack in data like a real monitoring tool