Skip to content

Goodspoken/dashboard_demo-

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

⚡ Serverbook Dashboard (Interactive Demo)

Self-hosted home server monitoring & management panel with real-time metrics, Docker control, and device tracking.

JavaScript HTML5 CSS3 No Dependencies

🌐 Live Demo

👉 View Interactive Demo on GitHub Pages 👈

🎯 Overview

Serverbook is a lightweight, cyberpunk-themed dashboard for monitoring home server infrastructure. This specific repository is a purely static interactive demo built to showcase the UI and functionality without requiring a backend.

The original project uses a Node.js/Express backend to communicate with Docker, Systemd, and the host OS. This demo uses a Virtual Mock Engine running entirely in your browser to simulate realistic server conditions.

✨ Features

📊 Real-Time Host Monitoring

  • CPU usage with sparkline history graphs
  • RAM consumption tracking
  • Disk usage percentage
  • CPU temperature monitoring

🌐 Service Health Checks

  • Auto-detection of fake Docker containers
  • Response time badges with color-coded status
  • Smooth CSS animations and transitions

🤖 Bot/Project Management

  • Docker Compose project groups
  • Start / Stop / Restart mock UI
  • Container log viewer (simulated output)

🖥️ Device Bar & File Palette

  • Network device discovery and filtering
  • VSCode-style fuzzy file search (Press Ctrl+K)
  • Keyboard navigation with instant path copy

🧠 How the Mock Engine Works

Since this is hosted on GitHub Pages (static hosting), all "backend" logic runs in app.js:

  • DriftValue Generator — Uses interfering sine waves and jitter to create smooth, natural-looking fluctuations for CPU, RAM, and temperature.
  • Service Status Sim — Each simulated service has a reliability score. They will randomly "crash" for 15-45 seconds and recover.
  • Dynamic Containers — Generates realistic varying uptimes, CPU spikes, and memory usage.
  • Log Generator — Creates timestamped logs dynamically when you open the log viewer.

🛠️ Architecture (Original Project)

For those interested, the real (private) version of this project architecture consists of:

  • Backend: Node.js, Express, child_process (for ping/systemctl), Docker socket integration.
  • Frontend: Vanilla JavaScript (same as this demo repo).
  • Styling: Custom CSS with CSS variables, glassmorphism, gradients.
  • Icons: Lucide Icons

📄 License

MIT — feel free to use, modify, and share the frontend design.

About

Ecosystem dashoard demo version

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors