GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Map Navigation UI Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #0f1c26;15 border-radius: 30px;16 box-shadow: 0 20px 60px rgba(0,0,0,0.35);17 color: #ffffff;18 }19 20 /* Status bar */21 .status-bar {22 position: absolute;23 top: 22px;24 left: 24px;25 right: 24px;26 height: 56px;27 display: flex;28 align-items: center;29 justify-content: space-between;30 color: #fff;31 opacity: 0.95;32 font-weight: 600;33 letter-spacing: 0.4px;34 }35 .status-right {36 display: flex;37 gap: 20px;38 align-items: center;39 }40 .status-icon { width: 28px; height: 28px; opacity: 0.9; }41 42 /* Map area placeholder */43 .map-area {44 position: absolute;45 top: 0;46 left: 0;47 width: 1080px;48 height: 1670px;49 background: #0b1620;50 }51 .map-placeholder {52 position: absolute;53 top: 80px;54 left: 40px;55 right: 40px;56 bottom: 260px;57 background: #E0E0E0;58 border: 1px solid #BDBDBD;59 border-radius: 12px;60 display: flex;61 align-items: center;62 justify-content: center;63 color: #757575;64 font-size: 30px;65 letter-spacing: 0.3px;66 }67 68 /* Weather bubble */69 .weather-bubble {70 position: absolute;71 top: 120px;72 left: 40px;73 background: #26323b;74 border-radius: 20px;75 padding: 18px 22px;76 display: flex;77 align-items: center;78 gap: 14px;79 box-shadow: 0 8px 24px rgba(0,0,0,0.35);80 }81 .weather-bubble .temp {82 font-size: 34px;83 font-weight: 700;84 color: #e6f4ff;85 }86 87 /* Floating map controls */88 .fab {89 position: absolute;90 right: 32px;91 width: 104px;92 height: 104px;93 border-radius: 52px;94 background: #2a3945;95 box-shadow: 0 8px 24px rgba(0,0,0,0.35);96 display: flex;97 align-items: center;98 justify-content: center;99 }100 .fab.layers { top: 920px; }101 .fab.locate { top: 1048px; }102 103 /* Route markers */104 .marker {105 position: absolute;106 width: 96px;107 height: 96px;108 border-radius: 48px;109 background: #22c7c2;110 box-shadow: 0 8px 24px rgba(0,0,0,0.35);111 display: flex;112 align-items: center;113 justify-content: center;114 }115 .marker.start {116 top: 420px;117 left: 310px;118 border: 6px solid #1e7f7b;119 }120 .marker.dest {121 bottom: 740px;122 right: 156px;123 width: 76px;124 height: 76px;125 border-radius: 38px;126 border: 6px solid #e7f8f7;127 background: #20c3bd;128 }129 130 /* HERE logo */131 .brand {132 position: absolute;133 bottom: 940px;134 left: 40px;135 transform: rotate(-35deg);136 font-weight: 900;137 font-size: 64px;138 opacity: 0.9;139 color: #ffffff;140 display: flex;141 align-items: center;142 gap: 14px;143 }144 .brand .tick {145 width: 20px; height: 20px; background: #17cbbf; border-radius: 3px;146 transform: rotate(45deg);147 }148 149 /* Bottom sheet */150 .sheet {151 position: absolute;152 left: 0;153 right: 0;154 bottom: 0;155 height: 920px;156 background: #2c3a44;157 border-top-left-radius: 34px;158 border-top-right-radius: 34px;159 box-shadow: 0 -18px 40px rgba(0,0,0,0.45);160 }161 .handle {162 width: 160px;163 height: 14px;164 border-radius: 7px;165 background: #637180;166 margin: 14px auto 10px auto;167 }168 169 .row {170 display: flex;171 align-items: center;172 gap: 18px;173 padding: 26px 34px;174 color: #b8c7d5;175 font-size: 36px;176 }177 .row .title { color: #1fc5bd; font-weight: 700; }178 .divider {179 height: 2px; background: #3b4a56; margin: 0 34px;180 }181 182 .transport {183 display: flex;184 align-items: center;185 justify-content: space-between;186 padding: 24px 34px 8px 34px;187 }188 .mode {189 width: 120px; text-align: center; color: #c7d3dc; opacity: 0.9;190 }191 .mode.active { color: #ffffff; }192 .mode-bar {193 height: 6px; background: #3b4a56; margin: 14px 34px 0 34px;194 }195 .mode-bar .active-line{ width: 200px; height: 6px; background: #3c89ff; }196 197 .prefs {198 position: absolute; right: 34px; top: 368px; color: #5aaaff; font-weight: 700; font-size: 34px;199 }200 201 .card {202 margin: 28px 24px;203 background: #2b3943;204 border-radius: 20px;205 padding: 32px;206 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);207 color: #d7e1ea;208 }209 .time {210 font-size: 64px; color: #fff; font-weight: 800;211 }212 .delay {213 font-size: 36px; color: #ff6b7e; margin-top: 6px; font-weight: 700;214 }215 .minor { font-size: 34px; color: #c9d2db; margin-top: 8px; }216 .pill {217 display: inline-flex; align-items: center; gap: 10px;218 background: #1e6fe8; color: #fff; font-weight: 700;219 padding: 12px 18px; border-radius: 24px; font-size: 30px; margin-top: 18px;220 }221 222 .go-btn {223 position: absolute; right: 48px; top: 580px;224 width: 132px; height: 132px; border-radius: 66px;225 background: linear-gradient(135deg,#5dd0ff,#31c6c2);226 box-shadow: 0 10px 28px rgba(0,0,0,0.35);227 display: flex; align-items: center; justify-content: center;228 }229 230 /* Bottom gesture bar */231 .gesture {232 position: absolute; left: 50%; transform: translateX(-50%);233 bottom: 40px; width: 360px; height: 10px; background: #eaeaea; border-radius: 6px; opacity: 0.8;234 }235</style>236</head>237<body>238<div id="render-target">239 240 <!-- Status bar -->241 <div class="status-bar">242 <div style="font-size:34px;">10:19</div>243 <div class="status-right">244 <!-- simple inline icons -->245 <svg class="status-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="#fff" stroke-width="2"/><path d="M9 12l3 3 5-5" stroke="#fff" stroke-width="2" fill="none"/></svg>246 <svg class="status-icon" viewBox="0 0 24 24"><path d="M3 20h18" stroke="#fff" stroke-width="2"/><rect x="5" y="4" width="14" height="12" rx="2" fill="none" stroke="#fff" stroke-width="2"/></svg>247 <svg class="status-icon" viewBox="0 0 24 24"><path d="M2 9l10-7 10 7v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2z" fill="none" stroke="#fff" stroke-width="2"/></svg>248 </div>249 </div>250 251 <!-- Map area -->252 <div class="map-area">253 <div class="map-placeholder">[IMG: Dark Map Navigation]</div>254 255 <!-- Weather bubble -->256 <div class="weather-bubble">257 <svg width="36" height="36" viewBox="0 0 24 24">258 <path d="M6 14h10a4 4 0 0 0 0-8 5 5 0 0 0-9-1 4 4 0 0 0-1 9z" fill="#b9d4ff"/>259 <path d="M7 18l-2 3M11 18l-2 3M15 18l-2 3" stroke="#b9d4ff" stroke-width="2" stroke-linecap="round"/>260 </svg>261 <div class="temp">78°F</div>262 </div>263 264 <!-- Floating action buttons -->265 <div class="fab layers">266 <svg width="48" height="48" viewBox="0 0 24 24">267 <path d="M12 3l9 5-9 5-9-5 9-5zM3 14l9 5 9-5" fill="none" stroke="#d8e3ea" stroke-width="2" stroke-linejoin="round"/>268 </svg>269 </div>270 <div class="fab locate">271 <svg width="48" height="48" viewBox="0 0 24 24">272 <circle cx="12" cy="12" r="9" fill="none" stroke="#d8e3ea" stroke-width="2"/>273 <circle cx="12" cy="12" r="3" fill="#d8e3ea"/>274 </svg>275 </div>276 277 <!-- Route markers -->278 <div class="marker start">279 <svg width="44" height="44" viewBox="0 0 24 24">280 <circle cx="12" cy="12" r="6" fill="#fff"/>281 </svg>282 </div>283 <div class="marker dest"></div>284 285 <!-- HERE logo -->286 <div class="brand">287 <div>here</div>288 <div class="tick"></div>289 </div>290 </div>291 292 <!-- Bottom sheet content -->293 <div class="sheet">294 <div class="handle"></div>295 296 <div class="row">297 <svg width="34" height="34" viewBox="0 0 24 24">298 <circle cx="12" cy="12" r="10" fill="none" stroke="#cfe5e3" stroke-width="2"/>299 <circle cx="12" cy="12" r="2" fill="#cfe5e3"/>300 </svg>301 <div class="title">Your location</div>302 <div style="margin-left:auto;">303 <svg width="54" height="54" viewBox="0 0 24 24">304 <path d="M12 2v20M2 12h20" stroke="#a6b4bf" stroke-width="2"/>305 </svg>306 </div>307 <div style="margin-left:20px;">308 <svg width="34" height="34" viewBox="0 0 24 24">309 <path d="M18 6l-12 12" stroke="#a6b4bf" stroke-width="2"/>310 <path d="M6 6l12 12" stroke="#a6b4bf" stroke-width="2"/>311 </svg>312 </div>313 </div>314 315 <div class="divider"></div>316 317 <div class="row" style="padding-top:20px; padding-bottom:20px;">318 <svg width="34" height="34" viewBox="0 0 24 24">319 <path d="M12 2c-4 0-6 3-6 6 0 5 6 14 6 14s6-9 6-14c0-3-2-6-6-6z" fill="none" stroke="#c7d3dc" stroke-width="2"/>320 <circle cx="12" cy="8" r="2" fill="#c7d3dc"/>321 </svg>322 <div>Ambience Mall</div>323 </div>324 325 <div class="transport">326 <div class="mode active">327 <svg width="44" height="44" viewBox="0 0 24 24">328 <rect x="3" y="8" width="18" height="7" rx="2" fill="none" stroke="#fff" stroke-width="2"/>329 <circle cx="7" cy="18" r="2" fill="#fff"/>330 <circle cx="17" cy="18" r="2" fill="#fff"/>331 </svg>332 </div>333 <div class="mode">334 <svg width="44" height="44" viewBox="0 0 24 24">335 <rect x="5" y="6" width="14" height="12" rx="2" fill="none" stroke="#c7d3dc" stroke-width="2"/>336 <circle cx="9" cy="18" r="2" fill="#c7d3dc"/>337 <circle cx="15" cy="18" r="2" fill="#c7d3dc"/>338 </svg>339 </div>340 <div class="mode">341 <svg width="44" height="44" viewBox="0 0 24 24">342 <path d="M8 5l4 4M12 9l4 10M6 13l6 1" stroke="#c7d3dc" stroke-width="2" fill="none" stroke-linecap="round"/>343 </svg>344 </div>345 <div class="mode">346 <svg width="44" height="44" viewBox="0 0 24 24">347 <circle cx="7" cy="17" r="3" fill="none" stroke="#c7d3dc" stroke-width="2"/>348 <circle cx="17" cy="17" r="3" fill="none" stroke="#c7d3dc" stroke-width="2"/>349 <path d="M8 14l6-4 2 4" stroke="#c7d3dc" stroke-width="2" fill="none"/>350 </svg>351 </div>352 <div class="mode">353 <svg width="44" height="44" viewBox="0 0 24 24">354 <path d="M12 3a3 3 0 1 1 0 6 3 3 0 0 1 0-6zM6 21l3-7h6l3 7" stroke="#c7d3dc" stroke-width="2" fill="none"/>355 </svg>356 </div>357 </div>358 <div class="mode-bar"><div class="active-line"></div></div>359 360 <div class="prefs">Route preferences</div>361 362 <div class="card">363 <div class="time">36 min</div>364 <div class="delay">incl. 11 min traffic delay</div>365 <div class="minor">9.2 mi</div>366 <div class="minor">via Siris Road</div>367 <div class="pill">368 <svg width="26" height="26" viewBox="0 0 24 24">369 <rect x="4" y="8" width="16" height="7" rx="2" fill="none" stroke="#fff" stroke-width="2"/>370 <circle cx="8" cy="18" r="2" fill="#fff"/>371 <circle cx="16" cy="18" r="2" fill="#fff"/>372 </svg>373 Car374 </div>375 </div>376 377 <div class="go-btn">378 <svg width="48" height="48" viewBox="0 0 24 24">379 <path d="M12 3l7 9-7 9-7-9z" fill="none" stroke="#0c2840" stroke-width="2"/>380 </svg>381 </div>382 </div>383 384 <div class="gesture"></div>385</div>386</body>387</html>