Merge pull request 'feat: add stakeholder demo landing page with synthetic data' (#33) from feature/demo-landing into master
Reviewed-on: #33
This commit was merged in pull request #33.
This commit is contained in:
750
demo/index.html
Normal file
750
demo/index.html
Normal file
@@ -0,0 +1,750 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CPAS Tracker — Demo Preview</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Syne:wght@700;800&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
--gold: #d4af37;
|
||||
--gold-lt: #ffdf8a;
|
||||
--gold-dk: #a88520;
|
||||
--bg: #050608;
|
||||
--bg-nav: #000000;
|
||||
--bg-card: #111217;
|
||||
--bg-section:#181924;
|
||||
--border: #222;
|
||||
--border-lt: #2a2b3a;
|
||||
--text: #f8f9fa;
|
||||
--text-muted:#9ca0b8;
|
||||
--text-dim: #d1d3e0;
|
||||
--green: #28a745;
|
||||
--green-bg: #d4edda;
|
||||
--yellow: #856404;
|
||||
--yellow-bg: #fff3cd;
|
||||
--red: #d9534f;
|
||||
--red-bg: #f8d7da;
|
||||
--red-dk: #721c24;
|
||||
--red-dk-bg: #f5c6cb;
|
||||
--sep: #721c24;
|
||||
}
|
||||
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: 'Inter', sans-serif;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* ── DEMO BANNER ── */
|
||||
.demo-banner {
|
||||
background: linear-gradient(90deg, #1a1200 0%, #2a1f00 50%, #1a1200 100%);
|
||||
border-bottom: 1px solid var(--gold-dk);
|
||||
padding: 8px 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
font-family: 'DM Mono', monospace;
|
||||
font-size: 11px;
|
||||
color: var(--gold-lt);
|
||||
letter-spacing: 0.8px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
.demo-banner .dot {
|
||||
width: 6px; height: 6px; border-radius: 50%;
|
||||
background: var(--gold);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.4; transform: scale(0.7); }
|
||||
}
|
||||
|
||||
/* ── NAV ── */
|
||||
nav {
|
||||
background: var(--bg-nav);
|
||||
padding: 0 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
border-bottom: 1px solid #333;
|
||||
position: sticky;
|
||||
top: 33px;
|
||||
z-index: 999;
|
||||
}
|
||||
.logo-wrap {
|
||||
display: flex; align-items: center;
|
||||
margin-right: 32px; padding: 14px 0;
|
||||
gap: 10px;
|
||||
}
|
||||
.logo-icon {
|
||||
width: 28px; height: 28px;
|
||||
background: linear-gradient(135deg, var(--gold), var(--gold-lt));
|
||||
border-radius: 6px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 14px; font-weight: 900; color: #000;
|
||||
font-family: 'Syne', sans-serif;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.logo-text {
|
||||
color: var(--text);
|
||||
font-weight: 800;
|
||||
font-size: 18px;
|
||||
letter-spacing: 0.5px;
|
||||
font-family: 'Syne', sans-serif;
|
||||
}
|
||||
.nav-tab {
|
||||
padding: 18px 22px;
|
||||
color: rgba(248,249,250,0.55);
|
||||
border-bottom: 3px solid transparent;
|
||||
cursor: pointer;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
background: none;
|
||||
border-top: none; border-left: none; border-right: none;
|
||||
transition: color 0.2s;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
.nav-tab.active {
|
||||
color: var(--text);
|
||||
border-bottom-color: var(--gold);
|
||||
font-weight: 700;
|
||||
}
|
||||
.nav-tab:hover { color: var(--text); }
|
||||
.nav-docs {
|
||||
margin-left: auto;
|
||||
background: none;
|
||||
border: 1px solid var(--border-lt);
|
||||
color: var(--text-muted);
|
||||
border-radius: 6px;
|
||||
padding: 6px 14px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ── MAIN LAYOUT ── */
|
||||
.main {
|
||||
max-width: 1100px;
|
||||
margin: 30px auto;
|
||||
padding: 0 20px 60px;
|
||||
}
|
||||
|
||||
/* ── HERO ── */
|
||||
.hero {
|
||||
background: var(--bg-card);
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--border);
|
||||
padding: 48px 48px 40px;
|
||||
margin-bottom: 24px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, transparent, var(--gold), var(--gold-lt), var(--gold), transparent);
|
||||
}
|
||||
.hero::after {
|
||||
content: 'DEMO';
|
||||
position: absolute;
|
||||
top: 20px; right: 24px;
|
||||
font-family: 'DM Mono', monospace;
|
||||
font-size: 10px;
|
||||
letter-spacing: 2px;
|
||||
color: var(--gold-dk);
|
||||
border: 1px solid var(--gold-dk);
|
||||
padding: 2px 8px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.hero-eyebrow {
|
||||
font-family: 'DM Mono', monospace;
|
||||
font-size: 11px;
|
||||
letter-spacing: 2px;
|
||||
color: var(--gold);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.hero h1 {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 36px;
|
||||
font-weight: 800;
|
||||
color: var(--text);
|
||||
line-height: 1.1;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.hero h1 span { color: var(--gold); }
|
||||
.hero p {
|
||||
font-size: 15px;
|
||||
color: var(--text-dim);
|
||||
max-width: 580px;
|
||||
line-height: 1.7;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
.hero-stats {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.hero-stat {
|
||||
display: flex; flex-direction: column; gap: 3px;
|
||||
}
|
||||
.hero-stat .val {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 28px;
|
||||
font-weight: 800;
|
||||
color: var(--gold-lt);
|
||||
line-height: 1;
|
||||
}
|
||||
.hero-stat .lbl {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
font-family: 'DM Mono', monospace;
|
||||
}
|
||||
.hero-stat-divider {
|
||||
width: 1px; background: var(--border-lt);
|
||||
align-self: stretch; margin: 4px 0;
|
||||
}
|
||||
|
||||
/* ── SECTION TITLE ── */
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.section-title {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5px;
|
||||
color: var(--text-muted);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.section-title::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 3px; height: 14px;
|
||||
background: var(--gold);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* ── KPI CARDS ROW ── */
|
||||
.kpi-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 14px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.kpi-card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 20px 22px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: border-color 0.2s, transform 0.15s;
|
||||
}
|
||||
.kpi-card:hover { border-color: var(--border-lt); transform: translateY(-1px); }
|
||||
.kpi-card .kpi-label {
|
||||
font-size: 11px;
|
||||
font-family: 'DM Mono', monospace;
|
||||
letter-spacing: 0.8px;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.kpi-card .kpi-val {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 32px;
|
||||
font-weight: 800;
|
||||
color: var(--text);
|
||||
line-height: 1;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.kpi-card .kpi-sub { font-size: 11px; color: var(--text-muted); }
|
||||
.kpi-card .kpi-accent { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; }
|
||||
.kpi-accent-gold { background: linear-gradient(90deg, var(--gold-dk), var(--gold)); }
|
||||
.kpi-accent-red { background: linear-gradient(90deg, #a02020, #e74c3c); }
|
||||
.kpi-accent-blue { background: linear-gradient(90deg, #1a3a6a, #3b82f6); }
|
||||
.kpi-accent-green{ background: linear-gradient(90deg, #0a3d20, #28a745); }
|
||||
|
||||
/* ── TWO COLUMNS ── */
|
||||
.two-col {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.panel {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.panel-head {
|
||||
background: var(--bg-section);
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 14px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.panel-title {
|
||||
font-size: 13px; font-weight: 700;
|
||||
color: var(--text); font-family: 'Syne', sans-serif;
|
||||
}
|
||||
|
||||
/* ── EMPLOYEE TABLE ── */
|
||||
.emp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
|
||||
.emp-table th {
|
||||
padding: 10px 16px; text-align: left;
|
||||
font-size: 10px; font-family: 'DM Mono', monospace;
|
||||
letter-spacing: 1px; text-transform: uppercase;
|
||||
color: var(--text-muted); border-bottom: 1px solid var(--border);
|
||||
background: var(--bg-section);
|
||||
}
|
||||
.emp-table td { padding: 11px 16px; border-bottom: 1px solid #18191f; vertical-align: middle; }
|
||||
.emp-table tr:last-child td { border-bottom: none; }
|
||||
.emp-table tr:hover td { background: rgba(255,255,255,0.02); }
|
||||
.emp-name { font-weight: 600; color: var(--text); }
|
||||
|
||||
/* ── TIER BADGES ── */
|
||||
.tier-badge {
|
||||
display: inline-block; padding: 3px 9px; border-radius: 10px;
|
||||
font-size: 11px; font-weight: 700; white-space: nowrap; border: 1px solid;
|
||||
}
|
||||
.tier-0 { color: #28a745; background: #d4edda; border-color: #28a745; }
|
||||
.tier-1 { color: #856404; background: #fff3cd; border-color: #c9a000; }
|
||||
.tier-2 { color: #d9534f; background: #f8d7da; border-color: #d9534f; }
|
||||
.tier-3 { color: #d9534f; background: #f8d7da; border-color: #d9534f; }
|
||||
.tier-4 { color: #721c24; background: #f5c6cb; border-color: #c0392b; }
|
||||
.tier-5 { color: #721c24; background: #f5c6cb; border-color: #c0392b; }
|
||||
.tier-6 { color: #fff; background: #721c24; border-color: #5a1520; }
|
||||
|
||||
/* ── VIOLATION FEED ── */
|
||||
.viol-item {
|
||||
padding: 13px 18px; border-bottom: 1px solid #18191f;
|
||||
display: flex; align-items: flex-start; gap: 12px;
|
||||
}
|
||||
.viol-item:last-child { border-bottom: none; }
|
||||
.viol-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
|
||||
.viol-dot-red { background: #e74c3c; box-shadow: 0 0 6px rgba(231,76,60,0.5); }
|
||||
.viol-dot-yellow { background: var(--gold); box-shadow: 0 0 6px rgba(212,175,55,0.5); }
|
||||
.viol-dot-green { background: #28a745; }
|
||||
.viol-info { flex: 1; min-width: 0; }
|
||||
.viol-name { font-size: 13px; font-weight: 600; color: var(--text); }
|
||||
.viol-type { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
|
||||
.viol-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 11px; color: var(--text-muted); font-family: 'DM Mono', monospace; }
|
||||
.viol-pts { font-family: 'Syne', sans-serif; font-size: 18px; font-weight: 800; color: var(--gold-lt); flex-shrink: 0; }
|
||||
.repeat-tag { display: inline-block; padding: 1px 6px; border-radius: 8px; font-size: 10px; font-weight: 700; background: #3b2e00; color: #ffd666; border: 1px solid var(--gold-dk); margin-left: 4px; }
|
||||
|
||||
/* ── DEPT BREAKDOWN ── */
|
||||
.dept-row { padding: 12px 18px; border-bottom: 1px solid #18191f; display: flex; align-items: center; gap: 12px; }
|
||||
.dept-row:last-child { border-bottom: none; }
|
||||
.dept-name { font-size: 13px; color: var(--text-dim); min-width: 160px; }
|
||||
.dept-bar-track { flex: 1; height: 6px; background: var(--border-lt); border-radius: 3px; overflow: hidden; }
|
||||
.dept-bar-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--gold-dk), var(--gold)); }
|
||||
.dept-count { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--text-muted); min-width: 28px; text-align: right; }
|
||||
|
||||
/* ── FORM PREVIEW ── */
|
||||
.form-preview { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 24px; overflow: hidden; }
|
||||
.form-section { background: var(--bg-section); border-left: 4px solid var(--gold); padding: 20px 24px; margin: 20px; border-radius: 4px; border-top: 1px solid var(--border-lt); border-right: 1px solid var(--border-lt); border-bottom: 1px solid var(--border-lt); }
|
||||
.form-section-title { font-family: 'Syne', sans-serif; font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 14px; }
|
||||
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
|
||||
.form-item { display: flex; flex-direction: column; gap: 5px; }
|
||||
.form-label { font-size: 12px; font-weight: 600; color: #e5e7f1; }
|
||||
.form-input { padding: 9px 12px; border: 1px solid var(--border-lt); border-radius: 4px; font-size: 13px; background: #050608; color: var(--text-muted); font-family: 'Inter', sans-serif; pointer-events: none; }
|
||||
.form-input.filled { color: var(--text); border-color: #3a3d52; }
|
||||
.point-val { font-family: 'Syne', sans-serif; font-size: 28px; font-weight: 800; color: var(--gold-lt); }
|
||||
|
||||
/* ── TIER SCALE ── */
|
||||
.tier-timeline { display: flex; align-items: stretch; border-radius: 8px; border: 1px solid var(--border); overflow: hidden; }
|
||||
.tier-seg { flex: 1; padding: 12px 8px 10px; text-align: center; border-right: 1px solid rgba(255,255,255,0.05); }
|
||||
.tier-seg:last-child { border-right: none; }
|
||||
.tier-seg .ts-pts { font-family: 'Syne', sans-serif; font-size: 15px; font-weight: 800; margin-bottom: 3px; }
|
||||
.tier-seg .ts-label { font-size: 9px; font-family: 'DM Mono', monospace; letter-spacing: 0.5px; opacity: 0.8; line-height: 1.3; }
|
||||
.ts-0 { background: rgba(40,167,69,0.12); color: #28a745; }
|
||||
.ts-1 { background: rgba(133,100,4,0.15); color: #c9a000; }
|
||||
.ts-2 { background: rgba(217,83,79,0.15); color: #d9534f; }
|
||||
.ts-3 { background: rgba(217,83,79,0.18); color: #d9534f; }
|
||||
.ts-4 { background: rgba(114,28,36,0.20); color: #e87070; }
|
||||
.ts-5 { background: rgba(114,28,36,0.25); color: #e87070; }
|
||||
.ts-6 { background: rgba(114,28,36,0.50); color: #ff9999; }
|
||||
|
||||
/* ── AUDIT LOG ── */
|
||||
.audit-item { padding: 11px 18px; border-bottom: 1px solid #18191f; display: flex; align-items: center; gap: 12px; font-size: 12px; }
|
||||
.audit-item:last-child { border-bottom: none; }
|
||||
.audit-time { font-family: 'DM Mono', monospace; color: var(--text-muted); font-size: 11px; min-width: 80px; }
|
||||
.audit-action { flex: 1; color: var(--text-dim); }
|
||||
.audit-action strong { color: var(--text); font-weight: 600; }
|
||||
.audit-pts { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--gold); font-weight: 700; }
|
||||
|
||||
/* ── FEATURES ── */
|
||||
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 24px; }
|
||||
.feature-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 22px; transition: border-color 0.2s, transform 0.15s; }
|
||||
.feature-card:hover { border-color: var(--border-lt); transform: translateY(-2px); }
|
||||
.feature-icon { font-size: 22px; margin-bottom: 12px; display: block; }
|
||||
.feature-title { font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
|
||||
.feature-desc { font-size: 12px; color: var(--text-muted); line-height: 1.6; }
|
||||
|
||||
/* ── FOOTER ── */
|
||||
footer { border-top: 1px solid var(--border); padding: 24px 40px; display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--text-muted); font-family: 'DM Mono', monospace; }
|
||||
.footer-brand { font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; color: var(--text-dim); }
|
||||
|
||||
/* ── ANIMATIONS ── */
|
||||
.fade-in { opacity: 0; transform: translateY(16px); animation: fadeUp 0.5s ease forwards; }
|
||||
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
|
||||
.fade-in:nth-child(1) { animation-delay: 0.05s; }
|
||||
.fade-in:nth-child(2) { animation-delay: 0.10s; }
|
||||
.fade-in:nth-child(3) { animation-delay: 0.15s; }
|
||||
.fade-in:nth-child(4) { animation-delay: 0.20s; }
|
||||
|
||||
.tab-pane { display: none; }
|
||||
.tab-pane.active { display: block; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.kpi-row { grid-template-columns: repeat(2, 1fr); }
|
||||
.two-col { grid-template-columns: 1fr; }
|
||||
.features-grid { grid-template-columns: 1fr 1fr; }
|
||||
.hero { padding: 30px 24px; }
|
||||
.hero h1 { font-size: 26px; }
|
||||
nav { padding: 0 16px; }
|
||||
.main { padding: 0 12px 60px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Demo Banner -->
|
||||
<div class="demo-banner">
|
||||
<div class="dot"></div>
|
||||
DEMO ENVIRONMENT — Simulated data for stakeholder preview only — Not connected to live database
|
||||
<div class="dot"></div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav>
|
||||
<div class="logo-wrap">
|
||||
<div class="logo-icon">C</div>
|
||||
<div class="logo-text">CPAS Tracker</div>
|
||||
</div>
|
||||
<a class="nav-tab active" href="#" onclick="switchTab('dashboard', this); return false;">📊 Dashboard</a>
|
||||
<a class="nav-tab" href="#" onclick="switchTab('violations', this); return false;">+ New Violation</a>
|
||||
<button class="nav-docs">? Docs</button>
|
||||
</nav>
|
||||
|
||||
<div class="main">
|
||||
|
||||
<!-- ── DASHBOARD TAB ── -->
|
||||
<div id="tab-dashboard" class="tab-pane active">
|
||||
|
||||
<div class="hero fade-in">
|
||||
<div class="hero-eyebrow">Corrective Performance Action System</div>
|
||||
<h1>Employee <span>Compliance</span> Dashboard</h1>
|
||||
<p>Real-time visibility into workforce disciplinary standing. Track violations, monitor tier escalations, and generate signed documentation — all in one place.</p>
|
||||
<div class="hero-stats">
|
||||
<div class="hero-stat"><div class="val">47</div><div class="lbl">Total Employees</div></div>
|
||||
<div class="hero-stat-divider"></div>
|
||||
<div class="hero-stat"><div class="val">23</div><div class="lbl">Active Violations (90d)</div></div>
|
||||
<div class="hero-stat-divider"></div>
|
||||
<div class="hero-stat"><div class="val">3</div><div class="lbl">At-Risk (Tier 3+)</div></div>
|
||||
<div class="hero-stat-divider"></div>
|
||||
<div class="hero-stat"><div class="val">91%</div><div class="lbl">In Good Standing</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="kpi-row">
|
||||
<div class="kpi-card fade-in">
|
||||
<div class="kpi-label">New This Week</div>
|
||||
<div class="kpi-val">6</div>
|
||||
<div class="kpi-sub">+2 vs prior week</div>
|
||||
<div class="kpi-accent kpi-accent-gold"></div>
|
||||
</div>
|
||||
<div class="kpi-card fade-in">
|
||||
<div class="kpi-label">Tier 3+ Employees</div>
|
||||
<div class="kpi-val">3</div>
|
||||
<div class="kpi-sub">Requires attention</div>
|
||||
<div class="kpi-accent kpi-accent-red"></div>
|
||||
</div>
|
||||
<div class="kpi-card fade-in">
|
||||
<div class="kpi-label">PDFs Generated</div>
|
||||
<div class="kpi-val">18</div>
|
||||
<div class="kpi-sub">This month</div>
|
||||
<div class="kpi-accent kpi-accent-blue"></div>
|
||||
</div>
|
||||
<div class="kpi-card fade-in">
|
||||
<div class="kpi-label">Expiring (30d)</div>
|
||||
<div class="kpi-val">9</div>
|
||||
<div class="kpi-sub">Points rolling off</div>
|
||||
<div class="kpi-accent kpi-accent-green"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="two-col">
|
||||
<!-- Employee Roster -->
|
||||
<div class="panel">
|
||||
<div class="panel-head">
|
||||
<span class="panel-title">Employee Roster</span>
|
||||
<span style="font-size:11px;color:var(--text-muted);font-family:'DM Mono',monospace;">47 total</span>
|
||||
</div>
|
||||
<table class="emp-table">
|
||||
<thead><tr><th>Employee</th><th>Dept</th><th>Standing</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><div class="emp-name">Marcus T.</div></td><td><div style="font-size:11px;color:var(--text-muted);">Operations</div></td><td><span class="tier-badge tier-4">22 pts — Tier 4</span></td></tr>
|
||||
<tr><td><div class="emp-name">Janelle R.</div></td><td><div style="font-size:11px;color:var(--text-muted);">Production</div></td><td><span class="tier-badge tier-3">17 pts — Tier 3</span></td></tr>
|
||||
<tr><td><div class="emp-name">Devon H.</div></td><td><div style="font-size:11px;color:var(--text-muted);">Operations</div></td><td><span class="tier-badge tier-3">15 pts — Tier 3</span></td></tr>
|
||||
<tr><td><div class="emp-name">Priya S.</div></td><td><div style="font-size:11px;color:var(--text-muted);">Impl & Support</div></td><td><span class="tier-badge tier-2">12 pts — Tier 2</span></td></tr>
|
||||
<tr><td><div class="emp-name">Carlos M.</div></td><td><div style="font-size:11px;color:var(--text-muted);">Production</div></td><td><span class="tier-badge tier-1">7 pts — Tier 1</span></td></tr>
|
||||
<tr><td><div class="emp-name">Aisha W.</div></td><td><div style="font-size:11px;color:var(--text-muted);">Administrative</div></td><td><span class="tier-badge tier-1">5 pts — Tier 1</span></td></tr>
|
||||
<tr><td><div class="emp-name">Tom B.</div></td><td><div style="font-size:11px;color:var(--text-muted);">Design & Content</div></td><td><span class="tier-badge tier-0">2 pts — Elite</span></td></tr>
|
||||
<tr><td><div class="emp-name">Sandra K.</div></td><td><div style="font-size:11px;color:var(--text-muted);">Business Dev</div></td><td><span class="tier-badge tier-0">0 pts — Elite</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Recent Violations -->
|
||||
<div class="panel">
|
||||
<div class="panel-head">
|
||||
<span class="panel-title">Recent Violations</span>
|
||||
<span style="font-size:11px;color:var(--text-muted);font-family:'DM Mono',monospace;">Last 7 days</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="viol-item">
|
||||
<div class="viol-dot viol-dot-red"></div>
|
||||
<div class="viol-info">
|
||||
<div class="viol-name">Marcus T. <span class="repeat-tag">★ REPEAT</span></div>
|
||||
<div class="viol-type">Unauthorized Absence — Operations</div>
|
||||
<div class="viol-meta"><span>Mar 6</span><span>·</span><span>D. Williams</span></div>
|
||||
</div>
|
||||
<div class="viol-pts">+5</div>
|
||||
</div>
|
||||
<div class="viol-item">
|
||||
<div class="viol-dot viol-dot-red"></div>
|
||||
<div class="viol-info">
|
||||
<div class="viol-name">Janelle R.</div>
|
||||
<div class="viol-type">Insubordination — Production</div>
|
||||
<div class="viol-meta"><span>Mar 5</span><span>·</span><span>K. Thompson</span></div>
|
||||
</div>
|
||||
<div class="viol-pts">+4</div>
|
||||
</div>
|
||||
<div class="viol-item">
|
||||
<div class="viol-dot viol-dot-yellow"></div>
|
||||
<div class="viol-info">
|
||||
<div class="viol-name">Devon H.</div>
|
||||
<div class="viol-type">Tardiness (3×) — Operations</div>
|
||||
<div class="viol-meta"><span>Mar 4</span><span>·</span><span>D. Williams</span></div>
|
||||
</div>
|
||||
<div class="viol-pts">+3</div>
|
||||
</div>
|
||||
<div class="viol-item">
|
||||
<div class="viol-dot viol-dot-yellow"></div>
|
||||
<div class="viol-info">
|
||||
<div class="viol-name">Carlos M.</div>
|
||||
<div class="viol-type">Cell Phone Policy — Production</div>
|
||||
<div class="viol-meta"><span>Mar 3</span><span>·</span><span>K. Thompson</span></div>
|
||||
</div>
|
||||
<div class="viol-pts">+2</div>
|
||||
</div>
|
||||
<div class="viol-item">
|
||||
<div class="viol-dot viol-dot-yellow"></div>
|
||||
<div class="viol-info">
|
||||
<div class="viol-name">Priya S.</div>
|
||||
<div class="viol-type">Dress Code Violation — Impl & Support</div>
|
||||
<div class="viol-meta"><span>Mar 2</span><span>·</span><span>M. Johnson</span></div>
|
||||
</div>
|
||||
<div class="viol-pts">+1</div>
|
||||
</div>
|
||||
<div class="viol-item">
|
||||
<div class="viol-dot viol-dot-green"></div>
|
||||
<div class="viol-info">
|
||||
<div class="viol-name">Aisha W.</div>
|
||||
<div class="viol-type">Late Return from Break — Administrative</div>
|
||||
<div class="viol-meta"><span>Mar 1</span><span>·</span><span>S. Martinez</span></div>
|
||||
</div>
|
||||
<div class="viol-pts">+1</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="two-col">
|
||||
<!-- Dept Breakdown -->
|
||||
<div class="panel">
|
||||
<div class="panel-head">
|
||||
<span class="panel-title">Violations by Department</span>
|
||||
<span style="font-size:11px;color:var(--text-muted);font-family:'DM Mono',monospace;">90-day window</span>
|
||||
</div>
|
||||
<div style="padding:8px 0;">
|
||||
<div class="dept-row"><div class="dept-name">Operations</div><div class="dept-bar-track"><div class="dept-bar-fill" style="width:88%"></div></div><div class="dept-count">8</div></div>
|
||||
<div class="dept-row"><div class="dept-name">Production</div><div class="dept-bar-track"><div class="dept-bar-fill" style="width:66%"></div></div><div class="dept-count">6</div></div>
|
||||
<div class="dept-row"><div class="dept-name">Impl & Support</div><div class="dept-bar-track"><div class="dept-bar-fill" style="width:44%"></div></div><div class="dept-count">4</div></div>
|
||||
<div class="dept-row"><div class="dept-name">Administrative</div><div class="dept-bar-track"><div class="dept-bar-fill" style="width:22%"></div></div><div class="dept-count">2</div></div>
|
||||
<div class="dept-row"><div class="dept-name">Business Dev</div><div class="dept-bar-track"><div class="dept-bar-fill" style="width:11%"></div></div><div class="dept-count">1</div></div>
|
||||
<div class="dept-row"><div class="dept-name">Design & Content</div><div class="dept-bar-track"><div class="dept-bar-fill" style="width:11%"></div></div><div class="dept-count">1</div></div>
|
||||
<div class="dept-row"><div class="dept-name">Executive</div><div class="dept-bar-track"><div class="dept-bar-fill" style="width:0%"></div></div><div class="dept-count">0</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Audit Log -->
|
||||
<div class="panel">
|
||||
<div class="panel-head">
|
||||
<span class="panel-title">Audit Log</span>
|
||||
<span style="font-size:11px;color:var(--text-muted);font-family:'DM Mono',monospace;">System activity</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="audit-item"><div class="audit-time">03/06 2:14p</div><div class="audit-action"><strong>Violation #41</strong> created — Marcus T.</div><div class="audit-pts">+5 pts</div></div>
|
||||
<div class="audit-item"><div class="audit-time">03/06 2:15p</div><div class="audit-action">PDF generated for <strong>Violation #41</strong></div><div class="audit-pts">—</div></div>
|
||||
<div class="audit-item"><div class="audit-time">03/05 9:40a</div><div class="audit-action"><strong>Violation #40</strong> created — Janelle R.</div><div class="audit-pts">+4 pts</div></div>
|
||||
<div class="audit-item"><div class="audit-time">03/04 11:20a</div><div class="audit-action">Employee <strong>Devon H.</strong> record updated</div><div class="audit-pts">—</div></div>
|
||||
<div class="audit-item"><div class="audit-time">03/04 8:55a</div><div class="audit-action"><strong>Violation #39</strong> created — Devon H.</div><div class="audit-pts">+3 pts</div></div>
|
||||
<div class="audit-item"><div class="audit-time">03/03 3:30p</div><div class="audit-action"><strong>Violation #38</strong> amended — Carlos M.</div><div class="audit-pts">−1 pt</div></div>
|
||||
<div class="audit-item"><div class="audit-time">03/02 1:05p</div><div class="audit-action"><strong>Duplicate record</strong> merged — R. Johnson</div><div class="audit-pts">—</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CPAS Tier Scale -->
|
||||
<div style="margin-bottom:24px;">
|
||||
<div class="section-header">
|
||||
<div class="section-title">CPAS Tier Scale</div>
|
||||
</div>
|
||||
<div class="tier-timeline">
|
||||
<div class="tier-seg ts-0"><div class="ts-pts">0–4</div><div class="ts-label">Elite<br/>Standing</div></div>
|
||||
<div class="tier-seg ts-1"><div class="ts-pts">5–9</div><div class="ts-label">Tier 1<br/>Realignment</div></div>
|
||||
<div class="tier-seg ts-2"><div class="ts-pts">10–14</div><div class="ts-label">Tier 2<br/>Admin Lockdown</div></div>
|
||||
<div class="tier-seg ts-3"><div class="ts-pts">15–19</div><div class="ts-label">Tier 3<br/>Verification</div></div>
|
||||
<div class="tier-seg ts-4"><div class="ts-pts">20–24</div><div class="ts-label">Tier 4<br/>Risk Mitigation</div></div>
|
||||
<div class="tier-seg ts-5"><div class="ts-pts">25–29</div><div class="ts-label">Tier 5<br/>Final Decision</div></div>
|
||||
<div class="tier-seg ts-6"><div class="ts-pts">30+</div><div class="ts-label">Tier 6<br/>Separation</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- System Capabilities -->
|
||||
<div class="section-header"><div class="section-title">System Capabilities</div></div>
|
||||
<div class="features-grid">
|
||||
<div class="feature-card fade-in"><span class="feature-icon">⚡</span><div class="feature-title">Repeat Offense Detection</div><div class="feature-desc">Automatically flags prior violations for the same type and escalates point recommendations per recidivist policy.</div></div>
|
||||
<div class="feature-card fade-in"><span class="feature-icon">📄</span><div class="feature-title">One-Click PDF Generation</div><div class="feature-desc">Generates signed, professional violation documents instantly — with or without employee acknowledgment signatures.</div></div>
|
||||
<div class="feature-card fade-in"><span class="feature-icon">🔀</span><div class="feature-title">Duplicate Record Merge</div><div class="feature-desc">Consolidate duplicate employee records while preserving full violation history under the canonical profile.</div></div>
|
||||
<div class="feature-card fade-in"><span class="feature-icon">📊</span><div class="feature-title">90-Day Rolling Window</div><div class="feature-desc">Points automatically expire after 90 days. Active standing reflects only the current compliance window.</div></div>
|
||||
<div class="feature-card fade-in"><span class="feature-icon">🏷️</span><div class="feature-title">Tier Escalation Warnings</div><div class="feature-desc">Real-time alerts when a new violation would push an employee across a tier boundary before you submit.</div></div>
|
||||
<div class="feature-card fade-in"><span class="feature-icon">🗂️</span><div class="feature-title">Full Audit Trail</div><div class="feature-desc">Every create, amendment, merge, and PDF generation is logged with timestamp and operator attribution.</div></div>
|
||||
</div>
|
||||
|
||||
</div><!-- /tab-dashboard -->
|
||||
|
||||
<!-- ── VIOLATION FORM TAB ── -->
|
||||
<div id="tab-violations" class="tab-pane">
|
||||
|
||||
<div style="margin-bottom:20px;">
|
||||
<div style="background:#181200;border:1px solid var(--gold-dk);border-radius:8px;padding:12px 18px;font-size:12px;color:var(--gold-lt);font-family:'DM Mono',monospace;letter-spacing:0.4px;">
|
||||
⚠ DEMO VIEW — Form fields shown with sample data. Submission is disabled in demo mode.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-preview">
|
||||
<div class="form-section">
|
||||
<div class="form-section-title">Employee Information</div>
|
||||
<div style="margin-bottom:16px;">
|
||||
<div class="form-label" style="margin-bottom:6px;">Quick-Select Existing Employee:</div>
|
||||
<div class="form-input filled" style="display:flex;align-items:center;justify-content:space-between;">
|
||||
<span>Marcus Thompson — Operations</span><span style="color:var(--text-muted);font-size:11px;">▼</span>
|
||||
</div>
|
||||
<div style="margin-top:8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
|
||||
<span style="font-size:12px;color:var(--text-dim);font-weight:600;">Current Standing:</span>
|
||||
<span class="tier-badge tier-4">22 pts — Tier 4 · Risk Mitigation</span>
|
||||
<span style="font-size:11px;color:var(--text-muted);">4 violations in last 90 days</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-item"><div class="form-label">Employee Name:</div><div class="form-input filled">Marcus Thompson</div></div>
|
||||
<div class="form-item"><div class="form-label">Department:</div><div class="form-input filled" style="display:flex;align-items:center;justify-content:space-between;"><span>Operations</span><span style="color:var(--text-muted);font-size:11px;">▼</span></div></div>
|
||||
<div class="form-item"><div class="form-label">Supervisor Name:</div><div class="form-input filled">D. Williams</div></div>
|
||||
<div class="form-item"><div class="form-label">Witness Name (Officer):</div><div class="form-input">Officer Name</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-section">
|
||||
<div class="form-section-title">Violation Details</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-item" style="grid-column:1 / -1;">
|
||||
<div class="form-label">Violation Type:</div>
|
||||
<div class="form-input filled" style="display:flex;align-items:center;justify-content:space-between;">
|
||||
<span>Unauthorized Absence ★ 2x in 90 days</span><span style="color:var(--text-muted);font-size:11px;">▼</span>
|
||||
</div>
|
||||
<div style="background:#141623;border:1px solid var(--border-lt);border-radius:4px;padding:10px;font-size:12px;color:var(--text-dim);margin-top:6px;">
|
||||
<strong>Unauthorized Absence</strong> <span class="repeat-tag">★ Repeat — 2x prior</span><br/>
|
||||
Absence from scheduled work without prior approval or acceptable documentation.<br/>
|
||||
<span style="font-size:10px;color:#a0a3ba;">Chapter 4, Section 4.1 — Attendance & Punctuality</span>
|
||||
</div>
|
||||
<div style="background:#3b2e00;border:1px solid var(--gold-dk);border-radius:4px;padding:8px 12px;margin-top:6px;font-size:12px;color:#ffdf8a;">
|
||||
<strong>Repeat offense detected.</strong> Point slider set to maximum (5 pts) per recidivist policy. Adjust if needed.
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item"><div class="form-label">Incident Date:</div><div class="form-input filled">2026-03-06</div></div>
|
||||
</div>
|
||||
<div style="background:#2d1a00;border:1px solid #a06000;border-radius:6px;padding:12px 16px;margin-top:16px;font-size:13px;color:#ffc107;">
|
||||
⚠ <strong>Tier escalation warning:</strong> Adding 5 pts will bring Marcus to <strong>27 pts (Tier 5 — Final Decision)</strong>. This is one tier below Separation. Review carefully.
|
||||
</div>
|
||||
<div style="background:#181200;border:2px solid var(--gold);padding:14px;border-radius:6px;margin:16px 0 0;text-align:center;">
|
||||
<div style="color:#ffdf8a;font-weight:700;margin-bottom:8px;">CPAS Point Assessment</div>
|
||||
<div style="font-size:13px;color:var(--text-dim);">Unauthorized Absence: 3–5 Points</div>
|
||||
<div style="width:100%;height:6px;background:var(--border-lt);border-radius:3px;margin:12px 0 4px;overflow:hidden;"><div style="width:100%;height:100%;background:linear-gradient(90deg,var(--gold-dk),var(--gold));border-radius:3px;"></div></div>
|
||||
<div class="point-val">5 Points</div>
|
||||
<div style="font-size:12px;color:var(--text-dim);margin-top:4px;">Adjust to reflect severity and context</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="background:var(--bg-section);border-left:4px solid #2196F3;padding:20px 24px;margin:20px;border-radius:4px;border:1px solid var(--border-lt);">
|
||||
<div style="font-family:'Syne',sans-serif;font-size:16px;font-weight:700;margin-bottom:8px;">Employee Acknowledgment</div>
|
||||
<div style="font-size:12px;color:var(--text-muted);margin-bottom:14px;line-height:1.6;">If the employee is present and acknowledges receipt of this violation, enter their name and the date below.</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-item"><div class="form-label">Acknowledged By:</div><div class="form-input">Employee's printed name</div></div>
|
||||
<div class="form-item"><div class="form-label">Acknowledgment Date:</div><div class="form-input">yyyy-mm-dd</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:14px;justify-content:center;padding:20px 20px 28px;">
|
||||
<button style="padding:14px 36px;font-size:15px;font-weight:700;border:none;border-radius:6px;cursor:not-allowed;background:linear-gradient(135deg,#d4af37,#ffdf8a);color:#000;text-transform:uppercase;opacity:0.5;">Submit Violation</button>
|
||||
<button style="padding:14px 36px;font-size:15px;font-weight:700;border:1px solid var(--border-lt);border-radius:6px;cursor:not-allowed;background:#050608;color:var(--text);text-transform:uppercase;opacity:0.5;">Clear Form</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /tab-violations -->
|
||||
|
||||
</div><!-- /main -->
|
||||
|
||||
<footer>
|
||||
<div class="footer-brand">CPAS Tracker</div>
|
||||
<div>DEMO BUILD — All data synthetic — Not for operational use</div>
|
||||
<div>© 2026 MPM</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
function switchTab(name, el) {
|
||||
document.querySelectorAll('.tab-pane').forEach(p => p.classList.remove('active'));
|
||||
document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
|
||||
document.getElementById('tab-' + name).classList.add('active');
|
||||
el.classList.add('active');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user