diff --git a/css/styles.css b/css/styles.css index 22d1cfd..18dacda 100644 --- a/css/styles.css +++ b/css/styles.css @@ -702,25 +702,154 @@ body { box-shadow: 0 0 10px rgba(34, 211, 238, 0.4); } -/* Floating Top Controls (Simulator, Audio, GPS) */ +/* Floating Top Controls (Single-Row Primary Bar + Tools Dropdown on Desktop) */ .map-top-controls { position: absolute; top: 20px; - left: 360px; right: 20px; + left: auto; z-index: 500; display: flex; - align-items: center; - justify-content: flex-end; - gap: 10px; - flex-wrap: wrap; + flex-direction: column; + align-items: flex-end; pointer-events: none; } -.map-top-controls > * { +.controls-primary-bar { + display: flex; + align-items: center; + gap: 6px; + background: rgba(13, 17, 26, 0.92); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + padding: 5px 8px; + border-radius: var(--radius-lg); + border: 1px solid rgba(56, 189, 248, 0.28); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65); pointer-events: auto; } +.controls-primary-bar .btn-hud-action { + padding: 7px 13px; + font-size: 0.82rem; + font-weight: 600; + border-radius: 8px; + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(255, 255, 255, 0.08); + color: #f1f5f9; + box-shadow: none; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + white-space: nowrap; +} + +.controls-primary-bar .btn-hud-action:hover { + background: rgba(56, 189, 248, 0.15); + border-color: rgba(56, 189, 248, 0.4); + color: #38bdf8; + transform: translateY(-1px); +} + +.controls-primary-bar .btn-hud-action.active { + background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); + color: #ffffff; + border-color: rgba(255, 255, 255, 0.4); + box-shadow: 0 0 14px rgba(239, 68, 68, 0.5); +} + +.controls-primary-bar .btn-tools-dropdown-trigger { + background: rgba(56, 189, 248, 0.1); + border-color: rgba(56, 189, 248, 0.35); + color: #38bdf8; +} + +.controls-primary-bar .btn-tools-dropdown-trigger:hover, +.controls-primary-bar .btn-tools-dropdown-trigger.active { + background: rgba(56, 189, 248, 0.25); + border-color: #38bdf8; + color: #ffffff; +} + +/* Dropdown Menu for Secondary Tools on Desktop */ +.controls-tools-menu { + display: none; + position: absolute; + top: 50px; + right: 0; + width: 280px; + background: rgba(13, 17, 26, 0.96); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border: 1px solid rgba(56, 189, 248, 0.3); + border-radius: var(--radius-lg); + padding: 14px; + box-shadow: 0 14px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(6, 182, 212, 0.15); + pointer-events: auto; + z-index: 600; + animation: dropdown-fade-in 0.2s cubic-bezier(0.16, 1, 0.3, 1); +} + +.controls-tools-menu.is-open { + display: flex; + flex-direction: column; + gap: 12px; +} + +@keyframes dropdown-fade-in { + from { opacity: 0; transform: translateY(-8px); } + to { opacity: 1; transform: translateY(0); } +} + +.controls-tools-menu .drawer-header { + display: none; +} + +.tools-group { + display: flex; + flex-direction: column; + gap: 5px; + padding-bottom: 8px; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); +} + +.tools-group:last-child { + padding-bottom: 0; + border-bottom: none; +} + +.tools-group-label { + font-size: 0.65rem; + font-weight: 700; + letter-spacing: 0.8px; + color: #64748b; + padding: 2px 6px; + text-transform: uppercase; +} + +.controls-tools-menu .btn-tool-item { + width: 100%; + justify-content: flex-start; + padding: 9px 12px; + font-size: 0.82rem; + border-radius: 8px; + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(255, 255, 255, 0.07); + color: #e2e8f0; + box-shadow: none; + transition: all 0.18s ease; + white-space: nowrap; +} + +.controls-tools-menu .btn-tool-item:hover { + background: rgba(56, 189, 248, 0.15); + border-color: rgba(56, 189, 248, 0.35); + color: #38bdf8; + transform: translateX(3px); +} + +.controls-tools-menu .btn-tool-item:active { + transform: scale(0.98); +} + .btn-hud-action { padding: 9px 16px; background: var(--bg-hud); @@ -2555,6 +2684,7 @@ body { .map-top-controls.open-drawer { transform: translateY(0); + pointer-events: auto; } .drawer-header { @@ -2586,6 +2716,60 @@ body { justify-content: center; } + /* Mobile Controls Drawer Adaptations */ + .controls-primary-bar { + display: grid !important; + grid-template-columns: 1fr 1fr; + gap: 8px; + width: 100%; + background: transparent !important; + border: none !important; + padding: 0 !important; + box-shadow: none !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; + margin-bottom: 6px; + } + + .controls-primary-bar #btn-desktop-tools-menu { + display: none !important; + } + + .controls-primary-bar .btn-hud-action { + width: 100%; + justify-content: center; + padding: 11px 10px; + font-size: 0.82rem; + background: rgba(30, 41, 59, 0.85); + border-radius: 10px; + border: 1px solid rgba(255, 255, 255, 0.1); + } + + .controls-tools-menu { + display: flex !important; + flex-direction: column !important; + position: static !important; + width: 100% !important; + background: transparent !important; + border: none !important; + box-shadow: none !important; + padding: 0 !important; + animation: none !important; + gap: 12px !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; + } + + .controls-tools-menu .btn-tool-item { + width: 100%; + justify-content: flex-start; + padding: 11px 14px; + font-size: 0.86rem; + background: rgba(30, 41, 59, 0.7); + border-radius: 10px; + border: 1px solid rgba(255, 255, 255, 0.08); + } + .btn-hud-action { width: 100%; justify-content: flex-start; diff --git a/index.html b/index.html index 6270158..9193945 100644 --- a/index.html +++ b/index.html @@ -54,7 +54,7 @@ - + @@ -297,76 +297,86 @@ +
+
- Driving Controls & Settings + Driving Controls & Tools
- + +
+ - + - + - + - + + +
- + +
+
+
SIMULATION & DRIVES
+ + +
- +
+
RADAR TESTING & PINS
+ + +
- - - - - - - - - +
+
DIAGNOSTICS & SYSTEM
+ + +
+
@@ -1303,11 +1313,11 @@ - - - - - + + + + +