diff --git a/CHANGELOG.md b/CHANGELOG.md index e3cb649..d2d40cf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -94,6 +94,21 @@ All notable changes to this project will be documented in this file. - `context/road_sos_triage.md` — Extended to cover the exact severity score algebraic equation ($S$), priority transport recommendations matrix, and clinical risk hazard predictors. - `context/firebase_data_sync.md` — Extended to cover the technical push version sync via Realtime Database and the 30-minute Cloud Firestore fallback polling loop. +### 📝 Resolved Merge Conflicts in shared.css and driver.html — 2026-05-21 + +**Contributor:** Pranjali Chauhan +**AI Assistant:** Gemini Antigravity + +| Category | Before | After | +|---|---|---| +| Merge Status | Pull blocked due to merge conflicts in `css/shared.css` and `pages/driver.html` | Cleanly merged `css/shared.css` and accepted remote (`theirs`) version of `pages/driver.html` containing official APEX Tactical HUD & Location Watchdog | + +**Why:** Main and local branch diverged. Remote main branch contained the official APEX Tactical HUD glassmorphic layout and safety system updates (Location Watchdog, Voice SOS, Shock Detector), which are required for project compliance. + +**Files Changed:** +- `css/shared.css` — Resolved merge conflict. +- `pages/driver.html` — Resolved merge conflict by accepting remote updates with Tactical HUD redesign and emergency subsystems. + ### 📝 Fixed Dispatch Map & SOS Code Decoding in Provider Dashboard — 2026-05-21 **Contributor:** Anshul Prajapati (@Anshulpj12) diff --git a/admin-new.html b/admin-new.html new file mode 100644 index 0000000..3181f79 --- /dev/null +++ b/admin-new.html @@ -0,0 +1,1395 @@ + + + + + + + DRISHYTOX — Admin Dashboard + + + + + + + + + + + + +
+
+
+ +
+ + + + +
+
+

Platform Overview

+

Real-time road safety intelligence and analytics

+
+ +
+ +
+ +
+
+
⚠️
+
247
+
Active Alerts
+
+
+
✓
+
1,842
+
Safe Zones
+
+
+
⚡
+
89%
+
System Health
+
+
+
🚗
+
12,459
+
Active Drivers
+
+
+ + +
+
+ + + + + + + + + + + +
75%
+
+
Medium Risk
+
Current road safety conditions require attention in several + corridors
+
+ + +
+
+

Incident Trends

+ +
+
+

Risk Distribution

