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>Travel Search UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #1f2d3d; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #F7F8FB;15 }16 17 /* Header */18 .header {19 background: #102A60;20 color: #fff;21 height: 380px;22 padding: 36px 48px 24px 48px;23 box-sizing: border-box;24 }25 .status-bar {26 display: flex;27 align-items: center;28 justify-content: space-between;29 opacity: 0.95;30 margin-bottom: 28px;31 font-weight: 600;32 font-size: 34px;33 }34 .status-icons { display: flex; gap: 28px; align-items: center; }35 .title-row {36 display: flex;37 align-items: center;38 justify-content: space-between;39 margin-top: 8px;40 }41 .title-left {42 display: flex;43 align-items: center;44 gap: 20px;45 }46 .title {47 font-size: 52px;48 font-weight: 800;49 letter-spacing: 0.2px;50 }51 .subtitle {52 margin-top: 8px;53 font-size: 32px;54 opacity: 0.9;55 }56 .icon-btn { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }57 .icon-btn svg { width: 44px; height: 44px; fill: #fff; opacity: 0.95; }58 59 /* Mode tabs */60 .modes {61 background: #fff;62 padding: 40px 48px 24px 48px;63 box-sizing: border-box;64 }65 .mode-row {66 display: flex;67 justify-content: space-between;68 align-items: flex-end;69 padding-bottom: 18px;70 }71 .mode {72 width: 30%;73 text-align: center;74 color: #6e7b90;75 }76 .mode .icon { margin-bottom: 16px; }77 .mode .price { font-size: 40px; font-weight: 800; color: #243b6b; }78 .mode .duration { font-size: 30px; color: #a3adbd; margin-top: 6px; }79 .mode.inactive .price { color: #a3adbd; }80 .mode.inactive .icon svg { opacity: 0.35; }81 .selected-underline {82 height: 10px;83 background: #f1615e;84 width: 30%;85 border-radius: 6px;86 }87 88 /* Banners */89 .banner {90 margin: 24px 48px 0 48px;91 padding: 28px;92 border-radius: 22px;93 display: flex;94 align-items: center;95 gap: 22px;96 font-size: 34px;97 }98 .banner.green {99 border: 2px solid #2BC483;100 background: #EAF8F1;101 color: #1f7c5f;102 }103 .banner.orange {104 border: 2px solid #F3A64B;105 background: #FFF1E1;106 color: #8a4a12;107 margin-top: 22px;108 }109 .banner .badge {110 width: 68px; height: 68px; border-radius: 14px;111 border: 2px solid currentColor;112 display: flex; align-items: center; justify-content: center;113 }114 .banner .badge svg { width: 42px; height: 42px; }115 116 /* Filters */117 .filters {118 margin: 28px 48px;119 display: flex; gap: 26px; flex-wrap: wrap;120 }121 .chip {122 background: #F1F4F7;123 border-radius: 40px;124 padding: 22px 32px;125 display: inline-flex; align-items: center; gap: 16px;126 font-size: 34px; color: #5a6a85;127 box-shadow: inset 0 0 0 2px #E7ECF2;128 }129 .chip .chip-icon { width: 40px; height: 40px; }130 131 /* Card */132 .card {133 margin: 10px 48px;134 background: #fff;135 border-radius: 24px;136 box-shadow: 0 8px 26px rgba(20, 36, 60, 0.12);137 padding: 32px;138 }139 .card-header {140 display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;141 }142 .card-header .label { color: #1bbd92; font-weight: 800; font-size: 34px; letter-spacing: 0.5px; }143 .ticket-icon { width: 48px; height: 48px; }144 .vendor {145 display: flex; align-items: center; gap: 16px; color: #98A4B5; font-size: 32px; margin: 12px 0 26px;146 }147 .vendor .img {148 width: 160px; height: 80px; background: #E0E0E0; border: 1px solid #BDBDBD;149 display: flex; align-items: center; justify-content: center; color: #757575; border-radius: 8px;150 font-size: 28px;151 }152 .times {153 display: grid; grid-template-columns: 1fr 140px 1fr; align-items: center; gap: 10px;154 color: #8793A6; margin-bottom: 14px;155 }156 .time {157 font-size: 54px; font-weight: 800; color: #152B68;158 }159 .duration-sep { text-align: center; font-size: 34px; }160 .stations {161 display: grid; grid-template-columns: 1fr 1fr; gap: 20px; color: #334766; font-size: 32px;162 }163 .card-footer {164 margin-top: 26px; display: flex; justify-content: space-between; align-items: center;165 }166 .pill {167 background: #EAF0FB; color: #3C5C91; border-radius: 32px; padding: 16px 22px; font-size: 32px;168 display: inline-flex; align-items: center; gap: 12px;169 }170 .price-col { text-align: right; }171 .price { font-size: 46px; font-weight: 800; color: #152B68; }172 .meta { color: #7A8AA6; font-size: 30px; display: flex; align-items: center; gap: 10px; margin-top: 6px; }173 .person-icon { width: 32px; height: 32px; }174 175 /* Ad card */176 .ad-card {177 margin: 26px 48px;178 background: #fff;179 border-radius: 24px;180 box-shadow: 0 8px 26px rgba(20, 36, 60, 0.08);181 padding: 32px;182 display: flex; justify-content: space-between; align-items: center;183 }184 .ad-left { display: flex; flex-direction: column; gap: 12px; }185 .ad-brand { color: #118CF0; font-weight: 800; font-size: 34px; }186 .ad-text { font-size: 44px; font-weight: 800; color: #152B68; }187 .ad-text .accent { color: #FF7C8C; }188 .ad-cta { color: #FF7C8C; font-size: 36px; font-weight: 700; }189 190 /* Footer */191 .footer {192 text-align: center;193 color: #6E7B90;194 font-size: 32px;195 margin: 40px 48px 0 48px;196 }197 .footer a { color: #152B68; text-decoration: none; font-weight: 700; margin: 0 8px; }198 199 /* Home indicator */200 .home-indicator {201 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);202 width: 300px; height: 16px; background: #D1D6DF; border-radius: 10px;203 }204</style>205</head>206<body>207<div id="render-target">208 209 <div class="header">210 <div class="status-bar">211 <div>6:01</div>212 <div class="status-icons">213 <!-- simple status glyphs -->214 <svg width="34" height="34" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2"/></svg>215 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm0 4v6l4 2" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>216 <svg width="34" height="34" viewBox="0 0 24 24"><rect x="2" y="6" width="20" height="12" rx="2" fill="none" stroke="#fff" stroke-width="2"/><rect x="17" y="10" width="3" height="4" fill="#fff"/></svg>217 </div>218 </div>219 220 <div class="title-row">221 <div class="title-left">222 <div class="icon-btn">223 <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>224 </div>225 <div>226 <div class="title">New York, NY › Delaware, OH</div>227 <div class="subtitle">Fri, Sep 15, 1 passenger</div>228 </div>229 </div>230 <div class="icon-btn">231 <svg viewBox="0 0 24 24"><path d="M18 8a3 3 0 11-6 0 3 3 0 016 0zM6 14v4h4l7-7-4-4-7 7z" fill="#fff"/></svg>232 </div>233 </div>234 </div>235 236 <div class="modes">237 <div class="mode-row">238 <div class="mode">239 <div class="icon">240 <svg width="64" height="64" viewBox="0 0 24 24" fill="#243b6b">241 <rect x="5" y="5" width="14" height="10" rx="2"></rect>242 <circle cx="8" cy="17" r="1.5"></circle>243 <circle cx="16" cy="17" r="1.5"></circle>244 </svg>245 </div>246 <div class="price">$193</div>247 <div class="duration">24h35m</div>248 </div>249 <div class="mode inactive">250 <div class="icon">251 <svg width="64" height="64" viewBox="0 0 24 24" fill="#7f8a9e">252 <rect x="3" y="8" width="18" height="8" rx="2"></rect>253 <circle cx="7" cy="17" r="1.5"></circle>254 <circle cx="17" cy="17" r="1.5"></circle>255 </svg>256 </div>257 <div class="price">-</div>258 <div class="duration"></div>259 </div>260 <div class="mode">261 <div class="icon">262 <svg width="64" height="64" viewBox="0 0 24 24" fill="#243b6b">263 <path d="M2 16l8-3 8 3-4-7 2-5-6 4-6-4 2 5z"></path>264 </svg>265 </div>266 <div class="price">$255</div>267 <div class="duration">10h08m</div>268 </div>269 </div>270 <div class="selected-underline"></div>271 </div>272 273 <div class="banner green">274 <div class="badge">275 <svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2">276 <rect x="4" y="4" width="6" height="6"></rect>277 <rect x="14" y="4" width="6" height="6"></rect>278 <rect x="4" y="14" width="6" height="6"></rect>279 <rect x="14" y="14" width="6" height="6"></rect>280 </svg>281 </div>282 <div>This icon means you’ve found a mobile ticket</div>283 </div>284 285 <div class="banner orange">286 <div class="badge">287 <svg viewBox="0 0 24 24" fill="currentColor">288 <circle cx="12" cy="12" r="10" opacity="0.25"></circle>289 <path d="M12 7v6M12 16h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>290 </svg>291 </div>292 <div>293 <div style="font-weight:800">We have no trains to Delaware, OH</div>294 <div style="margin-top:6px; color:#a05a24">Try another mode of transport or choose from our nearby locations below</div>295 </div>296 </div>297 298 <div class="filters">299 <div class="chip">300 <svg class="chip-icon" viewBox="0 0 24 24" fill="#5a6a85"><path d="M4 12h16M12 4v16" stroke="#5a6a85" stroke-width="2" stroke-linecap="round"/></svg>301 <span>Departure time</span>302 </div>303 <div class="chip">304 <svg class="chip-icon" viewBox="0 0 24 24" fill="none" stroke="#5a6a85" stroke-width="2"><circle cx="7" cy="12" r="3"/><circle cx="17" cy="12" r="3"/><path d="M10 12h4"/></svg>305 <span>Stops</span>306 </div>307 <div class="chip">308 <svg class="chip-icon" viewBox="0 0 24 24" fill="none" stroke="#5a6a85" stroke-width="2"><path d="M5 5l7 7 7-7"/><path d="M5 12l7 7 7-7"/></svg>309 <span>Arrival</span>310 </div>311 </div>312 313 <div class="card">314 <div class="card-header">315 <div class="label">CHEAPEST, FASTEST</div>316 <svg class="ticket-icon" viewBox="0 0 24 24" fill="#18c288">317 <rect x="3" y="3" width="18" height="18" rx="3"></rect>318 <rect x="7" y="7" width="4" height="4" fill="#fff"></rect>319 <rect x="13" y="7" width="4" height="4" fill="#fff"></rect>320 <rect x="7" y="13" width="4" height="4" fill="#fff"></rect>321 <rect x="13" y="13" width="4" height="4" fill="#fff"></rect>322 </svg>323 </div>324 325 <div class="vendor">326 <div class="img">[IMG: Amtrak logo]</div>327 <div>49 Lake Shore Limited • 8929 Bus</div>328 </div>329 330 <div class="times">331 <div class="time">3:40 PM</div>332 <div class="duration-sep">24h35m</div>333 <div class="time">4:15 PM</div>334 </div>335 336 <div class="stations">337 <div>Penn Station, New York, NY</div>338 <div>Columbus, S High St / E Rich St (Transit Terminal), Columbus, OH</div>339 </div>340 341 <div class="card-footer">342 <div class="pill">343 <span>1 Transfer</span>344 <svg width="24" height="24" viewBox="0 0 24 24" fill="#3C5C91"><path d="M7 10l5 5 5-5"/></svg>345 </div>346 <div class="price-col">347 <div class="price">$193</div>348 <div class="meta">349 <svg class="person-icon" viewBox="0 0 24 24" fill="#7A8AA6"><path d="M12 12a4 4 0 100-8 4 4 0 000 8zM4 20a8 8 0 0116 0H4z"/></svg>350 <span>1 • One-way</span>351 </div>352 </div>353 </div>354 </div>355 356 <div class="ad-card">357 <div class="ad-left">358 <div class="ad-brand">Booking.com</div>359 <div class="ad-text">Best accommodation <span class="accent">deals</span> in Delaware</div>360 </div>361 <div class="ad-cta">View more</div>362 </div>363 364 <div class="footer">365 Our small print, <a href="#">Terms of use</a> and <a href="#">Privacy Policy</a>366 </div>367 368 <div class="home-indicator"></div>369</div>370</body>371</html>