GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Transit Results UI</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width:1080px; height:2400px;9 position:relative; overflow:hidden;10 background:#FFFFFF; color:#222;11 box-shadow: 0 0 0 1px rgba(0,0,0,0.08);12 }13 /* Status bar */14 .status-bar {15 height:90px; padding:0 30px;16 display:flex; align-items:center; justify-content:space-between;17 font-size:38px; color:#333;18 }19 .status-left { display:flex; align-items:center; gap:20px; }20 .status-right { display:flex; align-items:center; gap:22px; }21 .dot { width:14px; height:14px; background:#333; border-radius:50%; opacity:0.7; }22 /* Header with search fields */23 .header { padding:10px 30px 0 30px; }24 .header-top {25 display:flex; align-items:center; justify-content:space-between;26 margin-bottom:14px;27 }28 .top-left { display:flex; align-items:center; gap:26px; }29 .icon-btn { width:60px; height:60px; border-radius:30px; display:flex; align-items:center; justify-content:center; background:#F4F4F4; }30 .kebab { width:60px; height:60px; display:flex; align-items:center; justify-content:center; }31 .search-stack { display:flex; flex-direction:column; gap:16px; margin-right:120px; }32 .field {33 width:740px; height:90px; border:1px solid #E0E0E0; border-radius:20px;34 display:flex; align-items:center; padding:0 26px; font-size:40px; background:#FAFAFA;35 }36 .field .text { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#222; }37 .swap-stack {38 position:absolute; right:120px; top:120px;39 width:48px; height:130px; display:flex; align-items:center; justify-content:center;40 }41 /* Travel mode chips */42 .modes { display:flex; align-items:center; gap:30px; padding:26px 30px 10px 30px; }43 .chip {44 display:flex; align-items:center; gap:16px;45 padding:18px 24px; border-radius:30px; border:1px solid #E0E0E0; color:#555; font-size:36px; background:#FFF;46 }47 .chip svg { width:40px; height:40px; }48 .chip.active { background:#4285F4; color:#FFFFFF; border-color:#4285F4; }49 /* Filters row */50 .filters { padding:10px 30px; display:flex; justify-content:space-between; align-items:center; }51 .pill {52 height:80px; border:1px solid #E0E0E0; border-radius:16px; background:#FFF; padding:0 24px;53 display:flex; align-items:center; gap:16px; font-size:36px; color:#333;54 }55 .section-title { font-size:54px; font-weight:700; padding:30px; }56 /* Results cards */57 .result { border-top:1px solid #EEE; padding:28px 30px 28px 30px; }58 .line-top { display:flex; align-items:center; justify-content:space-between; }59 .route-icons { display:flex; align-items:center; gap:18px; }60 .route-icons .mini { width:52px; height:52px; border-radius:10px; background:#F1F5F9; border:1px solid #DCE3EA;61 display:flex; align-items:center; justify-content:center; }62 .duration { font-size:64px; font-weight:700; }63 .leave { font-size:42px; color:#333; margin-top:16px; }64 .cost { font-size:42px; color:#333; margin-top:12px; }65 .subtext { font-size:34px; color:#666; margin-top:10px; }66 /* Ride service card */67 .ride-section { border-top:10px solid #F0F0F0; margin-top:10px; }68 .ride-title { font-size:54px; font-weight:700; padding:30px; }69 .lyft-card { padding:18px 30px 24px 30px; }70 .lyft-row { display:flex; align-items:flex-start; justify-content:space-between; }71 .lyft-left { display:flex; align-items:center; gap:22px; }72 .badge { width:90px; height:90px; border-radius:20px; background:#F6E2EF; border:1px solid #E6B7D1;73 display:flex; align-items:center; justify-content:center; color:#8B1D63; font-weight:700; font-size:38px; }74 .lyft-name { font-size:52px; font-weight:700; }75 .lyft-time { color:#2E7D32; font-weight:700; font-size:58px; }76 .lyft-meta { font-size:38px; color:#555; margin-top:18px; }77 .link { color:#1A73E8; text-decoration:none; font-size:38px; }78 /* Bottom gesture bar */79 .gesture {80 position:absolute; bottom:40px; left:50%; transform:translateX(-50%);81 width:520px; height:14px; border-radius:8px; background:#C7C7C7;82 }83 /* Simple helper icons */84 .pin-label { position:absolute; left:30px; top:200px; display:flex; align-items:center; gap:10px; color:#D23F31; font-size:34px; }85</style>86</head>87<body>88<div id="render-target">89 90 <!-- Status bar -->91 <div class="status-bar">92 <div class="status-left">93 <div>11:01</div>94 <div class="dot"></div>95 <div class="dot"></div>96 <div class="dot"></div>97 <div class="dot"></div>98 <div class="dot"></div>99 </div>100 <div class="status-right">101 <!-- Signal -->102 <svg width="36" height="36" viewBox="0 0 24 24">103 <rect x="2" y="16" width="3" height="6" fill="#444"/>104 <rect x="7" y="12" width="3" height="10" fill="#444"/>105 <rect x="12" y="8" width="3" height="14" fill="#444"/>106 <rect x="17" y="4" width="3" height="18" fill="#444"/>107 </svg>108 <!-- Battery -->109 <svg width="52" height="36" viewBox="0 0 28 16">110 <rect x="1" y="1" width="22" height="14" rx="3" ry="3" fill="none" stroke="#444" stroke-width="2"/>111 <rect x="3" y="4" width="16" height="8" fill="#444"/>112 <rect x="24" y="5" width="3" height="6" fill="#444"/>113 </svg>114 </div>115 </div>116 117 <!-- Header with search fields -->118 <div class="header">119 <div class="header-top">120 <div class="top-left">121 <div class="icon-btn">122 <!-- Back -->123 <svg width="40" height="40" viewBox="0 0 24 24">124 <path d="M15 4 L7 12 L15 20" fill="none" stroke="#333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>125 </svg>126 </div>127 <div class="icon-btn">128 <!-- Small circle icon -->129 <svg width="40" height="40" viewBox="0 0 24 24">130 <circle cx="12" cy="12" r="9" fill="#666"/>131 </svg>132 </div>133 </div>134 <div class="kebab">135 <!-- Vertical dots -->136 <svg width="40" height="40" viewBox="0 0 24 24">137 <circle cx="12" cy="5" r="2.2" fill="#555"/>138 <circle cx="12" cy="12" r="2.2" fill="#555"/>139 <circle cx="12" cy="19" r="2.2" fill="#555"/>140 </svg>141 </div>142 </div>143 144 <div class="search-stack">145 <div class="field">146 <div class="text">Grays Ferry Crescent Skatep...</div>147 </div>148 <div class="field">149 <div class="text">New York</div>150 </div>151 </div>152 153 <!-- Vertical swap arrows near fields -->154 <div class="swap-stack">155 <svg width="48" height="120" viewBox="0 0 24 60">156 <path d="M12 6 L6 12 L18 12 Z" fill="#333"/>157 <rect x="11" y="12" width="2" height="18" fill="#333"/>158 <path d="M12 54 L18 48 L6 48 Z" fill="#333"/>159 <rect x="11" y="30" width="2" height="18" fill="#333"/>160 </svg>161 </div>162 163 <!-- Red location pin label -->164 <div class="pin-label">165 <svg width="34" height="34" viewBox="0 0 24 24">166 <path d="M12 2 C8 2 5 5 5 9 C5 14 12 22 12 22 C12 22 19 14 19 9 C19 5 16 2 12 2 Z" fill="#D23F31"/>167 <circle cx="12" cy="9" r="3" fill="#FFF"/>168 </svg>169 </div>170 </div>171 172 <!-- Mode chips -->173 <div class="modes">174 <div class="chip">175 <!-- Car -->176 <svg viewBox="0 0 24 24">177 <path d="M4 15 H20 L18 9 H6 Z" fill="none" stroke="#666" stroke-width="2"/>178 <circle cx="7" cy="16.5" r="2" fill="#666"/>179 <circle cx="17" cy="16.5" r="2" fill="#666"/>180 </svg>181 <span>1 hr 52</span>182 </div>183 <div class="chip">184 <!-- Bike -->185 <svg viewBox="0 0 24 24">186 <circle cx="6" cy="17" r="4" fill="none" stroke="#666" stroke-width="2"/>187 <circle cx="18" cy="17" r="4" fill="none" stroke="#666" stroke-width="2"/>188 <path d="M10 6 L13 10 L9 10" stroke="#666" stroke-width="2" fill="none"/>189 </svg>190 <span>—</span>191 </div>192 <div class="chip active">193 <!-- Train -->194 <svg viewBox="0 0 24 24">195 <rect x="5" y="5" width="14" height="10" rx="2" ry="2" fill="#fff"/>196 <rect x="7" y="13" width="10" height="2" fill="#fff"/>197 </svg>198 <span>1 hr 58</span>199 </div>200 <div class="chip">201 <!-- Walk -->202 <svg viewBox="0 0 24 24">203 <circle cx="12" cy="6" r="3" fill="#666"/>204 <path d="M12 9 L10 14 L7 18 M12 9 L15 14 L17 20" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"/>205 </svg>206 <span>1 day</span>207 </div>208 <div class="chip">209 <!-- Chart icon -->210 <svg viewBox="0 0 24 24">211 <rect x="4" y="12" width="3" height="8" fill="#666"/>212 <rect x="10" y="9" width="3" height="11" fill="#666"/>213 <rect x="16" y="6" width="3" height="14" fill="#666"/>214 </svg>215 <span>1 hr 52</span>216 </div>217 </div>218 219 <!-- Filters -->220 <div class="filters">221 <div class="pill">222 <span>Depart at 11:01 pm</span>223 <svg width="28" height="28" viewBox="0 0 24 24">224 <path d="M7 9 L12 14 L17 9" fill="none" stroke="#555" stroke-width="2" stroke-linecap="round"/>225 </svg>226 </div>227 <div class="pill">228 <svg width="36" height="36" viewBox="0 0 24 24">229 <rect x="4" y="5" width="16" height="2" fill="#333"/>230 <rect x="6" y="11" width="12" height="2" fill="#333"/>231 <rect x="8" y="17" width="8" height="2" fill="#333"/>232 </svg>233 <span>Options</span>234 </div>235 </div>236 237 <div class="section-title">Public transport</div>238 239 <!-- First result -->240 <div class="result">241 <div class="line-top">242 <div class="route-icons">243 <div class="mini">244 <!-- Car icon small -->245 <svg width="36" height="36" viewBox="0 0 24 24">246 <path d="M4 14 H20 L18 9 H6 Z" fill="none" stroke="#667085" stroke-width="2"/>247 </svg>248 </div>249 <span style="font-size:36px; color:#6B7280;">›</span>250 <div class="mini">251 <!-- Bus -->252 <svg width="36" height="36" viewBox="0 0 24 24">253 <rect x="5" y="6" width="14" height="10" rx="2" ry="2" fill="#667085"/>254 </svg>255 </div>256 <span style="font-size:36px; color:#6B7280;">›</span>257 <div class="mini" style="background:#E8F0FE; border-color:#CBE0FF;">258 <span style="font-size:30px; color:#1A73E8; font-weight:700;">Key…</span>259 </div>260 <div class="mini" style="background:#E8F0FE; border-color:#CBE0FF;">261 <span style="font-size:30px; color:#1A73E8;">…</span>262 </div>263 <span style="font-size:36px; color:#6B7280;">›</span>264 <div class="mini">265 <!-- Train -->266 <svg width="36" height="36" viewBox="0 0 24 24">267 <rect x="6" y="6" width="12" height="10" rx="2" ry="2" fill="#667085"/>268 </svg>269 </div>270 <div class="mini" style="background:#FFD9D7; border-color:#F4B7B4;">271 <span style="font-size:28px; color:#D23F31; font-weight:700;">NEC</span>272 </div>273 <div class="mini" style="background:#E8F0FE; border-color:#CBE0FF;">274 <span style="font-size:30px; color:#1A73E8;">↗</span>275 </div>276 </div>277 <div class="duration">1 hr 59 min</div>278 </div>279 <div class="leave">Leave by 1:35 pm</div>280 <div class="cost">$86</div>281 <div class="subtext">Scheduled at 1:55 pm, 2:15 pm from William H. Gray III 30th Street</div>282 </div>283 284 <!-- Second result -->285 <div class="result">286 <div class="line-top">287 <div class="route-icons">288 <div class="mini">289 <svg width="36" height="36" viewBox="0 0 24 24">290 <path d="M4 14 H20 L18 9 H6 Z" fill="none" stroke="#667085" stroke-width="2"/>291 </svg>292 </div>293 <span style="font-size:36px; color:#6B7280;">›</span>294 <div class="mini">295 <svg width="36" height="36" viewBox="0 0 24 24">296 <rect x="5" y="6" width="14" height="10" rx="2" ry="2" fill="#667085"/>297 </svg>298 </div>299 <span style="font-size:36px; color:#6B7280;">›</span>300 <div class="mini" style="background:#E8F0FE; border-color:#CBE0FF;">301 <span style="font-size:30px; color:#1A73E8; font-weight:700;">Key…</span>302 </div>303 <div class="mini" style="background:#E8F0FE; border-color:#CBE0FF;">304 <span style="font-size:30px; color:#1A73E8;">No…</span>305 </div>306 <span style="font-size:36px; color:#6B7280;">›</span>307 <div class="mini" style="background:#F6F6F6;">308 <svg width="36" height="36" viewBox="0 0 24 24">309 <path d="M12 4 L9 10 L6 12" stroke="#888" stroke-width="2" fill="none"/>310 <circle cx="6" cy="18" r="1.8" fill="#888"/>311 <circle cx="14" cy="18" r="1.8" fill="#888"/>312 </svg>313 </div>314 <span style="font-size:36px; color:#6B7280;">›</span>315 <div class="mini">316 <svg width="36" height="36" viewBox="0 0 24 24">317 <rect x="5" y="6" width="14" height="10" rx="2" ry="2" fill="#667085"/>318 </svg>319 </div>320 </div>321 <div class="duration">1 hr 58 min</div>322 </div>323 <div class="leave">Leave by 1:35 pm</div>324 <div class="cost">$72</div>325 <div class="subtext">Scheduled at 1:55 pm, 2:15 pm from William H. Gray III 30th Street</div>326 </div>327 328 <!-- Ride service -->329 <div class="ride-section">330 <div class="ride-title">Ride service</div>331 <div class="lyft-card">332 <div class="lyft-row">333 <div class="lyft-left">334 <div class="badge">Lyft</div>335 <div>336 <div class="lyft-name">Lyft</div>337 <div class="lyft-meta">10 min away · With light traffic</div>338 <div class="lyft-meta">101 mi · Estimate for Wait & Save (excludes...) · <a class="link" href="#">more</a></div>339 </div>340 </div>341 <div style="text-align:right;">342 <div class="lyft-time">1 hr 52 min</div>343 <div class="lyft-meta" style="margin-top:14px;">$140–170</div>344 </div>345 </div>346 </div>347 </div>348 349 <!-- Placeholder large map area (not shown, but to fill space visually) -->350 <div style="height:1020px; background:#F9FAFB; border-top:10px solid #F0F0F0;">351 <div style="margin:40px; width:1000px; height:900px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; font-size:44px;">352 [IMG: Directions content area]353 </div>354 </div>355 356 <div class="gesture"></div>357</div>358</body>359</html>