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>Search Locations UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #FAFAF7;12    border-radius: 36px;13    box-shadow: 0 2px 12px rgba(0,0,0,0.08);14    color: #243425;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute; top: 0; left: 0; right: 0;20    height: 120px; padding: 0 32px;21    display: flex; align-items: center; justify-content: space-between;22    color: #2c2c2c; font-weight: 600; font-size: 42px;23  }24  .status-left { display: flex; align-items: center; gap: 18px; }25  .status-right { display: flex; align-items: center; gap: 22px; }26  .status-icon svg { width: 52px; height: 52px; }27 28  /* Search bar */29  .search-wrap {30    position: absolute; top: 150px; left: 36px; right: 36px;31  }32  .search-bar {33    height: 120px; border: 2.5px solid #2E3F2C; border-radius: 60px;34    background: #FFFFFF; display: flex; align-items: center;35    padding: 0 28px; gap: 22px;36    box-shadow: 0 2px 8px rgba(0,0,0,0.05);37  }38  .icon-btn { width: 72px; height: 72px; border-radius: 36px; display: flex; align-items: center; justify-content: center; }39  .icon-btn svg { width: 44px; height: 44px; }40  .search-text {41    flex: 1; font-size: 48px; color: #243425; letter-spacing: 1px;42    display: flex; align-items: center;43  }44  .caret {45    width: 3px; height: 52px; background: #243425; margin-left: 3px; border-radius: 2px;46  }47  .clear-btn svg { width: 42px; height: 42px; }48 49  /* Results list */50  .results {51    position: absolute; top: 300px; left: 0; right: 0; bottom: 900px;52    overflow: hidden;53  }54  .result-item {55    display: flex; align-items: center;56    padding: 28px 36px; gap: 28px;57  }58  .flag-box {59    width: 120px; height: 120px; border-radius: 26px;60    background: #ECEDE7; display: flex; align-items: center; justify-content: center;61  }62  .flag-box svg { width: 60px; height: 60px; }63  .result-text { display: flex; flex-direction: column; }64  .city { font-size: 52px; font-weight: 700; color: #253424; }65  .country { font-size: 36px; color: #6B7568; margin-top: 10px; }66 67  /* Keyboard */68  .keyboard {69    position: absolute; left: 0; right: 0; bottom: 80px;70    height: 900px; background: #EFE9F5; border-top-left-radius: 26px; border-top-right-radius: 26px;71    box-shadow: 0 -4px 10px rgba(0,0,0,0.06);72    padding: 22px 24px;73  }74  .kb-top {75    height: 120px; display: flex; align-items: center; gap: 36px; padding: 0 8px;76  }77  .kb-icon {78    width: 120px; height: 88px; border-radius: 22px; background: #FFFFFF; display: flex; align-items: center; justify-content: center;79    color: #444; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.06);80  }81  .kb-icon svg { width: 42px; height: 42px; }82 83  .kb-row { display: flex; justify-content: space-between; margin-top: 24px; padding: 0 6px; }84  .key {85    background: #FFFFFF; border-radius: 22px; height: 110px; width: 92px;86    display: flex; align-items: center; justify-content: center;87    font-size: 44px; color: #333; box-shadow: 0 1px 3px rgba(0,0,0,0.08);88  }89  .key.small { width: 140px; }90  .key.large { width: 520px; }91  .key.action { background: #DCD8F3; color: #2E2E5F; font-weight: 700; }92  .kb-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 26px; padding: 0 6px; }93  .gesture-bar {94    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);95    width: 300px; height: 10px; background: #C9C9C9; border-radius: 6px;96  }97</style>98</head>99<body>100<div id="render-target">101 102  <!-- Status bar -->103  <div class="status-bar">104    <div class="status-left">105      <div>8:22</div>106      <div class="status-icon" title="record">107        <svg viewBox="0 0 24 24" fill="#555"><rect x="4" y="6" width="16" height="12" rx="2"></rect><path d="M9 9h6v6H9z" fill="#777"></path></svg>108      </div>109      <div class="status-icon" title="cast">110        <svg viewBox="0 0 24 24" fill="#555"><rect x="3" y="6" width="18" height="12" rx="2" fill="none" stroke="#555" stroke-width="2"></rect><path d="M4 18c3 0 5 2 5 4" stroke="#555" stroke-width="2" fill="none"></path></svg>111      </div>112    </div>113    <div class="status-right">114      <div class="status-icon" title="wifi">115        <svg viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2">116          <path d="M2 8c5-5 15-5 20 0"></path>117          <path d="M5 12c3-3 11-3 14 0"></path>118          <path d="M8 16c2-2 6-2 8 0"></path>119          <circle cx="12" cy="19" r="1.8" fill="#555"></circle>120        </svg>121      </div>122      <div class="status-icon" title="battery">123        <svg viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2">124          <rect x="3" y="6" width="16" height="12" rx="2"></rect>125          <rect x="5" y="8" width="12" height="8" fill="#777"></rect>126          <rect x="20" y="10" width="2" height="4" rx="1" fill="#555"></rect>127        </svg>128      </div>129    </div>130  </div>131 132  <!-- Search bar -->133  <div class="search-wrap">134    <div class="search-bar">135      <div class="icon-btn">136        <svg viewBox="0 0 24 24" fill="none" stroke="#2E3F2C" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">137          <path d="M15 18l-6-6 6-6"></path>138        </svg>139      </div>140      <div class="search-text">141        98102142        <div class="caret"></div>143      </div>144      <div class="icon-btn clear-btn">145        <svg viewBox="0 0 24 24" fill="none" stroke="#2E3F2C" stroke-width="2.2" stroke-linecap="round">146          <path d="M6 6l12 12M18 6L6 18"></path>147        </svg>148      </div>149    </div>150  </div>151 152  <!-- Results list -->153  <div class="results">154    <div class="result-item">155      <div class="flag-box">156        <svg viewBox="0 0 24 24" fill="none" stroke="#2E3F2C" stroke-width="2">157          <path d="M6 3v18"></path>158          <path d="M6 4h10l-2 3 2 3H6z" fill="none"></path>159        </svg>160      </div>161      <div class="result-text">162        <div class="city">Seattle</div>163        <div class="country">Washington, United States</div>164      </div>165    </div>166 167    <div class="result-item">168      <div class="flag-box">169        <svg viewBox="0 0 24 24" fill="none" stroke="#2E3F2C" stroke-width="2">170          <path d="M6 3v18"></path>171          <path d="M6 4h10l-2 3 2 3H6z" fill="none"></path>172        </svg>173      </div>174      <div class="result-text">175        <div class="city">Issaquah</div>176        <div class="country">Washington, United States</div>177      </div>178    </div>179 180    <div class="result-item">181      <div class="flag-box">182        <svg viewBox="0 0 24 24" fill="none" stroke="#2E3F2C" stroke-width="2">183          <path d="M6 3v18"></path>184          <path d="M6 4h10l-2 3 2 3H6z" fill="none"></path>185        </svg>186      </div>187      <div class="result-text">188        <div class="city">Mount Wilson</div>189        <div class="country">California, United States</div>190      </div>191    </div>192 193    <div class="result-item">194      <div class="flag-box">195        <svg viewBox="0 0 24 24" fill="none" stroke="#2E3F2C" stroke-width="2">196          <path d="M6 3v18"></path>197          <path d="M6 4h10l-2 3 2 3H6z" fill="none"></path>198        </svg>199      </div>200      <div class="result-text">201        <div class="city">Sierra Madre</div>202        <div class="country">California, United States</div>203      </div>204    </div>205 206    <div class="result-item">207      <div class="flag-box">208        <svg viewBox="0 0 24 24" fill="none" stroke="#2E3F2C" stroke-width="2">209          <path d="M6 3v18"></path>210          <path d="M6 4h10l-2 3 2 3H6z" fill="none"></path>211        </svg>212      </div>213      <div class="result-text">214        <div class="city">Enumclaw</div>215        <div class="country">Washington, United States</div>216      </div>217    </div>218 219    <div class="result-item">220      <div class="flag-box">221        <svg viewBox="0 0 24 24" fill="none" stroke="#2E3F2C" stroke-width="2">222          <path d="M6 3v18"></path>223          <path d="M6 4h10l-2 3 2 3H6z" fill="none"></path>224        </svg>225      </div>226      <div class="result-text">227        <div class="city">Kenmore</div>228        <div class="country">Washington, United States</div>229      </div>230    </div>231  </div>232 233  <!-- Keyboard -->234  <div class="keyboard">235    <div class="kb-top">236      <div class="kb-icon">237        <svg viewBox="0 0 24 24" fill="#777"><rect x="3" y="3" width="6" height="6"></rect><rect x="15" y="3" width="6" height="6"></rect><rect x="3" y="15" width="6" height="6"></rect><rect x="15" y="15" width="6" height="6"></rect></svg>238      </div>239      <div class="kb-icon">😊</div>240      <div class="kb-icon">GIF</div>241      <div class="kb-icon">242        <svg viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2">243          <circle cx="12" cy="12" r="8"></circle>244          <path d="M12 8v4l3 3"></path>245        </svg>246      </div>247      <div class="kb-icon">Gx</div>248      <div class="kb-icon">249        <svg viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2">250          <path d="M4 20l4-12 12-4-4 12z"></path>251        </svg>252      </div>253      <div class="kb-icon">254        <svg viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round">255          <path d="M5 11c0-4 6-4 6 0v4"></path>256          <path d="M13 17h6"></path>257        </svg>258      </div>259    </div>260 261    <div class="kb-row">262      <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>263    </div>264    <div class="kb-row">265      <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>266    </div>267    <div class="kb-row">268      <div class="key small">⇧</div>269      <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>270      <div class="key small">271        <svg viewBox="0 0 24 24" width="42" height="42">272          <path d="M6 6l12 12M18 6L6 18" stroke="#333" stroke-width="2" fill="none"></path>273        </svg>274      </div>275    </div>276    <div class="kb-bottom">277      <div class="key small">?123</div>278      <div class="key">,</div>279      <div class="key">😊</div>280      <div class="key large"></div>281      <div class="key">.</div>282      <div class="key action">283        <svg viewBox="0 0 24 24">284          <circle cx="11" cy="11" r="7" fill="none" stroke="#2E2E5F" stroke-width="2"></circle>285          <path d="M20 20l-4-4" stroke="#2E2E5F" stroke-width="2" stroke-linecap="round"></path>286        </svg>287      </div>288    </div>289  </div>290 291  <div class="gesture-bar"></div>292 293</div>294</body>295</html>