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 Arrival Cities</title>7<style>8  body{margin:0;padding:0;background:transparent;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:#0b2441;}9  #render-target{10    width:1080px;height:2400px;position:relative;overflow:hidden;background:#ffffff;11  }12 13  /* Status bar placeholder */14  .status-bar{15    height:120px;padding:0 40px;display:flex;align-items:center;justify-content:space-between;color:#1f2c40;font-weight:600;font-size:38px;opacity:.8;16  }17 18  /* Header */19  .header{20    padding:10px 40px 0 40px;height:120px;display:flex;align-items:center;justify-content:space-between;21  }22  .close-btn{23    width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;24  }25  .close-btn svg{width:40px;height:40px;stroke:#1d3557;stroke-width:7;stroke-linecap:round;}26  .header-right{display:flex;align-items:center;gap:18px;}27  .title{28    font-size:44px;font-weight:700;color:#172b4d;white-space:nowrap;29  }30  .toggle{31    width:118px;height:62px;background:#e6e9ef;border-radius:40px;position:relative;box-shadow:inset 0 0 0 1px #cfd6e2;32  }33  .toggle::after{34    content:"";position:absolute;top:6px;left:6px;width:50px;height:50px;background:#ffffff;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,0.15);35  }36 37  /* Search bar */38  .search-wrap{padding:22px 40px;}39  .search-bar{40    height:110px;border:1px solid #e0e6ef;border-radius:16px;display:flex;align-items:center;padding:0 28px;gap:22px;color:#8aa0b8;41  }42  .search-bar svg{width:44px;height:44px;stroke:#8aa0b8;stroke-width:6;fill:none;}43  .search-placeholder{font-size:40px;color:#9db0c7;}44 45  /* Section titles */46  .section-title{47    padding:18px 40px 10px 40px;font-size:48px;font-weight:700;color:#0f2b52;48  }49 50  /* Explore cards area */51  .explore-grid{52    padding:10px 40px;display:flex;gap:28px;53  }54  .card-large{55    width:620px;height:240px;border-radius:18px;overflow:hidden;position:relative;background:#E0E0E0;border:1px solid #BDBDBD;display:flex;align-items:center;justify-content:center;color:#757575;font-size:34px;56  }57  .card-large .label{58    position:absolute;left:24px;bottom:18px;background:rgba(0,0,0,0.45);color:#fff;padding:10px 16px;border-radius:12px;font-size:36px;font-weight:600;59  }60  .card-small-col{flex:1;display:flex;flex-direction:column;gap:24px;}61  .card-small{62    height:108px;border-radius:16px;background:#f8fafc;border:1px solid #e6ecf3;display:flex;align-items:center;gap:22px;padding:0 26px;font-size:38px;color:#0f2b52;font-weight:600;63  }64  .card-small svg{width:46px;height:46px;stroke:#1b3358;stroke-width:6;fill:none;}65  .show-more{66    padding:22px 0;text-align:center;color:#3166ff;font-size:38px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:14px;67  }68  .show-more svg{width:34px;height:34px;stroke:#3166ff;stroke-width:6;fill:none;}69 70  /* Destinations grid */71  .continent{padding:12px 40px 0 40px;}72  .continent h3{margin:0 0 24px 0;font-size:46px;font-weight:800;color:#0f2b52;}73  .dest-grid{74    display:grid;grid-template-columns:repeat(3, 1fr);gap:28px;75  }76  .dest{77    height:116px;background:#f2f6fb;border:1px solid #e3e9f2;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:40px;color:#193459;font-weight:700;78  }79 80  /* Keyboard mock */81  .keyboard{82    position:absolute;left:0;bottom:0;width:1080px;height:880px;background:#1f1f1f;border-top-left-radius:18px;border-top-right-radius:18px;padding:28px 22px 40px 22px;box-sizing:border-box;83  }84  .kb-row{display:flex;gap:18px;justify-content:center;margin:18px 0;}85  .key{86    height:110px;min-width:88px;flex:0 0 auto;background:#2b2b2b;border-radius:18px;display:flex;align-items:center;justify-content:center;color:#e6e6e6;font-size:42px;padding:0 18px;87  }88  .key.wide{min-width:160px;}89  .key.extra-wide{min-width:400px;}90  .kb-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;color:#d0d0d0;}91  .kb-top .dot{width:18px;height:18px;background:#d0d0d0;border-radius:50%;}92  .home-indicator{93    position:absolute;left:50%;transform:translateX(-50%);bottom:16px;width:260px;height:10px;background:#e5e5e5;border-radius:8px;opacity:.9;94  }95</style>96</head>97<body>98<div id="render-target">99 100  <!-- Simulated status bar -->101  <div class="status-bar">102    <div>8:15</div>103    <div>• • •</div>104  </div>105 106  <!-- Header -->107  <div class="header">108    <div class="close-btn" aria-label="Close">109      <svg viewBox="0 0 24 24">110        <line x1="5" y1="5" x2="19" y2="19"></line>111        <line x1="19" y1="5" x2="5" y2="19"></line>112      </svg>113    </div>114    <div class="header-right">115      <div class="title">Multiple Arrival Cities</div>116      <div class="toggle" aria-hidden="true"></div>117    </div>118  </div>119 120  <!-- Search -->121  <div class="search-wrap">122    <div class="search-bar">123      <svg viewBox="0 0 24 24">124        <circle cx="10.5" cy="10.5" r="7.5"></circle>125        <line x1="16.5" y1="16.5" x2="22" y2="22"></line>126      </svg>127      <div class="search-placeholder">Country, city, or airport</div>128    </div>129  </div>130 131  <!-- Explore -->132  <div class="section-title">Explore the world</div>133  <div class="explore-grid">134    <div class="card-large">135      <div>[IMG: World Map with tags]</div>136      <div class="label">Anywhere</div>137    </div>138    <div class="card-small-col">139      <div class="card-small">140        <svg viewBox="0 0 24 24">141          <path d="M3 20h18M6 20V8a6 6 0 0 1 12 0v12"></path>142        </svg>143        <span>Nature</span>144      </div>145      <div class="card-small">146        <svg viewBox="0 0 24 24">147          <path d="M2 18h20M4 18l4-6 4 6M16 18l2-3 2 3"></path>148        </svg>149        <span>Beaches</span>150      </div>151    </div>152  </div>153 154  <div class="show-more">155    <span>Show More</span>156    <svg viewBox="0 0 24 24">157      <circle cx="12" cy="12" r="9"></circle>158      <polyline points="8,10 12,14 16,10"></polyline>159    </svg>160  </div>161 162  <!-- Asia Destinations -->163  <div class="continent">164    <h3>Asia</h3>165    <div class="dest-grid">166      <div class="dest">Hong Kong</div>167      <div class="dest">Taipei</div>168      <div class="dest">Shanghai</div>169      <div class="dest">Tokyo</div>170      <div class="dest">Seoul</div>171      <div class="dest">Bangkok</div>172      <div class="dest">Singapore</div>173      <div class="dest">Kuala Lumpur</div>174      <div class="dest">Manila</div>175    </div>176  </div>177 178  <!-- On-screen keyboard mock -->179  <div class="keyboard">180    <div class="kb-top">181      <div class="dot"></div>182      <div>GIF</div>183      <div class="dot"></div>184    </div>185 186    <div class="kb-row">187      <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>188    </div>189    <div class="kb-row">190      <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>191    </div>192    <div class="kb-row">193      <div class="key wide">⇧</div><div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div><div class="key wide">⌫</div>194    </div>195    <div class="kb-row">196      <div class="key">?123</div>197      <div class="key">,</div>198      <div class="key">🙂</div>199      <div class="key extra-wide"></div>200      <div class="key">.</div>201      <div class="key" style="background:#9be17d;color:#1e1e1e;font-weight:700;">✓</div>202    </div>203  </div>204 205  <div class="home-indicator"></div>206</div>207</body>208</html>