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: #F6F5F3;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16 color: #202020;17 }18 19 /* Status bar */20 .status-bar {21 height: 120px;22 background: #CFCFCF;23 padding: 0 40px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 font-size: 36px;28 color: #1f1f1f;29 }30 .status-icons {31 display: flex; 32 align-items: center; 33 gap: 24px;34 }35 .status-icon {36 width: 36px; height: 36px; border-radius: 50%; background: #E6E6E6;37 }38 39 /* Header search area */40 .search-header {41 height: 180px;42 background: #F3F2F0;43 display: flex;44 align-items: center;45 padding: 0 40px;46 gap: 28px;47 border-bottom: 1px solid #EAEAEA;48 }49 .search-title {50 font-size: 54px;51 font-weight: 500;52 letter-spacing: 0.5px;53 }54 .clear-btn {55 margin-left: auto;56 font-size: 36px;57 color: #4b4b4b;58 }59 .caret {60 width: 2px; height: 56px; background: #333; display: inline-block; margin-left: 6px;61 }62 63 /* Section title */64 .section-title {65 font-size: 44px;66 font-weight: 700;67 padding: 40px;68 padding-bottom: 10px;69 }70 71 /* Suggestions list */72 .list {73 padding: 0 20px 0 20px;74 }75 .row {76 height: 140px;77 display: flex;78 align-items: center;79 padding: 0 20px 0 20px;80 border-bottom: 1px solid #EEE;81 gap: 28px;82 }83 .row .label {84 font-size: 38px;85 color: #1f1f1f;86 }87 .row .arrow {88 margin-left: auto;89 }90 .icon-wrap {91 width: 84px; height: 84px; border: 2px solid #1f1f1f; border-radius: 50%;92 display: flex; align-items: center; justify-content: center;93 }94 .muted-divider {95 height: 22px;96 background: #F7F6F4;97 }98 99 /* Bottom action bar above keyboard */100 .action-bar {101 position: absolute;102 left: 0;103 right: 0;104 bottom: 860px; /* sits above keyboard area */105 height: 200px;106 background: #FFFFFF;107 border-top: 1px solid #E7E7E7;108 display: flex;109 justify-content: space-around;110 align-items: center;111 text-align: center;112 padding: 0 40px;113 }114 .action {115 width: 280px;116 display: flex;117 flex-direction: column;118 align-items: center;119 gap: 18px;120 color: #3a3a3a;121 font-size: 32px;122 }123 124 /* Keyboard area (simplified representation) */125 .keyboard {126 position: absolute;127 left: 0; right: 0;128 bottom: 80px;129 height: 780px;130 background: #0E1411;131 color: #D7E0D5;132 padding: 24px 26px;133 }134 .kb-topbar {135 display: flex; align-items: center; justify-content: space-between;136 padding: 12px 6px 20px 6px;137 color: #CFE0CF;138 font-size: 34px;139 }140 .kb-keys {141 display: grid;142 gap: 18px;143 }144 .row-keys {145 display: flex;146 gap: 14px;147 justify-content: center;148 }149 .key {150 background: #1A221E;151 border-radius: 18px;152 padding: 26px 30px;153 min-width: 72px;154 text-align: center;155 font-size: 36px;156 color: #E6F1E6;157 }158 .key.wide { min-width: 150px; }159 .key.lg { min-width: 180px; }160 .key.search {161 background: #6EFF7A;162 color: #0A0A0A;163 font-weight: 700;164 }165 166 /* Gesture bar */167 .gesture {168 position: absolute;169 left: 0; right: 0; bottom: 16px;170 height: 64px;171 display: flex; align-items: center; justify-content: center;172 }173 .gesture .pill {174 width: 240px; height: 12px; border-radius: 12px; background: #DADADA;175 }176 177 /* SVG defaults */178 svg { display: block; }179</style>180</head>181<body>182<div id="render-target">183 184 <!-- Status Bar -->185 <div class="status-bar">186 <div>9:37</div>187 <div class="status-icons">188 <div style="font-size:32px;">21°</div>189 <div class="status-icon"></div>190 <div class="status-icon"></div>191 <div class="status-icon"></div>192 </div>193 </div>194 195 <!-- Header -->196 <div class="search-header">197 <!-- Back arrow -->198 <svg width="60" height="60" viewBox="0 0 48 48">199 <path d="M28 8 L12 24 L28 40" stroke="#111" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>200 </svg>201 <div class="search-title">Trouser<span class="caret"></span></div>202 <div class="clear-btn">Clear</div>203 </div>204 205 <div class="section-title">Search suggestions</div>206 207 <div class="list">208 <!-- Row 1: history clock -->209 <div class="row">210 <div class="icon-wrap">211 <svg width="44" height="44" viewBox="0 0 48 48">212 <circle cx="24" cy="24" r="18" stroke="#111" stroke-width="3" fill="none"/>213 <path d="M24 14 V24 L32 28" stroke="#111" stroke-width="3" fill="none" stroke-linecap="round"/>214 </svg>215 </div>216 <div class="label">trouser’s ladies</div>217 <div class="arrow">218 <svg width="40" height="40" viewBox="0 0 48 48">219 <path d="M18 10 L32 24 L18 38" stroke="#111" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>220 </svg>221 </div>222 </div>223 224 <!-- Row 2 -->225 <div class="row">226 <div class="icon-wrap">227 <svg width="44" height="44" viewBox="0 0 48 48">228 <circle cx="22" cy="22" r="14" stroke="#111" stroke-width="3" fill="none"/>229 <path d="M32 32 L42 42" stroke="#111" stroke-width="3" fill="none" stroke-linecap="round"/>230 </svg>231 </div>232 <div class="label">trouser’s</div>233 <div class="arrow">234 <svg width="40" height="40" viewBox="0 0 48 48">235 <path d="M18 10 L32 24 L18 38" stroke="#111" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>236 </svg>237 </div>238 </div>239 240 <!-- Row 3 -->241 <div class="row">242 <div class="icon-wrap">243 <svg width="44" height="44" viewBox="0 0 48 48">244 <circle cx="22" cy="22" r="14" stroke="#111" stroke-width="3" fill="none"/>245 <path d="M32 32 L42 42" stroke="#111" stroke-width="3" fill="none" stroke-linecap="round"/>246 </svg>247 </div>248 <div class="label">trouser’s ladies pants</div>249 <div class="arrow">250 <svg width="40" height="40" viewBox="0 0 48 48">251 <path d="M18 10 L32 24 L18 38" stroke="#111" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>252 </svg>253 </div>254 </div>255 256 <!-- Row 4 -->257 <div class="row">258 <div class="icon-wrap">259 <svg width="44" height="44" viewBox="0 0 48 48">260 <circle cx="22" cy="22" r="14" stroke="#111" stroke-width="3" fill="none"/>261 <path d="M32 32 L42 42" stroke="#111" stroke-width="3" fill="none" stroke-linecap="round"/>262 </svg>263 </div>264 <div class="label">trouser jeans</div>265 <div class="arrow">266 <svg width="40" height="40" viewBox="0 0 48 48">267 <path d="M18 10 L32 24 L18 38" stroke="#111" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>268 </svg>269 </div>270 </div>271 272 <!-- Row 5 -->273 <div class="row">274 <div class="icon-wrap">275 <svg width="44" height="44" viewBox="0 0 48 48">276 <circle cx="22" cy="22" r="14" stroke="#111" stroke-width="3" fill="none"/>277 <path d="M32 32 L42 42" stroke="#111" stroke-width="3" fill="none" stroke-linecap="round"/>278 </svg>279 </div>280 <div class="label">trouser’s cargo</div>281 <div class="arrow">282 <svg width="40" height="40" viewBox="0 0 48 48">283 <path d="M18 10 L32 24 L18 38" stroke="#111" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>284 </svg>285 </div>286 </div>287 </div>288 289 <!-- Action Bar -->290 <div class="action-bar">291 <div class="action">292 <svg width="70" height="70" viewBox="0 0 48 48">293 <rect x="8" y="14" width="32" height="22" rx="4" stroke="#111" stroke-width="3" fill="none"/>294 <circle cx="24" cy="24" r="7" stroke="#111" stroke-width="3" fill="none"/>295 <rect x="16" y="10" width="6" height="4" rx="2" fill="#111"/>296 </svg>297 <div>Take Photo</div>298 </div>299 <div class="action">300 <svg width="70" height="70" viewBox="0 0 48 48">301 <rect x="14" y="14" width="20" height="20" stroke="#111" stroke-width="3" fill="none"/>302 <path d="M10 20 V10 H20" stroke="#111" stroke-width="3" fill="none" stroke-linecap="round"/>303 <path d="M38 20 V10 H28" stroke="#111" stroke-width="3" fill="none" stroke-linecap="round"/>304 <path d="M10 28 V38 H20" stroke="#111" stroke-width="3" fill="none" stroke-linecap="round"/>305 <path d="M38 28 V38 H28" stroke="#111" stroke-width="3" fill="none" stroke-linecap="round"/>306 </svg>307 <div>Scan Code</div>308 </div>309 <div class="action">310 <svg width="70" height="70" viewBox="0 0 48 48">311 <path d="M24 10 C18 10 14 14 14 19 C14 26 24 38 24 38 C24 38 34 26 34 19 C34 14 30 10 24 10 Z" stroke="#111" stroke-width="3" fill="none"/>312 <circle cx="24" cy="19" r="5" stroke="#111" stroke-width="3" fill="none"/>313 </svg>314 <div>Find Store</div>315 </div>316 </div>317 318 <!-- Keyboard (simplified) -->319 <div class="keyboard">320 <div class="kb-topbar">321 <div>Trouser | Trousers</div>322 <div>323 <svg width="46" height="46" viewBox="0 0 48 48">324 <circle cx="22" cy="22" r="14" stroke="#CFE0CF" stroke-width="3" fill="none"/>325 <path d="M32 32 L42 42" stroke="#CFE0CF" stroke-width="3" fill="none" stroke-linecap="round"/>326 </svg>327 </div>328 </div>329 <div class="kb-keys">330 <div class="row-keys">331 <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>332 </div>333 <div class="row-keys">334 <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><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>335 </div>336 <div class="row-keys">337 <div class="key wide">shift</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>338 </div>339 <div class="row-keys">340 <div class="key lg">?123</div>341 <div class="key lg">,</div>342 <div class="key lg">🙂</div>343 <div class="key lg">space</div>344 <div class="key lg">.</div>345 <div class="key search">Search</div>346 </div>347 </div>348 </div>349 350 <!-- Gesture bar -->351 <div class="gesture"><div class="pill"></div></div>352 353</div>354</body>355</html>