GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Transit UI Mock</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background:#f3f6fb;10 border-radius:32px;11 box-shadow: 0 8px 24px rgba(0,0,0,0.12);12 }13 14 /* Map placeholder */15 .map {16 position:absolute; top:0; left:0; width:100%; height:620px;17 background:#E0E0E0;18 border-bottom:1px solid #BDBDBD;19 display:flex; align-items:center; justify-content:center;20 color:#757575; font-size:28px; letter-spacing:0.4px;21 }22 23 /* Floating controls on map */24 .circle-btn {25 position:absolute; top:160px;26 width:116px; height:116px; border-radius:58px;27 background:#ffffff; box-shadow:0 6px 16px rgba(0,0,0,0.18);28 display:flex; align-items:center; justify-content:center;29 }30 .circle-btn.left { left:34px; }31 .circle-btn.mid { left:476px; }32 .pill {33 position:absolute; right:34px; top:150px;34 background:#ffffff; color:#1a4d72;35 padding:22px 32px; border-radius:44px; font-weight:600;36 box-shadow:0 6px 16px rgba(0,0,0,0.18);37 display:flex; align-items:center; gap:18px; font-size:34px;38 }39 .pill .clock {40 width:40px; height:40px; display:inline-block;41 }42 43 /* Main panel */44 .panel {45 position:absolute; left:0; top:280px; width:100%; height:1920px;46 background:#2E5A79; border-top-left-radius:36px; border-top-right-radius:36px;47 box-shadow:0 -8px 18px rgba(0,0,0,0.08) inset;48 color:#fff;49 }50 .panel-inner { padding:40px; }51 52 /* Location rows */53 .location {54 display:flex; align-items:center; gap:24px;55 background:#355E80; border-radius:22px;56 padding:26px 28px; margin-bottom:28px;57 }58 .loc-icon {59 width:64px; height:64px; border-radius:12px; background:#2c4e68;60 display:flex; align-items:center; justify-content:center;61 }62 .loc-text { font-size:36px; line-height:44px; font-weight:700; flex:1; }63 .swap {64 width:80px; height:80px; border-radius:20px; background:#2c4e68;65 display:flex; align-items:center; justify-content:center;66 }67 68 /* transport summary tiles */69 .summary {70 display:flex; gap:22px; margin-top:12px; margin-bottom:32px;71 }72 .tile {73 flex:1; background:#385E82; border-radius:20px; padding:28px;74 display:flex; flex-direction:column; gap:12px;75 }76 .tile .top { display:flex; align-items:center; gap:16px; }77 .tile .top span.icon { width:36px; height:36px; border-radius:8px; background:#274b62; display:inline-block; }78 .tile .stats { font-size:40px; font-weight:800; }79 .tile .label { font-size:28px; color:#cfe5f8; }80 81 /* Suggested heading */82 .section-title { font-size:40px; font-weight:800; margin:10px 0 18px; }83 84 /* Route cards */85 .route-card {86 background:#ffffff; border-radius:22px; padding:26px 28px;87 display:flex; flex-direction:column; gap:18px; color:#2a2a2a;88 margin-bottom:20px;89 }90 .route-top {91 display:flex; align-items:center; justify-content:space-between;92 }93 .badges { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }94 .line-badge {95 width:56px; height:56px; border-radius:28px; display:flex; align-items:center; justify-content:center;96 color:#fff; font-weight:800; font-size:28px;97 box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2);98 }99 .badge-green { background:#29a053; }100 .badge-blue { background:#215de0; }101 .badge-orange { background:#f28c21; }102 .badge-yellow { background:#f1c40f; color:#333; }103 .info-dot {104 width:20px; height:20px; background:#ff9f43; border-radius:10px; border:2px solid #fff; position:relative; top:-12px; left:-8px;105 }106 .price-time { display:flex; align-items:center; gap:18px; }107 .price { color:#1565c0; font-weight:800; font-size:34px; }108 .time { color:#6b6b6b; font-size:32px; }109 110 .route-sub {111 font-size:30px; color:#5b6a78;112 }113 .from-st { color:#2a2a2a; font-weight:600; }114 115 /* bottom actions */116 .bottom-bar {117 position:absolute; left:0; bottom:0; width:100%;118 background:#eef2f7; border-top-left-radius:26px; border-top-right-radius:26px;119 padding:26px 34px;120 box-shadow: 0 -6px 16px rgba(0,0,0,0.12);121 }122 .bottom-actions { display:flex; align-items:center; justify-content:space-between; }123 .action {124 display:flex; flex-direction:column; align-items:center; gap:10px;125 font-size:28px; color:#3a4a58;126 }127 .action .icon-circle {128 width:120px; height:120px; border-radius:60px; background:#ffffff;129 box-shadow:0 6px 14px rgba(0,0,0,0.10);130 display:flex; align-items:center; justify-content:center;131 }132 .action.active .icon-circle { background:#2cc36b; color:#fff; }133 .action.active .label { font-weight:800; color:#1e3a4e; }134 135 /* Simple inline SVG styles */136 svg { display:block; }137</style>138</head>139<body>140<div id="render-target">141 142 <!-- Map -->143 <div class="map">[IMG: Google Map - New York City]</div>144 145 <!-- Floating buttons -->146 <div class="circle-btn left">147 <!-- back arrow -->148 <svg width="54" height="54" viewBox="0 0 24 24">149 <path d="M14 6l-6 6 6 6" fill="none" stroke="#1a4d72" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>150 </svg>151 </div>152 153 <div class="circle-btn mid">154 <!-- refresh -->155 <svg width="54" height="54" viewBox="0 0 24 24">156 <path d="M20 12a8 8 0 1 1-2.3-5.7" fill="none" stroke="#1a4d72" stroke-width="2"/>157 <path d="M20 4v6h-6" fill="none" stroke="#1a4d72" stroke-width="2" stroke-linecap="round"/>158 </svg>159 </div>160 161 <div class="pill">162 <svg class="clock" viewBox="0 0 24 24">163 <circle cx="12" cy="12" r="9" fill="none" stroke="#1a4d72" stroke-width="2"/>164 <path d="M12 7v6l4 2" stroke="#1a4d72" stroke-width="2" fill="none" stroke-linecap="round"/>165 </svg>166 Leave: Now167 </div>168 169 <!-- Panel -->170 <div class="panel">171 <div class="panel-inner">172 173 <!-- Locations -->174 <div class="location">175 <div class="loc-icon">176 <svg width="34" height="34" viewBox="0 0 24 24">177 <path d="M4 6h16M4 12h12M4 18h8" stroke="#9cc0db" stroke-width="2" stroke-linecap="round"/>178 </svg>179 </div>180 <div class="loc-text">Upper East Side, New York, NY, USA</div>181 <div class="swap">182 <svg width="34" height="34" viewBox="0 0 24 24">183 <path d="M8 5l-4 4 4 4M16 19l4-4-4-4" stroke="#9cc0db" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>184 </svg>185 </div>186 </div>187 188 <div class="location">189 <div class="loc-icon">190 <svg width="34" height="34" viewBox="0 0 24 24">191 <path d="M4 6h16M4 12h12M4 18h8" stroke="#9cc0db" stroke-width="2" stroke-linecap="round"/>192 </svg>193 </div>194 <div class="loc-text">Jamaica, Queens, NY, USA</div>195 <div class="swap">196 <svg width="34" height="34" viewBox="0 0 24 24">197 <path d="M8 5l-4 4 4 4M16 19l4-4-4-4" stroke="#9cc0db" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>198 </svg>199 </div>200 </div>201 202 <!-- Summary tiles -->203 <div class="summary">204 <div class="tile">205 <div class="top">206 <span class="icon"></span>207 <div class="stats">957 cal 230 min</div>208 </div>209 <div class="label">Walk</div>210 </div>211 <div class="tile">212 <div class="top">213 <span class="icon"></span>214 <div class="stats">362 cal 87 min</div>215 </div>216 <div class="label">Bikes</div>217 </div>218 <div class="tile">219 <div class="top">220 <span class="icon"></span>221 <div class="stats">~43 min</div>222 </div>223 <div class="label">Cabs</div>224 </div>225 </div>226 227 <div class="section-title">Suggested</div>228 229 <!-- Route card 1 -->230 <div class="route-card">231 <div class="route-top">232 <div class="badges">233 <div class="line-badge badge-green">6</div>234 <div class="info-dot"></div>235 <div class="line-badge badge-green">6</div>236 <div class="info-dot"></div>237 <div class="line-badge badge-blue">E</div>238 </div>239 <div class="price-time">240 <div class="price">$2.90</div>241 <div class="time">58 min</div>242 </div>243 </div>244 <div class="route-sub">245 <svg width="28" height="28" viewBox="0 0 24 24" style="vertical-align:middle;">246 <path d="M3 12c4-4 14-4 18 0" stroke="#f0b429" stroke-width="2" fill="none"/>247 <path d="M6 12c3-3 9-3 12 0" stroke="#f0b429" stroke-width="2" fill="none"/>248 </svg>249 in 0, 1, 2 min <span class="from-st">from 77 St</span>250 </div>251 </div>252 253 <!-- Route card 2 -->254 <div class="route-card">255 <div class="route-top">256 <div class="badges">257 <div class="line-badge badge-green">6</div>258 <div class="info-dot"></div>259 <div class="line-badge badge-green">6</div>260 <div class="info-dot"></div>261 <div class="line-badge badge-orange">F</div>262 <div class="info-dot"></div>263 </div>264 <div class="price-time">265 <div class="price">$2.90</div>266 <div class="time">65 min</div>267 </div>268 </div>269 <div class="route-sub">Next 7:48 PM, 7:49 PM <span class="from-st">from 77 St</span></div>270 </div>271 272 <!-- Route card 3 -->273 <div class="route-card">274 <div class="route-top">275 <div class="badges">276 <div class="line-badge badge-green">6</div>277 <div class="info-dot"></div>278 <div class="line-badge badge-green">6</div>279 <div class="info-dot"></div>280 <div class="line-badge badge-yellow">R</div>281 <div class="line-badge badge-blue">E</div>282 </div>283 <div class="price-time">284 <div class="price">$2.90</div>285 <div class="time">67 min</div>286 </div>287 </div>288 <div class="route-sub">Next 7:48 PM, 7:49 PM <span class="from-st">from 77 St</span></div>289 </div>290 291 <!-- Route card 4 -->292 <div class="route-card">293 <div class="route-top">294 <div class="badges">295 <div class="line-badge badge-green">6</div>296 <div class="info-dot"></div>297 <div class="line-badge badge-green">6</div>298 <div class="info-dot"></div>299 <div class="line-badge badge-yellow">R</div>300 <div class="line-badge badge-orange">F</div>301 <div class="info-dot"></div>302 </div>303 <div class="price-time">304 <div class="price">$2.90</div>305 <div class="time">65 min</div>306 </div>307 </div>308 <div class="route-sub">309 <svg width="28" height="28" viewBox="0 0 24 24" style="vertical-align:middle;">310 <path d="M3 12c4-4 14-4 18 0" stroke="#f0b429" stroke-width="2" fill="none"/>311 <path d="M6 12c3-3 9-3 12 0" stroke="#f0b429" stroke-width="2" fill="none"/>312 </svg>313 in 0, 1, 2 min <span class="from-st">from 77 St</span>314 </div>315 </div>316 317 <!-- Route card 5 -->318 <div class="route-card">319 <div class="route-top">320 <div class="badges">321 <div class="line-badge badge-green">6</div>322 <div class="info-dot"></div>323 <div class="line-badge badge-green">6</div>324 <div class="info-dot"></div>325 <div class="line-badge badge-blue">E</div>326 </div>327 <div class="price-time">328 <div class="price">$2.90</div>329 <div class="time">64 min</div>330 </div>331 </div>332 <div class="route-sub">Next 7:48 PM, 7:49 PM <span class="from-st">from 77 St</span></div>333 </div>334 335 </div>336 337 <!-- Bottom bar -->338 <div class="bottom-bar">339 <div class="bottom-actions">340 <div class="action active">341 <div class="icon-circle">342 <svg width="44" height="44" viewBox="0 0 24 24">343 <path d="M5 12l5 5L19 7" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>344 </svg>345 </div>346 <div class="label">Classic</div>347 </div>348 <div class="action">349 <div class="icon-circle">350 <svg width="44" height="44" viewBox="0 0 24 24">351 <path d="M4 20h16M8 20V6a4 4 0 1 1 8 0v14" fill="none" stroke="#2a6ac9" stroke-width="2"/>352 </svg>353 </div>354 <div class="label">Step-free</div>355 </div>356 <div class="action">357 <div class="icon-circle">358 <svg width="44" height="44" viewBox="0 0 24 24">359 <rect x="3" y="8" width="18" height="10" rx="2" fill="none" stroke="#3a74a1" stroke-width="2"/>360 <circle cx="7" cy="19" r="2" fill="#3a74a1"/>361 <circle cx="17" cy="19" r="2" fill="#3a74a1"/>362 </svg>363 </div>364 <div class="label">Bus+</div>365 </div>366 <div class="action">367 <div class="icon-circle">368 <svg width="44" height="44" viewBox="0 0 24 24">369 <rect x="6" y="3" width="12" height="18" rx="3" fill="none" stroke="#c0392b" stroke-width="2"/>370 <path d="M12 7v6" stroke="#c0392b" stroke-width="2"/>371 </svg>372 </div>373 <div class="label">Train+</div>374 </div>375 <div class="action">376 <div class="icon-circle">377 <svg width="44" height="44" viewBox="0 0 24 24">378 <path d="M4 18l16-10M4 8l16 10" stroke="#2a6ac9" stroke-width="2" fill="none"/>379 </svg>380 </div>381 <div class="label">Walk Less</div>382 </div>383 <div class="action">384 <div class="icon-circle">385 <svg width="44" height="44" viewBox="0 0 24 24">386 <circle cx="12" cy="12" r="9" fill="none" stroke="#3a74a1" stroke-width="2"/>387 <path d="M12 6v12M6 12h12" stroke="#3a74a1" stroke-width="2"/>388 </svg>389 </div>390 <div class="label">Mix</div>391 </div>392 </div>393 </div>394 395 </div>396 397</div>398</body>399</html>