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 Results UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color: #202124; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #FFFFFF; border-radius: 28px; box-shadow: 0 12px 40px rgba(0,0,0,0.12);12 }13 .status-bar {14 height: 88px; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; color: #3c4043; font-size: 34px;15 }16 .status-right { display: flex; gap: 26px; align-items: center; }17 .dot { width: 18px; height: 18px; border-radius: 50%; background: #9AA0A6; display: inline-block; }18 .top-area { padding: 0 32px 12px 32px; }19 .route-header { display: flex; align-items: flex-start; gap: 20px; }20 .left-icons { width: 72px; display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 8px; }21 .circle-blue { width: 28px; height: 28px; border-radius: 50%; border: 6px solid #1a73e8; background: #ffffff; }22 .vertical-dots { width: 4px; height: 40px; background: repeating-linear-gradient(to bottom, #9AA0A6 0 4px, transparent 4px 8px); border-radius: 2px; }23 .input-stack { flex: 1; display: flex; flex-direction: column; gap: 16px; }24 .field {25 border: 1px solid #DADCE0; border-radius: 20px; height: 120px; display: flex; align-items: center; padding: 0 28px; font-size: 42px; color: #1a73e8; background: #fff;26 box-shadow: inset 0 1px 0 rgba(0,0,0,0.03);27 }28 .field.secondary { color: #202124; }29 .field .right-actions { margin-left: auto; display: flex; align-items: center; gap: 26px; color: #5f6368; }30 .mode-row { margin-top: 26px; display: flex; align-items: center; gap: 34px; color: #5f6368; font-size: 38px; }31 .mode { display: flex; align-items: center; gap: 14px; }32 .mode .chip {33 padding: 16px 22px; border-radius: 24px; border: 1px solid #DADCE0; background: #fff; color: #3c4043; font-size: 36px;34 }35 .mode .chip.active { background: #E8F0FE; color: #1a73e8; border-color: #C5D7FB; }36 .divider { height: 2px; background: #E0E0E0; margin: 22px 0; }37 .controls { display: flex; justify-content: space-between; align-items: center; }38 .pill {39 border: 1px solid #DADCE0; border-radius: 26px; padding: 18px 26px; font-size: 36px; background: #fff; color: #3c4043;40 display: inline-flex; align-items: center; gap: 18px;41 box-shadow: 0 1px 0 rgba(0,0,0,0.03);42 }43 .content { padding: 0 32px; }44 .section-title { font-size: 44px; font-weight: 600; margin: 26px 0; color: #202124; }45 .card {46 border-top: 1px solid #E0E0E0;47 padding: 34px 4px 34px 4px;48 }49 .route-row { display: flex; justify-content: space-between; align-items: center; }50 .segments { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }51 .sep { color: #9AA0A6; font-size: 38px; }52 .duration { font-size: 50px; font-weight: 600; color: #202124; }53 .sub { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 36px; color: #5f6368; }54 .note { margin-top: 8px; font-size: 34px; color: #d93025; }55 .price { color: #5f6368; }56 /* Badges */57 .badge {58 display: inline-flex; align-items: center; justify-content: center;59 height: 56px; min-width: 56px; padding: 0 16px; border-radius: 12px; font-weight: 700; color: #fff; font-size: 34px;60 }61 .badge-round { border-radius: 50%; width: 56px; min-width: 56px; }62 .b-red { background: #D93025; }63 .b-gold { background: #C89400; }64 .b-pink { background: #D48BA2; }65 .b-orange { background: #E67C2E; }66 .b-yellow { background: #F6C200; color: #202124; }67 .b-purple { background: #6A1B9A; }68 .b-blue { background: #1a73e8; }69 .b-navy { background: #2947A8; }70 .bus-red { background: #E53935; }71 .alert { display: flex; align-items: center; gap: 12px; color: #d93025; font-size: 36px; margin-top: 20px; }72 /* Simple icons */73 svg { display: inline-block; }74 .ic { width: 44px; height: 44px; }75 .ic-lg { width: 48px; height: 48px; }76 .mode-icon { width: 44px; height: 44px; }77 /* bottom gesture bar */78 .gesture { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); width: 360px; height: 12px; background: #C7C7C7; border-radius: 8px; }79</style>80</head>81<body>82<div id="render-target">83 <div class="status-bar">84 <div>9:42</div>85 <div class="status-right">86 <div class="dot"></div>87 <div>82°</div>88 <div class="dot"></div>89 <div class="dot"></div>90 <div class="dot"></div>91 </div>92 </div>93 94 <div class="top-area">95 <div class="route-header">96 <div class="left-icons">97 <!-- Back arrow -->98 <svg class="ic" viewBox="0 0 24 24">99 <path d="M15 18l-6-6 6-6" fill="none" stroke="#5f6368" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>100 </svg>101 <div class="circle-blue"></div>102 <div class="vertical-dots"></div>103 <!-- Pin -->104 <svg class="ic" viewBox="0 0 24 24">105 <path d="M12 2C8.7 2 6 4.7 6 8c0 5.3 6 14 6 14s6-8.7 6-14c0-3.3-2.7-6-6-6zm0 8a2 2 0 110-4 2 2 0 010 4z" fill="#EA4335"></path>106 </svg>107 </div>108 <div class="input-stack">109 <div class="field">110 Your location111 <div class="right-actions">112 <!-- more (vertical) -->113 <svg class="ic" viewBox="0 0 24 24">114 <circle cx="12" cy="5" r="2" fill="#5f6368"></circle>115 <circle cx="12" cy="12" r="2" fill="#5f6368"></circle>116 <circle cx="12" cy="19" r="2" fill="#5f6368"></circle>117 </svg>118 </div>119 </div>120 <div class="field secondary">121 Louvre Museum122 <div class="right-actions">123 <!-- swap -->124 <svg class="ic" viewBox="0 0 24 24">125 <path d="M7 7h10l-3-3M17 17H7l3 3" fill="none" stroke="#5f6368" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>126 </svg>127 </div>128 </div>129 </div>130 </div>131 132 <div class="mode-row">133 <div class="mode">134 <!-- car -->135 <svg class="mode-icon" viewBox="0 0 24 24">136 <path d="M3 15h18l-2-6H5l-2 6zm3 3a2 2 0 110-4 2 2 0 010 4zm12 0a2 2 0 110-4 2 2 0 010 4z" fill="#5f6368"></path>137 </svg>138 <span>1 hr 37</span>139 </div>140 <div class="mode">141 <!-- bike -->142 <svg class="mode-icon" viewBox="0 0 24 24">143 <circle cx="6" cy="17" r="4" fill="none" stroke="#5f6368" stroke-width="2"></circle>144 <circle cx="18" cy="17" r="4" fill="none" stroke="#5f6368" stroke-width="2"></circle>145 <path d="M7 13l3-3h4l2 4" stroke="#5f6368" stroke-width="2" fill="none"></path>146 </svg>147 <span>—</span>148 </div>149 <div class="mode">150 <!-- train -->151 <svg class="mode-icon" viewBox="0 0 24 24">152 <rect x="5" y="5" width="14" height="10" rx="2" fill="#1a73e8"></rect>153 <circle cx="8" cy="17" r="1.8" fill="#1a73e8"></circle>154 <circle cx="16" cy="17" r="1.8" fill="#1a73e8"></circle>155 </svg>156 <div class="chip active">1 hr 55</div>157 </div>158 <div class="mode">159 <!-- walk -->160 <svg class="mode-icon" viewBox="0 0 24 24">161 <circle cx="12" cy="5" r="2" fill="#5f6368"></circle>162 <path d="M12 7l-2 4-3 2m5-2l3 5" stroke="#5f6368" stroke-width="2" fill="none" stroke-linecap="round"></path>163 </svg>164 <span>1 day</span>165 </div>166 <div class="mode">167 <!-- bike -->168 <svg class="mode-icon" viewBox="0 0 24 24">169 <circle cx="6" cy="17" r="4" fill="none" stroke="#5f6368" stroke-width="2"></circle>170 <circle cx="18" cy="17" r="4" fill="none" stroke="#5f6368" stroke-width="2"></circle>171 <path d="M7 13l3-3h4l2 4" stroke="#5f6368" stroke-width="2" fill="none"></path>172 </svg>173 <span>7 hr</span>174 </div>175 </div>176 177 <div class="divider"></div>178 179 <div class="controls">180 <div class="pill">181 <!-- clock -->182 <svg class="ic" viewBox="0 0 24 24">183 <circle cx="12" cy="12" r="9" fill="none" stroke="#5f6368" stroke-width="2"></circle>184 <path d="M12 7v6l4 2" stroke="#5f6368" stroke-width="2" fill="none" stroke-linecap="round"></path>185 </svg>186 <span>Depart at 9:37 PM</span>187 <svg class="ic" viewBox="0 0 24 24">188 <path d="M6 9l6 6 6-6" fill="none" stroke="#5f6368" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>189 </svg>190 </div>191 <div class="pill">192 <!-- sliders icon -->193 <svg class="ic" viewBox="0 0 24 24">194 <path d="M5 7h14M7 7v8M12 11h7M15 11v6" stroke="#5f6368" stroke-width="2" fill="none" stroke-linecap="round"></path>195 </svg>196 <span>Options</span>197 </div>198 </div>199 </div>200 201 <div class="content">202 <div class="section-title">Public transport</div>203 204 <!-- Card 1 -->205 <div class="card">206 <div class="route-row">207 <div class="segments">208 <!-- train icon -->209 <svg class="ic-lg" viewBox="0 0 24 24">210 <rect x="5" y="5" width="14" height="10" rx="2" fill="#5f6368"></rect>211 <circle cx="8" cy="17" r="1.6" fill="#5f6368"></circle>212 <circle cx="16" cy="17" r="1.6" fill="#5f6368"></circle>213 </svg>214 <div class="badge b-red">A</div>215 <span class="sep">›</span>216 <svg class="ic-lg" viewBox="0 0 24 24">217 <rect x="5" y="5" width="14" height="10" rx="2" fill="#5f6368"></rect>218 <circle cx="8" cy="17" r="1.6" fill="#5f6368"></circle>219 <circle cx="16" cy="17" r="1.6" fill="#5f6368"></circle>220 </svg>221 <span class="sep">›</span>222 <div class="badge b-gold">10</div>223 <span class="sep">›</span>224 <div class="badge b-pink">7</div>225 </div>226 <div class="duration">1 hr 55 min</div>227 </div>228 <div class="sub">229 <div>9:46 PM – 11:41 PM</div>230 <div class="price">€2.10</div>231 </div>232 <div class="note">233 in <span style="color:#d93025;">5 min</span> (delayed), <span style="color:#d93025;">25 min</span> (delayed) from République234 </div>235 </div>236 237 <!-- Card 2 -->238 <div class="card">239 <div class="route-row">240 <div class="segments">241 <svg class="ic-lg" viewBox="0 0 24 24">242 <rect x="5" y="5" width="14" height="10" rx="2" fill="#5f6368"></rect>243 <circle cx="8" cy="17" r="1.6" fill="#5f6368"></circle>244 <circle cx="16" cy="17" r="1.6" fill="#5f6368"></circle>245 </svg>246 <div class="badge b-red">A</div>247 <span class="sep">›</span>248 <svg class="ic-lg" viewBox="0 0 24 24">249 <rect x="5" y="5" width="14" height="10" rx="2" fill="#5f6368"></rect>250 <circle cx="8" cy="17" r="1.6" fill="#5f6368"></circle>251 <circle cx="16" cy="17" r="1.6" fill="#5f6368"></circle>252 </svg>253 <span class="sep">›</span>254 <!-- walk -->255 <svg class="ic-lg" viewBox="0 0 24 24">256 <circle cx="12" cy="5" r="2" fill="#5f6368"></circle>257 <path d="M12 7l-2 4-3 2m5-2l3 5" stroke="#5f6368" stroke-width="2" fill="none" stroke-linecap="round"></path>258 </svg>259 <span class="sep">›</span>260 <svg class="ic-lg" viewBox="0 0 24 24">261 <rect x="5" y="5" width="14" height="10" rx="2" fill="#5f6368"></rect>262 <circle cx="8" cy="17" r="1.6" fill="#5f6368"></circle>263 <circle cx="16" cy="17" r="1.6" fill="#5f6368"></circle>264 </svg>265 <span class="sep">›</span>266 <div class="badge bus-red">72</div>267 </div>268 <div class="duration">1 hr 59 min</div>269 </div>270 <div class="sub">271 <div>9:46 PM – 11:45 PM</div>272 <div class="price">€2.50</div>273 </div>274 <div class="note">275 in <span style="color:#d93025;">5 min</span> (delayed), <span style="color:#d93025;">25 min</span> (delayed) from République276 </div>277 </div>278 279 <!-- Card 3 -->280 <div class="card">281 <div class="route-row">282 <div class="segments">283 <svg class="ic-lg" viewBox="0 0 24 24">284 <rect x="5" y="5" width="14" height="10" rx="2" fill="#5f6368"></rect>285 <circle cx="8" cy="17" r="1.6" fill="#5f6368"></circle>286 <circle cx="16" cy="17" r="1.6" fill="#5f6368"></circle>287 </svg>288 <div class="badge b-red">A</div>289 <span class="sep">›</span>290 <svg class="ic-lg" viewBox="0 0 24 24">291 <rect x="5" y="5" width="14" height="10" rx="2" fill="#5f6368"></rect>292 <circle cx="8" cy="17" r="1.6" fill="#5f6368"></circle>293 <circle cx="16" cy="17" r="1.6" fill="#5f6368"></circle>294 </svg>295 <span class="sep">›</span>296 <!-- walk small with 4 indicator -->297 <svg class="ic-lg" viewBox="0 0 24 24">298 <circle cx="12" cy="5" r="2" fill="#5f6368"></circle>299 <path d="M12 7l-2 4-3 2m5-2l3 5" stroke="#5f6368" stroke-width="2" fill="none" stroke-linecap="round"></path>300 </svg>301 <span class="sep">›</span>302 <div class="badge b-blue badge-round">M</div>303 <div class="badge b-orange">5</div>304 <span class="sep">›</span>305 <div class="badge b-blue badge-round">M</div>306 </div>307 <div class="duration">1 hr 56 min</div>308 </div>309 <div class="sub">310 <div>9:46 PM – 11:42 PM</div>311 <div class="price">€2.10</div>312 </div>313 <div class="note">314 in <span style="color:#d93025;">5 min</span> (delayed), <span style="color:#d93025;">25 min</span> (delayed) from République315 </div>316 </div>317 318 <!-- Card 4 -->319 <div class="card">320 <div class="route-row">321 <div class="segments">322 <!-- walk with 7 -->323 <svg class="ic-lg" viewBox="0 0 24 24">324 <circle cx="12" cy="5" r="2" fill="#5f6368"></circle>325 <path d="M12 7l-2 4-3 2m5-2l3 5" stroke="#5f6368" stroke-width="2" fill="none" stroke-linecap="round"></path>326 </svg>327 <span class="sep">›</span>328 <svg class="ic-lg" viewBox="0 0 24 24">329 <rect x="5" y="5" width="14" height="10" rx="2" fill="#5f6368"></rect>330 <circle cx="8" cy="17" r="1.6" fill="#5f6368"></circle>331 <circle cx="16" cy="17" r="1.6" fill="#5f6368"></circle>332 </svg>333 <span class="sep">›</span>334 <!-- walk with 4 -->335 <svg class="ic-lg" viewBox="0 0 24 24">336 <circle cx="12" cy="5" r="2" fill="#5f6368"></circle>337 <path d="M12 7l-2 4-3 2m5-2l3 5" stroke="#5f6368" stroke-width="2" fill="none" stroke-linecap="round"></path>338 </svg>339 <span class="sep">›</span>340 <div class="badge b-blue badge-round">M</div>341 <div class="badge b-orange">5</div>342 <span class="sep">›</span>343 <div class="badge b-yellow">1</div>344 </div>345 <div class="duration">1 hr 30 min</div>346 </div>347 <div class="sub">348 <div>5:56 AM (Thursday) – 7:26 AM</div>349 <div class="price">€2.10</div>350 </div>351 <div class="note" style="color:#5f6368;">352 Scheduled at 6:03 AM, 6:34 AM from Orleans353 </div>354 </div>355 356 <!-- Card 5 -->357 <div class="card">358 <div class="route-row">359 <div class="segments">360 <!-- walk with 7 -->361 <svg class="ic-lg" viewBox="0 0 24 24">362 <circle cx="12" cy="5" r="2" fill="#5f6368"></circle>363 <path d="M12 7l-2 4-3 2m5-2l3 5" stroke="#5f6368" stroke-width="2" fill="none" stroke-linecap="round"></path>364 </svg>365 <span class="sep">›</span>366 <svg class="ic-lg" viewBox="0 0 24 24">367 <rect x="5" y="5" width="14" height="10" rx="2" fill="#5f6368"></rect>368 <circle cx="8" cy="17" r="1.6" fill="#5f6368"></circle>369 <circle cx="16" cy="17" r="1.6" fill="#5f6368"></circle>370 </svg>371 <span class="sep">›</span>372 <div class="badge b-purple">TER</div>373 <span class="sep">›</span>374 <!-- walk with 3 -->375 <svg class="ic-lg" viewBox="0 0 24 24">376 <circle cx="12" cy="5" r="2" fill="#5f6368"></circle>377 <path d="M12 7l-2 4-3 2m5-2l3 5" stroke="#5f6368" stroke-width="2" fill="none" stroke-linecap="round"></path>378 </svg>379 <span class="sep">›</span>380 <div class="badge b-blue">RER</div>381 <div class="badge b-gold">C</div>382 <span class="sep">›</span>383 <svg class="ic-lg" viewBox="0 0 24 24">384 <rect x="3" y="7" width="18" height="8" rx="2" fill="#5f6368"></rect>385 <circle cx="7" cy="17" r="1.6" fill="#5f6368"></circle>386 <circle cx="17" cy="17" r="1.6" fill="#5f6368"></circle>387 </svg>388 </div>389 <div class="duration">1 hr 36 min</div>390 </div>391 <div class="sub">392 <div>5:56 AM (Thursday) – 7:32 AM</div>393 <div class="price">€2.10</div>394 </div>395 <div class="note" style="color:#5f6368;">396 Scheduled at 6:03 AM, 6:34 AM from Orleans397 </div>398 <div class="alert">399 <!-- warning icon -->400 <svg class="ic" viewBox="0 0 24 24">401 <path d="M12 3l10 18H2L12 3zm0 6v5m0 4h.01" stroke="#d93025" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>402 </svg>403 <span>Modified schedule</span>404 </div>405 </div>406 </div>407 408 <div class="gesture"></div>409</div>410</body>411</html>