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 Selection</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; color: #1b2440; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 border-radius: 36px;16 box-shadow: 0 12px 40px rgba(0,0,0,0.12);17 }18 19 /* Top status bar */20 .status-bar {21 height: 120px;22 padding: 0 48px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 color: #323743;27 font-weight: 600;28 font-size: 42px;29 }30 .status-icons {31 display: flex;32 gap: 28px;33 align-items: center;34 }35 .icon-cloud, .icon-wifi, .icon-battery { width: 48px; height: 48px; }36 37 /* Header */38 .header {39 padding: 16px 48px 24px 48px;40 }41 .title-row {42 display: flex;43 align-items: center;44 gap: 28px;45 }46 .back-icon { width: 56px; height: 56px; }47 .title-text {48 display: flex;49 flex-direction: column;50 gap: 6px;51 }52 .title-text .main {53 font-size: 56px;54 font-weight: 700;55 letter-spacing: 0.2px;56 }57 .title-text .sub {58 font-size: 30px;59 color: #667085;60 }61 .divider {62 width: 100%;63 height: 2px;64 background: #ECECEC;65 margin-top: 24px;66 }67 68 /* Breadcrumb and info */69 .breadcrumb-wrap {70 background: #F5F4F6;71 border-radius: 24px;72 margin: 24px 32px 0 32px;73 padding: 28px 32px 36px 32px;74 }75 .breadcrumb {76 display: flex;77 align-items: center;78 gap: 18px;79 font-size: 34px;80 color: #6b7280;81 margin-bottom: 24px;82 flex-wrap: nowrap;83 }84 .breadcrumb .strong { color: #202642; font-weight: 700; }85 .chev { width: 26px; height: 26px; }86 .info-text {87 font-size: 34px;88 line-height: 1.45;89 color: #4b5563;90 margin-top: 6px;91 max-width: 960px;92 }93 94 /* List */95 .list {96 padding: 24px 32px 160px 32px;97 background: #F6F5F7;98 }99 .card {100 background: #ffffff;101 border-radius: 36px;102 box-shadow: 0 2px 0 rgba(0,0,0,0.02);103 padding: 40px 40px;104 margin-bottom: 36px;105 display: flex;106 justify-content: space-between;107 align-items: flex-start;108 }109 .details {110 max-width: 650px;111 }112 .time {113 font-size: 50px;114 font-weight: 800;115 letter-spacing: 0.2px;116 margin-bottom: 16px;117 }118 .route {119 font-size: 32px;120 color: #384152;121 margin-bottom: 8px;122 }123 .duration {124 font-size: 30px;125 color: #6b7280;126 margin-bottom: 18px;127 }128 .airline-row {129 display: flex;130 align-items: center;131 gap: 14px;132 font-size: 32px;133 color: #283245;134 font-weight: 600;135 }136 .img-placeholder {137 width: 48px;138 height: 48px;139 background: #E0E0E0;140 border: 1px solid #BDBDBD;141 display: flex;142 align-items: center;143 justify-content: center;144 color: #757575;145 font-size: 20px;146 border-radius: 8px;147 }148 149 .price {150 text-align: right;151 min-width: 260px;152 padding-top: 8px;153 }154 .price .delta {155 font-size: 46px;156 font-weight: 900;157 }158 .price .base {159 font-size: 30px;160 color: #667085;161 margin-top: 8px;162 }163 .price .label {164 font-size: 28px;165 color: #7b8090;166 margin-top: 6px;167 }168 169 .plus1 {170 color: #d12a2a;171 font-size: 30px;172 vertical-align: super;173 font-weight: 700;174 margin-left: 6px;175 }176 177 /* Floating filter */178 .filter-btn {179 position: absolute;180 bottom: 172px;181 left: 50%;182 transform: translateX(-50%);183 background: #ffffff;184 border-radius: 48px;185 box-shadow: 0 8px 24px rgba(61, 77, 121, 0.18);186 padding: 26px 40px;187 display: flex;188 align-items: center;189 gap: 18px;190 border: 1px solid #E7E7EA;191 font-size: 36px;192 color: #2F5AEF;193 font-weight: 700;194 }195 .filter-icon { width: 44px; height: 44px; }196 197 /* Home indicator */198 .home-indicator {199 position: absolute;200 bottom: 80px;201 left: 50%;202 transform: translateX(-50%);203 width: 280px;204 height: 12px;205 background: #000000;206 opacity: 0.8;207 border-radius: 8px;208 }209</style>210</head>211<body>212<div id="render-target">213 214 <div class="status-bar">215 <div>4:09</div>216 <div class="status-icons">217 <svg class="icon-cloud" viewBox="0 0 24 24">218 <path d="M6 15c-2 0-3.5-1.5-3.5-3.3C2.5 9.6 4 8 6 8c.4-3 2.9-5 6-5 3.6 0 6.5 2.7 6.7 6.2C20.3 9 22 10.6 22 12.7 22 14.6 20.6 16 18.7 16H6z" fill="#A3AAB5"/>219 </svg>220 <svg class="icon-wifi" viewBox="0 0 24 24">221 <path d="M12 18.5c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zm-4-3c2.2-1.7 5.9-1.7 8 0l-1.4 1.4c-1.7-1.2-3.5-1.2-5.2 0L8 15.5zm-3.5-3.5c3.9-3.1 11-3.1 14.9 0l-1.5 1.5c-3.1-2.4-8.8-2.4-12 0L4.5 12z" fill="#7E8796"/>222 </svg>223 <svg class="icon-battery" viewBox="0 0 24 24">224 <rect x="2" y="6" width="18" height="12" rx="2" fill="none" stroke="#7E8796" stroke-width="2"/>225 <rect x="4" y="8" width="12" height="8" fill="#7E8796"/>226 <rect x="20" y="9" width="2" height="6" rx="1" fill="#7E8796"/>227 </svg>228 </div>229 </div>230 231 <div class="header">232 <div class="title-row">233 <svg class="back-icon" viewBox="0 0 24 24">234 <path d="M15 5l-7 7 7 7" fill="none" stroke="#4B6CFD" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>235 </svg>236 <div class="title-text">237 <div class="main">BOM to AUH</div>238 <div class="sub">Jul 28, 2023</div>239 </div>240 </div>241 <div class="divider"></div>242 </div>243 244 <div class="breadcrumb-wrap">245 <div class="breadcrumb">246 <span>H→BOM</span>247 <svg class="chev" viewBox="0 0 24 24">248 <path d="M9 6l6 6-6 6" fill="none" stroke="#6b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>249 </svg>250 <span class="strong">Choose returning flight</span>251 <svg class="chev" viewBox="0 0 24 24">252 <path d="M9 6l6 6-6 6" fill="none" stroke="#6b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>253 </svg>254 <span>Review your trip</span>255 </div>256 <div class="info-text">257 Prices displayed include taxes and may change based on availability. You can review any additional fees before checkout. Prices are not final until you complete your purchase.258 </div>259 </div>260 261 <div class="list">262 263 <div class="card">264 <div class="details">265 <div class="time">5:05pm - 6:30pm</div>266 <div class="route">Mumbai (BOM) - Abu Dhabi (AUH)</div>267 <div class="duration">2h 55m (Nonstop)</div>268 <div class="airline-row">269 <div class="img-placeholder">[IMG]</div>270 <span>Etihad Airways</span>271 </div>272 </div>273 <div class="price">274 <div class="delta">+$0</div>275 <div class="base">$246</div>276 <div class="label">Roundtrip per traveler</div>277 </div>278 </div>279 280 <div class="card">281 <div class="details">282 <div class="time">9:55pm - 11:20pm</div>283 <div class="route">Mumbai (BOM) - Abu Dhabi (AUH)</div>284 <div class="duration">2h 55m (Nonstop)</div>285 <div class="airline-row">286 <div class="img-placeholder">[IMG]</div>287 <span>Etihad Airways</span>288 </div>289 </div>290 <div class="price">291 <div class="delta">+$27</div>292 <div class="base">$273</div>293 <div class="label">Roundtrip per traveler</div>294 </div>295 </div>296 297 <div class="card">298 <div class="details">299 <div class="time">9:40pm - 11:15pm</div>300 <div class="route">Mumbai (BOM) - Abu Dhabi (AUH)</div>301 <div class="duration">3h 5m (Nonstop)</div>302 <div class="airline-row">303 <div class="img-placeholder">[IMG]</div>304 <span>Vistara</span>305 </div>306 </div>307 <div class="price">308 <div class="delta">+$61</div>309 <div class="base">$307</div>310 <div class="label">Roundtrip per traveler</div>311 </div>312 </div>313 314 <div class="card">315 <div class="details">316 <div class="time">11:05pm - 12:30am<span class="plus1">+1</span></div>317 <div class="route">Mumbai (BOM) - Abu Dhabi (AUH)</div>318 <div class="duration">2h 55m (Nonstop)</div>319 <div class="airline-row">320 <div class="img-placeholder">[IMG]</div>321 <span>Air India</span>322 </div>323 </div>324 <div class="price">325 <div class="delta">+$67</div>326 <div class="base">$313</div>327 <div class="label">Roundtrip per traveler</div>328 </div>329 </div>330 331 <div class="card">332 <div class="details">333 <div class="time">7:20pm - 1:15am<span class="plus1">+1</span></div>334 <div class="route">Mumbai (BOM) - Abu Dhabi (ZVJ)</div>335 <div class="duration">7h 25m (1 stop)</div>336 <div class="duration">2h in DXB</div>337 <div class="airline-row">338 <div class="img-placeholder">[IMG]</div>339 <span>Flight + Bus</span>340 </div>341 </div>342 <div class="price">343 <div class="delta">+$90</div>344 <div class="base">$336</div>345 <div class="label">Roundtrip per traveler</div>346 </div>347 </div>348 349 </div>350 351 <div class="filter-btn">352 <svg class="filter-icon" viewBox="0 0 24 24">353 <path d="M4 6h16M7 12h10M10 18h4" stroke="#2F5AEF" stroke-width="2.5" stroke-linecap="round"/>354 </svg>355 <span>Sort & Filter</span>356 </div>357 358 <div class="home-indicator"></div>359</div>360</body>361</html>