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; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: linear-gradient(#79c8e8 0%, #79c8e8 27%, #366a82 27%, #366a82 100%);15 font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;16 color: #ffffff;17 }18 19 /* Top map area */20 .map {21 width: 100%;22 height: 650px;23 background: #E0E0E0;24 border-bottom: 1px solid #BDBDBD;25 display: flex;26 justify-content: center;27 align-items: center;28 color: #555;29 font-weight: 600;30 letter-spacing: 0.2px;31 }32 .status-bar {33 position: absolute;34 top: 28px;35 left: 30px;36 right: 30px;37 display: flex;38 justify-content: space-between;39 align-items: center;40 color: #0d2e3a;41 font-weight: 700;42 font-size: 36px;43 }44 .right-status {45 display: flex;46 align-items: center;47 gap: 18px;48 font-size: 30px;49 }50 .icon-battery {51 width: 56px;52 height: 26px;53 border: 3px solid #0d2e3a;54 border-radius: 6px;55 position: relative;56 }57 .icon-battery:after {58 content: "";59 position: absolute;60 right: -10px;61 top: 7px;62 width: 8px; height: 12px;63 background: #0d2e3a; border-radius: 2px;64 }65 .icon-battery .fill {66 position: absolute;67 left: 3px; top: 3px; bottom: 3px;68 right: 3px; background: #0d2e3a; border-radius: 3px;69 }70 71 .back-btn {72 position: absolute;73 top: 110px; left: 30px;74 width: 92px; height: 92px;75 background: rgba(255,255,255,0.95);76 border-radius: 50%;77 display: flex; justify-content: center; align-items: center;78 box-shadow: 0 4px 10px rgba(0,0,0,0.12);79 }80 .back-btn svg { width: 40px; height: 40px; }81 82 .map-tag {83 position: absolute;84 top: 210px; left: 665px;85 background: #2b5f76;86 color: #e8f3f7;87 padding: 28px 36px;88 border-radius: 40px;89 display: flex; align-items: center; gap: 16px;90 font-size: 34px; font-weight: 700;91 box-shadow: 0 6px 16px rgba(0,0,0,0.16);92 }93 .map-tag .clock {94 width: 56px; height: 56px;95 background: rgba(255,255,255,0.12);96 border-radius: 50%;97 display: flex; justify-content: center; align-items: center;98 }99 .map-label {100 position: absolute;101 top: 320px; left: 540px;102 background: #2ac45b;103 color: #083a1b;104 font-weight: 800;105 padding: 10px 18px;106 border-radius: 10px;107 }108 .map-label.end {109 top: 140px; left: 895px;110 background: #26a854;111 }112 113 /* Content stack area */114 .content {115 position: absolute;116 top: 650px;117 left: 0; right: 0;118 padding: 40px 36px 220px;119 }120 121 .panel {122 background: #2f5e76;123 border-radius: 28px;124 padding: 30px 34px;125 margin-bottom: 26px;126 box-shadow: inset 0 -1px 0 rgba(255,255,255,0.05);127 }128 .panel.light {129 background: #3e6f88;130 }131 .panel .row {132 display: flex; align-items: center; gap: 26px;133 font-size: 40px; font-weight: 800;134 }135 .panel .sub {136 color: #bcd5e3;137 font-size: 32px;138 margin-top: 6px;139 font-weight: 600;140 }141 .round-icon {142 width: 78px; height: 78px; border-radius: 50%;143 background: #0b0b0b; display: flex; align-items: center; justify-content: center;144 }145 .round-icon svg { width: 54px; height: 54px; }146 147 /* White route card */148 .route-card {149 background: #ffffff;150 color: #163b4e;151 border-radius: 28px;152 padding: 30px 34px;153 box-shadow: 0 10px 24px rgba(0,0,0,0.18);154 margin: 20px 0 28px;155 }156 .route-top {157 display: flex; align-items: center; justify-content: space-between;158 }159 .m2 {160 display: inline-flex; align-items: center; gap: 14px;161 font-size: 40px; font-weight: 800;162 color: #2b5f76;163 }164 .m2 .badge {165 border: 2px solid #b9c4cc;166 color: #2b5f76;167 padding: 6px 12px;168 border-radius: 8px;169 display: inline-flex; align-items: center; gap: 10px;170 }171 .price-time {172 display: flex; align-items: baseline; gap: 26px;173 font-weight: 800;174 }175 .price-time .price { color: #2c78b5; font-size: 38px; }176 .price-time .mins { font-size: 64px; color: #2b5f76; }177 .route-sub {178 color: #93a8b4; font-size: 32px; margin-top: 16px;179 }180 .arrive-btn {181 margin-top: 20px;182 display: inline-block;183 background: #e7f0f8;184 color: #2b5f76;185 padding: 16px 24px;186 border-radius: 16px;187 font-weight: 800; font-size: 34px;188 }189 190 .report {191 display: flex; align-items: center; gap: 18px;192 color: #eaf3f7; font-weight: 800; font-size: 38px;193 margin: 32px 8px;194 }195 .report .bubble {196 width: 52px; height: 52px; border-radius: 12px; background: rgba(255,255,255,0.18);197 display:flex; align-items:center; justify-content:center;198 }199 200 /* Ad card */201 .ad-card {202 background: #ffffff;203 border-radius: 24px;204 padding: 0;205 margin-top: 26px;206 box-shadow: 0 8px 20px rgba(0,0,0,0.22);207 overflow: hidden;208 }209 .ad-top {210 display: grid;211 grid-template-columns: 1fr 380px;212 gap: 0;213 }214 .ad-img {215 height: 380px;216 background: #E0E0E0;217 border-right: 1px solid #BDBDBD;218 display:flex; align-items:center; justify-content:center;219 color:#757575; font-weight:700;220 }221 .ad-side {222 padding: 30px;223 display:flex; flex-direction: column; justify-content: center; gap: 18px;224 color: #163b4e;225 }226 .app-icon {227 width: 120px; height: 120px; background:#E0E0E0; border:1px solid #BDBDBD;228 border-radius: 24px; display:flex; align-items:center; justify-content:center; color:#757575; font-weight:700;229 }230 .ad-title { font-size: 54px; font-weight: 900; color:#163b4e; }231 .installed { color: #2aa85b; font-size: 32px; font-weight: 800; }232 .ad-bottom {233 padding: 30px;234 border-top: 1px solid #eef2f5;235 }236 .ad-btn {237 width: 820px; height: 110px;238 background: #1ea365;239 color: #fff; font-size: 46px; font-weight: 900;240 border-radius: 55px;241 display:flex; align-items:center; justify-content:center;242 margin: 0 auto;243 box-shadow: inset 0 -6px 0 rgba(0,0,0,0.12);244 }245 246 .remove-ads {247 position: absolute; right: 40px; top: 1580px;248 display: inline-flex; align-items: center; gap: 18px;249 background: rgba(255,255,255,0.18);250 border: 2px solid rgba(255,255,255,0.35);251 color: #eaf3f7; font-weight: 900; letter-spacing: 0.5px;252 padding: 20px 26px; border-radius: 32px; font-size: 34px;253 }254 .remove-ads .crown {255 width: 64px; height: 64px; border: 2px solid rgba(255,255,255,0.6);256 border-radius: 50%; display:flex; align-items:center; justify-content:center;257 }258 259 /* Bottom navigation */260 .bottom-bar {261 position: absolute;262 left: 0; right: 0; bottom: 0;263 padding: 28px 24px 80px;264 background: rgba(25, 58, 78, 0.45);265 backdrop-filter: blur(2px);266 }267 .tab-row {268 display: flex; justify-content: space-around; align-items: center;269 color: #eaf3f7;270 }271 .tab {272 display: flex; flex-direction: column; align-items: center; gap: 12px;273 font-size: 32px; font-weight: 700;274 }275 .tab .circle {276 width: 130px; height: 130px; border-radius: 50%;277 background: rgba(255,255,255,0.1);278 display:flex; align-items:center; justify-content:center;279 }280 .tab.active .circle {281 border: 8px solid #ffffff;282 box-shadow: 0 0 0 8px rgba(255,255,255,0.18) inset;283 }284 .home-indicator {285 position: absolute;286 bottom: 22px; left: 50%;287 transform: translateX(-50%);288 width: 360px; height: 16px;289 background: #e6ebef; border-radius: 16px; opacity: 0.8;290 }291 292 /* Small utility icons */293 .pin-icon {294 width: 56px; height: 56px; border-radius: 16px;295 background: rgba(255,255,255,0.14);296 display:flex; align-items:center; justify-content:center;297 }298 .swap {299 position: absolute; right: 36px; top: 760px;300 width: 68px; height: 68px; border-radius: 18px;301 background: rgba(255,255,255,0.1);302 display:flex; align-items:center; justify-content:center;303 }304</style>305</head>306<body>307<div id="render-target">308 309 <div class="map">[IMG: City Map]</div>310 311 <div class="status-bar">312 <div>9:11</div>313 <div class="right-status">314 <span>100%</span>315 <div class="icon-battery"><div class="fill"></div></div>316 </div>317 </div>318 319 <div class="back-btn" aria-label="Back">320 <svg viewBox="0 0 24 24" fill="#2b5f76">321 <path d="M15 6l-6 6 6 6" stroke="#2b5f76" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>322 </svg>323 </div>324 325 <div class="map-tag">326 <div class="clock">327 <svg viewBox="0 0 24 24">328 <circle cx="12" cy="12" r="10" fill="none" stroke="#e8f3f7" stroke-width="2"/>329 <path d="M12 6v6l4 2" stroke="#e8f3f7" stroke-width="2" fill="none" stroke-linecap="round"/>330 </svg>331 </div>332 <div>Leave: Nov 8, 3:30 AM</div>333 </div>334 335 <div class="map-label">Start</div>336 <div class="map-label end">End</div>337 338 <div class="swap">339 <svg viewBox="0 0 24 24" fill="none">340 <path d="M7 7h10M7 17h10" stroke="#eaf3f7" stroke-width="2" stroke-linecap="round"/>341 <path d="M9 4l-3 3 3 3M15 14l3 3-3 3" stroke="#eaf3f7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>342 </svg>343 </div>344 345 <div class="content">346 <!-- Panel: station -->347 <div class="panel">348 <div class="row">349 <div class="round-icon">350 <svg viewBox="0 0 24 24" fill="#ffffff">351 <rect x="5" y="7" width="14" height="10" rx="2" />352 <circle cx="9" cy="18" r="1.5" fill="#ffffff"/>353 <circle cx="15" cy="18" r="1.5" fill="#ffffff"/>354 </svg>355 </div>356 <div>163 St - Amsterdam Av</div>357 </div>358 </div>359 360 <!-- Panel: address -->361 <div class="panel light">362 <div class="row" style="font-weight:900;">363 <div class="pin-icon">364 <svg viewBox="0 0 24 24" fill="none">365 <path d="M12 21s7-7 7-11a7 7 0 10-14 0c0 4 7 11 7 11z" stroke="#ffffff" stroke-width="2" fill="none"/>366 <circle cx="12" cy="10" r="3" fill="#ffffff"/>367 </svg>368 </div>369 <div>Amsterdam Ave, New York, NY, USA</div>370 </div>371 </div>372 373 <!-- Panel: Bus+ -->374 <div class="panel light" style="background:#467b91;">375 <div class="row">376 <div class="round-icon" style="background:#2b5f76;">377 <svg viewBox="0 0 24 24" fill="#aee2ff">378 <rect x="4" y="8" width="16" height="8" rx="2"/>379 <circle cx="8" cy="18" r="2" fill="#2b5f76"/>380 <circle cx="16" cy="18" r="2" fill="#2b5f76"/>381 </svg>382 </div>383 <div>Bus+</div>384 </div>385 <div class="sub">More bus-only options</div>386 </div>387 388 <!-- Route card -->389 <div class="route-card">390 <div class="route-top">391 <div class="m2">392 <span class="badge">393 <svg viewBox="0 0 24 24" width="26" height="26">394 <rect x="4" y="8" width="16" height="8" rx="2" fill="#2b5f76"/>395 <circle cx="8" cy="18" r="2" fill="#2b5f76"/>396 <circle cx="16" cy="18" r="2" fill="#2b5f76"/>397 </svg>398 M2399 </span>400 </div>401 <div class="price-time">402 <span class="price">$2.90</span>403 <span class="mins">28<span style="font-size:30px; font-weight:700; color:#688ca0;">min</span></span>404 </div>405 </div>406 <div class="route-sub">from Edgecombe Av/W 162 St</div>407 <div class="arrive-btn">Arrive 4:38 AM</div>408 </div>409 410 <div class="report">411 <div class="bubble">412 <svg viewBox="0 0 24 24" fill="none">413 <path d="M12 3c5 0 9 3.5 9 7.8 0 4.3-4 7.8-9 7.8-1.4 0-2.7-.2-3.9-.7L5 20l.6-2.8C4.2 15.8 3 14 3 10.8 3 6.5 7 3 12 3z" stroke="#ffffff" stroke-width="2"/>414 <path d="M12 8v5M12 15h.1" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>415 </svg>416 </div>417 <div>Report Issue</div>418 </div>419 420 <!-- Ad card -->421 <div class="ad-card">422 <div class="ad-top">423 <div class="ad-img">[IMG: Ad graphic - map]</div>424 <div class="ad-side">425 <div class="app-icon">[IMG: App Icon]</div>426 <div class="ad-title">Omio</div>427 <div class="installed">Installed</div>428 </div>429 </div>430 <div class="ad-bottom">431 <div class="ad-btn">Open</div>432 </div>433 </div>434 </div>435 436 <div class="remove-ads">437 <div class="crown">438 <svg viewBox="0 0 24 24" width="32" height="32">439 <path d="M3 17l3-7 6 5 6-5 3 7H3z" fill="none" stroke="#ffffff" stroke-width="2" stroke-linejoin="round"/>440 </svg>441 </div>442 <span>REMOVE ADS</span>443 </div>444 445 <!-- Bottom nav -->446 <div class="bottom-bar">447 <div class="tab-row">448 <div class="tab">449 <div class="circle">450 <svg viewBox="0 0 24 24" width="64" height="64">451 <path d="M12 3l7 7h-4v7H9v-7H5l7-7z" fill="#eaf3f7"/>452 </svg>453 </div>454 <div>Classic</div>455 </div>456 <div class="tab">457 <div class="circle">458 <svg viewBox="0 0 24 24" width="64" height="64">459 <path d="M6 6h12v12H6z" fill="#eaf3f7"/>460 <path d="M8 8h8v8H8z" fill="#366a82"/>461 </svg>462 </div>463 <div>Step-free</div>464 </div>465 <div class="tab active">466 <div class="circle">467 <svg viewBox="0 0 24 24" width="64" height="64">468 <rect x="4" y="8" width="16" height="8" rx="2" fill="#eaf3f7"/>469 <circle cx="8" cy="18" r="2" fill="#eaf3f7"/>470 <circle cx="16" cy="18" r="2" fill="#eaf3f7"/>471 </svg>472 </div>473 <div>Bus+</div>474 </div>475 <div class="tab">476 <div class="circle">477 <svg viewBox="0 0 24 24" width="64" height="64">478 <rect x="5" y="7" width="14" height="10" rx="2" fill="#eaf3f7"/>479 <circle cx="9" cy="18" r="2" fill="#eaf3f7"/>480 <circle cx="15" cy="18" r="2" fill="#eaf3f7"/>481 </svg>482 </div>483 <div>Train+</div>484 </div>485 <div class="tab">486 <div class="circle">487 <svg viewBox="0 0 24 24" width="64" height="64">488 <path d="M12 2c3 0 6 3 6 6s-3 6-6 6-6-3-6-6 3-6 6-6zm-6 18h12" stroke="#eaf3f7" stroke-width="2" fill="none"/>489 </svg>490 </div>491 <div>Walk Less</div>492 </div>493 <div class="tab">494 <div class="circle">495 <svg viewBox="0 0 24 24" width="64" height="64">496 <path d="M4 16l6-6 4 4 6-6" stroke="#eaf3f7" stroke-width="2" fill="none"/>497 </svg>498 </div>499 <div>Mix</div>500 </div>501 </div>502 <div class="home-indicator"></div>503 </div>504 505</div>506</body>507</html>