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 UI Mock</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;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: linear-gradient(#5e91ad 0%, #2e5a73 200px, #2e5a73 100%);15 border-radius: 0;16 }17 18 /* Map placeholder */19 .map {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 480px;25 background: #E0E0E0;26 border-bottom: 1px solid #BDBDBD;27 display: flex;28 align-items: center;29 justify-content: center;30 color: #757575;31 font-weight: 600;32 letter-spacing: 0.2px;33 }34 35 /* Floating chips over the map */36 .chip {37 position: absolute;38 top: 260px;39 right: 44px;40 display: inline-flex;41 align-items: center;42 gap: 16px;43 padding: 20px 28px;44 background: #f5fbff;45 color: #2e5a73;46 border-radius: 40px;47 box-shadow: 0 8px 16px rgba(0,0,0,0.15);48 font-size: 34px;49 font-weight: 700;50 }51 .chip svg { width: 44px; height: 44px; }52 53 .refresh-btn {54 position: absolute;55 top: 260px;56 right: 310px;57 width: 104px;58 height: 104px;59 background: #f5fbff;60 border-radius: 52px;61 box-shadow: 0 8px 16px rgba(0,0,0,0.15);62 display: flex;63 align-items: center;64 justify-content: center;65 }66 67 .marker {68 position: absolute;69 top: 220px;70 left: 520px;71 display: inline-flex;72 gap: 10px;73 }74 .marker .pill {75 padding: 14px 22px;76 background: #2ecc71;77 color: #fff;78 border-radius: 22px;79 font-weight: 800;80 font-size: 30px;81 box-shadow: 0 6px 12px rgba(0,0,0,0.15);82 }83 .marker .pill + .pill { background: #13bf4b; margin-left: 10px; }84 85 /* Main dark card */86 .main-card {87 position: absolute;88 top: 380px;89 left: 28px;90 width: 1024px;91 background: #285f79;92 border-radius: 40px;93 padding: 36px 30px 30px 30px;94 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);95 }96 97 .header-row {98 display: flex;99 align-items: center;100 gap: 22px;101 margin-bottom: 26px;102 }103 .circle-icon {104 width: 80px;105 height: 80px;106 background: #0f1722;107 border-radius: 40px;108 display: flex;109 align-items: center;110 justify-content: center;111 }112 .circle-icon svg { width: 52px; height: 52px; }113 114 .title {115 font-size: 44px;116 color: #ffffff;117 font-weight: 800;118 }119 120 .sub-row {121 position: relative;122 margin-top: 16px;123 background: rgba(255,255,255,0.08);124 border-radius: 18px;125 padding: 22px 28px;126 display: flex;127 align-items: center;128 gap: 16px;129 color: #cdd8df;130 font-size: 32px;131 font-weight: 600;132 }133 .sub-row .right-tab {134 position: absolute;135 right: 16px;136 top: -12px;137 background: rgba(255,255,255,0.14);138 padding: 16px 18px;139 border-radius: 20px;140 }141 142 /* Grid options */143 .mode-grid {144 margin-top: 26px;145 background: #ffffff;146 border-radius: 30px;147 overflow: hidden;148 }149 .row {150 display: flex;151 border-top: 1px solid #e7e7e7;152 }153 .row:first-child { border-top: none; }154 .cell {155 width: 50%;156 padding: 26px 30px;157 border-left: 1px solid #e7e7e7;158 }159 .cell:first-child { border-left: none; }160 .cell .top {161 display: flex;162 align-items: center;163 justify-content: space-between;164 color: #54667a;165 font-size: 30px;166 font-weight: 700;167 margin-bottom: 10px;168 }169 .cell .big {170 font-size: 50px;171 color: #2f3d4a;172 font-weight: 800;173 }174 .cell .bottom {175 display: flex;176 align-items: center;177 gap: 12px;178 color: #7d8b97;179 font-size: 28px;180 }181 .cell .right-blue { color: #1f86d1; font-weight: 800; }182 .cell .right-time { color: #2f3d4a; font-weight: 800; }183 184 /* Section title */185 .section-title {186 margin: 24px 6px 18px 6px;187 color: #dae6ee;188 font-size: 40px;189 font-weight: 800;190 }191 192 /* Suggested list */193 .suggestion {194 background: #ffffff;195 border-radius: 30px;196 margin-bottom: 16px;197 box-shadow: 0 1px 0 #e7e7e7;198 }199 .suggestion .item {200 display: flex;201 align-items: center;202 padding: 28px;203 border-top: 1px solid #ececec;204 }205 .suggestion .item:first-child { border-top: none; }206 .line-icon {207 width: 64px;208 height: 64px;209 border-radius: 32px;210 background: #1f80e0;211 color: #fff;212 font-size: 36px;213 font-weight: 800;214 display: flex;215 align-items: center;216 justify-content: center;217 margin-right: 22px;218 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.45);219 }220 .line-icon.light { background: #0a69c7; }221 .line-stack {222 display: inline-flex;223 gap: 10px;224 margin-right: 22px;225 }226 .badge {227 padding: 8px 18px;228 border-radius: 18px;229 background: #e84b4f;230 color: #fff;231 font-weight: 900;232 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.6);233 }234 .badge.gray { background: #0a69c7; }235 .badge.orange { background: #f36b2b; }236 237 .s-main {238 flex: 1;239 font-size: 32px;240 color: #2f3d4a;241 font-weight: 700;242 }243 .s-sub {244 margin-top: 6px;245 font-size: 30px;246 color: #98a7b3;247 font-weight: 600;248 }249 .s-right {250 text-align: right;251 min-width: 170px;252 font-weight: 800;253 font-size: 34px;254 color: #1f86d1;255 }256 .s-right .time {257 display: block;258 color: #2f3d4a;259 font-size: 30px;260 margin-top: 2px;261 }262 263 /* Cycles row */264 .cycles {265 margin-top: 22px;266 background: rgba(255,255,255,0.08);267 border-radius: 30px;268 padding: 26px 20px 30px 20px;269 }270 .cycle-title {271 color: #dae6ee;272 font-size: 40px;273 font-weight: 800;274 margin-bottom: 14px;275 }276 .cycle-row {277 display: flex;278 gap: 34px;279 padding: 10px 16px 6px 16px;280 overflow: hidden;281 }282 .cycle {283 width: 150px;284 display: flex;285 flex-direction: column;286 align-items: center;287 gap: 10px;288 }289 .cycle .icon {290 width: 120px;291 height: 120px;292 border-radius: 60px;293 background: #143f2d;294 display: flex;295 align-items: center;296 justify-content: center;297 box-shadow: inset 0 0 0 8px rgba(255,255,255,0.06);298 }299 .cycle .icon.blue { background: #153a52; }300 .cycle .icon.bus { background: #0b4663; }301 .cycle .icon.train { background: #21384a; }302 .cycle .icon.walk { background: #1f3d33; }303 .cycle .label {304 color: #e8f0f6;305 font-size: 28px;306 font-weight: 800;307 text-align: center;308 }309 .cycle.active .icon {310 background: #1fb857;311 box-shadow: 0 0 0 6px #eaf6ef inset, 0 6px 14px rgba(0,0,0,0.25);312 }313 .home-indicator {314 position: absolute;315 bottom: 38px;316 left: 50%;317 transform: translateX(-50%);318 width: 380px;319 height: 12px;320 background: #d6d6d6;321 border-radius: 8px;322 opacity: 0.8;323 }324 325 /* Tiny SVG helpers */326 .small-svg { width: 34px; height: 34px; }327</style>328</head>329<body>330<div id="render-target">331 332 <div class="map">[IMG: Map of New York City]</div>333 334 <div class="refresh-btn">335 <svg viewBox="0 0 24 24">336 <path d="M12 4a8 8 0 1 0 8 8" fill="none" stroke="#2e5a73" stroke-width="2"></path>337 <path d="M20 4v6h-6" fill="none" stroke="#2e5a73" stroke-width="2"></path>338 </svg>339 </div>340 341 <div class="chip">342 <svg viewBox="0 0 24 24">343 <circle cx="12" cy="12" r="10" fill="none" stroke="#2e5a73" stroke-width="2"></circle>344 <path d="M12 6v6l4 2" fill="none" stroke="#2e5a73" stroke-width="2"></path>345 </svg>346 Leave: Now347 </div>348 349 <div class="marker">350 <div class="pill">Start</div>351 <div class="pill">End</div>352 </div>353 354 <div class="main-card">355 356 <div class="header-row">357 <div class="circle-icon">358 <svg viewBox="0 0 24 24">359 <rect x="4" y="5" width="16" height="12" rx="2" ry="2" fill="#ffffff"></rect>360 <rect x="7" y="8" width="10" height="6" fill="#0f1722"></rect>361 <path d="M6 20h12" stroke="#ffffff" stroke-width="2"></path>362 </svg>363 </div>364 <div class="title">World Trade Center</div>365 </div>366 367 <div class="sub-row">368 <svg class="small-svg" viewBox="0 0 24 24">369 <path d="M12 3c3 0 5 2 5 5 0 5-5 10-5 10S7 13 7 8c0-3 2-5 5-5z" fill="#d9e3ea"></path>370 <circle cx="12" cy="8" r="2" fill="#2e5a73"></circle>371 </svg>372 <div>NAYA - Moynihan Train Hall • 351 W 33rd St, New York, NY 10001, USA</div>373 <div class="right-tab">374 <svg class="small-svg" viewBox="0 0 24 24">375 <path d="M12 7l5 5H7z" fill="#ffffff"></path>376 </svg>377 </div>378 </div>379 380 <div class="mode-grid">381 <div class="row">382 <div class="cell">383 <div class="top">384 <div>385 <svg class="small-svg" viewBox="0 0 24 24">386 <path d="M6 19l3-8 3 4 4-6" fill="none" stroke="#6b879b" stroke-width="2"></path>387 </svg>388 <span style="margin-left:8px;">261 cal</span>389 </div>390 <div class="big">63<span style="font-size:28px;font-weight:700;"> min</span></div>391 </div>392 <div class="bottom">393 <span style="color:#2f3d4a;font-weight:800;">Walk</span>394 </div>395 </div>396 <div class="cell">397 <div class="top">398 <div>399 <svg class="small-svg" viewBox="0 0 24 24">400 <circle cx="7" cy="17" r="3" fill="none" stroke="#6b879b" stroke-width="2"></circle>401 <circle cx="17" cy="17" r="3" fill="none" stroke="#6b879b" stroke-width="2"></circle>402 <path d="M7 17l4-6 4 6" fill="none" stroke="#6b879b" stroke-width="2"></path>403 </svg>404 <span style="margin-left:8px;">110 cal</span>405 </div>406 <div class="big">27<span style="font-size:28px;font-weight:700;"> min</span></div>407 </div>408 <div class="bottom">409 <span style="color:#2f3d4a;font-weight:800;">Bikes</span>410 </div>411 </div>412 </div>413 <div class="row">414 <div class="cell">415 <div class="top">416 <div>417 <svg class="small-svg" viewBox="0 0 24 24">418 <rect x="4" y="9" width="16" height="7" rx="2" fill="none" stroke="#6b879b" stroke-width="2"></rect>419 <circle cx="6" cy="18" r="2" fill="#6b879b"></circle>420 <circle cx="18" cy="18" r="2" fill="#6b879b"></circle>421 </svg>422 <span style="margin-left:8px;">~</span>423 </div>424 <div class="big">18<span style="font-size:28px;font-weight:700;"> min</span></div>425 </div>426 <div class="bottom">427 <span style="color:#2f3d4a;font-weight:800;">Cabs</span>428 </div>429 </div>430 <div class="cell">431 <div class="top">432 <div class="right-blue">$6.40</div>433 <div class="big right-time">21<span style="font-size:28px;font-weight:700;"> min</span></div>434 </div>435 <div class="bottom">436 <svg class="small-svg" viewBox="0 0 24 24">437 <path d="M3 15h13l2 3H5z" fill="none" stroke="#6b879b" stroke-width="2"></path>438 <circle cx="8" cy="18" r="1.5" fill="#6b879b"></circle>439 <circle cx="16" cy="18" r="1.5" fill="#6b879b"></circle>440 </svg>441 <span style="color:#2f3d4a;font-weight:800;">Mopeds</span>442 </div>443 </div>444 </div>445 </div>446 447 <div class="section-title">Suggested</div>448 449 <div class="suggestion">450 <div class="item">451 <div class="line-icon">E</div>452 <div class="s-main">453 $2.75454 <div class="s-sub">Next 3:35 PM, 3:45 PM from World Trade Center</div>455 </div>456 <div class="s-right">457 $2.75458 <span class="time">27 min</span>459 </div>460 </div>461 <div class="item">462 <div class="line-icon light">A</div>463 <div class="s-main">464 <div class="s-sub">in 2, 7, 13 min from Chambers St</div>465 </div>466 <div class="s-right">467 $2.75468 <span class="time">23 min</span>469 </div>470 </div>471 <div class="item">472 <div class="line-stack">473 <div class="badge">2</div>474 <div class="badge">3</div>475 </div>476 <div class="s-main">477 <div class="s-sub">in 8, 17, 26 min from Park Pl</div>478 </div>479 <div class="s-right">480 $2.75481 <span class="time">26 min</span>482 </div>483 </div>484 <div class="item">485 <div class="line-stack">486 <div class="badge gray">A</div>487 <div class="badge gray">C</div>488 </div>489 <div class="s-main">490 <div class="s-sub">in 2, 7, 13 min from Chambers St</div>491 </div>492 <div class="s-right">493 $2.75494 <span class="time">24 min</span>495 </div>496 </div>497 <div class="item">498 <div class="line-stack">499 <div class="badge orange">1</div>500 </div>501 <div class="s-main">502 <div class="s-sub">in 8, 18, 28 min from Wtc Cortlandt</div>503 </div>504 <div class="s-right">505 $2.75506 <span class="time">30 min</span>507 </div>508 </div>509 </div>510 511 <div class="cycles">512 <div class="cycle-title">Cycles</div>513 <div class="cycle-row">514 <div class="cycle active">515 <div class="icon">516 <svg viewBox="0 0 24 24">517 <circle cx="12" cy="12" r="9" fill="none" stroke="#ffffff" stroke-width="2"></circle>518 <path d="M9 12l3-3v6z" fill="#ffffff"></path>519 </svg>520 </div>521 <div class="label">Classic</div>522 </div>523 <div class="cycle">524 <div class="icon blue">525 <svg viewBox="0 0 24 24">526 <rect x="6" y="6" width="12" height="12" rx="2" fill="#bcd1de"></rect>527 <path d="M8 10h8M8 14h8" stroke="#153a52" stroke-width="2"></path>528 </svg>529 </div>530 <div class="label">Step-free</div>531 </div>532 <div class="cycle">533 <div class="icon bus">534 <svg viewBox="0 0 24 24">535 <rect x="4" y="7" width="16" height="10" rx="2" fill="#bcd1de"></rect>536 <circle cx="8" cy="18" r="2" fill="#153a52"></circle>537 <circle cx="16" cy="18" r="2" fill="#153a52"></circle>538 </svg>539 </div>540 <div class="label">Bus+</div>541 </div>542 <div class="cycle">543 <div class="icon train">544 <svg viewBox="0 0 24 24">545 <rect x="6" y="6" width="12" height="11" rx="2" fill="#bcd1de"></rect>546 <path d="M6 19h12" stroke="#21384a" stroke-width="2"></path>547 </svg>548 </div>549 <div class="label">Train+</div>550 </div>551 <div class="cycle">552 <div class="icon walk">553 <svg viewBox="0 0 24 24">554 <path d="M6 19l3-8 3 4 4-6" fill="none" stroke="#eaf6ef" stroke-width="2"></path>555 </svg>556 </div>557 <div class="label">Walk Less</div>558 </div>559 <div class="cycle">560 <div class="icon blue">561 <svg viewBox="0 0 24 24">562 <path d="M4 16l6-6 6 6" fill="none" stroke="#bcd1de" stroke-width="2"></path>563 </svg>564 </div>565 <div class="label">Mix</div>566 </div>567 </div>568 </div>569 570 </div>571 572 <div class="home-indicator"></div>573</div>574</body>575</html>