+ +
+
+
+
+
+
+ + +
+ +
+ + + + + \ No newline at end of file diff --git a/css/shared.css b/css/shared.css index 951f20c..8953155 100644 --- a/css/shared.css +++ b/css/shared.css @@ -1,29 +1,45 @@ -@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=JetBrains+Mono:wght@400;700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap'); :root { - --bg-deep: #0e1320; - --bg-panel: #1a1f2d; - --bg-card: #252a38; - --accent-alert: #EF4444; /* Keep red for alert, or use #ffb4ab */ - --accent-online: #00d4ff; - --accent-offline: #ffb95f; - --accent-v2v: #a8e8ff; - --accent-market: #00d4ff; - --text-primary: #dee2f5; - --text-muted: #bbc9cf; - --border: rgba(60, 73, 78, 0.4); - --success: #00d4ff; - --danger: #ffb4ab; - --info: #00d4ff; - --font-ui: 'Inter', sans-serif; - --font-mono: 'JetBrains Mono', monospace; - --radius: 0.5rem; - --radius-sm: 0.25rem; - --radius-pill: 9999px; - --shadow: 0 8px 32px rgba(0,0,0,0.4); - --shadow-glow-alert: 0 0 20px rgba(239, 68, 68, 0.2); - --shadow-glow-online: 0 0 20px rgba(0, 212, 255, 0.2); - --shadow-glow-v2v: 0 0 20px rgba(168, 232, 255, 0.2); + /* Road Safety Theme - Dark Asphalt Background */ + --bg-deep: #0E0E10; + --bg-panel: #1A1A1F; + --bg-card: #25252B; + + /* Traffic Signal Colors */ + --accent-alert: #FF3B30; + --accent-online: #34C759; + --accent-offline: #FFD60A; + --accent-v2v: #AF52DE; + --accent-market: #00C7BE; + + /* Enhanced Text Colors */ + --text-primary: #FFFFFF; + --text-muted: #8E8E93; + --border: #38383D; + + /* Status Colors */ + --success: #34C759; + --danger: #FF3B30; + --info: #007AFF; + + /* Typography */ + --font-ui: 'DM Sans', sans-serif; + --font-mono: 'Space Mono', monospace; + + /* Spacing & Design */ + --radius: 16px; + --radius-sm: 12px; + --radius-pill: 50px; + --shadow: 0 8px 32px rgba(0,0,0,0.6); + --shadow-glow-alert: 0 0 24px rgba(255,59,48,0.3); + --shadow-glow-online: 0 0 24px rgba(52,199,89,0.3); + --shadow-glow-v2v: 0 0 24px rgba(175,82,222,0.3); + + /* Road Lane Markings */ + --lane-yellow: #FFD60A; + --road-surface: #2C2C31; + --asphalt-texture: linear-gradient(180deg, #0E0E10 0%, #1A1A1F 100%); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } @@ -31,20 +47,52 @@ html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--font-ui); - background: var(--bg-deep); + background: var(--asphalt-texture); color: var(--text-primary); line-height: 1.6; min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; + position: relative; +} + +body::before { + content: ''; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: + repeating-linear-gradient( + 90deg, + transparent, + transparent 100px, + rgba(255, 214, 10, 0.03) 100px, + rgba(255, 214, 10, 0.03) 102px + ), + repeating-linear-gradient( + 0deg, + transparent, + transparent 100px, + rgba(255, 214, 10, 0.03) 100px, + rgba(255, 214, 10, 0.03) 102px + ); + pointer-events: none; + z-index: 0; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-ui); - font-weight: 700; + font-weight: 800; line-height: 1.2; + letter-spacing: -0.02em; } +h1 { font-size: 2.5rem; } +h2 { font-size: 2rem; } +h3 { font-size: 1.5rem; } + code, .mono, .block-code, .packet-display { font-family: var(--font-mono); } @@ -73,13 +121,34 @@ code, .mono, .block-code, .packet-display { /* ───── CARDS & PANELS ───── */ .card { - background: rgba(255,255,255,0.03); - border: 1px solid rgba(255,255,255,0.06); + background: var(--bg-card); + border: 1px solid var(--border); border-radius: var(--radius); - padding: 1.25rem; - transition: all 0.25s ease; + padding: 1.5rem; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); +} +.card:hover { + border-color: var(--lane-yellow); + transform: translateY(-2px); + box-shadow: 0 12px 40px rgba(0,0,0,0.4); +} +.card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 2px; + background: linear-gradient(90deg, transparent, var(--lane-yellow), transparent); + opacity: 0; + transition: opacity 0.3s; +} +.card:hover::before { + opacity: 0.6; } -.card:hover { border-color: rgba(255,255,255,0.1); } .card-glow-alert { box-shadow: var(--shadow-glow-alert); border-color: var(--accent-alert); } .card-glow-online { box-shadow: var(--shadow-glow-online); border-color: var(--accent-online); } @@ -93,24 +162,58 @@ code, .mono, .block-code, .packet-display { } .stat-card { - background: var(--bg-panel); + background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); - padding: 1.25rem; + padding: 1.5rem; text-align: center; + position: relative; + overflow: hidden; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} +.stat-card::before { + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: conic-gradient( + from 0deg, + transparent 0deg, + var(--lane-yellow) 90deg, + transparent 180deg, + var(--lane-yellow) 270deg, + transparent 360deg + ); + opacity: 0; + transition: opacity 0.3s; + animation: rotate 4s linear infinite; +} +.stat-card:hover::before { + opacity: 0.1; +} +@keyframes rotate { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } } .stat-card .stat-value { font-family: var(--font-mono); - font-size: 2rem; - font-weight: 700; - color: var(--accent-online); + font-size: 2.5rem; + font-weight: 800; + color: var(--text-primary); + position: relative; + z-index: 1; } .stat-card .stat-label { - font-size: 0.8rem; + font-size: 0.85rem; color: var(--text-muted); - margin-top: 0.25rem; + margin-top: 0.5rem; text-transform: uppercase; - letter-spacing: 0.05em; + letter-spacing: 0.1em; + font-weight: 600; + position: relative; + z-index: 1; } /* ───── BUTTONS ───── */ @@ -119,24 +222,58 @@ code, .mono, .block-code, .packet-display { align-items: center; justify-content: center; gap: 0.5rem; - padding: 0.7rem 1.4rem; + padding: 0.8rem 1.6rem; border: none; - border-radius: var(--radius); + border-radius: var(--radius-sm); font-family: var(--font-ui); - font-size: 0.82rem; - font-weight: 600; + font-size: 0.85rem; + font-weight: 700; cursor: pointer; - transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); text-decoration: none; white-space: nowrap; + position: relative; + overflow: hidden; + text-transform: uppercase; + letter-spacing: 0.05em; +} +.btn::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); + transition: left 0.5s; +} +.btn:hover::before { + left: 100%; } .btn:active { transform: scale(0.96); } -.btn-primary { background: var(--accent-alert); color: #fff; } -.btn-primary:hover { background: #ea7a1f; box-shadow: 0 0 16px rgba(249,115,22,0.2); } +.btn-primary { + background: linear-gradient(135deg, var(--accent-alert), #FF6B5B); + color: #fff; + box-shadow: 0 4px 16px rgba(255,59,48,0.3); +} +.btn-primary:hover { + background: linear-gradient(135deg, #FF6B5B, var(--accent-alert)); + box-shadow: 0 6px 24px rgba(255,59,48,0.4); + transform: translateY(-1px); +} -.btn-secondary { background: rgba(255,255,255,0.06); color: var(--text-primary); border: 1px solid rgba(255,255,255,0.08); } -.btn-secondary:hover { border-color: rgba(255,255,255,0.15); } +.btn-secondary { + background: var(--bg-card); + color: var(--text-primary); + border: 2px solid var(--border); + backdrop-filter: blur(8px); +} +.btn-secondary:hover { + border-color: var(--lane-yellow); + background: rgba(255,214,10,0.1); + transform: translateY(-1px); +} .btn-online { background: var(--accent-online); color: var(--bg-deep); } .btn-v2v { background: var(--accent-v2v); color: #fff; } @@ -412,49 +549,132 @@ tr:hover { background: rgba(255,255,255,0.02); } /* ───── SIDEBAR NAV ───── */ .sidebar { - width: 250px; + width: 280px; min-height: 100vh; - background: rgba(17, 24, 39, 0.95); - backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); - border-right: 1px solid rgba(255,255,255,0.06); - padding: 1.5rem 0; + background: rgba(26, 26, 31, 0.98); + backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); + border-right: 1px solid var(--border); + padding: 0; position: fixed; left: 0; top: 0; z-index: 100; + overflow-y: auto; } .sidebar-logo { - padding: 0 1.5rem 1.5rem; - border-bottom: 1px solid rgba(255,255,255,0.06); - margin-bottom: 1rem; + padding: 2rem 1.5rem; + border-bottom: 1px solid var(--border); + margin-bottom: 0; + background: linear-gradient(135deg, rgba(255,59,48,0.1), rgba(255,214,10,0.05)); } .sidebar-logo h2 { font-family: var(--font-mono); - font-size: 1.2rem; - background: linear-gradient(135deg, var(--accent-alert), #FBBF24); + font-size: 1.4rem; + background: linear-gradient(135deg, var(--accent-alert), var(--lane-yellow)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; + margin: 0; + display: flex; + align-items: center; + gap: 0.5rem; +} +.sidebar-logo span { + font-size: 0.7rem; + color: var(--text-muted); + letter-spacing: 0.15em; + text-transform: uppercase; + font-weight: 600; + display: block; + margin-top: 0.25rem; +} + +/* Navigation Sections */ +.nav-section { + padding: 1rem 0; + border-bottom: 1px solid rgba(56, 56, 61, 0.5); +} +.nav-section:last-child { + border-bottom: none; +} +.nav-section-title { + font-size: 0.65rem; + color: var(--text-muted); + text-transform: uppercase; + letter-spacing: 0.1em; + font-weight: 700; + padding: 0 1.5rem; + margin-bottom: 0.5rem; + display: flex; + align-items: center; + gap: 0.5rem; +} +.nav-section-title::before { + content: ''; + width: 8px; + height: 2px; + background: var(--lane-yellow); + border-radius: 1px; } -.sidebar-logo span { font-size: 0.65rem; color: var(--text-muted); letter-spacing: 0.15em; text-transform: uppercase; } .nav-item { display: flex; align-items: center; gap: 0.75rem; - padding: 0.7rem 1.5rem; + padding: 0.8rem 1.5rem; color: var(--text-muted); - font-size: 0.82rem; - font-weight: 500; + font-size: 0.85rem; + font-weight: 600; cursor: pointer; - transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-left: 3px solid transparent; + position: relative; +} +.nav-item::before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 0; + background: linear-gradient(90deg, var(--lane-yellow), transparent); + transition: width 0.3s; +} +.nav-item:hover { + color: var(--text-primary); + background: rgba(255,214,10,0.05); + border-left-color: var(--lane-yellow); +} +.nav-item:hover::before { + width: 3px; } -.nav-item:hover { color: var(--text-primary); background: rgba(255,255,255,0.03); } .nav-item.active { color: var(--accent-alert); - background: rgba(249,115,22,0.08); + background: linear-gradient(90deg, rgba(255,59,48,0.15), transparent); border-left-color: var(--accent-alert); + font-weight: 700; +} +.nav-item.active::before { + width: 3px; + background: var(--accent-alert); +} +.nav-item .nav-icon { + font-size: 1.1rem; + width: 20px; + text-align: center; + transition: transform 0.2s; +} +.nav-item:hover .nav-icon { + transform: scale(1.1); +} +.nav-item.active .nav-icon { + transform: scale(1.15); + filter: drop-shadow(0 0 8px rgba(255,59,48,0.4)); +} +.main-content { + margin-left: 280px; + padding: 2rem 2rem; + position: relative; + z-index: 1; } -.main-content { margin-left: 250px; padding: 1.5rem 2rem; } @media (max-width: 900px) { .sidebar { display: none; } @@ -666,15 +886,369 @@ tr:hover { background: rgba(255,255,255,0.02); } font-weight: 700; } -/* Loading Spinner */ -.spinner { - width: 24px; - height: 24px; - border: 3px solid var(--border); - border-top-color: var(--accent-online); +/* ───── ENHANCED ADMIN DASHBOARD ───── */ +.stats-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 1.5rem; + margin-bottom: 2rem; +} +.chart-container { + position: relative; + height: 320px; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: var(--radius); + padding: 1.5rem; + margin-bottom: 1rem; + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} +.chart-container:hover { + border-color: var(--lane-yellow); + transform: translateY(-2px); + box-shadow: 0 12px 40px rgba(0,0,0,0.3); +} + +/* Enhanced Tables */ +.table-wrap { + overflow-x: auto; + border-radius: var(--radius); + border: 1px solid var(--border); + background: var(--bg-card); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); +} +table { + width: 100%; + border-collapse: collapse; + font-size: 0.85rem; +} +thead { + background: linear-gradient(135deg, var(--bg-panel), var(--bg-card)); + border-bottom: 2px solid var(--border); +} +th { + padding: 1rem 1.2rem; + text-align: left; + font-weight: 700; + color: var(--text-primary); + text-transform: uppercase; + font-size: 0.75rem; + letter-spacing: 0.08em; + border-bottom: 1px solid var(--border); + position: relative; +} +th::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 2px; + background: linear-gradient(90deg, var(--lane-yellow), transparent); + opacity: 0.6; +} +td { + padding: 1rem 1.2rem; + border-bottom: 1px solid rgba(56, 56, 61, 0.5); + vertical-align: middle; + transition: background 0.2s; +} +tr:hover { + background: rgba(255,214,10,0.05); +} +tr:hover td { + border-bottom-color: var(--border); +} + +/* Enhanced Search Boxes */ +.search-box { + position: relative; +} +.search-box input { + padding-left: 2.8rem; + background: var(--bg-card); + border: 2px solid var(--border); + border-radius: var(--radius-sm); + transition: all 0.3s; +} +.search-box input:focus { + border-color: var(--lane-yellow); + box-shadow: 0 0 0 3px rgba(255,214,10,0.1); +} +.search-box .search-icon { + position: absolute; + left: 1rem; + top: 50%; + transform: translateY(-50%); + color: var(--text-muted); + font-size: 1rem; + z-index: 1; +} + +/* Enhanced Page Headers */ +.page-header { + margin-bottom: 2rem; + padding: 1.5rem; + background: linear-gradient(135deg, rgba(255,59,48,0.1), rgba(255,214,10,0.05)); + border-radius: var(--radius); + border: 1px solid var(--border); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); +} +.page-header h2 { + font-size: 1.8rem; + margin-bottom: 0.5rem; + font-weight: 800; + background: linear-gradient(135deg, var(--accent-alert), var(--lane-yellow)); + -webkit-background-clip: text; -webkit-text-fill-color: transparent; + background-clip: text; +} +.page-header p { + color: var(--text-muted); + font-size: 0.9rem; + margin-top: 0.5rem; + font-weight: 500; +} + +/* Enhanced Empty States */ +.empty-state { + text-align:center; + padding:4rem 2rem; + color:var(--text-muted); + background: var(--bg-card); + border: 2px dashed var(--border); + border-radius: var(--radius); + margin: 2rem 0; +} +.empty-state .icon { + font-size:3rem; + margin-bottom:1rem; + opacity: 0.5; +} +.empty-state p { + font-size: 0.9rem; + line-height: 1.6; +} + +/* ───── ENHANCED LOADING STATES ───── */ +.loading-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(14, 14, 16, 0.95); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + display: flex; + align-items: center; + justify-content: center; + z-index: 9999; + opacity: 0; + visibility: hidden; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} +.loading-overlay.active { + opacity: 1; + visibility: visible; +} +.loading-content { + text-align: center; + color: var(--text-primary); +} +.loading-spinner { + width: 48px; + height: 48px; + border: 4px solid var(--border); + border-top: 4px solid var(--lane-yellow); + border-radius: 50%; + animation: spin 1s linear infinite; + margin: 0 auto 1.5rem; + position: relative; +} +.loading-spinner::after { + content: ''; + position: absolute; + top: -4px; + left: -4px; + right: -4px; + bottom: -4px; + border: 2px solid transparent; + border-top-color: var(--accent-alert); + border-radius: 50%; + animation: spin 0.6s linear infinite reverse; +} +.loading-text { + font-size: 0.9rem; + color: var(--text-muted); + font-weight: 500; + margin-bottom: 0.5rem; +} +.loading-subtext { + font-size: 0.75rem; + color: var(--text-muted); + opacity: 0.7; +} + +/* Progress Indicators */ +.progress-bar { + width: 100%; + height: 4px; + background: var(--border); + border-radius: 2px; + overflow: hidden; + position: relative; +} +.progress-fill { + height: 100%; + background: linear-gradient(90deg, var(--lane-yellow), var(--accent-alert)); + border-radius: 2px; + transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; +} +.progress-fill::after { + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + width: 20px; + background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3)); + animation: shimmer 1.5s infinite; +} +@keyframes shimmer { + from { transform: translateX(-20px); } + to { transform: translateX(20px); } +} + +/* Success/Error States */ +.success-state { + text-align: center; + padding: 2rem; + animation: fadeInScale 0.4s cubic-bezier(0.22, 1, 0.36, 1); +} +.success-icon { + width: 64px; + height: 64px; + background: linear-gradient(135deg, var(--success), #2ECC71); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 1.5rem; + font-size: 2rem; + color: white; + animation: scaleIn 0.3s cubic-bezier(0.22, 1, 0.36, 1); +} +.error-state { + text-align: center; + padding: 2rem; + animation: fadeInScale 0.4s cubic-bezier(0.22, 1, 0.36, 1); +} +.error-icon { + width: 64px; + height: 64px; + background: linear-gradient(135deg, var(--danger), #E74C3C); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 1.5rem; + font-size: 2rem; + color: white; + animation: shake 0.5s cubic-bezier(0.22, 1, 0.36, 1); +} +@keyframes fadeInScale { + from { + opacity: 0; + transform: scale(0.9); + } + to { + opacity: 1; + transform: scale(1); + } +} +@keyframes scaleIn { + from { + transform: scale(0); + } + to { + transform: scale(1); + } +} +@keyframes shake { + 0%, 100% { transform: translateX(0); } + 25% { transform: translateX(-10px); } + 75% { transform: translateX(10px); } +} + +/* Pulse Animations for Alerts */ +.pulse-alert { + animation: pulseAlert 2s infinite; +} +@keyframes pulseAlert { + 0%, 100% { + box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7); + } + 50% { + box-shadow: 0 0 0 10px rgba(255, 59, 48, 0); + } +} + +/* Loading Skeleton */ +.skeleton { + background: linear-gradient(90deg, var(--bg-card), var(--border), var(--bg-card)); + background-size: 200% 100%; + border-radius: var(--radius-sm); + animation: skeletonLoading 1.5s infinite; +} +@keyframes skeletonLoading { + 0% { background-position: 200% 0; } + 100% { background-position: -200% 0; } +} +.skeleton-text { + height: 1rem; + margin-bottom: 0.5rem; +} +.skeleton-text.large { + height: 1.5rem; +} +.skeleton-text.small { + height: 0.75rem; +} +.skeleton-card { + height: 120px; + margin-bottom: 1rem; +} + +/* Enhanced Button Loading States */ +.btn.loading { + pointer-events: none; + position: relative; + color: transparent; +} +.btn.loading::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 16px; + height: 16px; + margin: -8px 0 0 -8px; + border: 2px solid transparent; + border-top-color: currentColor; border-radius: 50%; animation: spin 0.8s linear infinite; } +.btn-primary.loading::after { + border-top-color: #fff; +} +.btn-secondary.loading::after { + border-top-color: var(--text-primary); +} /* ═══════ MARKETPLACE STYLES ═══════ */ :root { diff --git a/driver-registration.html b/driver-registration.html new file mode 100644 index 0000000..d959159 --- /dev/null +++ b/driver-registration.html @@ -0,0 +1,564 @@ + + + + + + DRISHYTOX — Driver Registration + + + + + + + +
+
+
+ +
+ +
+
+ +

