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</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:#0F1A2B; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#ffffff; border-radius:28px;12 }13 14 /* Header */15 .header {16 background:#cfe9ff;17 padding:38px 40px 26px;18 box-sizing:border-box;19 }20 .status-bar {21 display:flex; justify-content:space-between; align-items:center;22 color:#1c2b42; opacity:.9; font-weight:600; font-size:42px;23 margin-bottom:26px;24 }25 .status-icons { display:flex; align-items:center; gap:26px; }26 .status-icons .dot { width:10px; height:10px; background:#2e3a4f; border-radius:50%; display:inline-block; }27 .status-icons span { font-weight:600; font-size:38px; color:#2e3a4f; }28 29 .top-nav { display:flex; align-items:center; gap:22px; margin-bottom:24px; }30 .top-nav h1 { font-size:50px; margin:0; font-weight:800; color:#0d1b38; }31 .back-btn svg { width:44px; height:44px; }32 33 .modes { display:flex; gap:80px; padding:18px 0 6px; align-items:flex-end; border-bottom:1px solid rgba(0,0,0,0.08); }34 .mode { display:flex; align-items:center; gap:14px; color:#6b7b93; font-weight:700; }35 .mode .sub { font-size:32px; font-weight:600; color:#6b86a5; }36 .mode svg { width:44px; height:44px; }37 .mode.active { color:#2e65ff; }38 .mode.active .sub { color:#2e65ff; }39 .active-underline { height:6px; background:#2e65ff; width:210px; border-radius:6px; margin-top:14px; }40 41 .dates-row { display:flex; gap:18px; margin-top:24px; padding-bottom:14px; }42 .date-pill {43 width:134px; height:128px; border-radius:28px; background:#eaf3ff; text-align:center;44 display:flex; flex-direction:column; justify-content:center; align-items:center;45 color:#6c7d95; font-weight:700;46 }47 .date-pill .num { font-size:48px; margin-top:6px; }48 .date-pill.active { background:#2e65ff; color:#fff; }49 .date-pill.gray { background:#eef3f8; color:#7a889c; }50 51 /* Body sections */52 .content { background:#f3f6fb; padding:26px 34px 140px; }53 .card { background:#fff; border-radius:28px; box-shadow:0 2px 0 rgba(0,0,0,0.02); padding:30px; }54 .card + .card { margin-top:22px; }55 56 .multisave { display:flex; align-items:center; gap:18px; }57 .ms-icon { width:56px; height:56px; border-radius:12px; background:#e9f1ff; display:flex; align-items:center; justify-content:center; }58 .ms-icon svg { width:34px; height:34px; }59 .multisave strong { font-size:36px; }60 .multisave span { color:#7c8ba3; font-weight:600; margin-left:6px; }61 62 .daterow { display:flex; justify-content:space-between; align-items:center; margin:22px 4px; color:#616f86; font-weight:700; }63 .daterow .right { display:flex; align-items:center; gap:12px; color:#6b7a90; }64 65 .earlier { padding:38px; text-align:center; font-weight:800; color:#2b3a4f; border-radius:26px; }66 .earlier span { color:#51627b; font-weight:700; }67 68 /* Journey cards */69 .journey { background:#fff; border-radius:34px; padding:36px 34px; }70 .journey + .journey { margin-top:26px; }71 .journey-header { display:flex; justify-content:space-between; align-items:flex-start; }72 .times { display:flex; align-items:center; gap:24px; }73 .time { font-size:64px; font-weight:800; color:#0b1b34; }74 .arrow { width:70px; height:8px; background:#dbe3ef; border-radius:4px; margin:0 10px; position:relative; }75 .arrow:after { content:""; position:absolute; right:-6px; top:-8px; border:8px solid transparent; border-left-color:#dbe3ef; }76 .meta { display:flex; gap:56px; margin-top:10px; }77 .meta .col { color:#7a879b; font-weight:700; }78 .meta .label { font-size:28px; }79 .meta .place { font-size:34px; margin-top:6px; color:#8fa0b4; font-weight:700; }80 81 .price { text-align:right; }82 .price .amount { font-size:56px; font-weight:900; color:#0d1b38; }83 .save-pill { margin-top:10px; display:inline-flex; align-items:center; gap:10px; background:#e6f0ff; color:#2b65ff; border-radius:20px; padding:10px 16px; font-weight:800; font-size:28px; }84 .save-pill svg { width:28px; height:28px; }85 86 .j-foot { margin-top:30px; display:flex; justify-content:space-between; align-items:center; border-top:1px solid #eef2f6; padding-top:22px; color:#20314d; font-weight:800; }87 .j-foot .muted { color:#6f7f94; font-weight:700; }88 .qr { display:flex; align-items:center; gap:10px; color:#9aa7bb; }89 90 .tag { position:absolute; top:-18px; left:22px; background:#ffe7dd; color:#ef6b42; padding:10px 18px; border-radius:16px; font-weight:900; font-size:28px; }91 92 /* Bottom tabs */93 .bottom-tabs {94 position:absolute; left:0; right:0; bottom:86px;95 background:#fff; border-top-left-radius:26px; border-top-right-radius:26px;96 box-shadow:0 -6px 20px rgba(0,0,0,0.06);97 padding:18px 40px 24px;98 }99 .tabs { display:flex; justify-content:space-around; }100 .tab { display:flex; flex-direction:column; align-items:center; color:#6f8098; font-weight:800; gap:8px; }101 .tab svg { width:44px; height:44px; }102 .tab.active { color:#2b65ff; }103 .gesture { position:absolute; bottom:22px; left:50%; transform:translateX(-50%); width:340px; height:10px; background:#d9dbe0; border-radius:8px; }104 105 /* Small helpers */106 .small { font-size:30px; color:#8fa0b4; }107</style>108</head>109<body>110<div id="render-target">111 112 <div class="header">113 <div class="status-bar">114 <div>10:36</div>115 <div class="status-icons">116 <svg width="34" height="34" viewBox="0 0 24 24" fill="#2e3a4f"><path d="M17 1H7a2 2 0 0 0-2 2v2h14V3a2 2 0 0 0-2-2zM3 7h18v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V7z"/></svg>117 <svg width="34" height="34" viewBox="0 0 24 24" fill="#2e3a4f"><path d="M3 11h18v2H3z"/></svg>118 <svg width="34" height="34" viewBox="0 0 24 24" fill="#2e3a4f"><path d="M15.5 14h-.79l-.28-.27A6.5 6.5 0 1 0 16 14.5l.27.28v.79l5 4.99L20.49 21l-4.99-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/></svg>119 <span>•</span>120 <svg width="34" height="34" viewBox="0 0 24 24" fill="#2e3a4f"><path d="M20 8h-3V6a5 5 0 0 0-10 0v2H4v14h16V8zm-8-3a3 3 0 0 1 3 3v2H9V8a3 3 0 0 1 3-3z"/></svg>121 <span>97%</span>122 </div>123 </div>124 125 <div class="top-nav">126 <div class="back-btn" aria-label="Back">127 <svg viewBox="0 0 24 24" fill="#23324A"><path d="M15.5 4.5 8 12l7.5 7.5-1.5 1.5L5 12l9-9 1.5 1.5z"/></svg>128 </div>129 <h1>Birmingham(any) → New Milton</h1>130 </div>131 132 <div class="modes">133 <div class="mode active">134 <svg viewBox="0 0 24 24" fill="currentColor"><path d="M5 3h14a2 2 0 0 1 2 2v9a4 4 0 0 1-4 4h-1l1.5 2H16l-2-2H10l-2 2H6.5L8 18H7a4 4 0 0 1-4-4V5a2 2 0 0 1 2-2zm2 3v4h10V6H7z"/></svg>135 <div>136 <div>Train</div>137 <div class="sub">From £160.58</div>138 </div>139 </div>140 <div class="mode">141 <svg viewBox="0 0 24 24" fill="currentColor"><path d="M4 6h16a2 2 0 0 1 2 2v7H2V8a2 2 0 0 1 2-2zm1 10h2a2 2 0 1 1-4 0h2zm14 0h2a2 2 0 1 1-4 0h2z"/></svg>142 <div>143 <div>Coach</div>144 <div class="sub" style="color:#9bb0c7;">Not available</div>145 </div>146 </div>147 </div>148 <div class="active-underline"></div>149 150 <div class="dates-row">151 <div class="date-pill active">152 <div>Fri</div>153 <div class="num">17</div>154 </div>155 <div class="date-pill gray">156 <div>Sat</div>157 <div class="num">18</div>158 </div>159 <div class="date-pill gray">160 <div>Sun</div>161 <div class="num">19</div>162 </div>163 <div class="date-pill gray">164 <div>Mon</div>165 <div class="num">20</div>166 </div>167 <div class="date-pill gray">168 <div>Tue</div>169 <div class="num">21</div>170 </div>171 <div class="date-pill gray">172 <div>Wed</div>173 <div class="num">22</div>174 </div>175 <div class="date-pill gray">176 <div>Thu</div>177 <div class="num">23</div>178 </div>179 </div>180 </div>181 182 <div class="content">183 <div class="card multisave">184 <div class="ms-icon">185 <svg viewBox="0 0 24 24" fill="#2b65ff"><path d="M12 12a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm-7 8a7 7 0 0 1 14 0H5z"/></svg>186 </div>187 <div><strong>MultiSave</strong> <span>(1% Off)</span></div>188 </div>189 190 <div class="daterow">191 <div>Fri 17 Nov</div>192 <div class="right">193 <svg width="36" height="36" viewBox="0 0 24 24" fill="#6b7a90"><path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4 0-8 2-8 6v2h16v-2c0-4-4-6-8-6z"/></svg>194 <span>2 total single from</span>195 </div>196 </div>197 198 <div class="card earlier">199 View earlier trains ▲200 </div>201 202 <!-- Journey 1 -->203 <div class="journey card" style="position:relative;">204 <div class="journey-header">205 <div>206 <div class="times">207 <div class="time">10:03</div>208 <div class="arrow"></div>209 <div class="time">13:26</div>210 </div>211 <div class="meta">212 <div class="col">213 <div class="label">On time</div>214 <div class="place">Birmingham New Street</div>215 </div>216 <div class="col">217 <div class="label">On time</div>218 <div class="place">New Milton</div>219 </div>220 </div>221 </div>222 <div class="price">223 <div class="amount">£178.01</div>224 <div class="save-pill">225 <svg viewBox="0 0 24 24" fill="#2b65ff"><path d="M11 21h-1l1-7H6l7-11h1l-1 7h5z"/></svg>226 Save £32.00227 </div>228 <div class="small" style="text-decoration:line-through; margin-top:6px;">£211.80</div>229 </div>230 </div>231 <div class="j-foot">232 <div>Plat.<strong>1A</strong> | <span class="muted">3h 23m, 1 change</span></div>233 <div class="qr">234 <svg width="30" height="30" viewBox="0 0 24 24" fill="#94a2b5"><path d="M3 3h8v8H3V3zm2 2v4h4V5H5zm6 6h8v8h-8v-8zm2 2v4h4v-4h-4zM3 13h4v2H3v-2zm14-10h4v4h-2V5h-2V3zM5 19h2v2H3v-4h2v2z"/></svg>235 <span class="muted">Live tracker ›</span>236 </div>237 </div>238 </div>239 240 <!-- Journey 2 (Cheapest) -->241 <div class="journey card" style="position:relative;">242 <div class="tag">Cheapest</div>243 <div class="journey-header">244 <div>245 <div class="times">246 <div class="time">10:47</div>247 <div class="arrow"></div>248 <div class="time">14:45</div>249 </div>250 <div class="meta">251 <div class="col">252 <div class="label">On time</div>253 <div class="place">Birmingham New Street</div>254 </div>255 <div class="col">256 <div class="label">On time</div>257 <div class="place">New Milton</div>258 </div>259 </div>260 </div>261 <div class="price">262 <div class="amount">£160.58</div>263 <div class="save-pill">264 <svg viewBox="0 0 24 24" fill="#2b65ff"><path d="M11 21h-1l1-7H6l7-11h1l-1 7h5z"/></svg>265 Save £49.60266 </div>267 <div class="small" style="text-decoration:line-through; margin-top:6px;">£211.80</div>268 </div>269 </div>270 <div class="j-foot">271 <div>Plat.<strong>4</strong> | <span class="muted">3h 58m, 2 changes</span></div>272 <div class="muted">Live tracker ›</div>273 </div>274 </div>275 276 <!-- Journey 3 -->277 <div class="journey card">278 <div class="journey-header">279 <div>280 <div class="times">281 <div class="time">11:03</div>282 <div class="arrow"></div>283 <div class="time">14:26</div>284 </div>285 <div class="meta">286 <div class="col">287 <div class="label">On time</div>288 <div class="place">Birmingham New Street</div>289 </div>290 <div class="col">291 <div class="label">On time</div>292 <div class="place">New Milton</div>293 </div>294 </div>295 </div>296 <div class="price">297 <div class="amount">£178.01</div>298 <div class="save-pill">299 <svg viewBox="0 0 24 24" fill="#2b65ff"><path d="M11 21h-1l1-7H6l7-11h1l-1 7h5z"/></svg>300 Save £32.00301 </div>302 <div class="small" style="text-decoration:line-through; margin-top:6px;">£211.80</div>303 </div>304 </div>305 <div class="j-foot">306 <div>Plat.<strong>?</strong> | <span class="muted">3h 23m, 1 change</span></div>307 <div class="muted">Live tracker ›</div>308 </div>309 </div>310 311 </div>312 313 <!-- Bottom tabs -->314 <div class="bottom-tabs">315 <div class="tabs">316 <div class="tab active">317 <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 7a5 5 0 1 1-5 5H5a7 7 0 1 0 7-7v2z"/></svg>318 <div>By Time</div>319 </div>320 <div class="tab">321 <svg viewBox="0 0 24 24" fill="currentColor"><path d="M4 20h4V4H4v16zm6 0h4V10h-4v10zm6 0h4v-7h-4v7z"/></svg>322 <div>By Price</div>323 </div>324 <div class="tab">325 <svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 2h12v4H6V2zm0 6h12l-4 8v6H10v-6L6 8z"/></svg>326 <div>By Duration</div>327 </div>328 </div>329 </div>330 <div class="gesture"></div>331 332</div>333</body>334</html>