GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Search UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 140px;24    background: #D9D9D9;25    color: #2E2E2E;26    display: flex;27    align-items: center;28    padding: 0 40px;29    box-sizing: border-box;30    font-weight: 600;31  }32  .status-left { font-size: 44px; }33  .status-right {34    margin-left: auto;35    display: flex;36    align-items: center;37    gap: 28px;38  }39  .dot { width: 14px; height: 14px; background:#7B7B7B; border-radius:50%; display:inline-block; }40  .icon-wifi, .icon-battery {41    display: inline-flex; align-items: center; justify-content: center;42  }43  .icon-wifi svg, .icon-battery svg { height: 40px; }44 45  /* Content area */46  .content {47    position: absolute;48    top: 140px;49    left: 0;50    right: 0;51    bottom: 0;52    padding: 40px;53    box-sizing: border-box;54  }55 56  /* Search bar */57  .search-bar {58    width: 1000px;59    height: 124px;60    background: #FFFFFF;61    border-radius: 20px;62    box-shadow: 0 6px 18px rgba(0,0,0,0.08);63    border: 1px solid #EEE;64    display: flex;65    align-items: center;66    padding: 0 34px;67    gap: 24px;68  }69  .search-input {70    flex: 1;71    font-size: 40px;72    border: none;73    outline: none;74    color: #222;75  }76  .search-input::placeholder { color: #9C9C9C; }77 78  /* Recent */79  .recent-title {80    margin-top: 80px;81    font-size: 34px;82    letter-spacing: 1px;83    color: #6A6A6A;84    font-weight: 700;85  }86  .recent-list {87    margin-top: 46px;88    display: flex;89    flex-direction: column;90    gap: 64px;91  }92  .recent-item {93    font-size: 44px;94    color: #1F1F1F;95  }96 97  /* Keyboard */98  .keyboard {99    position: absolute;100    bottom: 0;101    left: 0;102    width: 1080px;103    height: 860px;104    background: #141414;105    color: #FFF;106    box-sizing: border-box;107    padding: 28px 24px 60px;108  }109  .kb-strip {110    height: 110px;111    display: flex;112    align-items: center;113    justify-content: space-between;114    padding: 0 12px 16px;115    box-sizing: border-box;116    color: #D9D9D9;117  }118  .kb-strip .chip {119    display: flex; align-items: center; justify-content: center;120    height: 76px; min-width: 76px;121    padding: 0 24px;122    background: #222;123    border-radius: 18px;124    font-size: 36px;125    gap: 14px;126  }127 128  .kb-row {129    display: flex;130    justify-content: center;131    gap: 16px;132    margin: 16px 0;133  }134  .key {135    background: #242424;136    color: #FFFFFF;137    border-radius: 22px;138    min-width: 88px;139    height: 120px;140    display: flex;141    align-items: center;142    justify-content: center;143    font-size: 44px;144    box-shadow: inset 0 -2px 0 rgba(255,255,255,0.06);145  }146  .key.wide { min-width: 140px; }147  .key.space { flex: 1; min-width: 380px; }148  .key.round { width: 120px; height: 120px; border-radius: 60px; background: #CDE1F7; color: #1A1A1A; }149  .bottom-pill {150    position: absolute;151    bottom: 16px;152    left: 50%;153    transform: translateX(-50%);154    width: 170px;155    height: 10px;156    border-radius: 6px;157    background: #EDEDED;158    opacity: 0.9;159  }160  .key.icon-only svg { width: 48px; height: 48px; }161</style>162</head>163<body>164<div id="render-target">165  <!-- Status Bar -->166  <div class="status-bar">167    <div class="status-left">8:17</div>168    <div class="status-right">169      <span class="dot"></span>170      <span class="dot"></span>171      <span class="dot"></span>172      <div class="icon-wifi">173        <svg viewBox="0 0 24 24" fill="#3A3A3A">174          <path d="M12 18a2 2 0 1 0 0.001 4.001A2 2 0 0 0 12 18z"></path>175          <path d="M2 9c5.5-4.8 14.5-4.8 20 0l-2 2c-4.7-3.9-11.3-3.9-16 0L2 9z" opacity="0.7"></path>176          <path d="M6 13c3.6-3 8.4-3 12 0l-2 2c-2.5-2.1-5.5-2.1-8 0l-2-2z" opacity="0.7"></path>177        </svg>178      </div>179      <div class="icon-battery">180        <svg viewBox="0 0 28 16">181          <rect x="1" y="2" width="22" height="12" rx="2" fill="#3A3A3A"></rect>182          <rect x="3" y="4" width="18" height="8" rx="1" fill="#9E9E9E"></rect>183          <rect x="24" y="5" width="3" height="6" rx="1" fill="#3A3A3A"></rect>184        </svg>185      </div>186    </div>187  </div>188 189  <!-- Main Content -->190  <div class="content">191    <div class="search-bar">192      <svg width="56" height="56" viewBox="0 0 24 24" fill="none">193        <circle cx="11" cy="11" r="8" stroke="#7D7D7D" stroke-width="2"></circle>194        <path d="M20 20l-3.5-3.5" stroke="#7D7D7D" stroke-width="2" stroke-linecap="round"></path>195      </svg>196      <input class="search-input" type="text" placeholder="Search in Women">197    </div>198 199    <div class="recent-title">RECENT SEARCHES</div>200    <div class="recent-list">201      <div class="recent-item">Black track sole contrast ankle boots for women</div>202      <div class="recent-item">track sole contrast ankle boots for women</div>203      <div class="recent-item">track sole contrast ankle boots</div>204      <div class="recent-item">puma</div>205      <div class="recent-item">puna</div>206    </div>207  </div>208 209  <!-- Keyboard -->210  <div class="keyboard">211    <div class="kb-strip">212      <div class="chip">213        <svg width="38" height="38" viewBox="0 0 24 24" fill="#BDBDBD">214          <path d="M4 4h7v7H4V4zm9 0h7v7h-7V4zM4 13h7v7H4v-7zm9 0h7v7h-7v-7z"></path>215        </svg>216      </div>217      <div class="chip">218        <svg width="38" height="38" viewBox="0 0 24 24" fill="#BDBDBD">219          <circle cx="12" cy="9" r="5"></circle>220          <path d="M4 22c1.8-3 5-5 8-5s6.2 2 8 5" fill="none" stroke="#BDBDBD" stroke-width="2"></path>221        </svg>222        <span>GIF</span>223      </div>224      <div class="chip">225        <svg width="38" height="38" viewBox="0 0 24 24" fill="#BDBDBD">226          <path d="M12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm7-3a7 7 0 1 1-14 0 7 7 0 0 1 14 0zm2 0h3" stroke="#BDBDBD" stroke-width="2" fill="none"></path>227        </svg>228      </div>229      <div class="chip">230        <svg width="38" height="38" viewBox="0 0 24 24" fill="#BDBDBD">231          <path d="M3 6h18v2H3zm3 5h12v2H6zm-2 5h16v2H4z"></path>232        </svg>233      </div>234      <div class="chip">235        <svg width="38" height="38" viewBox="0 0 24 24" fill="#BDBDBD">236          <path d="M12 3l2 4 4 .7-3 2.9.8 4.4-3.8-2.2-3.8 2.2.8-4.4-3-2.9 4-.7L12 3z"></path>237        </svg>238      </div>239      <div class="chip">240        <svg width="38" height="38" viewBox="0 0 24 24" fill="#BDBDBD">241          <path d="M12 3c-3 0-5 2.1-5 5v3c0 3.3 2 6 5 6s5-2.7 5-6V8c0-2.9-2-5-5-5z"></path>242          <path d="M5 10v2l-2 1v-4l2 1zM19 10v2l2 1v-4l-2 1z" fill="#BDBDBD"></path>243        </svg>244      </div>245    </div>246 247    <div class="kb-row">248      <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>249      <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>250    </div>251    <div class="kb-row">252      <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>253      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>254    </div>255    <div class="kb-row">256      <div class="key wide">257        <svg width="40" height="40" viewBox="0 0 24 24" fill="#FFFFFF">258          <path d="M8 13l4-4 4 4" fill="none" stroke="#FFFFFF" stroke-width="2"></path>259          <rect x="6" y="15" width="12" height="2" fill="#FFFFFF"></rect>260        </svg>261      </div>262      <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>263      <div class="key wide icon-only">264        <svg viewBox="0 0 24 24" fill="#FFFFFF">265          <path d="M7 4h10v2H7zM7 9h10v2H7zM7 14h10v2H7z"></path>266          <path d="M18 18l-3 3 6-3-6-3 3 3z"></path>267        </svg>268      </div>269    </div>270    <div class="kb-row">271      <div class="key wide">?123</div>272      <div class="key wide">273        <svg width="40" height="40" viewBox="0 0 24 24" fill="#FFFFFF">274          <circle cx="12" cy="8" r="4"></circle>275          <path d="M4 22c2.2-4 6-6 8-6s5.8 2 8 6" fill="none" stroke="#FFFFFF" stroke-width="2"></path>276        </svg>277      </div>278      <div class="key space"></div>279      <div class="key wide">.</div>280      <div class="key round">281        <svg width="42" height="42" viewBox="0 0 24 24" fill="none">282          <circle cx="11" cy="11" r="8" stroke="#1A1A1A" stroke-width="2"></circle>283          <path d="M20 20l-3.5-3.5" stroke="#1A1A1A" stroke-width="2" stroke-linecap="round"></path>284        </svg>285      </div>286      <div class="key wide">287        <svg width="38" height="38" viewBox="0 0 24 24" fill="#FFFFFF">288          <path d="M12 3c-2 0-3 1.5-3 3.4V12c0 1.9 1 3.4 3 3.4s3-1.5 3-3.4V6.4C15 4.5 14 3 12 3z"></path>289          <path d="M8 12v2l4 2 4-2v-2" fill="none" stroke="#FFFFFF" stroke-width="2"></path>290        </svg>291      </div>292    </div>293 294    <div class="bottom-pill"></div>295  </div>296</div>297</body>298</html>