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; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #FAFAFA;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16 color: #111;17 }18 19 /* Status bar */20 .status-bar {21 height: 110px;22 background: #EDEDED;23 display: flex;24 align-items: center;25 justify-content: space-between;26 padding: 0 36px;27 font-size: 34px;28 color: #222;29 letter-spacing: 0.5px;30 }31 .status-icons {32 display: flex;33 align-items: center;34 gap: 22px;35 }36 .dot { width: 10px; height: 10px; background:#777; border-radius:50%; display:inline-block; }37 38 /* Search bar */39 .search-wrap {40 height: 130px;41 background: #FFFFFF;42 display: flex;43 align-items: center;44 padding: 0 28px;45 border-bottom: 1px solid #E6E6E6;46 }47 .search-field {48 flex: 1;49 height: 92px;50 border-radius: 46px;51 background: #F3F3F3;52 display: flex;53 align-items: center;54 padding: 0 32px;55 gap: 24px;56 color: #777;57 font-size: 36px;58 }59 .icon {60 width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; color: #666;61 }62 .mic-btn { margin-left: 20px; }63 64 /* Suggestions */65 .suggestions {66 background: #FFFFFF;67 }68 .s-item {69 display: flex;70 align-items: center;71 padding: 26px 24px 26px 24px;72 border-bottom: 1px solid #EFEFEF;73 }74 .s-left {75 width: 80px;76 display: flex; align-items: center; justify-content: center;77 color: #777;78 }79 .s-mid { flex: 1; }80 .s-title {81 font-size: 40px;82 color: #222;83 line-height: 1.2;84 }85 .s-sub {86 margin-top: 6px;87 font-size: 32px;88 color: #3F51F7;89 }90 .s-right { width: 80px; display:flex; align-items:center; justify-content:center; color:#888; }91 92 /* Discover */93 .discover {94 padding: 30px 24px 20px 24px;95 background: #FFFFFF;96 border-top: 12px solid #F1F1F4;97 }98 .discover h3 {99 margin: 0 0 24px 6px;100 font-size: 36px;101 color: #333;102 font-weight: 600;103 }104 .chips {105 display: flex;106 flex-wrap: wrap;107 gap: 22px;108 }109 .chip {110 padding: 20px 28px;111 background: #FFFFFF;112 border: 1px solid #E6E6F2;113 border-radius: 16px;114 color: #5B63FF;115 font-size: 34px;116 box-shadow: 0 2px 0 rgba(0,0,0,0.04);117 }118 119 /* Keyboard mock */120 .keyboard {121 position: absolute;122 left: 0;123 right: 0;124 bottom: 0;125 height: 820px;126 background: #171717;127 border-top-left-radius: 24px;128 border-top-right-radius: 24px;129 box-shadow: 0 -4px 18px rgba(0,0,0,0.25);130 padding: 26px 22px;131 color: #EDEDED;132 }133 .kbd-top {134 display: flex;135 justify-content: space-between;136 align-items: center;137 margin-bottom: 18px;138 }139 .kbd-top .round {140 width: 70px; height: 70px; background: #222; border-radius: 16px; display:flex; align-items:center; justify-content:center;141 color:#BDBDBD; font-size: 28px;142 }143 .rows { display: grid; row-gap: 16px; }144 .row { display: flex; gap: 12px; justify-content: center; }145 .key {146 height: 120px; min-width: 86px;147 background: #242424;148 border-radius: 18px;149 display:flex; align-items:center; justify-content:center;150 font-size: 38px; color: #F3F3F3;151 }152 .key.wide { min-width: 140px; }153 .space { flex: 1; min-width: 520px; }154 .enter { background:#3C6DF6; }155 .footer-bar {156 position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);157 width: 360px; height: 10px; background:#D1D1D1; border-radius: 6px; opacity: .8;158 }159</style>160</head>161<body>162<div id="render-target">163 164 <!-- Status Bar -->165 <div class="status-bar">166 <div>11:25</div>167 <div class="status-icons">168 <span class="dot"></span>169 <span style="font-size:26px; color:#666;">B</span>170 <span class="dot"></span><span class="dot"></span>171 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2">172 <path d="M3 18h18M5 18c0-6 14-6 14 0"></path>173 </svg>174 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2">175 <path d="M3 12h18"></path>176 </svg>177 </div>178 </div>179 180 <!-- Search Bar -->181 <div class="search-wrap">182 <div class="search-field">183 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">184 <circle cx="11" cy="11" r="7"></circle>185 <path d="M20 20l-4-4"></path>186 </svg>187 <div>Search for Products, Brands and More</div>188 </div>189 <div class="mic-btn icon">190 <svg viewBox="0 0 24 24" fill="currentColor">191 <path d="M12 14a3 3 0 0 0 3-3V7a3 3 0 1 0-6 0v4a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V21h2v-3.08A7 7 0 0 0 19 11h-2z"/>192 </svg>193 </div>194 </div>195 196 <!-- Suggestions List -->197 <div class="suggestions">198 <div class="s-item">199 <div class="s-left">200 <svg viewBox="0 0 24 24" width="44" height="44" stroke="currentColor" fill="none" stroke-width="2">201 <path d="M12 8v5l4 2"></path>202 <path d="M21 12a9 9 0 1 1-2.64-6.36"></path>203 </svg>204 </div>205 <div class="s-mid">206 <div class="s-title">shirt for men</div>207 <div class="s-sub">in Casual Shirts</div>208 </div>209 <div class="s-right">210 <svg viewBox="0 0 24 24" width="44" height="44" stroke="currentColor" fill="none" stroke-width="2">211 <path d="M7 17L17 7"></path>212 <path d="M8 7h9v9"></path>213 </svg>214 </div>215 </div>216 217 <div class="s-item">218 <div class="s-left">219 <svg viewBox="0 0 24 24" width="44" height="44" stroke="currentColor" fill="none" stroke-width="2">220 <path d="M12 8v5l4 2"></path>221 <path d="M21 12a9 9 0 1 1-2.64-6.36"></path>222 </svg>223 </div>224 <div class="s-mid">225 <div class="s-title">cycling shoes for men</div>226 </div>227 <div class="s-right">228 <svg viewBox="0 0 24 24" width="44" height="44" stroke="currentColor" fill="none" stroke-width="2">229 <path d="M7 17L17 7"></path>230 <path d="M8 7h9v9"></path>231 </svg>232 </div>233 </div>234 235 <div class="s-item">236 <div class="s-left">237 <svg viewBox="0 0 24 24" width="44" height="44" stroke="currentColor" fill="none" stroke-width="2">238 <path d="M12 8v5l4 2"></path>239 <path d="M21 12a9 9 0 1 1-2.64-6.36"></path>240 </svg>241 </div>242 <div class="s-mid">243 <div class="s-title">cycling shoes for men</div>244 <div class="s-sub">in Men's Sports Shoes</div>245 </div>246 <div class="s-right">247 <svg viewBox="0 0 24 24" width="44" height="44" stroke="currentColor" fill="none" stroke-width="2">248 <path d="M7 17L17 7"></path>249 <path d="M8 7h9v9"></path>250 </svg>251 </div>252 </div>253 254 <div class="s-item">255 <div class="s-left">256 <svg viewBox="0 0 24 24" width="44" height="44" stroke="currentColor" fill="none" stroke-width="2">257 <path d="M12 8v5l4 2"></path>258 <path d="M21 12a9 9 0 1 1-2.64-6.36"></path>259 </svg>260 </div>261 <div class="s-mid">262 <div class="s-title">hiking shoes</div>263 <div class="s-sub">in Men's Sports Shoes</div>264 </div>265 <div class="s-right">266 <svg viewBox="0 0 24 24" width="44" height="44" stroke="currentColor" fill="none" stroke-width="2">267 <path d="M7 17L17 7"></path>268 <path d="M8 7h9v9"></path>269 </svg>270 </div>271 </div>272 273 <div class="s-item">274 <div class="s-left">275 <svg viewBox="0 0 24 24" width="44" height="44" stroke="currentColor" fill="none" stroke-width="2">276 <path d="M12 8v5l4 2"></path>277 <path d="M21 12a9 9 0 1 1-2.64-6.36"></path>278 </svg>279 </div>280 <div class="s-mid">281 <div class="s-title">shoes</div>282 </div>283 <div class="s-right">284 <svg viewBox="0 0 24 24" width="44" height="44" stroke="currentColor" fill="none" stroke-width="2">285 <path d="M7 17L17 7"></path>286 <path d="M8 7h9v9"></path>287 </svg>288 </div>289 </div>290 </div>291 292 <!-- Discover More -->293 <div class="discover">294 <h3>Discover More</h3>295 <div class="chips">296 <div class="chip">Mobiles</div>297 <div class="chip">Shoes</div>298 <div class="chip">T shirts</div>299 <div class="chip">Laptops</div>300 <div class="chip">Watches</div>301 <div class="chip">Tv</div>302 <div class="chip">Sarees</div>303 <div class="chip">Headphones</div>304 <div class="chip">Bluetooth</div>305 <div class="chip">Fridge</div>306 <div class="chip">Bedsheet</div>307 <div class="chip">Water bottle</div>308 </div>309 </div>310 311 <!-- Keyboard Mock -->312 <div class="keyboard">313 <div class="kbd-top">314 <div style="display:flex; gap:12px;">315 <div class="round">⬚</div>316 <div class="round">😊</div>317 <div class="round">GIF</div>318 <div class="round">⚙️</div>319 <div class="round">G↔︎</div>320 <div class="round">🎨</div>321 </div>322 <div class="round">🎙️</div>323 </div>324 325 <div class="rows">326 <div class="row">327 <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><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>328 </div>329 <div class="row">330 <div class="key wide">A</div><div class="key">S</div><div class="key">D</div><div class="key">F</div><div class="key">G</div><div class="key">H</div><div class="key">J</div><div class="key">K</div><div class="key wide">L</div>331 </div>332 <div class="row">333 <div class="key wide">⇧</div><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><div class="key wide">⌫</div>334 </div>335 <div class="row">336 <div class="key wide">?123</div>337 <div class="key wide">,</div>338 <div class="key space"> </div>339 <div class="key wide">.</div>340 <div class="key wide enter">✓</div>341 </div>342 </div>343 344 <div class="footer-bar"></div>345 </div>346 347</div>348</body>349</html>