2026-03-07 23:27:25 -06:00
<!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 {
2026-03-08 00:19:59 -06:00
--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 ;
2026-03-07 23:27:25 -06:00
}
html { scroll-behavior : smooth ; }
body {
background : var ( -- bg );
color : var ( -- text );
font-family : 'Inter' , sans-serif ;
min-height : 100 vh ;
overflow-x : hidden ;
}
/* ── DEMO BANNER ── */
. demo-banner {
background : linear-gradient ( 90 deg , #1a1200 0 % , #2a1f00 50 % , #1a1200 100 % );
border-bottom : 1 px solid var ( -- gold - dk );
padding : 8 px 40 px ;
display : flex ;
align-items : center ;
justify-content : center ;
gap : 10 px ;
font-family : 'DM Mono' , monospace ;
font-size : 11 px ;
color : var ( -- gold - lt );
letter-spacing : 0.8 px ;
position : sticky ;
top : 0 ;
z-index : 1000 ;
}
. demo-banner . dot {
width : 6 px ; height : 6 px ; border-radius : 50 % ;
background : var ( -- gold );
animation : pulse 2 s 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 40 px ;
display : flex ;
align-items : center ;
gap : 0 ;
border-bottom : 1 px solid #333 ;
position : sticky ;
top : 33 px ;
z-index : 999 ;
}
. logo-wrap {
display : flex ; align-items : center ;
margin-right : 32 px ; padding : 14 px 0 ;
gap : 10 px ;
}
. logo-icon {
width : 28 px ; height : 28 px ;
background : linear-gradient ( 135 deg , var ( -- gold ), var ( -- gold - lt ));
border-radius : 6 px ;
display : flex ; align-items : center ; justify-content : center ;
font-size : 14 px ; font-weight : 900 ; color : #000 ;
font-family : 'Syne' , sans-serif ;
flex-shrink : 0 ;
}
. logo-text {
color : var ( -- text );
font-weight : 800 ;
font-size : 18 px ;
letter-spacing : 0.5 px ;
font-family : 'Syne' , sans-serif ;
}
. nav-tab {
padding : 18 px 22 px ;
color : rgba ( 248 , 249 , 250 , 0.55 );
border-bottom : 3 px solid transparent ;
cursor : pointer ;
font-weight : 400 ;
font-size : 14 px ;
background : none ;
border-top : none ; border-left : none ; border-right : none ;
transition : color 0.2 s ;
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 : 1 px solid var ( -- border - lt );
color : var ( -- text - muted );
border-radius : 6 px ;
padding : 6 px 14 px ;
font-size : 12 px ;
cursor : pointer ;
font-weight : 600 ;
}
/* ── MAIN LAYOUT ── */
. main {
max-width : 1100 px ;
margin : 30 px auto ;
padding : 0 20 px 60 px ;
}
/* ── HERO ── */
. hero {
background : var ( -- bg - card );
border-radius : 10 px ;
border : 1 px solid var ( -- border );
padding : 48 px 48 px 40 px ;
margin-bottom : 24 px ;
position : relative ;
overflow : hidden ;
}
. hero :: before {
content : '' ;
position : absolute ;
top : 0 ; left : 0 ; right : 0 ;
height : 3 px ;
background : linear-gradient ( 90 deg , transparent , var ( -- gold ), var ( -- gold - lt ), var ( -- gold ), transparent );
}
. hero :: after {
content : 'DEMO' ;
position : absolute ;
top : 20 px ; right : 24 px ;
font-family : 'DM Mono' , monospace ;
font-size : 10 px ;
letter-spacing : 2 px ;
color : var ( -- gold - dk );
border : 1 px solid var ( -- gold - dk );
padding : 2 px 8 px ;
border-radius : 3 px ;
}
. hero-eyebrow {
font-family : 'DM Mono' , monospace ;
font-size : 11 px ;
letter-spacing : 2 px ;
color : var ( -- gold );
text-transform : uppercase ;
margin-bottom : 14 px ;
}
. hero h1 {
font-family : 'Syne' , sans-serif ;
font-size : 36 px ;
font-weight : 800 ;
color : var ( -- text );
line-height : 1.1 ;
margin-bottom : 14 px ;
}
. hero h1 span { color : var ( -- gold ); }
. hero p {
font-size : 15 px ;
color : var ( -- text - dim );
max-width : 580 px ;
line-height : 1.7 ;
margin-bottom : 28 px ;
}
. hero-stats {
display : flex ;
gap : 32 px ;
flex-wrap : wrap ;
}
. hero-stat {
display : flex ; flex-direction : column ; gap : 3 px ;
}
. hero-stat . val {
font-family : 'Syne' , sans-serif ;
font-size : 28 px ;
font-weight : 800 ;
color : var ( -- gold - lt );
line-height : 1 ;
}
. hero-stat . lbl {
font-size : 11 px ;
color : var ( -- text - muted );
letter-spacing : 0.5 px ;
text-transform : uppercase ;
font-family : 'DM Mono' , monospace ;
}
. hero-stat-divider {
width : 1 px ; background : var ( -- border - lt );
align-self : stretch ; margin : 4 px 0 ;
}
/* ── SECTION TITLE ── */
. section-header {
display : flex ;
align-items : center ;
justify-content : space-between ;
margin-bottom : 16 px ;
}
. section-title {
font-family : 'Syne' , sans-serif ;
font-size : 13 px ;
font-weight : 700 ;
text-transform : uppercase ;
letter-spacing : 1.5 px ;
color : var ( -- text - muted );
display : flex ;
align-items : center ;
gap : 8 px ;
}
. section-title :: before {
content : '' ;
display : block ;
width : 3 px ; height : 14 px ;
background : var ( -- gold );
border-radius : 2 px ;
}
/* ── KPI CARDS ROW ── */
. kpi-row {
display : grid ;
grid-template-columns : repeat ( 4 , 1 fr );
gap : 14 px ;
margin-bottom : 24 px ;
}
. kpi-card {
background : var ( -- bg - card );
border : 1 px solid var ( -- border );
border-radius : 10 px ;
padding : 20 px 22 px ;
position : relative ;
overflow : hidden ;
transition : border-color 0.2 s , transform 0.15 s ;
}
. kpi-card : hover { border-color : var ( -- border - lt ); transform : translateY ( -1 px ); }
. kpi-card . kpi-label {
font-size : 11 px ;
font-family : 'DM Mono' , monospace ;
letter-spacing : 0.8 px ;
color : var ( -- text - muted );
text-transform : uppercase ;
margin-bottom : 10 px ;
}
. kpi-card . kpi-val {
font-family : 'Syne' , sans-serif ;
font-size : 32 px ;
font-weight : 800 ;
color : var ( -- text );
line-height : 1 ;
margin-bottom : 6 px ;
}
. kpi-card . kpi-sub { font-size : 11 px ; color : var ( -- text - muted ); }
. kpi-card . kpi-accent { position : absolute ; bottom : 0 ; left : 0 ; right : 0 ; height : 3 px ; }
. kpi-accent-gold { background : linear-gradient ( 90 deg , var ( -- gold - dk ), var ( -- gold )); }
. kpi-accent-red { background : linear-gradient ( 90 deg , #a02020 , #e74c3c ); }
. kpi-accent-blue { background : linear-gradient ( 90 deg , #1a3a6a , #3b82f6 ); }
. kpi-accent-green { background : linear-gradient ( 90 deg , #0a3d20 , #28a745 ); }
/* ── TWO COLUMNS ── */
. two-col {
display : grid ;
grid-template-columns : 1 fr 1 fr ;
gap : 20 px ;
margin-bottom : 24 px ;
}
. panel {
background : var ( -- bg - card );
border : 1 px solid var ( -- border );
border-radius : 10 px ;
overflow : hidden ;
}
. panel-head {
background : var ( -- bg - section );
border-bottom : 1 px solid var ( -- border );
padding : 14 px 20 px ;
display : flex ;
align-items : center ;
justify-content : space-between ;
}
. panel-title {
font-size : 13 px ; font-weight : 700 ;
color : var ( -- text ); font-family : 'Syne' , sans-serif ;
}
/* ── EMPLOYEE TABLE ── */
. emp-table { width : 100 % ; border-collapse : collapse ; font-size : 13 px ; }
. emp-table th {
padding : 10 px 16 px ; text-align : left ;
font-size : 10 px ; font-family : 'DM Mono' , monospace ;
letter-spacing : 1 px ; text-transform : uppercase ;
color : var ( -- text - muted ); border-bottom : 1 px solid var ( -- border );
background : var ( -- bg - section );
}
. emp-table td { padding : 11 px 16 px ; border-bottom : 1 px 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 : 3 px 9 px ; border-radius : 10 px ;
font-size : 11 px ; font-weight : 700 ; white-space : nowrap ; border : 1 px 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 : 13 px 18 px ; border-bottom : 1 px solid #18191f ;
display : flex ; align-items : flex-start ; gap : 12 px ;
}
. viol-item : last-child { border-bottom : none ; }
. viol-dot { width : 8 px ; height : 8 px ; border-radius : 50 % ; margin-top : 5 px ; flex-shrink : 0 ; }
. viol-dot-red { background : #e74c3c ; box-shadow : 0 0 6 px rgba ( 231 , 76 , 60 , 0.5 ); }
. viol-dot-yellow { background : var ( -- gold ); box-shadow : 0 0 6 px rgba ( 212 , 175 , 55 , 0.5 ); }
. viol-dot-green { background : #28a745 ; }
. viol-info { flex : 1 ; min-width : 0 ; }
. viol-name { font-size : 13 px ; font-weight : 600 ; color : var ( -- text ); }
. viol-type { font-size : 11 px ; color : var ( -- text - muted ); margin-top : 2 px ; }
. viol-meta { display : flex ; align-items : center ; gap : 8 px ; margin-top : 4 px ; font-size : 11 px ; color : var ( -- text - muted ); font-family : 'DM Mono' , monospace ; }
. viol-pts { font-family : 'Syne' , sans-serif ; font-size : 18 px ; font-weight : 800 ; color : var ( -- gold - lt ); flex-shrink : 0 ; }
. repeat-tag { display : inline-block ; padding : 1 px 6 px ; border-radius : 8 px ; font-size : 10 px ; font-weight : 700 ; background : #3b2e00 ; color : #ffd666 ; border : 1 px solid var ( -- gold - dk ); margin-left : 4 px ; }
/* ── DEPT BREAKDOWN ── */
. dept-row { padding : 12 px 18 px ; border-bottom : 1 px solid #18191f ; display : flex ; align-items : center ; gap : 12 px ; }
. dept-row : last-child { border-bottom : none ; }
. dept-name { font-size : 13 px ; color : var ( -- text - dim ); min-width : 160 px ; }
. dept-bar-track { flex : 1 ; height : 6 px ; background : var ( -- border - lt ); border-radius : 3 px ; overflow : hidden ; }
. dept-bar-fill { height : 100 % ; border-radius : 3 px ; background : linear-gradient ( 90 deg , var ( -- gold - dk ), var ( -- gold )); }
. dept-count { font-family : 'DM Mono' , monospace ; font-size : 12 px ; color : var ( -- text - muted ); min-width : 28 px ; text-align : right ; }
/* ── FORM PREVIEW ── */
. form-preview { background : var ( -- bg - card ); border : 1 px solid var ( -- border ); border-radius : 10 px ; margin-bottom : 24 px ; overflow : hidden ; }
. form-section { background : var ( -- bg - section ); border-left : 4 px solid var ( -- gold ); padding : 20 px 24 px ; margin : 20 px ; border-radius : 4 px ; border-top : 1 px solid var ( -- border - lt ); border-right : 1 px solid var ( -- border - lt ); border-bottom : 1 px solid var ( -- border - lt ); }
. form-section-title { font-family : 'Syne' , sans-serif ; font-size : 18 px ; font-weight : 700 ; color : var ( -- text ); margin-bottom : 14 px ; }
. form-grid { display : grid ; grid-template-columns : repeat ( auto - fit , minmax ( 200 px , 1 fr )); gap : 14 px ; }
. form-item { display : flex ; flex-direction : column ; gap : 5 px ; }
. form-label { font-size : 12 px ; font-weight : 600 ; color : #e5e7f1 ; }
. form-input { padding : 9 px 12 px ; border : 1 px solid var ( -- border - lt ); border-radius : 4 px ; font-size : 13 px ; 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 : 28 px ; font-weight : 800 ; color : var ( -- gold - lt ); }
/* ── TIER SCALE ── */
. tier-timeline { display : flex ; align-items : stretch ; border-radius : 8 px ; border : 1 px solid var ( -- border ); overflow : hidden ; }
. tier-seg { flex : 1 ; padding : 12 px 8 px 10 px ; text-align : center ; border-right : 1 px 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 : 15 px ; font-weight : 800 ; margin-bottom : 3 px ; }
. tier-seg . ts-label { font-size : 9 px ; font-family : 'DM Mono' , monospace ; letter-spacing : 0.5 px ; 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 : 11 px 18 px ; border-bottom : 1 px solid #18191f ; display : flex ; align-items : center ; gap : 12 px ; font-size : 12 px ; }
. audit-item : last-child { border-bottom : none ; }
. audit-time { font-family : 'DM Mono' , monospace ; color : var ( -- text - muted ); font-size : 11 px ; min-width : 80 px ; }
. 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 : 11 px ; color : var ( -- gold ); font-weight : 700 ; }
/* ── FEATURES ── */
. features-grid { display : grid ; grid-template-columns : repeat ( 3 , 1 fr ); gap : 14 px ; margin-bottom : 24 px ; }
. feature-card { background : var ( -- bg - card ); border : 1 px solid var ( -- border ); border-radius : 10 px ; padding : 22 px ; transition : border-color 0.2 s , transform 0.15 s ; }
. feature-card : hover { border-color : var ( -- border - lt ); transform : translateY ( -2 px ); }
. feature-icon { font-size : 22 px ; margin-bottom : 12 px ; display : block ; }
. feature-title { font-family : 'Syne' , sans-serif ; font-size : 14 px ; font-weight : 700 ; color : var ( -- text ); margin-bottom : 6 px ; }
. feature-desc { font-size : 12 px ; color : var ( -- text - muted ); line-height : 1.6 ; }
/* ── FOOTER ── */
2026-03-08 00:19:59 -06:00
footer {
border-top : 1 px solid var ( -- border );
padding : 20 px 40 px ;
display : flex ;
align-items : center ;
justify-content : space-between ;
flex-wrap : wrap ;
gap : 12 px ;
font-size : 11 px ;
color : var ( -- text - muted );
font-family : 'DM Mono' , monospace ;
background : var ( -- bg - nav );
}
. footer-left {
display : flex ;
align-items : center ;
gap : 18 px ;
}
. footer-brand {
font-family : 'Syne' , sans-serif ;
font-size : 13 px ;
font-weight : 700 ;
color : var ( -- text - dim );
}
. footer-copy {
color : var ( -- text - muted );
font-size : 11 px ;
}
. footer-gitea {
display : flex ;
align-items : center ;
gap : 6 px ;
color : var ( -- text - muted );
text-decoration : none ;
padding : 4 px 10 px ;
border : 1 px solid var ( -- border - lt );
border-radius : 5 px ;
transition : border-color 0.2 s , color 0.2 s ;
font-size : 11 px ;
}
. footer-gitea : hover {
border-color : var ( -- gold - dk );
color : var ( -- gold - lt );
}
. footer-gitea svg {
width : 14 px ;
height : 14 px ;
fill : currentColor ;
flex-shrink : 0 ;
}
. footer-right {
display : flex ;
align-items : center ;
gap : 18 px ;
}
. footer-ticker {
display : flex ;
align-items : center ;
gap : 8 px ;
background : rgba ( 212 , 175 , 55 , 0.06 );
border : 1 px solid rgba ( 212 , 175 , 55 , 0.2 );
border-radius : 5 px ;
padding : 4 px 12 px ;
}
. footer-ticker-label {
font-size : 10 px ;
color : var ( -- text - muted );
letter-spacing : 0.5 px ;
text-transform : uppercase ;
}
. footer-ticker-time {
font-family : 'DM Mono' , monospace ;
font-size : 12 px ;
color : var ( -- gold );
font-weight : 500 ;
letter-spacing : 1 px ;
}
. footer-ticker-dot {
width : 5 px ; height : 5 px ; border-radius : 50 % ;
background : var ( -- gold );
animation : pulse 2 s infinite ;
flex-shrink : 0 ;
}
. footer-divider {
width : 1 px ;
height : 16 px ;
background : var ( -- border - lt );
}
2026-03-07 23:27:25 -06:00
/* ── ANIMATIONS ── */
. fade-in { opacity : 0 ; transform : translateY ( 16 px ); animation : fadeUp 0.5 s ease forwards ; }
@ keyframes fadeUp { to { opacity : 1 ; transform : translateY ( 0 ); } }
. fade-in : nth-child ( 1 ) { animation-delay : 0.05 s ; }
. fade-in : nth-child ( 2 ) { animation-delay : 0.10 s ; }
. fade-in : nth-child ( 3 ) { animation-delay : 0.15 s ; }
. fade-in : nth-child ( 4 ) { animation-delay : 0.20 s ; }
. tab-pane { display : none ; }
. tab-pane . active { display : block ; }
@ media ( max-width : 768px ) {
. kpi-row { grid-template-columns : repeat ( 2 , 1 fr ); }
. two-col { grid-template-columns : 1 fr ; }
. features-grid { grid-template-columns : 1 fr 1 fr ; }
. hero { padding : 30 px 24 px ; }
. hero h1 { font-size : 26 px ; }
nav { padding : 0 16 px ; }
. main { padding : 0 12 px 60 px ; }
2026-03-08 00:19:59 -06:00
footer { padding : 16 px 20 px ; flex-direction : column ; align-items : flex-start ; }
. footer-right { flex-wrap : wrap ; }
2026-03-07 23:27:25 -06:00
}
</ 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" >
2026-03-08 00:19:59 -06:00
< div class = "viol-name" > Marcus T. < span class = "repeat-tag" > ☆ REPEAT</ span ></ div >
2026-03-07 23:27:25 -06:00
< 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× </ 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" > − </ 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– </ div >< div class = "ts-label" > Elite< br /> Standing</ div ></ div >
< div class = "tier-seg ts-1" >< div class = "ts-pts" > 5– </ div >< div class = "ts-label" > Tier 1< br /> Realignment</ div ></ div >
< div class = "tier-seg ts-2" >< div class = "ts-pts" > 10– </ div >< div class = "ts-label" > Tier 2< br /> Admin Lockdown</ div ></ div >
< div class = "tier-seg ts-3" >< div class = "ts-pts" > 15– </ div >< div class = "ts-label" > Tier 3< br /> Verification</ div ></ div >
< div class = "tier-seg ts-4" >< div class = "ts-pts" > 20– </ div >< div class = "ts-label" > Tier 4< br /> Risk Mitigation</ div ></ div >
< div class = "tier-seg ts-5" >< div class = "ts-pts" > 25– </ 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 >
2026-03-08 00:19:59 -06:00
< 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 >
2026-03-07 23:27:25 -06:00
< 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;" >
2026-03-08 00:19:59 -06:00
⚡ DEMO VIEW — Form fields shown with sample data. Submission is disabled in demo mode.
2026-03-07 23:27:25 -06:00
</ 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;" >
2026-03-08 00:19:59 -06:00
< span > Unauthorized Absence ☆ 2x in 90 days</ span >< span style = "color:var(--text-muted);font-size:11px;" > ▼</ span >
2026-03-07 23:27:25 -06:00
</ 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;" >
2026-03-08 00:19:59 -06:00
< strong > Unauthorized Absence</ strong > < span class = "repeat-tag" > ☆ Repeat — 2x prior</ span >< br />
2026-03-07 23:27:25 -06:00
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;" >
2026-03-08 00:19:59 -06:00
⚡ < 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.
2026-03-07 23:27:25 -06:00
</ 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– </ 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 >
2026-03-08 00:19:59 -06:00
< div class = "footer-left" >
< div class = "footer-brand" > CPAS Tracker</ div >
< div class = "footer-divider" ></ div >
< div class = "footer-copy" > © 2026 Jason Stedwell</ div >
< div class = "footer-divider" ></ div >
< div style = "font-size:11px;color:var(--text-muted);" > DEMO BUILD — All data synthetic</ div >
</ div >
< div class = "footer-right" >
< a class = "footer-gitea" href = "https://git.alwisp.com/jason/cpas" target = "_blank" rel = "noopener" >
<!-- Gitea logo SVG -->
< svg viewBox = "0 0 640 640" xmlns = "http://www.w3.org/2000/svg" >
< path d = "M321.6 3.2C146.4 3.2 3.2 146.4 3.2 321.6c0 141.6 91.8 261.9 219.7 304.1 16.1 3 22-7 22-15.5 0-7.6-.3-32.8-.4-59.5-89.5 19.4-108.4-38.4-108.4-38.4-14.6-37.2-35.7-47.1-35.7-47.1-29.2-20 2.2-19.6 2.2-19.6 32.3 2.3 49.3 33.1 49.3 33.1 28.7 49.2 75.3 35 93.7 26.7 2.9-20.8 11.2-35 20.4-43-71.4-8.1-146.5-35.7-146.5-158.9 0-35.1 12.5-63.8 33.1-86.3-3.3-8.1-14.4-40.8 3.1-85.1 0 0 27-8.7 88.4 32.9 25.6-7.1 53.1-10.7 80.4-10.8 27.3.1 54.8 3.7 80.5 10.8 61.3-41.6 88.3-32.9 88.3-32.9 17.6 44.3 6.5 77 3.2 85.1 20.6 22.5 33 51.2 33 86.3 0 123.5-75.2 150.7-146.8 158.7 11.5 10 21.8 29.7 21.8 59.8 0 43.2-.4 78-0.4 88.6 0 8.6 5.8 18.6 22.1 15.5C524.8 583.2 616.8 463.1 616.8 321.6 616.8 146.4 473.6 3.2 298.4 3.2z" />
</ svg >
jason/cpas
</ a >
< div class = "footer-divider" ></ div >
< div class = "footer-ticker" >
< div class = "footer-ticker-dot" ></ div >
< div class = "footer-ticker-label" > Dev Time</ div >
< div class = "footer-ticker-time" id = "dev-ticker" > —</ div >
</ div >
</ div >
2026-03-07 23:27:25 -06:00
</ 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' );
}
2026-03-08 00:19:59 -06:00
// ── DEV TIME TICKER ──────────────────────────────────────────────────────────
// Base dev time calculated from real commit sessions (30-min gap = new session).
// Each session timed as (last_commit - first_commit) + 15min overhead.
//
// Session 1: 2026-03-06 11:33 → 12:05 = 32min + 15 = 47min
// Session 2: 2026-03-06 12:19 → 18:00 = 341min + 15 = 356min
// Session 3: 2026-03-06 23:18 → 23:41 = 23min + 15 = 38min
// Session 4: 2026-03-07 09:22 → 09:53 = 31min + 15 = 46min
// Session 5: 2026-03-07 18:31 → 19:02 = 31min + 15 = 46min
// Session 6: 2026-03-07 21:28 → 22:02 = 34min + 15 = 49min
// Session 7: 2026-03-07 23:13 → 23:59 = 46min + 15 = 61min
// Session 8: 2026-03-08 00:11 → 00:12 = 1min + 15 = 16min
// Total: 659min = 39,540 seconds
//
// Anchor: last commit timestamp 2026-03-08T06:12:11Z (UTC)
// Ticker ticks up every second from that base.
const BASE_SECONDS = 39540 ;
const ANCHOR_UTC = new Date ( '2026-03-08T06:12:11Z' ). getTime ();
function formatDevTime ( totalSec ) {
const h = Math . floor ( totalSec / 3600 );
const m = Math . floor (( totalSec % 3600 ) / 60 );
const s = totalSec % 60 ;
return ` ${ String ( h ). padStart ( 2 , '0' ) } h ${ String ( m ). padStart ( 2 , '0' ) } m ${ String ( s ). padStart ( 2 , '0' ) } s` ;
}
function updateTicker () {
const elapsed = Math . floor (( Date . now () - ANCHOR_UTC ) / 1000 );
const total = BASE_SECONDS + Math . max ( 0 , elapsed );
document . getElementById ( 'dev-ticker' ). textContent = formatDevTime ( total );
}
updateTicker ();
setInterval ( updateTicker , 1000 );
2026-03-07 23:27:25 -06:00
</ script >
</ body >
</ html >