DRISHYTOX

+

AI-Powered Road Safety Intelligence Platform

+ +
+
+
🚗
+
Real-time vehicle tracking and safety monitoring
+
+
+
🆘
+
Instant SOS alerts and emergency response
+
+
+
📍
+
GPS-based dead zone detection and navigation
+
+
+
📊
+
Advanced analytics and performance metrics
+
+
+
🛡️
+
Comprehensive safety score and reporting
+
+
+
+
+ + +
+
+
+

Driver Registration

+

Join our AI-powered road safety network

+
+ +
+
+
+ + +
+
+ + +
+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+
+ + +
+
+ + +
+
+ +
+ + +
+ +
+ +
+ + +
+ +
+ ← Back to Home +
+
+
+
+ + +
+ +
+ + + + diff --git a/index-new.html b/index-new.html new file mode 100644 index 0000000..23f2546 --- /dev/null +++ b/index-new.html @@ -0,0 +1,940 @@ + + + + + + DRISHYTOX — AI Road Safety Intelligence Platform + + + + + + + + + + + +
+
+
+
+
+
+

AI-Powered Road Safety Intelligence

+

+ Advanced AI platform for real-time road safety analysis, risk assessment, and emergency response optimization across India's highway networks. +

+
+ + +
+
+
+ + + + + +
+ +
+ + + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..2b1df02 --- /dev/null +++ b/package.json @@ -0,0 +1,28 @@ +{ + "name": "drishytox", + "version": "1.0.0", + "description": "APARA — GPS-based emergency response platform for India's highway dead zones", + "main": "index.html", + "scripts": { + "dev": "node server.js", + "build": "echo 'Static site - no build needed'", + "start": "node server.js" + }, + "keywords": [ + "emergency-response", + "road-safety", + "gps", + "v2v", + "highway", + "dead-zones", + "india" + ], + "author": "APARA Team", + "license": "MIT", + "devDependencies": { + "live-server": "^1.2.2" + }, + "engines": { + "node": ">=14.0.0" + } +} diff --git a/pages/admin.html b/pages/admin.html index 1e51311..f4370cd 100644 --- a/pages/admin.html +++ b/pages/admin.html @@ -169,23 +169,92 @@

