GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Flight Results</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #ffffff;15 border-radius: 32px;16 box-shadow: 0 20px 60px rgba(0,0,0,0.15);17 color: #1f2937;18 }19 /* Header */20 .topbar {21 background: #133E8A;22 color: #fff;23 padding: 24px 36px 0 36px;24 }25 .status-row {26 height: 90px;27 display: flex;28 align-items: center;29 justify-content: space-between;30 font-weight: 600;31 font-size: 32px;32 }33 .status-left, .status-right { display: flex; align-items: center; gap: 22px; }34 .icon {35 width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;36 }37 .title-row {38 height: 140px;39 display: flex;40 align-items: center;41 gap: 28px;42 }43 .title-row h1 {44 margin: 0;45 font-size: 48px;46 font-weight: 700;47 }48 .back-icon svg { fill: none; stroke: #fff; stroke-width: 6; }49 /* Filters */50 .filters {51 background: #fff;52 padding: 24px 28px;53 box-shadow: 0 -8px 0 rgba(0,0,0,0.06);54 }55 .chip-row {56 display: flex;57 gap: 20px;58 padding: 8px 0 0;59 }60 .chip {61 background: #F3F4F6;62 border: 1px solid #E5E7EB;63 color: #4b5563;64 padding: 18px 26px;65 border-radius: 24px;66 font-size: 34px;67 white-space: nowrap;68 }69 .chip.selected {70 background: #ffffff;71 border-color: #2F66F2;72 color: #1f3db1;73 box-shadow: 0 2px 0 rgba(47,102,242,0.25);74 }75 /* Search summary */76 .summary {77 padding: 10px 36px 22px;78 border-top: 1px solid #E5E7EB;79 border-bottom: 8px solid #EEEEEE;80 }81 .summary-top {82 display: flex; align-items: center; justify-content: space-between;83 }84 .route {85 font-size: 42px; font-weight: 800;86 }87 .route span { font-weight: 400; color: #6b7280; }88 .summary-sub { color: #6b7280; font-size: 32px; margin-top: 6px; }89 .edit-icon svg { fill: none; stroke: #374151; stroke-width: 6; }90 /* Cards */91 .card {92 padding: 30px 36px;93 border-bottom: 8px solid #EEEEEE;94 }95 .time-grid {96 display: grid;97 grid-template-columns: 280px 1fr 280px;98 align-items: center;99 gap: 24px;100 }101 .depart, .arrive {102 font-size: 46px; font-weight: 800;103 }104 .origin, .dest {105 font-size: 30px; color: #6b7280; margin-top: 6px;106 }107 .timeline {108 display: flex; flex-direction: column; align-items: center;109 }110 .duration {111 font-size: 32px; color: #6b7280; margin-bottom: 14px;112 }113 .line {114 width: 480px; height: 6px; background: #D1D5DB; border-radius: 6px; position: relative;115 }116 .stop-dot { width: 18px; height: 18px; border-radius: 50%; background: #9CA3AF; position: absolute; top: -6px; }117 .stop-dot.dot1 { left: 240px; }118 .stop-dot.dot2 { left: 360px; }119 .stops { font-size: 30px; color: #6b7280; margin-top: 12px; }120 .warning {121 display: flex; align-items: center; gap: 14px; margin: 18px 0; color: #B45309; font-size: 32px; font-weight: 700;122 }123 .warning svg { stroke: #B45309; fill: none; stroke-width: 6; }124 .airlines { display: flex; align-items: center; gap: 18px; color: #374151; font-size: 32px; }125 .logo {126 width: 54px; height: 54px; background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px; border-radius: 8px;127 }128 .price-row {129 margin-top: 24px;130 display: grid;131 grid-template-columns: 1fr auto;132 align-items: center;133 gap: 20px;134 }135 .baggage {136 display: flex; align-items: center; gap: 18px; color: #6b7280; font-size: 30px;137 }138 .bag-icons { display: flex; gap: 22px; }139 .bag-icons svg { stroke: #6b7280; fill: none; stroke-width: 5; }140 .price {141 text-align: right;142 font-size: 48px; font-weight: 800; color: #1f2937;143 }144 .price-sub { font-size: 26px; color: #6b7280; }145 .info-icon { display: inline-flex; width: 36px; height: 36px; margin-left: 12px; }146 .info-icon svg { fill: none; stroke: #6b7280; stroke-width: 5; }147 /* Bottom gesture bar */148 .gesture {149 position: absolute; left: 50%; transform: translateX(-50%);150 bottom: 26px; width: 280px; height: 12px; background: #111827; opacity: .12; border-radius: 12px;151 }152</style>153</head>154<body>155<div id="render-target">156 157 <!-- Blue header -->158 <div class="topbar">159 <div class="status-row">160 <div class="status-left">161 <div>8:44</div>162 <!-- simple small icons placeholders -->163 <span class="icon">164 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#fff" opacity=".25"/></svg>165 </span>166 <span class="icon">167 <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12" rx="3" fill="#fff" opacity=".25"/></svg>168 </span>169 <span class="icon">170 <svg viewBox="0 0 24 24"><path d="M12 3l6 6-6 6-6-6z" fill="#fff" opacity=".25"/></svg>171 </span>172 <span class="icon">173 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#fff" opacity=".25"/></svg>174 </span>175 <span class="icon">176 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#fff" opacity=".8"/></svg>177 </span>178 </div>179 <div class="status-right">180 <span class="icon">181 <!-- wifi -->182 <svg viewBox="0 0 24 24" stroke="#fff" stroke-width="2" fill="none">183 <path d="M2 9c5-5 15-5 20 0" />184 <path d="M6 13c3-3 9-3 12 0" />185 <path d="M10 17c2-2 2-2 4 0" />186 </svg>187 </span>188 <span class="icon">189 <!-- battery -->190 <svg viewBox="0 0 28 24" fill="none" stroke="#fff" stroke-width="2">191 <rect x="2" y="6" width="20" height="12" rx="2" />192 <rect x="4" y="8" width="14" height="8" fill="#fff" opacity=".5" stroke="none"/>193 <rect x="22" y="9" width="3" height="6" rx="1" />194 </svg>195 </span>196 </div>197 </div>198 <div class="title-row">199 <div class="back-icon icon" style="width:48px;height:48px;">200 <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg>201 </div>202 <h1>4 results</h1>203 </div>204 </div>205 206 <!-- Filters -->207 <div class="filters">208 <div class="chip-row">209 <div class="chip">⇵ Sort by: Best</div>210 <div class="chip selected">Airlines</div>211 <div class="chip">Stops</div>212 <div class="chip">Duration</div>213 <div class="chip">Flight times</div>214 </div>215 </div>216 217 <!-- Summary -->218 <div class="summary">219 <div class="summary-top">220 <div class="route"><strong>LHR</strong> London → <strong>OSL</strong> Oslo</div>221 <div class="edit-icon icon" style="width:44px;height:44px;">222 <!-- pencil -->223 <svg viewBox="0 0 24 24"><path d="M3 17l2 4 4-2L19 9l-4-4L5 15z"/><path d="M14 5l5 5"/></svg>224 </div>225 </div>226 <div class="summary-sub">· Mon, Nov 06 · 1 adult · Economy</div>227 </div>228 229 <!-- Card 1 -->230 <div class="card">231 <div class="time-grid">232 <div>233 <div class="depart">8:50 AM</div>234 <div class="origin">LHR · Nov 06</div>235 </div>236 <div class="timeline">237 <div class="duration">5h 55m</div>238 <div class="line">239 <div class="stop-dot dot1"></div>240 </div>241 <div class="stops">1 stop</div>242 </div>243 <div style="text-align:right;">244 <div class="arrive">3:45 PM</div>245 <div class="dest">OSL · Nov 06</div>246 </div>247 </div>248 249 <div class="warning">250 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v7"/><path d="M12 17h.01"/></svg>251 <span>Self transfer</span>252 </div>253 254 <div class="airlines">255 <div class="logo">[IMG]</div>256 <div class="logo">[IMG]</div>257 <span>Aer Lingus, SAS</span>258 </div>259 260 <div class="price-row">261 <div class="baggage">262 <div class="bag-icons">263 <!-- personal item -->264 <svg viewBox="0 0 24 24"><rect x="3" y="9" width="18" height="10" rx="2"/><path d="M8 9V6a4 4 0 0 1 8 0v3"/></svg>265 <!-- carry-on -->266 <svg viewBox="0 0 24 24"><rect x="5" y="8" width="14" height="12" rx="2"/><path d="M9 8V6h6v2"/></svg>267 </div>268 <span>Baggage included: personal item, carry-on bag</span>269 </div>270 <div>271 <div class="price">Rs. 33,230.43272 <span class="info-icon">273 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 10v6"/><path d="M12 7h.01"/></svg>274 </span>275 </div>276 <div class="price-sub">Total</div>277 </div>278 </div>279 </div>280 281 <!-- Card 2 -->282 <div class="card">283 <div class="time-grid">284 <div>285 <div class="depart">9:50 AM</div>286 <div class="origin">LHR · Nov 06</div>287 </div>288 <div class="timeline">289 <div class="duration">9h 10m</div>290 <div class="line">291 <div class="stop-dot dot1"></div>292 <div class="stop-dot dot2"></div>293 </div>294 <div class="stops">2 stops</div>295 </div>296 <div style="text-align:right;">297 <div class="arrive">8:00 PM</div>298 <div class="dest">OSL · Nov 06</div>299 </div>300 </div>301 302 <div class="warning">303 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v7"/><path d="M12 17h.01"/></svg>304 <span>Self transfer</span>305 </div>306 307 <div class="airlines">308 <div class="logo">[IMG]</div>309 <div class="logo">[IMG]</div>310 <div class="logo">[IMG]</div>311 <span>Aer Lingus, Ryanair, Norwegian</span>312 </div>313 314 <div class="price-row">315 <div class="baggage">316 <div class="bag-icons">317 <svg viewBox="0 0 24 24"><rect x="3" y="9" width="18" height="10" rx="2"/><path d="M8 9V6a4 4 0 0 1 8 0v3"/></svg>318 </div>319 <span>Baggage included: personal item</span>320 </div>321 <div>322 <div class="price">Rs. 27,196.31323 <span class="info-icon">324 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 10v6"/><path d="M12 7h.01"/></svg>325 </span>326 </div>327 <div class="price-sub">Total</div>328 </div>329 </div>330 </div>331 332 <!-- Card 3 -->333 <div class="card">334 <div class="time-grid">335 <div>336 <div class="depart">8:50 AM</div>337 <div class="origin">LHR · Nov 06</div>338 </div>339 <div class="timeline">340 <div class="duration">10h 10m</div>341 <div class="line">342 <div class="stop-dot dot1"></div>343 <div class="stop-dot dot2"></div>344 </div>345 <div class="stops">2 stops</div>346 </div>347 <div style="text-align:right;">348 <div class="arrive">8:00 PM</div>349 <div class="dest">OSL · Nov 06</div>350 </div>351 </div>352 353 <div class="warning">354 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v7"/><path d="M12 17h.01"/></svg>355 <span>Self transfer</span>356 </div>357 358 <div class="airlines">359 <div class="logo">[IMG]</div>360 <div class="logo">[IMG]</div>361 <div class="logo">[IMG]</div>362 <span>Aer Lingus, Ryanair, Norwegian</span>363 </div>364 365 <div class="price-row">366 <div class="baggage">367 <div class="bag-icons">368 <svg viewBox="0 0 24 24"><rect x="3" y="9" width="18" height="10" rx="2"/><path d="M8 9V6a4 4 0 0 1 8 0v3"/></svg>369 </div>370 <span>Baggage included: personal item</span>371 </div>372 <div>373 <div class="price">Rs. 27,196.31374 <span class="info-icon">375 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 10v6"/><path d="M12 7h.01"/></svg>376 </span>377 </div>378 <div class="price-sub">Total</div>379 </div>380 </div>381 </div>382 383 <!-- Bottom gesture bar -->384 <div class="gesture"></div>385</div>386</body>387</html>