GD-ML/AndroidCode

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=device-width, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #111;17  }18 19  /* Status bar (time + system icons) */20  .status-bar {21    height: 96px;22    padding: 24px 36px 0 36px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #6b6b6b;27    box-sizing: border-box;28  }29  .status-time { font-size: 34px; font-weight: 600; letter-spacing: 0.2px; }30  .status-icons { display: flex; align-items: center; gap: 26px; }31  .icon { width: 36px; height: 36px; display: inline-block; }32 33  /* Header with title and back */34  .header {35    padding: 22px 36px 8px 36px;36    display: flex;37    align-items: center;38    justify-content: center;39    position: relative;40    box-sizing: border-box;41  }42  .back-btn {43    position: absolute;44    left: 36px;45    top: 18px;46    width: 64px;47    height: 64px;48    display: flex;49    align-items: center;50    justify-content: center;51    color: #333;52  }53  .title {54    font-size: 54px;55    font-weight: 700;56    letter-spacing: 0.2px;57  }58 59  /* Date selector row */60  .date-row {61    padding: 12px 36px 22px 36px;62    display: flex;63    align-items: center;64    gap: 26px;65    box-sizing: border-box;66  }67  .date-item {68    padding: 20px 26px;69    border-radius: 24px;70    text-align: center;71    line-height: 1.1;72  }73  .date-item .top { font-size: 32px; font-weight: 700; color: #202020; }74  .date-item .sub { font-size: 26px; color: #8a8a8a; margin-top: 8px; }75  .date-item.active {76    background: #FFE9DB;77  }78  .date-spacer {79    height: 44px;80    width: 2px;81    background: #E5E5E5;82    margin-left: 10px;83    margin-right: 10px;84  }85  .calendar-btn {86    width: 66px;87    height: 66px;88    border-radius: 16px;89    border: 2px solid #E0E0E0;90    display: flex;91    align-items: center;92    justify-content: center;93  }94 95  /* List area background */96  .list-area {97    position: absolute;98    left: 0;99    right: 0;100    top: 320px;101    bottom: 120px; /* room for gesture bar */102    background: #F6F6F6;103    overflow: hidden;104  }105  .cards {106    padding: 24px 36px 180px 36px;107    box-sizing: border-box;108  }109 110  .card {111    background: #ffffff;112    border-radius: 28px;113    padding: 32px;114    margin-bottom: 34px;115    box-shadow: 0 0 0 1px rgba(0,0,0,0.02);116  }117  .card-content {118    display: grid;119    grid-template-columns: 1fr 1fr;120    column-gap: 36px;121  }122  .col { display: flex; flex-direction: column; gap: 22px; }123 124  /* Placeholder bars */125  .ph {126    height: 48px;127    background: #E9E9E9;128    border-radius: 20px;129  }130  .w-40 { width: 40%; }131  .w-55 { width: 55%; }132  .w-65 { width: 65%; }133  .w-70 { width: 70%; }134  .w-85 { width: 85%; }135  .w-90 { width: 90%; }136 137  .price-box {138    width: 220px;139    height: 140px;140    background: #E5E5E5;141    border-radius: 24px;142    align-self: flex-end;143  }144 145  /* Bottom gesture bar */146  .gesture {147    position: absolute;148    bottom: 0;149    left: 0;150    right: 0;151    height: 120px;152    background: #000000;153    display: flex;154    align-items: center;155    justify-content: center;156  }157  .pill {158    width: 300px;159    height: 10px;160    border-radius: 6px;161    background: #E0E0E0;162    opacity: 0.9;163  }164</style>165</head>166<body>167<div id="render-target">168 169  <!-- Status Bar -->170  <div class="status-bar">171    <div class="status-time">12:29</div>172    <div class="status-icons">173      <!-- Do not disturb icon -->174      <svg class="icon" viewBox="0 0 24 24" fill="#9b9b9b" aria-label="DND">175        <circle cx="12" cy="12" r="10"></circle>176        <rect x="6" y="11" width="12" height="2" fill="#ffffff"></rect>177      </svg>178      <!-- Signal/WiFi icon -->179      <svg class="icon" viewBox="0 0 24 24" aria-label="Signal">180        <path d="M2 18c4-4 16-4 20 0l-2 2c-3-3-13-3-16 0L2 18zm4 4c3-3 11-3 14 0l-2 2c-2-2-8-2-10 0l-2-2z" fill="#8b8b8b"></path>181      </svg>182      <!-- Battery icon -->183      <svg class="icon" viewBox="0 0 32 24" aria-label="Battery">184        <rect x="2" y="5" width="24" height="14" rx="3" ry="3" fill="#8b8b8b"></rect>185        <rect x="26" y="9" width="4" height="6" rx="1" ry="1" fill="#8b8b8b"></rect>186        <rect x="4" y="7" width="18" height="10" rx="2" ry="2" fill="#ffffff"></rect>187      </svg>188    </div>189  </div>190 191  <!-- Header -->192  <div class="header">193    <div class="back-btn" aria-label="Back">194      <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">195        <path d="M15 18l-6-6 6-6"></path>196      </svg>197    </div>198    <div class="title">Amsterdam ⇄ London</div>199  </div>200 201  <!-- Date selector -->202  <div class="date-row">203    <div class="date-item">204      <div class="top">26 Oct</div>205      <div class="sub">Thu</div>206    </div>207    <div class="date-item active">208      <div class="top">27 Oct</div>209      <div class="sub">Fri</div>210    </div>211    <div class="date-item">212      <div class="top">28 Oct</div>213      <div class="sub">Sat</div>214    </div>215    <div class="date-item">216      <div class="top">29 Oct</div>217      <div class="sub">Sun</div>218    </div>219    <div class="date-item">220      <div class="top">30 Oct</div>221      <div class="sub">Mon</div>222    </div>223    <div class="date-item">224      <div class="top">31 Oct</div>225      <div class="sub">Tue</div>226    </div>227    <div class="date-spacer"></div>228    <div class="calendar-btn" aria-label="Calendar">229      <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#6b6b6b" stroke-width="1.8" stroke-linecap="round">230        <rect x="3" y="4" width="18" height="16" rx="2"></rect>231        <path d="M8 2v4M16 2v4M3 9h18"></path>232      </svg>233    </div>234  </div>235 236  <!-- Results list area -->237  <div class="list-area">238    <div class="cards">239 240      <!-- Card 1 -->241      <div class="card">242        <div class="card-content">243          <div class="col">244            <div class="ph w-40"></div>245            <div class="ph w-90"></div>246            <div class="ph w-55"></div>247          </div>248          <div class="col">249            <div class="ph w-35 w-55"></div>250            <div class="ph w-85"></div>251            <div class="price-box"></div>252          </div>253        </div>254      </div>255 256      <!-- Card 2 -->257      <div class="card">258        <div class="card-content">259          <div class="col">260            <div class="ph w-40"></div>261            <div class="ph w-90"></div>262            <div class="ph w-55"></div>263          </div>264          <div class="col">265            <div class="ph w-40"></div>266            <div class="ph w-85"></div>267            <div class="price-box"></div>268          </div>269        </div>270      </div>271 272      <!-- Card 3 -->273      <div class="card">274        <div class="card-content">275          <div class="col">276            <div class="ph w-40"></div>277            <div class="ph w-90"></div>278            <div class="ph w-55"></div>279          </div>280          <div class="col">281            <div class="ph w-40"></div>282            <div class="ph w-85"></div>283            <div class="price-box"></div>284          </div>285        </div>286      </div>287 288      <!-- Card 4 -->289      <div class="card">290        <div class="card-content">291          <div class="col">292            <div class="ph w-40"></div>293            <div class="ph w-90"></div>294            <div class="ph w-55"></div>295          </div>296          <div class="col">297            <div class="ph w-40"></div>298            <div class="ph w-85"></div>299            <div class="price-box"></div>300          </div>301        </div>302      </div>303 304      <!-- Card 5 -->305      <div class="card">306        <div class="card-content">307          <div class="col">308            <div class="ph w-40"></div>309            <div class="ph w-90"></div>310            <div class="ph w-55"></div>311          </div>312          <div class="col">313            <div class="ph w-40"></div>314            <div class="ph w-85"></div>315            <div class="price-box"></div>316          </div>317        </div>318      </div>319 320    </div>321  </div>322 323  <!-- Bottom gesture bar -->324  <div class="gesture">325    <div class="pill"></div>326  </div>327 328</div>329</body>330</html>