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 - Search with Keyboard</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: Arial, Helvetica, sans-serif;12  }13  #render-target {14    position: relative;15    width: 1080px;16    height: 2400px;17    overflow: hidden;18    background: #ffffff;19    border-radius: 0;20  }21 22  /* Top gradient header */23  .top-gradient {24    position: absolute;25    top: 0;26    left: 0;27    width: 1080px;28    height: 420px;29    background: linear-gradient(135deg, #a8dde3, #bfe9cb);30  }31 32  /* Status bar */33  .status-bar {34    position: absolute;35    top: 24px;36    left: 32px;37    width: 1016px;38    height: 64px;39    display: flex;40    align-items: center;41    justify-content: space-between;42    color: #1a1a1a;43    font-weight: 600;44    letter-spacing: 0.2px;45  }46  .status-left {47    display: flex;48    align-items: center;49    gap: 16px;50  }51  .status-right {52    display: flex;53    align-items: center;54    gap: 18px;55    margin-right: 8px;56  }57  .dot-icon {58    width: 22px;59    height: 22px;60    border-radius: 50%;61    background: rgba(0,0,0,0.15);62  }63  .wifi-icon, .battery-icon {64    display: inline-block;65  }66  .wifi-icon svg, .battery-icon svg {67    display: block;68  }69 70  /* Back button */71  .back-btn {72    position: absolute;73    top: 128px;74    left: 28px;75    width: 70px;76    height: 70px;77    display: flex;78    align-items: center;79    justify-content: center;80  }81  .back-btn svg {82    width: 44px;83    height: 44px;84    fill: none;85    stroke: #1f1f1f;86    stroke-width: 6;87    stroke-linecap: round;88    stroke-linejoin: round;89  }90 91  /* Search bar */92  .search-bar {93    position: absolute;94    top: 118px;95    left: 114px;96    width: 852px;97    height: 120px;98    background: #ffffff;99    border-radius: 28px;100    box-shadow: 0 2px 0 rgba(0,0,0,0.06);101    display: flex;102    align-items: center;103    padding: 0 28px;104    gap: 24px;105  }106  .search-icon {107    width: 38px;108    height: 38px;109  }110  .search-icon svg {111    width: 100%;112    height: 100%;113    fill: none;114    stroke: #1f1f1f;115    stroke-width: 6;116    stroke-linecap: round;117    stroke-linejoin: round;118  }119  .search-text {120    flex: 1;121    font-size: 42px;122    color: #212121;123    white-space: nowrap;124    overflow: hidden;125    text-overflow: ellipsis;126  }127  .search-text .underline {128    text-decoration: underline;129  }130  .clear-btn {131    width: 42px;132    height: 42px;133  }134  .clear-btn svg {135    width: 100%;136    height: 100%;137    fill: none;138    stroke: #1f1f1f;139    stroke-width: 6;140    stroke-linecap: round;141    stroke-linejoin: round;142  }143 144  /* Main empty body area (white) */145  .content-area {146    position: absolute;147    top: 420px;148    left: 0;149    width: 1080px;150    height: 1130px; /* up to keyboard */151    background: #ffffff;152  }153 154  /* Keyboard */155  .keyboard {156    position: absolute;157    bottom: 0;158    left: 0;159    width: 1080px;160    height: 850px;161    background: #1f1f1f;162    color: #eaeaea;163    border-top-left-radius: 28px;164    border-top-right-radius: 28px;165  }166  .kb-top {167    height: 92px;168    display: flex;169    align-items: center;170    justify-content: center;171    position: relative;172    color: #dcdcdc;173    font-size: 40px;174    letter-spacing: 0.4px;175  }176  .kb-top .mic {177    position: absolute;178    right: 40px;179    top: 22px;180    width: 46px;181    height: 46px;182  }183  .kb-top .mic svg {184    width: 100%; height: 100%;185    fill: none; stroke: #dcdcdc; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round;186  }187 188  .kb-rows {189    padding: 20px 30px 28px;190  }191  .row {192    display: flex;193    justify-content: space-between;194    margin-bottom: 24px;195    padding: 0 8px;196  }197  .key {198    width: 92px;199    height: 120px;200    background: #2b2b2b;201    border-radius: 22px;202    display: flex;203    align-items: center;204    justify-content: center;205    color: #f1f1f1;206    font-size: 44px;207    box-shadow: inset 0 -2px 0 rgba(255,255,255,0.03);208  }209  .key.small {210    width: 128px;211  }212  .space-row {213    display: flex;214    align-items: center;215    justify-content: space-between;216    padding: 0 20px;217    margin-top: 12px;218  }219  .function-key {220    height: 116px;221    background: #3a3a3a;222    border-radius: 26px;223    color: #e6e6e6;224    font-size: 38px;225    display: flex;226    align-items: center;227    justify-content: center;228    padding: 0 24px;229    box-shadow: inset 0 -2px 0 rgba(255,255,255,0.03);230  }231  .fk-wide {232    width: 560px;233    font-size: 40px;234    color: #e0e0e0;235  }236  .fk-medium {237    width: 130px;238  }239  .fk-left {240    width: 180px;241    background: #5f6776;242    color: #f0f0f0;243  }244  .fk-arrow {245    width: 160px;246    background: #bcd0ff;247    color: #0d2a6d;248  }249  .fk-arrow svg {250    width: 40px;251    height: 40px;252    fill: none;253    stroke: #0d2a6d;254    stroke-width: 8;255    stroke-linecap: round;256    stroke-linejoin: round;257  }258 259  /* Small handle at very bottom (gesture bar) */260  .gesture-bar {261    position: absolute;262    bottom: 24px;263    left: 50%;264    transform: translateX(-50%);265    width: 520px;266    height: 12px;267    border-radius: 8px;268    background: #cfcfcf;269    opacity: 0.8;270  }271</style>272</head>273<body>274<div id="render-target">275 276  <!-- Gradient header -->277  <div class="top-gradient"></div>278 279  <!-- Status bar -->280  <div class="status-bar">281    <div class="status-left">282      <div style="font-size:40px;">1:31</div>283      <div class="dot-icon"></div>284      <div class="dot-icon"></div>285      <div class="dot-icon"></div>286      <div class="dot-icon"></div>287      <div class="dot-icon"></div>288      <div style="font-size:38px;">•</div>289    </div>290    <div class="status-right">291      <span class="wifi-icon">292        <svg width="44" height="44" viewBox="0 0 24 24">293          <path d="M4 9c4.5-4.5 11.5-4.5 16 0M7 12c3-3 7-3 10 0M10 15c1.5-1.5 4-1.5 5.5 0"/>294          <circle cx="12" cy="18" r="1.6"></circle>295        </svg>296      </span>297      <span class="battery-icon">298        <svg width="50" height="44" viewBox="0 0 28 14">299          <rect x="1" y="2" width="22" height="10" rx="2" ry="2" fill="none" stroke="#1a1a1a" stroke-width="2"/>300          <rect x="3.5" y="4.5" width="17.5" height="5" fill="#1a1a1a"/>301          <rect x="24" y="5" width="3" height="4" rx="1" ry="1" fill="#1a1a1a"/>302        </svg>303      </span>304    </div>305  </div>306 307  <!-- Back button -->308  <div class="back-btn">309    <svg viewBox="0 0 24 24">310      <path d="M15 6l-6 6 6 6"/>311    </svg>312  </div>313 314  <!-- Search bar -->315  <div class="search-bar">316    <div class="search-icon">317      <svg viewBox="0 0 24 24">318        <circle cx="11" cy="11" r="7"></circle>319        <path d="M20 20l-4.5-4.5"></path>320      </svg>321    </div>322    <div class="search-text">323      Special offers on <span class="underline">groceries</span>324    </div>325    <div class="clear-btn">326      <svg viewBox="0 0 24 24">327        <path d="M6 6l12 12M18 6l-12 12"></path>328      </svg>329    </div>330  </div>331 332  <!-- Main content area (blank) -->333  <div class="content-area"></div>334 335  <!-- Keyboard -->336  <div class="keyboard">337    <div class="kb-top">338      groceries339      <div class="mic">340        <svg viewBox="0 0 24 24">341          <rect x="9" y="4" width="6" height="10" rx="3"></rect>342          <path d="M6 11a6 6 0 0 0 12 0M12 17v3"></path>343        </svg>344      </div>345    </div>346 347    <div class="kb-rows">348      <div class="row">349        <div class="key">q</div>350        <div class="key">w</div>351        <div class="key">e</div>352        <div class="key">r</div>353        <div class="key">t</div>354        <div class="key">y</div>355        <div class="key">u</div>356        <div class="key">i</div>357        <div class="key">o</div>358        <div class="key">p</div>359      </div>360 361      <div class="row" style="padding: 0 60px;">362        <div class="key">a</div>363        <div class="key">s</div>364        <div class="key">d</div>365        <div class="key">f</div>366        <div class="key">g</div>367        <div class="key">h</div>368        <div class="key">j</div>369        <div class="key">k</div>370        <div class="key">l</div>371      </div>372 373      <div class="row" style="padding: 0 130px;">374        <div class="key">z</div>375        <div class="key">x</div>376        <div class="key">c</div>377        <div class="key">v</div>378        <div class="key">b</div>379        <div class="key">n</div>380        <div class="key">m</div>381      </div>382 383      <div class="space-row">384        <div class="function-key fk-left">?123</div>385        <div class="function-key fk-medium">,</div>386        <div class="function-key fk-medium">😊</div>387        <div class="function-key fk-wide"></div>388        <div class="function-key fk-medium">.</div>389        <div class="function-key fk-arrow">390          <svg viewBox="0 0 24 24">391            <path d="M5 12h10"></path>392            <path d="M12 7l5 5-5 5"></path>393          </svg>394        </div>395      </div>396    </div>397 398    <div class="gesture-bar"></div>399  </div>400 401</div>402</body>403</html>