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<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #FFFFFF;14 font-family: Arial, Helvetica, sans-serif;15 color: #333;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 96px;25 background: #fff;26 display: flex;27 align-items: center;28 padding: 0 32px;29 box-sizing: border-box;30 color: #616161;31 font-size: 34px;32 }33 .status-left { flex: 1; }34 .status-right {35 display: flex;36 gap: 24px;37 align-items: center;38 }39 .sb-icon { width: 32px; height: 32px; }40 41 /* Top search area */42 .top-area {43 position: absolute;44 top: 96px;45 left: 0;46 width: 1080px;47 padding: 24px 32px 16px;48 box-sizing: border-box;49 background: #fff;50 }51 .top-row {52 display: flex;53 align-items: flex-start;54 gap: 24px;55 }56 .back-btn {57 width: 60px;58 height: 60px;59 display: flex;60 align-items: center;61 justify-content: center;62 }63 .fields {64 flex: 1;65 position: relative;66 }67 .swap-btn {68 width: 64px;69 height: 120px;70 display: flex;71 align-items: center;72 justify-content: center;73 }74 .field {75 height: 96px;76 border: 1px solid #E0E0E0;77 border-radius: 24px;78 display: flex;79 align-items: center;80 padding: 0 24px;81 box-sizing: border-box;82 background: #FAFAFA;83 color: #757575;84 font-size: 36px;85 }86 .field + .field { margin-top: 18px; }87 .field .leading {88 width: 40px;89 height: 40px;90 margin-right: 16px;91 display: flex;92 align-items: center;93 justify-content: center;94 }95 .dots {96 position: absolute;97 left: -48px;98 top: 110px;99 display: flex;100 flex-direction: column;101 gap: 8px;102 align-items: center;103 }104 .dot {105 width: 8px;106 height: 8px;107 background: #BDBDBD;108 border-radius: 50%;109 }110 111 /* Mode selector */112 .modes {113 margin-top: 24px;114 display: flex;115 gap: 60px;116 align-items: center;117 padding-left: 96px; /* aligns under fields */118 }119 .mode {120 width: 96px;121 height: 96px;122 border-radius: 28px;123 background: #F5F5F5;124 border: 1px solid #E0E0E0;125 display: flex;126 align-items: center;127 justify-content: center;128 }129 .mode.active {130 background: #E8F0FE;131 border-color: #C6DAFF;132 }133 .mode svg { width: 48px; height: 48px; fill: #616161; }134 .mode.active svg { fill: #1A73E8; }135 136 /* List */137 .list {138 position: absolute;139 top: 360px;140 left: 0;141 width: 1080px;142 padding: 0 32px;143 box-sizing: border-box;144 }145 .list-item {146 display: flex;147 align-items: center;148 padding: 28px 0;149 }150 .list-sep {151 height: 2px;152 background: #E0E0E0;153 margin-left: 144px;154 }155 .li-icon-wrap {156 width: 112px;157 display: flex;158 align-items: center;159 justify-content: center;160 }161 .li-icon-circle {162 width: 72px;163 height: 72px;164 border-radius: 50%;165 background: #ECEFF1;166 border: 1px solid #D0D0D0;167 display: flex;168 align-items: center;169 justify-content: center;170 }171 .li-icon-blue {172 background: #E8F0FE;173 border-color: #C6DAFF;174 }175 .li-text {176 flex: 1;177 }178 .li-title {179 font-size: 36px;180 color: #3C4043;181 margin-bottom: 8px;182 }183 .li-sub {184 font-size: 30px;185 color: #777;186 }187 188 .more-link {189 text-align: center;190 color: #1A73E8;191 font-size: 34px;192 margin-top: 24px;193 }194 195 /* Bottom gesture bar */196 .gesture {197 position: absolute;198 bottom: 30px;199 left: 50%;200 transform: translateX(-50%);201 width: 240px;202 height: 12px;203 background: #C7C7C7;204 border-radius: 6px;205 }206</style>207</head>208<body>209<div id="render-target">210 <!-- Status bar -->211 <div class="status-bar">212 <div class="status-left">6:59</div>213 <div class="status-right">214 <!-- Simple placeholder icons -->215 <svg class="sb-icon" viewBox="0 0 24 24">216 <circle cx="12" cy="12" r="10" fill="#9E9E9E"/>217 </svg>218 <svg class="sb-icon" viewBox="0 0 24 24">219 <rect x="3" y="7" width="18" height="10" rx="2" fill="#9E9E9E"/>220 </svg>221 <svg class="sb-icon" viewBox="0 0 24 24">222 <path d="M6 18h12a2 2 0 0 0 2-2V8l-8 5-8-5v8a2 2 0 0 0 2 2z" fill="#9E9E9E"/>223 </svg>224 <svg class="sb-icon" viewBox="0 0 24 24">225 <path d="M5 20h14a3 3 0 0 0 3-3V7H2v10a3 3 0 0 0 3 3z" fill="#9E9E9E"/>226 </svg>227 </div>228 </div>229 230 <!-- Top area with search fields -->231 <div class="top-area">232 <div class="top-row">233 <div class="back-btn">234 <svg width="40" height="40" viewBox="0 0 24 24">235 <path d="M15 6l-6 6 6 6" stroke="#5F6368" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>236 </svg>237 </div>238 239 <div class="fields">240 <div class="field">241 <div class="leading">242 <svg viewBox="0 0 24 24">243 <circle cx="12" cy="12" r="6" fill="#BDBDBD"/>244 </svg>245 </div>246 <span>Choose start location</span>247 </div>248 <div class="field" style="color:#3C4043; background:#fff;">249 <div class="leading">250 <svg viewBox="0 0 24 24">251 <path d="M12 2c-4.4 0-8 3.3-8 7.4 0 5.3 7.2 12.3 7.6 12.7.2.2.6.2.8 0 .4-.4 7.6-7.4 7.6-12.7C20 5.3 16.4 2 12 2zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" fill="#D93025"/>252 </svg>253 </div>254 <span>Westerpark</span>255 </div>256 257 <!-- vertical dots between arrow and fields -->258 <div class="dots">259 <div class="dot"></div>260 <div class="dot"></div>261 <div class="dot"></div>262 </div>263 </div>264 265 <div class="swap-btn">266 <svg width="40" height="120" viewBox="0 0 24 72">267 <path d="M7 18l5-5 5 5M7 54l5 5 5-5" stroke="#5F6368" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>268 <path d="M12 14v40" stroke="#5F6368" stroke-width="1" opacity="0.3"/>269 </svg>270 </div>271 </div>272 273 <!-- Mode selector -->274 <div class="modes">275 <div class="mode active">276 <svg viewBox="0 0 24 24">277 <path d="M5 11l2-4h10l2 4v6h-2v-2H7v2H5v-6zm3 0h8l-1-2H9l-1 2z" />278 </svg>279 </div>280 <div class="mode">281 <svg viewBox="0 0 24 24">282 <path d="M4 16l2-6h12l2 6H4zm6-9a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />283 </svg>284 </div>285 <div class="mode">286 <svg viewBox="0 0 24 24">287 <path d="M3 20h18v-2H3v2zm2-4h14l-2-10H7l-2 10z" />288 </svg>289 </div>290 <div class="mode">291 <svg viewBox="0 0 24 24">292 <path d="M12 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm-6 14h12l-3-6-3 3-3-3-3 6z" />293 </svg>294 </div>295 </div>296 </div>297 298 <!-- List of places -->299 <div class="list">300 <!-- Work -->301 <div class="list-item">302 <div class="li-icon-wrap">303 <div class="li-icon-circle li-icon-blue">304 <svg width="40" height="40" viewBox="0 0 24 24">305 <path d="M9 6h6v2h4v10H5V8h4V6zm0 4v8h6v-8H9z" fill="#1A73E8"/>306 </svg>307 </div>308 </div>309 <div class="li-text">310 <div class="li-title">Work</div>311 <div class="li-sub">Westerstraat 21, Amsterdam, Netherlands</div>312 </div>313 </div>314 <div class="list-sep"></div>315 316 <!-- Noorderlicht Café -->317 <div class="list-item">318 <div class="li-icon-wrap">319 <div class="li-icon-circle">320 <svg width="40" height="40" viewBox="0 0 24 24">321 <circle cx="6" cy="12" r="3" fill="#9E9E9E"/>322 <circle cx="12" cy="6" r="3" fill="#9E9E9E"/>323 <circle cx="18" cy="12" r="3" fill="#9E9E9E"/>324 <path d="M7 12l5-6 5 6" stroke="#9E9E9E" stroke-width="2" fill="none" stroke-linecap="round"/>325 </svg>326 </div>327 </div>328 <div class="li-text">329 <div class="li-title">Noorderlicht Café</div>330 <div class="li-sub">NDSM-Plein, Amsterdam, Netherlands</div>331 </div>332 </div>333 <div class="list-sep"></div>334 335 <!-- Flevopark -->336 <div class="list-item">337 <div class="li-icon-wrap">338 <div class="li-icon-circle">339 <svg width="40" height="40" viewBox="0 0 24 24">340 <circle cx="12" cy="12" r="9" stroke="#9E9E9E" stroke-width="2" fill="none"/>341 <path d="M12 7v6l4 2" stroke="#9E9E9E" stroke-width="2" fill="none" stroke-linecap="round"/>342 </svg>343 </div>344 </div>345 <div class="li-text">346 <div class="li-title">Flevopark</div>347 <div class="li-sub">Netherlands</div>348 </div>349 </div>350 <div class="list-sep"></div>351 352 <!-- Villa Care -->353 <div class="list-item">354 <div class="li-icon-wrap">355 <div class="li-icon-circle">356 <svg width="40" height="40" viewBox="0 0 24 24">357 <circle cx="12" cy="12" r="9" stroke="#9E9E9E" stroke-width="2" fill="none"/>358 <path d="M12 7v6l4 2" stroke="#9E9E9E" stroke-width="2" fill="none" stroke-linecap="round"/>359 </svg>360 </div>361 </div>362 <div class="li-text">363 <div class="li-title">Villa Care - Villa onderhoud</div>364 <div class="li-sub">Westerstraat, Amsterdam, Netherlands</div>365 </div>366 </div>367 <div class="list-sep"></div>368 369 <!-- VVV Gouda -->370 <div class="list-item">371 <div class="li-icon-wrap">372 <div class="li-icon-circle">373 <svg width="40" height="40" viewBox="0 0 24 24">374 <circle cx="12" cy="12" r="9" stroke="#9E9E9E" stroke-width="2" fill="none"/>375 <path d="M12 7v6l4 2" stroke="#9E9E9E" stroke-width="2" fill="none" stroke-linecap="round"/>376 </svg>377 </div>378 </div>379 <div class="li-text">380 <div class="li-title">VVV Gouda</div>381 <div class="li-sub">Markt, Gouda, Netherlands</div>382 </div>383 </div>384 <div class="list-sep"></div>385 386 <!-- Gouda -->387 <div class="list-item">388 <div class="li-icon-wrap">389 <div class="li-icon-circle">390 <svg width="40" height="40" viewBox="0 0 24 24">391 <circle cx="12" cy="12" r="9" stroke="#9E9E9E" stroke-width="2" fill="none"/>392 <path d="M12 7v6l4 2" stroke="#9E9E9E" stroke-width="2" fill="none" stroke-linecap="round"/>393 </svg>394 </div>395 </div>396 <div class="li-text">397 <div class="li-title">Gouda</div>398 <div class="li-sub">Netherlands</div>399 </div>400 </div>401 <div class="list-sep"></div>402 403 <!-- Hawa Mahal -->404 <div class="list-item">405 <div class="li-icon-wrap">406 <div class="li-icon-circle">407 <svg width="40" height="40" viewBox="0 0 24 24">408 <circle cx="12" cy="12" r="9" stroke="#9E9E9E" stroke-width="2" fill="none"/>409 <path d="M12 7v6l4 2" stroke="#9E9E9E" stroke-width="2" fill="none" stroke-linecap="round"/>410 </svg>411 </div>412 </div>413 <div class="li-text">414 <div class="li-title">Hawa Mahal</div>415 <div class="li-sub">Hawa Mahal Road, Badi Choupad, Jaipur, Rajasthan</div>416 </div>417 </div>418 <div class="list-sep"></div>419 420 <!-- Prince kaushik home -->421 <div class="list-item">422 <div class="li-icon-wrap">423 <div class="li-icon-circle">424 <svg width="40" height="40" viewBox="0 0 24 24">425 <circle cx="12" cy="12" r="9" stroke="#9E9E9E" stroke-width="2" fill="none"/>426 <path d="M12 7v6l4 2" stroke="#9E9E9E" stroke-width="2" fill="none" stroke-linecap="round"/>427 </svg>428 </div>429 </div>430 <div class="li-text">431 <div class="li-title">Prince kaushik home</div>432 <div class="li-sub">992W+6WH, Tigaon, Haryana</div>433 </div>434 </div>435 436 <div class="more-link">More from recent history</div>437 </div>438 439 <!-- Bottom gesture bar -->440 <div class="gesture"></div>441</div>442</body>443</html>