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; position:relative; overflow:hidden;9 background:#25005a;10 color:#fff;11 }12 13 /* Status bar */14 .status-bar {15 position:absolute; top:0; left:0; right:0;16 height:90px; padding:20px 30px;17 display:flex; align-items:center; justify-content:space-between;18 font-weight:600; font-size:34px; opacity:0.95;19 }20 .status-right { display:flex; gap:26px; align-items:center; }21 .icon-wifi, .icon-battery {22 width:46px; height:28px; border:2px solid #fff; border-radius:6px;23 }24 .icon-wifi { border-radius:50px; width:36px; height:36px; border:3px solid #fff; }25 26 /* App bar */27 .app-bar {28 position:absolute; top:90px; left:0; right:0;29 padding:22px 34px;30 display:flex; align-items:center; gap:20px;31 }32 .back-btn {33 width:60px; height:60px; display:flex; align-items:center; justify-content:center;34 }35 .back-btn svg { width:44px; height:44px; }36 .route-title {37 font-size:48px; font-weight:700; letter-spacing:0.4px;38 }39 40 /* summary row with prices */41 .summary {42 position:absolute; top:170px; left:0; right:0;43 padding:24px 40px 28px 40px;44 display:flex; gap:80px;45 }46 .mode {47 display:flex; align-items:center; gap:24px;48 color:#d7c9ff;49 }50 .mode .price { color:#ffffff; font-weight:700; font-size:46px; }51 .mode .detail { color:#cbb8ff; font-size:36px; }52 .icon-train, .icon-bus {53 width:60px; height:60px;54 border:3px solid #d7c9ff; border-radius:12px;55 }56 57 /* filter bar (date + return from) */58 .filter-bar {59 position:absolute; top:310px; left:0; right:0;60 background:#eeeeee; color:#222;61 display:flex; justify-content:space-between; align-items:center;62 padding:28px 36px;63 font-size:38px; border-top-left-radius:20px; border-top-right-radius:20px;64 }65 66 /* content list area */67 .content {68 position:absolute; top:380px; left:0; right:0; bottom:0;69 background:#ffffff; color:#222;70 padding-bottom:60px;71 }72 .expander {73 display:flex; align-items:center; gap:20px;74 padding:30px 36px; font-size:40px; color:#555;75 border-bottom:1px solid #e6e6e6;76 }77 .expander .chev {78 width:36px; height:36px;79 display:flex; align-items:center; justify-content:center;80 }81 .expander .chev svg { width:34px; height:34px; }82 83 .train-item {84 padding:34px 36px 26px 36px;85 border-bottom:1px solid #e9e9e9;86 }87 .row-top {88 display:flex; align-items:center; justify-content:space-between;89 margin-bottom:18px;90 }91 .times {92 display:flex; align-items:baseline; gap:26px; color:#111;93 }94 .time-start, .time-end { font-size:64px; font-weight:800; }95 .arrow { font-size:54px; color:#777; }96 .price {97 font-size:58px; font-weight:800; color:#111;98 display:flex; align-items:center; gap:20px;99 }100 .pill {101 background:#22b573; color:#fff; font-size:34px; padding:10px 18px; border-radius:12px;102 }103 .row-bottom {104 display:flex; align-items:center; justify-content:space-between;105 color:#555; font-size:36px;106 }107 .bullet {108 width:22px; height:22px; border:3px solid #777; border-radius:50%; margin-right:16px;109 }110 .stops { color:#3d59f0; font-weight:600; }111 112 /* simple chevron right */113 .chev-right { display:inline-flex; align-items:center; gap:12px; }114 115 /* bottom safe indicator (mock) */116 .bottom-shadow {117 position:absolute; left:40%; bottom:16px; width:20%; height:14px;118 background:#00000022; border-radius:12px;119 }120</style>121</head>122<body>123<div id="render-target">124 125 <!-- Status Bar -->126 <div class="status-bar">127 <div>1:25</div>128 <div class="status-right">129 <div class="icon-wifi"></div>130 <div class="icon-battery"></div>131 </div>132 </div>133 134 <!-- App Bar -->135 <div class="app-bar">136 <div class="back-btn">137 <svg viewBox="0 0 24 24">138 <path d="M15.5 4 L7 12 L15.5 20" stroke="#fff" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>139 </svg>140 </div>141 <div class="route-title">Abbey Wood → Barnes</div>142 </div>143 144 <!-- Summary -->145 <div class="summary">146 <div class="mode">147 <div class="icon-train"></div>148 <div>149 <div class="price">$20.71</div>150 <div class="detail">1h 17m</div>151 </div>152 </div>153 <div class="mode">154 <div class="icon-bus"></div>155 <div>156 <div class="price">$12.30</div>157 <div class="detail">55min</div>158 </div>159 </div>160 </div>161 162 <!-- Filter Bar -->163 <div class="filter-bar">164 <div>Thu 27 Jul 2023</div>165 <div>Return from</div>166 </div>167 168 <div class="content">169 <!-- Earlier trains -->170 <div class="expander">171 <div class="chev">172 <svg viewBox="0 0 24 24">173 <path d="M6 15 L12 9 L18 15" stroke="#777" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>174 </svg>175 </div>176 <div>Earlier trains</div>177 </div>178 179 <!-- Train item 1 -->180 <div class="train-item">181 <div class="row-top">182 <div class="times">183 <div class="time-start">22:02</div>184 <div class="arrow">→</div>185 <div class="time-end">23:11</div>186 </div>187 <div class="price">$24.32</div>188 </div>189 <div class="row-bottom">190 <div style="display:flex; align-items:center;">191 <div class="bullet"></div>192 <div>1h 9m, 2 changes</div>193 </div>194 <div class="chev-right">195 <div class="stops">View stops</div>196 <svg viewBox="0 0 24 24" width="26" height="26">197 <path d="M9 6 L15 12 L9 18" stroke="#3d59f0" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>198 </svg>199 </div>200 </div>201 </div>202 203 <!-- Train item 2 -->204 <div class="train-item">205 <div class="row-top">206 <div class="times">207 <div class="time-start">22:09</div>208 <div class="arrow">→</div>209 <div class="time-end">23:19</div>210 </div>211 <div class="price">$24.32</div>212 </div>213 <div class="row-bottom">214 <div style="display:flex; align-items:center;">215 <div class="bullet"></div>216 <div>1h 10m, 2 changes</div>217 </div>218 <div class="chev-right">219 <div class="stops">View stops</div>220 <svg viewBox="0 0 24 24" width="26" height="26">221 <path d="M9 6 L15 12 L9 18" stroke="#3d59f0" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>222 </svg>223 </div>224 </div>225 </div>226 227 <!-- Train item 3 -->228 <div class="train-item">229 <div class="row-top">230 <div class="times">231 <div class="time-start">22:32</div>232 <div class="arrow">→</div>233 <div class="time-end">23:41</div>234 </div>235 <div class="price">$24.32</div>236 </div>237 <div class="row-bottom">238 <div style="display:flex; align-items:center;">239 <div class="bullet"></div>240 <div>1h 9m, 2 changes</div>241 </div>242 <div class="chev-right">243 <div class="stops">View stops</div>244 <svg viewBox="0 0 24 24" width="26" height="26">245 <path d="M9 6 L15 12 L9 18" stroke="#3d59f0" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>246 </svg>247 </div>248 </div>249 </div>250 251 <!-- Train item 4 -->252 <div class="train-item">253 <div class="row-top">254 <div class="times">255 <div class="time-start">22:39</div>256 <div class="arrow">→</div>257 <div class="time-end">23:49</div>258 </div>259 <div class="price">$24.32</div>260 </div>261 <div class="row-bottom">262 <div style="display:flex; align-items:center;">263 <div class="bullet"></div>264 <div>1h 10m, 2 changes</div>265 </div>266 <div class="chev-right">267 <div class="stops">View stops</div>268 <svg viewBox="0 0 24 24" width="26" height="26">269 <path d="M9 6 L15 12 L9 18" stroke="#3d59f0" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>270 </svg>271 </div>272 </div>273 </div>274 275 <!-- Train item 5 (Cheapest) -->276 <div class="train-item">277 <div class="row-top">278 <div class="times">279 <div class="time-start">23:05</div>280 <div class="arrow">→</div>281 <div class="time-end">00:22</div>282 </div>283 <div class="price"><span class="pill">Cheapest</span> $20.71</div>284 </div>285 <div class="row-bottom">286 <div style="display:flex; align-items:center;">287 <div class="bullet"></div>288 <div>1h 17m, 2 changes</div>289 </div>290 <div class="chev-right">291 <div class="stops">View stops</div>292 <svg viewBox="0 0 24 24" width="26" height="26">293 <path d="M9 6 L15 12 L9 18" stroke="#3d59f0" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>294 </svg>295 </div>296 </div>297 </div>298 299 </div>300 301 <div class="bottom-shadow"></div>302</div>303</body>304</html>