GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Flight Results UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; color: #1f2d3d; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #F3F6F9;12 }13 14 /* Top status bar */15 .status-bar {16 height: 86px;17 display: flex; align-items: center; justify-content: space-between;18 padding: 0 36px; color: #475a6b; font-size: 28px;19 }20 .status-right { display: flex; gap: 26px; align-items: center; }21 .sb-dot { width: 8px; height: 8px; background: #9aa7b2; border-radius: 50%; display: inline-block; margin: 0 8px; }22 23 /* Header */24 .header {25 background: #fff;26 padding: 24px 32px 18px 24px;27 box-shadow: 0 2px 0 rgba(16,24,40,0.06);28 }29 .header-top {30 display: flex; align-items: center; gap: 18px; margin-bottom: 8px;31 }32 .icon-btn {33 width: 72px; height: 72px; border-radius: 18px; border: none; background: transparent; display: flex; align-items: center; justify-content: center; padding: 0; cursor: default;34 }35 .title {36 font-weight: 800; font-size: 44px; line-height: 1.2; color: #0f172a;37 }38 .subtitle {39 margin-top: 6px; font-size: 30px; color: #637587;40 }41 .header-actions { margin-left: auto; }42 .calendar-btn { width: 72px; height: 72px; border-radius: 18px; background: #F3F6F9; display: flex; align-items: center; justify-content: center; }43 44 /* Chip bar */45 .chip-bar {46 background: #fff; padding: 18px 20px 22px; display: flex; gap: 14px; flex-wrap: nowrap; overflow: hidden;47 border-bottom: 1px solid #E5EAF0;48 }49 .chip {50 display: inline-flex; align-items: center; gap: 12px;51 padding: 16px 22px; border-radius: 999px; font-size: 28px; color: #334155;52 background: #F1F5F9; border: 1px solid #D7DFE7;53 white-space: nowrap;54 }55 .chip svg { width: 28px; height: 28px; }56 .chip.blue {57 background: #E8F1FF; color: #0B63E5; border-color: #C9DBFF;58 }59 .chip .tag-x {60 display: inline-block; width: 30px; height: 30px; border-radius: 50%; background: #0B63E5; color: #fff;61 font-size: 22px; line-height: 30px; text-align: center;62 }63 64 /* Details strip */65 .details-strip {66 background: #fff; display: flex; align-items: center; gap: 24px;67 padding: 26px 28px; border-bottom: 1px solid #E5EAF0;68 }69 .details-strip .ds-item {70 display: inline-flex; align-items: center; gap: 12px; color: #374151; font-size: 28px;71 }72 .details-strip .edit { margin-left: auto; color: #0B8F4D; font-size: 28px; }73 74 /* Section header */75 .results-meta {76 padding: 24px 32px; color: #52647a; font-size: 28px;77 }78 .results-meta b { color: #334155; }79 80 /* Cards */81 .card {82 margin: 0 24px 24px; background: #fff; border-radius: 28px;83 box-shadow: 0 6px 18px rgba(16,24,40,0.06);84 overflow: hidden;85 }86 .card-inner { padding: 28px; }87 .row { display: flex; align-items: center; }88 .time { width: 210px; font-size: 40px; font-weight: 700; color: #0f172a; }89 .dot { width: 10px; height: 10px; background: #355070; border-radius: 50%; margin: 0 16px 0 10px; }90 .route { font-size: 34px; color: #1f2d3d; }91 .code { margin-left: auto; font-size: 34px; color: #3b82f6; font-weight: 700; }92 .subrow { display: flex; align-items: center; gap: 14px; margin: 12px 0 18px 226px; }93 .chip-mini {94 font-size: 26px; padding: 10px 16px; border: 1px solid #D7DFE7; border-radius: 999px; background: #F5F7FA; color: #334155;95 }96 .chip-mini.blue { background: #E8F1FF; border-color: #C9DBFF; color: #0B63E5; }97 .chip-mini.orange { background: #FFEDE3; border-color: #FFD5C1; color: #D65600; font-weight: 700; }98 .chip-mini.purple { background: #F1E9FF; border-color: #E0D4FF; color: #7C48EA; font-weight: 700; }99 .chip-mini.yellow { background: #FFF6D6; border-color: #FFE8A6; color: #C18D00; font-weight: 700; }100 .separator { height: 1px; background: repeating-linear-gradient(to right, #E5EAF0 0, #E5EAF0 10px, transparent 10px, transparent 20px); margin: 18px 0; }101 .baggage { margin: 10px 0 0 226px; display: inline-flex; align-items: center; gap: 12px; color: #374151; font-size: 28px; }102 .price-box {103 padding: 20px 28px 28px; display: flex; justify-content: flex-end; align-items: baseline; gap: 14px;104 }105 .price { color: #07A87B; font-size: 46px; font-weight: 800; }106 .price-sub { color: #5f7384; font-size: 26px; }107 108 /* Bottom home indicator */109 .home-indicator {110 position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);111 width: 380px; height: 12px; background: #cdd6df; border-radius: 12px;112 }113 114 /* Simple utility icons */115 .ico { width: 28px; height: 28px; display: inline-block; }116</style>117</head>118<body>119<div id="render-target">120 121 <!-- Status bar -->122 <div class="status-bar">123 <div>8:11 <span class="sb-dot"></span> 83° <span class="sb-dot"></span> <span style="vertical-align: middle;">⏱</span> <span class="sb-dot"></span> Calm</div>124 <div class="status-right">125 <svg width="34" height="22" viewBox="0 0 24 24" fill="none"><path d="M3 8l9-5 9 5v8l-9 5-9-5V8z" stroke="#667784" stroke-width="2"/></svg>126 <svg width="20" height="26" viewBox="0 0 24 24" fill="none"><path d="M6 2h12v20H6z" stroke="#667784" stroke-width="2"/><path d="M9 6h6" stroke="#667784" stroke-width="2"/></svg>127 </div>128 </div>129 130 <!-- Header -->131 <div class="header">132 <div class="header-top">133 <button class="icon-btn" aria-label="Back">134 <svg width="40" height="40" viewBox="0 0 24 24" fill="none"><path d="M15 18l-6-6 6-6" stroke="#334155" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>135 </button>136 <div style="flex:1">137 <div class="title">Paris Orly ⇄ Leonardo da Vinci–Fiumicino</div>138 <div class="subtitle">Oct 20, 2023 to Oct 22, 2023</div>139 </div>140 <div class="header-actions">141 <div class="calendar-btn" title="Calendar">142 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">143 <rect x="3" y="4" width="18" height="17" rx="2" stroke="#334155" stroke-width="2"/>144 <path d="M8 2v4M16 2v4M3 10h18" stroke="#334155" stroke-width="2"/>145 </svg>146 </div>147 </div>148 </div>149 </div>150 151 <!-- Chip filters -->152 <div class="chip-bar">153 <div class="chip">154 <svg viewBox="0 0 24 24"><path d="M12 22c1.7 0 3-1.3 3-3H9c0 1.7 1.3 3 3 3zM5 17h14v-1l-2-2v-4a7 7 0 10-14 0v4l-2 2v1z" fill="#334155"/></svg>155 Alerts156 </div>157 <div class="chip">158 <svg viewBox="0 0 24 24"><path d="M3 4h18L14 12v8l-4-2v-6L3 4z" fill="#334155"/></svg>159 Best160 </div>161 <div class="chip blue">162 <svg viewBox="0 0 24 24"><path d="M6 7h12l-1 10H7L6 7z" fill="#0B63E5"/></svg>163 Bags <span class="tag-x">×</span>164 </div>165 <div class="chip">Stops</div>166 <div class="chip">Time</div>167 <div class="chip">Duration</div>168 </div>169 170 <!-- Passenger / cabin strip -->171 <div class="details-strip">172 <div class="ds-item">173 <svg class="ico" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="7" r="4" stroke="#334155" stroke-width="2"/><path d="M4 20c0-4 4-6 8-6s8 2 8 6" stroke="#334155" stroke-width="2"/></svg>174 3175 </div>176 <div class="ds-item">177 <svg class="ico" viewBox="0 0 24 24" fill="none"><rect x="5" y="7" width="14" height="12" rx="2" stroke="#334155" stroke-width="2"/><path d="M8 7V4h8v3" stroke="#334155" stroke-width="2"/></svg>178 0179 </div>180 <div class="ds-item">181 <svg class="ico" viewBox="0 0 24 24" fill="none"><rect x="4" y="6" width="16" height="12" rx="2" stroke="#334155" stroke-width="2"/><path d="M10 6V4h4v2" stroke="#334155" stroke-width="2"/></svg>182 1183 </div>184 <div class="ds-item">Economy</div>185 <div class="edit">186 <svg class="ico" viewBox="0 0 24 24" fill="none"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z" stroke="#0B8F4D" stroke-width="2"/><path d="M14.06 6.19l3.75 3.75L20.5 7.25l-3.75-3.75-2.69 2.69z" stroke="#0B8F4D" stroke-width="2"/></svg>187 </div>188 </div>189 190 <!-- Meta -->191 <div class="results-meta">Showing <b>325</b> trips</div>192 193 <!-- Card 1 -->194 <div class="card">195 <div class="card-inner">196 <div class="row">197 <div class="time">8:00 AM</div>198 <div class="dot"></div>199 <div class="route">Paris Orly <span style="color:#3b82f6; font-weight:700;">ORY</span></div>200 </div>201 <div class="subrow">202 <div class="chip-mini blue">2h</div>203 <div class="chip-mini orange">easyJet</div>204 <div class="chip-mini">Direct</div>205 </div>206 <div class="row">207 <div class="time">10:00 AM</div>208 <div style="width:20px; margin-right:12px; text-align:center; color:#9aa7b2;">↓</div>209 <div class="route">Leonardo da Vinci–Fiumicino …</div>210 <div class="code">FCO</div>211 </div>212 <div class="subrow">213 <div class="chip-mini">2 nights in Rome</div>214 </div>215 <div class="separator"></div>216 <div class="row">217 <div class="time">6:50 AM</div>218 <div class="dot"></div>219 <div class="route">Leonardo da Vinci–Fiumicino …</div>220 <div class="code">FCO</div>221 </div>222 <div class="subrow">223 <div class="chip-mini blue">2h 15m</div>224 <div class="chip-mini purple">wizz</div>225 <div class="chip-mini">Direct</div>226 </div>227 <div class="row">228 <div class="time">9:05 AM</div>229 <div style="width:20px; margin-right:12px; text-align:center; color:#9aa7b2;">↓</div>230 <div class="route">Paris Orly <span style="color:#3b82f6; font-weight:700;">ORY</span></div>231 </div>232 <div class="baggage">233 <svg class="ico" viewBox="0 0 24 24" fill="none"><rect x="6" y="7" width="12" height="12" rx="2" stroke="#334155" stroke-width="2"/><path d="M9 7V5h6v2" stroke="#334155" stroke-width="2"/></svg>234 33 lb235 </div>236 </div>237 <div class="price-box">238 <div class="price">CHF732</div>239 <div class="price-sub">for 3 passengers</div>240 </div>241 </div>242 243 <!-- Card 2 -->244 <div class="card">245 <div class="card-inner">246 <div class="row">247 <div class="time">8:00 AM</div>248 <div class="dot"></div>249 <div class="route">Paris Orly <span style="color:#3b82f6; font-weight:700;">ORY</span></div>250 </div>251 <div class="subrow">252 <div class="chip-mini blue">2h</div>253 <div class="chip-mini orange">easyJet</div>254 <div class="chip-mini">Direct</div>255 </div>256 <div class="row">257 <div class="time">10:00 AM</div>258 <div style="width:20px; margin-right:12px; text-align:center; color:#9aa7b2;">↓</div>259 <div class="route">Leonardo da Vinci–Fiumicino …</div>260 <div class="code">FCO</div>261 </div>262 <div class="subrow">263 <div class="chip-mini">2 nights in Rome</div>264 </div>265 <div class="separator"></div>266 <div class="row">267 <div class="time">7:00 AM</div>268 <div class="dot"></div>269 <div class="route">Leonardo da Vinci–Fiumicino …</div>270 <div class="code">FCO</div>271 </div>272 <div class="subrow">273 <div class="chip-mini blue">2h 15m</div>274 <div class="chip-mini yellow">vueling</div>275 <div class="chip-mini">Direct</div>276 </div>277 <div class="row">278 <div class="time">9:15 AM</div>279 <div style="width:20px; margin-right:12px; text-align:center; color:#9aa7b2;">↓</div>280 <div class="route">Paris Orly <span style="color:#3b82f6; font-weight:700;">ORY</span></div>281 </div>282 <div class="baggage">283 <svg class="ico" viewBox="0 0 24 24" fill="none"><rect x="6" y="7" width="12" height="12" rx="2" stroke="#334155" stroke-width="2"/><path d="M9 7V5h6v2" stroke="#334155" stroke-width="2"/></svg>284 33 lb285 </div>286 </div>287 <div class="price-box">288 <div class="price">CHF734</div>289 <div class="price-sub">for 3 passengers</div>290 </div>291 </div>292 293 <div class="home-indicator"></div>294</div>295</body>296</html>