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>Choose a city - Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #dbe8f5; /* light blue page background */15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0; left: 0;21    width: 1080px; height: 120px;22    background: #0e1116;23    color: #ffffff;24    display: flex;25    align-items: center;26    padding: 0 32px;27    box-sizing: border-box;28    font-size: 36px;29    letter-spacing: 0.3px;30  }31  .status-left { flex: 1; }32  .status-right {33    display: flex; align-items: center; gap: 28px;34    font-size: 30px;35  }36  .icon {37    width: 42px; height: 42px;38  }39  .battery {40    display: flex; align-items: center; gap: 12px; font-size: 30px;41  }42 43  /* Header */44  .header {45    position: absolute;46    top: 120px; left: 0;47    width: 1080px; height: 160px;48    background: #2d3a46;49    color: #ffffff;50    display: flex;51    align-items: center;52    box-sizing: border-box;53    padding: 0 28px;54  }55  .back-btn {56    width: 84px; height: 84px; display: flex; align-items: center; justify-content: center;57    margin-right: 16px;58  }59  .header-title {60    flex: 1; text-align: center; font-size: 48px; font-weight: 600;61  }62 63  /* Card */64  .card {65    position: absolute;66    left: 40px; top: 300px;67    width: 1000px;68    background: #ffffff;69    border-radius: 28px;70    box-shadow: 0 10px 26px rgba(0,0,0,0.08);71    overflow: hidden;72  }73  .card-top {74    padding: 28px 32px 12px 32px;75    box-sizing: border-box;76  }77  .row {78    display: flex; align-items: center; justify-content: space-between;79    margin-bottom: 12px;80  }81  .label { color: #7f8c99; font-size: 32px; }82  .next { color: #7f8c99; font-size: 32px; }83  .input-text {84    font-size: 56px; color: #1d2329; line-height: 1.2; margin-top: 8px;85  }86  .divider { height: 2px; background: #e6e9ee; margin-top: 16px; }87 88  .suggestions { padding: 0 32px 24px 32px; box-sizing: border-box; }89  .item { padding: 26px 0; }90  .item + .item { border-top: 1px solid #e6e9ee; }91  .item .title { font-size: 40px; font-weight: 700; color: #1ea8ff; letter-spacing: 0.3px; }92  .item .subtitle { font-size: 30px; color: #8895a3; margin-top: 6px; }93 94  /* Keyboard mock */95  .keyboard {96    position: absolute;97    left: 0; bottom: 0;98    width: 1080px; height: 940px;99    background: #1e2328;100    color: #e6eaef;101    box-shadow: 0 -8px 18px rgba(0,0,0,0.25);102  }103  .kb-suggestions {104    height: 100px;105    display: flex; align-items: center;106    padding: 0 32px; gap: 24px;107    box-sizing: border-box;108    color: #d0d6dd; font-size: 34px;109    border-bottom: 1px solid rgba(255,255,255,0.06);110  }111  .kb-suggestions .sep { opacity: 0.35; }112  .kb-rows {113    padding: 26px 24px; box-sizing: border-box;114  }115  .kb-row {116    display: flex; gap: 18px; justify-content: center; margin-bottom: 26px;117  }118  .key {119    background: #2b3238; border-radius: 18px;120    min-width: 86px; height: 120px;121    display: flex; align-items: center; justify-content: center;122    font-size: 44px; color: #e6eaef;123  }124  .key.small { min-width: 120px; }125  .key.space { flex: 1; min-width: 300px; }126  .key.round { width: 120px; height: 120px; border-radius: 60px; }127  .key.enter { background: #63e0bb; color: #0e1916; font-weight: 700; }128  .key.secondary { background: #2f363c; color: #b9c2cc; }129 130  /* Home indicator */131  .home-indicator {132    position: absolute; bottom: 18px; left: 50%;133    width: 220px; height: 12px; margin-left: -110px;134    background: #e6eaef; border-radius: 8px; opacity: 0.6;135  }136</style>137</head>138<body>139<div id="render-target">140 141  <!-- Status Bar -->142  <div class="status-bar">143    <div class="status-left">8:05</div>144    <div class="status-right">145      <!-- Simple icons -->146      <svg class="icon" viewBox="0 0 24 24">147        <circle cx="12" cy="12" r="10" fill="#ffffff" opacity="0.15"></circle>148        <rect x="4" y="10" width="16" height="4" rx="2" fill="#ffffff"></rect>149      </svg>150      <svg class="icon" viewBox="0 0 24 24">151        <path d="M12 18c3.3 0 6-2.7 6-6" stroke="#ffffff" stroke-width="2" fill="none" opacity="0.7"/>152        <path d="M12 14c1.1 0 2-.9 2-2" stroke="#ffffff" stroke-width="2" fill="none" opacity="0.7"/>153        <circle cx="12" cy="12" r="1.5" fill="#ffffff"/>154      </svg>155      <svg class="icon" viewBox="0 0 28 24">156        <rect x="2" y="5" width="20" height="12" rx="2" ry="2" stroke="#ffffff" stroke-width="2" fill="none"/>157        <rect x="4" y="7" width="16" height="8" rx="1" ry="1" fill="#ffffff"></rect>158        <rect x="24" y="9" width="2" height="4" fill="#ffffff"></rect>159      </svg>160      <div class="battery">96%</div>161    </div>162  </div>163 164  <!-- Header -->165  <div class="header">166    <div class="back-btn">167      <svg width="48" height="48" viewBox="0 0 24 24">168        <path d="M15 6L9 12l6 6" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>169      </svg>170    </div>171    <div class="header-title">Choose a city</div>172  </div>173 174  <!-- Search Card -->175  <div class="card">176    <div class="card-top">177      <div class="row">178        <div class="label">From</div>179        <div class="next">Next</div>180      </div>181      <div class="input-text">Berlin</div>182      <div class="divider"></div>183    </div>184 185    <div class="suggestions">186      <div class="item">187        <div class="title">BERLIN</div>188        <div class="subtitle">Germany</div>189      </div>190      <div class="item">191        <div class="title">BERLIN-SCHÖNEFELD</div>192        <div class="subtitle">Germany</div>193      </div>194      <div class="item">195        <div class="title">KREUZBERG (AHR)</div>196        <div class="subtitle">Germany</div>197      </div>198    </div>199  </div>200 201  <!-- Keyboard mock -->202  <div class="keyboard">203    <div class="kb-suggestions">204      <div>Berlin</div>205      <div class="sep">|</div>206      <div>Berl in</div>207      <div class="sep">|</div>208      <div>Berliner</div>209      <div style="margin-left:auto;">210        <svg width="48" height="48" viewBox="0 0 24 24">211          <path d="M12 5v14" stroke="#cfe3dd" stroke-width="2" opacity="0.6"/>212          <circle cx="12" cy="12" r="1.5" fill="#cfe3dd" opacity="0.7"></circle>213        </svg>214      </div>215    </div>216    <div class="kb-rows">217      <div class="kb-row">218        <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>219        <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>220      </div>221      <div class="kb-row">222        <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>223        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>224      </div>225      <div class="kb-row">226        <div class="key small">227          <svg width="42" height="42" viewBox="0 0 24 24">228            <path d="M5 12l4-4v3h6v2H9v3z" fill="#b9c2cc"/>229          </svg>230        </div>231        <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>232        <div class="key">n</div><div class="key">m</div>233        <div class="key small secondary">234          <svg width="48" height="48" viewBox="0 0 24 24">235            <path d="M5 5l14 14" stroke="#b9c2cc" stroke-width="2"/>236            <path d="M19 5L5 19" stroke="#b9c2cc" stroke-width="2"/>237          </svg>238        </div>239      </div>240      <div class="kb-row">241        <div class="key round" style="background:#7ad0ae;color:#0e1916;">?123</div>242        <div class="key round secondary">243          <svg width="32" height="32" viewBox="0 0 24 24">244            <circle cx="12" cy="12" r="5" fill="#b9c2cc"/>245          </svg>246        </div>247        <div class="key space"> </div>248        <div class="key round secondary">249          <svg width="34" height="34" viewBox="0 0 24 24">250            <path d="M12 5v10" stroke="#b9c2cc" stroke-width="2"/>251            <circle cx="12" cy="17" r="1.5" fill="#b9c2cc"/>252          </svg>253        </div>254        <div class="key round enter">255          <svg width="40" height="40" viewBox="0 0 24 24">256            <path d="M8 13l4 4 4-4" stroke="#0e1916" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>257          </svg>258        </div>259      </div>260    </div>261  </div>262 263  <div class="home-indicator"></div>264</div>265</body>266</html>