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>Eurostar UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #FFFFFF; border-radius: 0;13 box-shadow: none;14 }15 /* Colors */16 .blue { background:#0B3A85; color:#fff; }17 .light-gray { background:#F0F2F5; }18 .muted { color:#6C7A89; }19 .divider { height:1px; background:#2C538E; opacity:0.4; }20 .hairline { height:1px; background:#E3E6EA; }21 22 /* Status bar */23 .status-bar {24 height: 80px; padding: 0 40px;25 display:flex; align-items:center; justify-content:space-between;26 color:#fff; font-size:36px;27 }28 .status-right { display:flex; align-items:center; gap:22px; }29 .icon-battery, .icon-signal { width:40px; height:40px; }30 .icon-dot { width:14px; height:14px; border-radius:50%; background:#CFDAF0; opacity:0.7; }31 32 /* Header app bar */33 .app-header {34 padding: 24px 40px 36px 40px;35 }36 .top-row {37 display:flex; align-items:center; justify-content:space-between; margin-bottom:34px;38 }39 .back-btn { display:flex; align-items:center; gap:18px; color:#fff; }40 .back-btn svg { width:40px; height:40px; }41 .brand-holder {42 display:flex; align-items:center; gap:26px;43 }44 .logo-placeholder {45 width:220px; height:92px; background:#E0E0E0; border:1px solid #BDBDBD;46 color:#757575; display:flex; align-items:center; justify-content:center; border-radius:8px;47 font-weight:bold;48 }49 .basket {50 background:#FFC516; color:#0B3A85; padding:22px 34px; border-radius:40px;51 display:flex; align-items:center; gap:18px; font-weight:bold; font-size:34px; box-shadow:0 4px 0 rgba(0,0,0,0.1);52 }53 .basket .tag { font-weight:bold; }54 .route-row {55 display:flex; align-items:flex-start; justify-content:space-between; color:#fff;56 padding: 24px 0;57 }58 .route-left { font-size:42px; font-weight:700; line-height:1.25; max-width:640px; }59 .route-right { text-align:right; font-size:34px; line-height:1.4; }60 .edit-btn { display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center; margin-left:16px; border:2px solid rgba(255,255,255,0.6); border-radius:50%; }61 /* Fare tabs */62 .tabs-shell {63 margin: 26px 36px; background:#F5F6F8; border-radius:28px; padding:26px;64 }65 .tabs { display:flex; gap:18px; }66 .tab {67 flex:1; padding:26px 18px; border-radius:18px; color:#fff; display:flex; align-items:center; justify-content:center; gap:14px; font-size:36px; font-weight:600;68 }69 .tab.teal { background:#0E6F63; }70 .tab.magenta { background:#8A115A; }71 .tab.navy { background:#0B3A85; }72 .tab svg { width:34px; height:34px; }73 74 /* Price card */75 .card {76 margin: 26px 36px; background:#FFFFFF; border-radius:22px; box-shadow: 0 2px 0 rgba(0,0,0,0.06); border:1px solid #E5E8EC;77 }78 .fare-grid {79 display:grid; grid-template-columns: 300px 1fr 1fr 1fr;80 min-height: 340px; border-radius:22px; overflow:hidden;81 }82 .fare-col { padding:32px; border-right:1px solid #E5E8EC; }83 .fare-col:last-child { border-right:none; }84 .time-col .big { font-size:58px; font-weight:800; color:#0B3A85; }85 .time-col .small { font-size:34px; color:#0B3A85; margin-top:6px; }86 .time-col .muted { margin-top:20px; font-size:32px; }87 .price { font-size:68px; font-weight:800; color:#000; }88 .na { font-size:44px; color:#7A8795; display:flex; align-items:center; justify-content:center; height:100%; }89 .expand { font-size:32px; color:#0B3A85; margin-top:18px; display:inline-flex; align-items:center; gap:10px; }90 91 /* Timeline card */92 .timeline-card { padding:36px; }93 .timeline {94 display:grid; grid-template-columns: 120px 1fr; gap:30px;95 }96 .line {97 position:relative; padding-top:20px;98 }99 .line::before {100 content:""; position:absolute; left:56px; top:0; bottom:0; width:6px; background:#1B56B0; border-radius:4px;101 }102 .dot { position:absolute; left:47px; width:24px; height:24px; border-radius:50%; background:#fff; border:6px solid #1B56B0; }103 .dot.start { top:40px; }104 .dot.mid { top:480px; }105 .dot.end { bottom:40px; }106 .line .logo1, .line .logo2 {107 position:absolute; left:12px; width:100px; height:60px;108 background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;109 display:flex; align-items:center; justify-content:center; border-radius:8px;110 }111 .line .logo1 { top:18px; }112 .line .logo2 { top:520px; }113 .events { padding:10px 0; }114 .event-row { margin-bottom:36px; }115 .ev-time { font-size:52px; font-weight:800; color:#000; }116 .ev-title { font-size:48px; font-weight:800; margin-left:18px; }117 .ev-sub { font-size:34px; color:#3B4C60; margin-left:66px; margin-top:8px; }118 .train-chip { display:inline-flex; align-items:center; gap:12px; color:#1B56B0; font-size:36px; margin-left:66px; }119 .train-chip svg { width:40px; height:40px; }120 121 /* Bottom navigation */122 .bottom-nav {123 position:absolute; left:0; right:0; bottom:0;124 height:200px; background:#FFFFFF; border-top:1px solid #E3E6EA;125 display:flex; align-items:center; justify-content:space-around;126 }127 .nav-item { display:flex; flex-direction:column; align-items:center; gap:18px; color:#0B3A85; }128 .nav-item svg { width:56px; height:56px; }129 .nav-item span { font-size:34px; }130 131</style>132</head>133<body>134<div id="render-target">135 136 <!-- Blue header -->137 <div class="blue">138 <div class="status-bar">139 <div>7:59</div>140 <div class="status-right">141 <div class="icon-dot"></div>142 <svg class="icon-signal" viewBox="0 0 24 24" fill="#CFDAF0"><rect x="2" y="14" width="3" height="8"/><rect x="7" y="10" width="3" height="12"/><rect x="12" y="6" width="3" height="16"/><rect x="17" y="2" width="3" height="20"/></svg>143 <svg class="icon-battery" viewBox="0 0 32 18"><rect x="1" y="3" width="26" height="12" rx="2" fill="none" stroke="#CFDAF0" stroke-width="2"/><rect x="3" y="5" width="20" height="8" fill="#CFDAF0"/><rect x="27" y="6" width="4" height="6" rx="1" fill="#CFDAF0"/></svg>144 <div>100%</div>145 </div>146 </div>147 148 <div class="app-header">149 <div class="top-row">150 <div class="back-btn">151 <svg viewBox="0 0 24 24" fill="#fff"><path d="M15.5 4.5L7 12l8.5 7.5-1.5 1.5L4 12 14 3l1.5 1.5z"/></svg>152 </div>153 <div class="brand-holder">154 <div class="logo-placeholder">[IMG: eurostar logo]</div>155 </div>156 <div class="basket">157 <svg viewBox="0 0 24 24" fill="#0B3A85"><path d="M7 8h10l-1 11H8L7 8zm3-4h4l2 4H8l2-4z"/></svg>158 <span class="tag">$0.00</span>159 <svg viewBox="0 0 24 24" fill="#0B3A85"><path d="M7 10l5 5 5-5H7z"/></svg>160 </div>161 </div>162 163 <div class="route-row">164 <div class="route-left">165 Amsterdam Centraal –<br>London St Pancras Int'l166 </div>167 <div class="route-right">168 Sun 5 Nov<br>1 adult169 <span class="edit-btn">170 <svg viewBox="0 0 24 24" fill="#fff"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1.003 1.003 0 0 0 0-1.42l-2.34-2.34a1.003 1.003 0 0 0-1.42 0l-1.83 1.83 3.75 3.75 1.84-1.82z"/></svg>171 </span>172 </div>173 </div>174 </div>175 <div class="divider"></div>176 </div>177 178 <!-- Fare tabs -->179 <div class="tabs-shell">180 <div class="tabs">181 <div class="tab teal">182 <svg viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2"/><text x="12" y="16" text-anchor="middle" font-size="12" fill="#fff">i</text></svg>183 <span>Standard</span>184 </div>185 <div class="tab magenta">186 <svg viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2"/><text x="12" y="16" text-anchor="middle" font-size="12" fill="#fff">i</text></svg>187 <span>Standard Premier</span>188 </div>189 <div class="tab navy">190 <svg viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2"/><text x="12" y="16" text-anchor="middle" font-size="12" fill="#fff">i</text></svg>191 <span>Business Premier</span>192 </div>193 </div>194 </div>195 196 <!-- Price card -->197 <div class="card">198 <div class="fare-grid">199 <div class="fare-col time-col">200 <div class="big">07:45</div>201 <div class="small">→</div>202 <div class="big">11:57</div>203 <div class="muted">5 hr 12 min</div>204 <div class="expand">205 <span>1 change</span>206 <svg viewBox="0 0 24 24" fill="#0B3A85"><path d="M7 15l5-5 5 5H7z"/></svg>207 </div>208 </div>209 <div class="fare-col">210 <div class="price">$230</div>211 </div>212 <div class="fare-col">213 <div class="na">Not available</div>214 </div>215 <div class="fare-col">216 <div class="na">Not available</div>217 </div>218 </div>219 </div>220 221 <!-- Timeline details -->222 <div class="card timeline-card">223 <div class="timeline">224 <div class="line">225 <div class="logo1">[IMG: eurostar logo]</div>226 <div class="logo2">[IMG: eurostar logo]</div>227 <div class="dot start"></div>228 <div class="dot mid"></div>229 <div class="dot end"></div>230 </div>231 <div class="events">232 <div class="event-row" style="display:flex; align-items:center;">233 <div class="ev-time">07:45</div>234 <div class="ev-title">Amsterdam Centraal</div>235 </div>236 <div class="event-row">237 <div class="train-chip">238 <svg viewBox="0 0 24 24" fill="#1B56B0"><path d="M5 16h14V8a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v8zm3 3l-2 2h12l-2-2H8z"/></svg>239 <span>2 hr 23 min</span>240 </div>241 </div>242 243 <div class="event-row" style="display:flex; align-items:center;">244 <div class="ev-time">10:08</div>245 <div class="ev-title">Brussels Midi / Zuid</div>246 </div>247 <div class="ev-sub">48 min to change platform</div>248 249 <div class="event-row" style="display:flex; align-items:center; margin-top:28px;">250 <div class="ev-time">10:56</div>251 <div class="ev-title">Brussels Midi / Zuid</div>252 </div>253 <div class="ev-sub">Check your ticket for the recommended arrival time at the station.</div>254 255 <div class="event-row" style="margin-top:12px;">256 <div class="train-chip">257 <svg viewBox="0 0 24 24" fill="#1B56B0"><path d="M5 16h14V8a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v8zm3 3l-2 2h12l-2-2H8z"/></svg>258 <span>2 hr 1 min</span>259 </div>260 </div>261 262 <div class="event-row" style="display:flex; align-items:center; margin-top:24px;">263 <div class="ev-time">11:57</div>264 <div class="ev-title">London St Pancras Int'l</div>265 </div>266 </div>267 </div>268 </div>269 270 <!-- Bottom nav -->271 <div class="bottom-nav">272 <div class="nav-item">273 <svg viewBox="0 0 24 24" fill="#0B3A85"><path d="M12 3l9 8h-3v8H6v-8H3l9-8z"/></svg>274 <span>Home</span>275 </div>276 <div class="nav-item">277 <svg viewBox="0 0 24 24" fill="#0B3A85"><path d="M4 7h16v2H4V7zm0 4h16v2H4v-2zm0 4h10v2H4v-2z"/></svg>278 <span>Book</span>279 </div>280 <div class="nav-item">281 <svg viewBox="0 0 24 24" fill="#0B3A85"><path d="M6 22h12V6H6v16zm2-14h8v12H8V8zM9 4h6l1 2H8l1-2z"/></svg>282 <span>Your bookings</span>283 </div>284 <div class="nav-item">285 <svg viewBox="0 0 24 24" fill="#0B3A85"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>286 <span>More</span>287 </div>288 </div>289 290</div>291</body>292</html>