GD-ML/AndroidCode
13.4k
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 - Dark</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #000000;15 color: #EDEDED;16 font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;17 }18 19 /* Status bar */20 .status-bar {21 height: 110px;22 padding: 0 36px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 color: #FFFFFF;27 font-size: 38px;28 box-sizing: border-box;29 }30 .status-right {31 display: flex;32 align-items: center;33 gap: 26px;34 opacity: 0.9;35 }36 .icon-small {37 width: 34px;38 height: 34px;39 display: inline-flex;40 align-items: center;41 justify-content: center;42 }43 44 /* Search bar */45 .search-wrap { padding: 0 24px; box-sizing: border-box; }46 .search-bar {47 height: 120px;48 border-radius: 60px;49 background: #2B2B2B;50 display: flex;51 align-items: center;52 padding: 0 22px;53 gap: 26px;54 box-sizing: border-box;55 }56 .search-text {57 flex: 1;58 font-size: 46px;59 color: #EAEAEA;60 white-space: nowrap;61 overflow: hidden;62 text-overflow: ellipsis;63 }64 .underline {65 text-decoration: underline;66 }67 .circle-btn {68 width: 76px;69 height: 76px;70 border-radius: 38px;71 display: inline-flex;72 align-items: center;73 justify-content: center;74 background: transparent;75 }76 .circle-btn.camera {77 background: #3A3A3A;78 }79 80 /* Suggestions list */81 .suggestions {82 padding: 18px 20px 0 24px;83 box-sizing: border-box;84 }85 .suggestion {86 position: relative;87 padding: 28px 100px 28px 8px;88 border-bottom: 1px solid #1F1F1F;89 }90 .suggestion .title {91 font-size: 46px;92 color: #E5E5E5;93 line-height: 1.25;94 }95 .suggestion .title b {96 font-weight: 800;97 color: #FFFFFF;98 }99 .suggestion .sub {100 margin-top: 8px;101 font-size: 30px;102 color: #9E9E9E;103 }104 .suggestion .go {105 position: absolute;106 right: 24px;107 top: 50%;108 transform: translateY(-50%);109 opacity: 0.9;110 }111 112 /* Keyboard mock */113 .keyboard {114 position: absolute;115 left: 0;116 right: 0;117 bottom: 54px;118 height: 860px;119 background: #1B1B1B;120 border-top-left-radius: 24px;121 border-top-right-radius: 24px;122 box-sizing: border-box;123 padding: 14px 16px 10px;124 }125 .kb-toolbar {126 height: 90px;127 display: flex;128 align-items: center;129 gap: 16px;130 padding: 0 6px 6px;131 }132 .chip {133 background: #2A2A2A;134 color: #EDEDED;135 border: 1px solid #3A3A3A;136 border-radius: 16px;137 padding: 12px 22px;138 font-size: 34px;139 }140 .chip.highlight {141 background: #E6D6FF;142 color: #2B2B2B;143 border-color: #E6D6FF;144 }145 146 .kb-rows { padding: 4px 2px 0; }147 .kb-row {148 display: grid;149 grid-auto-flow: column;150 grid-auto-columns: 1fr;151 gap: 12px;152 margin: 14px 8px;153 }154 .key {155 height: 120px;156 background: #2C2C2C;157 border-radius: 22px;158 display: flex;159 align-items: center;160 justify-content: center;161 color: #F5F5F5;162 font-size: 44px;163 }164 .key.wide { grid-column: span 2; }165 .key.backspace, .key.shift { width: 120px; }166 .key.circle {167 width: 120px;168 height: 120px;169 border-radius: 60px;170 background: #D9C6FF;171 color: #2B2B2B;172 font-weight: 700;173 }174 .key.darkcircle {175 width: 120px;176 height: 120px;177 border-radius: 60px;178 background: #3A3A3A;179 }180 .space { grid-column: span 5; }181 182 /* Home indicator */183 .home-indicator {184 position: absolute;185 bottom: 16px;186 left: 50%;187 transform: translateX(-50%);188 width: 360px;189 height: 10px;190 border-radius: 6px;191 background: #E5E5E5;192 opacity: 0.9;193 }194</style>195</head>196<body>197<div id="render-target">198 199 <!-- Status Bar -->200 <div class="status-bar">201 <div class="time">8:23</div>202 <div class="status-right">203 <span class="icon-small" title="Signal">204 <svg width="34" height="34" viewBox="0 0 24 24" fill="#FFFFFF" opacity="0.85">205 <rect x="2" y="16" width="3" height="6" rx="1"></rect>206 <rect x="7" y="12" width="3" height="10" rx="1"></rect>207 <rect x="12" y="8" width="3" height="14" rx="1"></rect>208 <rect x="17" y="4" width="3" height="18" rx="1"></rect>209 </svg>210 </span>211 <span class="icon-small" title="Wi‑Fi">212 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2">213 <path d="M2 9c5-4 15-4 20 0"></path>214 <path d="M5 12c4-3 10-3 14 0"></path>215 <path d="M8 15c2-2 6-2 8 0"></path>216 <circle cx="12" cy="18" r="1.8" fill="#FFFFFF"></circle>217 </svg>218 </span>219 <span class="icon-small" title="Battery">220 <svg width="42" height="34" viewBox="0 0 28 16" fill="none" stroke="#FFFFFF" stroke-width="2">221 <rect x="1" y="3" width="22" height="10" rx="2"></rect>222 <rect x="23.5" y="6" width="3" height="4" rx="1" fill="#FFFFFF" stroke="none"></rect>223 <rect x="3" y="5" width="18" height="6" rx="1" fill="#FFFFFF" stroke="none"></rect>224 </svg>225 </span>226 </div>227 </div>228 229 <!-- Search Bar -->230 <div class="search-wrap">231 <div class="search-bar">232 <span class="circle-btn" aria-label="Back">233 <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round">234 <path d="M15 19l-7-7 7-7"></path>235 </svg>236 </span>237 <div class="search-text">iPhone 14 Pro <span class="underline">Max</span></div>238 <span class="circle-btn" aria-label="Clear">239 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.6" stroke-linecap="round">240 <path d="M5 5l14 14M19 5L5 19"></path>241 </svg>242 </span>243 <span class="circle-btn camera" aria-label="Camera">244 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2">245 <rect x="3" y="6" width="18" height="12" rx="2"></rect>246 <path d="M8 6l1.5-2h5L16 6"></path>247 <circle cx="12" cy="12" r="3.2"></circle>248 </svg>249 </span>250 </div>251 </div>252 253 <!-- Suggestions -->254 <div class="suggestions">255 <div class="suggestion">256 <div class="title">iphone 14 pro max <b>case</b></div>257 <div class="sub">Cell Phone Accessories</div>258 <div class="go">259 <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="#BDBDBD" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">260 <path d="M7 17L17 7"></path>261 <path d="M9 7h8v8"></path>262 </svg>263 </div>264 </div>265 266 <div class="suggestion">267 <div class="title">iphone 14 pro max <b>case</b></div>268 <div class="sub">Cell Phones & Smartphones</div>269 <div class="go">270 <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="#BDBDBD" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">271 <path d="M7 17L17 7"></path>272 <path d="M9 7h8v8"></path>273 </svg>274 </div>275 </div>276 277 <div class="suggestion">278 <div class="title">iphone 14 pro max <b>unlocked</b></div>279 <div class="go">280 <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="#BDBDBD" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">281 <path d="M7 17L17 7"></path>282 <path d="M9 7h8v8"></path>283 </svg>284 </div>285 </div>286 287 <div class="suggestion">288 <div class="title">iphone 14 pro max <b>phone</b></div>289 <div class="go">290 <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="#BDBDBD" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">291 <path d="M7 17L17 7"></path>292 <path d="M9 7h8v8"></path>293 </svg>294 </div>295 </div>296 297 <div class="suggestion">298 <div class="title">iphone 14 pro max <b>cover</b></div>299 <div class="go">300 <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="#BDBDBD" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">301 <path d="M7 17L17 7"></path>302 <path d="M9 7h8v8"></path>303 </svg>304 </div>305 </div>306 307 <div class="suggestion">308 <div class="title">iphone 14 pro max <b>1tb</b></div>309 <div class="go">310 <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="#BDBDBD" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">311 <path d="M7 17L17 7"></path>312 <path d="M9 7h8v8"></path>313 </svg>314 </div>315 </div>316 317 <div class="suggestion">318 <div class="title">iphone 14 pro max <b>256gb</b></div>319 <div class="go">320 <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="#BDBDBD" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">321 <path d="M7 17L17 7"></path>322 <path d="M9 7h8v8"></path>323 </svg>324 </div>325 </div>326 327 <div class="suggestion">328 <div class="title">iphone 14 pro max <b>screen protector</b></div>329 <div class="go">330 <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="#BDBDBD" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">331 <path d="M7 17L17 7"></path>332 <path d="M9 7h8v8"></path>333 </svg>334 </div>335 </div>336 337 <div class="suggestion">338 <div class="title">iphone 14 pro max <b>case magsafe</b></div>339 <div class="go">340 <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="#BDBDBD" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">341 <path d="M7 17L17 7"></path>342 <path d="M9 7h8v8"></path>343 </svg>344 </div>345 </div>346 </div>347 348 <!-- Keyboard -->349 <div class="keyboard">350 <div class="kb-toolbar">351 <button class="chip highlight">Max</button>352 <button class="chip">Mac</button>353 <button class="chip">Maximum</button>354 </div>355 356 <div class="kb-rows">357 <div class="kb-row" style="grid-template-columns: repeat(10, 1fr);">358 <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>359 <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>360 </div>361 362 <div class="kb-row" style="grid-template-columns: repeat(9, 1fr); padding: 0 40px;">363 <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>364 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>365 </div>366 367 <div class="kb-row" style="grid-template-columns: 120px repeat(8, 1fr) 120px; align-items: center;">368 <div class="key darkcircle">369 <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">370 <path d="M7 15l-4-3 4-3"></path>371 </svg>372 </div>373 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>374 <div class="key">b</div><div class="key">n</div><div class="key">m</div>375 <div class="key darkcircle">376 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">377 <path d="M21 12H8"></path>378 <path d="M12 6l-6 6 6 6"></path>379 </svg>380 </div>381 </div>382 383 <div class="kb-row" style="grid-template-columns: 120px 1fr 120px 5fr 1fr 120px;">384 <div class="key circle">?123</div>385 <div class="key">,</div>386 <div class="key darkcircle">387 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2">388 <circle cx="12" cy="12" r="3.2"></circle>389 <path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M17.7 6.3l1.4-1.4M4.9 19.1l1.4-1.4"></path>390 </svg>391 </div>392 <div class="key space"></div>393 <div class="key">.</div>394 <div class="key circle">395 <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#2B2B2B" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round">396 <circle cx="10.5" cy="10.5" r="5"></circle>397 <path d="M15.5 15.5L20 20"></path>398 </svg>399 </div>400 </div>401 </div>402 </div>403 404 <!-- Home indicator -->405 <div class="home-indicator"></div>406</div>407</body>408</html>