GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Train Results UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 :root{9 --primary:#2D6BFF;10 --primary-weak:#6FA0FF;11 --ink:#0B1F44;12 --muted:#8A94A6;13 --bg:#F2F5FB;14 --chip:#E9F1FF;15 --header:#CFEAFF;16 --card:#FFFFFF;17 --divider:#E6ECF4;18 --success:#12B886;19 }20 body{ margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; color:var(--ink); }21 #render-target{22 width:1080px; height:2400px;23 position:relative; overflow:hidden;24 background:var(--bg);25 border-radius:28px;26 box-shadow:0 6px 24px rgba(0,0,0,0.05);27 }28 /* Status bar mock */29 .status-bar{30 position:absolute; left:0; top:0; width:100%; height:88px;31 padding:0 36px; display:flex; align-items:center; justify-content:space-between;32 color:#0B223D; font-weight:600; font-size:36px;33 z-index:3;34 }35 .status-icons{ display:flex; gap:24px; align-items:center; color:#3A4B68;}36 .status-icons span{ font-size:28px; opacity:0.85;}37 /* Header */38 .header{39 position:absolute; left:0; top:0; width:100%; height:520px;40 background:linear-gradient(180deg, #CFEAFF 0%, #D8EEFF 60%, #E6F3FF 100%);41 padding:110px 36px 24px;42 box-sizing:border-box;43 }44 .top-row{45 display:flex; align-items:center; justify-content:space-between; margin-bottom:28px;46 }47 .nav-left, .nav-right{ display:flex; align-items:center; gap:22px; }48 .title{49 font-size:46px; font-weight:800; color:#0B1F44; text-align:center; width:100%;50 }51 .icon-btn{52 width:72px; height:72px; border-radius:20px; background:#E3F0FF; display:flex; align-items:center; justify-content:center;53 }54 .tabs{55 display:flex; gap:44px; align-items:flex-end; margin-top:16px; padding-bottom:18px; border-bottom:1px solid #cfe2f7;56 }57 .tab{ display:flex; align-items:center; gap:16px; color:#8091A7; font-size:36px; font-weight:700; position:relative; }58 .tab svg{ width:44px; height:44px; }59 .tab.active{ color:var(--primary); }60 .tab.active::after{61 content:""; position:absolute; left:0; bottom:-18px; width:100%; height:6px; background:var(--primary); border-radius:4px;62 }63 /* Day chips */64 .days{65 margin-top:28px; display:flex; gap:18px;66 }67 .chip{68 width:126px; height:156px; background:#EAF3FF; border-radius:30px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#6C7B90; font-weight:700; box-shadow: inset 0 0 0 1px #D5E3F6;69 }70 .chip strong{ display:block; font-size:46px; color:#223659; margin-top:6px;}71 .chip.active{ background:var(--primary); color:#EAF1FF; box-shadow:none;}72 .chip.active strong{ color:#fff; }73 /* Content area */74 .content{75 position:absolute; left:0; top:520px; right:0; bottom:180px;76 padding:28px 30px 180px; box-sizing:border-box; overflow:auto;77 }78 .card{79 background:var(--card); border-radius:28px; padding:32px; box-shadow:0 6px 18px rgba(22,44,77,0.06); margin-bottom:26px;80 }81 .small-row{ display:flex; align-items:center; justify-content:space-between; color:#5A6B83; font-size:34px; }82 .link{ color:#6A7EB3; font-weight:700; display:flex; align-items:center; gap:12px; }83 .notice{ display:flex; align-items:center; gap:18px; font-size:38px; font-weight:800; color:#2B3450; }84 .notice .badge{ width:64px; height:64px; border-radius:18px; background:#FFEEE8; display:flex; align-items:center; justify-content:center; }85 .notice small{ color:#7A8798; font-weight:600; }86 .section-hint{ color:#6C7B90; font-size:36px; margin:24px 6px 18px; display:flex; align-items:center; justify-content:space-between; }87 .pill{88 background:#FFFFFF; border-radius:22px; padding:32px; text-align:center; color:#2C3C56; font-weight:700; box-shadow:0 6px 16px rgba(33,59,98,0.06);89 }90 /* Result item */91 .result{ padding:28px; }92 .result .r-badge{93 display:inline-block; padding:12px 20px; border-radius:16px; background:#FFECE6; color:#FF6B4A; font-weight:800; font-size:28px; margin-bottom:16px;94 }95 .row{96 display:flex; align-items:flex-start; justify-content:space-between; gap:18px;97 }98 .times{99 display:flex; align-items:center; gap:26px; flex:1;100 }101 .time-block strong{ font-size:64px; font-weight:900; color:#112046; }102 .time-block div{ color:#6E7C91; font-size:30px; margin-top:4px;}103 .arrow-mid{ width:72px; height:14px; background:#D3DEEE; border-radius:8px; }104 .price{105 text-align:right; min-width:240px;106 }107 .price strong{ font-size:54px; font-weight:900; color:#112046;}108 .save{109 display:inline-flex; align-items:center; gap:10px; background:#E9F1FF; color:#2C66FF; font-weight:800; padding:10px 16px; border-radius:18px; margin-top:8px; font-size:30px;110 }111 .result .meta{112 margin-top:24px; padding-top:22px; border-top:1px dashed #E2E9F2;113 display:flex; align-items:center; justify-content:space-between; color:#5A6B83; font-size:32px;114 }115 .meta .link{ color:#5E77C8; }116 /* Bottom nav */117 .bottom{118 position:absolute; left:0; right:0; bottom:0; height:180px; background:#fff; border-top-left-radius:26px; border-top-right-radius:26px; box-shadow:0 -6px 16px rgba(0,0,0,0.06); padding:18px 48px 34px; box-sizing:border-box;119 }120 .tabs-bottom{ height:100%; display:flex; align-items:center; justify-content:space-between; }121 .bt-item{122 width:30%; display:flex; flex-direction:column; align-items:center; gap:10px; color:#6B7B91; font-weight:700; font-size:30px;123 }124 .bt-item svg{ width:48px; height:48px; }125 .bt-item.active{ color:var(--primary); }126 /* Home indicator */127 .home-indicator{ position:absolute; left:50%; transform:translateX(-50%); bottom:10px; width:340px; height:10px; background:#1B1B1B; opacity:0.15; border-radius:8px; }128 /* Helpers */129 .muted{ color:var(--muted); }130 .icon{131 display:inline-flex; align-items:center; justify-content:center;132 }133</style>134</head>135<body>136<div id="render-target">137 <!-- Status Bar -->138 <div class="status-bar">139 <div>10:36</div>140 <div class="status-icons">141 <span>◔</span>142 <span>🔔</span>143 <span>🔍</span>144 <span>•</span>145 <span>⚡</span>146 <span>📶</span>147 <span>97%</span>148 </div>149 </div>150 151 <!-- Header -->152 <div class="header">153 <div class="top-row">154 <div class="nav-left">155 <div class="icon-btn" title="Back">156 <svg viewBox="0 0 24 24" width="36" height="36"><path d="M15.5 4.5L8 12l7.5 7.5" fill="none" stroke="#2D6BFF" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg>157 </div>158 </div>159 <div class="title">Birmingham(any) → New Milton</div>160 <div class="nav-right" style="visibility:hidden">161 <div class="icon-btn"></div>162 </div>163 </div>164 165 <div class="tabs">166 <div class="tab active">167 <svg viewBox="0 0 24 24"><path d="M3 10h18v7a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-7Zm3-5h12l2 5H4l2-5Z" fill="currentColor" opacity="0.9"/></svg>168 <div>169 <div>Train</div>170 <div class="muted" style="font-weight:600; font-size:28px;">From £160.58</div>171 </div>172 </div>173 <div class="tab">174 <svg viewBox="0 0 24 24"><path d="M4 6h16v8H4V6Zm2 9h12l2 3H4l2-3Z" fill="currentColor" opacity="0.4"/></svg>175 <div>176 <div>Coach</div>177 <div class="muted" style="font-weight:600; font-size:28px;">Not available</div>178 </div>179 </div>180 </div>181 182 <div class="days">183 <div class="chip active"><div>Fri</div><strong>17</strong></div>184 <div class="chip"><div>Sat</div><strong>18</strong></div>185 <div class="chip"><div>Sun</div><strong>19</strong></div>186 <div class="chip"><div>Mon</div><strong>20</strong></div>187 <div class="chip"><div>Tue</div><strong>21</strong></div>188 <div class="chip"><div>Wed</div><strong>22</strong></div>189 <div class="chip"><div>Thu</div><strong>23</strong></div>190 </div>191 </div>192 193 <!-- Scrollable content -->194 <div class="content">195 <div class="card notice">196 <div class="badge">197 <svg viewBox="0 0 24 24" width="34" height="34"><path d="M12 2a6 6 0 0 1 6 6v2h1a2 2 0 0 1 0 4h-1v2a6 6 0 0 1-12 0v-2H5a2 2 0 0 1 0-4h1V8a6 6 0 0 1 6-6Z" fill="#2D6BFF"/></svg>198 </div>199 <div>MultiSave <small>(1% Off)</small></div>200 </div>201 202 <div class="section-hint">203 <div>Fri 17 Nov</div>204 <div class="link">205 <svg viewBox="0 0 24 24" width="28" height="28"><path d="M12 12a5 5 0 1 0-10 0 5 5 0 0 0 10 0Zm10 0a5 5 0 1 0-10 0 5 5 0 0 0 10 0Z" fill="#6A7EB3"/></svg>206 <span>2 total single from</span>207 </div>208 </div>209 210 <div class="pill">View earlier trains211 <svg viewBox="0 0 24 24" width="26" height="26" style="margin-left:10px; vertical-align:middle;">212 <path d="M6 10l6 6 6-6" fill="none" stroke="#6A7EB3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>213 </svg>214 </div>215 216 <!-- Result 1 -->217 <div class="card result">218 <div class="r-badge">Cheapest</div>219 <div class="row">220 <div class="times">221 <div class="time-block">222 <strong>10:47</strong>223 <div>On time<br>Birmingham New Street</div>224 </div>225 <div class="arrow-mid"></div>226 <div class="time-block">227 <strong>14:45</strong>228 <div>On time<br>New Milton</div>229 </div>230 </div>231 <div class="price">232 <strong>£160.58</strong>233 <div class="save">234 <svg viewBox="0 0 24 24" width="22" height="22"><path d="M12 2l2 6h6l-4.8 3.5L16 18l-4-3-4 3 1.8-6.5L5 8h6l1-6Z" fill="#2D6BFF"/></svg>235 Save £49.60236 </div>237 <div class="muted" style="text-decoration:line-through; margin-top:6px;">£211.80</div>238 </div>239 </div>240 <div class="meta">241 <div><strong>Plat.4</strong> | 3h 58m, 2 changes</div>242 <div class="link">Live tracker243 <svg viewBox="0 0 24 24" width="22" height="22"><path d="M9 5l7 7-7 7" fill="none" stroke="#5E77C8" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>244 </div>245 </div>246 </div>247 248 <!-- Result 2 -->249 <div class="card result">250 <div class="r-badge">Cheapest</div>251 <div class="row">252 <div class="times">253 <div class="time-block">254 <strong>11:47</strong>255 <div>On time<br>Birmingham New Street</div>256 </div>257 <div class="arrow-mid"></div>258 <div class="time-block">259 <strong>15:44</strong>260 <div>On time<br>New Milton</div>261 </div>262 </div>263 <div class="price">264 <strong>£160.58</strong>265 <div class="save">266 <svg viewBox="0 0 24 24" width="22" height="22"><path d="M12 2l2 6h6l-4.8 3.5L16 18l-4-3-4 3 1.8-6.5L5 8h6l1-6Z" fill="#2D6BFF"/></svg>267 Save £49.60268 </div>269 <div class="muted" style="text-decoration:line-through; margin-top:6px;">£211.80</div>270 </div>271 </div>272 <div class="meta">273 <div><strong>Plat.4</strong> | 3h 57m, 2 changes</div>274 <div class="link">Live tracker275 <svg viewBox="0 0 24 24" width="22" height="22"><path d="M9 5l7 7-7 7" fill="none" stroke="#5E77C8" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>276 </div>277 </div>278 </div>279 280 <!-- Result 3 -->281 <div class="card result">282 <div class="r-badge">Cheapest</div>283 <div class="row">284 <div class="times">285 <div class="time-block">286 <strong>16:17</strong>287 <div>On time<br>Birmingham New Street</div>288 </div>289 <div class="arrow-mid"></div>290 <div class="time-block">291 <strong>20:55</strong>292 <div>On time<br>New Milton</div>293 </div>294 </div>295 <div class="price">296 <strong>£160.58</strong>297 <div class="save">298 <svg viewBox="0 0 24 24" width="22" height="22"><path d="M12 2l2 6h6l-4.8 3.5L16 18l-4-3-4 3 1.8-6.5L5 8h6l1-6Z" fill="#2D6BFF"/></svg>299 Save £49.60300 </div>301 <div class="muted" style="text-decoration:line-through; margin-top:6px;">£211.80</div>302 </div>303 </div>304 <div class="meta">305 <div><strong>Plat.4</strong> | 3h 57m, 2 changes</div>306 <div class="link">Live tracker307 <svg viewBox="0 0 24 24" width="22" height="22"><path d="M9 5l7 7-7 7" fill="none" stroke="#5E77C8" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>308 </div>309 </div>310 </div>311 312 </div>313 314 <!-- Bottom navigation -->315 <div class="bottom">316 <div class="tabs-bottom">317 <div class="bt-item">318 <svg viewBox="0 0 24 24"><path d="M12 6v6l4 2" fill="none" stroke="#6B7B91" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="12" cy="12" r="9" fill="none" stroke="#6B7B91" stroke-width="2.2"/></svg>319 <div>By Time</div>320 </div>321 <div class="bt-item active">322 <svg viewBox="0 0 24 24"><path d="M5 20V8m7 12V4m7 16v-8" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/><rect x="3" y="8" width="4" height="12" fill="currentColor" opacity="0.2"/><rect x="10" y="4" width="4" height="16" fill="currentColor" opacity="0.2"/><rect x="17" y="12" width="4" height="8" fill="currentColor" opacity="0.2"/></svg>323 <div>By Price</div>324 </div>325 <div class="bt-item">326 <svg viewBox="0 0 24 24"><path d="M6 2l12 0-2 6H8L6 2Zm2 6v11a4 4 0 0 0 8 0V8" fill="none" stroke="#6B7B91" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>327 <div>By Duration</div>328 </div>329 </div>330 <div class="home-indicator"></div>331 </div>332</div>333</body>334</html>