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>Train Results UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff; border-radius: 0; box-shadow: none;13 color: #212121;14 }15 16 /* Header */17 .header {18 position: absolute; left: 0; top: 0; width: 100%; height: 420px;19 background: #1B0E8A; color: #fff;20 }21 .status-bar {22 height: 70px; padding: 0 32px;23 display: flex; align-items: center; justify-content: space-between; font-size: 30px;24 opacity: 0.95;25 }26 .status-icons { display: flex; align-items: center; gap: 20px; }27 .route-row {28 display: flex; align-items: center; gap: 18px; padding: 28px 32px 8px 32px; font-size: 42px; font-weight: 500;29 }30 .transport-row {31 display: flex; gap: 120px; padding: 18px 32px; color: #dad8ff; font-size: 34px;32 }33 .transport-item { display: flex; align-items: center; gap: 20px; }34 .transport-item .meta { display: flex; flex-direction: column; line-height: 1.2; }35 .transport-item .price { color: #ffffff; font-size: 40px; font-weight: 600; }36 .transport-item .time { color: #bdb9ff; font-size: 32px; }37 38 .tab-strip {39 position: absolute; bottom: 0; left: 0; width: 100%; height: 14px;40 background: #e0e0e0;41 }42 .tab-indicator {43 position: absolute; bottom: 0; left: 0; width: 320px; height: 14px;44 background: #cfc8ff;45 }46 47 /* Date bar */48 .date-bar {49 position: absolute; top: 420px; left: 0; width: 100%; height: 110px;50 background: #f5f5f5; border-bottom: 1px solid #e0e0e0;51 display: flex; align-items: center; justify-content: space-between;52 padding: 0 32px; color: #616161; font-size: 36px;53 }54 55 /* Earlier trains row */56 .earlier-row {57 position: absolute; top: 530px; left: 0; width: 100%; height: 110px;58 background: #fafafa; border-bottom: 1px solid #ddd;59 display: flex; align-items: center; justify-content: space-between;60 padding: 0 32px; color: #616161; font-size: 38px;61 }62 .earlier-left { display: flex; align-items: center; gap: 18px; }63 64 /* Cards list container */65 .list {66 position: absolute; top: 640px; left: 0; right: 0; bottom: 120px; overflow: hidden auto;67 }68 .card {69 position: relative; background: #fff; padding: 26px 32px 24px 32px;70 border-bottom: 1px solid #e0e0e0;71 }72 .pill {73 position: absolute; right: 32px; top: 20px; padding: 12px 18px; border-radius: 18px; font-size: 30px; font-weight: 600;74 }75 .pill-green { background: #0BB07A; color: #fff; }76 .pill-blue { left: 32px; right: auto; background: #E7F1FF; color: #1E64D9; border: 1px solid #BFD7FF; }77 78 .times-row { display: flex; align-items: center; gap: 26px; font-size: 52px; font-weight: 800; color: #212121; }79 .arrow-mid { width: 36px; height: 36px; }80 .stations-row {81 display: flex; align-items: center; justify-content: space-between;82 margin-top: 10px; font-size: 34px; color: #6b7780;83 }84 85 .warn { margin-top: 20px; color: #FF8F00; font-size: 32px; }86 87 .bottom-row {88 margin-top: 26px; display: flex; align-items: center; justify-content: space-between;89 font-size: 34px; color: #424242;90 }91 .route-info { display: flex; align-items: center; gap: 16px; }92 .view-stops { color: #6b7780; display: flex; align-items: center; gap: 10px; }93 94 .price-block { position: absolute; right: 32px; top: 94px; text-align: right; }95 .price { font-size: 48px; font-weight: 800; color: #212121; }96 .price-sub { font-size: 30px; color: #8b939a; margin-top: 8px; }97 98 .right-meta {99 position: absolute; right: 32px; top: 210px; text-align: right; color: #8b939a; font-size: 32px;100 }101 .amenities { display: flex; justify-content: flex-end; gap: 18px; margin-bottom: 8px; }102 .label-small { color: #8b939a; font-size: 30px; }103 104 /* Gesture bar */105 .gesture {106 position: absolute; bottom: 0; left: 0; width: 100%; height: 120px;107 background: #000;108 display: flex; align-items: center; justify-content: center;109 }110 .home-pill {111 width: 220px; height: 14px; background: #e6e6e6; border-radius: 7px;112 opacity: 0.9;113 }114 115 /* Simple SVG icon styling */116 svg { display: inline-block; }117 .icon-white path, .icon-white rect, .icon-white circle, .icon-white polyline { fill: #fff; stroke: #fff; }118 .icon-muted path, .icon-muted circle, .icon-muted rect { stroke: #9da7af; }119 .icon-green path { fill: #0BB07A; }120</style>121</head>122<body>123<div id="render-target">124 125 <!-- Header -->126 <div class="header">127 <div class="status-bar">128 <div>10:27</div>129 <div class="status-icons">130 <!-- simple status symbols -->131 <svg width="28" height="24" class="icon-white"><rect x="2" y="6" width="24" height="12" rx="2" ry="2" fill="#fff"/></svg>132 <svg width="28" height="24" class="icon-white"><rect x="2" y="6" width="24" height="12" rx="2" ry="2" fill="#fff"/></svg>133 <svg width="28" height="24" class="icon-white"><rect x="2" y="6" width="24" height="12" rx="2" ry="2" fill="#fff"/></svg>134 <svg width="24" height="24" class="icon-white"><polygon points="12,2 22,22 2,22" fill="#fff"/></svg>135 <svg width="10" height="10"><circle cx="5" cy="5" r="4" fill="#fff" opacity="0.7"/></svg>136 <svg width="34" height="24" class="icon-white"><path d="M4 12h18l6-6v12l-6-6H4z" fill="#fff"/></svg>137 <svg width="18" height="24" class="icon-white"><rect x="4" y="4" width="10" height="18" rx="2" fill="#fff"/></svg>138 </div>139 </div>140 141 <div class="route-row">142 <!-- Back arrow -->143 <svg width="42" height="42"><polyline points="28,8 14,21 28,34" fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/></svg>144 <div>London (Any) → Bristol Parkway</div>145 </div>146 147 <div class="transport-row">148 <div class="transport-item">149 <!-- Train icon -->150 <svg width="60" height="60" class="icon-white">151 <rect x="12" y="18" width="36" height="24" rx="10" ry="10" fill="none" stroke="#fff" stroke-width="4"/>152 <circle cx="20" cy="46" r="4" fill="#fff"/><circle cx="40" cy="46" r="4" fill="#fff"/>153 <rect x="20" y="24" width="20" height="10" rx="2" fill="#fff"/>154 </svg>155 <div class="meta">156 <div class="price">$80.66</div>157 <div class="time">1h 13m</div>158 </div>159 </div>160 161 <div class="transport-item">162 <!-- Bus icon -->163 <svg width="60" height="60" class="icon-white">164 <rect x="10" y="16" width="40" height="26" rx="6" ry="6" fill="none" stroke="#fff" stroke-width="4"/>165 <rect x="16" y="22" width="28" height="10" rx="2" fill="#fff"/>166 <circle cx="20" cy="46" r="4" fill="#fff"/><circle cx="40" cy="46" r="4" fill="#fff"/>167 </svg>168 <div class="meta">169 <div class="price">$10.84</div>170 <div class="time">2h 45m</div>171 </div>172 </div>173 </div>174 175 <div class="tab-strip"></div>176 <div class="tab-indicator"></div>177 </div>178 179 <!-- Date bar -->180 <div class="date-bar">181 <div>Wed, Nov 15, 2023</div>182 <div>Return from</div>183 </div>184 185 <!-- Earlier trains -->186 <div class="earlier-row">187 <div class="earlier-left">188 <svg width="34" height="34"><polyline points="6,22 17,10 28,22" fill="none" stroke="#616161" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/></svg>189 <div>Earlier trains</div>190 </div>191 </div>192 193 <!-- List of cards -->194 <div class="list">195 196 <!-- Card 1 -->197 <div class="card">198 <div class="pill pill-green">Cheapest</div>199 <div class="times-row">200 <div>10:18 AM</div>201 <svg class="arrow-mid" viewBox="0 0 24 24"><polyline points="6,4 18,12 6,20" fill="none" stroke="#777" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>202 <div>11:32 AM</div>203 </div>204 <div class="stations-row">205 <div>London Paddington</div>206 <div>Bristol Parkway</div>207 </div>208 209 <div class="warn">Limited tickets left</div>210 211 <div class="bottom-row">212 <div class="route-info">213 <svg width="28" height="44">214 <circle cx="14" cy="12" r="6" fill="none" stroke="#424242" stroke-width="3"/>215 <line x1="14" y1="20" x2="14" y2="40" stroke="#424242" stroke-width="3"/>216 </svg>217 <div>1h 14m, Direct</div>218 </div>219 <div class="view-stops">220 <div>View stops</div>221 <svg width="20" height="20"><polyline points="6,4 14,10 6,16" fill="none" stroke="#9da7af" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>222 </div>223 </div>224 225 <div class="price-block">226 <div class="price">$80.66</div>227 <div class="price-sub">1st $153.57</div>228 </div>229 <div class="right-meta">230 <div class="amenities">231 <!-- Bicycle -->232 <svg width="42" height="24" class="icon-muted">233 <circle cx="8" cy="18" r="6" fill="none" stroke="#9da7af" stroke-width="3"/>234 <circle cx="34" cy="18" r="6" fill="none" stroke="#9da7af" stroke-width="3"/>235 <polyline points="8,18 16,10 24,18" fill="none" stroke="#9da7af" stroke-width="3"/>236 </svg>237 <!-- Ticket icon -->238 <svg width="28" height="28" class="icon-muted">239 <rect x="4" y="6" width="20" height="16" rx="3" fill="none" stroke="#9da7af" stroke-width="3"/>240 <circle cx="10" cy="14" r="2" fill="#9da7af"/>241 <circle cx="18" cy="14" r="2" fill="#9da7af"/>242 </svg>243 </div>244 <div class="label-small">Super Off-Peak</div>245 </div>246 </div>247 248 <!-- Card 2 -->249 <div class="card">250 <div class="pill pill-blue">Fastest</div>251 <div class="times-row">252 <div>10:48 AM</div>253 <svg class="arrow-mid" viewBox="0 0 24 24"><polyline points="6,4 18,12 6,20" fill="none" stroke="#777" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>254 <div>12:01 PM</div>255 </div>256 <div class="stations-row">257 <div>London Paddington</div>258 <div>Bristol Parkway</div>259 </div>260 261 <div class="warn">Limited tickets left</div>262 263 <div class="bottom-row">264 <div class="route-info">265 <svg width="28" height="44">266 <circle cx="14" cy="12" r="6" fill="none" stroke="#424242" stroke-width="3"/>267 <line x1="14" y1="20" x2="14" y2="40" stroke="#424242" stroke-width="3"/>268 </svg>269 <div>1h 13m, Direct</div>270 </div>271 <div class="view-stops">272 <div>View stops</div>273 <svg width="20" height="20"><polyline points="6,4 14,10 6,16" fill="none" stroke="#9da7af" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>274 </div>275 </div>276 277 <div class="price-block">278 <div class="price">$90.34</div>279 <div class="price-sub">1st $196.16</div>280 </div>281 <div class="right-meta">282 <div class="amenities">283 <svg width="42" height="24" class="icon-muted">284 <circle cx="8" cy="18" r="6" fill="none" stroke="#9da7af" stroke-width="3"/>285 <circle cx="34" cy="18" r="6" fill="none" stroke="#9da7af" stroke-width="3"/>286 <polyline points="8,18 16,10 24,18" fill="none" stroke="#9da7af" stroke-width="3"/>287 </svg>288 <svg width="28" height="28" class="icon-muted">289 <rect x="4" y="6" width="20" height="16" rx="3" fill="none" stroke="#9da7af" stroke-width="3"/>290 <circle cx="10" cy="14" r="2" fill="#9da7af"/>291 <circle cx="18" cy="14" r="2" fill="#9da7af"/>292 </svg>293 </div>294 <div class="label-small">Super Off-Peak</div>295 </div>296 </div>297 298 <!-- Card 3 -->299 <div class="card">300 <div class="pill pill-blue">Fastest</div>301 <div class="pill pill-green" style="top: 20px; right: 32px;">Cheapest</div>302 303 <div class="times-row">304 <div>11:18 AM</div>305 <svg class="arrow-mid" viewBox="0 0 24 24"><polyline points="6,4 18,12 6,20" fill="none" stroke="#777" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>306 <div>12:31 PM</div>307 </div>308 <div class="stations-row">309 <div>London Paddington</div>310 <div>Bristol Parkway</div>311 </div>312 313 <div class="warn">Limited tickets left</div>314 315 <div class="bottom-row">316 <div class="route-info">317 <svg width="28" height="44">318 <circle cx="14" cy="12" r="6" fill="none" stroke="#424242" stroke-width="3"/>319 <line x1="14" y1="20" x2="14" y2="40" stroke="#424242" stroke-width="3"/>320 </svg>321 <div>1h 13m, Direct</div>322 </div>323 <div class="view-stops">324 <div>View stops</div>325 <svg width="20" height="20"><polyline points="6,4 14,10 6,16" fill="none" stroke="#9da7af" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>326 </div>327 </div>328 329 <div class="price-block">330 <div class="price">$80.66</div>331 <div class="price-sub">1st $153.57</div>332 </div>333 <div class="right-meta">334 <div class="amenities">335 <svg width="42" height="24" class="icon-muted">336 <circle cx="8" cy="18" r="6" fill="none" stroke="#9da7af" stroke-width="3"/>337 <circle cx="34" cy="18" r="6" fill="none" stroke="#9da7af" stroke-width="3"/>338 <polyline points="8,18 16,10 24,18" fill="none" stroke="#9da7af" stroke-width="3"/>339 </svg>340 <svg width="28" height="28" class="icon-muted">341 <rect x="4" y="6" width="20" height="16" rx="3" fill="none" stroke="#9da7af" stroke-width="3"/>342 <circle cx="10" cy="14" r="2" fill="#9da7af"/>343 <circle cx="18" cy="14" r="2" fill="#9da7af"/>344 </svg>345 </div>346 <div class="label-small">Super Off-Peak</div>347 </div>348 </div>349 350 <!-- Partially visible Card 4 (stub) -->351 <div class="card">352 <div class="times-row">353 <div>11:48 AM</div>354 <svg class="arrow-mid" viewBox="0 0 24 24"><polyline points="6,4 18,12 6,20" fill="none" stroke="#777" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>355 <div>1:02 PM</div>356 </div>357 <div class="stations-row">358 <div>London Paddington</div>359 <div>Bristol Parkway</div>360 </div>361 <div class="bottom-row">362 <div class="route-info">363 <svg width="28" height="44">364 <circle cx="14" cy="12" r="6" fill="none" stroke="#424242" stroke-width="3"/>365 <line x1="14" y1="20" x2="14" y2="40" stroke="#424242" stroke-width="3"/>366 </svg>367 <div>1h 14m, Direct</div>368 </div>369 <div class="view-stops">370 <div>View stops</div>371 <svg width="20" height="20"><polyline points="6,4 14,10 6,16" fill="none" stroke="#9da7af" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>372 </div>373 </div>374 <div class="price-block">375 <div class="price">$90.34</div>376 </div>377 </div>378 379 </div>380 381 <!-- Bottom gesture bar -->382 <div class="gesture">383 <div class="home-pill"></div>384 </div>385 386</div>387</body>388</html>