diff --git a/css/styles.css b/css/styles.css index f9901f9..8c4e9ae 100644 --- a/css/styles.css +++ b/css/styles.css @@ -4323,5 +4323,369 @@ body { box-shadow: 0 0 8px rgba(245, 158, 11, 0.3); } +/* ========================================================================== + V26 CIVIC UTILITY FEATURES: ROUTE SCANNER, SB 34 PRA, BACKGROUND AUDIO, EXPORT + ========================================================================== */ +/* Pre-Trip Route Scanner */ +.route-scanner-container { + display: flex; + flex-direction: column; + gap: 8px; + margin-top: 4px; +} +.route-corridor-select { + width: 100%; + padding: 8px 10px; + background: rgba(15, 23, 42, 0.8); + border: 1px solid rgba(56, 189, 248, 0.3); + border-radius: 8px; + color: #e2e8f0; + font-size: 0.8rem; + font-weight: 600; + outline: none; + cursor: pointer; + transition: all 0.2s ease; +} + +.route-corridor-select:focus { + border-color: #38bdf8; + box-shadow: 0 0 10px rgba(56, 189, 248, 0.3); +} + +.route-scan-result { + background: rgba(15, 23, 42, 0.95); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 10px; + padding: 10px 12px; + display: flex; + flex-direction: column; + gap: 8px; + animation: fadeIn 0.2s ease; +} + +.route-scan-result.hidden { + display: none; +} + +.scan-score-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; +} + +.scan-score-badge { + padding: 3px 8px; + border-radius: 6px; + font-size: 0.7rem; + font-weight: 800; + letter-spacing: 0.5px; + text-transform: uppercase; +} + +.scan-score-badge.exposure-high { + background: rgba(239, 68, 68, 0.2); + border: 1px solid rgba(239, 68, 68, 0.5); + color: #fca5a5; +} + +.scan-score-badge.exposure-medium { + background: rgba(245, 158, 11, 0.2); + border: 1px solid rgba(245, 158, 11, 0.5); + color: #fcd34d; +} + +.scan-score-badge.exposure-clean { + background: rgba(16, 185, 129, 0.2); + border: 1px solid rgba(16, 185, 129, 0.5); + color: #6ee7b7; +} + +.scan-camera-count { + font-size: 0.78rem; + font-weight: 700; + color: #cbd5e1; +} + +.scan-summary-text { + font-size: 0.75rem; + line-height: 1.4; + color: #94a3b8; + margin: 0; +} + +.scan-detour-box { + background: rgba(16, 185, 129, 0.08); + border: 1px solid rgba(16, 185, 129, 0.25); + border-radius: 8px; + padding: 8px 10px; + display: flex; + flex-direction: column; + gap: 4px; +} + +.detour-title { + font-size: 0.72rem; + font-weight: 700; + color: #34d399; +} + +.detour-desc { + font-size: 0.72rem; + color: #a7f3d0; + line-height: 1.35; + margin: 0; +} + +.btn-detour-apply { + margin-top: 6px; + padding: 6px 10px; + border-radius: 6px; + background: rgba(16, 185, 129, 0.2); + border: 1px solid rgba(16, 185, 129, 0.4); + color: #6ee7b7; + font-size: 0.74rem; + font-weight: 600; + cursor: pointer; + transition: all 0.18s ease; + text-align: center; +} + +.btn-detour-apply:hover { + background: rgba(16, 185, 129, 0.35); + color: #ffffff; + box-shadow: 0 0 10px rgba(16, 185, 129, 0.3); +} + +/* Civic Privacy & Export */ +.btn-pra-accent { + background: rgba(168, 85, 247, 0.15) !important; + border-color: rgba(168, 85, 247, 0.35) !important; + color: #d8b4fe !important; +} + +.btn-pra-accent:hover { + background: rgba(168, 85, 247, 0.28) !important; + border-color: rgba(168, 85, 247, 0.5) !important; + color: #ffffff !important; +} + +.export-btn-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 6px; +} + +.export-btn-grid .btn-tool-item { + padding: 8px 8px; + font-size: 0.76rem; + justify-content: center; +} + +/* Background Audio Guard */ +.btn-bg-audio-active { + background: rgba(16, 185, 129, 0.2) !important; + border-color: rgba(16, 185, 129, 0.5) !important; + color: #34d399 !important; + box-shadow: 0 0 12px rgba(16, 185, 129, 0.25) !important; +} + +/* SB 34 PRA Modal */ +.pra-dialog { + max-width: 780px; +} + +.pra-modal-header { + border-bottom: 1px solid rgba(168, 85, 247, 0.25); + background: linear-gradient(180deg, rgba(20, 15, 35, 0.96) 0%, rgba(10, 15, 29, 0.94) 100%); +} + +.badge-pra { + background: rgba(168, 85, 247, 0.2); + border: 1px solid rgba(168, 85, 247, 0.5); + color: #d8b4fe; + font-size: 0.7rem; + font-weight: 800; + letter-spacing: 0.6px; + padding: 3px 8px; + border-radius: 6px; + display: inline-block; + margin-bottom: 6px; +} + +.pra-modal-body { + padding: 24px 28px; + display: flex; + flex-direction: column; + gap: 18px; + background: var(--bg-surface-elevated); +} + +.pra-input-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 14px; +} + +.pra-input-grid .form-group { + display: flex; + flex-direction: column; + gap: 6px; +} + +.pra-input-grid .form-label { + font-size: 0.75rem; + font-weight: 700; + letter-spacing: 0.4px; + color: #94a3b8; + text-transform: uppercase; +} + +.pra-input-grid .form-input, +.pra-input-grid .form-select { + padding: 9px 12px; + background: rgba(15, 23, 42, 0.85); + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 8px; + color: #f1f5f9; + font-size: 0.84rem; + outline: none; + transition: all 0.18s ease; +} + +.pra-input-grid .form-input:focus, +.pra-input-grid .form-select:focus { + border-color: #a855f7; + box-shadow: 0 0 10px rgba(168, 85, 247, 0.3); +} + +.pra-actions-bar { + display: flex; + justify-content: flex-end; +} + +.btn-pra-generate { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 10px 18px; + background: linear-gradient(135deg, #9333ea, #a855f7); + border: 1px solid #c084fc; + border-radius: 8px; + color: #ffffff; + font-size: 0.84rem; + font-weight: 700; + cursor: pointer; + box-shadow: 0 4px 14px rgba(168, 85, 247, 0.35); + transition: all 0.2s ease; +} + +.btn-pra-generate:hover { + background: linear-gradient(135deg, #a855f7, #c084fc); + transform: translateY(-1px); + box-shadow: 0 6px 18px rgba(168, 85, 247, 0.5); +} + +.pra-letter-container { + background: rgba(15, 23, 42, 0.95); + border: 1px solid rgba(168, 85, 247, 0.25); + border-radius: 12px; + overflow: hidden; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); +} + +.pra-letter-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 14px; + background: rgba(30, 27, 50, 0.8); + border-bottom: 1px solid rgba(255, 255, 255, 0.08); +} + +.pra-letter-tag { + font-size: 0.68rem; + font-weight: 800; + letter-spacing: 0.8px; + color: #c084fc; + text-transform: uppercase; +} + +.pra-letter-actions { + display: flex; + align-items: center; + gap: 8px; +} + +.btn-letter-action { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 5px 12px; + background: rgba(255, 255, 255, 0.08); + border: 1px solid rgba(255, 255, 255, 0.14); + border-radius: 6px; + color: #e2e8f0; + font-size: 0.74rem; + font-weight: 600; + cursor: pointer; + text-decoration: none; + transition: all 0.18s ease; +} + +.btn-letter-action:hover { + background: rgba(255, 255, 255, 0.16); + color: #ffffff; + border-color: rgba(255, 255, 255, 0.25); +} + +.btn-letter-email { + background: rgba(56, 189, 248, 0.15); + border-color: rgba(56, 189, 248, 0.35); + color: #38bdf8; +} + +.btn-letter-email:hover { + background: rgba(56, 189, 248, 0.28); + color: #ffffff; +} + +.pra-letter-textarea { + width: 100%; + height: 240px; + padding: 14px 16px; + background: transparent; + border: none; + color: #f1f5f9; + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; + font-size: 0.78rem; + line-height: 1.55; + resize: vertical; + outline: none; +} + +.pra-legal-notice { + font-size: 0.72rem; + line-height: 1.45; + color: #94a3b8; + background: rgba(245, 158, 11, 0.08); + border: 1px solid rgba(245, 158, 11, 0.25); + border-radius: 8px; + padding: 10px 12px; +} + +.pra-legal-notice strong { + color: #fbbf24; +} + +@media (max-width: 480px) { + .pra-modal-body { + padding: 16px 18px; + gap: 14px; + } + .pra-input-grid { + grid-template-columns: 1fr; + } +} diff --git a/index.html b/index.html index 697f50e..07a93b6 100644 --- a/index.html +++ b/index.html @@ -54,7 +54,7 @@ - + @@ -327,6 +327,11 @@ Satellite / Dark + + + +
+
PRE-TRIP ROUTE SCANNER
+
+ + +
+
+ + +
+
CIVIC PRIVACY & LEGAL AUDIT
+ + +
+ + +
+
OPEN CIVIC DATA EXPORT
+
+ + +
+
+
DIAGNOSTICS & SYSTEM
+ @@ -1365,6 +1426,79 @@ + + + + + + + @@ -1375,11 +1509,11 @@ - - - - - + + + + +