GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Choose a City UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #eef6ff;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute; top: 0; left: 0; width: 100%; height: 120px;18    background: #0b0f12; color: #fff;19    display: flex; align-items: center; justify-content: space-between;20    padding: 0 40px; box-sizing: border-box; font-weight: 500;21  }22  .status-left { font-size: 40px; letter-spacing: 0.5px; }23  .status-right { display: flex; align-items: center; gap: 28px; }24  .status-icon { width: 40px; height: 40px; border-radius: 20px; background: rgba(255,255,255,0.25); }25 26  /* Header */27  .header {28    position: absolute; top: 120px; left: 0; width: 100%; height: 160px;29    background: #2f3a44; color: #fff;30    display: flex; align-items: center; justify-content: center;31  }32  .header-title {33    font-size: 54px; font-weight: 600; color: #e9eef3;34    letter-spacing: 0.3px;35  }36  .back-btn {37    position: absolute; left: 28px; top: 50%; transform: translateY(-50%);38    width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;39  }40  .back-btn svg { width: 50px; height: 50px; }41  .back-btn svg path { stroke: #ffffff; stroke-width: 8; fill: none; stroke-linecap: round; stroke-linejoin: round; }42 43  /* Content area */44  .content {45    position: absolute; top: 280px; left: 0; right: 0; bottom: 900px;46    background: #daecf9;47    padding: 30px; box-sizing: border-box;48  }49  .card {50    background: #fff; border-radius: 28px; box-shadow: 0 2px 6px rgba(0,0,0,0.08);51    height: 100%; overflow: hidden;52  }53  .card-inner { padding: 34px 38px 0 38px; }54  .from-label { font-size: 36px; color: #6f7d86; margin-bottom: 10px; }55  .selected-city { font-size: 58px; color: #9da5ad; font-weight: 700; letter-spacing: 1px; }56  .divider {57    height: 1px; background: #e6eaee; margin: 26px -38px 6px -38px;58  }59 60  .list {61    margin: 0 -38px; /* let dividers span full width */62  }63  .row {64    padding: 30px 38px; box-sizing: border-box;65    border-bottom: 1px solid #e6eaee;66  }67  .row:last-child { border-bottom: none; }68  .city-name {69    font-size: 50px; color: #26a3f5; font-weight: 700; letter-spacing: 0.6px;70    text-transform: uppercase;71  }72  .country {73    font-size: 34px; color: #8a949c; margin-top: 6px;74  }75 76  /* Keyboard mock */77  .keyboard {78    position: absolute; left: 0; right: 0; bottom: 60px; height: 860px;79    background: #1c2830; color: #cfd7dc; box-sizing: border-box; padding: 22px 24px;80  }81  .kb-top-icons {82    height: 110px; display: flex; align-items: center; gap: 34px;83  }84  .kb-icon {85    width: 90px; height: 90px; border-radius: 18px;86    background: #23323a; display: flex; align-items: center; justify-content: center;87    font-size: 28px; color: #cfd7dc;88  }89  .keys { margin-top: 8px; display: flex; flex-direction: column; gap: 24px; }90  .key-row { display: flex; justify-content: center; gap: 20px; }91  .key {92    width: 92px; height: 120px; border-radius: 18px;93    background: #23323a; display: flex; align-items: center; justify-content: center;94    font-size: 42px; color: #e6edf2;95  }96  .key-wide { width: 160px; }97  .space { flex: 1; height: 120px; border-radius: 18px; background: #23323a; }98  .circle-btn {99    width: 140px; height: 140px; border-radius: 70px; background: #66d0ac;100    color: #0b151a; font-weight: 700; display: flex; align-items: center; justify-content: center;101    font-size: 34px;102  }103  .circle-btn.secondary { background: #69d6b2; }104  .green-pill {105    width: 140px; height: 140px; border-radius: 70px; background: #69e3c0;106    display: flex; align-items: center; justify-content: center; color: #0c171c; font-size: 46px; font-weight: 700;107  }108  .home-indicator {109    position: absolute; left: 50%; transform: translateX(-50%);110    bottom: 18px; width: 300px; height: 12px; border-radius: 8px; background: #d7d7d7;111    opacity: 0.9;112  }113</style>114</head>115<body>116<div id="render-target">117 118  <!-- Status Bar -->119  <div class="status-bar">120    <div class="status-left">8:05</div>121    <div class="status-right">122      <div class="status-icon"></div>123      <div class="status-icon"></div>124      <div class="status-icon"></div>125      <div style="display:flex; align-items:center; gap:10px;">126        <svg width="60" height="30">127          <rect x="0" y="8" width="46" height="14" rx="3" fill="none" stroke="#fff" stroke-width="3"></rect>128          <rect x="4" y="11" width="38" height="8" fill="#fff"></rect>129          <rect x="48" y="12" width="8" height="8" rx="2" fill="#fff"></rect>130        </svg>131        <span style="font-size:34px;">96%</span>132      </div>133    </div>134  </div>135 136  <!-- Header -->137  <div class="header">138    <div class="back-btn">139      <svg viewBox="0 0 60 60">140        <path d="M38 12 L18 30 L38 48"></path>141      </svg>142    </div>143    <div class="header-title">Choose a city</div>144  </div>145 146  <!-- Content -->147  <div class="content">148    <div class="card">149      <div class="card-inner">150        <div class="from-label">From</div>151        <div class="selected-city">BERLIN</div>152        <div class="divider"></div>153      </div>154 155      <div class="list">156        <div class="row">157          <div class="city-name">KIEV-PASAZHYRSKIY</div>158          <div class="country">Ukraine</div>159        </div>160        <div class="row">161          <div class="city-name">WARSZAWA</div>162          <div class="country">Poland</div>163        </div>164        <div class="row">165          <div class="city-name">PRAHA</div>166          <div class="country">Czech</div>167        </div>168        <div class="row">169          <div class="city-name">MINSK</div>170          <div class="country">Belarus</div>171        </div>172        <div class="row">173          <div class="city-name">BERLIN</div>174          <div class="country">Germany</div>175        </div>176      </div>177    </div>178  </div>179 180  <!-- Keyboard mock -->181  <div class="keyboard">182    <div class="kb-top-icons">183      <div class="kb-icon">▦</div>184      <div class="kb-icon">☺</div>185      <div class="kb-icon">GIF</div>186      <div class="kb-icon">⚙</div>187      <div class="kb-icon">G</div>188      <div class="kb-icon">🎨</div>189      <div class="kb-icon">🎤</div>190    </div>191 192    <div class="keys">193      <div class="key-row">194        <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>195        <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>196      </div>197      <div class="key-row">198        <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>199        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>200      </div>201      <div class="key-row">202        <div class="key-wide">⇧</div>203        <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>204        <div class="key-wide">⌫</div>205      </div>206      <div class="key-row" style="gap: 22px;">207        <div class="circle-btn">?123</div>208        <div class="key">,</div>209        <div class="key">☺</div>210        <div class="space"></div>211        <div class="key">.</div>212        <div class="green-pill">✔</div>213      </div>214    </div>215  </div>216 217  <div class="home-indicator"></div>218</div>219</body>220</html>