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>Multiple Departure Cities</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13    color: #14263A;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #FFFFFF;21  }22 23  /* Status bar mock */24  .status-bar {25    height: 96px;26    padding: 0 36px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #75859A;31    font-size: 34px;32    letter-spacing: 0.5px;33  }34  .status-right {35    display: flex;36    align-items: center;37    gap: 18px;38  }39  .battery {40    width: 46px;41    height: 24px;42    border: 2px solid #75859A;43    border-radius: 4px;44    position: relative;45  }46  .battery::after {47    content: "";48    position: absolute;49    right: -6px;50    top: 6px;51    width: 6px;52    height: 12px;53    background: #75859A;54    border-radius: 2px;55  }56  .battery .level {57    position: absolute;58    left: 2px;59    top: 2px;60    right: 2px;61    bottom: 2px;62    background: #75859A;63    border-radius: 2px;64  }65 66  .screen {67    padding: 12px 48px 0 48px;68  }69 70  .header {71    display: flex;72    align-items: center;73    justify-content: space-between;74    padding: 12px 12px 8px 12px;75  }76  .title {77    font-size: 52px;78    font-weight: 700;79    color: #19314F;80  }81  .left-icon {82    width: 72px;83    height: 72px;84    display: flex;85    align-items: center;86    justify-content: center;87  }88  .toggle {89    width: 118px;90    height: 56px;91    background: #E5E9EF;92    border-radius: 36px;93    position: relative;94    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);95  }96  .toggle .knob {97    width: 50px;98    height: 50px;99    background: #FFFFFF;100    border-radius: 50%;101    position: absolute;102    right: 4px;103    top: 3px;104    box-shadow: 0 1px 2px rgba(0,0,0,0.12);105  }106 107  .search {108    margin-top: 28px;109    position: relative;110    height: 110px;111    border: 2px solid #D5DCE5;112    border-radius: 12px;113    display: flex;114    align-items: center;115    padding-left: 96px;116    padding-right: 24px;117    background: #FFFFFF;118  }119  .search svg {120    position: absolute;121    left: 28px;122    width: 48px;123    height: 48px;124    fill: none;125    stroke: #8E9AAD;126    stroke-width: 6;127  }128  .search input {129    width: 100%;130    height: 100%;131    border: none;132    outline: none;133    font-size: 38px;134    color: #1A304D;135  }136  .search input::placeholder {137    color: #9AA6B2;138  }139 140  .section {141    margin-top: 48px;142  }143  .section h3 {144    margin: 26px 0 26px;145    font-size: 46px;146    color: #1A304D;147    font-weight: 800;148  }149 150  .grid {151    display: grid;152    grid-template-columns: repeat(3, 1fr);153    gap: 28px;154  }155  .chip {156    background: #F4F7FB;157    border-radius: 14px;158    height: 126px;159    display: flex;160    align-items: center;161    justify-content: center;162    color: #1E3552;163    font-size: 40px;164    font-weight: 600;165    letter-spacing: 0.2px;166    box-shadow: inset 0 0 0 1px #E8EEF5;167  }168 169  .note {170    text-align: center;171    color: #9AA6B2;172    font-size: 34px;173    margin: 48px 0 0;174  }175 176  /* Bottom navigation bar (gesture handle) */177  .nav-bar {178    position: absolute;179    left: 0;180    right: 0;181    bottom: 0;182    height: 138px;183    background: #000000;184    display: flex;185    align-items: center;186    justify-content: center;187  }188  .nav-bar .handle {189    width: 180px;190    height: 12px;191    border-radius: 10px;192    background: #E6E6E6;193    opacity: 0.9;194  }195</style>196</head>197<body>198<div id="render-target">199  <div class="status-bar">200    <div class="status-left">8:13</div>201    <div class="status-right">202      <span>100%</span>203      <div class="battery"><div class="level"></div></div>204    </div>205  </div>206 207  <div class="screen">208    <div class="header">209      <div class="left-icon" aria-label="Close">210        <svg viewBox="0 0 24 24" width="48" height="48">211          <path d="M5 5 L19 19 M19 5 L5 19" stroke="#1A304D" stroke-width="3" stroke-linecap="round"/>212        </svg>213      </div>214      <div class="title">Multiple Departure Cities</div>215      <div class="toggle" role="switch" aria-checked="false">216        <div class="knob"></div>217      </div>218    </div>219 220    <div class="search">221      <svg viewBox="0 0 24 24" aria-hidden="true">222        <circle cx="11" cy="11" r="7"></circle>223        <line x1="16.5" y1="16.5" x2="22" y2="22"></line>224      </svg>225      <input type="text" placeholder="Country, city, or airport" />226    </div>227 228    <div class="section">229      <h3>Asia</h3>230      <div class="grid">231        <div class="chip">Hong Kong</div>232        <div class="chip">Taipei</div>233        <div class="chip">Shanghai</div>234 235        <div class="chip">Tokyo</div>236        <div class="chip">Seoul</div>237        <div class="chip">Bangkok</div>238 239        <div class="chip">Singapore</div>240        <div class="chip">Kuala Lumpur</div>241        <div class="chip">Manila</div>242      </div>243    </div>244 245    <div class="section">246      <h3>Europe</h3>247      <div class="grid">248        <div class="chip">London</div>249        <div class="chip">Paris</div>250        <div class="chip">Frankfurt</div>251 252        <div class="chip">Rome</div>253        <div class="chip">Amsterdam</div>254        <div class="chip">Madrid</div>255      </div>256    </div>257 258    <div class="section">259      <h3>North America</h3>260      <div class="grid">261        <div class="chip">New York</div>262        <div class="chip">San Francisco</div>263        <div class="chip">Los Angeles</div>264 265        <div class="chip">Chicago</div>266        <div class="chip">Vancouver</div>267        <div class="chip">Toronto</div>268      </div>269    </div>270 271    <div class="note">For more cities, please use the search box.</div>272  </div>273 274  <div class="nav-bar">275    <div class="handle"></div>276  </div>277</div>278</body>279</html>