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.0">6<title>Flight Results Mock</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width:1080px;11 height:2400px;12 position:relative;13 overflow:hidden;14 background:#ffffff;15 color:#1b2230;16 }17 18 /* Top gradient header */19 .header {20 position:absolute;21 left:0; top:0; right:0;22 height:460px;23 background:linear-gradient(135deg,#2461ff 0%, #4d3cff 55%, #673afb 100%);24 }25 .status-bar {26 height:96px;27 color:#fff;28 display:flex;29 align-items:center;30 justify-content:space-between;31 padding:0 36px;32 font-size:32px;33 letter-spacing:0.5px;34 }35 .status-right {36 display:flex; gap:24px; align-items:center; color:#e9edff;37 }38 .status-dot {39 width:10px; height:10px; border-radius:50%; background:#e9edff; opacity:0.9;40 }41 .battery {42 display:flex; align-items:center; gap:12px;43 }44 .battery svg { width:42px; height:42px; }45 .nav {46 margin-top:22px;47 padding:0 36px;48 color:#eaf0ff;49 }50 .title-row {51 display:flex; align-items:center; gap:18px; color:#fff;52 font-weight:600; font-size:42px;53 }54 .subtitle { margin-top:10px; font-size:30px; opacity:0.85; }55 .back-ic { width:44px; height:44px; }56 .bell-badge {57 position:absolute; right:54px; top:210px;58 width:124px; height:124px; border-radius:50%;59 border:4px dashed rgba(255,255,255,0.7);60 display:flex; align-items:center; justify-content:center;61 background:rgba(255,255,255,0.13);62 }63 .bell-badge svg { width:56px; height:56px; fill:#fff; }64 65 /* Price alert bubble */66 .alert-bubble {67 position:absolute; left:36px; right:36px; top:260px;68 background:linear-gradient(90deg,#4e79ff,#5a67ff);69 color:#fff; border-radius:16px;70 padding:34px 28px; display:flex; align-items:center; gap:28px;71 box-shadow:0 10px 22px rgba(0,0,0,0.25);72 }73 .alert-bubble:after{74 content:""; position:absolute; right:210px; top:-18px;75 border-left:16px solid transparent;76 border-right:16px solid transparent;77 border-bottom:18px solid #5a67ff;78 }79 .img-ph {80 width:120px; height:120px; background:#E0E0E0; border:1px solid #BDBDBD;81 color:#757575; display:flex; align-items:center; justify-content:center;82 border-radius:10px; font-size:26px; text-align:center; padding:8px;83 }84 .alert-text { flex:1; font-size:38px; font-weight:700; line-height:1.25; }85 .primary-btn {86 background:#ffffff; color:#3b55ff; border:none; border-radius:12px;87 padding:22px 32px; font-size:32px; font-weight:700; white-space:nowrap;88 }89 90 /* Pink promo card just below header */91 .promo {92 position:absolute; left:36px; right:36px; top:460px;93 height:120px; border-radius:24px;94 background:linear-gradient(90deg,#ff5aa3,#ff6fb3,#ff8ac9);95 color:#fff; display:flex; align-items:center; padding:0 28px; gap:24px;96 }97 .promo .icon {98 width:72px; height:72px; border-radius:16px; background:rgba(255,255,255,0.25);99 display:flex; align-items:center; justify-content:center;100 }101 .promo .text { font-size:34px; font-weight:700; }102 103 /* Filters row */104 .filters {105 position:absolute; left:36px; right:36px; top:610px;106 display:flex; gap:22px; flex-wrap:wrap;107 }108 .chip {109 padding:22px 26px; border-radius:16px; background:#f1f4ff; color:#243b8f;110 display:flex; align-items:center; gap:14px; font-weight:700; font-size:30px;111 }112 .chip .caret { width:28px; height:28px; opacity:0.9; }113 114 /* Results header */115 .results-title {116 position:absolute; left:36px; right:36px; top:720px;117 }118 .results-title h2 {119 margin:0; font-size:46px; color:#1b2230;120 }121 .results-title p {122 margin:8px 0 0; color:#6d7482; font-size:28px;123 }124 125 /* Flight rows */126 .list {127 position:absolute; left:0; right:0; top:820px; bottom:150px; padding:0 24px;128 }129 .flight {130 padding:40px 24px 34px 24px; border-bottom:1px solid #e9edf5; display:flex;131 }132 .airline {133 width:120px; display:flex; align-items:flex-start; justify-content:center;134 }135 .logo-ph {136 width:96px; height:54px; background:#E0E0E0; border:1px solid #BDBDBD;137 color:#757575; font-size:22px; display:flex; align-items:center; justify-content:center;138 }139 .flight-main { flex:1; padding-left:14px; }140 .times { display:flex; align-items:center; gap:34px; }141 .time, .airport { font-size:52px; font-weight:800; color:#1d2b3f; }142 .airport { font-size:28px; font-weight:600; color:#536075; margin-left:6px; }143 .duration {144 display:flex; align-items:center; gap:10px; color:#8b97a7; font-size:28px;145 }146 .duration svg { width:120px; height:18px; }147 .airline-name { margin-top:12px; color:#687384; font-size:30px; }148 .tags { margin-top:16px; display:flex; gap:14px; flex-wrap:wrap; }149 .tag {150 display:flex; align-items:center; gap:10px; background:#e8faf0; color:#127b52;151 border-radius:12px; padding:12px 18px; font-size:26px; font-weight:600;152 }153 .price {154 width:220px; display:flex; align-items:center; justify-content:flex-end; text-align:right;155 }156 .price .now { font-size:48px; font-weight:800; color:#1c2433; }157 .price .old { font-size:28px; color:#9aa3b2; text-decoration:line-through; margin-top:8px; }158 159 /* Toast */160 .toast {161 position:absolute; left:50%; transform:translateX(-50%);162 bottom:170px; background:rgba(0,0,0,0.85); color:#fff;163 padding:26px 36px; border-radius:18px; font-size:34px; font-weight:700;164 box-shadow:0 6px 18px rgba(0,0,0,0.35);165 }166 167 /* Home indicator */168 .home-indicator {169 position:absolute; left:50%; transform:translateX(-50%);170 bottom:54px; width:300px; height:10px; background:#000; opacity:0.22; border-radius:6px;171 }172</style>173</head>174<body>175<div id="render-target">176 177 <div class="header">178 <div class="status-bar">179 <div style="display:flex; align-items:center; gap:18px;">180 <span style="font-weight:700;">8:18</span>181 <span style="background:#e9edff; color:#2461ff; font-weight:800; font-size:22px; padding:6px 10px; border-radius:6px;">LR</span>182 <span style="font-weight:800;">N</span>183 <span class="status-dot"></span>184 </div>185 <div class="status-right">186 <svg width="36" height="36" viewBox="0 0 24 24" fill="#e9edff" xmlns="http://www.w3.org/2000/svg"><path d="M12 3c-4.97 0-9 4.03-9 9h2a7 7 0 0114 0h2c0-4.97-4.03-9-9-9zm0 4a5 5 0 00-5 5h2a3 3 0 116 0h2a5 5 0 00-5-5z"/></svg>187 <svg width="36" height="36" viewBox="0 0 24 24" fill="#e9edff" xmlns="http://www.w3.org/2000/svg"><path d="M12 4l8 8h-5v8H9v-8H4l8-8z"/></svg>188 <div class="battery">189 <span>100%</span>190 </div>191 </div>192 </div>193 194 <div class="nav">195 <div class="title-row">196 <svg class="back-ic" viewBox="0 0 24 24" fill="none"><path d="M15 4L7 12l8 8" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>197 <div>Depart: Amsterdam → Paris (CDG)</div>198 </div>199 <div class="subtitle">Oct 25</div>200 </div>201 202 <div class="bell-badge">203 <svg viewBox="0 0 24 24"><path d="M12 22a2 2 0 002-2h-4a2 2 0 002 2zm6-6V11a6 6 0 10-12 0v5l-2 2v1h16v-1l-2-2z"/></svg>204 </div>205 206 <div class="alert-bubble">207 <div class="img-ph">[IMG: Illustration]</div>208 <div class="alert-text">Create a price alert and get notified when the price drops!</div>209 <button class="primary-btn">Got It</button>210 </div>211 </div>212 213 <div class="promo">214 <div class="icon">215 <svg viewBox="0 0 24 24" width="42" height="42" fill="#fff"><path d="M12 2l3 6 6 .9-4.5 4.2 1 6L12 16l-5.5 3.1 1-6L3 8.9 9 8l3-6z"/></svg>216 </div>217 <div class="text">Get an automatic discount of $5 to $10 per person!</div>218 </div>219 220 <div class="filters">221 <div class="chip">222 <svg class="back-ic" viewBox="0 0 24 24" fill="none" style="width:34px; height:34px;"><path d="M6 12h12" stroke="#243b8f" stroke-width="2" stroke-linecap="round"/></svg>223 Filters224 <svg class="caret" viewBox="0 0 24 24" fill="#243b8f"><path d="M7 10l5 5 5-5z"/></svg>225 </div>226 <div class="chip">Nonstop First</div>227 <div class="chip">Lowest Price</div>228 <div class="chip">Sort By229 <svg class="caret" viewBox="0 0 24 24" fill="#243b8f"><path d="M7 10l5 5 5-5z"/></svg>230 </div>231 </div>232 233 <div class="results-title">234 <h2>Depart to Paris</h2>235 <p>Round-trip price per passenger, taxes and fees included</p>236 </div>237 238 <div class="list">239 <!-- Row 1 -->240 <div class="flight">241 <div class="airline">242 <div class="logo-ph">[IMG: KLM]</div>243 </div>244 <div class="flight-main">245 <div class="times">246 <div>247 <div class="time">06:35</div>248 <div class="airport">AMS</div>249 </div>250 <div class="duration">251 <span>1h 20m</span>252 <svg viewBox="0 0 120 18"><path d="M2 9h110" stroke="#aeb8c6" stroke-width="2"/><path d="M102 4l12 5-12 5" fill="#aeb8c6"/></svg>253 </div>254 <div>255 <div class="time">07:55</div>256 <div class="airport">CDG T2F</div>257 </div>258 </div>259 <div class="airline-name">KLM Royal Dutch Airlines</div>260 <div class="tags">261 <div class="tag">262 <svg width="22" height="22" viewBox="0 0 24 24" fill="#127b52"><path d="M7 7h10v10H7zM3 3h2v18H3zm16 0h2v18h-2z"/></svg>263 Carry-on baggage included264 </div>265 </div>266 </div>267 <div class="price">268 <div>269 <div class="now">$ 391</div>270 <div class="old">$ 401</div>271 </div>272 </div>273 </div>274 275 <!-- Row 2 -->276 <div class="flight">277 <div class="airline">278 <div class="logo-ph">[IMG: Air France]</div>279 </div>280 <div class="flight-main">281 <div class="times">282 <div>283 <div class="time">06:35</div>284 <div class="airport">AMS</div>285 </div>286 <div class="duration">287 <span>1h 20m</span>288 <svg viewBox="0 0 120 18"><path d="M2 9h110" stroke="#aeb8c6" stroke-width="2"/><path d="M102 4l12 5-12 5" fill="#aeb8c6"/></svg>289 </div>290 <div>291 <div class="time">07:55</div>292 <div class="airport">CDG T2F</div>293 </div>294 </div>295 <div class="airline-name">Air France (Operated by KLM Royal Dutch Airlines)</div>296 <div class="tags">297 <div class="tag">298 <svg width="22" height="22" viewBox="0 0 24 24" fill="#127b52"><path d="M7 7h10v10H7zM3 3h2v18H3zm16 0h2v18h-2z"/></svg>299 Carry-on baggage included300 </div>301 </div>302 </div>303 <div class="price">304 <div>305 <div class="now">$ 391</div>306 <div class="old">$ 401</div>307 </div>308 </div>309 </div>310 311 <!-- Row 3 -->312 <div class="flight">313 <div class="airline">314 <div class="logo-ph">[IMG: KLM]</div>315 </div>316 <div class="flight-main">317 <div class="times">318 <div>319 <div class="time">12:25</div>320 <div class="airport">AMS</div>321 </div>322 <div class="duration">323 <span>1h 15m</span>324 <svg viewBox="0 0 120 18"><path d="M2 9h110" stroke="#aeb8c6" stroke-width="2"/><path d="M102 4l12 5-12 5" fill="#aeb8c6"/></svg>325 </div>326 <div>327 <div class="time">13:40</div>328 <div class="airport">CDG T2F</div>329 </div>330 </div>331 <div class="airline-name">KLM Royal Dutch Airlines</div>332 <div class="tags">333 <div class="tag">334 <svg width="22" height="22" viewBox="0 0 24 24" fill="#127b52"><path d="M7 7h10v10H7zM3 3h2v18H3zm16 0h2v18h-2z"/></svg>335 Carry-on baggage included336 </div>337 <div class="tag" style="background:#e9f7f1; color:#0a8a56;">338 <svg width="22" height="22" viewBox="0 0 24 24" fill="#0a8a56"><path d="M12 2l4 8 8 1-6 5 2 8-8-4-8 4 2-8-6-5 8-1z"/></svg>339 −7% CO₂ emissions340 </div>341 </div>342 </div>343 <div class="price">344 <div>345 <div class="now">$ 391</div>346 <div class="old">$ 401</div>347 </div>348 </div>349 </div>350 351 <!-- Row 4 -->352 <div class="flight">353 <div class="airline">354 <div class="logo-ph">[IMG: Air France]</div>355 </div>356 <div class="flight-main">357 <div class="times">358 <div>359 <div class="time">12:25</div>360 <div class="airport">AMS</div>361 </div>362 <div class="duration">363 <span>1h 15m</span>364 <svg viewBox="0 0 120 18"><path d="M2 9h110" stroke="#aeb8c6" stroke-width="2"/><path d="M102 4l12 5-12 5" fill="#aeb8c6"/></svg>365 </div>366 <div>367 <div class="time">13:40</div>368 <div class="airport">CDG T2F</div>369 </div>370 </div>371 <div class="airline-name">Air France (Operated by KLM Royal Dutch Airlines)</div>372 <div class="tags">373 <div class="tag">374 <svg width="22" height="22" viewBox="0 0 24 24" fill="#127b52"><path d="M7 7h10v10H7zM3 3h2v18H3zm16 0h2v18h-2z"/></svg>375 Carry-on baggage included376 </div>377 </div>378 </div>379 <div class="price">380 <div>381 <div class="now">$ 391</div>382 <div class="old">$ 401</div>383 </div>384 </div>385 </div>386 387 <!-- Row 5 -->388 <div class="flight">389 <div class="airline">390 <div class="logo-ph">[IMG: Air France]</div>391 </div>392 <div class="flight-main">393 <div class="times">394 <div>395 <div class="time">14:00</div>396 <div class="airport">AMS</div>397 </div>398 <div class="duration">399 <span>1h 25m</span>400 <svg viewBox="0 0 120 18"><path d="M2 9h110" stroke="#aeb8c6" stroke-width="2"/><path d="M102 4l12 5-12 5" fill="#aeb8c6"/></svg>401 </div>402 <div>403 <div class="time">15:25</div>404 <div class="airport">CDG T2F</div>405 </div>406 </div>407 <div class="airline-name">Air France</div>408 <div class="tags">409 <div class="tag">410 <svg width="22" height="22" viewBox="0 0 24 24" fill="#127b52"><path d="M7 7h10v10H7zM3 3h2v18H3zm16 0h2v18h-2z"/></svg>411 Carry-on baggage included412 </div>413 </div>414 </div>415 <div class="price">416 <div>417 <div class="now">$ 391</div>418 <div class="old">$ 401</div>419 </div>420 </div>421 </div>422 </div>423 424 <div class="toast">All flight results loaded</div>425 <div class="home-indicator"></div>426</div>427</body>428</html>