GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Flight Listing 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; position:relative; overflow:hidden;10 background:#EFEFEF; border-radius:26px; box-shadow:0 6px 22px rgba(0,0,0,0.18);11 color:#333;12 }13 14 /* Top system/status area */15 .status-area { position:absolute; top:0; left:0; width:100%; height:180px; background:#DADADA; }16 .top-action { position:absolute; top:150px; right:40px; font-size:40px; color:#1e88e5; font-weight:600; }17 18 /* Route header */19 .route-header {20 position:absolute; top:190px; left:0; width:100%;21 background:#fff; padding:32px 40px; box-shadow:0 2px 0 rgba(0,0,0,0.06);22 }23 .route-title { font-size:46px; font-weight:700; margin:0 0 22px 0; }24 .route-meta { display:flex; align-items:center; gap:26px; color:#666; font-size:34px; }25 .meta-item { display:flex; align-items:center; gap:16px; }26 .route-header .search-icon { margin-left:auto; }27 .route-header svg { width:40px; height:40px; fill:#757575; }28 29 /* Filter bar */30 .filter-bar {31 position:absolute; top:330px; left:0; width:100%; padding:28px 40px;32 border-top:1px solid #ddd; border-bottom:1px solid #ddd; background:#f6f6f6;33 display:flex; align-items:center; gap:18px; font-size:36px;34 }35 .filter-bar b { font-weight:800; }36 .filter-bar .reset { color:#1e88e5; font-weight:700; margin-left:14px; }37 .filter-bar .right { margin-left:auto; }38 .filter-bar .right svg { width:44px; height:44px; }39 40 /* Sort tabs */41 .tabs { position:absolute; top:430px; left:0; width:100%; padding:24px 28px; }42 .tab-row { display:flex; gap:0; }43 .tab {44 flex:1; background:#fff; border:1px solid #d2d2d2; padding:24px;45 font-size:32px; border-right:none; height:140px; display:flex; flex-direction:column; justify-content:center;46 }47 .tab:last-child { border-right:1px solid #d2d2d2; }48 .tab.selected { border:3px solid #2e7de0; border-radius:18px; }49 .tab b { display:block; font-size:34px; }50 .tab span { color:#222; font-weight:700; }51 52 /* Cards */53 .card {54 position:absolute; left:20px; width:1040px; background:#F3F3F3; border-radius:20px;55 box-shadow:0 1px 0 rgba(0,0,0,0.05);56 }57 .card.header { padding:26px 28px; font-size:40px; font-weight:800; color:#333; }58 .card-inner {59 background:#fff; margin:0 16px 16px 16px; border-radius:16px; padding:24px 28px;60 box-shadow:0 1px 0 rgba(0,0,0,0.05);61 }62 .badge {63 display:inline-flex; align-items:center; gap:12px; padding:12px 20px;64 background:#ECECEC; border-radius:20px; font-size:32px; color:#666; font-weight:700;65 }66 .flight-row {67 display:flex; align-items:flex-start; margin-top:18px;68 }69 .left-info, .right-info { width:50%; }70 .time { font-size:72px; font-weight:800; }71 .airport { font-size:34px; font-weight:800; margin-top:10px; }72 .city { font-size:30px; color:#777; }73 .plus-badge {74 display:inline-block; padding:6px 12px; background:#ECECEC; border-radius:10px; font-size:28px; font-weight:800; margin-left:12px;75 }76 .airline-logo {77 width:140px; height:70px; background:#E0E0E0; border:1px solid #BDBDBD;78 display:flex; align-items:center; justify-content:center; color:#757575; font-size:28px; border-radius:8px; margin-top:8px;79 }80 .duration { display:flex; align-items:center; gap:18px; margin-top:16px; color:#666; font-size:34px; }81 .divider-dashed { border-top:1px dashed #CCC; margin:22px 0; }82 .baggage { display:flex; align-items:center; gap:16px; color:#666; font-size:32px; margin-top:16px; }83 .alert {84 display:inline-block; background:#f39c12; color:#fff; padding:16px 26px; border-radius:32px;85 font-size:36px; font-weight:800; margin:12px 0 18px 0;86 }87 .price-row { display:flex; align-items:center; justify-content:space-between; padding:18px 0; }88 .price-row .label { font-size:36px; color:#555; }89 .price-row .price { font-size:48px; font-weight:800; }90 .book-btn {91 font-size:40px; padding:20px 38px; border-radius:18px; border:2px solid #333; background:#fff; font-weight:800;92 }93 .book-btn.primary { background:#3ec2ff; border:none; color:#fff; }94 .helper { color:#9aa2aa; font-size:28px; margin-left:8px; }95 96 /* Bottom navigation */97 .bottom-nav {98 position:absolute; bottom:0; left:0; width:100%; height:190px; background:#0b0b0b; color:#fff;99 display:flex; align-items:center; justify-content:space-around;100 box-shadow:0 -4px 10px rgba(0,0,0,0.2);101 }102 .nav-item { display:flex; flex-direction:column; align-items:center; gap:12px; font-size:32px; }103 .nav-item svg { width:56px; height:56px; fill:#fff; }104 .nav-item.active svg { fill:#23a8ff; }105 .home-strip {106 position:absolute; bottom:192px; left:50%; transform:translateX(-50%);107 width:300px; height:14px; background:#fff; border-radius:8px; opacity:0.9;108 }109 110 /* Icon helpers */111 .icon { width:40px; height:40px; }112</style>113</head>114<body>115<div id="render-target">116 117 <div class="status-area"></div>118 <div class="top-action">Cancel</div>119 120 <!-- Route header -->121 <div class="route-header">122 <h2 class="route-title">Sao Paulo-Guarulhos - Beijing</h2>123 <div class="route-meta">124 <div class="meta-item">125 <svg viewBox="0 0 24 24"><path d="M6 2h12v2H6V2zm12 4H6C4.9 6 4 6.9 4 8v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H6V10h12v8zM8 12h2v2H8v-2z"/></svg>126 <span>Nov 20</span>127 </div>128 <div class="meta-item">129 <svg viewBox="0 0 24 24"><path d="M12 12c2.8 0 5-2.2 5-5s-2.2-5-5-5-5 2.2-5 5 2.2 5 5 5zm0 2c-4.4 0-8 2.2-8 5v3h16v-3c0-2.8-3.6-5-8-5z"/></svg>130 <span>1</span>131 </div>132 <svg class="search-icon" viewBox="0 0 24 24"><path d="M15.5 14h-.8l-.3-.3c1.1-1.3 1.8-3 1.8-4.7C16.2 5 13.2 2 9.6 2S3 5 3 8.6s3 6.6 6.6 6.6c1.7 0 3.4-.6 4.7-1.8l.3.3v.8l5.1 5.1 1.5-1.5L15.5 14zm-5.9 0C6.3 14 4.2 11.9 4.2 9.6S6.3 5.2 8.6 5.2s4.4 2.1 4.4 4.4-2.1 4.4-4.4 4.4z"/></svg>133 </div>134 </div>135 136 <!-- Filter bar -->137 <div class="filter-bar">138 <b>Filter by:</b>139 <span>18 of 165 flights</span>140 <span class="reset">✖ Reset filter</span>141 <div class="right">142 <svg viewBox="0 0 24 24"><path d="M5 5h14v2H5V5zm0 6h10v2H5v-2zm0 6h6v2H5v-2z"/></svg>143 </div>144 </div>145 146 <!-- Tabs -->147 <div class="tabs">148 <div class="tab-row">149 <div class="tab selected">150 <b>Recommen...</b><span>US$6,470...</span>151 </div>152 <div class="tab">153 <b>Promotion</b><span>US$912.52</span>154 </div>155 <div class="tab">156 <b>Cheapest</b><span>US$912.52</span>157 </div>158 <div class="tab">159 <b>Shortest</b><span>US$1,701...</span>160 </div>161 </div>162 </div>163 164 <!-- Card 1: Longer stay -->165 <div class="card" style="top:680px;">166 <div class="card header">Longer stay</div>167 <div class="card-inner">168 <div class="badge">169 <svg viewBox="0 0 24 24" class="icon"><path d="M12 2l3 6 6 .9-4.4 4.3 1 6L12 16l-5.6 3.2 1-6L3 8.9 9 8z"/></svg>170 Premium171 </div>172 173 <div class="flight-row">174 <div class="left-info">175 <div class="time">01:25 AM</div>176 <div class="airport">GRU Sao Paulo-Guarulhos</div>177 <div class="city">Sao Paulo</div>178 <div class="airline-logo">[IMG: Emirates logo]</div>179 <div class="duration">180 <span>24h 30min</span>181 <svg viewBox="0 0 24 24"><path d="M4 12h14l-4-4v8l4-4H4z"/></svg>182 <span>1 stop</span>183 </div>184 <div class="baggage">185 <svg viewBox="0 0 24 24"><path d="M9 7V5h6v2h3c1.1 0 2 .9 2 2v10H4V9c0-1.1.9-2 2-2h3zm0 2H6v8h12V9h-3v2H9V9z"/></svg>186 <span>Baggage included: 2 × 23kg</span>187 </div>188 </div>189 190 <div class="right-info">191 <div class="time">12:55 PM <span class="plus-badge">+1</span></div>192 <div class="airport">PEK Beijing</div>193 <div class="city">Beijing</div>194 <div class="duration" style="margin-top:22px;">195 <!-- vertical arrows indicator -->196 <svg viewBox="0 0 24 24"><path d="M12 4l4 4h-3v8h3l-4 4-4-4h3V8H8l4-4z"/></svg>197 <span style="color:#888;"> </span>198 </div>199 </div>200 </div>201 202 <div class="divider-dashed"></div>203 204 <div class="alert">Hurry! Only 7 seats at this price!</div>205 206 <div class="price-row">207 <div>208 <div class="label">Standard ticket</div>209 <div class="price">US$6,470.86 <span class="helper">Price per adult ⓘ</span></div>210 </div>211 <button class="book-btn">Book</button>212 </div>213 214 <div class="divider-dashed"></div>215 216 <div class="price-row">217 <div>218 <div class="label">Flexible Ticket</div>219 <div class="price">US$7,635.61 <span class="helper">Price per adult ⓘ</span></div>220 </div>221 <button class="book-btn primary">Book</button>222 </div>223 </div>224 </div>225 226 <!-- Card 2: Best Value -->227 <div class="card" style="top:1350px;">228 <div class="card header">Best Value</div>229 <div class="card-inner">230 <div class="badge">231 <svg viewBox="0 0 24 24" class="icon"><path d="M12 2l3 6 6 .9-4.4 4.3 1 6L12 16l-5.6 3.2 1-6L3 8.9 9 8z"/></svg>232 Economy233 </div>234 235 <div class="flight-row">236 <div class="left-info">237 <div class="time">01:30 AM</div>238 <div class="airport">GRU Sao Paulo-Guarulhos</div>239 <div class="city">Sao Paulo</div>240 <div class="airline-logo">[IMG: Airline logo]</div>241 <div class="duration">242 <span>28h 40min</span>243 <svg viewBox="0 0 24 24"><path d="M4 12h14l-4-4v8l4-4H4z"/></svg>244 <span>1 stop</span>245 </div>246 <div class="baggage">247 <svg viewBox="0 0 24 24"><path d="M9 7V5h6v2h3c1.1 0 2 .9 2 2v10H4V9c0-1.1.9-2 2-2h3zm0 2H6v8h12V9h-3v2H9V9z"/></svg>248 <span>Baggage included: 2 × 23kg</span>249 </div>250 </div>251 252 <div class="right-info">253 <div class="time">05:10 PM <span class="plus-badge">+1</span></div>254 <div class="airport">PEK Beijing</div>255 <div class="city">Beijing</div>256 <div class="duration" style="margin-top:22px;">257 <svg viewBox="0 0 24 24"><path d="M12 4l4 4h-3v8h3l-4 4-4-4h3V8H8l4-4z"/></svg>258 </div>259 </div>260 </div>261 262 <div class="divider-dashed"></div>263 264 <div class="alert">Hurry! Only 7 seats at this price!</div>265 266 <div class="price-row">267 <div>268 <div class="label">Standard ticket</div>269 <div class="price">US$912.52 <span class="helper">Price per adult ⓘ</span></div>270 </div>271 <button class="book-btn">Book</button>272 </div>273 </div>274 </div>275 276 <!-- Bottom navigation -->277 <div class="home-strip"></div>278 <div class="bottom-nav">279 <div class="nav-item">280 <svg viewBox="0 0 24 24"><path d="M12 3l9 8h-3v9h-5v-6H11v6H6v-9H3l9-8z"/></svg>281 <span>Home</span>282 </div>283 <div class="nav-item">284 <svg viewBox="0 0 24 24"><path d="M17 3H7c-1.1 0-2 .9-2 2v14l7-3 7 3V5c0-1.1-.9-2-2-2z"/></svg>285 <span>My trips</span>286 </div>287 <div class="nav-item active">288 <svg viewBox="0 0 24 24"><path d="M2 16l20-5-1-2-9 2-4-6-2 1 3 6-6 1 1 3z"/></svg>289 <span>Book</span>290 </div>291 <div class="nav-item">292 <svg viewBox="0 0 24 24"><path d="M12 8c2.2 0 4-1.8 4-4S14.2 0 12 0 8 1.8 8 4s1.8 4 4 4zm0 2c-3.3 0-6 1.6-6 3.5V16h12v-2.5C18 11.6 15.3 10 12 10z"/></svg>293 <span>More</span>294 </div>295 </div>296 297</div>298</body>299</html>