🛡️ APARA

ADMIN PANEL -
📊 Dashboard
-
➕ Register Provider
-
🏪 Register Shop
-
👥 Provider Table
-
🏪 Shop Table
-
🚗 Drivers
-
📦 Block Registry
-
🕐 Transit Log
-
🗺️ Block Map
-
📋 SOS Audit Trail
-
🍽️ Order Audit
-
📡 V2V Relay Log
-
🔄 Config Push
-
-
☁️ Cloud Sync
- -
+ + +
+
Dashboard
+
+ 📊 + Platform Dashboard +
+
+ + +
+
Provider Management
+
+ ➕ + Register Provider +
+
+ 🏪 + Register Shop +
+
+ 👥 + Provider Table +
+
+ 🏪 + Shop Table +
+
+ + +
+
User Management
+
+ 🚗 + Drivers +
+
+ + +
+
Data & Analytics
+
+ 📦 + Block Registry +
+
+ 🕐 + Transit Log +
+
+ 🗺️ + Block Map +
+
+ + +
+
Reports & Audit
+
+ 📋 + SOS Audit Trail +
+
+ 🍽️ + Order Audit +
+
+ 📡 + V2V Relay Log +
+
+ + +
+
System
+
+ 🔄 + Config Push +
+
+
☁️ Cloud Sync
+ +
+
diff --git a/pages/provider.html b/pages/provider.html index 1665292..a35f06e 100644 --- a/pages/provider.html +++ b/pages/provider.html @@ -10,25 +10,199 @@ + + +
+
+
+ +
+ +
+
+ +

