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: #5b8094;15 }16 17 /* Generic */18 .row { display: flex; align-items: center; }19 .col { display: flex; flex-direction: column; }20 .pill {21 background: #e8f3ff;22 color: #2a6aa0;23 padding: 16px 24px;24 border-radius: 24px;25 font-weight: 700;26 font-size: 32px;27 display: inline-block;28 }29 .label { color: #eaf4fb; font-size: 40px; font-weight: 700; }30 .sub { color: #b7d0df; font-size: 34px; }31 .muted { color: #9fb4c1; }32 .divider { height: 1px; background: rgba(255,255,255,0.15); margin: 18px 0; }33 .icon-circle {34 width: 86px; height: 86px; border-radius: 50%;35 background: #0f2633; color: #fff; display: flex; align-items: center; justify-content: center;36 margin-right: 24px;37 }38 /* Image placeholder */39 .imgph {40 background: #E0E0E0;41 border: 1px solid #BDBDBD;42 color: #757575;43 display: flex; align-items: center; justify-content: center;44 }45 46 /* Map area */47 #map {48 position: absolute; top: 0; left: 0; width: 1080px; height: 520px;49 }50 /* Back button on map */51 .back-btn {52 position: absolute; top: 220px; left: 36px;53 width: 96px; height: 96px; border-radius: 48px; background: #ffffff; box-shadow: 0 6px 20px rgba(0,0,0,0.15);54 display: flex; align-items: center; justify-content: center;55 }56 .back-btn svg { width: 44px; height: 44px; fill: #2f6a83; }57 58 /* Leave chip */59 #leave-chip {60 position: absolute; top: 170px; right: 36px;61 background: #2f6a83; color: #fff; padding: 22px 28px; border-radius: 46px;62 display: flex; align-items: center; gap: 18px; box-shadow: 0 6px 20px rgba(0,0,0,0.25);63 font-size: 36px; font-weight: 700;64 }65 #leave-chip .clock {66 width: 64px; height: 64px; border-radius: 32px; background: rgba(255,255,255,0.15);67 display: flex; align-items: center; justify-content: center;68 }69 #leave-chip .clock svg { width: 42px; height: 42px; stroke: #fff; }70 71 /* Search card */72 #search-card {73 position: absolute; top: 428px; left: 24px; right: 24px;74 background: #2f6a83; border-radius: 36px; padding: 34px;75 box-shadow: 0 18px 38px rgba(0,0,0,0.25);76 }77 #swap-btn {78 position: absolute; top: 138px; right: 36px;79 background: rgba(255,255,255,0.12); width: 86px; height: 86px; border-radius: 24px;80 display: flex; align-items: center; justify-content: center;81 }82 #swap-btn svg { width: 36px; height: 36px; fill: #cfe2ec; }83 84 /* Quick modes grid */85 #quick-panel {86 position: absolute; top: 740px; left: 24px; right: 24px;87 background: #ffffff; border-radius: 32px; box-shadow: 0 12px 30px rgba(0,0,0,0.20);88 overflow: hidden;89 }90 .qp-row { display: grid; grid-template-columns: 1fr 1fr; }91 .qp-cell { padding: 30px 32px; border-right: 1px solid #e6eef4; min-height: 170px; }92 .qp-row .qp-cell:last-child { border-right: none; }93 .qp-row + .qp-row .qp-cell { border-top: 1px solid #e6eef4; }94 .qp-title { font-size: 36px; color: #3c5f70; font-weight: 700; margin-top: 10px; }95 .qp-meta { color: #798c99; font-size: 32px; }96 .qp-arrive { margin-left: auto; }97 98 /* Suggested section */99 #suggested-title {100 position: absolute; top: 1100px; left: 36px; color: #ffffff; font-size: 48px; font-weight: 800;101 }102 .suggest-card {103 position: absolute; left: 24px; right: 24px; background: #ffffff; border-radius: 28px;104 box-shadow: 0 8px 20px rgba(0,0,0,0.18);105 padding: 28px;106 }107 .s-row-top { display: flex; align-items: center; justify-content: space-between; }108 .s-price { color: #2a6aa0; font-weight: 800; font-size: 38px; }109 .s-time { color: #7a8d99; font-weight: 800; font-size: 38px; }110 .s-desc { color: #9aa8b3; font-size: 34px; margin-top: 12px; }111 .s-actions { margin-top: 16px; }112 .badge {113 width: 68px; height: 68px; border-radius: 34px; display: flex; align-items: center; justify-content: center;114 color: #fff; font-weight: 800; font-size: 34px; margin-right: 12px;115 }116 .badge.blue { background: #317ae5; }117 .badge.red { background: #e44848; }118 .notice {119 width: 42px; height: 42px; border-radius: 21px; background: #ff9f2b; color: #fff; font-size: 28px; font-weight: 800;120 display: inline-flex; align-items: center; justify-content: center; margin-left: -18px; border: 3px solid #fff;121 }122 .mini-badge {123 padding: 8px 12px; border-radius: 14px; border: 2px solid #cbd7df; color: #728392; font-size: 30px; margin-right: 8px;124 display: inline-flex; align-items: center; gap: 8px;125 }126 .badge.orange { background: #f3912d; }127 .badge.gray { background: #e7eef3; color: #5e7381; }128 .right-info { display: flex; align-items: center; gap: 24px; }129 130 /* Bottom mode bar */131 #bottom-bar {132 position: absolute; left: 0; right: 0; bottom: 0; height: 290px;133 background: #2f6a83;134 border-top-left-radius: 28px; border-top-right-radius: 28px;135 box-shadow: 0 -12px 22px rgba(0,0,0,0.25);136 padding: 26px 36px;137 }138 .mode-list { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; }139 .mode {140 display: flex; flex-direction: column; align-items: center; gap: 16px;141 color: #d7e8f2; font-weight: 700; font-size: 32px;142 }143 .mode .circle {144 width: 120px; height: 120px; border-radius: 60px; background: rgba(255,255,255,0.12);145 display: flex; align-items: center; justify-content: center;146 box-shadow: inset 0 0 0 4px rgba(255,255,255,0.12);147 }148 .mode.active .circle { background: #35b24b; }149 .mode svg { width: 64px; height: 64px; fill: #ffffff; }150 /* Home indicator */151 .home-indicator {152 position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);153 width: 360px; height: 14px; border-radius: 7px; background: rgba(255,255,255,0.75);154 }155</style>156</head>157<body>158<div id="render-target">159 160 <!-- Map placeholder -->161 <div id="map" class="imgph">[IMG: City Map]</div>162 163 <!-- Back button -->164 <div class="back-btn">165 <svg viewBox="0 0 24 24"><path d="M15.5 6l-6 6 6 6-1.5 1.5L6.5 12l7.5-7.5z"/></svg>166 </div>167 168 <!-- Leave chip -->169 <div id="leave-chip">170 <div class="clock">171 <svg viewBox="0 0 24 24">172 <circle cx="12" cy="12" r="9" fill="none" stroke-width="2"></circle>173 <path d="M12 6v6l4 2" fill="none" stroke-width="2"></path>174 </svg>175 </div>176 Leave: Nov 8, 3:30 AM177 </div>178 179 <!-- Search Card -->180 <div id="search-card">181 <div class="row">182 <div class="icon-circle">183 <svg viewBox="0 0 24 24"><rect x="2" y="6" width="20" height="12" rx="2" fill="#fff"/><rect x="6" y="9" width="12" height="2" fill="#2f6a83"/><rect x="6" y="13" width="12" height="2" fill="#2f6a83"/></svg>184 </div>185 <div class="col" style="flex:1">186 <div class="label">163 St - Amsterdam Av</div>187 </div>188 </div>189 <div class="divider"></div>190 <div class="row">191 <div class="icon-circle" style="background:#375f77;">192 <svg viewBox="0 0 24 24"><path d="M12 2C7 2 3 6 3 11s4 9 9 9 9-4 9-9-4-9-9-9zm0 6a1.5 1.5 0 110 3 1.5 1.5 0 010-3z" fill="#fff"/></svg>193 </div>194 <div class="col" style="flex:1">195 <div class="sub">Amsterdam Ave, New York, NY, USA</div>196 </div>197 <div id="swap-btn">198 <svg viewBox="0 0 24 24"><path d="M7 7h10l-3-3 1.5-1.5L20.5 7l-5 4.5L14 10l3-3H7V7zm10 10H7l3 3-1.5 1.5L3.5 17l5-4.5L10 14l-3 3h10v-2z"/></svg>199 </div>200 </div>201 </div>202 203 <!-- Quick panel -->204 <div id="quick-panel">205 <div class="qp-row">206 <div class="qp-cell row">207 <svg viewBox="0 0 24 24" style="width:54px;height:54px;fill:#567a8e;margin-right:16px"><path d="M9 4a3 3 0 106 0 3 3 0 10-6 0zm1 6l-2 4 2 1v5h2v-4l2-2 2 2v4h2v-5l-2-4h-6z"/></svg>208 <div class="col" style="flex:1">209 <div class="qp-meta">145 cal ~36min</div>210 <div class="qp-title">Walk</div>211 </div>212 <div class="qp-arrive pill">Arrive 4:06 AM</div>213 </div>214 <div class="qp-cell row">215 <svg viewBox="0 0 24 24" style="width:54px;height:54px;fill:#567a8e;margin-right:16px"><path d="M5 13l3-5h3l2 3 3-1 2 3h-2l-1-2-3 1-2-2-2 3H5zm2 4a2 2 0 114 0 2 2 0 11-4 0zm8 0a2 2 0 114 0 2 2 0 11-4 0z"/></svg>216 <div class="col" style="flex:1">217 <div class="qp-meta">51 cal ~13min</div>218 <div class="qp-title">Bikes</div>219 </div>220 <div class="qp-arrive pill">Arrive 3:43 AM</div>221 </div>222 </div>223 <div class="qp-row">224 <div class="qp-cell row">225 <svg viewBox="0 0 24 24" style="width:54px;height:54px;fill:#567a8e;margin-right:16px"><path d="M4 15h16l-1-5a3 3 0 00-3-3H8a3 3 0 00-3 3l-1 5zm0 2h16v2H4v-2z"/></svg>226 <div class="col" style="flex:1">227 <div class="qp-meta">~16min</div>228 <div class="qp-title">Cabs</div>229 </div>230 <div class="qp-arrive pill">Arrive 3:46 AM</div>231 </div>232 <div class="qp-cell row">233 <svg viewBox="0 0 24 24" style="width:54px;height:54px;fill:#567a8e;margin-right:16px"><path d="M6 14l3-5h6l3 5h-3l-1 2H10l-1-2H6zm1 4a2 2 0 114 0 2 2 0 11-4 0zm8 0a2 2 0 114 0 2 2 0 11-4 0z"/></svg>234 <div class="col" style="flex:1">235 <div class="qp-meta"><span style="color:#2a6aa0;font-weight:800">$5.90</span> ~14min</div>236 <div class="qp-title">Mopeds</div>237 </div>238 <div class="qp-arrive pill">Arrive 3:44 AM</div>239 </div>240 </div>241 </div>242 243 <!-- Suggested title -->244 <div id="suggested-title">Suggested</div>245 246 <!-- Suggested cards -->247 <div class="suggest-card" style="top:1170px;">248 <div class="s-row-top">249 <div class="row">250 <div class="badge blue">A</div><div class="notice">!</div>251 </div>252 <div class="right-info">253 <div class="s-price">$2.90</div>254 <div class="s-time">24min</div>255 </div>256 </div>257 <div class="s-desc">Every 20 min from 163 St - Amsterdam Av</div>258 <div class="s-actions">259 <span class="pill">Arrive 3:54 AM</span>260 </div>261 </div>262 263 <div class="suggest-card" style="top:1368px;">264 <div class="s-row-top">265 <div class="row">266 <div class="badge red">1</div><div class="notice">!</div>267 </div>268 <div class="right-info">269 <div class="s-price">$2.90</div>270 <div class="s-time">30min</div>271 </div>272 </div>273 <div class="s-desc">Every 19 min from 168 St - Washington Hts</div>274 <div class="s-actions">275 <span class="pill">Arrive 3:51 AM</span>276 </div>277 </div>278 279 <div class="suggest-card" style="top:1566px;">280 <div class="s-row-top">281 <div class="row">282 <div class="badge blue">A</div>283 <span style="margin:0 10px;">•</span>284 <div class="badge red">1</div><div class="notice">!</div>285 </div>286 <div class="right-info">287 <div class="s-price">$2.90</div>288 <div class="s-time">36min</div>289 </div>290 </div>291 <div class="s-desc">Every 20 min from 163 St - Amsterdam Av</div>292 <div class="s-actions">293 <span class="pill">Arrive 3:51 AM</span>294 </div>295 </div>296 297 <div class="suggest-card" style="top:1764px;">298 <div class="s-row-top">299 <div class="row">300 <div class="mini-badge">301 <svg viewBox="0 0 24 24" style="width:28px;height:28px;fill:#728392"><path d="M9 4a3 3 0 106 0 3 3 0 10-6 0zm1 6l-2 4 2 1v5h2v-4l2-2 2 2v4h2v-5l-2-4h-6z"/></svg>302 </div>303 <span style="margin:0 10px;">•</span>304 <div class="badge orange">D</div>305 </div>306 <div class="right-info">307 <div class="s-price">$2.90</div>308 <div class="s-time">39min</div>309 </div>310 </div>311 <div class="s-desc">Every 20 min from 145 St</div>312 <div class="s-actions">313 <span class="pill">Arrive 4:17 AM</span>314 </div>315 </div>316 317 <div class="suggest-card" style="top:1962px;">318 <div class="s-row-top">319 <div class="row">320 <div class="mini-badge">321 <svg viewBox="0 0 24 24" style="width:28px;height:28px;fill:#317ae5"><path d="M3 7h18v8H3V7zm3 10h12v2H6v-2z"/></svg>322 <span style="font-weight:800;color:#317ae5">Bx6</span>323 </div>324 <span style="margin:0 10px;">•</span>325 <div class="badge orange">D</div>326 </div>327 <div class="right-info">328 <div class="s-price">$2.90</div>329 <div class="s-time">45min</div>330 </div>331 </div>332 <div class="s-desc">Every 13 min from W 155 St/Amsterdam Av</div>333 <div class="s-actions">334 <span class="pill">Arrive 4:17 AM</span>335 </div>336 </div>337 338 <!-- Bottom mode bar -->339 <div id="bottom-bar">340 <div class="mode-list">341 <div class="mode active">342 <div class="circle">343 <svg viewBox="0 0 24 24"><path d="M12 2l4 8-4 12-4-12 4-8z"/></svg>344 </div>345 Classic346 </div>347 <div class="mode">348 <div class="circle">349 <svg viewBox="0 0 24 24"><path d="M5 5h14v4H5V5zm2 6h10v8H7v-8z"/></svg>350 </div>351 Step-free352 </div>353 <div class="mode">354 <div class="circle">355 <svg viewBox="0 0 24 24"><path d="M3 8h18v6H3V8zm2 8h14v2H5v-2z"/></svg>356 </div>357 Bus+358 </div>359 <div class="mode">360 <div class="circle">361 <svg viewBox="0 0 24 24"><rect x="5" y="6" width="14" height="10" rx="2"></rect><circle cx="8" cy="17" r="1.5"></circle><circle cx="16" cy="17" r="1.5"></circle></svg>362 </div>363 Train+364 </div>365 <div class="mode">366 <div class="circle">367 <svg viewBox="0 0 24 24"><path d="M12 2v12M6 9h12M4 18h16" stroke="#fff" stroke-width="2" fill="none"/></svg>368 </div>369 Walk Less370 </div>371 <div class="mode">372 <div class="circle">373 <svg viewBox="0 0 24 24"><path d="M3 17l5-3 4 2 5-3 4 2v3H3z"/></svg>374 </div>375 Mix376 </div>377 </div>378 <div class="home-indicator"></div>379 </div>380 381</div>382</body>383</html>