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: "Inter", "Segoe UI", Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: linear-gradient(180deg, #86d1ea 0px, #7ccae6 260px, #3f6f88 360px, #3f6f88 100%);15 color: #fff;16 }17 18 /* Map placeholder */19 .map {20 position: absolute;21 top: 60px;22 left: 0;23 width: 100%;24 height: 360px;25 background: #E0E0E0;26 border-bottom: 1px solid #BDBDBD;27 display: flex; align-items: center; justify-content: center;28 color: #757575; font-weight: 600;29 }30 31 /* Status bar */32 .status-bar {33 position: absolute; top: 16px; left: 24px; right: 24px;34 height: 40px; display: flex; align-items: center; justify-content: space-between;35 color: #1b2b32; font-weight: 700;36 }37 .status-right { display: flex; align-items: center; gap: 18px; font-weight: 700; }38 .battery {39 display: inline-flex; align-items: center; gap: 8px; color: #1b2b32;40 }41 .battery svg { width: 40px; height: 22px; }42 43 /* Back button */44 .back-btn {45 position: absolute; top: 188px; left: 28px;46 width: 88px; height: 88px; border-radius: 44px;47 background: #ffffff; color: #2b4b5c;48 display: flex; align-items: center; justify-content: center;49 box-shadow: 0 4px 10px rgba(0,0,0,0.15);50 }51 .back-btn svg { width: 34px; height: 34px; }52 53 /* Leave pill */54 .leave-pill {55 position: absolute; top: 170px; right: 36px;56 display: inline-flex; align-items: center; gap: 16px;57 background: #2b6e83;58 color: #e7f6fb; font-weight: 700;59 padding: 18px 26px; border-radius: 40px;60 box-shadow: 0 6px 12px rgba(0,0,0,0.18);61 }62 .pill-icon {63 width: 54px; height: 54px; border-radius: 27px; background: rgba(255,255,255,0.18);64 display: flex; align-items: center; justify-content: center;65 }66 .leave-pill .text { white-space: nowrap; font-size: 34px; }67 68 /* Cards stack */69 .stack { position: absolute; top: 340px; left: 28px; right: 28px; }70 .card {71 background: #2e5d79;72 border-radius: 28px;73 padding: 30px;74 margin-bottom: 22px;75 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);76 }77 .row { display: flex; align-items: center; }78 .icon-circle {79 width: 70px; height: 70px; border-radius: 35px;80 background: #0f2530; display: flex; align-items: center; justify-content: center;81 margin-right: 24px;82 }83 .row h3 { margin: 0; font-size: 40px; font-weight: 800; letter-spacing: 0.2px; }84 .sub-card {85 background: #3a6f8a; border-radius: 28px; padding: 28px 30px; margin-bottom: 22px; opacity: 0.95;86 }87 .pin { background:#557e92; }88 .light { background:#4f7f99; }89 90 .muted { color: #c7d8e2; font-weight: 500; }91 92 /* White result card */93 .result {94 background: #ffffff; border-radius: 28px; padding: 34px;95 color: #1d2e38; box-shadow: 0 6px 16px rgba(0,0,0,0.18);96 }97 .result-top { display:flex; align-items:center; justify-content: space-between; }98 .badge {99 display:inline-flex; align-items:center; gap: 10px;100 border: 2px solid #cfd7de; border-radius: 10px; padding: 8px 12px; background:#f7fbff; color:#2a5570; font-weight: 800;101 }102 .price { color: #2a86c4; font-weight: 800; font-size: 36px; }103 .duration { font-size: 64px; font-weight: 800; color:#2a2a2a; }104 .result-sub { display:flex; align-items:center; justify-content: space-between; margin-top: 18px; }105 .arrive { background:#e7f2fb; color:#2a6fa0; border-radius: 14px; padding: 12px 18px; font-weight: 800; }106 107 /* Report + Remove Ads */108 .actions {109 position: absolute; top: 980px; left: 28px; right: 28px;110 }111 .report {112 display: flex; align-items: center; gap: 18px; color: #cfe5f1; font-weight: 800; font-size: 40px;113 }114 .report .bubble {115 width: 64px; height: 64px; border-radius: 12px; background: #5f8aa0; display:flex; align-items:center; justify-content:center;116 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5);117 }118 .remove-ads {119 margin-top: 48px; display: flex; justify-content: flex-end;120 }121 .remove-ads .btn {122 display: inline-flex; align-items: center; gap: 16px;123 border: 4px solid #a8c4d2; color: #e9f7ff; padding: 16px 30px; border-radius: 40px;124 font-weight: 900; letter-spacing: 1px;125 background: rgba(255,255,255,0.06);126 }127 .crown {128 width: 36px; height: 24px; border: 2px solid #e9f7ff; border-radius: 6px; position: relative;129 }130 .crown:before, .crown:after {131 content:""; position:absolute; top:-8px; width: 0; height: 0; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:10px solid #e9f7ff;132 }133 .crown:before{ left:4px; }134 .crown:after{ right:4px; }135 136 /* Bottom nav */137 .bottom-bar {138 position: absolute; left: 0; right: 0; bottom: 56px;139 padding: 24px 24px 90px;140 }141 .nav {142 display: flex; justify-content: space-between; align-items: flex-end; padding: 0 24px;143 }144 .nav-item {145 width: 180px; text-align: center; color: #e0eef6; opacity: 0.85;146 }147 .nav-icon {148 width: 120px; height: 120px; border-radius: 60px; background: #2a4e61; margin: 0 auto 12px;149 display:flex; align-items:center; justify-content:center; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.08);150 }151 .nav-item.active .nav-icon {152 border: 8px solid #ffffff; background: #2d6e88;153 }154 .nav-label { font-size: 32px; font-weight: 700; }155 156 /* Home indicator */157 .home-indicator {158 position: absolute; left: 50%; transform: translateX(-50%);159 bottom: 18px; width: 360px; height: 14px; border-radius: 7px; background: rgba(255,255,255,0.85);160 }161 162 /* Small helpers */163 .small { font-size: 30px; }164</style>165</head>166<body>167<div id="render-target">168 169 <!-- Status bar -->170 <div class="status-bar">171 <div>9:11</div>172 <div class="status-right">173 <span class="small">LR</span>174 <span class="small">N</span>175 <span class="battery">176 <svg viewBox="0 0 52 24">177 <rect x="1" y="3" width="46" height="18" rx="3" fill="none" stroke="#1b2b32" stroke-width="2"></rect>178 <rect x="3" y="5" width="42" height="14" rx="2" fill="#1b2b32"></rect>179 <rect x="48" y="8" width="3" height="8" rx="1.5" fill="#1b2b32"></rect>180 </svg>181 <span>100%</span>182 </span>183 </div>184 </div>185 186 <!-- Map -->187 <div class="map">[IMG: City Map]</div>188 189 <!-- Back button -->190 <div class="back-btn">191 <svg viewBox="0 0 24 24" fill="#2b4b5c">192 <path d="M15.5 4l-8 8 8 8" stroke="#2b4b5c" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>193 </svg>194 </div>195 196 <!-- Leave pill -->197 <div class="leave-pill">198 <div class="pill-icon">199 <svg viewBox="0 0 24 24" width="30" height="30">200 <circle cx="12" cy="12" r="10" fill="none" stroke="#e7f6fb" stroke-width="2"></circle>201 <path d="M12 6v6l4 2" stroke="#e7f6fb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>202 </svg>203 </div>204 <div class="text">Leave: Nov 8, 3:30 AM</div>205 </div>206 207 <!-- Start/End tags on map -->208 <div style="position:absolute; top: 160px; left: 520px; background:#2ecc71; color:#08331a; padding:6px 12px; border-radius:8px; font-weight:800;">Start</div>209 <div style="position:absolute; top: 220px; left: 640px; background:#2ecc71; color:#08331a; padding:6px 12px; border-radius:8px; font-weight:800;">End</div>210 211 <!-- Cards stack -->212 <div class="stack">213 214 <div class="card">215 <div class="row">216 <div class="icon-circle">217 <svg viewBox="0 0 24 24" width="34" height="34">218 <rect x="4" y="5" width="16" height="10" rx="2" fill="#fff"></rect>219 <circle cx="8" cy="18" r="2" fill="#fff"></circle>220 <circle cx="16" cy="18" r="2" fill="#fff"></circle>221 </svg>222 </div>223 <h3>163 St - Amsterdam Av</h3>224 </div>225 </div>226 227 <div class="sub-card pin">228 <div class="row">229 <div class="icon-circle" style="background:#365c71;">230 <svg viewBox="0 0 24 24" width="32" height="32">231 <path d="M12 2C8 2 5 5 5 9c0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7z" fill="#fff"/>232 <circle cx="12" cy="9" r="3" fill="#557e92"></circle>233 </svg>234 </div>235 <h3>Amsterdam Ave, New York, NY, USA</h3>236 </div>237 </div>238 239 <div class="sub-card light">240 <div class="row">241 <div class="icon-circle" style="background:#2d6e88;">242 <svg viewBox="0 0 24 24" width="34" height="34">243 <rect x="3" y="8" width="18" height="7" rx="2" fill="#fff"></rect>244 <rect x="6" y="6" width="12" height="2" rx="1" fill="#fff"></rect>245 <circle cx="7.5" cy="17.5" r="1.8" fill="#fff"></circle>246 <circle cx="16.5" cy="17.5" r="1.8" fill="#fff"></circle>247 </svg>248 </div>249 <div>250 <div style="font-size:40px; font-weight:800;">Bus+</div>251 <div class="muted" style="font-size:32px; margin-top:6px;">More bus-only options</div>252 </div>253 </div>254 </div>255 256 <div class="result">257 <div class="result-top">258 <div class="badge">259 <svg viewBox="0 0 24 24" width="26" height="26">260 <rect x="3" y="7" width="18" height="10" rx="2" fill="#2a5570"></rect>261 <rect x="6" y="5" width="12" height="3" rx="1" fill="#2a5570"></rect>262 </svg>263 <span>M2</span>264 </div>265 <div style="display:flex; align-items:center; gap:28px;">266 <div class="price">$2.90</div>267 <div class="duration">28<span style="font-size:32px; font-weight:700; color:#6b7d86; margin-left:6px;">min</span></div>268 </div>269 </div>270 <div class="result-sub">271 <div class="muted" style="font-size:34px;">from Edgecombe Av/W 162 St</div>272 <div class="arrive">Arrive 4:38 AM</div>273 </div>274 </div>275 276 </div>277 278 <!-- Actions -->279 <div class="actions">280 <div class="report">281 <div class="bubble">282 <svg viewBox="0 0 24 24" width="28" height="28">283 <path d="M4 4h16v10H7l-3 3V4z" fill="#ffffff"></path>284 <rect x="11" y="6" width="2" height="5" fill="#5f8aa0"></rect>285 <rect x="11" y="12" width="2" height="2" fill="#5f8aa0"></rect>286 </svg>287 </div>288 <div>Report Issue</div>289 </div>290 291 <div class="remove-ads">292 <div class="btn">293 <div class="crown"></div>294 <div>REMOVE ADS</div>295 <svg viewBox="0 0 24 24" width="24" height="24">296 <path d="M9 6l6 6-6 6" fill="none" stroke="#e9f7ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>297 </svg>298 </div>299 </div>300 </div>301 302 <!-- Bottom navigation -->303 <div class="bottom-bar">304 <div class="nav">305 <div class="nav-item">306 <div class="nav-icon">307 <svg viewBox="0 0 24 24" width="44" height="44">308 <path d="M3 12h18M3 6h18M3 18h18" stroke="#cfe5f1" stroke-width="2" stroke-linecap="round"/>309 </svg>310 </div>311 <div class="nav-label">Classic</div>312 </div>313 <div class="nav-item">314 <div class="nav-icon">315 <svg viewBox="0 0 24 24" width="38" height="38">316 <circle cx="12" cy="12" r="9" fill="none" stroke="#cfe5f1" stroke-width="2"></circle>317 <path d="M8 12h8M12 8v8" stroke="#cfe5f1" stroke-width="2" stroke-linecap="round"/>318 </svg>319 </div>320 <div class="nav-label">Step-free</div>321 </div>322 <div class="nav-item active">323 <div class="nav-icon">324 <svg viewBox="0 0 24 24" width="40" height="40">325 <rect x="3" y="8" width="18" height="7" rx="2" fill="#e0eef6"></rect>326 <rect x="6" y="6" width="12" height="2" rx="1" fill="#e0eef6"></rect>327 <circle cx="7.5" cy="17.5" r="1.8" fill="#e0eef6"></circle>328 <circle cx="16.5" cy="17.5" r="1.8" fill="#e0eef6"></circle>329 </svg>330 </div>331 <div class="nav-label">Bus+</div>332 </div>333 <div class="nav-item">334 <div class="nav-icon">335 <svg viewBox="0 0 24 24" width="42" height="42">336 <rect x="4" y="6" width="16" height="10" rx="2" fill="#cfe5f1"></rect>337 <circle cx="8" cy="18" r="2" fill="#cfe5f1"></circle>338 <circle cx="16" cy="18" r="2" fill="#cfe5f1"></circle>339 </svg>340 </div>341 <div class="nav-label">Train+</div>342 </div>343 <div class="nav-item">344 <div class="nav-icon">345 <svg viewBox="0 0 24 24" width="40" height="40">346 <ellipse cx="12" cy="10" rx="6" ry="4" fill="#cfe5f1"></ellipse>347 <rect x="5" y="10" width="14" height="6" rx="3" fill="#cfe5f1"></rect>348 </svg>349 </div>350 <div class="nav-label">Walk Less</div>351 </div>352 </div>353 </div>354 355 <!-- Home indicator -->356 <div class="home-indicator"></div>357 358</div>359</body>360</html>