GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Search Suggestions UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: linear-gradient(180deg, #8EDACF 0%, #AEE6DC 40%, #FFFFFF 100%);15 border-radius: 0;16 box-shadow: none;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0;23 left: 0;24 width: 1080px;25 height: 96px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 padding: 0 32px;30 color: #1b1b1b;31 font-size: 36px;32 }33 .status-icons {34 display: flex;35 gap: 22px;36 align-items: center;37 }38 .icon-round {39 width: 36px;40 height: 36px;41 border-radius: 50%;42 border: 2px solid #4c4c4c;43 display: inline-block;44 }45 .icon-dot { width: 10px; height: 10px; background: #4c4c4c; border-radius: 50%; display: inline-block; }46 .battery {47 width: 58px; height: 28px; border: 2px solid #4c4c4c; border-radius: 6px; position: relative;48 }49 .battery::after { content: ""; position: absolute; right: -8px; top: 8px; width: 6px; height: 12px; background: #4c4c4c; border-radius: 2px; }50 .battery-fill { width: 36px; height: 20px; background: #4c4c4c; margin: 3px; border-radius: 3px; }51 52 /* Search bar */53 .search-wrapper {54 position: absolute;55 top: 120px;56 left: 24px;57 width: 1032px;58 }59 .search-row {60 display: flex;61 align-items: center;62 gap: 20px;63 }64 .back-btn {65 width: 72px;66 height: 72px;67 display: flex;68 align-items: center;69 justify-content: center;70 }71 .pill {72 flex: 1;73 height: 96px;74 background: #FFFFFF;75 border-radius: 48px;76 box-shadow: 0 2px 6px rgba(0,0,0,0.12);77 display: flex;78 align-items: center;79 padding: 0 28px;80 gap: 22px;81 }82 .search-icon svg { width: 44px; height: 44px; }83 .search-input {84 flex: 1;85 font-size: 40px;86 color: #222;87 outline: none;88 border: none;89 background: transparent;90 }91 .clear-btn {92 width: 56px;93 height: 56px;94 border-radius: 28px;95 background: #F2F2F2;96 display: flex;97 align-items: center;98 justify-content: center;99 }100 .clear-btn svg { width: 28px; height: 28px; }101 102 /* Suggestions */103 .suggestions {104 position: absolute;105 top: 240px;106 left: 0;107 width: 1080px;108 padding: 0 24px;109 }110 .suggestion-item {111 height: 120px;112 display: flex;113 align-items: center;114 border-bottom: 1px solid #E6E6E6;115 }116 .left-icon {117 width: 72px;118 display: flex;119 align-items: center;120 justify-content: center;121 color: #5f6368;122 }123 .sugg-text {124 flex: 1;125 font-size: 40px;126 color: #222;127 }128 .sugg-sub {129 font-size: 34px;130 color: #8a8a8a;131 margin-left: 8px;132 }133 .right-action {134 width: 80px;135 display: flex;136 align-items: center;137 justify-content: center;138 }139 .right-action svg { width: 40px; height: 40px; }140 141 /* Keyboard mock */142 .keyboard {143 position: absolute;144 left: 0;145 bottom: 96px;146 width: 1080px;147 height: 780px;148 background: #1F1F1F;149 border-top-left-radius: 24px;150 border-top-right-radius: 24px;151 box-shadow: 0 -6px 16px rgba(0,0,0,0.25);152 padding: 24px 24px 32px 24px;153 color: #EDEDED;154 }155 .kb-top-row {156 display: flex;157 align-items: center;158 gap: 18px;159 margin-bottom: 18px;160 }161 .chip {162 padding: 12px 20px;163 border-radius: 20px;164 background: #2A2A2A;165 font-size: 34px;166 }167 .keys {168 display: grid;169 grid-template-columns: repeat(10, 1fr);170 gap: 14px;171 margin-top: 24px;172 }173 .key {174 height: 96px;175 background: #2B2B2B;176 border-radius: 18px;177 display: flex;178 align-items: center;179 justify-content: center;180 font-size: 38px;181 color: #F1F1F1;182 }183 .wide { grid-column: span 2; }184 .bottom-row {185 display: grid;186 grid-template-columns: 1.2fr 6fr 1.2fr 1.2fr;187 gap: 14px;188 margin-top: 24px;189 }190 .enter-key {191 background: #BFD5F9;192 color: #1F1F1F;193 }194 195 /* Gesture bar */196 .gesture-bar {197 position: absolute;198 bottom: 24px;199 left: 50%;200 transform: translateX(-50%);201 width: 240px;202 height: 12px;203 background: #D9D9D9;204 border-radius: 12px;205 }206 207 /* Simple SVG icon colors */208 .icon-stroke { stroke: #3C3C3C; }209 .icon-stroke-light { stroke: #6C6C6C; }210 .icon-fill { fill: #3C3C3C; }211</style>212</head>213<body>214<div id="render-target">215 216 <!-- Status bar -->217 <div class="status-bar">218 <div class="time">10:57</div>219 <div class="status-icons">220 <span class="icon-round"></span>221 <span class="icon-round"></span>222 <span style="font-weight:600; font-style:italic; color:#3c3c3c; font-size:34px;">T</span>223 <span class="icon-dot"></span>224 <svg width="34" height="34" viewBox="0 0 24 24">225 <path class="icon-stroke" d="M12 2L4 22h16L12 2z" stroke-width="2" fill="none"/>226 </svg>227 <svg width="38" height="38" viewBox="0 0 24 24">228 <path class="icon-stroke" d="M2 8h20M5 12h14M8 16h8" stroke-width="2" fill="none"/>229 </svg>230 <div class="battery"><div class="battery-fill"></div></div>231 </div>232 </div>233 234 <!-- Search bar -->235 <div class="search-wrapper">236 <div class="search-row">237 <div class="back-btn">238 <svg width="44" height="44" viewBox="0 0 24 24">239 <path class="icon-stroke" d="M15 6l-6 6 6 6" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>240 </svg>241 </div>242 <div class="pill">243 <div class="search-icon">244 <svg viewBox="0 0 24 24">245 <circle cx="10" cy="10" r="6" stroke="#6C6C6C" stroke-width="2" fill="none"></circle>246 <path d="M14.5 14.5 L20 20" stroke="#6C6C6C" stroke-width="2" stroke-linecap="round"></path>247 </svg>248 </div>249 <div class="search-input">toys for 2 years old boy</div>250 <div class="clear-btn">251 <svg viewBox="0 0 24 24">252 <path d="M6 6 L18 18 M18 6 L6 18" stroke="#6C6C6C" stroke-width="2" stroke-linecap="round"/>253 </svg>254 </div>255 </div>256 </div>257 </div>258 259 <!-- Suggestions list -->260 <div class="suggestions">261 262 <div class="suggestion-item">263 <div class="left-icon">264 <!-- Clock icon -->265 <svg viewBox="0 0 24 24">266 <circle cx="12" cy="12" r="9" stroke="#6C6C6C" stroke-width="2" fill="none"/>267 <path d="M12 7v6l4 2" stroke="#6C6C6C" stroke-width="2" stroke-linecap="round"/>268 </svg>269 </div>270 <div class="sugg-text">271 toys for 2 years old boy <span class="sugg-sub">in All Categories</span>272 </div>273 <div class="right-action">274 <!-- small X close -->275 <svg viewBox="0 0 24 24">276 <path d="M6 6 L18 18 M18 6 L6 18" stroke="#6C6C6C" stroke-width="2" stroke-linecap="round"/>277 </svg>278 </div>279 </div>280 281 <div class="suggestion-item">282 <div class="left-icon">283 <!-- Search icon -->284 <svg viewBox="0 0 24 24">285 <circle cx="10" cy="10" r="6" stroke="#6C6C6C" stroke-width="2" fill="none"/>286 <path d="M14.5 14.5 L20 20" stroke="#6C6C6C" stroke-width="2" stroke-linecap="round"/>287 </svg>288 </div>289 <div class="sugg-text">toys for 2 years old boy</div>290 <div class="right-action">291 <!-- enter arrow -->292 <svg viewBox="0 0 24 24">293 <path d="M5 5h9v6M14 11l3-3M14 11l3 3" stroke="#6C6C6C" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>294 </svg>295 </div>296 </div>297 298 <div class="suggestion-item">299 <div class="left-icon">300 <svg viewBox="0 0 24 24">301 <circle cx="10" cy="10" r="6" stroke="#6C6C6C" stroke-width="2" fill="none"/>302 <path d="M14.5 14.5 L20 20" stroke="#6C6C6C" stroke-width="2" stroke-linecap="round"/>303 </svg>304 </div>305 <div class="sugg-text">toys for 2 years old boy satdí ke liye</div>306 <div class="right-action">307 <svg viewBox="0 0 24 24">308 <path d="M5 5h9v6M14 11l3-3M14 11l3 3" stroke="#6C6C6C" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>309 </svg>310 </div>311 </div>312 313 <div class="suggestion-item">314 <div class="left-icon">315 <svg viewBox="0 0 24 24">316 <circle cx="10" cy="10" r="6" stroke="#6C6C6C" stroke-width="2" fill="none"/>317 <path d="M14.5 14.5 L20 20" stroke="#6C6C6C" stroke-width="2" stroke-linecap="round"/>318 </svg>319 </div>320 <div class="sugg-text">toys for 2 years old boy combo</div>321 <div class="right-action">322 <svg viewBox="0 0 24 24">323 <path d="M5 5h9v6M14 11l3-3M14 11l3 3" stroke="#6C6C6C" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>324 </svg>325 </div>326 </div>327 328 <div class="suggestion-item">329 <div class="left-icon">330 <svg viewBox="0 0 24 24">331 <circle cx="10" cy="10" r="6" stroke="#6C6C6C" stroke-width="2" fill="none"/>332 <path d="M14.5 14.5 L20 20" stroke="#6C6C6C" stroke-width="2" stroke-linecap="round"/>333 </svg>334 </div>335 <div class="sugg-text">toys for boys 2-3 years old</div>336 <div class="right-action">337 <svg viewBox="0 0 24 24">338 <path d="M5 5h9v6M14 11l3-3M14 11l3 3" stroke="#6C6C6C" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>339 </svg>340 </div>341 </div>342 343 <div class="suggestion-item">344 <div class="left-icon">345 <svg viewBox="0 0 24 24">346 <circle cx="10" cy="10" r="6" stroke="#6C6C6C" stroke-width="2" fill="none"/>347 <path d="M14.5 14.5 L20 20" stroke="#6C6C6C" stroke-width="2" stroke-linecap="round"/>348 </svg>349 </div>350 <div class="sugg-text">toys for boys 1-2 years old</div>351 <div class="right-action">352 <svg viewBox="0 0 24 24">353 <path d="M5 5h9v6M14 11l3-3M14 11l3 3" stroke="#6C6C6C" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>354 </svg>355 </div>356 </div>357 358 <div class="suggestion-item">359 <div class="left-icon">360 <svg viewBox="0 0 24 24">361 <circle cx="10" cy="10" r="6" stroke="#6C6C6C" stroke-width="2" fill="none"/>362 <path d="M14.5 14.5 L20 20" stroke="#6C6C6C" stroke-width="2" stroke-linecap="round"/>363 </svg>364 </div>365 <div class="sugg-text">kids montessori toys for 2 years old boy</div>366 <div class="right-action">367 <svg viewBox="0 0 24 24">368 <path d="M5 5h9v6M14 11l3-3M14 11l3 3" stroke="#6C6C6C" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>369 </svg>370 </div>371 </div>372 373 <div class="suggestion-item">374 <div class="left-icon">375 <svg viewBox="0 0 24 24">376 <circle cx="10" cy="10" r="6" stroke="#6C6C6C" stroke-width="2" fill="none"/>377 <path d="M14.5 14.5 L20 20" stroke="#6C6C6C" stroke-width="2" stroke-linecap="round"/>378 </svg>379 </div>380 <div class="sugg-text">baby boy toys for 2-3 years old</div>381 <div class="right-action">382 <svg viewBox="0 0 24 24">383 <path d="M5 5h9v6M14 11l3-3M14 11l3 3" stroke="#6C6C6C" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>384 </svg>385 </div>386 </div>387 388 <div class="suggestion-item">389 <div class="left-icon">390 <svg viewBox="0 0 24 24">391 <circle cx="10" cy="10" r="6" stroke="#6C6C6C" stroke-width="2" fill="none"/>392 <path d="M14.5 14.5 L20 20" stroke="#6C6C6C" stroke-width="2" stroke-linecap="round"/>393 </svg>394 </div>395 <div class="sugg-text">toys for 2 years old boy under 1000</div>396 <div class="right-action">397 <svg viewBox="0 0 24 24">398 <path d="M5 5h9v6M14 11l3-3M14 11l3 3" stroke="#6C6C6C" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>399 </svg>400 </div>401 </div>402 403 <div class="suggestion-item">404 <div class="left-icon">405 <svg viewBox="0 0 24 24">406 <circle cx="10" cy="10" r="6" stroke="#6C6C6C" stroke-width="2" fill="none"/>407 <path d="M14.5 14.5 L20 20" stroke="#6C6C6C" stroke-width="2" stroke-linecap="round"/>408 </svg>409 </div>410 <div class="sugg-text"><strong>soft</strong> toys for boys 2 years old</div>411 <div class="right-action">412 <svg viewBox="0 0 24 24">413 <path d="M5 5h9v6M14 11l3-3M14 11l3 3" stroke="#6C6C6C" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>414 </svg>415 </div>416 </div>417 418 </div>419 420 <!-- Keyboard mock -->421 <div class="keyboard">422 <div class="kb-top-row">423 <div class="chip" style="display:flex; align-items:center; gap:10px;">424 <svg width="36" height="36" viewBox="0 0 24 24">425 <circle cx="10" cy="10" r="6" stroke="#CFCFCF" stroke-width="2" fill="none"/>426 <path d="M14.5 14.5 L20 20" stroke="#CFCFCF" stroke-width="2" stroke-linecap="round"/>427 </svg>428 <span>boy</span>429 </div>430 <div class="chip">boys</div>431 <div class="chip">boyfriend</div>432 <div class="chip" style="margin-left:auto; display:flex; align-items:center; gap:10px;">433 <svg width="36" height="36" viewBox="0 0 24 24">434 <path d="M6 6 L18 18 M18 6 L6 18" stroke="#CFCFCF" stroke-width="2" stroke-linecap="round"/>435 </svg>436 <span>voice</span>437 </div>438 </div>439 440 <!-- Rows of keys -->441 <div class="keys">442 <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>443 </div>444 <div class="keys">445 <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><div class="key wide">⌫</div>446 </div>447 <div class="keys">448 <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">,</div><div class="key">.</div>449 </div>450 <div class="bottom-row">451 <div class="key">?123</div>452 <div class="key">space</div>453 <div class="key">.</div>454 <div class="key enter-key">455 <svg width="40" height="40" viewBox="0 0 24 24">456 <path d="M4 4h12v6M16 10l3-3M16 10l3 3" stroke="#1F1F1F" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>457 </svg>458 </div>459 </div>460 </div>461 462 <div class="gesture-bar"></div>463</div>464</body>465</html>