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 Suggestions UI</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: linear-gradient(180deg, #a9e3da 0%, #b9efd7 35%, #ffffff 42%, #ffffff 100%);15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16 color: #111;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 22px;23 left: 32px;24 right: 32px;25 height: 70px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 font-size: 38px;30 color: #122;31 }32 .status-right {33 display: flex;34 gap: 22px;35 align-items: center;36 }37 .icon { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; }38 39 /* Search header */40 .search-header {41 position: absolute;42 top: 110px;43 left: 24px;44 right: 24px;45 display: flex;46 align-items: center;47 gap: 22px;48 }49 .back-btn {50 width: 70px;51 height: 70px;52 display: flex;53 align-items: center;54 justify-content: center;55 }56 .search-box {57 flex: 1;58 height: 116px;59 background: #fff;60 border-radius: 28px;61 box-shadow: 0 10px 16px rgba(0,0,0,0.18);62 display: flex;63 align-items: center;64 padding: 0 28px;65 gap: 20px;66 }67 .placeholder {68 color: #6b6f75;69 font-size: 40px;70 }71 72 /* Suggestions */73 .suggestions {74 position: absolute;75 top: 260px;76 left: 0;77 right: 0;78 background: #fff;79 }80 .s-item {81 display: grid;82 grid-template-columns: 110px 1fr 110px;83 align-items: center;84 padding: 26px 24px;85 height: 126px;86 border-bottom: 1px solid #e7e7e7;87 }88 .s-text {89 display: block;90 overflow: hidden;91 white-space: nowrap;92 text-overflow: ellipsis;93 font-size: 42px;94 }95 .s-text .query { color: #163f9a; font-weight: 700; }96 .s-text .meta { color: #7a7f86; font-weight: 500; }97 .close-btn {98 width: 72px; height: 72px; border-radius: 36px;99 display: flex; align-items: center; justify-content: center;100 }101 102 /* Tools (photo/camera) */103 .tools {104 display: flex;105 gap: 28px;106 padding: 28px 32px 40px;107 background: #fff;108 }109 .tool {110 flex: 1;111 height: 120px;112 border: 1px solid #e3e3e3;113 border-radius: 22px;114 background: #fff;115 display: flex;116 align-items: center;117 justify-content: center;118 gap: 18px;119 font-size: 38px;120 color: #222;121 }122 123 /* Keyboard mock */124 .keyboard {125 position: absolute;126 left: 0;127 right: 0;128 bottom: 0;129 height: 860px;130 background: #101418;131 border-top-left-radius: 16px;132 border-top-right-radius: 16px;133 box-shadow: 0 -6px 18px rgba(0,0,0,0.35);134 padding: 20px 16px 70px;135 }136 .kb-row {137 display: flex;138 justify-content: center;139 gap: 14px;140 margin: 20px 0;141 }142 .key {143 height: 110px;144 min-width: 86px;145 background: #262c31;146 color: #d7dadc;147 border-radius: 14px;148 display: flex; align-items: center; justify-content: center;149 font-size: 44px;150 }151 .key.wide { min-width: 160px; }152 .key.space { min-width: 520px; }153 .gesture {154 position: absolute;155 bottom: 22px;156 left: 50%;157 transform: translateX(-50%);158 width: 180px;159 height: 10px;160 border-radius: 6px;161 background: #e9e9e9;162 opacity: 0.9;163 }164</style>165</head>166<body>167<div id="render-target">168 169 <!-- Status bar -->170 <div class="status-bar">171 <div>12:30</div>172 <div class="status-right">173 <span class="icon">174 <svg width="34" height="34" viewBox="0 0 24 24" fill="#1b2" xmlns="http://www.w3.org/2000/svg">175 <path d="M4 11h10v2H4z"/>176 </svg>177 </span>178 <span class="icon">179 <svg width="34" height="34" viewBox="0 0 24 24" fill="#667" xmlns="http://www.w3.org/2000/svg">180 <circle cx="12" cy="12" r="9" stroke="#667" stroke-width="2" fill="none"/>181 <path d="M12 6v6l4 2" stroke="#667" stroke-width="2" fill="none"/>182 </svg>183 </span>184 <span class="icon">185 <svg width="34" height="34" viewBox="0 0 24 24" fill="#667" xmlns="http://www.w3.org/2000/svg">186 <rect x="3" y="4" width="18" height="16" rx="2" ry="2" stroke="#667" fill="none" stroke-width="2"/>187 <path d="M3 10h18" stroke="#667" stroke-width="2"/>188 </svg>189 </span>190 <span class="icon">191 <svg width="40" height="40" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">192 <path d="M3 7h18v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z" fill="none" stroke="#667" stroke-width="2"/>193 <path d="M21 7V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v1" stroke="#667" stroke-width="2" fill="none"/>194 </svg>195 </span>196 <span style="display:flex; align-items:center; gap:8px; font-size:34px;">197 <svg width="40" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">198 <rect x="2" y="7" width="18" height="10" rx="2" fill="none" stroke="#5a5a5a" stroke-width="2"/>199 <rect x="20" y="10" width="2" height="4" fill="#5a5a5a"/>200 </svg>201 93%202 </span>203 </div>204 </div>205 206 <!-- Search header -->207 <div class="search-header">208 <div class="back-btn">209 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" xmlns="http://www.w3.org/2000/svg">210 <path d="M15 18l-6-6 6-6"/>211 </svg>212 </div>213 <div class="search-box">214 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#5a5a5a" stroke-width="2" xmlns="http://www.w3.org/2000/svg">215 <circle cx="11" cy="11" r="7"/>216 <path d="M20 20l-4-4"/>217 </svg>218 <div class="placeholder">Search Amazon.in</div>219 </div>220 </div>221 222 <!-- Suggestions list -->223 <div class="suggestions">224 <div class="s-item">225 <div class="icon">226 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#6b6f75" stroke-width="2" xmlns="http://www.w3.org/2000/svg">227 <circle cx="12" cy="12" r="9"/>228 <path d="M12 7v6l3 2"/>229 </svg>230 </div>231 <span class="s-text">232 <span class="query">formal shoes for men size 42</span>233 <span class="meta"> in All Categories</span>234 </span>235 <div class="close-btn">236 <svg width="40" height="40" viewBox="0 0 24 24" stroke="#444" stroke-width="2" fill="none" xmlns="http://www.w3.org/2000/svg">237 <path d="M6 6l12 12M18 6L6 18"/>238 </svg>239 </div>240 </div>241 242 <div class="s-item">243 <div class="icon">244 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#6b6f75" stroke-width="2" xmlns="http://www.w3.org/2000/svg">245 <circle cx="12" cy="12" r="9"/>246 <path d="M12 7v6l3 2"/>247 </svg>248 </div>249 <span class="s-text"><span class="query">sports shoes for men</span><span class="meta"> in All Categories</span></span>250 <div class="close-btn">251 <svg width="40" height="40" viewBox="0 0 24 24" stroke="#444" stroke-width="2" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 6l12 12M18 6L6 18"/></svg>252 </div>253 </div>254 255 <div class="s-item">256 <div class="icon">257 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#6b6f75" stroke-width="2" xmlns="http://www.w3.org/2000/svg">258 <circle cx="12" cy="12" r="9"/>259 <path d="M12 7v6l3 2"/>260 </svg>261 </div>262 <span class="s-text"><span class="query">liberty shoes for men</span><span class="meta"> in All Categories</span></span>263 <div class="close-btn">264 <svg width="40" height="40" viewBox="0 0 24 24" stroke="#444" stroke-width="2" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 6l12 12M18 6L6 18"/></svg>265 </div>266 </div>267 268 <div class="s-item">269 <div class="icon">270 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#6b6f75" stroke-width="2" xmlns="http://www.w3.org/2000/svg">271 <circle cx="12" cy="12" r="9"/>272 <path d="M12 7v6l3 2"/>273 </svg>274 </div>275 <span class="s-text"><span class="query">formal shoes for men</span><span class="meta"> in All Categories</span></span>276 <div class="close-btn">277 <svg width="40" height="40" viewBox="0 0 24 24" stroke="#444" stroke-width="2" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 6l12 12M18 6L6 18"/></svg>278 </div>279 </div>280 281 <div class="s-item">282 <div class="icon">283 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#6b6f75" stroke-width="2" xmlns="http://www.w3.org/2000/svg">284 <circle cx="12" cy="12" r="9"/>285 <path d="M12 7v6l3 2"/>286 </svg>287 </div>288 <span class="s-text"><span class="query">meindl shoes for men</span><span class="meta"> in All Categories</span></span>289 <div class="close-btn">290 <svg width="40" height="40" viewBox="0 0 24 24" stroke="#444" stroke-width="2" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 6l12 12M18 6L6 18"/></svg>291 </div>292 </div>293 294 <div class="s-item">295 <div class="icon">296 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#6b6f75" stroke-width="2" xmlns="http://www.w3.org/2000/svg">297 <circle cx="12" cy="12" r="9"/>298 <path d="M12 7v6l3 2"/>299 </svg>300 </div>301 <span class="s-text"><span class="query">meindl formal shoes for men</span><span class="meta"> in All Categories</span></span>302 <div class="close-btn">303 <svg width="40" height="40" viewBox="0 0 24 24" stroke="#444" stroke-width="2" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 6l12 12M18 6L6 18"/></svg>304 </div>305 </div>306 307 <div class="s-item">308 <div class="icon">309 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#6b6f75" stroke-width="2" xmlns="http://www.w3.org/2000/svg">310 <circle cx="12" cy="12" r="9"/>311 <path d="M12 7v6l3 2"/>312 </svg>313 </div>314 <span class="s-text"><span class="query">vitaform formal shoes for men</span><span class="meta"> in All Categories</span></span>315 <div class="close-btn">316 <svg width="40" height="40" viewBox="0 0 24 24" stroke="#444" stroke-width="2" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 6l12 12M18 6L6 18"/></svg>317 </div>318 </div>319 320 <div class="s-item">321 <div class="icon">322 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#6b6f75" stroke-width="2" xmlns="http://www.w3.org/2000/svg">323 <circle cx="12" cy="12" r="9"/>324 <path d="M12 7v6l3 2"/>325 </svg>326 </div>327 <span class="s-text"><span class="query">blue t-shirt for men</span><span class="meta"> in All Categories</span></span>328 <div class="close-btn">329 <svg width="40" height="40" viewBox="0 0 24 24" stroke="#444" stroke-width="2" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 6l12 12M18 6L6 18"/></svg>330 </div>331 </div>332 333 <div class="s-item">334 <div class="icon">335 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#6b6f75" stroke-width="2" xmlns="http://www.w3.org/2000/svg">336 <circle cx="12" cy="12" r="9"/>337 <path d="M12 7v6l3 2"/>338 </svg>339 </div>340 <span class="s-text"><span class="query">meindl shoes</span><span class="meta"> in All Categories</span></span>341 <div class="close-btn">342 <svg width="40" height="40" viewBox="0 0 24 24" stroke="#444" stroke-width="2" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 6l12 12M18 6L6 18"/></svg>343 </div>344 </div>345 346 <div class="s-item" style="border-bottom:none;">347 <div class="icon">348 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#6b6f75" stroke-width="2" xmlns="http://www.w3.org/2000/svg">349 <circle cx="12" cy="12" r="9"/>350 <path d="M12 7v6l3 2"/>351 </svg>352 </div>353 <span class="s-text"><span class="query">vitaform shoes</span><span class="meta"> in All Categories</span></span>354 <div class="close-btn">355 <svg width="40" height="40" viewBox="0 0 24 24" stroke="#444" stroke-width="2" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 6l12 12M18 6L6 18"/></svg>356 </div>357 </div>358 359 <!-- Tools row -->360 <div class="tools">361 <div class="tool">362 <svg width="54" height="54" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2" xmlns="http://www.w3.org/2000/svg">363 <rect x="3" y="4" width="18" height="16" rx="2"/>364 <path d="M7 14l3-3 3 3 3-4 2 3"/>365 <circle cx="9" cy="8" r="1.5" fill="#333"/>366 </svg>367 <span>Search with photo</span>368 </div>369 <div class="tool">370 <svg width="54" height="54" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2" xmlns="http://www.w3.org/2000/svg">371 <path d="M7 8l2-2h6l2 2h2v10H3V8h4z"/>372 <circle cx="12" cy="13" r="3.2"/>373 </svg>374 <span>Search with camera</span>375 </div>376 </div>377 </div>378 379 <!-- Keyboard mock -->380 <div class="keyboard">381 <div class="kb-row">382 <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>383 <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>384 </div>385 <div class="kb-row">386 <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>387 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>388 </div>389 <div class="kb-row">390 <div class="key wide">shift</div>391 <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>392 <div class="key">n</div><div class="key">m</div>393 <div class="key wide">⌫</div>394 </div>395 <div class="kb-row">396 <div class="key wide">?123</div>397 <div class="key">,</div>398 <div class="key space"></div>399 <div class="key">.</div>400 <div class="key wide">↵</div>401 </div>402 <div class="gesture"></div>403 </div>404 405</div>406</body>407</html>