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>Mock - Main Group Search</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #121212;15    color: #FFFFFF;16    font-family: "Roboto", "Segoe UI", Arial, sans-serif;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0; left: 0; right: 0;23    height: 90px;24    padding: 0 32px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #E0E0E0;29    font-size: 30px;30  }31  .status-left { display: flex; align-items: center; gap: 18px; }32  .status-right { display: flex; align-items: center; gap: 22px; }33 34  /* App bar */35  .app-bar {36    position: absolute;37    top: 90px; left: 0; right: 0;38    height: 150px;39    display: flex;40    align-items: center;41    justify-content: center;42    color: #F5F5F5;43  }44  .app-bar h1 {45    margin: 0;46    font-size: 64px;47    font-weight: 500;48    letter-spacing: 0.5px;49  }50  .nav-left, .nav-right {51    position: absolute;52    top: 50%;53    transform: translateY(-50%);54  }55  .nav-left { left: 24px; }56  .nav-right { right: 24px; }57 58  /* Search line */59  .search-wrap {60    position: absolute;61    top: 250px;62    left: 0;63    right: 0;64    padding: 28px 36px 20px 36px;65    border-bottom: 2px solid #2A2A2A;66  }67  .search-line {68    font-size: 48px;69    color: #EDEDED;70    display: flex;71    align-items: center;72  }73  .search-text { white-space: nowrap; }74  .caret {75    display: inline-block;76    width: 3px;77    height: 58px;78    background: #BB86FC;79    margin-left: 6px;80    border-radius: 2px;81  }82  .clear-btn {83    margin-left: auto;84    width: 64px;85    height: 64px;86    display: flex;87    align-items: center;88    justify-content: center;89    color: #E0E0E0;90  }91 92  /* Result list */93  .list {94    position: absolute;95    top: 356px;96    left: 0; right: 0;97  }98  .list-item {99    display: flex;100    align-items: center;101    padding: 36px;102    gap: 28px;103    border-bottom: 1px solid #2A2A2A;104  }105  .list-title {106    font-size: 44px;107    color: #F0F0F0;108  }109  .list-sub {110    font-size: 34px;111    color: #A0A0A0;112    margin-top: 6px;113  }114  .flag {115    margin-left: auto;116    width: 120px;117    height: 76px;118    background: #E0E0E0;119    border: 1px solid #BDBDBD;120    color: #757575;121    display: flex;122    align-items: center;123    justify-content: center;124    font-size: 26px;125  }126 127  /* Keyboard */128  .keyboard {129    position: absolute;130    left: 0; right: 0; bottom: 36px;131    height: 880px;132    background: #1B1B1B;133    border-top: 1px solid #2A2A2A;134    box-shadow: 0 -2px 0 rgba(255,255,255,0.03) inset;135  }136  .suggestions {137    height: 110px;138    display: flex;139    align-items: center;140    padding: 0 22px;141    gap: 22px;142    color: #E0E0E0;143    font-size: 36px;144    border-bottom: 1px solid #2A2A2A;145  }146  .suggestions .pipe {147    color: #666;148  }149  .s-right {150    margin-left: auto;151    display: flex; align-items: center; gap: 16px;152  }153 154  .keys {155    padding: 26px 18px 12px 18px;156    display: grid;157    grid-template-rows: repeat(4, 1fr);158    row-gap: 22px;159  }160  .row {161    display: flex; justify-content: center; gap: 18px;162  }163  .key {164    background: #2A2A2A;165    color: #EAEAEA;166    border-radius: 16px;167    height: 132px;168    min-width: 88px;169    flex: 0 0 88px;170    display: flex; align-items: center; justify-content: center;171    font-size: 40px;172  }173  .key.wide { flex-basis: 140px; min-width: 140px; }174  .key.extra-wide { flex-basis: 500px; min-width: 500px; }175  .key.circle {176    border-radius: 50%;177    width: 120px; height: 120px; min-width: 120px;178  }179  .key.light {180    background: #D0D9E8; color: #1B1B1B;181  }182 183  /* Gesture bar */184  .gesture {185    position: absolute;186    bottom: 10px; left: 50%;187    transform: translateX(-50%);188    width: 320px; height: 10px;189    border-radius: 10px;190    background: #E5E5E5;191    opacity: 0.9;192  }193 194  /* Utility icon styles */195  .icon { width: 56px; height: 56px; }196  .icon-sm { width: 40px; height: 40px; }197  .pin { width: 54px; height: 54px; }198</style>199</head>200<body>201<div id="render-target">202 203  <!-- Status Bar -->204  <div class="status-bar">205    <div class="status-left">206      <div>9:28</div>207      <svg class="icon-sm" viewBox="0 0 24 24" fill="none" stroke="#E0E0E0" stroke-width="2"><circle cx="12" cy="12" r="2"/><circle cx="5" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>208      <svg class="icon-sm" viewBox="0 0 24 24" fill="#E0E0E0"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>209      <svg class="icon-sm" viewBox="0 0 24 24" fill="none" stroke="#E0E0E0" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>210    </div>211    <div class="status-right">212      <svg class="icon-sm" viewBox="0 0 24 24" fill="none" stroke="#E0E0E0" stroke-width="2">213        <path d="M4 9v6a2 2 0 002 2h2v-2H6V9h2V7H6a2 2 0 00-2 2z"/>214        <rect x="10" y="7" width="10" height="10" rx="2" ry="2" stroke="#E0E0E0" fill="none"/>215        <rect x="20" y="10" width="2" height="4" fill="#E0E0E0" stroke="none"/>216      </svg>217      <svg class="icon-sm" viewBox="0 0 24 24" fill="none" stroke="#E0E0E0" stroke-width="2">218        <path d="M2 17h20M6 13l6-6 6 6"/>219      </svg>220      <svg class="icon-sm" viewBox="0 0 24 24" fill="none" stroke="#E0E0E0" stroke-width="2">221        <path d="M6 18V6a3 3 0 013-3h6a3 3 0 013 3v12a3 3 0 01-3 3H9a3 3 0 01-3-3z"/>222      </svg>223    </div>224  </div>225 226  <!-- App Bar -->227  <div class="app-bar">228    <div class="nav-left">229      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">230        <path d="M15 19L8 12l7-7"/>231      </svg>232    </div>233    <h1>Main Group</h1>234    <div class="nav-right">235      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round">236        <path d="M5 5l14 14M19 5L5 19"/>237      </svg>238    </div>239  </div>240 241  <!-- Search line -->242  <div class="search-wrap">243    <div class="search-line">244      <div class="search-text">Dawson Creek</div>245      <span class="caret"></span>246      <div class="clear-btn">247        <svg class="icon-sm" viewBox="0 0 24 24" fill="none" stroke="#E0E0E0" stroke-width="2.5" stroke-linecap="round">248          <path d="M5 5l14 14M19 5L5 19"/>249        </svg>250      </div>251    </div>252  </div>253 254  <!-- Results -->255  <div class="list">256    <div class="list-item">257      <svg class="pin" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2">258        <path d="M12 22s7-6.2 7-12a7 7 0 10-14 0c0 5.8 7 12 7 12z"/>259        <circle cx="12" cy="10" r="3"/>260      </svg>261      <div>262        <div class="list-title">Dawson Creek</div>263        <div class="list-sub">British Columbia, Canada</div>264      </div>265      <div class="flag">[IMG: Canada Flag]</div>266    </div>267  </div>268 269  <!-- Keyboard mock -->270  <div class="keyboard">271    <div class="suggestions">272      <svg class="icon-sm" viewBox="0 0 24 24" fill="#E0E0E0"><rect x="3" y="3" width="18" height="18" rx="2"/></svg>273      <div>Creek</div>274      <div class="pipe">|</div>275      <div>Creeks</div>276      <div class="pipe">|</div>277      <div>Creekside</div>278      <div class="s-right">279        <svg class="icon-sm" viewBox="0 0 24 24" fill="none" stroke="#E0E0E0" stroke-width="2">280          <path d="M12 14c2.2 0 4-1.8 4-4V7a4 4 0 10-8 0v3c0 2.2 1.8 4 4 4z"/>281          <path d="M8 14v2a4 4 0 008 0v-2"/>282        </svg>283      </div>284    </div>285 286    <div class="keys">287      <div class="row">288        <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>289        <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>290      </div>291      <div class="row">292        <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>293        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>294      </div>295      <div class="row">296        <div class="key wide">⇧</div>297        <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>298        <div class="key">b</div><div class="key">n</div><div class="key">m</div>299        <div class="key wide">⌫</div>300      </div>301      <div class="row">302        <div class="key circle">?123</div>303        <div class="key">,</div>304        <div class="key extra-wide"></div>305        <div class="key">.</div>306        <div class="key circle light">307          <svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="#1B1B1B" stroke-width="2">308            <circle cx="11" cy="11" r="7"/><path d="M21 21l-4-4"/>309          </svg>310        </div>311      </div>312    </div>313  </div>314 315  <!-- Gesture bar -->316  <div class="gesture"></div>317</div>318</body>319</html>