GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Flight Details UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #0B1720;14 color: #E9F0F4;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 88px;24 background: #0B1720;25 display: flex;26 align-items: center;27 justify-content: space-between;28 padding: 0 32px;29 box-sizing: border-box;30 color: #E9F0F4;31 font-weight: 600;32 font-size: 30px;33 }34 .status-icons { display: flex; align-items: center; gap: 22px; color: #E9F0F4; opacity: 0.9; }35 .status-dot { width: 10px; height: 10px; background: #E9F0F4; border-radius: 50%; opacity: 0.7; }36 37 /* Hero */38 .hero {39 position: absolute;40 top: 88px;41 left: 0;42 width: 1080px;43 height: 390px;44 background: linear-gradient(to bottom, rgba(6,12,18,0.1), rgba(6,12,18,0.65)), #203244;45 overflow: hidden;46 }47 .hero-img {48 position: absolute;49 inset: 0;50 display: flex;51 align-items: flex-end;52 justify-content: center;53 padding: 18px;54 box-sizing: border-box;55 color: #B0BDC7;56 font-size: 28px;57 background: #E0E0E0;58 border: 1px solid #BDBDBD;59 opacity: 0.25;60 }61 .hero-top-actions {62 position: absolute;63 top: 24px;64 right: 24px;65 display: flex;66 gap: 24px;67 }68 .icon-btn {69 width: 56px; height: 56px;70 display: grid; place-items: center;71 border-radius: 28px;72 background: rgba(255,255,255,0.08);73 }74 .back-btn {75 position: absolute;76 top: 24px; left: 24px;77 width: 56px; height: 56px;78 display: grid; place-items: center;79 border-radius: 28px;80 background: rgba(255,255,255,0.08);81 }82 .hero-title {83 position: absolute;84 bottom: 24px;85 left: 36px;86 font-size: 52px;87 font-weight: 700;88 color: #F1F6FA;89 text-shadow: 0 2px 4px rgba(0,0,0,0.3);90 }91 92 /* Cards */93 .card {94 background: #121E27;95 margin: 24px 32px;96 border-radius: 28px;97 box-shadow: 0 2px 0 rgba(255,255,255,0.05) inset;98 }99 .card.header {100 position: absolute;101 top: 500px;102 left: 0;103 right: 0;104 margin: 0 32px;105 }106 .card-content { padding: 34px; }107 .divider {108 height: 2px;109 background: #0E1821;110 margin: 24px -34px;111 }112 .title-xl { font-size: 44px; font-weight: 800; margin-bottom: 20px; }113 .chip {114 display: inline-block;115 background: #F5F7FA;116 color: #0B1720;117 padding: 18px 24px;118 border-radius: 18px;119 font-size: 30px;120 font-weight: 700;121 margin-bottom: 22px;122 }123 .meta {124 font-size: 30px;125 color: #A9B7C3;126 }127 .meta .dot { margin: 0 12px; opacity: 0.7; }128 129 .route {130 font-size: 30px;131 color: #B7C5D0;132 line-height: 1.35;133 }134 135 .flight-row {136 display: flex;137 align-items: center;138 gap: 24px;139 margin-top: 24px;140 }141 .airline-logo {142 width: 96px; height: 96px;143 background: #E0E0E0; border: 1px solid #BDBDBD;144 border-radius: 16px;145 display: flex; align-items: center; justify-content: center;146 color: #757575; font-weight: 700; font-size: 24px;147 }148 .flight-info { flex: 1; }149 .time {150 font-size: 36px; font-weight: 800; color: #F1F6FA;151 }152 .airline-name { font-size: 30px; color: #A9B7C3; margin-top: 6px; }153 .flight-extra {154 text-align: right;155 min-width: 200px;156 }157 .badge { font-size: 30px; font-weight: 700; color: #DDE8EF; }158 .duration { font-size: 28px; color: #9FB0BD; margin-top: 6px; }159 160 .link-row {161 display: flex; align-items: center; justify-content: space-between;162 padding-top: 8px;163 }164 .link-text { color: #72D7E9; font-size: 34px; font-weight: 700; }165 .chevron {166 width: 44px; height: 44px; border-radius: 22px;167 display: grid; place-items: center;168 background: rgba(255,255,255,0.06);169 }170 171 /* Update card */172 .update-card {173 position: absolute;174 top: 1030px;175 left: 0; right: 0;176 margin: 0 32px;177 background: #121E27;178 border-radius: 28px;179 }180 .update-content { padding: 30px; display: flex; align-items: center; }181 .thumb {182 width: 120px; height: 120px; margin-right: 26px;183 background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 16px;184 display: flex; align-items: center; justify-content: center;185 color: #757575; font-size: 22px;186 }187 .update-text { flex: 1; }188 .update-title { font-size: 34px; font-weight: 800; margin-bottom: 8px; }189 .update-date { font-size: 28px; color: #A9B7C3; }190 .update-arrow { margin-left: 12px; }191 192 /* Info note */193 .info-note {194 position: absolute;195 top: 1188px;196 left: 32px;197 right: 32px;198 display: flex; align-items: center; gap: 16px;199 color: #B7C5D0;200 font-size: 30px;201 opacity: 0.9;202 }203 .info-icon {204 width: 44px; height: 44px; border-radius: 22px;205 display: grid; place-items: center;206 background: rgba(255,255,255,0.08);207 }208 209 /* CTA */210 .cta {211 position: absolute;212 bottom: 164px;213 left: 32px;214 width: 1016px;215 height: 108px;216 background: #9EEAF5;217 border-radius: 24px;218 display: flex; align-items: center; justify-content: center;219 color: #0B1720; font-size: 36px; font-weight: 800;220 }221 222 /* Home pill */223 .home-pill {224 position: absolute;225 bottom: 72px;226 left: 50%;227 transform: translateX(-50%);228 width: 280px;229 height: 12px;230 background: #D7DDE2;231 border-radius: 6px;232 opacity: 0.65;233 }234</style>235</head>236<body>237<div id="render-target">238 239 <!-- Status Bar -->240 <div class="status-bar">241 <div>10:02</div>242 <div class="status-icons">243 <svg width="34" height="34" viewBox="0 0 24 24"><circle cx="11" cy="11" r="9" fill="none" stroke="#E9F0F4" stroke-width="2"/><path d="M11 6 L11 12 L15 15" stroke="#E9F0F4" stroke-width="2" fill="none" stroke-linecap="round"/></svg>244 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M3 11h18" stroke="#E9F0F4" stroke-width="2"/><path d="M10 7h7v8h-7z" fill="none" stroke="#E9F0F4" stroke-width="2"/><path d="M20 9v4" stroke="#E9F0F4" stroke-width="2"/></svg>245 <div class="status-dot"></div>246 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M18 8l-6 6-6-6" fill="none" stroke="#E9F0F4" stroke-width="2"/></svg>247 </div>248 </div>249 250 <!-- Hero section -->251 <div class="hero">252 <div class="hero-img">[IMG: Vancouver skyline]</div>253 254 <div class="back-btn">255 <svg width="28" height="28" viewBox="0 0 24 24">256 <path d="M15 5L8 12l7 7" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>257 </svg>258 </div>259 <div class="hero-top-actions">260 <div class="icon-btn">261 <svg width="26" height="26" viewBox="0 0 24 24">262 <path d="M12 21s-7-4.35-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.65-7 9-7 9z" fill="none" stroke="#FFFFFF" stroke-width="2"/>263 </svg>264 </div>265 <div class="icon-btn">266 <svg width="26" height="26" viewBox="0 0 24 24">267 <circle cx="18" cy="5" r="2" fill="#FFFFFF"/><circle cx="6" cy="10" r="2" fill="#FFFFFF"/><circle cx="18" cy="15" r="2" fill="#FFFFFF"/>268 <path d="M7.5 9l9-4M7.5 11l9 4" stroke="#FFFFFF" stroke-width="2" fill="none"/>269 </svg>270 </div>271 </div>272 273 <div class="hero-title">Flight details</div>274 </div>275 276 <!-- Primary card -->277 <div class="card header">278 <div class="card-content">279 <div class="title-xl">Vancouver</div>280 <div class="chip">Friday, December 15</div>281 282 <div class="meta" style="margin-top: 10px;">283 3 travelers <span class="dot">•</span> One-way <span class="dot">•</span> Economy284 </div>285 286 <div class="divider"></div>287 288 <div class="route">289 Toronto Pearson International to Vancouver<br>International290 </div>291 292 <div class="flight-row">293 <div class="airline-logo">[IMG: Airline Logo]</div>294 <div class="flight-info">295 <div class="time">9:05 PM – 11:38 PM</div>296 <div class="airline-name">Lynx Air</div>297 </div>298 <div class="flight-extra">299 <div class="badge">Direct</div>300 <div class="duration">5h 33m</div>301 </div>302 </div>303 304 <div class="divider"></div>305 306 <div class="link-row">307 <div class="link-text">View details</div>308 <div class="chevron">309 <svg width="24" height="24" viewBox="0 0 24 24">310 <path d="M9 6l6 6-6 6" stroke="#72D7E9" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>311 </svg>312 </div>313 </div>314 </div>315 </div>316 317 <!-- Update card -->318 <div class="update-card">319 <div class="update-content">320 <div class="thumb">[IMG: City thumbnail]</div>321 <div class="update-text">322 <div class="update-title">‘Trip from Toronto to Vancouver’<br/>trip updated</div>323 <div class="update-date">Fri, Dec 15, 23</div>324 </div>325 <div class="update-arrow chevron" style="margin-left: 12px;">326 <svg width="24" height="24" viewBox="0 0 24 24">327 <path d="M9 6l6 6-6 6" stroke="#9FD9E9" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>328 </svg>329 </div>330 </div>331 </div>332 333 <!-- Info note -->334 <div class="info-note">335 <div class="info-icon">336 <svg width="20" height="20" viewBox="0 0 24 24">337 <circle cx="12" cy="12" r="10" stroke="#B7C5D0" stroke-width="2" fill="none"/>338 <path d="M12 10v6M12 7h.01" stroke="#B7C5D0" stroke-width="2" stroke-linecap="round"/>339 </svg>340 </div>341 <div>Read before booking</div>342 </div>343 344 <!-- CTA Button -->345 <div class="cta">Choose a provider</div>346 347 <!-- Home pill indicator -->348 <div class="home-pill"></div>349 350</div>351</body>352</html>