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 Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, 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 right: 0;23 height: 120px;24 padding: 24px 30px 0 30px;25 box-sizing: border-box;26 color: #2E2E2E;27 font-size: 42px;28 display: flex;29 align-items: center;30 justify-content: space-between;31 }32 .status-left { display: flex; align-items: center; gap: 22px; }33 .status-right { display: flex; align-items: center; gap: 22px; }34 .circle-icon {35 width: 28px; height: 28px; background: #000; border-radius: 50%;36 }37 .dot {38 width: 10px; height: 10px; background: #9E9E9E; border-radius: 50%;39 }40 .status-icon {41 width: 34px; height: 34px; border: 2px solid #777; border-radius: 4px;42 }43 .battery {44 width: 56px; height: 26px; border: 3px solid #555; border-radius: 4px; position: relative;45 }46 .battery::after {47 content: "";48 position: absolute; right: -8px; top: 6px;49 width: 6px; height: 12px; background: #555; border-radius: 2px;50 }51 52 /* Search bar */53 .search-wrapper {54 position: absolute;55 top: 126px;56 left: 36px;57 right: 36px;58 height: 110px;59 border: 2px solid #D9D9D9;60 border-radius: 55px;61 background: #FFFFFF;62 display: flex;63 align-items: center;64 padding: 0 28px;65 box-sizing: border-box;66 gap: 20px;67 }68 .search-input {69 flex: 1;70 font-size: 44px;71 color: #111111;72 }73 .icon-btn {74 width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; color: #2E2E2E;75 }76 .icon-muted { color: #8A8A8A; }77 78 /* Suggestions */79 .suggestions {80 position: absolute;81 top: 270px;82 left: 0;83 right: 0;84 padding: 0 48px;85 box-sizing: border-box;86 }87 .sugg-item {88 display: flex;89 align-items: center;90 gap: 28px;91 height: 130px;92 border-bottom: 1px solid rgba(0,0,0,0.04);93 }94 .sugg-text {95 font-size: 42px;96 color: #2B2B2B;97 }98 .sugg-subtle { color: #4B4B4B; }99 100 /* Bottom nav */101 .bottom-nav {102 position: absolute;103 left: 0;104 right: 0;105 bottom: 700px; /* sits above keyboard */106 height: 120px;107 background: #FFFFFF;108 border-top: 1px solid #E6E6E6;109 display: flex;110 align-items: center;111 justify-content: space-around;112 color: #9E9E9E;113 }114 .bottom-nav .active { color: #333333; }115 116 /* Keyboard mock */117 .keyboard {118 position: absolute;119 left: 0;120 right: 0;121 bottom: 0;122 height: 700px;123 background: #1E1F22;124 box-shadow: 0 -2px 6px rgba(0,0,0,0.25);125 color: #EAEAEA;126 }127 .kb-suggestion {128 height: 70px;129 display: flex;130 align-items: center;131 justify-content: center;132 color: #D9D9D9;133 font-size: 36px;134 }135 .kb-rows {136 padding: 18px 24px 0 24px;137 box-sizing: border-box;138 display: grid;139 grid-template-rows: repeat(4, 1fr);140 row-gap: 18px;141 height: calc(100% - 70px - 22px);142 }143 .kb-row {144 display: grid;145 grid-auto-flow: column;146 column-gap: 14px;147 }148 .key {149 background: #2A2B2E;150 border-radius: 14px;151 height: 96px;152 display: flex;153 align-items: center;154 justify-content: center;155 font-size: 40px;156 color: #EDEDED;157 }158 .key.small { width: 120px; }159 .key.medium { width: 150px; }160 .key.wide { grid-column: span 2; }161 .key.flex { width: 100%; }162 .key.action { background: #AFC7E9; color: #0C1B2E; }163 .key.dark { background: #2F3033; }164 .gesture-bar {165 position: absolute;166 bottom: 10px;167 left: 50%;168 transform: translateX(-50%);169 width: 300px;170 height: 10px;171 background: #E5E5E5;172 border-radius: 6px;173 opacity: 0.9;174 }175 176 /* Utility SVG color */177 svg { display: block; }178</style>179</head>180<body>181<div id="render-target">182 183 <!-- Status bar -->184 <div class="status-bar">185 <div class="status-left">186 <div style="font-weight: 600;">10:27</div>187 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#7A7A7A" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><line x1="16.5" y1="16.5" x2="21" y2="21" stroke="#7A7A7A"></line></svg>188 <div class="circle-icon"></div>189 <div class="status-icon"></div>190 <div class="dot"></div>191 </div>192 <div class="status-right">193 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#6A6A6A" stroke-width="2"><path d="M2 18h20"></path><path d="M6 14h12"></path><path d="M10 10h4"></path></svg>194 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#6A6A6A" stroke-width="2"><path d="M4 10c4-4 12-4 16 0" /><path d="M7 13c3-3 7-3 10 0" /><path d="M10 16c2-2 2-2 4 0" /></svg>195 <div class="battery"></div>196 </div>197 </div>198 199 <!-- Search bar -->200 <div class="search-wrapper">201 <div class="icon-btn">202 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">203 <path d="M15 18l-6-6 6-6" />204 </svg>205 </div>206 <div class="search-input">LED light bulbs</div>207 <div class="icon-btn icon-muted">208 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">209 <path d="M18 6L6 18M6 6l12 12"/>210 </svg>211 </div>212 </div>213 214 <!-- Suggestions -->215 <div class="suggestions">216 <div class="sugg-item">217 <div class="icon-btn icon-muted" style="width:60px;height:60px;">218 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">219 <circle cx="11" cy="11" r="7"></circle><line x1="16.5" y1="16.5" x2="21" y2="21"></line>220 </svg>221 </div>222 <div class="sugg-text sugg-subtle">led light bulbs</div>223 </div>224 225 <div class="sugg-item">226 <div class="icon-btn" style="width:60px;height:60px;">227 <svg width="44" height="44" viewBox="0 0 24 24" fill="currentColor">228 <rect x="3" y="3" width="9" height="9" rx="1"></rect>229 <rect x="12" y="12" width="9" height="9" rx="1"></rect>230 </svg>231 </div>232 <div class="sugg-text">LED light bulbs</div>233 </div>234 235 <div class="sugg-item">236 <div class="icon-btn" style="width:60px;height:60px;">237 <svg width="44" height="44" viewBox="0 0 24 24" fill="currentColor">238 <rect x="3" y="3" width="9" height="9" rx="1"></rect>239 <rect x="12" y="12" width="9" height="9" rx="1"></rect>240 </svg>241 </div>242 <div class="sugg-text">Standard LED light bulbs</div>243 </div>244 </div>245 246 <!-- Bottom Nav -->247 <div class="bottom-nav">248 <div class="icon-btn active">249 <svg width="48" height="48" viewBox="0 0 24 24" fill="currentColor">250 <path d="M12 3l9 8h-3v9h-12v-9h-3z"></path>251 </svg>252 </div>253 <div class="icon-btn">254 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">255 <circle cx="11" cy="11" r="7"></circle><line x1="16.5" y1="16.5" x2="21" y2="21"></line>256 </svg>257 </div>258 <div class="icon-btn">259 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">260 <rect x="4" y="4" width="6" height="6"></rect>261 <rect x="14" y="4" width="6" height="6"></rect>262 <rect x="4" y="14" width="6" height="6"></rect>263 <rect x="14" y="14" width="6" height="6"></rect>264 </svg>265 </div>266 <div class="icon-btn">267 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">268 <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 6 4 4 6.5 4c1.74 0 3.41 1 4.5 2.09C12.09 5 13.76 4 15.5 4 18 4 20 6 20 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path>269 </svg>270 </div>271 <div class="icon-btn">272 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">273 <path d="M6 7h12l-1.5 10h-9z"></path>274 <circle cx="9" cy="20" r="1.5" fill="currentColor"></circle>275 <circle cx="15" cy="20" r="1.5" fill="currentColor"></circle>276 </svg>277 </div>278 </div>279 280 <!-- Keyboard mock -->281 <div class="keyboard">282 <div class="kb-suggestion">bulbs</div>283 <div class="kb-rows">284 <div class="kb-row">285 <div class="key">q</div>286 <div class="key">w</div>287 <div class="key">e</div>288 <div class="key">r</div>289 <div class="key">t</div>290 <div class="key">y</div>291 <div class="key">u</div>292 <div class="key">i</div>293 <div class="key">o</div>294 <div class="key">p</div>295 </div>296 <div class="kb-row" style="padding: 0 38px;">297 <div class="key">a</div>298 <div class="key">s</div>299 <div class="key">d</div>300 <div class="key">f</div>301 <div class="key">g</div>302 <div class="key">h</div>303 <div class="key">j</div>304 <div class="key">k</div>305 <div class="key">l</div>306 </div>307 <div class="kb-row" style="padding: 0 88px;">308 <div class="key small dark">309 <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#ECECEC" stroke-width="2"><path d="M8 16l-4-4 4-4"/><path d="M4 12h16"/></svg>310 </div>311 <div class="key">z</div>312 <div class="key">x</div>313 <div class="key">c</div>314 <div class="key">v</div>315 <div class="key">b</div>316 <div class="key">n</div>317 <div class="key">m</div>318 <div class="key small dark">319 <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#ECECEC" stroke-width="2"><path d="M3 12h13"/><path d="M14 7l5 5-5 5"/></svg>320 </div>321 </div>322 <div class="kb-row" style="padding: 0 18px;">323 <div class="key medium action">?123</div>324 <div class="key medium dark">325 <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#ECECEC" stroke-width="2"><circle cx="12" cy="12" r="2"/><path d="M19 11a7 7 0 1 0-2.05 4.95"/></svg>326 </div>327 <div class="key flex">space</div>328 <div class="key medium dark">.</div>329 <div class="key medium action">330 <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#0C1B2E" stroke-width="2">331 <circle cx="11" cy="11" r="7"></circle><line x1="16.5" y1="16.5" x2="21" y2="21"></line>332 </svg>333 </div>334 </div>335 </div>336 <div class="gesture-bar"></div>337 </div>338 339</div>340</body>341</html>