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 .statusbar {19 height: 110px;20 background: #E9E9EB;21 display: flex;22 align-items: center;23 padding: 0 32px;24 color: #2E2E2E;25 box-sizing: border-box;26 font-weight: 600;27 font-size: 36px;28 }29 .statusbar .time { flex: 0 0 auto; }30 .statusbar .status-icons {31 margin-left: auto;32 display: flex;33 align-items: center;34 gap: 26px;35 }36 .icon-small { width: 38px; height: 22px; }37 38 /* Search area */39 .search-area {40 padding: 18px 24px 8px;41 background: #FFFFFF;42 }43 .search-field {44 height: 110px;45 border: 1px solid #E3E3E6;46 border-radius: 56px;47 display: flex;48 align-items: center;49 padding: 0 28px;50 box-shadow: 0 2px 4px rgba(0,0,0,0.05);51 }52 .search-field .placeholder {53 color: #8A8A8F;54 font-size: 36px;55 margin-left: 20px;56 flex: 1;57 white-space: nowrap;58 overflow: hidden;59 text-overflow: ellipsis;60 }61 .icon-48 { width: 48px; height: 48px; }62 63 /* Suggestion list */64 .suggestions { padding: 0 0 0 0; }65 .suggestion {66 display: flex;67 align-items: center;68 padding: 24px 24px;69 gap: 24px;70 }71 .suggestion + .suggestion { border-top: 1px solid #EFEFF2; }72 .s-texts { flex: 1; }73 .s-title { font-size: 38px; color: #2E2E2E; }74 .s-sub { font-size: 30px; color: #4D46E5; margin-top: 8px; }75 .history-ico { width: 54px; height: 54px; }76 .arrow-ico { width: 40px; height: 40px; opacity: 0.6; }77 78 /* Discover more */79 .discover-wrap {80 border-top: 10px solid #F0F0F3;81 padding: 28px 24px 18px;82 }83 .discover-title {84 font-size: 36px;85 color: #3A3A3C;86 margin-bottom: 22px;87 }88 .chips {89 display: flex;90 flex-wrap: wrap;91 gap: 22px;92 }93 .chip {94 padding: 22px 28px;95 background: #F6F6FF;96 color: #4D46E5;97 border: 1px solid #E4E4F5;98 border-radius: 16px;99 font-size: 34px;100 box-shadow: 0 1px 0 rgba(0,0,0,0.06);101 }102 103 /* Keyboard mock */104 .keyboard {105 position: absolute;106 left: 0;107 bottom: 60px;108 width: 100%;109 height: 900px;110 background: #1F1F1F;111 border-top-left-radius: 18px;112 border-top-right-radius: 18px;113 padding: 24px 26px;114 box-sizing: border-box;115 color: #fff;116 display: flex;117 flex-direction: column;118 justify-content: space-between;119 }120 .kb-top {121 display: flex;122 gap: 24px;123 align-items: center;124 }125 .kb-top .round {126 width: 92px;127 height: 92px;128 background: #2C2C2E;129 border-radius: 18px;130 display: flex;131 align-items: center;132 justify-content: center;133 color: #D0D0D2;134 font-size: 30px;135 }136 .key-row {137 display: flex;138 justify-content: space-between;139 gap: 14px;140 }141 .key {142 flex: 1;143 height: 120px;144 background: #2C2C2E;145 border-radius: 18px;146 display: flex;147 align-items: center;148 justify-content: center;149 color: #FFFFFF;150 font-size: 46px;151 font-weight: 600;152 }153 .key.wide { flex: 1.6; }154 .key.extra-wide { flex: 3.6; }155 .key.action { background: #3A3A3C; color: #D6E4FF; }156 .nav-pill {157 position: absolute;158 bottom: 14px;159 left: 50%;160 transform: translateX(-50%);161 width: 300px;162 height: 10px;163 background: #D0D0D2;164 border-radius: 10px;165 opacity: 0.8;166 }167</style>168</head>169<body>170<div id="render-target">171 172 <!-- Status Bar -->173 <div class="statusbar">174 <div class="time">11:26</div>175 <div class="status-icons">176 <!-- Simple placeholders for signal, wifi and battery -->177 <svg class="icon-small" viewBox="0 0 24 12"><rect x="0" y="6" width="4" height="6" fill="#4A4A4A"/><rect x="6" y="4" width="4" height="8" fill="#4A4A4A"/><rect x="12" y="2" width="4" height="10" fill="#4A4A4A"/><rect x="18" y="0" width="4" height="12" fill="#4A4A4A"/></svg>178 <svg class="icon-small" viewBox="0 0 24 20"><path d="M2 20c4-5 8-8 10-8s6 3 10 8" fill="none" stroke="#4A4A4A" stroke-width="2"/></svg>179 <svg class="icon-small" viewBox="0 0 28 14">180 <rect x="0.5" y="1" width="22" height="12" rx="2" ry="2" fill="none" stroke="#4A4A4A" stroke-width="2"/>181 <rect x="3" y="3.5" width="16" height="7" fill="#4A4A4A"/>182 <rect x="24" y="5" width="3" height="4" fill="#4A4A4A"/>183 </svg>184 </div>185 </div>186 187 <!-- Search field -->188 <div class="search-area">189 <div class="search-field">190 <!-- Search icon -->191 <svg class="icon-48" viewBox="0 0 24 24">192 <circle cx="11" cy="11" r="7" stroke="#6B6B6E" stroke-width="2" fill="none"></circle>193 <path d="M16 16l6 6" stroke="#6B6B6E" stroke-width="2" />194 </svg>195 <div class="placeholder">Search for Products, Brands and More</div>196 <!-- Mic icon -->197 <svg class="icon-48" viewBox="0 0 24 24">198 <rect x="9" y="4" width="6" height="10" rx="3" fill="#6B6B6E"></rect>199 <path d="M5 11c0 4 3 6 7 6s7-2 7-6" stroke="#6B6B6E" stroke-width="2" fill="none"></path>200 <path d="M12 17v3" stroke="#6B6B6E" stroke-width="2"></path>201 </svg>202 </div>203 </div>204 205 <!-- Suggestions -->206 <div class="suggestions">207 <div class="suggestion">208 <!-- history icon -->209 <svg class="history-ico" viewBox="0 0 24 24">210 <circle cx="12" cy="12" r="9" stroke="#A0A0A5" stroke-width="2" fill="none"></circle>211 <path d="M12 7v6l4 2" stroke="#A0A0A5" stroke-width="2" fill="none"></path>212 </svg>213 <div class="s-texts">214 <div class="s-title">shirt for men</div>215 <div class="s-sub">in Casual Shirts</div>216 </div>217 <svg class="arrow-ico" viewBox="0 0 24 24">218 <path d="M5 19L19 5" stroke="#6B6B6E" stroke-width="2"></path>219 <path d="M8 5h11v11" stroke="#6B6B6E" stroke-width="2" fill="none"></path>220 </svg>221 </div>222 <div class="suggestion">223 <svg class="history-ico" viewBox="0 0 24 24">224 <circle cx="12" cy="12" r="9" stroke="#A0A0A5" stroke-width="2" fill="none"></circle>225 <path d="M12 7v6l4 2" stroke="#A0A0A5" stroke-width="2" fill="none"></path>226 </svg>227 <div class="s-texts">228 <div class="s-title">cycling shoes for men</div>229 </div>230 <svg class="arrow-ico" viewBox="0 0 24 24">231 <path d="M5 19L19 5" stroke="#6B6B6E" stroke-width="2"></path>232 <path d="M8 5h11v11" stroke="#6B6B6E" stroke-width="2" fill="none"></path>233 </svg>234 </div>235 <div class="suggestion">236 <svg class="history-ico" viewBox="0 0 24 24">237 <circle cx="12" cy="12" r="9" stroke="#A0A0A5" stroke-width="2" fill="none"></circle>238 <path d="M12 7v6l4 2" stroke="#A0A0A5" stroke-width="2" fill="none"></path>239 </svg>240 <div class="s-texts">241 <div class="s-title">cycling shoes for men</div>242 <div class="s-sub">in Men's Sports Shoes</div>243 </div>244 <svg class="arrow-ico" viewBox="0 0 24 24">245 <path d="M5 19L19 5" stroke="#6B6B6E" stroke-width="2"></path>246 <path d="M8 5h11v11" stroke="#6B6B6E" stroke-width="2" fill="none"></path>247 </svg>248 </div>249 <div class="suggestion">250 <svg class="history-ico" viewBox="0 0 24 24">251 <circle cx="12" cy="12" r="9" stroke="#A0A0A5" stroke-width="2" fill="none"></circle>252 <path d="M12 7v6l4 2" stroke="#A0A0A5" stroke-width="2" fill="none"></path>253 </svg>254 <div class="s-texts">255 <div class="s-title">hiking shoes</div>256 <div class="s-sub">in Men's Sports Shoes</div>257 </div>258 <svg class="arrow-ico" viewBox="0 0 24 24">259 <path d="M5 19L19 5" stroke="#6B6B6E" stroke-width="2"></path>260 <path d="M8 5h11v11" stroke="#6B6B6E" stroke-width="2" fill="none"></path>261 </svg>262 </div>263 <div class="suggestion">264 <svg class="history-ico" viewBox="0 0 24 24">265 <circle cx="12" cy="12" r="9" stroke="#A0A0A5" stroke-width="2" fill="none"></circle>266 <path d="M12 7v6l4 2" stroke="#A0A0A5" stroke-width="2" fill="none"></path>267 </svg>268 <div class="s-texts">269 <div class="s-title">shoes</div>270 </div>271 <svg class="arrow-ico" viewBox="0 0 24 24">272 <path d="M5 19L19 5" stroke="#6B6B6E" stroke-width="2"></path>273 <path d="M8 5h11v11" stroke="#6B6B6E" stroke-width="2" fill="none"></path>274 </svg>275 </div>276 </div>277 278 <!-- Discover more -->279 <div class="discover-wrap">280 <div class="discover-title">Discover More</div>281 <div class="chips">282 <div class="chip">Mobiles</div>283 <div class="chip">Shoes</div>284 <div class="chip">T shirts</div>285 <div class="chip">Laptops</div>286 <div class="chip">Watches</div>287 288 <div class="chip">Tv</div>289 <div class="chip">Sarees</div>290 <div class="chip">Headphones</div>291 <div class="chip">Bluetooth</div>292 <div class="chip">Fridge</div>293 294 <div class="chip">Bedsheet</div>295 <div class="chip">Water bottle</div>296 </div>297 </div>298 299 <!-- Keyboard Mock -->300 <div class="keyboard">301 <div class="kb-top">302 <div class="round">◧</div>303 <div class="round">😊</div>304 <div class="round">GIF</div>305 <div class="round">⚙</div>306 <div class="round">G⤳</div>307 <div class="round">🎨</div>308 <div class="round">🎤</div>309 </div>310 <div class="key-row">311 <div class="key">Q</div>312 <div class="key">W</div>313 <div class="key">E</div>314 <div class="key">R</div>315 <div class="key">T</div>316 <div class="key">Y</div>317 <div class="key">U</div>318 <div class="key">I</div>319 <div class="key">O</div>320 <div class="key">P</div>321 </div>322 <div class="key-row">323 <div class="key">A</div>324 <div class="key">S</div>325 <div class="key">D</div>326 <div class="key">F</div>327 <div class="key">G</div>328 <div class="key">H</div>329 <div class="key">J</div>330 <div class="key">K</div>331 <div class="key">L</div>332 </div>333 <div class="key-row">334 <div class="key">Z</div>335 <div class="key">X</div>336 <div class="key">C</div>337 <div class="key">V</div>338 <div class="key">B</div>339 <div class="key">N</div>340 <div class="key">M</div>341 <div class="key wide">⌫</div>342 </div>343 <div class="key-row">344 <div class="key">?123</div>345 <div class="key">,</div>346 <div class="key extra-wide"></div>347 <div class="key">.</div>348 <div class="key action">✓</div>349 </div>350 </div>351 352 <div class="nav-pill"></div>353</div>354</body>355</html>