GD-ML/AndroidCode

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>Select fare to Venice</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #0f1626;13    color: #E9EEF8;14    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;15  }16  .status-bar {17    height: 120px;18    background: #0a0d13;19    display: flex;20    align-items: center;21    padding: 0 36px;22    box-sizing: border-box;23    color: #d9dce6;24    font-size: 34px;25  }26  .status-bar .right {27    margin-left: auto;28    display: flex;29    gap: 24px;30    align-items: center;31  }32  .header {33    padding: 24px 48px 12px 48px;34    box-sizing: border-box;35  }36  .header-top {37    display: flex;38    align-items: center;39    gap: 24px;40    margin-top: 6px;41    margin-bottom: 18px;42  }43  .title {44    font-size: 42px;45    font-weight: 600;46    letter-spacing: 0.2px;47  }48  .section {49    padding: 0 48px;50    box-sizing: border-box;51  }52  .times {53    font-size: 40px;54    font-weight: 600;55    margin: 8px 0 16px 0;56    display: flex; align-items: baseline; gap: 14px;57  }58  .plus2 { color: #ff6b6b; font-size: 34px; font-weight: 700; }59  .airline-row {60    display: flex; align-items: center; gap: 18px;61    color: #cfd6e6;62    font-size: 30px;63    margin-bottom: 24px;64  }65  .link {66    color: #78a7ff;67    font-size: 30px;68    display: inline-flex; align-items: center; gap: 10px;69    margin-bottom: 26px;70  }71  .cards {72    display: flex; gap: 28px;73    padding: 24px 36px 0 36px;74    box-sizing: border-box;75  }76  .card {77    width: 920px;78    background: #111a2b;79    border: 2px solid #2b3447;80    border-radius: 34px;81    padding: 40px;82    box-sizing: border-box;83    position: relative;84  }85  .card.peek {86    width: 240px;87    border-radius: 34px;88    background: #111a2b;89    border: 2px solid #2b3447;90  }91  .price {92    font-size: 72px;93    font-weight: 800;94    letter-spacing: 0.5px;95    margin-bottom: 8px;96  }97  .price-sub {98    color: #aeb6c9;99    font-size: 26px;100    margin-bottom: 36px;101  }102  .hgroup {103    margin-bottom: 28px;104  }105  .hgroup .h1 {106    font-size: 34px; font-weight: 700;107  }108  .hgroup .h2 {109    font-size: 30px; color: #cfd6e6;110  }111  .section-title {112    margin-top: 12px;113    font-size: 30px; font-weight: 700;114    margin-bottom: 14px;115  }116  .row {117    display: flex; align-items: center; gap: 18px;118    font-size: 28px;119    color: #dae2f2;120    margin: 12px 0;121  }122  .row.dim { color: #cfd6e6; }123  .button {124    margin-top: 36px;125    background: #4C7AF6;126    color: #0e1424;127    font-weight: 700;128    font-size: 36px;129    text-align: center;130    padding: 30px 0;131    border-radius: 50px;132  }133  .footer-text {134    font-size: 28px;135    color: #cfd6e6;136    padding: 28px 48px;137  }138  .gesture {139    position: absolute;140    bottom: 24px; left: 50%;141    transform: translateX(-50%);142    width: 320px; height: 12px;143    background: #cfd2db;144    border-radius: 8px;145    opacity: 0.6;146  }147 148  /* Icon base */149  .icon { width: 42px; height: 42px; }150  .icon.small { width: 34px; height: 34px; }151  .icon.stroke path, .icon.stroke line { stroke: #E9EEF8; stroke-width: 4; stroke-linecap: round; }152  .icon.muted path, .icon.muted line { stroke: #cfd6e6; }153  .icon-green path { stroke: #9ee29e; }154  .icon-red path { stroke: #f08989; }155</style>156</head>157<body>158<div id="render-target">159 160  <!-- Status bar -->161  <div class="status-bar">162    <div>12:42  82°</div>163    <div class="right">164      <!-- WiFi icon -->165      <svg class="icon stroke muted" viewBox="0 0 24 24">166        <path d="M2 8c9-6 11-6 20 0"/>167        <path d="M5 12c6-4 8-4 14 0"/>168        <path d="M8 16c3-2 5-2 8 0"/>169        <circle cx="12" cy="20" r="1.6" fill="#cfd6e6"></circle>170      </svg>171      <!-- Signal icon -->172      <svg class="icon stroke muted" viewBox="0 0 24 24">173        <line x1="4" y1="20" x2="4" y2="12"></line>174        <line x1="10" y1="20" x2="10" y2="8"></line>175        <line x1="16" y1="20" x2="16" y2="4"></line>176        <line x1="22" y1="20" x2="22" y2="16"></line>177      </svg>178      <!-- Battery icon -->179      <svg class="icon stroke muted" viewBox="0 0 26 24">180        <rect x="1" y="6" width="20" height="12" rx="2" ry="2" fill="none"></rect>181        <rect x="3" y="8" width="14" height="8" rx="1" ry="1" fill="#cfd6e6"></rect>182        <rect x="22" y="9" width="3" height="6" rx="1" ry="1" fill="#cfd6e6"></rect>183      </svg>184    </div>185  </div>186 187  <!-- Header -->188  <div class="header">189    <div class="header-top">190      <!-- Close (X) icon -->191      <svg class="icon stroke" viewBox="0 0 24 24">192        <line x1="5" y1="5" x2="19" y2="19"></line>193        <line x1="19" y1="5" x2="5" y2="19"></line>194      </svg>195      <div class="title">Select fare to Venice</div>196    </div>197  </div>198 199  <!-- Trip summary -->200  <div class="section">201    <div class="times">202      <div>2:00pm - 9:55am (2 stops)</div>203      <div class="plus2">+2</div>204    </div>205    <div class="airline-row">206      <!-- Plane icon -->207      <svg class="icon stroke muted" viewBox="0 0 24 24">208        <path d="M2 12l8 0"></path>209        <path d="M10 12l4-5"></path>210        <path d="M10 12l4 5"></path>211        <path d="M14 7l8 5-8 5"></path>212      </svg>213      <div>Multiple airlines</div>214    </div>215    <div class="link">216      <span>Show details</span>217      <!-- Chevron down -->218      <svg class="icon small stroke muted" viewBox="0 0 24 24">219        <path d="M5 9l7 7 7-7"></path>220      </svg>221    </div>222  </div>223 224  <!-- Cards -->225  <div class="cards">226    <div class="card">227      <div class="price">$1,869</div>228      <div class="price-sub">$1,868.55 roundtrip for 1 traveler</div>229 230      <div class="hgroup">231        <div class="h1">Basic</div>232        <div class="h2">Cabin: Economy</div>233      </div>234 235      <div class="section-title">Seat</div>236      <div class="row">237        <!-- Coin icon -->238        <svg class="icon stroke muted" viewBox="0 0 24 24">239          <circle cx="12" cy="12" r="9" fill="none"></circle>240          <text x="12" y="16" text-anchor="middle" font-size="14" fill="#cfd6e6">$</text>241        </svg>242        <span>Seat choice for a fee</span>243      </div>244 245      <div class="section-title">Bags</div>246      <div class="row">247        <!-- Check icon -->248        <svg class="icon stroke icon-green" viewBox="0 0 24 24">249          <path d="M5 12l5 5 9-10"></path>250        </svg>251        <span>Personal item included</span>252      </div>253      <div class="row">254        <svg class="icon stroke muted" viewBox="0 0 24 24">255          <circle cx="12" cy="12" r="9" fill="none"></circle>256          <text x="12" y="16" text-anchor="middle" font-size="14" fill="#cfd6e6">$</text>257        </svg>258        <span>1st checked bag for a fee</span>259      </div>260 261      <div class="section-title">Flexibility</div>262      <div class="row">263        <!-- Cross icon -->264        <svg class="icon stroke icon-red" viewBox="0 0 24 24">265          <line x1="5" y1="5" x2="19" y2="19"></line>266          <line x1="19" y1="5" x2="5" y2="19"></line>267        </svg>268        <span>Non-refundable</span>269      </div>270      <div class="row">271        <svg class="icon stroke icon-red" viewBox="0 0 24 24">272          <line x1="5" y1="5" x2="19" y2="19"></line>273          <line x1="19" y1="5" x2="5" y2="19"></line>274        </svg>275        <span>Changes not allowed</span>276      </div>277 278      <div class="button">Select</div>279    </div>280 281    <!-- Right peek of another card -->282    <div class="card peek"></div>283  </div>284 285  <div class="footer-text">Confirm bag fees and restrictions with the airline.</div>286 287  <div class="gesture"></div>288</div>289</body>290</html>