GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Navigation UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color: #222; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #F1F4F6;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 120px;23 background: #E8E8EA;24 color: #4d4d4d;25 font-size: 36px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 padding: 0 32px;30 box-sizing: border-box;31 }32 .status-icons {33 display: flex;34 align-items: center;35 gap: 24px;36 }37 .dot { width: 10px; height: 10px; background: #666; border-radius: 50%; display: inline-block; }38 .tiny-icon { width: 28px; height: 28px; border-radius: 4px; background: #666; opacity: .8; }39 40 /* Map canvas placeholder */41 .map-placeholder {42 position: absolute;43 top: 120px;44 left: 0;45 width: 1080px;46 height: 2100px;47 background: #E0E0E0;48 border-top: 1px solid #BDBDBD;49 display: flex;50 align-items: center;51 justify-content: center;52 color: #757575;53 letter-spacing: .5px;54 text-transform: uppercase;55 font-size: 28px;56 }57 58 /* Green direction banner */59 .banner {60 position: absolute;61 top: 148px;62 left: 28px;63 width: 976px;64 height: 230px;65 background: #2E7D32;66 border-radius: 40px;67 color: #fff;68 box-shadow: 0 8px 18px rgba(0,0,0,0.25);69 padding: 30px 30px 30px 32px;70 box-sizing: border-box;71 }72 .banner-content {73 display: flex;74 align-items: center;75 height: 100%;76 }77 .banner .arrow {78 width: 100px;79 height: 160px;80 margin-right: 28px;81 }82 .banner .title {83 font-size: 64px;84 font-weight: 700;85 letter-spacing: 0.2px;86 }87 .banner .search-btn {88 margin-left: auto;89 width: 130px;90 height: 130px;91 background: #fff;92 border-radius: 50%;93 display: flex;94 align-items: center;95 justify-content: center;96 box-shadow: 0 0 0 6px rgba(255,255,255,0.35), 0 6px 14px rgba(0,0,0,0.25);97 }98 99 .then-pill {100 position: absolute;101 top: 350px;102 left: 28px;103 width: 300px;104 height: 120px;105 background: #2E7D32;106 color: #fff;107 border-radius: 28px;108 display: flex;109 align-items: center;110 padding: 0 24px;111 font-size: 42px;112 font-weight: 700;113 box-shadow: 0 8px 18px rgba(0,0,0,0.25);114 gap: 18px;115 }116 .then-pill svg { width: 56px; height: 56px; }117 118 /* Right action fabs */119 .fab {120 position: absolute;121 right: 30px;122 width: 132px;123 height: 132px;124 border-radius: 50%;125 background: #fff;126 display: flex;127 align-items: center;128 justify-content: center;129 box-shadow: 0 8px 18px rgba(0,0,0,0.25);130 }131 .fab1 { top: 450px; }132 .fab2 { top: 630px; }133 .fab3 { top: 820px; }134 135 /* Speed bubble */136 .speed-bubble {137 position: absolute;138 left: 30px;139 bottom: 610px;140 width: 140px;141 height: 140px;142 background: #fff;143 border-radius: 50%;144 display: flex;145 align-items: center;146 justify-content: center;147 flex-direction: column;148 box-shadow: 0 8px 18px rgba(0,0,0,0.25);149 font-size: 34px;150 color: #4d4d4d;151 }152 .speed-bubble .unit { font-size: 28px; color: #7b7b7b; margin-top: -6px; }153 154 /* Location dot and route hint */155 .location-dot {156 position: absolute;157 left: 510px;158 bottom: 670px;159 width: 114px;160 height: 114px;161 background: #fff;162 border-radius: 50%;163 display: flex;164 align-items: center;165 justify-content: center;166 box-shadow: 0 6px 10px rgba(0,0,0,0.25);167 }168 .location-dot::after {169 content: '';170 width: 64px;171 height: 64px;172 background: #2F80ED;173 border-radius: 50%;174 }175 .route-segment {176 position: absolute;177 right: 80px;178 bottom: 600px;179 width: 360px;180 height: 22px;181 background: #3478F6;182 border-radius: 12px;183 transform: rotate(-35deg);184 box-shadow: 0 0 0 8px rgba(52,120,246,0.35);185 }186 187 /* Bottom white info card */188 .info-card {189 position: absolute;190 left: 0;191 bottom: 220px;192 width: 1080px;193 height: 250px;194 background: #fff;195 border-radius: 36px;196 box-shadow: 0 -6px 16px rgba(0,0,0,0.15);197 padding: 28px 30px;198 box-sizing: border-box;199 }200 .handle {201 position: absolute;202 top: 12px;203 left: 50%;204 transform: translateX(-50%);205 width: 120px;206 height: 10px;207 background: #D1D1D6;208 border-radius: 6px;209 }210 .info-row {211 display: flex;212 align-items: center;213 height: 100%;214 gap: 24px;215 }216 .circle-btn {217 width: 120px;218 height: 120px;219 border-radius: 50%;220 background: #fff;221 border: 2px solid #D9D9D9;222 display: flex;223 align-items: center;224 justify-content: center;225 }226 .info-main {227 flex: 1;228 text-align: center;229 }230 .eta {231 font-size: 64px;232 color: #1B5E20;233 font-weight: 700;234 }235 .sub {236 font-size: 36px;237 color: #616161;238 margin-top: 6px;239 }240 241 /* Bottom black bar */242 .bottom-bar {243 position: absolute;244 left: 0;245 bottom: 0;246 width: 1080px;247 height: 220px;248 background: #1C1C1E;249 display: flex;250 align-items: center;251 justify-content: space-between;252 padding: 0 34px;253 box-sizing: border-box;254 }255 .home-indicator {256 position: absolute;257 bottom: 28px;258 left: 50%;259 transform: translateX(-50%);260 width: 280px;261 height: 10px;262 background: #ECECEC;263 border-radius: 6px;264 opacity: .9;265 }266 .mic {267 width: 92px;268 height: 92px;269 background: #fff;270 border-radius: 50%;271 display: grid;272 place-items: center;273 }274 .grid-btn {275 width: 92px;276 height: 92px;277 background: rgba(255,255,255,0.14);278 border-radius: 18px;279 display: grid;280 place-items: center;281 }282 .grid-btn .square {283 width: 14px; height: 14px; background: #E6E6E6; margin: 5px; display: inline-block;284 }285</style>286</head>287<body>288<div id="render-target">289 290 <!-- Status bar -->291 <div class="status-bar">292 <div>3:32</div>293 <div class="status-icons">294 <span class="tiny-icon"></span>295 <span class="tiny-icon"></span>296 <span class="tiny-icon"></span>297 <span class="dot"></span>298 <span class="tiny-icon"></span>299 <span class="tiny-icon"></span>300 <span class="tiny-icon"></span>301 </div>302 </div>303 304 <!-- Map placeholder -->305 <div class="map-placeholder">[IMG: Map / Roads Background]</div>306 307 <!-- Green direction banner -->308 <div class="banner">309 <div class="banner-content">310 <!-- Up arrow with dashed tail -->311 <svg class="arrow" viewBox="0 0 80 200">312 <g fill="#ffffff">313 <polygon points="40,0 70,50 54,50 54,170 26,170 26,50 10,50" />314 </g>315 <g stroke="#ffffff" stroke-width="10" stroke-dasharray="16,18" stroke-linecap="round">316 <line x1="40" y1="88" x2="40" y2="180"></line>317 </g>318 </svg>319 320 <div class="title">Head east</div>321 322 <div class="search-btn">323 <svg width="58" height="58" viewBox="0 0 24 24">324 <circle cx="10" cy="10" r="7" stroke="#2E7D32" stroke-width="2" fill="none"></circle>325 <line x1="15" y1="15" x2="22" y2="22" stroke="#2E7D32" stroke-width="2" />326 </svg>327 </div>328 </div>329 </div>330 331 <!-- "Then" pill -->332 <div class="then-pill">333 <div>Then</div>334 <svg viewBox="0 0 24 24">335 <path d="M6 18v-6a6 6 0 016-6h6" stroke="#fff" stroke-width="3" fill="none" />336 <polyline points="12,6 18,6 18,12" stroke="#fff" stroke-width="3" fill="none"/>337 </svg>338 </div>339 340 <!-- Right-side floating actions -->341 <div class="fab fab1">342 <!-- Speaker -->343 <svg width="56" height="56" viewBox="0 0 24 24">344 <path d="M3 9h4l5-4v14l-5-4H3z" fill="#4d4d4d"></path>345 <path d="M16 8c1.7 1.7 1.7 6.3 0 8" stroke="#4d4d4d" stroke-width="2" fill="none" stroke-linecap="round"/>346 <path d="M19 6c2.7 2.7 2.7 10.3 0 13" stroke="#4d4d4d" stroke-width="2" fill="none" stroke-linecap="round"/>347 </svg>348 </div>349 <div class="fab fab2">350 <!-- Compass -->351 <svg width="56" height="56" viewBox="0 0 24 24">352 <circle cx="12" cy="12" r="9" fill="none" stroke="#4d4d4d" stroke-width="1.6"/>353 <polygon points="12,5 15,13 12,11 9,13" fill="#D32F2F"/>354 <polygon points="12,19 9,11 12,13 15,11" fill="#B0BEC5"/>355 </svg>356 </div>357 <div class="fab fab3">358 <!-- Chat plus -->359 <svg width="56" height="56" viewBox="0 0 24 24">360 <path d="M4 4h12a4 4 0 014 4v6a4 4 0 01-4 4H10l-4 3v-3H6a4 4 0 01-4-4V8a4 4 0 014-4z" fill="none" stroke="#333" stroke-width="1.8" />361 <line x1="12" y1="9" x2="12" y2="15" stroke="#333" stroke-width="2"/>362 <line x1="9" y1="12" x2="15" y2="12" stroke="#333" stroke-width="2"/>363 </svg>364 </div>365 366 <!-- Speed bubble -->367 <div class="speed-bubble">368 <div>--</div>369 <div class="unit">km/h</div>370 </div>371 372 <!-- Location dot and a blue route segment -->373 <div class="route-segment"></div>374 <div class="location-dot"></div>375 376 <!-- Bottom information card -->377 <div class="info-card">378 <div class="handle"></div>379 <div class="info-row">380 <div class="circle-btn">381 <!-- Close (X) -->382 <svg width="52" height="52" viewBox="0 0 24 24">383 <line x1="5" y1="5" x2="19" y2="19" stroke="#545454" stroke-width="2"/>384 <line x1="19" y1="5" x2="5" y2="19" stroke="#545454" stroke-width="2"/>385 </svg>386 </div>387 388 <div class="info-main">389 <div class="eta">1 hr 9 min</div>390 <div class="sub">40 km • 4:41 PM</div>391 </div>392 393 <div class="circle-btn">394 <!-- Diverging arrows -->395 <svg width="56" height="56" viewBox="0 0 24 24">396 <path d="M12 5v6" stroke="#444" stroke-width="2" fill="none"/>397 <polyline points="12,5 9,8 15,8 12,5" fill="#444"/>398 <path d="M12 11c4 0 4 5 8 5" stroke="#444" stroke-width="2" fill="none"/>399 <path d="M12 11c-4 0-4 5-8 5" stroke="#444" stroke-width="2" fill="none"/>400 </svg>401 </div>402 </div>403 </div>404 405 <!-- Bottom black bar with mic and grid -->406 <div class="bottom-bar">407 <div class="mic">408 <svg width="48" height="48" viewBox="0 0 24 24">409 <rect x="9" y="3" width="6" height="12" rx="3" fill="#1E88E5"/>410 <path d="M5 12a7 7 0 0014 0" stroke="#43A047" stroke-width="2" fill="none"/>411 <line x1="12" y1="19" x2="12" y2="22" stroke="#FDD835" stroke-width="2"/>412 </svg>413 </div>414 <div class="grid-btn">415 <div style="display:grid; grid-template-columns: repeat(3, auto);">416 <span class="square"></span><span class="square"></span><span class="square"></span>417 <span class="square"></span><span class="square"></span><span class="square"></span>418 <span class="square"></span><span class="square"></span><span class="square"></span>419 </div>420 </div>421 <div class="home-indicator"></div>422 </div>423 424</div>425</body>426</html>