GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Directions UI Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #ffffff;15 font-family: Arial, Helvetica, sans-serif;16 color: #222;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0;23 left: 0;24 width: 1080px;25 height: 96px;26 display: flex;27 align-items: center;28 padding: 0 30px;29 box-sizing: border-box;30 color: #5f6368;31 font-size: 32px;32 }33 .status-bar .right {34 margin-left: auto;35 display: flex;36 align-items: center;37 gap: 24px;38 }39 .status-icon {40 width: 32px; height: 32px;41 }42 43 /* Search / input area */44 .top-area {45 position: absolute;46 top: 96px;47 left: 0;48 width: 1080px;49 padding: 24px 36px 18px 36px;50 box-sizing: border-box;51 background: #fff;52 }53 .back-row {54 display: flex;55 align-items: center;56 gap: 24px;57 }58 .circle-btn {59 width: 72px; height: 72px;60 border-radius: 50%;61 background: #F1F3F4;62 display: flex; justify-content: center; align-items: center;63 }64 .input-stack {65 margin-top: 18px;66 display: flex;67 flex-direction: column;68 gap: 18px;69 width: 100%;70 }71 .pill-input {72 position: relative;73 height: 110px;74 border: 1px solid #DADCE0;75 border-radius: 22px;76 background: #fff;77 display: flex;78 align-items: center;79 padding: 0 24px 0 24px;80 box-sizing: border-box;81 }82 .pill-input .icon-left {83 width: 48px; height: 48px; margin-right: 20px;84 display: flex; align-items: center; justify-content: center;85 }86 .pill-input .input-text {87 font-size: 40px; color: #1a73e8;88 }89 .pill-input .input-text.gray { color: #3c4043; }90 .pill-input .right-actions {91 margin-left: auto;92 display: flex; align-items: center; gap: 26px;93 }94 95 /* Transport chips */96 .modes {97 margin-top: 22px;98 display: flex;99 align-items: center;100 gap: 44px;101 font-size: 34px;102 color: #3c4043;103 }104 .mode {105 display: flex; align-items: center; gap: 12px;106 }107 .mode .svg { width: 44px; height: 44px; }108 .chip-blue {109 padding: 18px 26px;110 border-radius: 28px;111 background: #E8F0FE;112 color: #1A73E8;113 font-weight: bold;114 }115 116 /* Map placeholder */117 .map {118 position: absolute;119 top: 360px;120 left: 0;121 width: 1080px;122 height: 1380px;123 background: #E0E0E0;124 border-top: 1px solid #BDBDBD;125 border-bottom: 1px solid #BDBDBD;126 box-sizing: border-box;127 }128 .map .label {129 position: absolute; top: 20px; left: 20px;130 color: #757575; font-size: 28px;131 }132 133 /* Route dots */134 .route {135 position: absolute;136 left: 520px;137 top: 120px;138 display: flex;139 flex-direction: column;140 gap: 24px;141 }142 .dot {143 width: 22px; height: 22px; border-radius: 50%;144 background: #1A73E8; box-shadow: 0 0 0 6px rgba(26,115,232,0.15);145 }146 .dot.gray { background: #bdbdbd; box-shadow: 0 0 0 6px rgba(0,0,0,0.08); }147 148 /* Red pin near top */149 .red-pin {150 position: absolute;151 top: 190px;152 left: 580px;153 width: 44px; height: 60px;154 }155 156 /* Overlay chips on map */157 .chip {158 position: absolute;159 background: #fff;160 color: #3c4043;161 border-radius: 18px;162 box-shadow: 0 2px 6px rgba(0,0,0,0.2);163 padding: 18px 24px;164 font-size: 36px;165 }166 .chip.blue {167 background: #1A73E8; color: #fff; font-weight: bold;168 }169 170 /* Floating round buttons */171 .fab {172 position: absolute;173 width: 120px; height: 120px;174 border-radius: 60px;175 background: #fff;176 box-shadow: 0 4px 12px rgba(0,0,0,0.25);177 display: flex; align-items: center; justify-content: center;178 }179 .fab.small {180 width: 100px; height: 100px; border-radius: 50px;181 }182 183 /* Street view thumbnail */184 .thumb {185 position: absolute;186 left: 60px;187 bottom: 260px;188 width: 340px; height: 220px;189 background: #E0E0E0; border: 1px solid #BDBDBD;190 display: flex; align-items: center; justify-content: center;191 color: #757575; font-size: 26px;192 border-radius: 12px;193 overflow: hidden;194 }195 196 /* Bottom sheet */197 .bottom-sheet {198 position: absolute;199 left: 0;200 bottom: 0;201 width: 1080px;202 height: 620px;203 background: #fff;204 border-top-left-radius: 28px;205 border-top-right-radius: 28px;206 box-shadow: 0 -6px 20px rgba(0,0,0,0.25);207 }208 .drag-handle {209 position: absolute; top: 16px; left: 50%; transform: translateX(-50%);210 width: 140px; height: 10px; border-radius: 5px; background: #E0E0E0;211 }212 .sheet-content {213 position: absolute; top: 54px; left: 36px; right: 36px;214 }215 .summary {216 font-size: 54px; font-weight: 600; color: #202124;217 }218 .alt {219 font-size: 36px; color: #5f6368; margin-left: 20px;220 }221 .via {222 margin-top: 14px; font-size: 36px; color: #5f6368;223 }224 .actions {225 margin-top: 40px;226 display: flex; gap: 26px;227 }228 .btn {229 padding: 24px 40px; border-radius: 28px; font-size: 40px; cursor: default;230 }231 .btn.primary { background: #1A73E8; color: #fff; }232 .btn.outline { border: 2px solid #1A73E8; color: #1A73E8; background: #fff; }233 234 /* Safe area bar mock */235 .home-indicator {236 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);237 width: 360px; height: 8px; border-radius: 4px; background: #cfcfcf;238 }239</style>240</head>241<body>242<div id="render-target">243 <!-- Status bar -->244 <div class="status-bar">245 <div>9:42</div>246 <div class="right">247 <svg class="status-icon" viewBox="0 0 24 24">248 <rect x="2" y="10" width="4" height="4" fill="#757575"></rect>249 <rect x="8" y="8" width="4" height="8" fill="#757575"></rect>250 <rect x="14" y="6" width="4" height="12" fill="#757575"></rect>251 </svg>252 <div>82°</div>253 <svg class="status-icon" viewBox="0 0 24 24">254 <circle cx="12" cy="12" r="4" fill="#757575"></circle>255 </svg>256 <svg class="status-icon" viewBox="0 0 24 24">257 <path d="M12 2l3 5H9l3-5zm0 20l3-5H9l3 5z" fill="#757575"></path>258 </svg>259 <svg class="status-icon" viewBox="0 0 24 24">260 <path d="M4 6h16v12H4z" stroke="#757575" stroke-width="2" fill="none"></path>261 <rect x="18" y="9" width="2" height="6" fill="#757575"></rect>262 </svg>263 </div>264 </div>265 266 <!-- Top inputs -->267 <div class="top-area">268 <div class="back-row">269 <div class="circle-btn">270 <svg width="40" height="40" viewBox="0 0 24 24">271 <path d="M15 18l-6-6 6-6" stroke="#3c4043" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>272 </svg>273 </div>274 <div style="width: 880px;"></div>275 </div>276 277 <div class="input-stack">278 <div class="pill-input">279 <div class="icon-left">280 <svg width="44" height="44" viewBox="0 0 24 24">281 <circle cx="12" cy="12" r="8" fill="#1A73E8"></circle>282 </svg>283 </div>284 <div class="input-text">Your location</div>285 <div class="right-actions">286 <svg width="32" height="32" viewBox="0 0 24 24">287 <circle cx="12" cy="5" r="2" fill="#5f6368"></circle>288 <circle cx="12" cy="12" r="2" fill="#5f6368"></circle>289 <circle cx="12" cy="19" r="2" fill="#5f6368"></circle>290 </svg>291 </div>292 </div>293 294 <div class="pill-input">295 <div class="icon-left">296 <svg width="44" height="44" viewBox="0 0 24 24">297 <path d="M12 2c3.3 0 6 2.7 6 6 0 4.5-6 12-6 12S6 12.5 6 8c0-3.3 2.7-6 6-6z" fill="#EA4335"></path>298 <circle cx="12" cy="8" r="2.5" fill="#fff"></circle>299 </svg>300 </div>301 <div class="input-text gray">Louvre Museum</div>302 <div class="right-actions">303 <svg width="32" height="32" viewBox="0 0 24 24">304 <path d="M7 7l10 10M17 7L7 17" stroke="#5f6368" stroke-width="2" stroke-linecap="round"></path>305 </svg>306 <svg width="32" height="32" viewBox="0 0 24 24">307 <circle cx="12" cy="5" r="2" fill="#5f6368"></circle>308 <circle cx="12" cy="12" r="2" fill="#5f6368"></circle>309 <circle cx="12" cy="19" r="2" fill="#5f6368"></circle>310 </svg>311 </div>312 </div>313 </div>314 315 <div class="modes">316 <div class="mode">317 <svg class="svg" viewBox="0 0 24 24">318 <rect x="4" y="7" width="16" height="8" rx="2" fill="#5f6368"></rect>319 <circle cx="7" cy="17" r="2" fill="#5f6368"></circle>320 <circle cx="17" cy="17" r="2" fill="#5f6368"></circle>321 </svg>322 <span>1 hr 37</span>323 </div>324 <div class="mode">325 <svg class="svg" viewBox="0 0 24 24">326 <circle cx="7" cy="16" r="3" stroke="#5f6368" stroke-width="2" fill="none"></circle>327 <circle cx="17" cy="16" r="3" stroke="#5f6368" stroke-width="2" fill="none"></circle>328 <path d="M7 10h6l4 6" stroke="#5f6368" stroke-width="2" fill="none"></path>329 </svg>330 <span>—</span>331 </div>332 <div class="mode">333 <svg class="svg" viewBox="0 0 24 24">334 <rect x="5" y="6" width="14" height="10" rx="2" fill="#5f6368"></rect>335 <rect x="7" y="8" width="10" height="6" fill="#fff"></rect>336 </svg>337 <span>1 hr 55</span>338 </div>339 <div class="mode chip-blue">340 <svg class="svg" viewBox="0 0 24 24">341 <path d="M12 4a2 2 0 110 4 2 2 0 010-4zm-3 8l3 2 3-2 2 6h-3l-2-3-2 3H7l2-6z" fill="#1A73E8"></path>342 </svg>343 <span>1 day</span>344 </div>345 <div class="mode">346 <svg class="svg" viewBox="0 0 24 24">347 <circle cx="7" cy="17" r="3" stroke="#5f6368" stroke-width="2" fill="none"></circle>348 <circle cx="17" cy="17" r="3" stroke="#5f6368" stroke-width="2" fill="none"></circle>349 <path d="M5 10l6 2 5-2" stroke="#5f6368" stroke-width="2" fill="none"></path>350 </svg>351 <span>7 hr</span>352 </div>353 </div>354 </div>355 356 <!-- Map area -->357 <div class="map">358 <div class="label">[IMG: Map of Paris region with walking route]</div>359 360 <!-- Red destination pin -->361 <svg class="red-pin" viewBox="0 0 24 24">362 <path d="M12 2c3.8 0 7 3.2 7 7 0 5-7 13-7 13S5 14 5 9c0-3.8 3.2-7 7-7z" fill="#EA4335"></path>363 <circle cx="12" cy="9" r="3" fill="#fff"></circle>364 </svg>365 366 <!-- Dotted route -->367 <div class="route">368 <!-- a mix of blue and gray dots to suggest the trail -->369 <div class="dot"></div><div class="dot"></div><div class="dot"></div>370 <div class="dot gray"></div><div class="dot gray"></div><div class="dot"></div>371 <div class="dot"></div><div class="dot"></div><div class="dot gray"></div>372 <div class="dot"></div><div class="dot"></div><div class="dot"></div>373 <div class="dot gray"></div><div class="dot"></div><div class="dot"></div>374 <div class="dot"></div><div class="dot gray"></div><div class="dot"></div>375 <div class="dot"></div><div class="dot"></div><div class="dot gray"></div>376 <div class="dot"></div><div class="dot"></div><div class="dot"></div>377 <div class="dot gray"></div><div class="dot"></div><div class="dot"></div>378 <div class="dot"></div>379 </div>380 381 <!-- Overlay chips -->382 <div class="chip" style="left: 120px; top: 320px;">🚶 1 d 4 hr</div>383 <div class="chip blue" style="left: 640px; top: 560px;">🚶 1 d 3 hr</div>384 385 <!-- Floating actions -->386 <div class="fab small" style="right: 40px; top: 80px;">387 <svg width="48" height="48" viewBox="0 0 24 24">388 <rect x="5" y="5" width="10" height="10" fill="#5f6368"></rect>389 <rect x="9" y="9" width="10" height="10" fill="#5f6368" opacity="0.65"></rect>390 </svg>391 </div>392 <div class="fab small" style="right: 40px; top: 360px;">393 <svg width="48" height="48" viewBox="0 0 24 24">394 <circle cx="10" cy="10" r="6" stroke="#5f6368" stroke-width="2" fill="none"></circle>395 <line x1="15" y1="15" x2="20" y2="20" stroke="#5f6368" stroke-width="2"></line>396 </svg>397 </div>398 <div class="fab" style="right: 40px; bottom: 460px;">399 <svg width="64" height="64" viewBox="0 0 24 24">400 <circle cx="12" cy="12" r="5" fill="#fbbc04"></circle>401 <path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.8 4.8l2.1 2.1M17.1 17.1l2.1 2.1M4.8 19.2l2.1-2.1M19.2 4.8l-2.1 2.1" stroke="#fbbc04" stroke-width="1.5"></path>402 </svg>403 </div>404 405 <!-- Scale indicator (simple) -->406 <div style="position:absolute; right: 180px; bottom: 520px; color:#3c4043; font-size:28px;">407 <div style="display:flex; align-items:center; gap:16px;">408 <svg width="160" height="30" viewBox="0 0 160 30">409 <line x1="0" y1="20" x2="70" y2="20" stroke="#3c4043" stroke-width="3"></line>410 <line x1="90" y1="20" x2="160" y2="20" stroke="#3c4043" stroke-width="3"></line>411 </svg>412 <span>10 mi</span><span style="margin-left:10px;">20 km</span>413 </div>414 </div>415 416 <!-- Street view thumbnail -->417 <div class="thumb">[IMG: Street View near destination]</div>418 </div>419 420 <!-- Bottom sheet -->421 <div class="bottom-sheet">422 <div class="drag-handle"></div>423 <div class="sheet-content">424 <div class="summary">425 1 d 3 hr (118 km)426 <span class="alt">↑ 390 m ↓ 472 m</span>427 </div>428 <div class="via">via D97</div>429 <div class="actions">430 <div class="btn primary">431 <svg width="44" height="44" viewBox="0 0 24 24" style="vertical-align:middle; margin-right:12px;">432 <path d="M12 2l6 10H6l6-10zm0 20a2 2 0 100-4 2 2 0 000 4z" fill="#fff"></path>433 </svg>434 Start435 </div>436 <div class="btn outline">437 <svg width="44" height="44" viewBox="0 0 24 24" style="vertical-align:middle; margin-right:12px;">438 <path d="M5 6h14v2H5zm0 5h14v2H5zm0 5h14v2H5z" fill="#1A73E8"></path>439 </svg>440 Steps441 </div>442 </div>443 </div>444 <div class="home-indicator"></div>445 </div>446</div>447</body>448</html>