GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Mobile UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #f2f2f2;14  }15 16  /* Status bar */17  .statusbar {18    height: 120px;19    background: #e6e6e6;20    color: #3c3c3c;21    display: flex;22    align-items: center;23    padding: 0 36px;24    font-weight: 600;25    font-size: 40px;26    letter-spacing: 0.3px;27  }28  .statusbar .right {29    margin-left: auto;30    display: flex;31    gap: 24px;32    align-items: center;33    font-size: 34px;34    color: #6b6b6b;35  }36  .icon-small {37    width: 36px; height: 36px;38  }39 40  /* Search area */41  .search-wrap {42    padding: 24px 24px 10px 24px;43    background: #e6e6e6;44    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.06);45  }46  .search-bar {47    background: #ffffff;48    border-radius: 28px;49    height: 120px;50    display: flex;51    align-items: center;52    padding: 0 28px;53    box-shadow: 0 1px 0 rgba(0,0,0,0.04);54  }55  .back-btn {56    width: 72px; height: 72px;57    border-radius: 36px;58    display: grid;59    place-items: center;60  }61  .search-input {62    flex: 1;63    margin: 0 20px;64    color: #222;65    font-size: 44px;66    font-weight: 600;67  }68  .mic {69    width: 84px; height: 84px;70    background: #d9f4ff;71    border-radius: 42px;72    display: grid;73    place-items: center;74  }75  .mic svg { width: 44px; height: 44px; fill: #0ea5e9; }76 77  /* Sections */78  .content {79    padding: 22px 24px 0 24px;80  }81  .section-title {82    display: flex;83    align-items: center;84    gap: 18px;85    color: #1f2937;86    font-weight: 800;87    font-size: 44px;88    letter-spacing: 0.5px;89    margin: 18px 0 22px 8px;90  }91  .trend-icon svg { width: 40px; height: 40px; fill: #3b82f6; }92 93  /* Chips */94  .chips {95    display: flex;96    flex-wrap: wrap;97    gap: 22px;98    padding-left: 8px;99  }100  .chip {101    border: 2px solid #d1d5db;102    border-radius: 18px;103    padding: 26px 28px;104    background: #fff;105    font-size: 38px;106    color: #111827;107    box-shadow: 0 1px 0 rgba(0,0,0,0.03);108  }109 110  /* Trending near you */111  .cards {112    display: grid;113    grid-template-columns: 1fr 1fr;114    gap: 24px;115    padding: 10px 8px 24px 8px;116  }117  .card {118    background: #ffffff;119    border-radius: 16px;120    overflow: hidden;121    border: 1px solid #e5e7eb;122  }123  .card-img {124    height: 340px;125    background: #E0E0E0;126    border-bottom: 1px solid #BDBDBD;127    display: flex;128    align-items: center;129    justify-content: center;130    color: #757575;131    font-size: 34px;132  }133  .badge {134    position: absolute;135    top: 16px; left: 16px;136    background: #2dd4bf;137    color: #053b2f;138    font-weight: 700;139    font-size: 28px;140    padding: 8px 14px;141    border-radius: 12px;142  }143  .card-header {144    position: relative;145  }146  .card-body {147    padding: 18px 20px 22px 20px;148  }149  .card-title {150    font-size: 34px;151    color: #111827;152    font-weight: 700;153    margin-bottom: 6px;154  }155  .card-sub {156    font-size: 28px;157    color: #6b7280;158  }159 160  /* Keyboard overlay */161  .keyboard {162    position: absolute;163    left: 0; right: 0; bottom: 0;164    height: 980px;165    background: #111315;166    border-top-left-radius: 24px;167    border-top-right-radius: 24px;168    box-shadow: 0 -6px 18px rgba(0,0,0,0.25);169    color: #fff;170  }171  .kb-suggest {172    display: flex;173    align-items: center;174    gap: 18px;175    padding: 22px 24px;176    border-bottom: 1px solid rgba(255,255,255,0.08);177  }178  .s-chip {179    background: #24272b;180    color: #d1d5db;181    font-weight: 700;182    padding: 18px 26px;183    border-radius: 32px;184    font-size: 36px;185  }186  .kb-mic {187    margin-left: auto;188    width: 72px; height: 72px;189    display: grid; place-items: center;190  }191  .kb-rows {192    padding: 12px 18px 18px 18px;193  }194  .kb-row {195    display: grid;196    grid-template-columns: repeat(10, 1fr);197    gap: 14px;198    margin: 18px 0;199  }200  .key {201    background: #1c1f23;202    border-radius: 14px;203    height: 120px;204    display: grid; place-items: center;205    font-size: 46px;206    font-weight: 600;207    color: #f5f5f5;208  }209  .kb-row.mid { grid-template-columns: repeat(9, 1fr); padding: 0 50px; }210  .kb-row.bottom { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr 1fr 1.4fr; }211  .spacebar {212    grid-column: span 3;213  }214  .search-fab {215    position: absolute;216    right: 28px;217    bottom: 26px;218    width: 132px; height: 132px;219    background: #9ff3ef;220    border-radius: 66px;221    display: grid; place-items: center;222  }223  .search-fab svg { width: 56px; height: 56px; stroke: #0f766e; fill: none; stroke-width: 10; }224</style>225</head>226<body>227<div id="render-target">228  <!-- Status Bar -->229  <div class="statusbar">230    10:36231    <div class="right">232      14°233      <svg class="icon-small" viewBox="0 0 24 24"><path fill="#6b6b6b" d="M12 2a7 7 0 0 0 0 14 7 7 0 0 1 0-14zm0 20c-4.4 0-8-3.6-8-8h2a6 6 0 0 0 12 0h2c0 4.4-3.6 8-8 8z"/></svg>234      <svg class="icon-small" viewBox="0 0 24 24"><path fill="#6b6b6b" d="M3 18h18v2H3zm2-3h14v2H5zm2-3h10v2H7zm2-3h6v2H9z"/></svg>235    </div>236  </div>237 238  <!-- Search -->239  <div class="search-wrap">240    <div class="search-bar">241      <div class="back-btn">242        <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#374151" d="M15.4 4.6 8 12l7.4 7.4-1.4 1.4L5.2 12l8.8-8.8z"/></svg>243      </div>244      <div class="search-input">Quechua hiking boots</div>245      <div class="mic">246        <svg viewBox="0 0 24 24"><path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V20H9v2h6v-2h-2v-2.08A7 7 0 0 0 19 11h-2z"/></svg>247      </div>248    </div>249  </div>250 251  <!-- Content -->252  <div class="content">253    <div class="section-title">254      TRENDING SEARCHES255      <span class="trend-icon">256        <svg viewBox="0 0 24 24"><path d="M3 17h2.6l4-5 3 3 5-7L23 12v5H3z"/></svg>257      </span>258    </div>259 260    <div class="chips">261      <div class="chip">Easy Adjust Hiking Pole - Mt100 Comfort Black</div>262      <div class="chip">Easy Adjust Hiking Pole - Mt100 Comfort Black</div>263      <div class="chip">Hiking Pole - Mt100 Ergonomic Green</div>264      <div class="chip">Ultra Compact Trekking Pole - Mt900 Black</div>265      <div class="chip">Ultra Compact Trekking Pole - Mt900 Black</div>266    </div>267 268    <div class="section-title" style="margin-top: 36px;">TRENDING NEAR YOU</div>269 270    <div class="cards">271      <div class="card">272        <div class="card-header">273          <div class="card-img">[IMG: Dark Zip Jacket]</div>274          <div class="badge">ECO DESIGN</div>275        </div>276        <div class="card-body">277          <div class="card-title">Warm Hiking Fleece</div>278          <div class="card-sub">Quechua . Men</div>279        </div>280      </div>281 282      <div class="card">283        <div class="card-header">284          <div class="card-img">[IMG: Navy Sports Shorts]</div>285        </div>286        <div class="card-body">287          <div class="card-title">Light Training Shorts</div>288          <div class="card-sub">Domyos . Men</div>289        </div>290      </div>291    </div>292  </div>293 294  <!-- Keyboard -->295  <div class="keyboard">296    <div class="kb-suggest">297      <div class="s-chip">boots</div>298      <div class="s-chip">BOOTS</div>299      <div class="s-chip">BOOTSTRAP</div>300      <div class="kb-mic">301        <svg viewBox="0 0 24 24" width="40" height="40"><path fill="#d1d5db" d="M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V20H9v2h6v-2h-2v-2.08A7 7 0 0 0 19 11h-2z"/></svg>302      </div>303    </div>304 305    <div class="kb-rows">306      <div class="kb-row">307        <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>308      </div>309      <div class="kb-row mid">310        <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>311      </div>312      <div class="kb-row">313        <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">⌫</div><div class="key">,</div><div class="key">.</div>314      </div>315      <div class="kb-row bottom">316        <div class="key">?123</div>317        <div class="key">⎵</div>318        <div class="key spacebar"></div>319        <div class="key"></div>320        <div class="key"></div>321        <div class="key"></div>322        <div class="key">↵</div>323      </div>324    </div>325 326    <div class="search-fab">327      <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="6"></circle><path d="M20 20l-4-4"></path></svg>328    </div>329  </div>330</div>331</body>332</html>