GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile Search UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #FFFFFF;13    border-radius: 0;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 120px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    padding: 0 36px;27    color: #222;28    font-size: 40px;29  }30  .status-left,31  .status-right {32    display: flex;33    align-items: center;34    gap: 28px;35  }36  .status-icon {37    width: 36px;38    height: 36px;39    border-radius: 50%;40    background: #ddd;41  }42 43  /* Search bar */44  .search-wrap {45    position: absolute;46    top: 128px;47    left: 30px;48    width: 1020px;49    height: 120px;50    background: #FAFAFA;51    border-radius: 16px;52    box-shadow: 0 2px 8px rgba(0,0,0,0.06);53    display: flex;54    align-items: center;55    padding: 0 22px;56    border: 1px solid #eee;57  }58  .icon-btn {59    width: 64px;60    height: 64px;61    border-radius: 32px;62    display: flex;63    align-items: center;64    justify-content: center;65    margin-right: 18px;66  }67  .icon-btn svg { width: 40px; height: 40px; }68  .search-input {69    flex: 1;70    border: none;71    outline: none;72    background: transparent;73    font-size: 48px;74    color: #222;75  }76  .refresh {77    width: 64px;78    height: 64px;79    border-radius: 32px;80    display: flex;81    align-items: center;82    justify-content: center;83    margin-left: 18px;84  }85  .refresh svg { width: 44px; height: 44px; }86  .divider {87    position: absolute;88    top: 260px;89    left: 0;90    width: 1080px;91    height: 2px;92    background: transparent;93  }94 95  /* Keyboard */96  .keyboard {97    position: absolute;98    bottom: 0;99    left: 0;100    width: 1080px;101    height: 940px;102    background: #1E1E21;103    color: #EAEAEA;104    box-shadow: 0 -4px 16px rgba(0,0,0,0.25);105  }106  .suggest-strip {107    height: 110px;108    display: flex;109    align-items: center;110    padding: 0 40px;111    color: #DADADA;112    font-size: 44px;113    gap: 28px;114    border-bottom: 1px solid #2C2C30;115  }116  .suggest-strip .pipe {117    color: #8A8A8A;118  }119  .suggest-strip .mic {120    margin-left: auto;121    width: 72px;122    height: 72px;123    border-radius: 36px;124    background: #2B2B30;125    display: flex;126    align-items: center;127    justify-content: center;128  }129  .keys {130    padding: 26px 28px;131    display: grid;132    grid-template-columns: repeat(10, 1fr);133    grid-gap: 16px;134  }135  .key {136    height: 120px;137    background: #2B2B30;138    border-radius: 24px;139    display: flex;140    align-items: center;141    justify-content: center;142    font-size: 56px;143    color: #E6E6E6;144  }145  .row2 { grid-template-columns: repeat(9, 1fr); margin-top: 8px; }146  .row3 { grid-template-columns: repeat(8, 1fr); margin-top: 8px; }147  .key.small { font-size: 52px; }148  .backspace {149    background: #2B2B30;150    border-radius: 24px;151    display: flex;152    align-items: center;153    justify-content: center;154  }155  .bottom-row {156    display: flex;157    align-items: center;158    gap: 18px;159    padding: 16px 28px 28px;160  }161  .special {162    width: 180px;163    height: 120px;164    background: #2B2B30;165    border-radius: 28px;166    display: flex;167    align-items: center;168    justify-content: center;169    font-size: 46px;170  }171  .comma { width: 120px; }172  .emoji { width: 120px; }173  .spacebar {174    flex: 1;175    height: 120px;176    background: #2B2B30;177    border-radius: 28px;178    display: flex;179    align-items: center;180    justify-content: center;181    color: #BDBDBD;182    font-size: 46px;183  }184  .period { width: 120px; }185  .search-action {186    width: 140px;187    height: 140px;188    background: #CFE1FF;189    border-radius: 70px;190    display: flex;191    align-items: center;192    justify-content: center;193    margin-left: auto;194  }195  .search-action svg { width: 64px; height: 64px; }196  .home-indicator {197    position: absolute;198    bottom: 18px;199    left: 50%;200    transform: translateX(-50%);201    width: 360px;202    height: 10px;203    background: #D0D0D0;204    border-radius: 5px;205    opacity: 0.8;206  }207</style>208</head>209<body>210<div id="render-target">211 212  <!-- Status Bar -->213  <div class="status-bar">214    <div class="status-left">215      <div>12:06</div>216      <div class="status-icon"></div>217      <div class="status-icon"></div>218      <div class="status-icon"></div>219      <div class="status-icon"></div>220    </div>221    <div class="status-right">222      <!-- Simple Wi-Fi icon -->223      <svg width="48" height="36" viewBox="0 0 48 36">224        <path d="M3 9c9-6 33-6 42 0" stroke="#222" stroke-width="4" fill="none" stroke-linecap="round"/>225        <path d="M9 16c6-4 24-4 30 0" stroke="#222" stroke-width="4" fill="none" stroke-linecap="round"/>226        <path d="M18 24c4-3 8-3 12 0" stroke="#222" stroke-width="4" fill="none" stroke-linecap="round"/>227        <circle cx="24" cy="30" r="3" fill="#222"/>228      </svg>229      <!-- Battery icon -->230      <svg width="64" height="36" viewBox="0 0 64 36">231        <rect x="2" y="6" width="52" height="24" rx="4" stroke="#222" stroke-width="3" fill="none"/>232        <rect x="6" y="10" width="40" height="16" rx="2" fill="#222"/>233        <rect x="56" y="12" width="6" height="12" rx="2" fill="#222"/>234      </svg>235    </div>236  </div>237 238  <!-- Search Bar -->239  <div class="search-wrap">240    <div class="icon-btn">241      <!-- Back Arrow -->242      <svg viewBox="0 0 48 48">243        <path d="M30 10 L16 24 L30 38" stroke="#333" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>244      </svg>245    </div>246    <input class="search-input" type="text" value="Wolf hall">247    <div class="refresh">248      <!-- Refresh icon (circular arrow) -->249      <svg viewBox="0 0 48 48">250        <path d="M24 8c8 0 14 6 14 14" stroke="#536DFE" stroke-width="4" fill="none" stroke-linecap="round"/>251        <path d="M38 22l0-10-8 0" stroke="#536DFE" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>252        <path d="M24 40c-8 0-14-6-14-14" stroke="#536DFE" stroke-width="4" fill="none" stroke-linecap="round"/>253      </svg>254    </div>255  </div>256 257  <!-- Keyboard -->258  <div class="keyboard">259    <div class="suggest-strip">260      <div>hall</div>261      <div class="pipe">|</div>262      <div>hallo</div>263      <div class="pipe">|</div>264      <div>Halloween</div>265      <div class="mic">266        <!-- Mic icon -->267        <svg viewBox="0 0 48 48">268          <rect x="18" y="10" width="12" height="18" rx="6" fill="#DADADA"/>269          <path d="M12 22c0 8 7 12 12 12s12-4 12-12" stroke="#DADADA" stroke-width="3" fill="none"/>270          <path d="M24 34v6" stroke="#DADADA" stroke-width="3" stroke-linecap="round"/>271        </svg>272      </div>273    </div>274 275    <!-- Row 1 -->276    <div class="keys">277      <div class="key">q</div>278      <div class="key">w</div>279      <div class="key">e</div>280      <div class="key">r</div>281      <div class="key">t</div>282      <div class="key">y</div>283      <div class="key">u</div>284      <div class="key">i</div>285      <div class="key">o</div>286      <div class="key">p</div>287    </div>288 289    <!-- Row 2 -->290    <div class="keys row2">291      <div class="key">a</div>292      <div class="key">s</div>293      <div class="key">d</div>294      <div class="key">f</div>295      <div class="key">g</div>296      <div class="key">h</div>297      <div class="key">j</div>298      <div class="key">k</div>299      <div class="key">l</div>300    </div>301 302    <!-- Row 3 -->303    <div class="keys row3">304      <div class="key">z</div>305      <div class="key">x</div>306      <div class="key">c</div>307      <div class="key">v</div>308      <div class="key">b</div>309      <div class="key">n</div>310      <div class="key">m</div>311      <div class="backspace key">312        <!-- Backspace icon -->313        <svg width="60" height="40" viewBox="0 0 60 40">314          <path d="M10 20 L24 6 H52 V34 H24 Z" fill="#3B3B40"/>315          <path d="M30 14 L42 26 M42 14 L30 26" stroke="#E6E6E6" stroke-width="3" stroke-linecap="round"/>316        </svg>317      </div>318    </div>319 320    <!-- Bottom row -->321    <div class="bottom-row">322      <div class="special">?123</div>323      <div class="comma special">,</div>324      <div class="emoji special">😊</div>325      <div class="spacebar">space</div>326      <div class="period special">.</div>327      <div class="search-action">328        <svg viewBox="0 0 48 48">329          <circle cx="21" cy="21" r="15" stroke="#2E4FAE" stroke-width="4" fill="none"/>330          <line x1="34" y1="34" x2="44" y2="44" stroke="#2E4FAE" stroke-width="4" stroke-linecap="round"/>331        </svg>332      </div>333    </div>334 335    <div class="home-indicator"></div>336  </div>337 338</div>339</body>340</html>