GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Southampton to Salisbury - UI Mock</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7 #render-target {8 width:1440px; height:3120px; position:relative; overflow:hidden;9 background:#ffffff; border-radius:0;10 }11 /* Header */12 .header {13 position:absolute; left:0; top:0; width:100%; height:520px; background:#102a5c; color:#fff;14 }15 .status-bar {16 height:120px; padding:0 48px; display:flex; align-items:center; justify-content:space-between; font-weight:600;17 letter-spacing:0.5px;18 }19 .status-left, .status-right { display:flex; align-items:center; gap:40px; font-size:44px; }20 .status-icon {21 width:56px; height:56px; display:flex; align-items:center; justify-content:center; opacity:0.9;22 }23 .title-row {24 padding:0 48px; display:flex; align-items:center; justify-content:space-between;25 }26 .title-left { display:flex; align-items:flex-start; gap:36px; }27 .back-btn {28 width:80px; height:80px; display:flex; align-items:center; justify-content:center;29 }30 .screen-title { font-size:64px; font-weight:800; margin-top:8px; }31 .sub-title { font-size:40px; opacity:0.85; margin-top:12px; }32 .share-btn { width:80px; height:80px; display:flex; align-items:center; justify-content:center; opacity:0.95; }33 /* Transport tabs */34 .transport-bar {35 margin-top:40px; display:flex; justify-content:space-around; padding:0 80px;36 }37 .transport-item {38 width:420px; text-align:center; color:#fff;39 }40 .transport-icon { width:96px; height:96px; margin:0 auto 16px auto; }41 .transport-price { font-size:48px; font-weight:800; }42 .transport-time { font-size:40px; opacity:0.9; margin-top:8px; }43 .transport-item.disabled { opacity:0.45; }44 .active-underline {45 height:10px; background:#f16464; width:420px; position:absolute; left:80px; top:510px; border-radius:6px;46 }47 48 /* Body content */49 .content {50 position:absolute; left:0; top:520px; width:100%; padding:48px 48px 120px 48px;51 background:#ffffff;52 }53 .tip-banner {54 background:#e9fbef; border:2px solid #b7ecc8; color:#1f7c45;55 padding:36px 40px; border-radius:24px; font-size:44px; display:flex; align-items:center; gap:24px;56 }57 .qr-small { width:72px; height:72px; border:4px solid #1f7c45; border-radius:10px; position:relative; }58 .qr-small:before, .qr-small:after {59 content:""; position:absolute; width:18px; height:18px; border:4px solid #1f7c45; top:10px; left:10px;60 }61 .qr-small:after { top:34px; left:34px; }62 .filters {63 display:flex; gap:24px; margin-top:36px;64 }65 .chip {66 display:flex; align-items:center; gap:20px; padding:30px 36px; border-radius:40px; background:#f1f3f8; color:#1c2440; font-size:44px; border:2px solid #e0e5ef;67 }68 .chip .icon { width:56px; height:56px; }69 .earlier-btn {70 margin:40px auto 24px auto; width:1344px; max-width:1344px; height:120px;71 display:flex; align-items:center; justify-content:center; font-size:52px; color:#2b3c6e;72 border:3px solid #b9c3d8; border-radius:26px; background:#f7f9fc;73 }74 75 /* Result cards */76 .card {77 margin-top:36px; background:#fff; border-radius:28px; box-shadow:0 8px 30px rgba(0,0,0,0.08); border:2px solid #e7ecf3;78 padding:48px; position:relative;79 }80 .badge { color:#229c65; font-size:44px; font-weight:800; letter-spacing:1px; margin-bottom:28px; }81 .qr-corner {82 position:absolute; right:40px; top:40px; width:72px; height:72px; border:4px solid #30b275; border-radius:12px;83 }84 .logo { color:#113a7a; font-weight:800; font-size:60px; letter-spacing:2px; margin-bottom:24px; }85 .times-row {86 display:flex; align-items:center; gap:28px; margin-top:8px; margin-bottom:16px; flex-wrap:wrap;87 }88 .time { font-size:72px; font-weight:800; color:#15254b; }89 .duration {90 font-size:44px; color:#8a95a8; background:#f1f3f8; padding:12px 18px; border-radius:16px;91 }92 .arrow-line {93 height:4px; width:160px; background:#d9dee8; border-radius:2px;94 }95 .stations {96 display:flex; justify-content:space-between; color:#1f2b48; font-size:48px; margin-top:12px;97 }98 .transfers {99 margin-top:36px; display:flex; align-items:center; gap:18px; font-size:44px; color:#1d2a4b; background:#e9f0fb;100 width:max-content; padding:24px 32px; border-radius:36px; border:2px solid #d2deef;101 }102 .dropdown { width:26px; height:26px; border-left:6px solid transparent; border-right:6px solid transparent; border-top:10px solid #1d2a4b; margin-left:8px; }103 .price-block {104 position:absolute; right:48px; bottom:48px; text-align:right;105 }106 .price { font-size:64px; font-weight:800; color:#132650; }107 .meta { font-size:44px; color:#263153; margin-top:8px; display:flex; align-items:center; gap:12px; justify-content:flex-end; }108 .person-icon { width:44px; height:44px; background:#263153; border-radius:50%; }109 110 /* Bottom home indicator */111 .home-indicator {112 position:absolute; bottom:30px; left:50%; transform:translateX(-50%);113 width:360px; height:16px; background:#202840; border-radius:16px; opacity:0.3;114 }115 /* Simple SVG styles */116 svg { display:block; }117</style>118</head>119<body>120<div id="render-target">121 122 <div class="header">123 <div class="status-bar">124 <div class="status-left">125 <div style="font-size:48px;">12:46</div>126 <div class="status-icon">127 <!-- small circle icon -->128 <svg width="40" height="40"><circle cx="20" cy="20" r="12" fill="#fff"/></svg>129 </div>130 <div class="status-icon">131 <!-- search-like icon -->132 <svg width="44" height="44" viewBox="0 0 24 24">133 <circle cx="10" cy="10" r="8" fill="none" stroke="#fff" stroke-width="3"/>134 <line x1="16" y1="16" x2="22" y2="22" stroke="#fff" stroke-width="3"/>135 </svg>136 </div>137 <div class="status-icon">138 <!-- coffee icon simple -->139 <svg width="44" height="44" viewBox="0 0 24 24">140 <rect x="4" y="8" width="12" height="9" rx="2" fill="#fff"/>141 <rect x="16" y="9" width="4" height="4" rx="1" fill="#fff"/>142 </svg>143 </div>144 <div class="status-icon">145 <!-- S circle logo placeholder -->146 <div style="width:44px;height:44px;border:3px solid #fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;">S</div>147 </div>148 <div class="status-icon">149 <!-- dot -->150 <svg width="10" height="10"><circle cx="5" cy="5" r="4" fill="#fff"/></svg>151 </div>152 </div>153 <div class="status-right">154 <!-- wifi -->155 <div class="status-icon">156 <svg width="44" height="44" viewBox="0 0 24 24">157 <path d="M2 9c5-5 15-5 20 0" stroke="#fff" stroke-width="3" fill="none"/>158 <path d="M6 13c3-3 9-3 12 0" stroke="#fff" stroke-width="3" fill="none"/>159 <circle cx="12" cy="18" r="2" fill="#fff"/>160 </svg>161 </div>162 <!-- battery -->163 <div class="status-icon">164 <svg width="60" height="44" viewBox="0 0 32 18">165 <rect x="1" y="3" width="26" height="12" rx="3" stroke="#fff" stroke-width="3" fill="none"/>166 <rect x="28" y="6" width="3" height="6" rx="1" fill="#fff"/>167 <rect x="4" y="6" width="18" height="6" rx="2" fill="#fff"/>168 </svg>169 </div>170 </div>171 </div>172 173 <div class="title-row">174 <div class="title-left">175 <div class="back-btn">176 <svg width="56" height="56" viewBox="0 0 24 24">177 <polyline points="16,4 8,12 16,20" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>178 </svg>179 </div>180 <div>181 <div class="screen-title">Southampton › Salisbury</div>182 <div class="sub-title">Thu, Nov 2, 1 passenger</div>183 </div>184 </div>185 <div class="share-btn">186 <svg width="56" height="56" viewBox="0 0 24 24">187 <circle cx="6" cy="12" r="3" fill="#fff"/>188 <circle cx="18" cy="6" r="3" fill="#fff"/>189 <circle cx="18" cy="18" r="3" fill="#fff"/>190 <path d="M8.7 11l6-4M8.7 13l6 4" stroke="#fff" stroke-width="2" fill="none"/>191 </svg>192 </div>193 </div>194 195 <div class="transport-bar">196 <div class="transport-item">197 <div class="transport-icon">198 <!-- train icon -->199 <svg viewBox="0 0 24 24" width="96" height="96">200 <rect x="5" y="4" width="14" height="12" rx="3" fill="#fff"/>201 <rect x="7" y="7" width="4" height="3" fill="#102a5c"/>202 <rect x="13" y="7" width="4" height="3" fill="#102a5c"/>203 <circle cx="9" cy="18" r="2" fill="#fff"/>204 <circle cx="15" cy="18" r="2" fill="#fff"/>205 </svg>206 </div>207 <div class="transport-price">$16</div>208 <div class="transport-time">0h29m</div>209 </div>210 <div class="transport-item">211 <div class="transport-icon">212 <!-- bus icon -->213 <svg width="96" height="96" viewBox="0 0 24 24">214 <rect x="3" y="5" width="18" height="10" rx="2" fill="#fff"/>215 <circle cx="7" cy="17" r="2" fill="#fff"/>216 <circle cx="17" cy="17" r="2" fill="#fff"/>217 </svg>218 </div>219 <div class="transport-price">$9</div>220 <div class="transport-time">0h40m</div>221 </div>222 <div class="transport-item disabled">223 <div class="transport-icon">224 <!-- plane icon -->225 <svg width="96" height="96" viewBox="0 0 24 24">226 <path d="M2 12l8-2 12-8-6 12-2 8-5-6z" fill="#fff" opacity="0.8"/>227 </svg>228 </div>229 <div class="transport-price">-</div>230 <div class="transport-time"> </div>231 </div>232 </div>233 <div class="active-underline"></div>234 </div>235 236 <div class="content">237 <div class="tip-banner">238 <div class="qr-small"></div>239 <div>This icon means you’ve found a mobile ticket</div>240 </div>241 242 <div class="filters">243 <div class="chip">244 <div class="icon">245 <!-- filter icon -->246 <svg width="56" height="56" viewBox="0 0 24 24">247 <path d="M4 5h16M7 12h10M10 19h4" stroke="#243457" stroke-width="3" stroke-linecap="round"/>248 </svg>249 </div>250 <div>Time: Depart at 8:00 AM</div>251 </div>252 <div class="chip">253 <div class="icon">254 <!-- stops icon -->255 <svg width="56" height="56" viewBox="0 0 24 24">256 <circle cx="5" cy="12" r="3" fill="#243457"/>257 <circle cx="19" cy="12" r="3" fill="#243457"/>258 <rect x="8" y="11" width="8" height="2" fill="#243457"/>259 </svg>260 </div>261 <div>Stops</div>262 </div>263 <div class="chip">264 <div class="icon">265 <!-- duration icon -->266 <svg width="56" height="56" viewBox="0 0 24 24">267 <circle cx="12" cy="12" r="8" fill="none" stroke="#243457" stroke-width="3"/>268 <path d="M12 12l4-2" stroke="#243457" stroke-width="3" stroke-linecap="round"/>269 </svg>270 </div>271 <div>Duration</div>272 </div>273 </div>274 275 <div class="earlier-btn">Load earlier trains</div>276 277 <!-- Card 1 -->278 <div class="card">279 <div class="badge">CHEAPEST, FASTEST</div>280 <div class="qr-corner"></div>281 <div class="logo">gWR</div>282 <div class="times-row">283 <div class="time">8:10 AM</div>284 <div class="duration">0h29m</div>285 <div class="time">8:39 AM</div>286 </div>287 <div class="stations">288 <div>Southampton Central</div>289 <div>Salisbury</div>290 </div>291 <div class="transfers">292 <div>0 Transfers</div>293 <div class="dropdown"></div>294 </div>295 <div class="price-block">296 <div class="price">$16</div>297 <div class="meta">298 <div class="person-icon"></div>299 <div>1 • One-way</div>300 </div>301 </div>302 </div>303 304 <!-- Card 2 -->305 <div class="card">306 <div class="badge">CHEAPEST</div>307 <div class="qr-corner" style="border-color:#30b275;"></div>308 <div class="logo">gWR</div>309 <div class="times-row">310 <div class="time">8:23 AM</div>311 <div class="duration">0h30m</div>312 <div class="time">8:53 AM</div>313 </div>314 <div class="stations">315 <div>Southampton Central</div>316 <div>Salisbury</div>317 </div>318 <div class="transfers">319 <div>0 Transfers</div>320 <div class="dropdown"></div>321 </div>322 <div class="price-block">323 <div class="price">$16</div>324 <div class="meta">325 <div class="person-icon"></div>326 <div>1 • One-way</div>327 </div>328 </div>329 </div>330 331 <!-- Placeholder for more cards -->332 <div class="card" style="opacity:0.6;">333 <div class="badge">CHEAPEST</div>334 <div class="logo">gWR</div>335 <div class="times-row">336 <div class="time">8:45 AM</div>337 <div class="duration">0h30m</div>338 <div class="time">9:15 AM</div>339 </div>340 <div class="stations">341 <div>Southampton Central</div>342 <div>Salisbury</div>343 </div>344 <div class="transfers">345 <div>0 Transfers</div>346 <div class="dropdown"></div>347 </div>348 <div class="price-block">349 <div class="price">$16</div>350 <div class="meta">351 <div class="person-icon"></div>352 <div>1 • One-way</div>353 </div>354 </div>355 </div>356 </div>357 358 <div class="home-indicator"></div>359</div>360</body>361</html>