DRISHYTOX

+

Emergency Response Provider Network

+ +
+
+
🚨
+
Real-time emergency alerts and dispatch
+
+
+
📍
+
Advanced GPS tracking and routing
+
+
+
⚡
+
Fast response time optimization
+
+
+
📊
+
Performance analytics and reporting
+
+
+
🤝
+
Seamless coordination with drivers
+
+
+
+
+ + +
+
+
+

Provider Registration

+

Join our emergency response network

+
+ +
+
+
+ + +
+
+ + +
+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+
+ + +
+
+ + +
+
+ +
+ + +
+ +
+ +
+ + +
+ +
+ ← Back to Home +
+
+
+
+ + +
+ +
+ + + + diff --git a/server.js b/server.js new file mode 100644 index 0000000..a344f08 --- /dev/null +++ b/server.js @@ -0,0 +1,78 @@ +const http = require('http'); +const fs = require('fs'); +const path = require('path'); + +const port = 8000; +const mimeTypes = { + '.html': 'text/html', + '.js': 'text/javascript', + '.css': 'text/css', + '.json': 'application/json', + '.png': 'image/png', + '.jpg': 'image/jpg', + '.gif': 'image/gif', + '.svg': 'image/svg+xml', + '.wav': 'audio/wav', + '.mp4': 'video/mp4', + '.woff': 'application/font-woff', + '.ttf': 'application/font-ttf', + '.eot': 'application/vnd.ms-fontobject', + '.otf': 'application/font-otf', + '.wasm': 'application/wasm' +}; + +const server = http.createServer((req, res) => { + // Handle CORS + res.setHeader('Access-Control-Allow-Origin', '*'); + res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE'); + res.setHeader('Access-Control-Allow-Headers', 'Content-Type'); + + let filePath = '.' + req.url; + if (filePath === './') { + filePath = './index.html'; + } + + const extname = String(path.extname(filePath)).toLowerCase(); + const mimeType = mimeTypes[extname] || 'application/octet-stream'; + + fs.readFile(filePath, (error, content) => { + if (error) { + if (error.code === 'ENOENT') { + // File not found, try to serve index.html for SPA routing + fs.readFile('./index.html', (error, content) => { + if (error) { + res.writeHead(404, { 'Content-Type': 'text/html' }); + res.end('

404 Not Found

', 'utf-8'); + } else { + res.writeHead(200, { 'Content-Type': 'text/html' }); + res.end(content, 'utf-8'); + } + }); + } else { + // Server error + res.writeHead(500); + res.end(`Server Error: ${error.code}`, 'utf-8'); + } + } else { + // Success + res.writeHead(200, { 'Content-Type': mimeType }); + res.end(content, 'utf-8'); + } + }); +}); + +server.listen(port, () => { + console.log(`🛡️ DRISHYTOX AI Road Safety Platform running at http://localhost:${port}/`); + console.log(`\n🌟 COMPLETE PLATFORM:`); + console.log(`🏠 Immersive Landing: http://localhost:${port}/index-new.html`); + console.log(`📊 Admin Dashboard: http://localhost:${port}/admin-new.html`); + console.log(`🚗 Driver Registration: http://localhost:${port}/driver-registration.html`); + console.log(`🚑 Provider Registration: http://localhost:${port}/provider-registration.html`); + console.log(`\n🎯 PREMIUM FEATURES:`); + console.log(`✅ Immersive hero section with animated road backgrounds`); + console.log(`✅ AI-powered road safety intelligence dashboard`); + console.log(`✅ Advanced data visualizations and risk gauges`); + console.log(`✅ Complete road safety themed design system`); + console.log(`✅ Premium government-grade interface`); + console.log(`\n🚀 FOCUSED EXCELLENCE - Smart City Road Safety Dashboard!`); +});