GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Flight Filters UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #EFEFEF;12 color: #333;13 }14 .statusbar {15 height: 110px;16 background: #E5E5E5;17 display: flex; align-items: center; justify-content: space-between;18 padding: 0 40px;19 font-size: 36px; color: #3a3a3a;20 }21 .status-icons { display: flex; gap: 24px; align-items: center; }22 .top-action {23 height: 80px; display: flex; align-items: center; justify-content: flex-end;24 padding: 0 40px; font-size: 40px; color: #0A98D6;25 }26 .header {27 background: #FFFFFF;28 padding: 34px 40px 26px 40px;29 box-shadow: 0 1px 0 rgba(0,0,0,0.06);30 }31 .route-title { font-size: 44px; font-weight: 700; margin-bottom: 24px; }32 .route-meta { display: flex; align-items: center; gap: 26px; font-size: 30px; color: #666; }33 .header-right { margin-left: auto; }34 .divider-dotted { border-top: 2px dotted #CFCFCF; }35 .section {36 background: #F3F3F3;37 padding: 28px 40px;38 border-bottom: 2px dotted #CFCFCF;39 }40 .section.header-line { display: flex; align-items: center; justify-content: space-between; padding: 34px 40px; background: #EFEFEF; }41 .filter-info { font-size: 32px; color: #666; }42 .reset-link { color: #208BDA; margin-left: 14px; }43 .chip-x {44 display: inline-flex; align-items: center; gap: 10px;45 color: #208BDA; font-size: 32px;46 }47 .section-title { font-size: 40px; font-weight: 700; color: #333; }48 .chevron { width: 44px; height: 44px; }49 /* Segmented control */50 .segmented {51 margin: 24px 40px 24px 40px;52 border: 3px solid #2E2E2E; border-radius: 16px;53 display: flex; overflow: hidden; background: #fff;54 }55 .segment {56 flex: 1; padding: 26px 20px;57 text-align: center; font-size: 34px; color: #222;58 border-right: 2px solid #DADADA;59 }60 .segment:last-child { border-right: none; }61 .segment.active { background: #000; color: #fff; font-weight: 700; }62 /* Collapsible headers */63 .collapsible { display: flex; align-items: center; justify-content: space-between; padding: 34px 40px; background: #EFEFEF; border-bottom: 2px dotted #CFCFCF; }64 /* Buttons */65 .actions { display: flex; gap: 40px; padding: 40px; }66 .btn {67 flex: 1; height: 120px; border-radius: 24px; font-size: 42px; font-weight: 700;68 display: flex; align-items: center; justify-content: center; cursor: default;69 }70 .btn.clear { background: #fff; border: 4px solid #2E2E2E; color: #222; }71 .btn.done { background: #61D6FF; border: none; color: #083B52; }72 /* Offer tabs */73 .offers { display: flex; gap: 0; padding: 26px 30px; }74 .offer {75 flex: 1; background: #fff; border: 3px solid #D7D7D7; border-right: none; padding: 28px;76 font-size: 32px; color: #333; min-height: 120px;77 }78 .offer:first-child { border-left: 3px solid #7CC6FF; border-top: 3px solid #7CC6FF; border-bottom: 3px solid #7CC6FF; border-right: none; background: #F7FBFF; }79 .offer:last-child { border-right: 3px solid #D7D7D7; }80 .offer .price { font-weight: 700; margin-top: 8px; }81 /* Flight card */82 .panel {83 margin: 24px 24px;84 background: #EDEDED; border-radius: 14px; box-shadow: inset 0 1px 0 rgba(0,0,0,0.05);85 }86 .panel-title { padding: 24px 32px; font-size: 40px; font-weight: 700; color: #555; }87 .flight-card {88 background: #FFFFFF; margin: 0 0 24px 0; padding: 24px 32px; border-radius: 12px;89 display: flex; align-items: center; justify-content: space-between;90 border: 1px solid #DDD;91 }92 .left-info { display: flex; align-items: center; gap: 24px; }93 .badge { background: #F7F7F7; border: 1px solid #CFCFCF; color: #666; padding: 8px 16px; border-radius: 20px; font-size: 26px; }94 .airline-logo {95 width: 70px; height: 70px; background: #E0E0E0; border: 1px solid #BDBDBD;96 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px;97 border-radius: 8px;98 }99 .times { display: flex; align-items: center; gap: 26px; }100 .time-block { text-align: left; }101 .time { font-size: 56px; font-weight: 700; }102 .airport { font-size: 28px; color: #666; margin-top: 6px; }103 .duration { font-size: 28px; color: #666; display: flex; align-items: center; gap: 14px; }104 .arrowline { width: 140px; height: 24px; }105 .stop { font-size: 26px; color: #666; margin-top: 6px; }106 .arr-right { text-align: right; }107 /* Bottom nav */108 .bottom-nav {109 position: absolute; left: 0; right: 0; bottom: 80px;110 height: 160px; background: #0A0A0A; color: #B9B9B9;111 display: flex; align-items: center; justify-content: space-around;112 padding-bottom: 10px;113 }114 .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 28px; }115 .nav-item.active { color: #53D5FF; }116 .gesture { position: absolute; left: 50%; transform: translateX(-50%); bottom: 24px; width: 240px; height: 12px; background: #FFFFFF; border-radius: 8px; }117 /* Small helpers */118 .muted { color: #666; }119</style>120</head>121<body>122<div id="render-target">123 124 <!-- Status bar -->125 <div class="statusbar">126 <div>7:53</div>127 <div class="status-icons">128 <!-- battery -->129 <svg width="40" height="40">130 <rect x="6" y="10" width="26" height="20" rx="3" stroke="#555" fill="none" stroke-width="3"/>131 <rect x="33" y="16" width="4" height="8" fill="#555"/>132 <rect x="8" y="12" width="22" height="16" fill="#777"/>133 </svg>134 <span style="font-size:30px;">93%</span>135 </div>136 </div>137 138 <!-- Cancel -->139 <div class="top-action">Cancel</div>140 141 <!-- Header with route and meta -->142 <div class="header">143 <div class="route-title">Sao Paulo-Guarulhos - Beijing</div>144 <div class="route-meta">145 <!-- calendar icon -->146 <svg width="36" height="36">147 <rect x="5" y="9" width="26" height="22" stroke="#777" fill="none" rx="3"/>148 <line x1="5" y1="15" x2="31" y2="15" stroke="#777"/>149 <line x1="12" y1="5" x2="12" y2="11" stroke="#777" stroke-width="3"/>150 <line x1="24" y1="5" x2="24" y2="11" stroke="#777" stroke-width="3"/>151 </svg>152 <span>Nov 20</span>153 <!-- person icon -->154 <svg width="36" height="36">155 <circle cx="18" cy="12" r="7" fill="#777"/>156 <rect x="8" y="22" width="20" height="10" rx="5" fill="#777"/>157 </svg>158 <span>1</span>159 <div class="header-right">160 <!-- search icon -->161 <svg width="44" height="44">162 <circle cx="18" cy="18" r="12" stroke="#555" fill="none" stroke-width="4"/>163 <line x1="28" y1="28" x2="40" y2="40" stroke="#555" stroke-width="4"/>164 </svg>165 </div>166 </div>167 </div>168 169 <div class="divider-dotted"></div>170 171 <!-- Filter info -->172 <div class="section header-line">173 <div class="filter-info">174 Filter by: : <span class="muted">18 of 165 flights</span>175 <span class="reset-link">Reset filter</span>176 </div>177 <!-- close icon -->178 <svg width="44" height="44">179 <line x1="10" y1="10" x2="34" y2="34" stroke="#777" stroke-width="4"/>180 <line x1="34" y1="10" x2="10" y2="34" stroke="#777" stroke-width="4"/>181 </svg>182 </div>183 184 <!-- Number of stops (expanded) -->185 <div class="collapsible">186 <div class="section-title">Number of stops <span class="reset-link">Reset filter</span></div>187 <!-- chevron up -->188 <svg class="chevron" viewBox="0 0 44 44">189 <polyline points="10,28 22,16 34,28" fill="none" stroke="#6B6B6B" stroke-width="4"/>190 </svg>191 </div>192 193 <div class="segmented" style="margin-top:10px;">194 <div class="segment">Nonstop flights</div>195 <div class="segment active">Maximum one stop</div>196 <div class="segment">All</div>197 </div>198 199 <!-- Price -->200 <div class="collapsible">201 <div class="section-title">Price</div>202 <svg class="chevron" viewBox="0 0 44 44">203 <polyline points="10,16 22,28 34,16" fill="none" stroke="#6B6B6B" stroke-width="4"/>204 </svg>205 </div>206 207 <!-- Airlines -->208 <div class="collapsible">209 <div class="section-title">Airlines</div>210 <svg class="chevron" viewBox="0 0 44 44">211 <polyline points="10,16 22,28 34,16" fill="none" stroke="#6B6B6B" stroke-width="4"/>212 </svg>213 </div>214 215 <!-- Route -->216 <div class="collapsible">217 <div class="section-title">Sao Paulo – Beijing</div>218 <svg class="chevron" viewBox="0 0 44 44">219 <polyline points="10,16 22,28 34,16" fill="none" stroke="#6B6B6B" stroke-width="4"/>220 </svg>221 </div>222 223 <!-- Travel time -->224 <div class="collapsible">225 <div class="section-title">Travel time</div>226 <svg class="chevron" viewBox="0 0 44 44">227 <polyline points="10,16 22,28 34,16" fill="none" stroke="#6B6B6B" stroke-width="4"/>228 </svg>229 </div>230 231 <!-- Clear / Done buttons -->232 <div class="actions">233 <div class="btn clear">Clear</div>234 <div class="btn done">Done</div>235 </div>236 237 <div class="divider-dotted"></div>238 239 <!-- Offers row -->240 <div class="offers">241 <div class="offer">242 <div>Recommen…</div>243 <div class="price">US$6,470…</div>244 </div>245 <div class="offer">246 <div>Promotion</div>247 <div class="price">US$912.52</div>248 </div>249 <div class="offer">250 <div>Cheapest</div>251 <div class="price">US$912.52</div>252 </div>253 <div class="offer">254 <div>Shortest</div>255 <div class="price">US$1,701…</div>256 </div>257 </div>258 259 <!-- Flight panel -->260 <div class="panel">261 <div class="panel-title">Longer stay</div>262 <div class="flight-card">263 <div class="left-info">264 <span class="badge">Premium</span>265 <div class="airline-logo">[IMG: Airline logo]</div>266 <div class="time-block">267 <div class="time">01:25 AM</div>268 <div class="airport">GRU Sao Paulo-Guarulhos<br/>Sao Paulo</div>269 </div>270 </div>271 272 <div>273 <div class="duration">274 <span>24h 30min</span>275 <svg class="arrowline" viewBox="0 0 140 24">276 <line x1="4" y1="12" x2="120" y2="12" stroke="#777" stroke-width="3"/>277 <polygon points="120,6 138,12 120,18" fill="#777"/>278 </svg>279 </div>280 <div class="stop">1 stop</div>281 </div>282 283 <div class="time-block arr-right">284 <div class="time">12:55 PM <span style="font-size:32px;">+1</span></div>285 <div class="airport">PEK Beijing<br/>Beijing</div>286 </div>287 288 <div>289 <!-- simple scroll arrows placeholder -->290 <svg width="44" height="80" viewBox="0 0 44 80">291 <polyline points="12,24 22,12 32,24" fill="none" stroke="#777" stroke-width="4"/>292 <polyline points="12,56 22,68 32,56" fill="none" stroke="#777" stroke-width="4"/>293 </svg>294 </div>295 </div>296 </div>297 298 <!-- Bottom navigation -->299 <div class="bottom-nav">300 <div class="nav-item">301 <svg width="50" height="50" viewBox="0 0 44 44">302 <path d="M6 22 L22 8 L38 22" fill="none" stroke="#C9C9C9" stroke-width="3"/>303 <rect x="12" y="22" width="20" height="14" fill="none" stroke="#C9C9C9" stroke-width="3"/>304 </svg>305 <div>Home</div>306 </div>307 <div class="nav-item">308 <svg width="50" height="50" viewBox="0 0 44 44">309 <rect x="8" y="12" width="28" height="20" rx="3" stroke="#C9C9C9" fill="none" stroke-width="3"/>310 <circle cx="12" cy="22" r="3" fill="#C9C9C9"/>311 <circle cx="32" cy="22" r="3" fill="#C9C9C9"/>312 </svg>313 <div>My trips</div>314 </div>315 <div class="nav-item active">316 <svg width="50" height="50" viewBox="0 0 44 44">317 <path d="M6 24 L38 24" stroke="#53D5FF" stroke-width="4"/>318 <path d="M14 12 L20 24 L14 36" stroke="#53D5FF" stroke-width="4" fill="none"/>319 </svg>320 <div>Book</div>321 </div>322 <div class="nav-item">323 <svg width="50" height="50" viewBox="0 0 44 44">324 <circle cx="12" cy="22" r="4" fill="#C9C9C9"/>325 <circle cx="22" cy="22" r="4" fill="#C9C9C9"/>326 <circle cx="32" cy="22" r="4" fill="#C9C9C9"/>327 </svg>328 <div>More</div>329 </div>330 </div>331 332 <div class="gesture"></div>333</div>334</body>335</html>