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; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #0B1118;14 color: #E6EDF5;15 font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;16 }17 18 .status-bar {19 height: 90px;20 padding: 0 36px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #D6DEE8;25 font-weight: 600;26 font-size: 40px;27 }28 .status-left, .status-right { display: flex; align-items: center; gap: 22px; }29 .dot-icon { width: 28px; height: 28px; background: #E6EDF5; border-radius: 50%; opacity: 0.8; }30 .mini-pill { border: 2px solid #3A4653; color: #9FB0C4; font-size: 26px; padding: 6px 10px; border-radius: 6px; }31 32 .top-title {33 padding: 18px 36px 0 36px;34 display: flex;35 align-items: center;36 gap: 26px;37 }38 .back-btn svg { width: 48px; height: 48px; fill: none; stroke: #E6EDF5; stroke-width: 6; }39 .route-pill {40 flex: 1;41 background: #18212B;42 border: 2px solid #243141;43 color: #DDE6F0;44 border-radius: 22px;45 padding: 22px 28px;46 }47 .route-title { font-size: 40px; font-weight: 600; letter-spacing: 0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }48 .route-date { font-size: 28px; color: #9FB0C4; margin-top: 4px; }49 50 .section-title {51 font-size: 52px;52 font-weight: 700;53 margin: 34px 36px 18px 36px;54 }55 56 .chips { display: flex; gap: 20px; padding: 0 36px 22px 36px; flex-wrap: nowrap; }57 .chip {58 padding: 18px 28px;59 border-radius: 28px;60 border: 2px solid #3B4654;61 color: #C7D3E0;62 font-size: 34px;63 line-height: 1;64 }65 .chip.primary {66 background: #265BFF;67 border-color: #265BFF;68 color: #FFFFFF;69 font-weight: 700;70 }71 72 .card {73 margin: 18px 36px;74 background: #1A2430;75 border: 2px solid #2A3645;76 border-radius: 28px;77 padding: 26px;78 box-shadow: 0 2px 0 rgba(0,0,0,0.3) inset;79 }80 .flight-card { padding: 34px 30px; }81 .flight-content {82 display: flex;83 align-items: center;84 gap: 28px;85 }86 .logo {87 width: 110px;88 height: 110px;89 background: #E0E0E0;90 border: 1px solid #BDBDBD;91 border-radius: 10px;92 display: flex; align-items: center; justify-content: center;93 color: #757575; font-size: 24px; text-align: center; padding: 6px;94 }95 .details { flex: 1; }96 .time-range { font-size: 44px; font-weight: 800; letter-spacing: 0.3px; }97 .subline { margin-top: 8px; font-size: 30px; color: #9FB0C4; }98 .meta {99 width: 280px;100 text-align: right;101 }102 .meta-top { display: flex; justify-content: flex-end; gap: 16px; font-size: 30px; color: #C7D3E0; }103 .duration { color: #9FB0C4; }104 .price { margin-top: 20px; font-size: 44px; font-weight: 800; }105 .groupprice { margin-top: 6px; font-size: 28px; color: #91A3B8; }106 107 .show-more {108 margin: 16px 36px 26px 36px;109 padding: 28px 32px;110 border-radius: 28px;111 background: #16202A;112 border: 2px solid #2A3645;113 color: #79B6D4;114 font-size: 34px;115 display: flex;116 justify-content: space-between;117 align-items: center;118 }119 .chevron svg { width: 42px; height: 42px; stroke: #79B6D4; stroke-width: 6; fill: none; }120 121 /* Hotels */122 .hotel-section { margin-top: 40px; }123 .hotel-card { display: flex; gap: 28px; align-items: stretch; }124 .hotel-img {125 width: 300px; height: 220px;126 background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 16px;127 display: flex; align-items: center; justify-content: center;128 color: #757575; font-size: 24px;129 }130 .hotel-details { flex: 1; }131 .hotel-top { display: flex; justify-content: space-between; align-items: flex-start; }132 .hotel-name { font-size: 44px; font-weight: 800; }133 .hotel-price { font-size: 44px; font-weight: 800; }134 .stars { margin-top: 8px; display: flex; gap: 6px; }135 .stars svg { width: 30px; height: 30px; }136 .rating-row { margin-top: 10px; display: flex; align-items: center; gap: 14px; color: #9FB0C4; font-size: 30px; }137 .trip-icon {138 width: 46px; height: 32px; background: #E0E0E0; border: 1px solid #BDBDBD;139 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 20px; border-radius: 6px;140 }141 .green-dot { width: 16px; height: 16px; border-radius: 50%; background: #38C172; }142 .hotel-bottom { margin-top: 16px; display: flex; justify-content: space-between; color: #9FB0C4; font-size: 30px; }143 144 /* Gesture bar */145 .gesture {146 position: absolute;147 bottom: 28px; left: 50%; transform: translateX(-50%);148 width: 360px; height: 16px; background: #DDE6F0; border-radius: 16px; opacity: 0.35;149 }150</style>151</head>152<body>153<div id="render-target">154 155 <!-- Status Bar -->156 <div class="status-bar">157 <div class="status-left">158 <div>9:57</div>159 <div class="dot-icon"></div>160 <div class="dot-icon"></div>161 <div class="mini-pill">N</div>162 <div class="mini-pill">LR</div>163 <div style="font-size: 40px; opacity: 0.6;">•</div>164 </div>165 <div class="status-right">166 <!-- WiFi icon -->167 <svg width="48" height="48" viewBox="0 0 24 24">168 <path d="M2 9c5-5 15-5 20 0" stroke="#E6EDF5" stroke-width="2" fill="none" stroke-linecap="round"/>169 <path d="M5 12c3.5-3.5 10.5-3.5 14 0" stroke="#E6EDF5" stroke-width="2" fill="none" stroke-linecap="round"/>170 <path d="M8 15c2-2 6-2 8 0" stroke="#E6EDF5" stroke-width="2" fill="none" stroke-linecap="round"/>171 <circle cx="12" cy="18" r="1.8" fill="#E6EDF5"/>172 </svg>173 <!-- Battery icon -->174 <svg width="60" height="48" viewBox="0 0 28 16">175 <rect x="1" y="2" width="22" height="12" rx="2" stroke="#E6EDF5" stroke-width="2" fill="none"/>176 <rect x="24" y="6" width="3" height="4" rx="1" fill="#E6EDF5"/>177 <rect x="4" y="4" width="16" height="8" rx="1" fill="#E6EDF5"/>178 </svg>179 </div>180 </div>181 182 <!-- Top Title / Route -->183 <div class="top-title">184 <div class="back-btn">185 <svg viewBox="0 0 24 24">186 <path d="M15 18l-6-6 6-6"/>187 </svg>188 </div>189 <div class="route-pill">190 <div class="route-title">Toronto Pearson Inte...ouver International</div>191 <div class="route-date">Dec 15</div>192 </div>193 </div>194 195 <!-- Flights Section -->196 <div class="section-title">Flights to Vancouver International</div>197 <div class="chips">198 <div class="chip primary">Best</div>199 <div class="chip">Cheapest</div>200 <div class="chip">Fastest</div>201 <div class="chip">Direct</div>202 <div class="chip">All filters</div>203 </div>204 205 <!-- Flight Card 1 -->206 <div class="card flight-card">207 <div class="flight-content">208 <div class="logo">[IMG: Airline Logo]</div>209 <div class="details">210 <div class="time-range">9:05 PM – 11:38 PM</div>211 <div class="subline">YYZ–YVR, Lynx Air</div>212 </div>213 <div class="meta">214 <div class="meta-top"><div>Direct</div><div class="duration">5h 33m</div></div>215 <div class="price">$137</div>216 <div class="groupprice">3 people $409</div>217 </div>218 </div>219 </div>220 221 <!-- Flight Card 2 -->222 <div class="card flight-card">223 <div class="flight-content">224 <div class="logo">[IMG: Airline Logo]</div>225 <div class="details">226 <div class="time-range">10:00 PM – 12:19 AM +1</div>227 <div class="subline">YYZ–YVR, Porter Airlines (Canada) Ltd</div>228 </div>229 <div class="meta">230 <div class="meta-top"><div>Direct</div><div class="duration">5h 19m</div></div>231 <div class="price">$186</div>232 <div class="groupprice">3 people $558</div>233 </div>234 </div>235 </div>236 237 <!-- Flight Card 3 -->238 <div class="card flight-card">239 <div class="flight-content">240 <div class="logo">[IMG: Airline Logo]</div>241 <div class="details">242 <div class="time-range">7:40 AM – 9:59 AM</div>243 <div class="subline">YYZ–YVR, Porter Airlines (Canada) Ltd</div>244 </div>245 <div class="meta">246 <div class="meta-top"><div>Direct</div><div class="duration">5h 19m</div></div>247 <div class="price">$186</div>248 <div class="groupprice">3 people $558</div>249 </div>250 </div>251 </div>252 253 <!-- Show all flights -->254 <div class="show-more">255 <div>Show all 65 flights</div>256 <div class="chevron">257 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" /></svg>258 </div>259 </div>260 261 <!-- Hotels Section -->262 <div class="hotel-section">263 <div class="section-title">Hotels</div>264 <div class="chips" style="margin-top:-6px;">265 <div class="chip">Best</div>266 <div class="chip primary">4 stars+</div>267 <div class="chip">Cheapest</div>268 <div class="chip">Excellent reviews</div>269 </div>270 271 <div class="card hotel-card">272 <div class="hotel-img">[IMG: Hyatt Regency Vancouver - Exterior]</div>273 <div class="hotel-details">274 <div class="hotel-top">275 <div class="hotel-name">Hyatt Regency Vancouver</div>276 <div class="hotel-price">$152</div>277 </div>278 <div class="stars">279 <!-- 5 red stars -->280 <svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 16,13 18,20 12,16 6,20 8,13 2,9 9,9" fill="#E44C3C"/></svg>281 <svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 16,13 18,20 12,16 6,20 8,13 2,9 9,9" fill="#E44C3C"/></svg>282 <svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 16,13 18,20 12,16 6,20 8,13 2,9 9,9" fill="#E44C3C"/></svg>283 <svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 16,13 18,20 12,16 6,20 8,13 2,9 9,9" fill="#E44C3C"/></svg>284 <svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 16,13 18,20 12,16 6,20 8,13 2,9 9,9" fill="#E44C3C"/></svg>285 </div>286 <div class="rating-row">287 <div class="trip-icon">[logo]</div>288 <div class="green-dot"></div>289 <div class="green-dot"></div>290 <div class="green-dot"></div>291 <div class="green-dot"></div>292 <div class="green-dot"></div>293 <div>(5945)</div>294 </div>295 <div class="hotel-bottom">296 <div>1.69 miles from downtown</div>297 <div>Per night</div>298 </div>299 </div>300 </div>301 </div>302 303 <div class="gesture"></div>304</div>305</body>306</html>