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>Search Screen Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14  }15 16  /* Status bar */17  .status-bar {18    height: 90px;19    padding: 0 34px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #4a4a4a;24    font-size: 34px;25    letter-spacing: 1px;26  }27  .status-right {28    display: flex;29    align-items: center;30    gap: 18px;31  }32  .status-dot {33    width: 16px; height: 16px; background: #9e9e9e; border-radius: 50%;34  }35  .battery {36    width: 60px; height: 28px; border: 3px solid #4a4a4a; border-radius: 6px; position: relative;37  }38  .battery:after {39    content: ""; position: absolute; right: -10px; top: 6px; width: 6px; height: 16px; background: #4a4a4a; border-radius: 2px;40  }41 42  /* Close icon */43  .close-btn {44    position: absolute;45    top: 120px;46    left: 34px;47    width: 56px; height: 56px; cursor: pointer;48  }49  .close-btn:before, .close-btn:after {50    content: "";51    position: absolute;52    left: 26px; top: 8px;53    width: 4px; height: 40px;54    background: #111;55    transform: rotate(45deg);56    border-radius: 2px;57  }58  .close-btn:after {59    transform: rotate(-45deg);60  }61 62  /* Search bar */63  .search-wrap {64    position: absolute;65    top: 115px;66    left: 110px;67    width: 860px;68    height: 110px;69    border: 2px solid #9e9e9e;70    border-radius: 10px;71    display: flex;72    align-items: center;73    padding: 0 24px;74    box-sizing: border-box;75  }76  .search-text {77    flex: 1;78    color: #1a1a1a;79    font-size: 42px;80    letter-spacing: 1px;81  }82  .clear-x {83    width: 40px; height: 40px; position: relative;84  }85  .clear-x:before, .clear-x:after {86    content: "";87    position: absolute;88    left: 19px; top: 4px;89    width: 4px; height: 32px;90    background: #111;91    transform: rotate(45deg);92    border-radius: 2px;93  }94  .clear-x:after {95    transform: rotate(-45deg);96  }97 98  /* Tabs */99  .tabs {100    position: absolute;101    top: 250px;102    left: 40px;103    display: flex;104    gap: 40px;105    color: #333;106    font-size: 34px;107    letter-spacing: 2px;108  }109 110  /* Section title */111  .section-title {112    position: absolute;113    top: 420px;114    left: 0;115    width: 100%;116    text-align: center;117    color: #222;118    font-size: 44px;119    letter-spacing: 2px;120  }121 122  /* Image grid */123  .grid {124    position: absolute;125    top: 520px;126    left: 0;127    width: 100%;128    padding: 0 18px;129    box-sizing: border-box;130    display: grid;131    grid-template-columns: 1fr 1fr;132    gap: 18px;133  }134  .img-card {135    height: 820px;136    background: #E0E0E0;137    border: 1px solid #BDBDBD;138    display: flex;139    align-items: center;140    justify-content: center;141    color: #666;142    font-size: 36px;143    text-align: center;144  }145 146  /* Keyboard */147  .keyboard {148    position: absolute;149    left: 0;150    bottom: 0;151    width: 1080px;152    height: 880px;153    background: #F8E3DA;154    border-top-left-radius: 24px;155    border-top-right-radius: 24px;156    box-shadow: 0 -2px 6px rgba(0,0,0,0.06) inset;157  }158  .kb-suggest {159    height: 86px;160    display: flex;161    align-items: center;162    padding: 0 24px;163    gap: 24px;164    color: #3a3a3a;165    font-size: 36px;166  }167  .divider {168    width: 2px; height: 48px; background: #c9b5ae;169  }170  .pill {171    background: #ffffff;172    padding: 8px 20px;173    border-radius: 20px;174    border: 1px solid #e0d0c9;175  }176  .kb-row {177    display: flex;178    padding: 12px 18px;179    gap: 14px;180    justify-content: center;181  }182  .key {183    background: #ffffff;184    height: 120px;185    min-width: 88px;186    flex: 1;187    max-width: 96px;188    border-radius: 22px;189    border: 1px solid #f1dfd8;190    display: flex;191    align-items: center;192    justify-content: center;193    font-size: 44px;194    color: #222;195    box-shadow: 0 1px 0 rgba(0,0,0,0.04);196  }197  .key-wide { flex: 1.2; max-width: 120px; }198  .key-func { max-width: 150px; }199  .spacebar {200    flex: 4;201    max-width: none;202    height: 120px;203    border-radius: 28px;204  }205  .round-button {206    width: 140px; height: 140px; border-radius: 70px; background: #efb6a6; display: flex; align-items: center; justify-content: center;207  }208  .key-icon {209    width: 46px; height: 46px;210  }211 212  /* Small bottom nudger to mimic gesture bar */213  .gesture-bar {214    position: absolute;215    bottom: 10px;216    left: 50%;217    transform: translateX(-50%);218    width: 420px; height: 10px; background: #bfbfbf; border-radius: 6px; opacity: 0.6;219  }220</style>221</head>222<body>223<div id="render-target">224 225  <!-- Status bar -->226  <div class="status-bar">227    <div>11:03</div>228    <div class="status-right">229      <div class="status-dot"></div>230      <div class="status-dot"></div>231      <div style="font-size:30px; color:#222;">100%</div>232      <div class="battery"></div>233    </div>234  </div>235 236  <!-- Close/back button -->237  <div class="close-btn" aria-label="Close"></div>238 239  <!-- Search box -->240  <div class="search-wrap">241    <div class="search-text">YOGA PANTS</div>242    <div class="clear-x" aria-label="Clear"></div>243  </div>244 245  <!-- Tabs -->246  <div class="tabs">247    <div>STORES</div>248    <div>IMAGE</div>249    <div>SCAN</div>250  </div>251 252  <!-- Section Title -->253  <div class="section-title">YOU MIGHT BE INTERESTED IN</div>254 255  <!-- Image Grid -->256  <div class="grid">257    <div class="img-card">[IMG: Gray cargo pants with pockets]</div>258    <div class="img-card">[IMG: Taupe flared cargo pants]</div>259  </div>260 261  <!-- Keyboard -->262  <div class="keyboard">263    <div class="kb-suggest">264      <div class="pill">PANTS</div>265      <div class="divider"></div>266      <div class="pill">🏖️</div>267      <div class="pill">👖</div>268      <div style="margin-left:auto; display:flex; align-items:center; gap:20px;">269        <svg class="key-icon" viewBox="0 0 24 24"><path fill="#444" d="M12 3a9 9 0 1 0 5.65 15.94l3.2 3.2 1.42-1.42-3.2-3.2A9 9 0 0 0 12 3zm0 2a7 7 0 1 1 0 14 7 7 0 0 1 0-14z"/></svg>270        <svg class="key-icon" viewBox="0 0 24 24"><path fill="#444" d="M12 14c2.2 0 4-1.8 4-4V7c0-2.2-1.8-4-4-4S8 4.8 8 7v3c0 2.2 1.8 4 4 4zm6-4c0 3.1-2.3 5.6-5.2 5.9V18h3.2v2H8v-2h3.2v-2.1C8.3 15.6 6 13.1 6 10h2c0 2.2 1.8 4 4 4s4-1.8 4-4h2z"/></svg>271      </div>272    </div>273 274    <!-- Row 1 -->275    <div class="kb-row">276      <div class="key">Q</div>277      <div class="key">W</div>278      <div class="key">E</div>279      <div class="key">R</div>280      <div class="key">T</div>281      <div class="key">Y</div>282      <div class="key">U</div>283      <div class="key">I</div>284      <div class="key">O</div>285      <div class="key">P</div>286    </div>287    <!-- Row 2 -->288    <div class="kb-row">289      <div class="key">A</div>290      <div class="key">S</div>291      <div class="key">D</div>292      <div class="key">F</div>293      <div class="key">G</div>294      <div class="key">H</div>295      <div class="key">J</div>296      <div class="key">K</div>297      <div class="key">L</div>298    </div>299    <!-- Row 3 -->300    <div class="kb-row">301      <div class="key key-func">⌂</div>302      <div class="key">Z</div>303      <div class="key">X</div>304      <div class="key">C</div>305      <div class="key">V</div>306      <div class="key">B</div>307      <div class="key">N</div>308      <div class="key">M</div>309      <div class="key key-func">310        <svg viewBox="0 0 24 24" width="44" height="44"><path fill="#111" d="m22 12-9-9v5H6v8h7v5l9-9z"/></svg>311      </div>312    </div>313    <!-- Row 4 -->314    <div class="kb-row">315      <div class="key key-func">?123</div>316      <div class="key key-func">,</div>317      <div class="key spacebar"></div>318      <div class="key key-func">.</div>319      <div class="round-button" aria-label="Search">320        <svg viewBox="0 0 24 24" width="48" height="48"><path fill="#7a2b19" d="M10 2a8 8 0 1 0 5.3 14l4.1 4.1 1.4-1.4-4.1-4.1A8 8 0 0 0 10 2zm0 2a6 6 0 1 1 0 12A6 6 0 0 1 10 4z"/></svg>321      </div>322    </div>323    <div class="gesture-bar"></div>324  </div>325</div>326</body>327</html>