English | Español
Dynamic-SciFi-Dashboard-Kit is a lightweight and customizable JavaScript library for creating interactive user interfaces with a futuristic, sci-fi aesthetic. It offers a set of ready-to-use "panel" components designed for building dynamic and visually appealing dashboards.
- Modular Components: A variety of panels for different purposes (logs, alerts, data, graphs, etc.).
- Sci-Fi Aesthetics: Predefined styles with a futuristic touch, including effects like "scanlines" and "sparks".
- Customizable: Appearance can be easily modified using CSS variables.
- Modern JavaScript: Written in ES6+ with no heavy external dependencies (only uses Bootstrap for example layouts).
- Easy to Use: Simple API to integrate and control the panels.
- Responsive (with Bootstrap): Examples and panel structure are designed to adapt to different screen sizes with the help of a framework like Bootstrap.
Here you can see a demo with all the panels (click the buttons to change states).
Here's a quick look at the panels offered by the library. Click on an image to see a live example.
| Panel | Screenshot | Live Example (GitHub Pages) |
|---|---|---|
| LogDisplayPanel |  |
View Example |
| CriticalWarningTextPanel |  |
View Example |
| KeyValueListPanel |  |
View Example |
| LedDisplayPanel |  |
View Example |
| DynamicTextPanel |  |
View Example |
| ActionButtonsPanel |  |
View Example |
| CanvasGraphPanel |  |
View Example |
| IntegrityPulsePanel |  |
View Example |
| CircularGaugePanel |  |
View Example |
| StatusIndicatorLedPanel |  |
View Example |
| HorizontalBarGaugePanel |  |
View Example |
| ImageDisplayPanel |  |
View Example |
| TrueCanvasGraphPanel |  |
View Example |
| TrueIntegrityPulsePanel |  |
View Example |
| RadarDisplayPanel |  |
View Example |
| HeatmapPanel |  |
View Example |
- Download (or clone) this repository.
- Include the
DynamicSciFiDashboardKit.cssandDynamicSciFiDashboardKit.jsfiles in your HTML project:
<head>
<!-- ... your other head tags ... -->
<link rel="stylesheet" href="path/to/DynamicSciFiDashboardKit.css">
</head>
<body>
<!-- ... your HTML content ... -->
<script src="path/to/DynamicSciFiDashboardKit.js"></script>
<script>
// Your code to initialize the panels
</script>
</body>For a detailed guide on how to use each panel, its options, and methods, please refer to the Complete Usage Guide (docs/USAGE_GUIDE.md).
The appearance of the panels can be extensively customized by overriding the CSS variables defined in DynamicSciFiDashboardKit.css. Review the CSS file to see the list of available variables.
Example:
/* In your own CSS file, after importing DynamicSciFiDashboardKit.css */
:root {
--dsdk-accent-color-main: #FF6347; /* Tomato as main accent color */
--dsdk-panel-bg: rgba(20, 20, 30, 0.9);
--dsdk-font-mono: 'Share Tech Mono', monospace;
}This project is licensed under the MIT License. See the LICENSE file for more details.
Created by Soyunomas