From d67056e857251c59bdcb4e63a8c0aa80eb3a96fb Mon Sep 17 00:00:00 2001 From: Tanishka Singh Date: Wed, 6 May 2026 10:30:38 +0530 Subject: [PATCH 1/2] Change in previous UI/UX. Made it look more professional and user friendly. UI/UX update --- admin-new.html | 1377 ++++++++++++++++++++++++++++++++++++ css/shared.css | 710 +++++++++++++++++-- driver-registration.html | 564 +++++++++++++++ index-new.html | 940 ++++++++++++++++++++++++ package.json | 28 + pages/admin.html | 103 ++- pages/driver.html | 120 +++- pages/provider.html | 202 +++++- provider-registration.html | 581 +++++++++++++++ server.js | 78 ++ 10 files changed, 4575 insertions(+), 128 deletions(-) create mode 100644 admin-new.html create mode 100644 driver-registration.html create mode 100644 index-new.html create mode 100644 package.json create mode 100644 provider-registration.html create mode 100644 server.js diff --git a/admin-new.html b/admin-new.html new file mode 100644 index 0000000..55bb104 --- /dev/null +++ b/admin-new.html @@ -0,0 +1,1377 @@ + + + + + + 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

+ +
+
+
+
+
+
+ + +
+ +
+ + + + diff --git a/css/shared.css b/css/shared.css index c31475a..8953155 100644 --- a/css/shared.css +++ b/css/shared.css @@ -1,29 +1,45 @@ @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: #0A0E1A; - --bg-panel: #111827; - --bg-card: #1a2332; - --accent-alert: #F97316; - --accent-online: #22D3EE; - --accent-offline: #FACC15; - --accent-v2v: #A78BFA; - --accent-market: #10B981; - --text-primary: #F1F5F9; - --text-muted: #64748B; - --border: #1E293B; - --success: #22C55E; - --danger: #EF4444; - --info: #3B82F6; + /* 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; - --radius: 14px; - --radius-sm: 10px; + + /* Spacing & Design */ + --radius: 16px; + --radius-sm: 12px; --radius-pill: 50px; - --shadow: 0 8px 32px rgba(0,0,0,0.4); - --shadow-glow-alert: 0 0 20px rgba(249,115,22,0.2); - --shadow-glow-online: 0 0 20px rgba(34,211,238,0.2); - --shadow-glow-v2v: 0 0 20px rgba(167,139,250,0.2); + --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 bf34469..73c8d50 100644 --- a/pages/admin.html +++ b/pages/admin.html @@ -55,23 +55,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/driver.html b/pages/driver.html index 847d44a..36e71c8 100644 --- a/pages/driver.html +++ b/pages/driver.html @@ -9,16 +9,34 @@ + + +
+
+
+ +
+ +
+
+ +

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!`); +}); From c3d1bdad87f756760fd5bffebfe8591f5a0067eb Mon Sep 17 00:00:00 2001 From: Pranjali Chauhan Date: Mon, 25 May 2026 15:06:47 +0530 Subject: [PATCH 2/2] Updated admin page --- admin-new.html | 60 ++++++++++++++++++++++++++++++++------------------ 1 file changed, 39 insertions(+), 21 deletions(-) diff --git a/admin-new.html b/admin-new.html index 55bb104..3181f79 100644 --- a/admin-new.html +++ b/admin-new.html @@ -1,5 +1,6 @@ + @@ -7,11 +8,13 @@ - + - + +
@@ -701,20 +715,23 @@

Platform Overview

- - + + - - - + + +
75%
Medium Risk
-
Current road safety conditions require attention in several corridors
+
Current road safety conditions require attention in several + corridors
@@ -753,7 +770,7 @@

Risk Distribution

const pageDescription = document.getElementById('pageDescription'); // Update based on section - switch(section) { + switch (section) { case 'overview': pageTitle.textContent = 'Platform Overview'; pageDescription.textContent = 'Real-time road safety intelligence and analytics'; @@ -1369,9 +1386,10 @@

Interactive Map View

} // Initialize - document.addEventListener('DOMContentLoaded', function() { + document.addEventListener('DOMContentLoaded', function () { initializeCharts(); }); - + + \ No newline at end of file