GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>Select trip UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #f3f8fb;15 }16 17 /* Status bar (approximation) */18 .status-bar {19 height: 90px;20 display: flex;21 align-items: center;22 padding: 0 40px;23 color: #6b7c8e;24 font-size: 36px;25 }26 .status-bar .right {27 margin-left: auto;28 display: flex;29 gap: 22px;30 align-items: center;31 }32 .status-dot {33 width: 26px; height: 26px; background:#6b7c8e; border-radius: 50%;34 }35 36 /* Header */37 .appbar {38 background: #e9f2f8;39 border-bottom: 3px solid #d6e6ef;40 padding: 28px 40px 40px 40px;41 position: relative;42 }43 .appbar .title {44 font-weight: 700;45 font-size: 60px;46 color: #24384f;47 margin-left: 80px;48 }49 .appbar .left, .appbar .right {50 position: absolute; top: 36px;51 display: flex; align-items: center; gap: 20px;52 }53 .appbar .left { left: 30px; }54 .appbar .right { right: 30px; }55 .circle-btn {56 width: 72px; height: 72px; border-radius: 50%;57 background: #ffffff; box-shadow: 0 6px 14px rgba(0,0,0,0.06);58 display: flex; justify-content: center; align-items: center;59 }60 .flag-tile {61 width: 88px; height: 60px; border-radius: 16px;62 background: #ffffff; display:flex; align-items:center; justify-content:center;63 box-shadow: 0 6px 14px rgba(0,0,0,0.06);64 }65 .flag-placeholder {66 width: 70px; height: 42px; background:#E0E0E0; border:1px solid #BDBDBD;67 display:flex; align-items:center; justify-content:center; color:#757575; font-size:24px; border-radius:8px;68 }69 .money {70 width: 72px; height: 72px; border-radius: 50%; background:#ffffff;71 display:flex; align-items:center; justify-content:center; font-weight:700; color:#24384f;72 box-shadow: 0 6px 14px rgba(0,0,0,0.06);73 }74 75 /* Cards */76 .cards { padding: 28px 32px 0 32px; }77 .trip-card {78 background: #ffffff;79 border-radius: 42px;80 box-shadow: 0 16px 24px rgba(32,57,74,0.10);81 margin-bottom: 42px;82 padding: 40px 44px;83 }84 .trip-card .route {85 text-align: center;86 font-size: 44px;87 font-weight: 700;88 color: #21374f;89 line-height: 1.25;90 margin-bottom: 24px;91 }92 .meta {93 display: flex; justify-content: center; gap: 26px; align-items: center;94 color: #365268;95 font-size: 34px;96 margin-bottom: 34px;97 }98 .meta .chip {99 display:flex; align-items:center; gap: 14px;100 }101 .meta svg { width: 40px; height: 40px; }102 103 .calendar {104 display: flex; justify-content: space-between; align-items: center;105 margin-top: 6px;106 padding: 18px 10px 8px 10px;107 }108 .day {109 width: 184px; text-align:center; color:#6e8196;110 font-size: 32px; font-weight: 600;111 }112 .day .num { display:block; margin-top: 12px; font-size: 42px; font-weight: 700; color:#97a9ba; }113 .day.selected {114 background: #e8f1ff;115 color: #1976d2;116 border-radius: 36px;117 padding: 26px 0;118 }119 .day.selected .num { color: #1976d2; }120 .divider {121 width: 2px; height: 80px; background:#e2e9ef; border-radius: 1px;122 }123 124 /* Skeleton blocks within cards (for the list of trips) */125 .skeleton-row { display:flex; gap: 26px; margin-top: 28px; align-items: center; }126 .sk {127 background: #f6f9fb; border-radius: 14px; height: 56px; width: 240px;128 box-shadow: inset 0 0 0 1px #e6edf3;129 }130 .sk.small { width: 120px; height: 46px; }131 .sk.xs { width: 86px; height: 42px; }132 .sk.big { width: 360px; height: 120px; border-radius: 60px; }133 .sk.title { width: 520px; height: 64px; }134 .arrow-dash {135 display:flex; align-items:center; gap:10px; color:#c7d3dc; font-weight:700; margin: 6px 0;136 }137 .arrow-dash svg { width: 44px; height: 44px; }138 .right-badge {139 margin-left: auto;140 width: 220px; height: 120px; border-radius: 60px; background:#eef5fc;141 box-shadow: inset 0 0 0 1px #deebf5;142 }143 144 /* Floating action chips */145 .floating {146 position: relative;147 margin-top: 18px;148 }149 .action-chip {150 position: absolute;151 left: 24px;152 bottom: 24px;153 background: #ffffff;154 color: #1f344a;155 border-radius: 40px;156 box-shadow: 0 16px 26px rgba(34,60,80,0.18);157 display: flex; align-items: center; gap: 18px;158 padding: 24px 32px;159 font-weight: 700; font-size: 38px;160 }161 .action-chip + .action-chip { bottom: -92px; }162 .action-chip svg { width: 44px; height: 44px; color:#34526a; }163 164 /* Bottom system bar */165 .system-bar {166 position: absolute; left: 0; bottom: 0; width: 100%; height: 120px; background: #000;167 display:flex; justify-content:center; align-items:center;168 }169 .home-pill { width: 220px; height: 16px; border-radius: 8px; background:#eaeaea; }170 171</style>172</head>173<body>174<div id="render-target">175 176 <div class="status-bar">177 <div>2:51</div>178 <div class="right">179 <div class="status-dot"></div>180 <div class="status-dot" style="width:28px;height:18px;border-radius:6px;"></div>181 </div>182 </div>183 184 <div class="appbar">185 <div class="left">186 <div class="circle-btn">187 <svg viewBox="0 0 24 24" width="40" height="40">188 <path d="M5 5 L19 19 M19 5 L5 19" stroke="#365268" stroke-width="2.6" stroke-linecap="round"/>189 </svg>190 </div>191 </div>192 <div class="title">Select trip</div>193 <div class="right">194 <div class="flag-tile">195 <div class="flag-placeholder">[IMG: Flag]</div>196 </div>197 <div class="money">$</div>198 </div>199 </div>200 201 <div class="cards">202 203 <!-- Top info card with calendar -->204 <div class="trip-card">205 <div class="route">Brussels City Center - Midi → Antwerp<br>Train station</div>206 207 <div class="meta">208 <div class="chip">209 <svg viewBox="0 0 24 24">210 <rect x="3" y="5" width="18" height="16" rx="3" ry="3" fill="none" stroke="#365268" stroke-width="2"/>211 <path d="M7 3 v4 M17 3 v4" stroke="#365268" stroke-width="2" stroke-linecap="round"/>212 </svg>213 <span>Nov 14</span>214 </div>215 <div class="chip">216 <svg viewBox="0 0 24 24">217 <circle cx="12" cy="8" r="4" fill="none" stroke="#365268" stroke-width="2"/>218 <path d="M4 21c1.5-4 6-6 8-6s6.5 2 8 6" stroke="#365268" stroke-width="2" fill="none" stroke-linecap="round"/>219 </svg>220 <span>1 passenger</span>221 </div>222 </div>223 224 <div class="calendar">225 <div class="day">226 SUN<span class="num">12</span>227 </div>228 <div class="divider"></div>229 <div class="day">MON<span class="num">13</span></div>230 <div class="divider"></div>231 <div class="day selected">TUE<span class="num">14</span></div>232 <div class="divider"></div>233 <div class="day">WED<span class="num">15</span></div>234 <div class="divider"></div>235 <div class="day">THU<span class="num">16</span></div>236 <div class="divider"></div>237 <div class="day">FRI<span class="num">17</span></div>238 </div>239 </div>240 241 <!-- Trip result card 1 (skeleton) -->242 <div class="trip-card">243 <div class="skeleton-row">244 <div class="sk title"></div>245 <div class="right-badge"></div>246 </div>247 <div class="skeleton-row">248 <div class="sk"></div>249 <div class="arrow-dash">250 <span>···</span>251 <svg viewBox="0 0 24 24"><path d="M4 12h12M12 6l6 6-6 6" stroke="#c7d3dc" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>252 </div>253 <div class="sk"></div>254 </div>255 <div class="skeleton-row">256 <div class="sk small"></div>257 <div class="sk small"></div>258 <div class="sk xs"></div>259 <div class="sk big" style="margin-left:auto;"></div>260 </div>261 </div>262 263 <!-- Trip result card 2 (skeleton) -->264 <div class="trip-card">265 <div class="skeleton-row">266 <div class="sk title"></div>267 <div class="right-badge"></div>268 </div>269 <div class="skeleton-row">270 <div class="sk"></div>271 <div class="arrow-dash">272 <span>···</span>273 <svg viewBox="0 0 24 24"><path d="M4 12h12M12 6l6 6-6 6" stroke="#c7d3dc" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>274 </div>275 <div class="sk"></div>276 </div>277 <div class="skeleton-row">278 <div class="sk small"></div>279 <div class="sk small"></div>280 <div class="sk xs"></div>281 <div class="sk big" style="margin-left:auto;"></div>282 </div>283 </div>284 285 <!-- Trip result card 3 (skeleton with floating chips) -->286 <div class="trip-card floating">287 <div class="skeleton-row">288 <div class="sk title"></div>289 <div class="right-badge"></div>290 </div>291 <div class="skeleton-row">292 <div class="sk"></div>293 <div class="arrow-dash">294 <span>···</span>295 <svg viewBox="0 0 24 24"><path d="M4 12h12M12 6l6 6-6 6" stroke="#c7d3dc" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>296 </div>297 <div class="sk"></div>298 </div>299 <div class="skeleton-row">300 <div class="sk small"></div>301 <div class="sk xs"></div>302 <div class="sk small"></div>303 </div>304 305 <div class="action-chip">306 <svg viewBox="0 0 24 24">307 <path d="M3 5h18M7 12h10M10 19h6" stroke="#34526a" stroke-width="2" stroke-linecap="round"/>308 </svg>309 <span>Filters</span>310 </div>311 <div class="action-chip">312 <svg viewBox="0 0 24 24">313 <path d="M8 6l-4 4 4 4M16 18l4-4-4-4" stroke="#34526a" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>314 </svg>315 <span>Earliest</span>316 </div>317 </div>318 319 </div>320 321 <div class="system-bar">322 <div class="home-pill"></div>323 </div>324</div>325</body>326</html>