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>Directions UI Mock</title>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: #202124;17 }18 19 /* Status bar */20 .statusbar {21 position: absolute;22 top: 0; left: 0;23 width: 100%;24 height: 110px;25 background: #fff;26 display: flex;27 align-items: center;28 padding: 0 36px;29 box-sizing: border-box;30 }31 .status-left { font-size: 36px; font-weight: 600; color: #333; }32 .status-right { margin-left: auto; display: flex; gap: 26px; align-items: center; }33 .icon-24 { width: 48px; height: 48px; }34 35 /* Search panel */36 .search-panel {37 position: absolute;38 top: 110px; left: 0;39 width: 100%;40 background: #fff;41 padding: 0 36px 24px;42 box-sizing: border-box;43 border-bottom: 1px solid #eee;44 }45 .search-top {46 display: flex;47 align-items: center;48 gap: 28px;49 margin-bottom: 24px;50 }51 .circle-indicator {52 width: 42px; height: 42px; border-radius: 50%;53 border: 2px solid #9e9e9e;54 }55 .input-stack { width: 900px; }56 .search-input {57 height: 110px;58 background: #fafafa;59 border: 1px solid #e0e0e0;60 border-radius: 24px;61 display: flex;62 align-items: center;63 padding: 0 28px;64 box-sizing: border-box;65 font-size: 44px;66 color: #3c4043;67 }68 .search-input + .search-input { margin-top: 18px; }69 .input-icon {70 width: 54px; height: 54px; margin-right: 18px;71 display: inline-flex; align-items: center; justify-content: center;72 }73 .kebab { margin-left: auto; }74 75 /* Modes row */76 .modes {77 margin-top: 28px;78 display: flex;79 align-items: center;80 gap: 34px;81 padding-left: 96px;82 }83 .mode {84 display: inline-flex;85 align-items: center;86 gap: 16px;87 color: #5f6368;88 font-size: 40px;89 }90 .chip {91 padding: 16px 28px;92 border-radius: 26px;93 border: 1px solid #dadce0;94 background: #fff;95 font-weight: 600;96 color: #3c4043;97 }98 .chip.blue {99 background: #e8f0fe;100 border-color: #a8c1ff;101 color: #1a73e8;102 }103 104 /* Map area as image placeholder */105 .map-area {106 position: absolute;107 top: 400px; left: 0;108 width: 100%;109 height: 1540px;110 background: #E0E0E0;111 border-top: 1px solid #BDBDBD;112 border-bottom: 1px solid #BDBDBD;113 display: flex;114 align-items: center;115 justify-content: center;116 color: #757575;117 font-size: 42px;118 letter-spacing: 0.2px;119 }120 121 /* Overlay chips on map */122 .overlay {123 position: absolute;124 border-radius: 22px;125 box-shadow: 0 6px 16px rgba(0,0,0,0.15);126 display: flex;127 align-items: center;128 gap: 18px;129 padding: 18px 26px;130 font-size: 42px;131 }132 .overlay.walk-blue {133 background: #2962FF;134 color: #fff;135 }136 .overlay.white {137 background: #fff;138 color: #3c4043;139 }140 .mini-image {141 position: absolute;142 bottom: 260px; left: 48px;143 width: 320px; height: 180px;144 background: #E0E0E0;145 border: 1px solid #BDBDBD;146 display: flex; align-items: center; justify-content: center;147 color: #757575; font-size: 34px;148 }149 150 /* Floating controls */151 .fab {152 position: absolute;153 right: 42px;154 width: 120px; height: 120px;155 background: #fff;156 border-radius: 60px;157 box-shadow: 0 6px 14px rgba(0,0,0,0.15);158 display: flex; align-items: center; justify-content: center;159 border: 1px solid #e0e0e0;160 }161 .fab.stack-top { top: 760px; }162 .fab.stack-mid { top: 900px; }163 .fab.locate { bottom: 540px; }164 .scale {165 position: absolute;166 bottom: 600px; right: 260px;167 font-size: 34px; color: #5f6368;168 background: rgba(255,255,255,0.95);169 padding: 12px 16px; border-radius: 16px; border: 1px solid #e0e0e0;170 }171 172 /* Red pin marker */173 .pin {174 position: absolute;175 top: 520px; left: 120px;176 width: 44px; height: 44px;177 background: #d93025;178 border-radius: 50% 50% 50% 0;179 transform: rotate(-45deg);180 box-shadow: 0 6px 10px rgba(0,0,0,0.2);181 }182 .pin::after {183 content: "";184 position: absolute; width: 18px; height: 18px; background: #fff; border-radius: 50%;185 top: 12px; left: 12px;186 }187 188 /* Bottom sheet */189 .sheet {190 position: absolute;191 left: 0; bottom: 0;192 width: 100%;193 height: 460px;194 background: #fff;195 border-top-left-radius: 28px;196 border-top-right-radius: 28px;197 box-shadow: 0 -8px 18px rgba(0,0,0,0.12);198 padding: 24px 40px 40px;199 box-sizing: border-box;200 }201 .grabber {202 width: 120px; height: 14px; background: #e0e0e0; border-radius: 8px;203 margin: 0 auto 28px;204 }205 .sheet-title {206 font-size: 48px; font-weight: 700; color: #202124;207 }208 .sheet-sub {209 margin-top: 10px;210 font-size: 38px; color: #5f6368;211 }212 .buttons {213 margin-top: 36px;214 display: flex; gap: 28px;215 }216 .btn {217 height: 110px; padding: 0 42px; border-radius: 56px;218 display: inline-flex; align-items: center; gap: 18px;219 font-size: 42px; font-weight: 700; border: 1px solid #dadce0; color: #1a73e8; background: #fff;220 }221 .btn.primary { background: #1a73e8; color: #fff; border-color: #1a73e8; }222</style>223</head>224<body>225<div id="render-target">226 227 <!-- Status bar -->228 <div class="statusbar">229 <div class="status-left">7:01</div>230 <div class="status-right">231 <!-- simple status glyphs -->232 <svg class="icon-24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="#777" stroke-width="2"/><circle cx="12" cy="12" r="3" fill="#777"/></svg>233 <svg class="icon-24" viewBox="0 0 24 24"><path d="M10 20h4v-2H10v2zM3 7l9-5 9 5v6c0 4-2 7-9 9-7-2-9-5-9-9V7z" fill="#777"/></svg>234 <svg class="icon-24" viewBox="0 0 24 24"><circle cx="10" cy="10" r="7" fill="none" stroke="#777" stroke-width="2"/><line x1="15" y1="15" x2="22" y2="22" stroke="#777" stroke-width="2"/></svg>235 <svg class="icon-24" viewBox="0 0 24 24"><rect x="4" y="3" width="16" height="18" rx="2" fill="none" stroke="#777" stroke-width="2"/><rect x="6" y="5" width="12" height="12" fill="#777"/></svg>236 <span style="font-size:40px;color:#777;">•</span>237 <svg class="icon-24" viewBox="0 0 24 24"><path d="M12 2l7 7h-4v7h-6V9H5l7-7z" fill="#777"/></svg>238 <svg class="icon-24" viewBox="0 0 24 24"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-5h18V6H3v2z" fill="#777"/></svg>239 <svg class="icon-24" viewBox="0 0 24 24"><path d="M4 8h14v10H4z" fill="none" stroke="#777" stroke-width="2"/><rect x="18" y="10" width="2" height="6" fill="#777"/></svg>240 </div>241 </div>242 243 <!-- Search panel -->244 <div class="search-panel">245 <div class="search-top">246 <!-- Back arrow -->247 <svg class="icon-24" viewBox="0 0 48 48">248 <path d="M30 10 L12 24 L30 38" fill="none" stroke="#5f6368" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>249 </svg>250 <div class="circle-indicator"></div>251 <div class="input-stack">252 <div class="search-input">253 <span style="color:#3c4043;">Work</span>254 <svg class="icon-24 kebab" viewBox="0 0 24 24">255 <circle cx="12" cy="4" r="2" fill="#777"/><circle cx="12" cy="12" r="2" fill="#777"/><circle cx="12" cy="20" r="2" fill="#777"/>256 </svg>257 </div>258 <div class="search-input">259 <div class="input-icon">260 <svg viewBox="0 0 24 24">261 <path d="M12 2C8.7 2 6 4.7 6 8c0 5 6 12 6 12s6-7 6-12c0-3.3-2.7-6-6-6zm0 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="#e53935"/>262 </svg>263 </div>264 <span>Westerpark</span>265 <svg class="icon-24 kebab" viewBox="0 0 24 24">266 <path d="M7 17l5-5 5 5M7 7h10" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>267 </svg>268 </div>269 </div>270 </div>271 272 <!-- Modes row -->273 <div class="modes">274 <div class="mode">275 <svg class="icon-24" viewBox="0 0 24 24"><circle cx="6" cy="18" r="4" fill="none" stroke="#5f6368" stroke-width="2"/><circle cx="18" cy="18" r="4" fill="none" stroke="#5f6368" stroke-width="2"/><path d="M6 18l5-6 3 2 4 4" stroke="#5f6368" stroke-width="2" fill="none"/></svg>276 <span>—</span>277 </div>278 <div class="mode">279 <svg class="icon-24" viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="12" rx="2" fill="none" stroke="#5f6368" stroke-width="2"/><circle cx="8" cy="18" r="2" fill="#5f6368"/><circle cx="16" cy="18" r="2" fill="#5f6368"/></svg>280 <span>16 min</span>281 </div>282 <div class="chip blue">283 <svg class="icon-24" viewBox="0 0 24 24"><circle cx="12" cy="6" r="2" fill="#1a73e8"/><path d="M8 20l2-6 2 2 4 4" stroke="#1a73e8" stroke-width="2" fill="none"/></svg>284 <span>20 min</span>285 </div>286 <div class="mode">287 <svg class="icon-24" viewBox="0 0 24 24"><path d="M7 8l4 2 2-2 4 5" stroke="#5f6368" stroke-width="2" fill="none"/><circle cx="9" cy="18" r="3" fill="none" stroke="#5f6368" stroke-width="2"/><circle cx="18" cy="18" r="3" fill="none" stroke="#5f6368" stroke-width="2"/></svg>288 <span>7 min</span>289 </div>290 <div class="mode">291 <svg class="icon-24" viewBox="0 0 24 24"><circle cx="6" cy="18" r="3" fill="none" stroke="#5f6368" stroke-width="2"/><circle cx="18" cy="18" r="3" fill="none" stroke="#5f6368" stroke-width="2"/><path d="M7 12h5l3 3" stroke="#5f6368" stroke-width="2" fill="none"/></svg>292 <span>7 min</span>293 </div>294 </div>295 </div>296 297 <!-- Map placeholder -->298 <div class="map-area">[IMG: Map of Amsterdam with walking route and transit stops]</div>299 300 <!-- Red pin -->301 <div class="pin"></div>302 303 <!-- Map overlays -->304 <div class="overlay walk-blue" style="left: 300px; top: 1080px;">305 <svg class="icon-24" viewBox="0 0 24 24"><circle cx="12" cy="6" r="2" fill="#fff"/><path d="M7 20l3-6 2 2 4 4" stroke="#fff" stroke-width="2" fill="none"/></svg>306 <span>20 min</span>307 </div>308 <div class="overlay white" style="left: 720px; top: 920px;">309 <svg class="icon-24" viewBox="0 0 24 24"><circle cx="12" cy="6" r="2" fill="#1a73e8"/><path d="M7 20l3-6 2 2 4 4" stroke="#1a73e8" stroke-width="2" fill="none"/></svg>310 <span>24 min</span>311 </div>312 <div class="overlay white" style="left: 640px; top: 1240px;">313 <svg class="icon-24" viewBox="0 0 24 24"><circle cx="12" cy="6" r="2" fill="#1a73e8"/><path d="M7 20l3-6 2 2 4 4" stroke="#1a73e8" stroke-width="2" fill="none"/></svg>314 <span>22 min</span>315 </div>316 317 <!-- Mini street view preview -->318 <div class="mini-image">[IMG: Street View Preview]</div>319 320 <!-- Floating buttons stack -->321 <div class="fab stack-top">322 <!-- Layers icon -->323 <svg viewBox="0 0 24 24" width="60" height="60">324 <path d="M12 3l9 5-9 5-9-5 9-5z" fill="#1a73e8"/>325 <path d="M3 12l9 5 9-5" fill="none" stroke="#1a73e8" stroke-width="2"/>326 </svg>327 </div>328 <div class="fab stack-mid">329 <!-- Search icon -->330 <svg viewBox="0 0 24 24" width="60" height="60">331 <circle cx="10" cy="10" r="6" fill="none" stroke="#1a73e8" stroke-width="2"/>332 <line x1="15" y1="15" x2="21" y2="21" stroke="#1a73e8" stroke-width="2"/>333 </svg>334 </div>335 <div class="fab locate">336 <!-- Target icon -->337 <svg viewBox="0 0 24 24" width="60" height="60">338 <circle cx="12" cy="12" r="7" fill="none" stroke="#1a73e8" stroke-width="2"/>339 <line x1="12" y1="2" x2="12" y2="6" stroke="#1a73e8" stroke-width="2"/>340 <line x1="12" y1="18" x2="12" y2="22" stroke="#1a73e8" stroke-width="2"/>341 <line x1="2" y1="12" x2="6" y2="12" stroke="#1a73e8" stroke-width="2"/>342 <line x1="18" y1="12" x2="22" y2="12" stroke="#1a73e8" stroke-width="2"/>343 <circle cx="12" cy="12" r="2" fill="#1a73e8"/>344 </svg>345 </div>346 347 <!-- Scale text -->348 <div class="scale">500 ft | 200 m</div>349 350 <!-- Bottom sheet with route detail -->351 <div class="sheet">352 <div class="grabber"></div>353 <div class="sheet-title">20 min (1.4 km) <span style="font-weight:400;color:#5f6368;">Mostly flat</span></div>354 <div class="sheet-sub">via Van Limburg Stirumstraat</div>355 <div class="buttons">356 <div class="btn primary">357 <svg class="icon-24" viewBox="0 0 24 24">358 <path d="M5 12l5 5L19 7" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>359 </svg>360 <span>Preview</span>361 </div>362 <div class="btn">363 <svg class="icon-24" viewBox="0 0 24 24">364 <path d="M4 6h16M4 12h16M4 18h10" stroke="#1a73e8" stroke-width="2" fill="none" stroke-linecap="round"/>365 </svg>366 <span>Steps</span>367 </div>368 </div>369 </div>370 371</div>372</body>373</html>