Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Car Dashboard Mockup</title> | |
| <!-- Font Awesome CDN --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-yHcGz4pwrQm2lE4d2n2Z5q7q/UkLxZP9OfU+fJq0V14XYsQGkUqT8nEHpB3K8YsjpjPA63X1L5fOdJ19js0xKg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> | |
| <style> | |
| body { | |
| margin: 0; | |
| font-family: Arial, sans-serif; | |
| background: #1c1c1c; | |
| color: #fff; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| } | |
| .dashboard { | |
| width: 1000px; | |
| height: 450px; | |
| background: #111; | |
| border-radius: 10px; | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| box-shadow: 0 0 20px rgba(0,0,0,0.8); | |
| } | |
| /* Top bar */ | |
| .top-bar { | |
| height: 50px; | |
| display: flex; | |
| align-items: center; | |
| padding: 0 15px; | |
| justify-content: space-between; | |
| background: #222; | |
| } | |
| .top-bar .icons { | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| } | |
| .top-bar span { | |
| font-size: 14px; | |
| } | |
| .top-bar i { | |
| font-size: 16px; | |
| } | |
| /* Map area */ | |
| .map { | |
| flex: 1; | |
| background: #2e2e2e; /* Empty map box */ | |
| border-bottom: 1px solid #444; | |
| } | |
| /* Bottom apps */ | |
| .apps { | |
| display: flex; | |
| justify-content: center; | |
| gap: 40px; | |
| background: #111; | |
| padding: 15px 0; | |
| border-top: 1px solid #444; | |
| } | |
| .apps div { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| font-size: 12px; | |
| cursor: pointer; | |
| color: #fff; | |
| } | |
| .apps div:hover { | |
| color: #00bfff; | |
| } | |
| .apps i { | |
| font-size: 20px; | |
| margin-bottom: 5px; | |
| } | |
| /* Climate controls */ | |
| .climate { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 10px 30px; | |
| background: #111; | |
| border-top: 1px solid #444; | |
| font-size: 14px; | |
| } | |
| .climate div { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .button { | |
| width: 25px; | |
| height: 25px; | |
| background: #222; | |
| border-radius: 5px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| font-size: 16px; | |
| cursor: pointer; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="dashboard"> | |
| <div class="top-bar"> | |
| <div class="icons"> | |
| <i class="fas fa-lock"></i> | |
| <i class="fas fa-volume-up"></i> | |
| <i class="fas fa-car"></i> | |
| <span>Tim</span> | |
| </div> | |
| <div class="icons"> | |
| <span>59°</span> | |
| <span>9:20 AM</span> | |
| <span>PASSENGER AIRBAG OFF</span> | |
| </div> | |
| </div> | |
| <div class="map"></div> | |
| <div class="apps"> | |
| <div><i class="fas fa-bolt"></i><span>Energy</span></div> | |
| <div><i class="fas fa-phone"></i><span>Phone</span></div> | |
| <div><i class="fas fa-shield-alt"></i><span>Gear Guard</span></div> | |
| <div><i class="fas fa-campground"></i><span>Camping</span></div> | |
| <div><i class="fas fa-book"></i><span>Owner's Guide</span></div> | |
| <div><i class="fas fa-cog"></i><span>Settings</span></div> | |
| </div> | |
| <div class="climate"> | |
| <div> | |
| <div class="button"><i class="fas fa-minus"></i></div> | |
| <span>72°</span> | |
| <div class="button"><i class="fas fa-plus"></i></div> | |
| </div> | |
| <div> | |
| <span>Heated Seats <i class="fas fa-fire"></i></span> | |
| </div> | |
| <div> | |
| <div class="button"><i class="fas fa-minus"></i></div> | |
| <span>72°</span> | |
| <div class="button"><i class="fas fa-plus"></i></div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |