GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">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: #FAFBFC;14 font-family: Arial, Helvetica, sans-serif;15 color: #222;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 96px;25 padding: 0 32px;26 box-sizing: border-box;27 display: flex;28 align-items: center;29 justify-content: space-between;30 color: #2f2f2f;31 font-size: 36px;32 }33 .status-left {34 display: flex;35 align-items: center;36 gap: 28px;37 }38 .status-right {39 display: flex;40 align-items: center;41 gap: 28px;42 }43 .status-icon {44 width: 36px;45 height: 36px;46 display: inline-flex;47 align-items: center;48 justify-content: center;49 color: #555;50 }51 52 /* Header with search */53 .header {54 position: absolute;55 top: 96px;56 left: 0;57 width: 1080px;58 padding: 24px 32px 16px 32px;59 box-sizing: border-box;60 }61 .top-controls {62 display: flex;63 align-items: center;64 gap: 18px;65 margin-bottom: 18px;66 }67 .circle-btn {68 width: 66px;69 height: 66px;70 border-radius: 33px;71 background: #FFFFFF;72 border: 1px solid #E0E0E0;73 display: flex;74 align-items: center;75 justify-content: center;76 box-shadow: 0 1px 2px rgba(0,0,0,0.06);77 }78 79 .search-stack {80 margin-left: 12px;81 margin-right: 12px;82 }83 84 .field {85 width: 900px;86 height: 110px;87 background: #FFFFFF;88 border: 1px solid #E2E5EA;89 border-radius: 22px;90 display: flex;91 align-items: center;92 padding: 0 28px;93 box-sizing: border-box;94 font-size: 40px;95 color: #1f1f1f;96 }97 .field + .field { margin-top: 20px; }98 .field .leading {99 width: 54px;100 height: 54px;101 border-radius: 27px;102 background: #F1F3F4;103 display: flex;104 align-items: center;105 justify-content: center;106 margin-right: 18px;107 }108 .placeholder {109 color: #7B8696;110 }111 112 .swap-btn {113 position: absolute;114 right: 40px;115 top: 244px;116 width: 60px;117 height: 60px;118 border-radius: 12px;119 display: flex;120 align-items: center;121 justify-content: center;122 color: #4a4a4a;123 }124 125 /* Mode selector */126 .modes {127 margin-top: 24px;128 display: flex;129 gap: 36px;130 padding-left: 140px;131 align-items: center;132 }133 .mode {134 width: 116px;135 height: 80px;136 border-radius: 18px;137 background: #FFFFFF;138 border: 1px solid #E4E7EC;139 display: flex;140 align-items: center;141 justify-content: center;142 color: #666;143 }144 .mode.active {145 background: #EAF2FF;146 color: #1A73E8;147 border-color: #CDE0FF;148 }149 150 /* List */151 .list {152 position: absolute;153 top: 440px;154 left: 0;155 width: 1080px;156 background: #FFFFFF;157 border-top: 1px solid #E7EAEE;158 }159 .item {160 display: flex;161 padding: 28px 32px;162 box-sizing: border-box;163 border-bottom: 1px solid #ECEFF3;164 align-items: center;165 gap: 28px;166 }167 .icon-pill {168 width: 86px;169 height: 86px;170 border-radius: 20px;171 background: #F4F6F8;172 border: 1px solid #E3E6EA;173 display: flex;174 align-items: center;175 justify-content: center;176 color: #6A6F78;177 }178 .icon-pill.blue {179 background: #EAF2FF;180 color: #1A73E8;181 border-color: #CFE2FF;182 }183 .texts {184 display: flex;185 flex-direction: column;186 gap: 10px;187 }188 .title {189 font-size: 44px;190 font-weight: 600;191 color: #222;192 }193 .subtitle {194 font-size: 34px;195 color: #697386;196 }197 198 /* bottom spacer */199 .spacer {200 position: absolute;201 left: 0;202 right: 0;203 bottom: 0;204 height: 980px;205 background: #F7F9FB;206 }207 208 /* simple svg defaults */209 svg { display: block; }210</style>211</head>212<body>213<div id="render-target">214 215 <!-- Status Bar -->216 <div class="status-bar">217 <div class="status-left">218 <div>5:26</div>219 <div class="status-icon">🌤️</div>220 <div>16°</div>221 <div class="status-icon">📧</div>222 <div class="status-icon">•</div>223 </div>224 <div class="status-right">225 <div class="status-icon">📍</div>226 <div class="status-icon">📶</div>227 <div class="status-icon">🔋</div>228 </div>229 </div>230 231 <!-- Header and Search -->232 <div class="header">233 <div class="top-controls">234 <div class="circle-btn">235 <!-- Back arrow -->236 <svg width="40" height="40" viewBox="0 0 24 24">237 <path d="M15 6l-6 6 6 6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>238 </svg>239 </div>240 <div class="circle-btn">241 <!-- small dot menu -->242 <svg width="40" height="40" viewBox="0 0 24 24">243 <circle cx="6" cy="12" r="2" fill="#555"/>244 <circle cx="12" cy="12" r="2" fill="#555"/>245 <circle cx="18" cy="12" r="2" fill="#555"/>246 </svg>247 </div>248 249 <div class="search-stack">250 <div class="field">251 <div class="leading">252 <svg width="32" height="32" viewBox="0 0 24 24">253 <path d="M12 3l9 7-1 1H4l-1-1 9-7zM5 11v9h5v-6h4v6h5v-9" fill="#8A8D92"/>254 </svg>255 </div>256 <div>Home</div>257 </div>258 <div class="field" style="position: relative;">259 <div class="leading">260 <!-- location pin -->261 <svg width="32" height="32" viewBox="0 0 24 24">262 <path d="M12 2c-4.4 0-8 3.6-8 8 0 5.9 8 12 8 12s8-6.1 8-12c0-4.4-3.6-8-8-8zm0 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" fill="#8A8D92"/>263 </svg>264 </div>265 <div class="placeholder">Choose destination</div>266 <div class="swap-btn">267 <!-- up/down arrows -->268 <svg width="40" height="40" viewBox="0 0 24 24">269 <path d="M8 7l-3 3 3 3M8 10h12M16 17l3-3-3-3M4 14h12" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>270 </svg>271 </div>272 </div>273 274 <!-- Modes -->275 <div class="modes">276 <div class="mode active">277 <!-- Car -->278 <svg width="44" height="44" viewBox="0 0 24 24">279 <path d="M4 15v-2l2-4h12l2 4v2M6 15a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm12 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z" fill="none" stroke="#1A73E8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>280 </svg>281 </div>282 <div class="mode">283 <!-- Motorcycle -->284 <svg width="44" height="44" viewBox="0 0 24 24">285 <circle cx="6" cy="17" r="3" stroke="#666" stroke-width="2" fill="none"/>286 <circle cx="18" cy="17" r="3" stroke="#666" stroke-width="2" fill="none"/>287 <path d="M9 17h4l2-5h3" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"/>288 </svg>289 </div>290 <div class="mode">291 <!-- Train -->292 <svg width="44" height="44" viewBox="0 0 24 24">293 <rect x="5" y="4" width="14" height="12" rx="2" stroke="#666" stroke-width="2" fill="none"/>294 <circle cx="9" cy="13" r="1.5" fill="#666"/>295 <circle cx="15" cy="13" r="1.5" fill="#666"/>296 <path d="M7 20l3-3m7 3l-3-3" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"/>297 </svg>298 </div>299 <div class="mode">300 <!-- Walking -->301 <svg width="44" height="44" viewBox="0 0 24 24">302 <circle cx="12" cy="6" r="2" fill="#666"/>303 <path d="M10 21l2-5 2 3m-6-5l3-3 3 1" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>304 </svg>305 </div>306 </div>307 </div>308 </div>309 </div>310 311 <!-- List of places -->312 <div class="list">313 <div class="item">314 <div class="icon-pill blue">315 <!-- Home icon -->316 <svg width="42" height="42" viewBox="0 0 24 24">317 <path d="M12 5l8 6v8h-5v-5H9v5H4v-8l8-6z" fill="#1A73E8"/>318 </svg>319 </div>320 <div class="texts">321 <div class="title">Home</div>322 <div class="subtitle">Via Giuseppe Verdi, 18, Ivrea TO, Italy</div>323 </div>324 </div>325 326 <div class="item">327 <div class="icon-pill">328 <!-- Clock -->329 <svg width="40" height="40" viewBox="0 0 24 24">330 <circle cx="12" cy="12" r="8" stroke="#6A6F78" stroke-width="2" fill="none"/>331 <path d="M12 8v4l3 2" stroke="#6A6F78" stroke-width="2" fill="none" stroke-linecap="round"/>332 </svg>333 </div>334 <div class="texts">335 <div class="title">Ristorante Pizzeria Positano</div>336 <div class="subtitle">Via Torino, Biella BI, Italy</div>337 </div>338 </div>339 340 <div class="item">341 <div class="icon-pill">342 <!-- Clock -->343 <svg width="40" height="40" viewBox="0 0 24 24">344 <circle cx="12" cy="12" r="8" stroke="#6A6F78" stroke-width="2" fill="none"/>345 <path d="M12 8v4l3 2" stroke="#6A6F78" stroke-width="2" fill="none" stroke-linecap="round"/>346 </svg>347 </div>348 <div class="texts">349 <div class="title">Via dei Mulini</div>350 <div class="subtitle">Ivrea TO, Italy</div>351 </div>352 </div>353 354 <div class="item">355 <div class="icon-pill">356 <!-- Clock -->357 <svg width="40" height="40" viewBox="0 0 24 24">358 <circle cx="12" cy="12" r="8" stroke="#6A6F78" stroke-width="2" fill="none"/>359 <path d="M12 8v4l3 2" stroke="#6A6F78" stroke-width="2" fill="none" stroke-linecap="round"/>360 </svg>361 </div>362 <div class="texts">363 <div class="title">Via Giuseppe Verdi, 1A</div>364 <div class="subtitle">Ivrea TO, Italy</div>365 </div>366 </div>367 368 <div class="item">369 <div class="icon-pill">370 <!-- Clock -->371 <svg width="40" height="40" viewBox="0 0 24 24">372 <circle cx="12" cy="12" r="8" stroke="#6A6F78" stroke-width="2" fill="none"/>373 <path d="M12 8v4l3 2" stroke="#6A6F78" stroke-width="2" fill="none" stroke-linecap="round"/>374 </svg>375 </div>376 <div class="texts">377 <div class="title">Carrefour Express - Supermarket</div>378 <div class="subtitle">Via Aosta, Montalto Dora TO, Italy</div>379 </div>380 </div>381 </div>382 383 <!-- Bottom spacer to mimic empty area -->384 <div class="spacer"></div>385</div>386</body>387</html>