GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Flights and Hotels - Dark UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #0E1824;14 color: #E9EEF5;15 }16 17 /* Top status bar */18 .status-bar {19 height: 84px;20 padding: 0 36px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #E9EEF5;25 font-weight: 600;26 font-size: 32px;27 letter-spacing: 0.5px;28 }29 .status-icons { display: flex; align-items: center; gap: 24px; }30 .status-dot { width: 16px; height: 16px; background: #DDE3EA; border-radius: 50%; opacity: 0.8; }31 .status-pill {32 font-size: 22px;33 color: #0E1824;34 background: #DDE3EA;35 padding: 6px 10px;36 border-radius: 6px;37 font-weight: 700;38 }39 .icon-simple {40 width: 34px; height: 34px; fill: none; stroke: #E9EEF5; stroke-width: 3;41 }42 43 /* Header card */44 .header-card {45 margin: 20px 24px 0 24px;46 background: #243140;47 border-radius: 22px;48 padding: 24px 28px;49 display: flex;50 align-items: center;51 gap: 24px;52 }53 .header-title {54 font-size: 40px;55 font-weight: 700;56 white-space: nowrap;57 overflow: hidden;58 text-overflow: ellipsis;59 }60 .header-sub {61 font-size: 26px;62 color: #AEB9C6;63 margin-top: 6px;64 font-weight: 600;65 }66 67 /* Section titles */68 .section {69 padding: 24px 36px;70 }71 .section h2 {72 margin: 18px 0 16px;73 font-size: 50px;74 font-weight: 800;75 }76 77 /* Chips */78 .chips { display: flex; gap: 20px; flex-wrap: wrap; }79 .chip {80 padding: 18px 28px;81 border-radius: 18px;82 border: 1px solid #3D4B5A;83 color: #D8E1EA;84 font-size: 30px;85 font-weight: 700;86 background: transparent;87 }88 .chip.active {89 background: #1A73E8;90 border-color: #1A73E8;91 color: #FFFFFF;92 }93 94 /* Flight cards */95 .flight-card {96 margin: 24px 24px 0 24px;97 background: #1B2531;98 border-radius: 28px;99 padding: 28px;100 display: flex;101 gap: 26px;102 }103 .airline-img {104 width: 120px; height: 120px;105 background: #E0E0E0;106 border: 1px solid #BDBDBD;107 display: flex; align-items: center; justify-content: center;108 color: #757575; font-size: 22px; font-weight: 700;109 border-radius: 12px;110 }111 .flight-main { flex: 1; }112 .flight-time {113 font-size: 42px; font-weight: 800; margin-bottom: 6px;114 }115 .flight-route {116 font-size: 28px; color: #AEB9C6; font-weight: 600;117 }118 .flight-right {119 width: 240px;120 display: flex;121 flex-direction: column;122 align-items: flex-end;123 justify-content: space-between;124 }125 .flight-meta {126 text-align: right;127 }128 .flight-meta .direct { font-size: 28px; font-weight: 700; }129 .flight-meta .duration { font-size: 26px; color: #AEB9C6; margin-top: 6px; }130 .flight-price {131 font-size: 42px; font-weight: 900; margin-top: 12px;132 }133 .flight-subprice {134 font-size: 26px; color: #AEB9C6; margin-top: 6px; font-weight: 600;135 }136 137 /* Show all flights row */138 .show-all {139 margin: 24px;140 background: #1B2531;141 border-radius: 28px;142 padding: 30px;143 display: flex; align-items: center; justify-content: space-between;144 font-size: 34px; font-weight: 800; color: #8BC2F9;145 }146 .chevron {147 width: 36px; height: 36px;148 }149 150 /* Hotels section */151 .hotels-title {152 font-size: 48px; font-weight: 800; margin: 30px 0 16px;153 }154 .hotel-card {155 margin: 18px 24px;156 background: #1B2531;157 border-radius: 28px;158 padding: 24px;159 display: flex;160 gap: 24px;161 }162 .hotel-img {163 width: 316px; height: 210px;164 background: #E0E0E0;165 border: 1px solid #BDBDBD;166 display: flex; align-items: center; justify-content: center;167 color: #757575; font-size: 24px; font-weight: 700;168 border-radius: 14px;169 }170 .hotel-info { flex: 1; display: flex; }171 .hotel-left { flex: 1; }172 .hotel-title { font-size: 40px; font-weight: 800; }173 .stars { color: #FF6B6B; font-size: 30px; margin: 6px 0 10px; }174 .rating-row { display: flex; align-items: center; gap: 12px; color: #CFEAD9; }175 .rating-dots { display: flex; gap: 6px; }176 .rating-dot {177 width: 16px; height: 16px; background: #2ECC71; border-radius: 50%;178 }179 .hotel-price {180 width: 220px; text-align: right; font-size: 42px; font-weight: 900;181 }182 .hotel-sub {183 text-align: right; color: #AEB9C6; font-size: 26px; margin-top: 4px; font-weight: 600;184 }185 186 /* Bottom handle */187 .bottom-handle {188 position: absolute; left: 50%; transform: translateX(-50%);189 bottom: 26px; width: 240px; height: 10px; background: #FFFFFF; opacity: 0.8; border-radius: 6px;190 }191</style>192</head>193<body>194<div id="render-target">195 196 <!-- Status Bar -->197 <div class="status-bar">198 <div>10:03</div>199 <div class="status-icons">200 <div class="status-dot"></div>201 <svg class="icon-simple" viewBox="0 0 24 24">202 <circle cx="12" cy="12" r="9"></circle>203 </svg>204 <span class="status-pill">LR</span>205 <div class="status-dot" style="opacity:.5"></div>206 <svg class="icon-simple" viewBox="0 0 24 24" style="stroke:#E9EEF5;">207 <path d="M3 18h18M5 14h14M8 10h8M11 6h2"></path>208 </svg>209 <svg class="icon-simple" viewBox="0 0 24 24" style="stroke:#E9EEF5;">210 <path d="M3 12h18M21 12c0-6-4.5-9-9-9S3 6 3 12c0 6 4.5 9 9 9s9-3 9-9z"></path>211 </svg>212 </div>213 </div>214 215 <!-- Header Card -->216 <div class="header-card">217 <svg width="42" height="42" viewBox="0 0 24 24" style="fill:none; stroke:#E9EEF5; stroke-width:2.5;">218 <path d="M15 6l-6 6 6 6"></path>219 </svg>220 <div style="flex:1;">221 <div class="header-title">Toronto Pearson Inte...ouver International</div>222 <div class="header-sub">Dec 15</div>223 </div>224 </div>225 226 <!-- Flights Section -->227 <div class="section">228 <h2>Flights to Vancouver International</h2>229 <div class="chips">230 <div class="chip active">Best</div>231 <div class="chip">Cheapest</div>232 <div class="chip">Fastest</div>233 <div class="chip">Direct</div>234 <div class="chip">All filters</div>235 </div>236 </div>237 238 <!-- Flight Card 1 -->239 <div class="flight-card">240 <div class="airline-img">[IMG: Lynx Air]</div>241 <div class="flight-main">242 <div class="flight-time">9:05 PM – 11:38 PM</div>243 <div class="flight-route">YYZ–YVR, Lynx Air</div>244 </div>245 <div class="flight-right">246 <div class="flight-meta">247 <div class="direct">Direct</div>248 <div class="duration">5h 33m</div>249 </div>250 <div>251 <div class="flight-price">$137</div>252 <div class="flight-subprice">3 people $409</div>253 </div>254 </div>255 </div>256 257 <!-- Flight Card 2 -->258 <div class="flight-card">259 <div class="airline-img">[IMG: Porter]</div>260 <div class="flight-main">261 <div class="flight-time">10:00 PM – 12:19 AM +1</div>262 <div class="flight-route">YYZ–YVR, Porter Airlines (Canada) Ltd</div>263 </div>264 <div class="flight-right">265 <div class="flight-meta">266 <div class="direct">Direct</div>267 <div class="duration">5h 19m</div>268 </div>269 <div>270 <div class="flight-price">$185</div>271 <div class="flight-subprice">3 people $553</div>272 </div>273 </div>274 </div>275 276 <!-- Flight Card 3 -->277 <div class="flight-card">278 <div class="airline-img">[IMG: Porter]</div>279 <div class="flight-main">280 <div class="flight-time">7:40 AM – 9:59 AM</div>281 <div class="flight-route">YYZ–YVR, Porter Airlines (Canada) Ltd</div>282 </div>283 <div class="flight-right">284 <div class="flight-meta">285 <div class="direct">Direct</div>286 <div class="duration">5h 19m</div>287 </div>288 <div>289 <div class="flight-price">$185</div>290 <div class="flight-subprice">3 people $553</div>291 </div>292 </div>293 </div>294 295 <!-- Show all flights -->296 <div class="show-all">297 <div>Show all 65 flights</div>298 <svg class="chevron" viewBox="0 0 24 24" style="fill:none; stroke:#8BC2F9; stroke-width:2.5;">299 <path d="M9 6l6 6-6 6"></path>300 </svg>301 </div>302 303 <!-- Hotels Section -->304 <div class="section" style="padding-top:12px;">305 <div class="hotels-title">Hotels</div>306 <div class="chips">307 <div class="chip">Best</div>308 <div class="chip active">4 stars+</div>309 <div class="chip">Cheapest</div>310 <div class="chip">Excellent reviews</div>311 </div>312 </div>313 314 <!-- Hotel Card -->315 <div class="hotel-card">316 <div class="hotel-img">[IMG: Vancouver City Hotel]</div>317 <div class="hotel-info">318 <div class="hotel-left">319 <div class="hotel-title">Hyatt Regency Vancouver</div>320 <div class="stars">★ ★ ★ ★ ★</div>321 <div class="rating-row">322 <div style="width:28px;height:28px;border-radius:50%;background:#E0E0E0;border:1px solid #BDBDBD;display:flex;align-items:center;justify-content:center;color:#757575;font-size:14px;">[IMG: TripAdvisor]</div>323 <div class="rating-dots">324 <div class="rating-dot"></div>325 <div class="rating-dot"></div>326 <div class="rating-dot"></div>327 <div class="rating-dot"></div>328 <div class="rating-dot"></div>329 </div>330 <div style="color:#AEB9C6; font-size:26px;">(5945)</div>331 </div>332 <div style="color:#AEB9C6; font-size:26px; margin-top:12px;">1.69 miles from downtown</div>333 </div>334 <div>335 <div cla