html
Web Development
4 files • 102 lines
Interactive Web Dashboard (HTML5 + CSS + JS)
Responsive modern frontend application with interactive KPI cards, live search filter, dark-mode styling, and clean vanilla JavaScript controller.
Repository Files:
index.html (html)
34 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WorkMA Live App Preview</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<header class="hero">
<span class="badge">LIVE PREVIEW</span>
<h1>WorkMA Interactive Web Starter</h1>
<p>Edit <code>index.html</code>, <code>styles.css</code>, or <code>app.js</code> and click <strong>Preview</strong> to see changes instantly.</p>
</header>
<section class="grid" id="metrics-grid">
<div class="card">
<span class="label">Active Services</span>
<strong class="value" id="metric-services">12</strong>
</div>
<div class="card">
<span class="label">Uptime SLA</span>
<strong class="value">99.98%</strong>
</div>
<div class="card">
<span class="label">Deployments</span>
<strong class="value" id="metric-deploys">48</strong>
</div>
</section>
<button id="boost-btn" class="btn">Trigger Live Deployment</button>
</div>
<script src="app.js"></script>
</body>
</html>
styles.css (css)
54 lines
body {
margin: 0;
font-family: system-ui, -apple-system, sans-serif;
background: #0f172a;
color: #f8fafc;
padding: 2rem;
}
.container {
max-width: 720px;
margin: 0 auto;
}
.badge {
display: inline-block;
background: rgba(16, 185, 129, 0.15);
color: #34d399;
border: 1px solid rgba(16, 185, 129, 0.35);
border-radius: 999px;
padding: 0.25rem 0.75rem;
font-size: 0.72rem;
font-weight: 700;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
margin: 1.5rem 0;
}
.card {
background: #1e293b;
border: 1px solid #334155;
border-radius: 1rem;
padding: 1.25rem;
}
.label {
display: block;
font-size: 0.75rem;
color: #94a3b8;
text-transform: uppercase;
}
.value {
display: block;
margin-top: 0.4rem;
font-size: 1.75rem;
color: #34d399;
}
.btn {
background: linear-gradient(135deg, #059669, #0d9488);
color: white;
border: none;
border-radius: 0.75rem;
padding: 0.75rem 1.4rem;
font-weight: 700;
cursor: pointer;
}
app.js (javascript)
11 lines
document.addEventListener("DOMContentLoaded", () => {
const btn = document.getElementById("boost-btn");
const deploys = document.getElementById("metric-deploys");
if (btn && deploys) {
btn.addEventListener("click", () => {
const next = parseInt(deploys.textContent || "0", 10) + 1;
deploys.textContent = String(next);
btn.textContent = `Deployed #${next} Successfully!`;
});
}
});
README.md (markdown)
3 lines
# Interactive Web Dashboard Starter Includes `index.html`, `styles.css`, and `app.js` with built-in support for the **Fortress IDE Live Preview** pane.
How to Customize Inside WorkMA
Runtime: Modern HTML5 + CSS3 + Vanilla JavaScript
- Create a Code Nexus workspace from this starter blueprint.
- Customize layout, dark-mode CSS tokens, and interactive widgets in Monaco.
- Track UI sprint deliverables cleanly inside WorkMA Kanban boards.
DLP & Secrets Vault Readiness
Public client interfaces still benefit from DLP protection on proprietary agency components and Sentinel regex scanning to guarantee zero API keys accidentally end up hardcoded in frontend bundles.
More Code Nexus Starter Templates
python
Full-Stack SaaS Module Blueprint
Multi-layer blueprint with backend service controller, frontend view template, and JSON schema contract.
javascriptNode.js REST API & Webhook Worker
Lightweight JavaScript backend service template with router middleware, webhook signature verifier, and JSON configuration.
pythonPython FastAPI Microservice
Production-ready Python REST API starter with structured routing, data validation models, health checks, and clean service architecture.