GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - Search Screen</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #0f1113;13    color: #e9eef2;14  }15  .status-bar {16    position: absolute;17    top: 0;18    left: 0;19    width: 1080px;20    height: 120px;21    padding: 0 32px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #fff;26  }27  .status-left {28    display: flex;29    align-items: center;30    gap: 18px;31  }32  .mini-icon {33    width: 34px;34    height: 34px;35    background: #ffffff;36    border-radius: 50%;37    opacity: 0.85;38  }39  .status-right {40    display: flex;41    align-items: center;42    gap: 22px;43  }44  /* Search bar */45  .search-wrap {46    position: absolute;47    top: 130px;48    left: 30px;49    width: 1020px;50    height: 110px;51    background: #1b1f22;52    border-radius: 24px;53    display: flex;54    align-items: center;55    padding: 0 24px;56    box-sizing: border-box;57  }58  .back-icon {59    width: 52px;60    height: 52px;61    margin-right: 18px;62    display: flex;63    align-items: center;64    justify-content: center;65  }66  .placeholder {67    font-size: 40px;68    color: #a9b0b8;69  }70  /* Tabs */71  .tabs {72    position: absolute;73    top: 260px;74    left: 0;75    width: 1080px;76    display: flex;77    justify-content: space-around;78    padding: 16px 0 0;79    color: #cbd3da;80    font-weight: 600;81    font-size: 36px;82  }83  .tab {84    padding: 22px 0;85    width: 33.33%;86    text-align: center;87    opacity: 0.85;88  }89  .tab.active {90    color: #32c3c9;91    border-bottom: 6px solid #32c3c9;92  }93  /* Nearby row */94  .nearby {95    position: absolute;96    top: 370px;97    left: 30px;98    width: 1020px;99    display: flex;100    align-items: center;101    gap: 24px;102    color: #9fdde0;103    font-size: 40px;104    padding: 26px 0;105    border-top: 1px solid #1b1f22;106    border-bottom: 1px solid #1b1f22;107  }108  /* Recent Searches section */109  .section-title {110    position: absolute;111    top: 480px;112    left: 30px;113    font-size: 44px;114    color: #cbd3da;115    font-weight: 700;116  }117  .list {118    position: absolute;119    top: 560px;120    left: 0;121    width: 1080px;122  }123  .item {124    width: 1080px;125    box-sizing: border-box;126    padding: 30px 30px;127    display: flex;128    align-items: center;129    justify-content: space-between;130    border-bottom: 1px solid #1f2326;131  }132  .item-left {133    display: flex;134    align-items: center;135    gap: 28px;136    font-size: 42px;137    color: #eef4f7;138  }139  .clock {140    width: 46px;141    height: 46px;142    border-radius: 50%;143    border: 3px solid #a9b0b8;144    position: relative;145    opacity: 0.9;146  }147  .clock:before {148    content: "";149    position: absolute;150    width: 4px;151    height: 12px;152    background: #a9b0b8;153    left: 50%;154    top: 22%;155    transform: translateX(-50%);156    border-radius: 2px;157  }158  .clock:after {159    content: "";160    position: absolute;161    width: 12px;162    height: 4px;163    background: #a9b0b8;164    left: 56%;165    top: 50%;166    border-radius: 2px;167  }168  .item-right {169    font-size: 38px;170    color: #8a9097;171  }172  /* Keyboard */173  .keyboard {174    position: absolute;175    bottom: 0;176    left: 0;177    width: 1080px;178    height: 980px;179    background: #121416;180    border-top: 1px solid #202428;181    padding: 24px 26px 40px;182    box-sizing: border-box;183  }184  .kb-row {185    display: flex;186    gap: 18px;187    margin-top: 26px;188  }189  .key {190    flex: 1;191    height: 120px;192    background: #21262a;193    border-radius: 22px;194    display: flex;195    align-items: center;196    justify-content: center;197    color: #e9eef2;198    font-size: 54px;199  }200  .key.small { flex: 0 0 120px; }201  .space { flex: 1 1 480px; }202  .search-fab {203    position: absolute;204    right: 30px;205    bottom: 38px;206    width: 140px;207    height: 140px;208    background: #a8f5f1;209    border-radius: 70px;210    display: flex;211    align-items: center;212    justify-content: center;213    box-shadow: 0 8px 20px rgba(0,0,0,0.35);214  }215  .divider {216    position: absolute;217    left: 30px;218    width: 1020px;219    height: 1px;220    background: #1b1f22;221  }222</style>223</head>224<body>225<div id="render-target">226 227  <!-- Status Bar -->228  <div class="status-bar">229    <div class="status-left">230      <div style="font-size:48px; font-weight:600;">7:01</div>231      <div class="mini-icon"></div>232      <div class="mini-icon"></div>233      <div class="mini-icon"></div>234      <div class="mini-icon"></div>235      <div class="mini-icon" style="opacity:.7;"></div>236    </div>237    <div class="status-right">238      <!-- WiFi icon -->239      <svg width="46" height="34">240        <path d="M2 12 Q23 0 44 12" stroke="#ffffff" stroke-width="4" fill="none" opacity="0.9"></path>241        <path d="M8 18 Q23 9 38 18" stroke="#ffffff" stroke-width="4" fill="none" opacity="0.9"></path>242        <circle cx="23" cy="26" r="4" fill="#ffffff"></circle>243      </svg>244      <!-- Battery icon -->245      <svg width="68" height="34">246        <rect x="2" y="6" width="54" height="22" rx="4" ry="4" stroke="#ffffff" stroke-width="3" fill="none"></rect>247        <rect x="56" y="12" width="10" height="10" rx="2" fill="#ffffff"></rect>248        <rect x="6" y="10" width="38" height="14" rx="2" fill="#ffffff"></rect>249      </svg>250    </div>251  </div>252 253  <!-- Search bar -->254  <div class="search-wrap">255    <div class="back-icon">256      <svg width="42" height="42" viewBox="0 0 24 24">257        <path d="M15 18 L9 12 L15 6" stroke="#a9b0b8" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>258      </svg>259    </div>260    <div class="placeholder">Search city, neighborhood or school</div>261  </div>262 263  <!-- Tabs -->264  <div class="tabs">265    <div class="tab">FOR SALE</div>266    <div class="tab active">FOR RENT</div>267    <div class="tab">RECENTLY SOLD</div>268  </div>269 270  <!-- Nearby -->271  <div class="nearby">272    <svg width="38" height="38" viewBox="0 0 24 24">273      <path d="M12 2 L15 11 L24 12 L15 13 L12 22 L9 13 L0 12 L9 11 Z" fill="#39c6cc" opacity="0.95"/>274    </svg>275    <div>Nearby</div>276  </div>277 278  <!-- Section Title -->279  <div class="section-title">Recent Searches</div>280 281  <!-- List items -->282  <div class="list">283    <div class="item">284      <div class="item-left">285        <div class="clock"></div>286        <div>12029</div>287      </div>288      <div class="item-right">Zip</div>289    </div>290    <div class="item">291      <div class="item-left">292        <div class="clock"></div>293        <div>National center  for education statistics</div>294      </div>295    </div>296    <div class="item">297      <div class="item-left">298        <div class="clock"></div>299        <div>Italy, NY</div>300      </div>301      <div class="item-right">City</div>302    </div>303    <div class="item">304      <div class="item-left">305        <div class="clock"></div>306        <div>10031</div>307      </div>308      <div class="item-right">Zip</div>309    </div>310  </div>311 312  <!-- Keyboard mock -->313  <div class="keyboard">314    <!-- quick-top row of small icons -->315    <div class="kb-row" style="margin-top:0;">316      <div class="key small"><span style="font-size:40px;">◧</span></div>317      <div class="key small">🙂</div>318      <div class="key small">GIF</div>319      <div class="key small">G</div>320      <div class="key small">⚙</div>321      <div class="key small">🎨</div>322      <div class="key small">🎤</div>323    </div>324    <!-- letter rows -->325    <div class="kb-row">326      <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>327    </div>328    <div class="kb-row">329      <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>330    </div>331    <div class="kb-row">332      <div class="key small">⌂</div><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 small">⌫</div>333    </div>334    <div class="kb-row">335      <div class="key small">?123</div>336      <div class="key small">,</div>337      <div class="key small">🙂</div>338      <div class="key space"></div>339      <div class="key small">.</div>340    </div>341    <!-- floating search -->342    <div class="search-fab">343      <svg width="70" height="70" viewBox="0 0 24 24">344        <circle cx="10" cy="10" r="7" stroke="#111" stroke-width="2" fill="none"/>345        <line x1="15" y1="15" x2="22" y2="22" stroke="#111" stroke-width="3" stroke-linecap="round"/>346      </svg>347    </div>348  </div>349 350</div>351</body>352</html>