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; font-family: Roboto, Arial, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #FFFFFF;15 border-radius: 32px;16 box-shadow: 0 2px 8px rgba(0,0,0,0.06);17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0;23 left: 0;24 width: 1080px;25 height: 116px;26 padding: 0 36px;27 box-sizing: border-box;28 display: flex;29 align-items: center;30 justify-content: space-between;31 color: #4A4A4A;32 font-weight: 500;33 font-size: 40px;34 }35 .status-left { display: flex; align-items: center; gap: 22px; }36 .status-right { display: flex; align-items: center; gap: 22px; }37 .icon { display: inline-flex; align-items: center; justify-content: center; }38 .icon svg { width: 40px; height: 40px; fill: #666; }39 40 /* Search bar */41 .search-wrap {42 position: absolute;43 top: 116px;44 left: 36px;45 width: 1008px;46 height: 112px;47 background: #F5F5F7;48 border: 1px solid #E6E6E8;49 border-radius: 56px;50 display: flex;51 align-items: center;52 box-sizing: border-box;53 padding: 0 26px;54 gap: 24px;55 }56 .search-text {57 flex: 1;58 font-size: 42px;59 color: #202124;60 white-space: nowrap;61 overflow: hidden;62 text-overflow: ellipsis;63 }64 .search-actions { display: flex; align-items: center; gap: 26px; }65 .chip-camera {66 width: 72px;67 height: 72px;68 border-radius: 36px;69 background: #F0F0F2;70 border: 1px solid #DADCE0;71 display: flex; align-items: center; justify-content: center;72 }73 .search-icon { width: 40px; height: 40px; }74 75 /* Suggestions list */76 .suggestions {77 position: absolute;78 top: 260px;79 left: 36px;80 width: 1008px;81 }82 .suggestion-item {83 position: relative;84 padding: 32px 84px 24px 0;85 border-bottom: 1px solid #F0F0F0;86 }87 .suggestion-title {88 font-size: 44px;89 color: #6A6A6A;90 line-height: 1.25;91 }92 .suggestion-title .bold { color: #202124; font-weight: 600; }93 .suggestion-sub {94 margin-top: 12px;95 font-size: 30px;96 color: #9E9E9E;97 }98 .s-right {99 position: absolute;100 right: 16px;101 top: 36px;102 width: 48px;103 height: 48px;104 }105 .s-right svg { width: 48px; height: 48px; stroke: #7B7B7B; }106 107 /* Keyboard suggestion chips */108 .kb-suggest {109 position: absolute;110 left: 0;111 bottom: 780px;112 width: 1080px;113 height: 88px;114 display: flex;115 align-items: center;116 gap: 28px;117 padding: 0 36px;118 box-sizing: border-box;119 color: #656565;120 background: transparent;121 }122 .kb-suggest .chip {123 padding: 14px 22px;124 font-size: 34px;125 border-radius: 24px;126 background: #F0F2F7;127 border: 1px solid #E0E4EA;128 }129 .kb-suggest .divider {130 width: 2px; height: 40px; background: #DADDE3;131 }132 .kb-suggest .mic {133 margin-left: auto;134 width: 60px; height: 60px;135 border-radius: 30px;136 background: #EDEFF6;137 border: 1px solid #D8DAE4;138 display: flex; align-items: center; justify-content: center;139 }140 141 /* Keyboard */142 .keyboard {143 position: absolute;144 bottom: 132px;145 left: 0;146 width: 1080px;147 height: 1050px;148 background: #EFF0F7;149 border-top-left-radius: 28px;150 border-top-right-radius: 28px;151 box-shadow: 0 -2px 8px rgba(0,0,0,0.06) inset;152 padding: 36px;153 box-sizing: border-box;154 }155 .key-row {156 display: flex;157 justify-content: space-between;158 margin-bottom: 36px;159 padding: 0 24px;160 }161 .key {162 width: 92px;163 height: 120px;164 background: #FFFFFF;165 border-radius: 26px;166 box-shadow: 0 1px 0 rgba(0,0,0,0.06);167 display: flex;168 align-items: center;169 justify-content: center;170 font-size: 46px;171 color: #2E2E2E;172 }173 .key.wide { width: 170px; }174 .key.shift, .key.backspace { background: #F7D8E9; }175 .key.sym { background: #D9C4D1; }176 .key.green {177 background: #D5E7A8;178 color: #1A1A1A;179 }180 .space-row {181 display: flex;182 align-items: center;183 gap: 18px;184 padding: 0 24px;185 }186 .space { flex: 1; height: 120px; background: #FFFFFF; border-radius: 26px; }187 .emoji { width: 120px; height: 120px; background: #FFFFFF; border-radius: 26px; display:flex; align-items:center; justify-content:center; font-size: 40px; }188 .comma { width: 80px; height: 120px; background: #F7D8E9; border-radius: 26px; display:flex; align-items:center; justify-content:center; font-size: 42px; }189 .dot { width: 80px; height: 120px; background: #F7D8E9; border-radius: 26px; display:flex; align-items:center; justify-content:center; font-size: 42px; }190 .search-btn {191 width: 120px; height: 120px; border-radius: 60px;192 background: #D5E7A8; display:flex; align-items:center; justify-content:center;193 }194 195 /* iOS/Android pill at bottom */196 .home-pill {197 position: absolute;198 bottom: 52px;199 left: 50%;200 transform: translateX(-50%);201 width: 360px;202 height: 16px;203 background: #C2C4CC;204 border-radius: 8px;205 }206</style>207</head>208<body>209<div id="render-target">210 211 <!-- Status Bar -->212 <div class="status-bar">213 <div class="status-left">214 <div>2:24</div>215 <div class="icon" title="Mail">216 <svg viewBox="0 0 24 24"><path d="M3 6h18v12H3z" fill="#777"/><path d="M3 6l9 6 9-6" fill="none" stroke="#fff" stroke-width="2"/></svg>217 </div>218 <div class="icon" title="Settings">219 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4" fill="#777"/><path d="M4 12h3M17 12h3M12 4v3M12 17v3M6.2 6.2l2.1 2.1M15.7 15.7l2.1 2.1M17.9 6.1l-2.2 2.2M6.1 17.9l2.2-2.2" stroke="#777" stroke-width="1.5"/></svg>220 </div>221 </div>222 <div class="status-right">223 <div class="icon" title="Signal">224 <svg viewBox="0 0 24 24"><path d="M3 21h18L3 3z" fill="#777"/></svg>225 </div>226 <div class="icon" title="Battery">227 <svg viewBox="0 0 28 24"><rect x="2" y="5" width="22" height="14" rx="2" fill="#777"/><rect x="24" y="9" width="2" height="6" fill="#777"/></svg>228 </div>229 </div>230 </div>231 232 <!-- Search Bar -->233 <div class="search-wrap">234 <div class="icon" style="width:64px;height:64px;">235 <svg viewBox="0 0 24 24"><path d="M15 5L7 12l8 7" stroke="#212121" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>236 </div>237 <div class="search-text">New Balance Shoes for women</div>238 <div class="search-actions">239 <div class="icon search-icon">240 <svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" stroke="#444" stroke-width="2" stroke-linecap="round"/></svg>241 </div>242 <div class="chip-camera">243 <svg viewBox="0 0 24 24">244 <rect x="3" y="6" width="18" height="12" rx="2" fill="#BDBDBD"/>245 <rect x="10" y="9" width="4" height="4" rx="2" fill="#FFFFFF"/>246 <path d="M9 6l2-2h2l2 2" fill="#BDBDBD"/>247 </svg>248 </div>249 </div>250 </div>251 252 <!-- Suggestions -->253 <div class="suggestions">254 <div class="suggestion-item">255 <div class="suggestion-title">New Balance shoes for women <span class="bold">size 9</span></div>256 <div class="suggestion-sub">Recent</div>257 <div class="s-right">258 <svg viewBox="0 0 24 24" fill="none"><path d="M7 17l10-10v7M17 7H10" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>259 </div>260 </div>261 262 <div class="suggestion-item">263 <div class="suggestion-title">new balance shoes women <span class="bold">size 6.5</span></div>264 <div class="suggestion-sub">Women's Shoes</div>265 <div class="s-right">266 <svg viewBox="0 0 24 24" fill="none"><path d="M7 17l10-10v7M17 7H10" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>267 </div>268 </div>269 270 <div class="suggestion-item">271 <div class="suggestion-title">new balance shoes women</div>272 <div class="s-right">273 <svg viewBox="0 0 24 24" fill="none"><path d="M7 17l10-10v7M17 7H10" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>274 </div>275 </div>276 277 <div class="suggestion-item">278 <div class="suggestion-title">new balance women's shoes <span class="bold">size 4</span></div>279 <div class="s-right">280 <svg viewBox="0 0 24 24" fill="none"><path d="M7 17l10-10v7M17 7H10" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>281 </div>282 </div>283 284 <div class="suggestion-item">285 <div class="suggestion-title">new balance womens running <span class="bold">shoes</span></div>286 <div class="s-right">287 <svg viewBox="0 0 24 24" fill="none"><path d="M7 17l10-10v7M17 7H10" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>288 </div>289 </div>290 291 <div class="suggestion-item">292 <div class="suggestion-title">new balance shoes womens <span class="bold">6</span></div>293 <div class="s-right">294 <svg viewBox="0 0 24 24" fill="none"><path d="M7 17l10-10v7M17 7H10" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>295 </div>296 </div>297 298 <div class="suggestion-item" style="border-bottom:none;">299 <div class="suggestion-title">womens new balance trail <span class="bold">shoes used</span></div>300 <div class="s-right">301 <svg viewBox="0 0 24 24" fill="none"><path d="M7 17l10-10v7M17 7H10" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>302 </div>303 </div>304 </div>305 306 <!-- Keyboard suggestion chips -->307 <div class="kb-suggest">308 <div class="chip">women</div>309 <div class="divider"></div>310 <div class="chip">womens</div>311 <div class="divider"></div>312 <div class="chip">women's</div>313 <div class="mic" title="Voice">314 <svg viewBox="0 0 24 24"><rect x="9" y="5" width="6" height="10" rx="3" fill="#6F6F6F"/><path d="M6 11a6 6 0 0012 0M12 17v3" stroke="#6F6F6F" stroke-width="2" fill="none"/></svg>315 </div>316 </div>317 318 <!-- Keyboard -->319 <div class="keyboard">320 <!-- Row 1 -->321 <div class="key-row">322 <div class="key">q</div>323 <div class="key">w</div>324 <div class="key">e</div>325 <div class="key">r</div>326 <div class="key">t</div>327 <div class="key">y</div>328 <div class="key">u</div>329 <div class="key">i</div>330 <div class="key">o</div>331 <div class="key">p</div>332 </div>333 <!-- Row 2 -->334 <div class="key-row" style="padding-left:72px; padding-right:72px;">335 <div class="key">a</div>336 <div class="key">s</div>337 <div class="key">d</div>338 <div class="key">f</div>339 <div class="key">g</div>340 <div class="key">h</div>341 <div class="key">j</div>342 <div class="key">k</div>343 <div class="key">l</div>344 </div>345 <!-- Row 3 -->346 <div class="key-row">347 <div class="key shift">⇧</div>348 <div class="key">z</div>349 <div class="key">x</div>350 <div class="key">c</div>351 <div class="key">v</div>352 <div class="key">b</div>353 <div class="key">n</div>354 <div class="key">m</div>355 <div class="key backspace">356 <svg viewBox="0 0 24 24" width="44" height="44"><path d="M3 12l6-6h10v12H9z" fill="#79334F"/><path d="M12 9l4 4M16 9l-4 4" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>357 </div>358 </div>359 <!-- Row 4 -->360 <div class="space-row">361 <div class="key sym">?123</div>362 <div class="comma">,</div>363 <div class="emoji">☺</div>364 <div class="space"></div>365 <div class="dot">.</div>366 <div class="search-btn" title="Search">367 <svg viewBox="0 0 24 24" width="48" height="48">368 <circle cx="11" cy="11" r="6" stroke="#2C2C2C" stroke-width="2" fill="none"/>369 <path d="M15 15l5 5" stroke="#2C2C2C" stroke-width="2" stroke-linecap="round"/>370 </svg>371 </div>372 </div>373 </div>374 375 <!-- Home pill -->376 <div class="home-pill"></div>377</div>378</body>379</html>