GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Multiple Departure Cities UI</title>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, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;16    color: #0f2b4a;17  }18 19  /* Header */20  .header {21    position: relative;22    height: 170px;23  }24  .close-btn {25    position: absolute;26    left: 48px;27    top: 50%;28    transform: translateY(-50%);29    width: 72px;30    height: 72px;31    background: none;32    border: none;33    cursor: pointer;34  }35  .close-btn svg { width: 72px; height: 72px; }36  .close-btn line { stroke: #0f2b4a; stroke-width: 8; stroke-linecap: round; }37 38  .header-title {39    position: absolute;40    left: 50%;41    top: 50%;42    transform: translate(-50%, -50%);43    font-size: 54px;44    font-weight: 700;45    letter-spacing: 0.2px;46  }47 48  .toggle {49    position: absolute;50    right: 52px;51    top: 50%;52    transform: translateY(-50%);53    width: 120px;54    height: 56px;55    background: #D4D9E2;56    border-radius: 28px;57  }58  .toggle .knob {59    position: absolute;60    right: 6px;61    top: 6px;62    width: 44px;63    height: 44px;64    background: #FFFFFF;65    border-radius: 50%;66    box-shadow: 0 2px 4px rgba(0,0,0,0.15);67  }68 69  /* Search bar */70  .search-container {71    margin: 12px 60px 0 60px;72    height: 116px;73    border: 2px solid #D6DCE6;74    border-radius: 12px;75    position: relative;76  }77  .search-icon {78    position: absolute;79    left: 36px;80    top: 50%;81    transform: translateY(-50%);82    width: 44px;83    height: 44px;84  }85  .search-icon circle,86  .search-icon line { stroke: #8C96A6; stroke-width: 6; fill: none; stroke-linecap: round; }87  .placeholder {88    position: absolute;89    left: 100px;90    top: 50%;91    transform: translateY(-50%);92    color: #9AA3B0;93    font-size: 40px;94  }95 96  /* Sections */97  .section {98    margin-top: 56px;99  }100  .section-title {101    margin: 0 60px 28px 60px;102    font-size: 48px;103    font-weight: 700;104    color: #0f2b4a;105  }106  .grid {107    margin: 0 60px;108    display: grid;109    grid-template-columns: repeat(3, 1fr);110    column-gap: 36px;111    row-gap: 36px;112  }113  .city-card {114    height: 140px;115    background: #F3F6FA;116    border-radius: 12px;117    display: flex;118    align-items: center;119    justify-content: center;120    color: #17324F;121    font-size: 42px;122    font-weight: 600;123  }124 125  /* Footer hint */126  .hint {127    margin-top: 72px;128    text-align: center;129    color: #9AA3B0;130    font-size: 34px;131  }132 133  /* Bottom gesture bar area (device) */134  .device-bottom {135    position: absolute;136    left: 0;137    bottom: 0;138    width: 1080px;139    height: 140px;140    background: #000000;141  }142  .gesture-pill {143    position: absolute;144    left: 50%;145    top: 18px;146    transform: translateX(-50%);147    width: 220px;148    height: 14px;149    background: #CCCCCC;150    border-radius: 7px;151    opacity: 0.85;152  }153</style>154</head>155<body>156<div id="render-target">157  <div class="header">158    <button class="close-btn" aria-label="Close">159      <svg viewBox="0 0 72 72">160        <line x1="16" y1="16" x2="56" y2="56"></line>161        <line x1="56" y1="16" x2="16" y2="56"></line>162      </svg>163    </button>164    <div class="header-title">Multiple Departure Cities</div>165    <div class="toggle"><div class="knob"></div></div>166  </div>167 168  <div class="search-container">169    <svg class="search-icon" viewBox="0 0 48 48">170      <circle cx="20" cy="20" r="12"></circle>171      <line x1="31" y1="31" x2="44" y2="44"></line>172    </svg>173    <div class="placeholder">Country, city, or airport</div>174  </div>175 176  <div class="section">177    <h2 class="section-title">Asia</h2>178    <div class="grid">179      <div class="city-card">Hong Kong</div>180      <div class="city-card">Taipei</div>181      <div class="city-card">Shanghai</div>182 183      <div class="city-card">Tokyo</div>184      <div class="city-card">Seoul</div>185      <div class="city-card">Bangkok</div>186 187      <div class="city-card">Singapore</div>188      <div class="city-card">Kuala Lumpur</div>189      <div class="city-card">Manila</div>190    </div>191  </div>192 193  <div class="section">194    <h2 class="section-title">Europe</h2>195    <div class="grid">196      <div class="city-card">London</div>197      <div class="city-card">Paris</div>198      <div class="city-card">Frankfurt</div>199 200      <div class="city-card">Rome</div>201      <div class="city-card">Amsterdam</div>202      <div class="city-card">Madrid</div>203    </div>204  </div>205 206  <div class="section">207    <h2 class="section-title">North America</h2>208    <div class="grid">209      <div class="city-card">New York</div>210      <div class="city-card">San Francisco</div>211      <div class="city-card">Los Angeles</div>212 213      <div class="city-card">Chicago</div>214      <div class="city-card">Vancouver</div>215      <div class="city-card">Toronto</div>216    </div>217  </div>218 219  <div class="hint">For more cities, please use the search box.</div>220 221  <div class="device-bottom">222    <div class="gesture-pill"></div>223  </div>224</div>225</body>226</html>