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>Transit Planner UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #2F5F74;12 border-radius: 28px;13 box-shadow: 0 8px 30px rgba(0,0,0,0.25);14 }15 16 /* Top map area */17 .map-area {18 position: absolute; top: 0; left: 0; width: 1080px; height: 470px;19 }20 .img-placeholder {21 width: 100%; height: 100%;22 background: #E0E0E0; border: 1px solid #BDBDBD;23 display: flex; align-items: center; justify-content: center;24 color: #757575; font-weight: 600;25 }26 27 /* Floating leave pill */28 .leave-pill {29 position: absolute; top: 220px; right: 32px;30 background: #3C6E86; color: #fff;31 padding: 20px 28px; border-radius: 40px;32 box-shadow: 0 6px 16px rgba(0,0,0,0.25);33 display: inline-flex; align-items: center; gap: 14px;34 font-size: 34px; font-weight: 700;35 }36 .pill-icon {37 width: 56px; height: 56px; border-radius: 28px; background: rgba(255,255,255,0.16);38 display: flex; align-items: center; justify-content: center;39 }40 .clock-icon { width: 34px; height: 34px; }41 .back-btn {42 position: absolute; top: 190px; left: 26px;43 width: 84px; height: 84px; border-radius: 42px;44 background: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center;45 box-shadow: 0 4px 12px rgba(0,0,0,0.2);46 }47 .back-btn svg { width: 34px; height: 34px; }48 49 /* Location card */50 .location-card {51 position: absolute; top: 410px; left: 24px; right: 24px;52 background: #335F76; border-radius: 36px;53 box-shadow: 0 8px 18px rgba(0,0,0,0.25);54 padding: 28px;55 color: #fff;56 }57 .loc-row {58 display: flex; align-items: center; gap: 22px;59 padding: 18px 20px; background: rgba(255,255,255,0.08);60 border-radius: 24px; margin-bottom: 18px;61 }62 .loc-row:last-child { margin-bottom: 0; }63 .loc-icon {64 width: 64px; height: 64px; border-radius: 18px;65 background: rgba(255,255,255,0.16); display: flex; align-items: center; justify-content: center;66 }67 .loc-title { font-size: 38px; font-weight: 700; line-height: 1.2; }68 .loc-sub { font-size: 28px; opacity: 0.85; }69 .swap-indicator {70 position: absolute; right: 34px; top: 164px;71 width: 74px; height: 74px; border-radius: 20px; background: rgba(255,255,255,0.12);72 display: flex; align-items: center; justify-content: center;73 }74 75 /* Options grid card */76 .options-card {77 position: absolute; top: 680px; left: 24px; right: 24px;78 background: #FFFFFF; border-radius: 32px; box-shadow: 0 8px 18px rgba(0,0,0,0.25);79 overflow: hidden;80 }81 .opt-grid {82 display: grid; grid-template-columns: 1fr 1fr; border-top: 0; gap: 0;83 }84 .opt-cell {85 padding: 26px; border-right: 1px solid #E6E6E6; border-bottom: 1px solid #E6E6E6;86 }87 .opt-cell:nth-child(2n) { border-right: none; }88 .opt-top {89 display: flex; align-items: center; justify-content: space-between;90 margin-bottom: 12px;91 }92 .opt-meta { color: #777; font-size: 30px; font-weight: 700; }93 .opt-time { color: #6B6B6B; font-size: 30px; font-weight: 700; }94 .opt-label {95 display: flex; align-items: center; gap: 16px; font-size: 32px; color: #333; font-weight: 700;96 }97 .arrive-pill {98 display: inline-block; padding: 12px 18px; border-radius: 16px;99 background: #EAF4FF; color: #2576B8; font-size: 28px; font-weight: 800;100 margin-top: 14px;101 }102 .money { color: #1C7ED6; font-weight: 800; }103 104 /* Suggested header */105 .suggested-title {106 position: absolute; top: 1040px; left: 36px; color: #EAF1F5;107 font-size: 40px; font-weight: 800;108 }109 110 /* Suggested list */111 .suggested-list {112 position: absolute; top: 1100px; left: 24px; right: 24px;113 }114 .suggest-item {115 background: #fff; border-radius: 28px; box-shadow: 0 8px 16px rgba(0,0,0,0.18);116 padding: 24px; margin-bottom: 22px;117 }118 .row-top {119 display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;120 }121 .line-left {122 display: flex; align-items: center; gap: 18px;123 font-size: 34px; font-weight: 800; color: #3A444A;124 }125 .badge {126 background: #F0F0F0; border: 1px solid #D1D1D1; border-radius: 10px;127 padding: 6px 12px; font-weight: 800; font-size: 30px;128 }129 .price { color: #1C7ED6; font-weight: 800; font-size: 32px; }130 .minutes { color: #3A3A3A; font-size: 32px; font-weight: 800; }131 .desc { color: #7A7A7A; font-size: 28px; margin-top: 8px; }132 .arrive-right {133 margin-top: 12px; display: inline-block; padding: 12px 18px; border-radius: 14px;134 background: #EAF4FF; color: #2576B8; font-size: 28px; font-weight: 800;135 }136 137 /* Bottom mode bar */138 .mode-bar {139 position: absolute; bottom: 40px; left: 0; width: 100%;140 padding: 24px 0 34px; background: #2C5468;141 box-shadow: 0 -8px 18px rgba(0,0,0,0.2);142 }143 .mode-list {144 display: flex; justify-content: space-around; align-items: center; padding: 0 24px;145 }146 .mode {147 display: flex; flex-direction: column; align-items: center; gap: 12px; color: #DDE7EE;148 font-size: 26px; font-weight: 700;149 }150 .mode .circle {151 width: 120px; height: 120px; border-radius: 60px; background: rgba(255,255,255,0.1);152 display: flex; align-items: center; justify-content: center; border: 4px solid rgba(255,255,255,0.15);153 }154 .mode .circle.active { background: #2BC05C; border-color: #F4FFF5; }155 .home-indicator {156 position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);157 width: 320px; height: 10px; background: rgba(255,255,255,0.7); border-radius: 6px;158 }159 160 /* Simple icons */161 .svg { width: 48px; height: 48px; }162 .icon-small { width: 44px; height: 44px; }163</style>164</head>165<body>166<div id="render-target">167 168 <!-- Map -->169 <div class="map-area">170 <div class="img-placeholder">[IMG: NYC Map]</div>171 </div>172 173 <!-- Back button -->174 <div class="back-btn" aria-label="Back">175 <svg viewBox="0 0 24 24" fill="#2F5F74">176 <path d="M15.5 4.5l-8 7.5 8 7.5" stroke="#2F5F74" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>177 </svg>178 </div>179 180 <!-- Leave pill -->181 <div class="leave-pill">182 <div class="pill-icon">183 <svg class="clock-icon" viewBox="0 0 24 24" fill="none">184 <circle cx="12" cy="12" r="9" stroke="#fff" stroke-width="2"/>185 <path d="M12 6v6l4 2" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>186 </svg>187 </div>188 <span>Leave: Nov 8, 3:30 AM</span>189 </div>190 191 <!-- Location card -->192 <div class="location-card">193 <div class="loc-row">194 <div class="loc-icon">195 <svg class="svg" viewBox="0 0 24 24" fill="none">196 <rect x="5" y="4" width="14" height="14" rx="2" stroke="#fff" stroke-width="2"/>197 <line x1="8" y1="8" x2="16" y2="8" stroke="#fff" stroke-width="2"/>198 <line x1="8" y1="12" x2="16" y2="12" stroke="#fff" stroke-width="2"/>199 </svg>200 </div>201 <div>202 <div class="loc-title">Amsterdam Ave, New York, NY, USA</div>203 </div>204 </div>205 <div class="loc-row">206 <div class="loc-icon">207 <svg class="svg" viewBox="0 0 24 24" fill="none">208 <path d="M12 3a6 6 0 016 6c0 4.5-6 12-6 12S6 13.5 6 9a6 6 0 016-6z" stroke="#fff" stroke-width="2" fill="none"/>209 <circle cx="12" cy="9" r="2" fill="#fff"/>210 </svg>211 </div>212 <div>213 <div class="loc-title">La Scuola d' Italia</div>214 <div class="loc-sub">12 E 96th St, New York, NY 10128, USA</div>215 </div>216 </div>217 <div class="swap-indicator" title="Swap">218 <svg viewBox="0 0 24 24" fill="none">219 <path d="M7 17l-3-3 3-3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>220 <path d="M17 7l3 3-3 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>221 </svg>222 </div>223 </div>224 225 <!-- Options grid -->226 <div class="options-card">227 <div class="opt-grid">228 <!-- Walk -->229 <div class="opt-cell">230 <div class="opt-top">231 <div class="opt-meta">180 cal</div>232 <div class="opt-time">~44 min</div>233 </div>234 <div class="opt-label">235 <svg class="icon-small" viewBox="0 0 24 24" fill="none">236 <circle cx="12" cy="5" r="2" fill="#4C6A84"/>237 <path d="M9 21l2-6 2 3 3 3" stroke="#4C6A84" stroke-width="2" stroke-linecap="round"/>238 <path d="M9 12l3-2 3 2" stroke="#4C6A84" stroke-width="2" stroke-linecap="round"/>239 </svg>240 <span>Walk</span>241 </div>242 <div class="arrive-pill">Arrive 4:14 AM</div>243 </div>244 245 <!-- Bikes -->246 <div class="opt-cell">247 <div class="opt-top">248 <div class="opt-meta">93 cal</div>249 <div class="opt-time">~23 min</div>250 </div>251 <div class="opt-label">252 <svg class="icon-small" viewBox="0 0 24 24" fill="none">253 <circle cx="6" cy="18" r="3" stroke="#4C6A84" stroke-width="2"/>254 <circle cx="18" cy="18" r="3" stroke="#4C6A84" stroke-width="2"/>255 <path d="M9 18l3-6 3 4h3" stroke="#4C6A84" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>256 </svg>257 <span>Bikes</span>258 </div>259 <div class="arrive-pill">Arrive 3:53 AM</div>260 </div>261 262 <!-- Cabs -->263 <div class="opt-cell">264 <div class="opt-top">265 <div class="opt-meta"></div>266 <div class="opt-time">~18 min</div>267 </div>268 <div class="opt-label">269 <svg class="icon-small" viewBox="0 0 24 24" fill="none">270 <rect x="5" y="10" width="14" height="6" rx="2" stroke="#4C6A84" stroke-width="2"/>271 <circle cx="8" cy="18" r="2" fill="#4C6A84"/>272 <circle cx="16" cy="18" r="2" fill="#4C6A84"/>273 <path d="M9 10l2-3h2l2 3" stroke="#4C6A84" stroke-width="2" stroke-linecap="round"/>274 </svg>275 <span>Cabs</span>276 </div>277 <div class="arrive-pill">Arrive 3:48 AM</div>278 </div>279 280 <!-- Mopeds -->281 <div class="opt-cell">282 <div class="opt-top">283 <div class="money">$6.40</div>284 <div class="opt-time">~18 min</div>285 </div>286 <div class="opt-label">287 <svg class="icon-small" viewBox="0 0 24 24" fill="none">288 <circle cx="6" cy="18" r="2" fill="#4C6A84"/>289 <circle cx="17" cy="18" r="2" fill="#4C6A84"/>290 <path d="M8 18h6l2-5h-4l-1-2H8" stroke="#4C6A84" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>291 </svg>292 <span>Mopeds</span>293 </div>294 <div class="arrive-pill">Arrive 3:48 AM</div>295 </div>296 </div>297 </div>298 299 <!-- Suggested -->300 <div class="suggested-title">Suggested</div>301 302 <div class="suggested-list">303 <!-- Item 1 -->304 <div class="suggest-item">305 <div class="row-top">306 <div class="line-left">307 <svg class="icon-small" viewBox="0 0 24 24" fill="none">308 <rect x="3" y="6" width="18" height="10" rx="2" stroke="#3A6E84" stroke-width="2"/>309 <circle cx="7" cy="18" r="2" fill="#3A6E84"/>310 <circle cx="17" cy="18" r="2" fill="#3A6E84"/>311 </svg>312 <span class="badge">M101</span>313 </div>314 <div style="display:flex; align-items:center; gap:20px;">315 <span class="price">$2.90</span>316 <span class="minutes">56 min</span>317 </div>318 </div>319 <div class="desc">Every 60 min from W 125 St/Amsterdam Av</div>320 <span class="arrive-right">Arrive 4:00 AM</span>321 </div>322 323 <!-- Item 2 -->324 <div class="suggest-item">325 <div class="row-top">326 <div class="line-left">327 <svg class="icon-small" viewBox="0 0 24 24" fill="none">328 <rect x="3" y="6" width="18" height="10" rx="2" stroke="#3A6E84" stroke-width="2"/>329 <circle cx="7" cy="18" r="2" fill="#3A6E84"/>330 <circle cx="17" cy="18" r="2" fill="#3A6E84"/>331 </svg>332 <span class="badge">M60-SBS</span>333 <span>•</span>334 <span class="badge">4 6</span>335 </div>336 <div style="display:flex; align-items:center; gap:20px;">337 <span class="price">$2.90</span>338 <span class="minutes">34 min</span>339 </div>340 </div>341 <div class="desc">Every 13 min from Amsterdam Av/La Salle St</div>342 <span class="arrive-right">Arrive 4:01 AM</span>343 </div>344 345 <!-- Item 3 -->346 <div class="suggest-item">347 <div class="row-top">348 <div class="line-left">349 <svg class="icon-small" viewBox="0 0 24 24" fill="none">350 <circle cx="12" cy="12" r="10" stroke="#3A6E84" stroke-width="2"/>351 <text x="12" y="15" text-anchor="middle" font-size="10" fill="#3A6E84" font-weight="800">A</text>352 </svg>353 <span>•</span>354 <svg class="icon-small" viewBox="0 0 24 24" fill="none">355 <rect x="9" y="4" width="6" height="12" rx="2" stroke="#3A6E84" stroke-width="2"/>356 <path d="M12 16v4" stroke="#3A6E84" stroke-width="2" stroke-linecap="round"/>357 </svg>358 </div>359 <div style="display:flex; align-items:center; gap:20px;">360 <span class="price">$2.90</span>361 <span class="minutes">38 min</span>362 </div>363 </div>364 <div class="desc">Every 20 min from 125 St</div>365 <span class="arrive-right">Arrive 4:06 AM</span>366 </div>367 368 <!-- Item 4 -->369 <div class="suggest-item">370 <div class="row-top">371 <div class="line-left">372 <svg class="icon-small" viewBox="0 0 24 24" fill="none">373 <path d="M5 20l4-10 4 6 3 4" stroke="#3A6E84" stroke-width="2" stroke-linecap="round"/>374 </svg>375 <span>•</span>376 <span class="badge">4 6</span>377 </div>378 <div style="display:flex; align-items:center; gap:20px;">379 <span class="price">$2.90</span>380 <span class="minutes">44 min</span>381 </div>382 </div>383 <div class="desc">Every 9 min from 125 St</div>384 <span class="arrive-right">Arrive 4:12 AM</span>385 </div>386 387 <!-- Item 5 -->388 <div class="suggest-item">389 <div class="row-top">390 <div class="line-left">391 <svg class="icon-small" viewBox="0 0 24 24" fill="none">392 <path d="M5 20l4-10 4 6 3 4" stroke="#3A6E84" stroke-width="2" stroke-linecap="round"/>393 </svg>394 <span>•</span>395 <span class="badge">2 3</span>396 <span>•</span>397 <svg class="icon-small" viewBox="0 0 24 24" fill="none">398 <rect x="9" y="4" width="6" height="12" rx="2" stroke="#3A6E84" stroke-width="2"/>399 <path d="M12 16v4" stroke="#3A6E84" stroke-width="2" stroke-linecap="round"/>400 </svg>401 </div>402 <div style="display:flex; align-items:center; gap:20px;">403 <span class="price">$2.90</span>404 <span class="minutes">45 min</span>405 </div>406 </div>407 <div class="desc">Every 9 min from 125 St</div>408 <span class="arrive-right">Arrive 4:13 AM</span>409 </div>410 </div>411 412 <!-- Bottom mode bar -->413 <div class="mode-bar">414 <div class="mode-list">415 <div class="mode">416 <div class="circle active">417 <svg class="svg" viewBox="0 0 24 24" fill="none">418 <circle cx="12" cy="12" r="10" stroke="#fff" stroke-width="2"/>419 <path d="M8 12h8" stroke="#fff" stroke-width="2" stroke-linecap="round"/>420 <path d="M12 8v8" stroke="#fff" stroke-width="2" stroke-linecap="round"/>421 </svg>422 </div>423 <div>Classic</div>424 </div>425 <div class="mode">426 <div class="circle">427 <svg class="svg" viewBox="0 0 24 24" fill="none">428 <rect x="7" y="5" width="10" height="14" rx="2" stroke="#DDE7EE" stroke-width="2"/>429 <path d="M10 7v4" stroke="#DDE7EE" stroke-width="2"/>430 </svg>431 </div>432 <div>Step-free</div>433 </div>434 <div class="mode">435 <div class="circle">436 <svg class="svg" viewBox="0 0 24 24" fill="none">437 <rect x="3" y="6" width="18" height="10" rx="2" stroke="#DDE7EE" stroke-width="2"/>438 <circle cx="7" cy="18" r="2" fill="#DDE7EE"/>439 <circle cx="17" cy="18" r="2" fill="#DDE7EE"/>440 </svg>441 </div>442 <div>Bus+</div>443 </div>444 <div class="mode">445 <div class="circle">446 <svg class="svg" viewBox="0 0 24 24" fill="none">447 <rect x="5" y="4" width="14" height="12" rx="3" stroke="#DDE7EE" stroke-width="2"/>448 <path d="M4 18h16" stroke="#DDE7EE" stroke-width="2" stroke-linecap="round"/>449 </svg>450 </div>451 <div>Train+</div>452 </div>453 <div class="mode">454 <div class="circle">455 <svg class="svg" viewBox="0 0 24 24" fill="none">456 <path d="M4 10c4-6 12-6 16 0" stroke="#DDE7EE" stroke-width="2" stroke-linecap="round"/>457 <path d="M12 10v8" stroke="#DDE7EE" stroke-width="2" stroke-linecap="round"/>458 </svg>459 </div>460 <div>Walk Less</div>461 </div>462 <div class="mode">463 <div class="circle">464 <svg class="svg" viewBox="0 0 24 24" fill="none">465 <circle cx="6" cy="18" r="3" stroke="#DDE7EE" stroke-width="2"/>466 <circle cx="18" cy="18" r="3" stroke="#DDE7EE" stroke-width="2"/>467 <path d="M9 18l3-6 3 4h3" stroke="#DDE7EE" stroke-width="2" stroke-linecap="round"/>468 </svg>469 </div>470 <div>Mix</div>471 </div>472 </div>473 <div class="home-indicator"></div>474 </div>475 476</div>477</body>478</html>