GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Train Search UI</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8 #render-target {9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#ffffff; color:#0a2540;11 }12 13 /* Header / App bar */14 .header {15 background:#122a63;16 color:#fff;17 height:390px;18 position:relative;19 padding:0 36px;20 box-sizing:border-box;21 }22 .status {23 height:70px; display:flex; align-items:center; justify-content:space-between;24 font-weight:600; font-size:40px; opacity:.95; padding-top:6px;25 }26 .status .right { display:flex; align-items:center; gap:26px; }27 .icon-wifi, .icon-battery { width:44px; height:44px; }28 .topbar {29 height:92px; display:flex; align-items:center; justify-content:space-between; margin-top:14px;30 }31 .icon-btn { width:80px; height:80px; display:flex; align-items:center; justify-content:center; }32 .title-wrap { margin-top:10px; }33 .title { font-size:64px; font-weight:800; letter-spacing:0.2px; }34 .subtitle { font-size:34px; opacity:.85; margin-top:6px; }35 36 /* transport tabs */37 .tabs {38 background:#f5f7fb;39 display:flex; gap:90px; padding:30px 40px 0; margin:28px -36px 0; height:170px;40 }41 .tab {42 flex:1; text-align:center; position:relative; color:#a0b1cf;43 }44 .tab.active { color:#ffffff; }45 .tab .price { font-size:44px; font-weight:700; color:#ffffff; margin-top:10px; }46 .tab .dash { font-size:48px; color:#a0b1cf; margin-top:12px; font-weight:700; }47 .tab .dur { font-size:42px; color:#ffffff; margin-top:12px; }48 .tab.active:after {49 content:""; position:absolute; left:20%; right:20%; bottom:-6px; height:12px; background:#ff6a6a; border-radius:8px;50 }51 52 /* Main area */53 .content {54 background:#f6f7fb;55 position:absolute; left:0; right:0; top:390px; bottom:0; overflow:auto;56 padding:28px 32px 40px;57 }58 59 /* Info banner */60 .info {61 background:#e9f7ee; border:2px solid #bfe7cd; color:#246b3b;62 border-radius:24px; padding:26px 28px; display:flex; align-items:center; gap:20px; font-size:40px; line-height:1.2;63 }64 .qr-mini { width:56px; height:56px; background:#2bb673; color:#eafff0; display:flex; align-items:center; justify-content:center; border-radius:12px; font-weight:800; }65 .filters { display:flex; gap:24px; margin:26px 0; flex-wrap:wrap; }66 .pill {67 background:#ffffff; border:2px solid #d5dbe8; border-radius:42px; padding:26px 32px; font-size:40px; box-shadow:0 2px 0 rgba(0,0,0,0.02);68 }69 .btn-outline {70 width:100%; border:3px solid #b8bfd4; background:#f7f8fc; color:#243b6b;71 border-radius:26px; padding:32px; font-size:48px; font-weight:700; text-align:center; margin-bottom:18px;72 }73 74 /* Cards */75 .card {76 background:#ffffff; border-radius:28px; box-shadow:0 10px 20px rgba(15,40,90,0.08);77 padding:30px; margin-top:28px;78 }79 .badge { color:#1fa36a; font-weight:800; letter-spacing:1px; font-size:36px; }80 .operator { display:flex; align-items:center; gap:18px; margin-top:18px; color:#7a879d; font-size:38px; }81 .op-icon {82 width:84px; height:84px; border-radius:42px; background:#eef3ff; color:#102a66; display:flex; align-items:center; justify-content:center; font-weight:900; border:2px solid #d7def2;83 }84 .times {85 display:flex; align-items:center; justify-content:space-between; margin-top:18px;86 }87 .time-left, .time-right { font-size:64px; font-weight:800; color:#0a2346; }88 .duration { font-size:42px; color:#a4adbf; margin:0 14px; }89 .station { font-size:40px; color:#3b4a6b; margin-top:10px; }90 .meta {91 display:flex; align-items:center; justify-content:space-between; margin-top:26px;92 }93 .transfer { background:#f3f6ff; border:2px solid #cfd7ef; padding:20px 28px; border-radius:38px; font-size:40px; color:#283b71; display:inline-flex; align-items:center; gap:14px; }94 .price { font-size:56px; font-weight:900; color:#0a2346; display:flex; align-items:center; gap:20px; }95 .qr-green { width:48px; height:48px; border-radius:8px; background:#2cc98f; display:inline-flex; align-items:center; justify-content:center; }96 .person { font-size:40px; color:#334; opacity:.7; margin-right:8px; }97 98 /* Small helpers */99 .divider-dot { width:160px; border-bottom:4px solid #e2e6f3; margin:0 12px; }100 .light { color:#a1acc5; }101 .w-33 { width:33.333%; }102 .nowrap { white-space:nowrap; }103 .muted { color:#7e8aa7; }104 105 /* SVG resets */106 svg { display:block; }107</style>108</head>109<body>110<div id="render-target">111 112 <div class="header">113 <div class="status">114 <div>12:04</div>115 <div class="right">116 <div class="icon-wifi">117 <svg viewBox="0 0 24 24" width="44" height="44" fill="#fff"><path d="M12 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6.6-4.8a10 10 0 0 0-13.2 0l1.4 1.4a8 8 0 0 1 10.4 0l1.4-1.4zm3.6-3.6a15 15 0 0 0-19.2 0l1.5 1.5a13 13 0 0 1 16.2 0L22.2 11.6z"/></svg>118 </div>119 <div class="icon-battery">120 <svg viewBox="0 0 28 16" width="54" height="44" fill="none">121 <rect x="1" y="3" width="22" height="10" rx="2" stroke="#fff" stroke-width="2"></rect>122 <rect x="3" y="5" width="18" height="6" rx="1" fill="#fff"></rect>123 <rect x="24" y="6" width="3" height="4" rx="1" fill="#fff"></rect>124 </svg>125 </div>126 </div>127 </div>128 129 <div class="topbar">130 <div class="icon-btn">131 <svg viewBox="0 0 24 24" width="54" height="54" fill="#fff"><path d="M15.5 19l-7-7 7-7 1.5 1.5L11.5 12l5.5 5.5z"/></svg>132 </div>133 <div class="icon-btn">134 <svg viewBox="0 0 24 24" width="54" height="54" fill="#c9d3f3"><path d="M20 5l-8 6 8 6v-3.5l-4.5-2.5L20 8.5V5zM4 6h9V4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h9v-2H4V6z"/></svg>135 </div>136 </div>137 138 <div class="title-wrap">139 <div class="title">Aalst › Brussels-Central</div>140 <div class="subtitle">Tue, Nov 28, 1 passenger</div>141 </div>142 143 <div class="tabs">144 <div class="tab active">145 <div>146 <svg width="72" height="72" viewBox="0 0 24 24" fill="#ffffff" style="margin:0 auto;">147 <path d="M4 16c0 1.1.9 2 2 2h10a2 2 0 0 0 2-2V8a3 3 0 0 0-3-3H9a3 3 0 0 0-3 3v8zM7 20l-2 2h2l1.5-2H7zm8 0l1.5 2H19l-2-2h-2z"/>148 </svg>149 </div>150 <div class="price">$11</div>151 <div class="dur">0h34m</div>152 </div>153 <div class="tab">154 <div>155 <svg width="72" height="72" viewBox="0 0 24 24" fill="#a0b1cf" style="margin:0 auto;">156 <path d="M4 16h16l-2-6H6l-2 6zm2 3a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm12 0a1 1 0 1 0 .001 2A1 1 0 0 0 18 19zM6 8h12V6H6v2z"/>157 </svg>158 </div>159 <div class="dash">-</div>160 </div>161 <div class="tab">162 <div>163 <svg width="72" height="72" viewBox="0 0 24 24" fill="#a0b1cf" style="margin:0 auto;">164 <path d="M10.18 9L3 5v3l5 2.5V14l-2 1.5V17l3-1 3 1v-1.5L10 14v-2.5l5-2.5V5l-4.82 4zM19 12l3-1v1l-3 1v2l-1 .5-1-.5v-2l-3-1v-1l3 1V9l1-.5 1 .5v3z"/>165 </svg>166 </div>167 <div class="dash">-</div>168 </div>169 </div>170 </div>171 172 <div class="content">173 <div class="info">174 <div class="qr-mini">▦</div>175 <div>This icon means you’ve found a mobile ticket</div>176 </div>177 178 <div class="filters">179 <div class="pill">Time: Depart at 8:00 AM</div>180 <div class="pill">Stops</div>181 <div class="pill">Duration</div>182 </div>183 184 <div class="btn-outline">Load earlier trains</div>185 186 <!-- Card 1 -->187 <div class="card">188 <div class="badge">CHEAPEST</div>189 <div class="operator">190 <div class="op-icon">B</div>191 <div class="muted">IC</div>192 </div>193 194 <div class="times">195 <div>196 <div class="time-left">6:09 AM</div>197 <div class="station muted">Aalst</div>198 </div>199 <div class="duration">— 1h05m —</div>200 <div>201 <div class="time-right">7:14 AM</div>202 <div class="station muted">Brussels-Central</div>203 </div>204 </div>205 206 <div class="meta">207 <div class="transfer">208 1 Transfer209 <svg viewBox="0 0 24 24" width="36" height="36" fill="#283b71"><path d="M7 10l5 5 5-5H7z"/></svg>210 </div>211 <div style="display:flex; align-items:center; gap:26px;">212 <div class="price">213 <div class="qr-green">214 <svg viewBox="0 0 24 24" width="28" height="28" fill="#fff"><path d="M3 3h8v8H3V3zm2 2v4h4V5H5zm6 6h4v4h-4v-4zm6-6h4v4h-4V5zm0 6h4v8h-4v-8zM5 17h6v2H5v-2z"/></svg>215 </div>216 $11217 </div>218 </div>219 </div>220 <div class="person" style="margin-top:10px;">1 • One-way</div>221 </div>222 223 <!-- Card 2 -->224 <div class="card">225 <div class="badge">CHEAPEST</div>226 <div class="operator">227 <div class="op-icon">B</div>228 <div class="muted">IC</div>229 </div>230 231 <div class="times">232 <div>233 <div class="time-left">6:54 AM</div>234 <div class="station muted">Aalst</div>235 </div>236 <div class="duration">— 0h53m —</div>237 <div>238 <div class="time-right">7:47 AM</div>239 <div class="station muted">Brussels-Central</div>240 </div>241 </div>242 243 <div class="meta">244 <div class="transfer">245 1 Transfer246 <svg viewBox="0 0 24 24" width="36" height="36" fill="#283b71"><path d="M7 10l5 5 5-5H7z"/></svg>247 </div>248 <div style="display:flex; align-items:center; gap:26px;">249 <div class="price">250 <div class="qr-green">251 <svg viewBox="0 0 24 24" width="28" height="28" fill="#fff"><path d="M3 3h8v8H3V3zm2 2v4h4V5H5zm6 6h4v4h-4v-4zm6-6h4v4h-4V5zm0 6h4v8h-4v-8zM5 17h6v2H5v-2z"/></svg>252 </div>253 $11254 </div>255 </div>256 </div>257 <div class="person" style="margin-top:10px;">1 • One-way</div>258 </div>259 260 <!-- Placeholder for additional cards -->261 <div class="card" style="opacity:.6;">262 <div class="badge">CHEAPEST</div>263 <div class="operator">264 <div class="op-icon">B</div>265 <div class="muted">IC</div>266 </div>267 <div style="height:120px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; border-radius:14px; margin-top:18px;">268 [More train results preview]269 </div>270 </div>271 272 </div>273 274</div>275</body>276</html>