GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Navigation UI Mock</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: Arial, Helvetica, sans-serif;13 }14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #F3F4F5;20 }21 22 /* Status bar */23 .status-bar {24 position: absolute;25 top: 0;26 left: 0;27 width: 1080px;28 height: 140px;29 background: #E9E9EA;30 color: #333;31 display: flex;32 align-items: center;33 padding: 0 36px;34 box-sizing: border-box;35 }36 .status-left {37 font-size: 42px;38 font-weight: 600;39 margin-right: 28px;40 }41 .status-icons {42 display: flex;43 gap: 28px;44 margin-left: auto;45 align-items: center;46 }47 .status-dot {48 width: 14px;49 height: 14px;50 background: #60646B;51 border-radius: 50%;52 }53 .status-icon {54 width: 42px;55 height: 42px;56 display: inline-flex;57 align-items: center;58 justify-content: center;59 color: #60646B;60 }61 62 /* Map placeholder */63 .map {64 position: absolute;65 top: 0;66 left: 0;67 width: 1080px;68 height: 2400px;69 background: #ECEFF1;70 border: 1px solid #BDBDBD;71 display: flex;72 align-items: center;73 justify-content: center;74 color: #757575;75 font-size: 30px;76 letter-spacing: 0.5px;77 }78 79 /* Direction green card */80 .direction-card {81 position: absolute;82 top: 170px;83 left: 36px;84 width: 860px;85 height: 250px;86 background: #2E7D32;87 border-radius: 36px;88 box-shadow: 0 10px 24px rgba(0,0,0,0.15);89 display: flex;90 align-items: center;91 color: #fff;92 }93 .dir-left {94 width: 160px;95 display: flex;96 align-items: center;97 justify-content: center;98 }99 .dir-text {100 font-size: 64px;101 font-weight: 700;102 }103 .then-chip {104 position: absolute;105 left: 36px;106 top: 360px;107 width: 300px;108 height: 90px;109 background: #276A2A;110 color: #fff;111 border-bottom-left-radius: 30px;112 border-bottom-right-radius: 30px;113 border-top-right-radius: 30px;114 display: flex;115 align-items: center;116 padding: 0 26px;117 box-sizing: border-box;118 font-size: 40px;119 gap: 16px;120 }121 .then-arrow {122 font-size: 46px;123 line-height: 1;124 }125 126 /* Floating action buttons on right */127 .fab {128 position: absolute;129 width: 112px;130 height: 112px;131 border-radius: 56px;132 background: #FFFFFF;133 box-shadow: 0 10px 24px rgba(0,0,0,0.18);134 display: flex;135 align-items: center;136 justify-content: center;137 }138 .fab.search { top: 212px; left: 932px; border: 6px solid rgba(255,255,255,0.7); }139 .fab.sound { top: 380px; left: 932px; }140 .fab.compass { top: 548px; left: 932px; }141 .fab.note { top: 716px; left: 932px; }142 143 /* Bottom info card */144 .bottom-card {145 position: absolute;146 left: 20px;147 bottom: 210px;148 width: 1040px;149 height: 220px;150 background: #FFFFFF;151 border-radius: 44px;152 box-shadow: 0 12px 30px rgba(0,0,0,0.18);153 display: flex;154 align-items: center;155 padding: 0 36px;156 box-sizing: border-box;157 }158 .bottom-left, .bottom-right {159 width: 140px;160 display: flex;161 align-items: center;162 justify-content: center;163 }164 .bottom-center {165 flex: 1;166 text-align: center;167 }168 .time-big {169 font-size: 72px;170 font-weight: 800;171 color: #2E7D32;172 letter-spacing: 0.5px;173 }174 .time-sub {175 margin-top: 12px;176 font-size: 38px;177 color: #5F6368;178 }179 180 /* Speed bubble */181 .speed-chip {182 position: absolute;183 left: 42px;184 top: 1540px;185 width: 140px;186 height: 140px;187 background: #FFFFFF;188 border-radius: 70px;189 box-shadow: 0 8px 22px rgba(0,0,0,0.18);190 display: flex;191 align-items: center;192 justify-content: center;193 color: #5F6368;194 font-size: 34px;195 flex-direction: column;196 gap: 6px;197 }198 .speed-chip span.small {199 font-size: 30px;200 color: #7A8086;201 }202 203 /* Location dot + route (simple representation) */204 .loc-dot {205 position: absolute;206 top: 1560px;207 left: 560px;208 width: 110px;209 height: 110px;210 background: #FFFFFF;211 border-radius: 55px;212 box-shadow: 0 8px 22px rgba(0,0,0,0.2);213 display: flex;214 align-items: center;215 justify-content: center;216 }217 .loc-dot::after {218 content: "";219 width: 50px;220 height: 50px;221 background: #2A7BFF;222 border-radius: 25px;223 display: block;224 }225 .blue-route {226 position: absolute;227 top: 1600px;228 left: 530px;229 width: 380px;230 height: 22px;231 background: #2A7BFF;232 border-radius: 11px;233 }234 235 /* Bottom system bar */236 .system-bar {237 position: absolute;238 bottom: 0;239 left: 0;240 width: 1080px;241 height: 180px;242 background: #1E1F22;243 display: flex;244 align-items: center;245 justify-content: space-between;246 padding: 0 50px;247 box-sizing: border-box;248 }249 .sys-icon {250 width: 120px;251 height: 120px;252 border-radius: 60px;253 background: #2A2B2F;254 display: flex;255 align-items: center;256 justify-content: center;257 color: #FFF;258 }259 .home-indicator {260 position: absolute;261 bottom: 24px;262 left: 50%;263 transform: translateX(-50%);264 width: 180px;265 height: 12px;266 background: #E6E6E6;267 border-radius: 6px;268 opacity: 0.85;269 }270 .label {271 font-size: 30px;272 color: #fff;273 }274</style>275</head>276<body>277<div id="render-target">278 279 <!-- Map area -->280 <div class="map">[IMG: Map - Roads and Buildings]</div>281 282 <!-- Status bar -->283 <div class="status-bar">284 <div class="status-left">3:36</div>285 <div class="status-icons">286 <svg class="status-icon" viewBox="0 0 24 24">287 <path d="M12 2l-3 7h6l-3-7zm0 20a8 8 0 0 0 8-8h-4a4 4 0 0 1-8 0H4a8 8 0 0 0 8 8z" fill="#60646B"/>288 </svg>289 <svg class="status-icon" viewBox="0 0 24 24">290 <path d="M12 3l9 4v6c0 5-4 7-9 8-5-1-9-3-9-8V7l9-4z" fill="#60646B"/>291 </svg>292 <svg class="status-icon" viewBox="0 0 24 24">293 <path d="M12 2l9 9-9 9-9-9 9-9zm0 4l-5 5 5 5 5-5-5-5z" fill="#60646B"/>294 </svg>295 <span class="status-dot"></span>296 <svg class="status-icon" viewBox="0 0 24 24">297 <path d="M12 2a8 8 0 1 0 .001 16.001A8 8 0 0 0 12 2zm1 4h-2v6h6v-2h-4V6z" fill="#60646B"/>298 </svg>299 <svg class="status-icon" viewBox="0 0 24 24">300 <path d="M3 12l3-3 4 4 7-7 4 4-11 11L3 12z" fill="#60646B"/>301 </svg>302 <svg class="status-icon" viewBox="0 0 24 24">303 <path d="M7 2h10v20H7z" fill="#60646B"/>304 </svg>305 </div>306 </div>307 308 <!-- Direction card -->309 <div class="direction-card">310 <div class="dir-left">311 <svg width="90" height="110" viewBox="0 0 24 24">312 <path d="M12 20V6" stroke="#fff" stroke-width="2" stroke-linecap="round"/>313 <path d="M6 12l6-6 6 6" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>314 </svg>315 </div>316 <div class="dir-text">Head east</div>317 </div>318 <div class="then-chip">319 <span>Then</span>320 <span class="then-arrow">↗</span>321 </div>322 323 <!-- Right side floating buttons -->324 <div class="fab search">325 <svg width="60" height="60" viewBox="0 0 24 24">326 <circle cx="11" cy="11" r="6" stroke="#2E7D32" stroke-width="2" fill="none"/>327 <path d="M20 20l-5-5" stroke="#2E7D32" stroke-width="2" stroke-linecap="round"/>328 </svg>329 </div>330 <div class="fab sound">331 <svg width="64" height="64" viewBox="0 0 24 24">332 <path d="M4 9v6h4l5 4V5l-5 4H4z" fill="#5F6368"/>333 <path d="M16 9c1.7 1.7 1.7 4.3 0 6" stroke="#5F6368" stroke-width="2" stroke-linecap="round" fill="none"/>334 </svg>335 </div>336 <div class="fab compass">337 <svg width="64" height="64" viewBox="0 0 24 24">338 <circle cx="12" cy="12" r="9" fill="none" stroke="#C9CDD1" stroke-width="2"/>339 <path d="M12 5l4 9-9-4 5-5z" fill="#E53935"/>340 </svg>341 </div>342 <div class="fab note">343 <svg width="64" height="64" viewBox="0 0 24 24">344 <path d="M4 5h16v11H13l-3 3-3-3H4z" fill="none" stroke="#5F6368" stroke-width="2"/>345 <path d="M12 8v6M9 11h6" stroke="#5F6368" stroke-width="2" stroke-linecap="round"/>346 </svg>347 </div>348 349 <!-- Speed -->350 <div class="speed-chip">351 <div>--</div>352 <span class="small">km/h</span>353 </div>354 355 <!-- Location dot and a short blue route representation -->356 <div class="loc-dot"></div>357 <div class="blue-route"></div>358 359 <!-- Bottom navigation info card -->360 <div class="bottom-card">361 <div class="bottom-left">362 <svg width="80" height="80" viewBox="0 0 24 24">363 <path d="M6 6l12 12M18 6L6 18" stroke="#5F6368" stroke-width="2" stroke-linecap="round"/>364 </svg>365 </div>366 <div class="bottom-center">367 <div class="time-big">3 hr 43 min</div>368 <div class="time-sub">216 km · 7:19 PM</div>369 </div>370 <div class="bottom-right">371 <svg width="88" height="88" viewBox="0 0 24 24">372 <path d="M5 19V4h4v6h6l-2-3 6 6h-8v6H5z" fill="none" stroke="#5F6368" stroke-width="2" stroke-linejoin="round"/>373 </svg>374 </div>375 </div>376 377 <!-- Bottom system bar -->378 <div class="system-bar">379 <div class="sys-icon">380 <svg width="70" height="70" viewBox="0 0 24 24">381 <path d="M12 3a4 4 0 0 0-4 4v4a4 4 0 0 0 8 0V7a4 4 0 0 0-4-4z" fill="#4CAF50"/>382 <path d="M7 16h10v3H7z" fill="#1976D2"/>383 </svg>384 </div>385 <div class="sys-icon">386 <svg width="70" height="70" viewBox="0 0 24 24">387 <path d="M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z" fill="#D0D4DA"/>388 </svg>389 </div>390 </div>391 <div class="home-indicator"></div>392 393</div>394</body>395</html>