GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Flight Results UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #f7f9ff; border-radius: 28px; box-shadow: 0 20px 50px rgba(0,0,0,0.15);12 color: #1e2a3a;13 }14 .status-bar {15 height: 96px; display: flex; align-items: center; justify-content: space-between;16 padding: 0 32px; color: #fff; font-weight: 600; font-size: 34px;17 }18 .header {19 position: relative; background: linear-gradient(180deg,#2f6af6 0%, #2149d8 100%);20 height: 520px; color: #fff; padding-top: 0;21 }22 .status-icons { display: flex; align-items: center; gap: 28px; opacity: 0.95; }23 .chip-bar { display: flex; gap: 18px; margin-top: 24px; }24 .chip {25 padding: 22px 28px; border-radius: 18px; background: rgba(255,255,255,0.14);26 color: #eaf0ff; font-size: 30px; border: 1px solid rgba(255,255,255,0.25);27 }28 .chip.selected { background: rgba(255,255,255,0.28); border-color: rgba(255,255,255,0.45); color: #ffffff; }29 .top-row {30 display: flex; align-items: center; justify-content: space-between; padding: 12px 32px;31 }32 .back-and-title { display: flex; align-items: center; gap: 28px; }33 .back-btn {34 width: 80px; height: 80px; border-radius: 40px; background: rgba(255,255,255,0.15);35 display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.35);36 }37 .title-area { line-height: 1.2; }38 .title-area .title { font-size: 44px; font-weight: 700; }39 .title-area .subtitle { font-size: 36px; opacity: 0.9; margin-top: 6px; display: flex; align-items: center; gap: 12px; }40 .right-actions { display: flex; align-items: center; gap: 40px; font-size: 30px; opacity: 0.95; }41 .vertical-days {42 position: absolute; left: 18px; top: 190px; transform: rotate(-90deg);43 color: rgba(255,255,255,0.8); font-size: 30px; letter-spacing: 1px;44 }45 .tab-row { display: flex; gap: 18px; margin: 28px 32px 0 140px; }46 .tab {47 padding: 22px 28px; border-radius: 18px; background: rgba(255,255,255,0.16);48 color: #eaf0ff; font-size: 30px; border: 1px solid rgba(255,255,255,0.28);49 display: flex; flex-direction: column; gap: 6px;50 }51 .tab b { color: #ffffff; }52 .tab.highlight { background: rgba(255,255,255,0.35); color: #fff; }53 .promo-card {54 position: relative; margin: -28px 32px 0 32px; background: #fff2ed;55 border-radius: 28px; border: 1px solid #ffe1d7; padding: 28px; color: #2b2b2b;56 }57 .promo-inner { display: flex; align-items: center; gap: 22px; font-size: 34px; font-weight: 600; }58 .promo-icon {59 width: 72px; height: 72px; border-radius: 20px; background: #ff7fa2;60 display: flex; align-items: center; justify-content: center; color: #fff;61 }62 .filters { display: flex; gap: 18px; margin: 26px 32px; }63 .filter-chip {64 background: #ffffff; border: 1px solid #e3e8f3; color: #3a4660; border-radius: 20px;65 padding: 22px 28px; font-size: 30px; box-shadow: 0 4px 8px rgba(31,69,167,0.06);66 }67 .filter-chip.primary { background: #e8f0ff; border-color: #cfe0ff; color: #1f49a7; font-weight: 700; }68 .section-title { margin: 18px 32px; }69 .section-title .h { font-size: 44px; font-weight: 800; color: #2a3856; }70 .section-title .sub { font-size: 30px; color: #7a869a; margin-top: 8px; }71 .card {72 margin: 22px 32px; background: #ffffff; border: 1px solid #e5ebf5; border-radius: 26px;73 padding: 28px; display: grid; grid-template-columns: 120px 1fr 220px; align-items: start; gap: 26px;74 box-shadow: 0 8px 16px rgba(32,64,154,0.08);75 }76 .logo-box {77 width: 96px; height: 96px; background: #E0E0E0; border: 1px solid #BDBDBD;78 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px; border-radius: 16px;79 }80 .times { display: grid; grid-template-columns: 1fr 140px 1fr; align-items: center; }81 .time-big { font-size: 54px; font-weight: 800; color: #2a3856; }82 .arrow {83 display: flex; align-items: center; justify-content: center; position: relative;84 }85 .duration {86 position: absolute; top: -20px; font-size: 26px; color: #8a95a8;87 }88 .route-small { margin-top: 10px; font-size: 30px; color: #7d8a9d; }89 .airline { margin-top: 6px; font-size: 30px; color: #7a869a; }90 .tags { display: flex; gap: 14px; margin-top: 18px; flex-wrap: wrap; }91 .tag {92 background: #e7f8f7; color: #1c9f93; font-size: 28px; border: 1px solid #c8eeea;93 padding: 14px 18px; border-radius: 16px; display: inline-flex; align-items: center; gap: 10px;94 }95 .price-col { text-align: right; }96 .price { font-size: 54px; font-weight: 800; color: #2a3856; }97 .strike { font-size: 30px; color: #97a4b7; text-decoration: line-through; margin-top: 8px; }98 .home-indicator {99 position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);100 width: 300px; height: 12px; background: #0f0f12; border-radius: 6px; opacity: 0.85;101 }102 /* simple svg icons color helpers */103 .icon { width: 40px; height: 40px; }104</style>105</head>106<body>107<div id="render-target">108 <div class="header">109 <div class="status-bar">110 <div class="status-icons">111 <span>8:18</span>112 <span style="background:#fff; color:#2149d8; border-radius:8px; padding:4px 10px; font-size:28px;">LR</span>113 <span style="font-weight:800;">N</span>114 <span style="background:#fff; width:40px; height:40px; border-radius:20px; display:inline-block;"></span>115 <span>•</span>116 </div>117 <div class="status-icons">118 <span style="display:flex; align-items:center; gap:10px;">119 <svg class="icon" viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="10"/></svg>120 <svg class="icon" viewBox="0 0 24 24" fill="#fff"><path d="M4 18h16V6H4v12zm2-2V8h12v8H6z"/></svg>121 <span>100%</span>122 </span>123 </div>124 </div>125 126 <div class="top-row">127 <div class="back-and-title">128 <div class="back-btn">129 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">130 <path d="M15 18l-6-6 6-6" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>131 </svg>132 </div>133 <div class="title-area">134 <div class="title">Depart: Amsterdam → Paris(CDG)</div>135 <div class="subtitle">Oct 25 <svg width="22" height="22" viewBox="0 0 24 24" fill="none" style="margin-top:2px;"><path d="M6 9l6 6 6-6" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg></div>136 </div>137 </div>138 <div class="right-actions">139 <span style="display:flex; align-items:center; gap:10px;">140 <svg width="36" height="36" viewBox="0 0 24 24" fill="none"><path d="M12 3v3M12 18v3M4.2 6l2.1 2.1M17.7 17.7l2.1 2.1M3 12h3M18 12h3M6.3 17.7L4.2 19.8M19.8 4.2l-2.1 2.1" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>141 Price Alerts142 </span>143 <span style="display:flex; align-items:center; gap:10px;">144 <svg width="36" height="36" viewBox="0 0 24 24" fill="none"><path d="M12 3l9 6-9 6-9-6 9-6zm0 12l9 6-9 6-9-6 9-6z" stroke="#fff" stroke-width="1.5"/></svg>145 USD146 </span>147 </div>148 </div>149 150 <div class="vertical-days">5 days</div>151 152 <div class="tab-row">153 <div class="tab"><span>t 27</span><span>View</span></div>154 <div class="tab"><b>Oct 24 - Oct 28</b><span>View</span></div>155 <div class="tab highlight"><b>Oct 25 - Oct 29</b><span>$ 263</span></div>156 <div class="tab"><b>Oct 26 - Oct 30</b><span>View</span></div>157 <div class="tab"><span style="display:flex; align-items:center; gap:10px;"><svg width="32" height="32" viewBox="0 0 24 24" fill="none"><path d="M4 17h4V7H4v10zm6 0h4V10h-4v7zm6 0h4V4h-4v13z" fill="#fff"/></svg></span></div>158 </div>159 </div>160 161 <div class="promo-card">162 <div class="promo-inner">163 <div class="promo-icon">164 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">165 <path d="M2 14l20-4-6 6-6-2-4 4z" fill="#fff"/>166 </svg>167 </div>168 <div>Book flight + hotel - save <span style="color:#ff3b69;">6%</span> on average!</div>169 </div>170 </div>171 172 <div class="filters">173 <div class="filter-chip">Filters <svg width="22" height="22" viewBox="0 0 24 24" fill="none" style="margin-left:8px;"><path d="M6 9l6 6 6-6" stroke="#3a4660" stroke-width="2" stroke-linecap="round"/></svg></div>174 <div class="filter-chip primary">Nonstop First</div>175 <div class="filter-chip">Lowest Price</div>176 <div class="filter-chip">Sort By</div>177 </div>178 179 <div class="section-title">180 <div class="h">Depart to Paris</div>181 <div class="sub">Round-trip price per passenger, taxes and fees included</div>182 </div>183 184 <!-- Card 1 -->185 <div class="card">186 <div class="logo-box">[IMG: KLM logo]</div>187 <div>188 <div class="times">189 <div class="time-big">06:35<br><span style="font-size:28px; color:#7d8a9d;">AMS</span></div>190 <div class="arrow">191 <div class="duration">1h 20m</div>192 <svg width="120" height="24" viewBox="0 0 120 24" fill="none">193 <path d="M2 12h108" stroke="#cfd7e6" stroke-width="2" stroke-linecap="round"/>194 <path d="M110 6l8 6-8 6" fill="#cfd7e6"/>195 </svg>196 </div>197 <div class="time-big">07:55<br><span style="font-size:28px; color:#7d8a9d;">CDG T2F</span></div>198 </div>199 <div class="airline">KLM Royal Dutch Airlines</div>200 <div class="tags">201 <div class="tag">202 <svg width="26" height="26" viewBox="0 0 24 24" fill="none"><path d="M4 7h16v12H4V7zm4-3h8v3H8V4z" stroke="#1c9f93" stroke-width="2"/></svg>203 Carry-on baggage included204 </div>205 </div>206 </div>207 <div class="price-col">208 <div class="price">$ 391</div>209 <div class="strike">$ 401</div>210 </div>211 </div>212 213 <!-- Card 2 -->214 <div class="card">215 <div class="logo-box">[IMG: AF logo]</div>216 <div>217 <div class="times">218 <div class="time-big">06:35<br><span style="font-size:28px; color:#7d8a9d;">AMS</span></div>219 <div class="arrow">220 <div class="duration">1h 20m</div>221 <svg width="120" height="24" viewBox="0 0 120 24" fill="none">222 <path d="M2 12h108" stroke="#cfd7e6" stroke-width="2" stroke-linecap="round"/>223 <path d="M110 6l8 6-8 6" fill="#cfd7e6"/>224 </svg>225 </div>226 <div class="time-big">07:55<br><span style="font-size:28px; color:#7d8a9d;">CDG T2F</span></div>227 </div>228 <div class="airline">Air France (Operated by KLM Royal Dutch Airlines)</div>229 <div class="tags">230 <div class="tag">231 <svg width="26" height="26" viewBox="0 0 24 24" fill="none"><path d="M4 7h16v12H4V7zm4-3h8v3H8V4z" stroke="#1c9f93" stroke-width="2"/></svg>232 Carry-on baggage included233 </div>234 </div>235 </div>236 <div class="price-col">237 <div class="price">$ 391</div>238 <div class="strike">$ 401</div>239 </div>240 </div>241 242 <!-- Card 3 -->243 <div class="card">244 <div class="logo-box">[IMG: KLM logo]</div>245 <div>246 <div class="times">247 <div class="time-big">12:25<br><span style="font-size:28px; color:#7d8a9d;">AMS</span></div>248 <div class="arrow">249 <div class="duration">1h 15m</div>250 <svg width="120" height="24" viewBox="0 0 120 24" fill="none">251 <path d="M2 12h108" stroke="#cfd7e6" stroke-width="2" stroke-linecap="round"/>252 <path d="M110 6l8 6-8 6" fill="#cfd7e6"/>253 </svg>254 </div>255 <div class="time-big">13:40<br><span style="font-size:28px; color:#7d8a9d;">CDG T2F</span></div>256 </div>257 <div class="airline">KLM Royal Dutch Airlines</div>258 <div class="tags">259 <div class="tag">260 <svg width="26" height="26" viewBox="0 0 24 24" fill="none"><path d="M4 7h16v12H4V7zm4-3h8v3H8V4z" stroke="#1c9f93" stroke-width="2"/></svg>261 Carry-on baggage included262 </div>263 <div class="tag" style="background:#eefaf0; border-color:#d6f0d8; color:#2aa84a;">264 <svg width="26" height="26" viewBox="0 0 24 24" fill="none"><path d="M12 2l7 20-7-4-7 4 7-20z" fill="#2aa84a"/></svg>265 −7% CO₂ emissions266 </div>267 </div>268 </div>269 <div class="price-col">270 <div class="price">$ 391</div>271 <div class="strike">$ 401</div>272 </div>273 </div>274 275 <!-- Card 4 -->276 <div class="card">277 <div class="logo-box">[IMG: AF logo]</div>278 <div>279 <div class="times">280 <div class="time-big">12:25<br><span style="font-size:28px; color:#7d8a9d;">AMS</span></div>281 <div class="arrow">282 <div class="duration">1h 15m</div>283 <svg width="120" height="24" viewBox="0 0 120 24" fill="none">284 <path d="M2 12h108" stroke="#cfd7e6" stroke-width="2" stroke-linecap="round"/>285 <path d="M110 6l8 6-8 6" fill="#cfd7e6"/>286 </svg>287 </div>288 <div class="time-big">13:40<br><span style="font-size:28px; color:#7d8a9d;">CDG T2F</span></div>289 </div>290 <div class="airline">Air France (Operated by KLM Royal Dutch Airlines)</div>291 <div class="tags">292 <div class="tag">293 <svg width="26" height="26" viewBox="0 0 24 24" fill="none"><path d="M4 7h16v12H4V7zm4-3h8v3H8V4z" stroke="#1c9f93" stroke-width="2"/></svg>294 Carry-on baggage included295 </div>296 </div>297 </div>298 <div class="price-col">299 <div class="price">$ 391</div>300 <div class="strike">$ 401</div>301 </div>302 </div>303 304 <!-- Card 5 -->305 <div class="card" style="margin-bottom: 120px;">306 <div class="logo-box">[IMG: AF logo]</div>307 <div>308 <div class="times">309 <div class="time-big">14:00<br><span style="font-size:28px; color:#7d8a9d;">AMS</span></div>310 <div class="arrow">311 <div class="duration">1h 25m</div>312 <svg width="120" height="24" viewBox="0 0 120 24" fill="none">313 <path d="M2 12h108" stroke="#cfd7e6" stroke-width="2" stroke-linecap="round"/>314 <path d="M110 6l8 6-8 6" fill="#cfd7e6"/>315 </svg>316 </div>317 <div class="time-big">15:25<br><span style="font-size:28px; color:#7d8a9d;">CDG T2F</span></div>318 </div>319 <div class="airline">Air France (Operated by KLM Royal Dutch Airlines)</div>320 <div class="tags">321 <div class="tag">322 <svg width="26" height="26" viewBox="0 0 24 24" fill="none"><path d="M4 7h16v12H4V7zm4-3h8v3H8V4z" stroke="#1c9f93" stroke-width="2"/></svg>323 Carry-on baggage included324 </div>325 </div>326 </div>327 <div class="price-col">328 <div class="price">$ 391</div>329 <div class="strike">$ 401</div>330 </div>331 </div>332 333 <div class="home-indicator"></div>334</div>335</body>336</html>