GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Search UI - Nike Shoes</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: linear-gradient(#BFE7DF 0px, #CFEDE8 280px, #FFFFFF 281px, #FFFFFF 2400px);13 }14 15 /* Status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 90px;22 display: flex;23 align-items: center;24 padding: 0 30px;25 color: #2E2E2E;26 font-size: 32px;27 letter-spacing: 0.5px;28 }29 .status-right { margin-left: auto; display: flex; align-items: center; gap: 20px; color: #3A3A3A; }30 31 /* Header + search */32 .header {33 position: absolute;34 top: 95px;35 left: 0;36 width: 1080px;37 height: 180px;38 padding: 0 30px;39 display: flex;40 align-items: center;41 gap: 20px;42 }43 .back-button {44 width: 70px;45 height: 70px;46 border-radius: 35px;47 display: flex;48 align-items: center;49 justify-content: center;50 }51 .search-box {52 flex: 1;53 height: 110px;54 background: #FFFFFF;55 border-radius: 20px;56 box-shadow: 0 2px 0 rgba(0,0,0,0.06) inset;57 border: 1px solid #E5E5E5;58 display: flex;59 align-items: center;60 padding: 0 26px;61 gap: 18px;62 }63 .search-icon { width: 40px; height: 40px; }64 .search-text {65 font-size: 42px;66 color: #1D1D1D;67 flex: 1;68 }69 .clear-icon { width: 44px; height: 44px; color: #777; }70 71 /* Suggestions list */72 .suggestions {73 position: absolute;74 top: 280px;75 left: 0;76 width: 1080px;77 background: #FFFFFF;78 }79 .suggestion-item {80 height: 120px;81 display: flex;82 align-items: center;83 padding: 0 30px;84 border-bottom: 1px solid #E9E9E9;85 }86 .s-left {87 width: 70px;88 display: flex;89 align-items: center;90 justify-content: center;91 margin-right: 22px;92 }93 .s-text {94 font-size: 40px;95 color: #1F1F1F;96 letter-spacing: 0.2px;97 flex: 1;98 }99 .s-text span { font-weight: 700; }100 .s-right { width: 60px; display: flex; align-items: center; justify-content: center; }101 .light { color: #555; }102 .divider { height: 18px; }103 104 /* Keyboard */105 .keyboard {106 position: absolute;107 bottom: 0;108 left: 0;109 width: 1080px;110 height: 900px;111 background: #F3F4EF;112 border-top: 1px solid #DADBD3;113 box-shadow: 0 -2px 6px rgba(0,0,0,0.04);114 }115 .kb-suggestions {116 height: 120px;117 display: flex;118 align-items: center;119 gap: 26px;120 padding: 0 30px;121 color: #3C3C3C;122 font-size: 40px;123 }124 .chip {125 background: #EDEEE9;126 border: 1px solid #D8D9D2;127 padding: 12px 22px;128 border-radius: 26px;129 }130 .kb-row {131 display: flex;132 justify-content: space-between;133 padding: 16px 22px;134 height: 170px;135 }136 .key {137 width: 92px;138 height: 120px;139 background: #FFFFFF;140 border: 1px solid #D6D6D6;141 border-radius: 22px;142 display: flex;143 align-items: center;144 justify-content: center;145 font-size: 46px;146 color: #1C1C1C;147 box-shadow: 0 1px 0 rgba(0,0,0,0.05);148 }149 .key.wide { width: 140px; }150 .key.wider { width: 180px; }151 .spacebar { flex: 1; height: 120px; background: #FFFFFF; border: 1px solid #D6D6D6; border-radius: 22px; display: flex; align-items: center; justify-content: center; font-size: 40px; color: #5A5A5A; margin: 0 14px; }152 .bottom-row { display: flex; align-items: center; padding: 16px 22px; height: 170px; }153 .keycap-label { font-size: 30px; color: #4F4F4F; }154 .round-btn {155 width: 110px;156 height: 110px;157 border-radius: 55px;158 background: #FFFFFF;159 border: 1px solid #D6D6D6;160 display: flex;161 align-items: center;162 justify-content: center;163 }164 165 /* Simple inline SVG icons styling */166 svg { display: block; }167</style>168</head>169<body>170<div id="render-target">171 172 <!-- Status Bar -->173 <div class="status-bar">174 <div>10:38</div>175 <div class="status-right">176 <span>🔍</span>177 <span>16°</span>178 <span>📶</span>179 <span>🔋</span>180 </div>181 </div>182 183 <!-- Header with Search -->184 <div class="header">185 <div class="back-button">186 <svg width="42" height="42" viewBox="0 0 24 24">187 <path d="M15 4 L7 12 L15 20" stroke="#333" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>188 </svg>189 </div>190 <div class="search-box">191 <svg class="search-icon" viewBox="0 0 24 24">192 <circle cx="10" cy="10" r="7" stroke="#555" stroke-width="2" fill="none"/>193 <line x1="15" y1="15" x2="22" y2="22" stroke="#555" stroke-width="2" stroke-linecap="round"/>194 </svg>195 <div class="search-text">Nike shoes</div>196 <svg class="clear-icon" viewBox="0 0 24 24">197 <line x1="6" y1="6" x2="18" y2="18" stroke="#777" stroke-width="2.6" stroke-linecap="round"/>198 <line x1="18" y1="6" x2="6" y2="18" stroke="#777" stroke-width="2.6" stroke-linecap="round"/>199 </svg>200 </div>201 </div>202 203 <!-- Suggestions List -->204 <div class="suggestions">205 <div class="suggestion-item">206 <div class="s-left">207 <svg width="44" height="44" viewBox="0 0 24 24">208 <circle cx="10" cy="10" r="7" stroke="#333" stroke-width="2" fill="none"/>209 <line x1="15" y1="15" x2="22" y2="22" stroke="#333" stroke-width="2" stroke-linecap="round"/>210 </svg>211 </div>212 <div class="s-text">nike shoes <span>for men</span></div>213 <div class="s-right">214 <svg width="40" height="40" viewBox="0 0 24 24">215 <path d="M6 18 L18 6" stroke="#6F6F6F" stroke-width="2.2" fill="none" stroke-linecap="round"/>216 <path d="M9 6 H18 V15" stroke="#6F6F6F" stroke-width="2.2" fill="none" stroke-linecap="round"/>217 </svg>218 </div>219 </div>220 <div class="suggestion-item">221 <div class="s-left">222 <svg width="44" height="44" viewBox="0 0 24 24">223 <circle cx="10" cy="10" r="7" stroke="#333" stroke-width="2" fill="none"/>224 <line x1="15" y1="15" x2="22" y2="22" stroke="#333" stroke-width="2" stroke-linecap="round"/>225 </svg>226 </div>227 <div class="s-text">nike shoes</div>228 <div class="s-right">229 <svg width="40" height="40" viewBox="0 0 24 24">230 <path d="M6 18 L18 6" stroke="#6F6F6F" stroke-width="2.2" fill="none" stroke-linecap="round"/>231 <path d="M9 6 H18 V15" stroke="#6F6F6F" stroke-width="2.2" fill="none" stroke-linecap="round"/>232 </svg>233 </div>234 </div>235 <div class="suggestion-item">236 <div class="s-left">237 <svg width="44" height="44" viewBox="0 0 24 24">238 <circle cx="10" cy="10" r="7" stroke="#333" stroke-width="2" fill="none"/>239 <line x1="15" y1="15" x2="22" y2="22" stroke="#333" stroke-width="2" stroke-linecap="round"/>240 </svg>241 </div>242 <div class="s-text">nike shoes <span>for women</span></div>243 <div class="s-right">244 <svg width="40" height="40" viewBox="0 0 24 24">245 <path d="M6 18 L18 6" stroke="#6F6F6F" stroke-width="2.2" fill="none" stroke-linecap="round"/>246 <path d="M9 6 H18 V15" stroke="#6F6F6F" stroke-width="2.2" fill="none" stroke-linecap="round"/>247 </svg>248 </div>249 </div>250 <div class="suggestion-item">251 <div class="s-left">252 <svg width="44" height="44" viewBox="0 0 24 24">253 <circle cx="10" cy="10" r="7" stroke="#333" stroke-width="2" fill="none"/>254 <line x1="15" y1="15" x2="22" y2="22" stroke="#333" stroke-width="2" stroke-linecap="round"/>255 </svg>256 </div>257 <div class="s-text">nike shoes <span>for men sneakers</span></div>258 <div class="s-right">259 <svg width="40" height="40" viewBox="0 0 24 24">260 <path d="M6 18 L18 6" stroke="#6F6F6F" stroke-width="2.2" fill="none" stroke-linecap="round"/>261 <path d="M9 6 H18 V15" stroke="#6F6F6F" stroke-width="2.2" fill="none" stroke-linecap="round"/>262 </svg>263 </div>264 </div>265 <div class="suggestion-item">266 <div class="s-left">267 <svg width="44" height="44" viewBox="0 0 24 24">268 <circle cx="10" cy="10" r="7" stroke="#333" stroke-width="2" fill="none"/>269 <line x1="15" y1="15" x2="22" y2="22" stroke="#333" stroke-width="2" stroke-linecap="round"/>270 </svg>271 </div>272 <div class="s-text">nike shoes <span>for men sports</span></div>273 <div class="s-right">274 <svg width="40" height="40" viewBox="0 0 24 24">275 <path d="M6 18 L18 6" stroke="#6F6F6F" stroke-width="2.2" fill="none" stroke-linecap="round"/>276 <path d="M9 6 H18 V15" stroke="#6F6F6F" stroke-width="2.2" fill="none" stroke-linecap="round"/>277 </svg>278 </div>279 </div>280 <div class="suggestion-item">281 <div class="s-left">282 <svg width="44" height="44" viewBox="0 0 24 24">283 <circle cx="10" cy="10" r="7" stroke="#333" stroke-width="2" fill="none"/>284 <line x1="15" y1="15" x2="22" y2="22" stroke="#333" stroke-width="2" stroke-linecap="round"/>285 </svg>286 </div>287 <div class="s-text">nike shoes <span>for boys</span></div>288 <div class="s-right">289 <svg width="40" height="40" viewBox="0 0 24 24">290 <path d="M6 18 L18 6" stroke="#6F6F6F" stroke-width="2.2" fill="none" stroke-linecap="round"/>291 <path d="M9 6 H18 V15" stroke="#6F6F6F" stroke-width="2.2" fill="none" stroke-linecap="round"/>292 </svg>293 </div>294 </div>295 <div class="suggestion-item">296 <div class="s-left">297 <svg width="44" height="44" viewBox="0 0 24 24">298 <circle cx="10" cy="10" r="7" stroke="#333" stroke-width="2" fill="none"/>299 <line x1="15" y1="15" x2="22" y2="22" stroke="#333" stroke-width="2" stroke-linecap="round"/>300 </svg>301 </div>302 <div class="s-text">nike shoes <span>for men original</span></div>303 <div class="s-right">304 <svg width="40" height="40" viewBox="0 0 24 24">305 <path d="M6 18 L18 6" stroke="#6F6F6F" stroke-width="2.2" fill="none" stroke-linecap="round"/>306 <path d="M9 6 H18 V15" stroke="#6F6F6F" stroke-width="2.2" fill="none" stroke-linecap="round"/>307 </svg>308 </div>309 </div>310 <div class="suggestion-item">311 <div class="s-left">312 <svg width="44" height="44" viewBox="0 0 24 24">313 <circle cx="10" cy="10" r="7" stroke="#333" stroke-width="2" fill="none"/>314 <line x1="15" y1="15" x2="22" y2="22" stroke="#333" stroke-width="2" stroke-linecap="round"/>315 </svg>316 </div>317 <div class="s-text">nike shoes <span>for men running</span></div>318 <div class="s-right">319 <svg width="40" height="40" viewBox="0 0 24 24">320 <path d="M6 18 L18 6" stroke="#6F6F6F" stroke-width="2.2" fill="none" stroke-linecap="round"/>321 <path d="M9 6 H18 V15" stroke="#6F6F6F" stroke-width="2.2" fill="none" stroke-linecap="round"/>322 </svg>323 </div>324 </div>325 <div class="suggestion-item">326 <div class="s-left">327 <svg width="44" height="44" viewBox="0 0 24 24">328 <circle cx="10" cy="10" r="7" stroke="#333" stroke-width="2" fill="none"/>329 <line x1="15" y1="15" x2="22" y2="22" stroke="#333" stroke-width="2" stroke-linecap="round"/>330 </svg>331 </div>332 <div class="s-text">nike shoes <span>for kids</span></div>333 <div class="s-right">334 <svg width="40" height="40" viewBox="0 0 24 24">335 <path d="M6 18 L18 6" stroke="#6F6F6F" stroke-width="2.2" fill="none" stroke-linecap="round"/>336 <path d="M9 6 H18 V15" stroke="#6F6F6F" stroke-width="2.2" fill="none" stroke-linecap="round"/>337 </svg>338 </div>339 </div>340 <div class="suggestion-item" style="border-bottom:none;">341 <div class="s-left">342 <svg width="44" height="44" viewBox="0 0 24 24">343 <circle cx="10" cy="10" r="7" stroke="#333" stroke-width="2" fill="none"/>344 <line x1="15" y1="15" x2="22" y2="22" stroke="#333" stroke-width="2" stroke-linecap="round"/>345 </svg>346 </div>347 <div class="s-text">nike shoes <span>for men white</span></div>348 <div class="s-right">349 <svg width="40" height="40" viewBox="0 0 24 24">350 <path d="M6 18 L18 6" stroke="#6F6F6F" stroke-width="2.2" fill="none" stroke-linecap="round"/>351 <path d="M9 6 H18 V15" stroke="#6F6F6F" stroke-width="2.2" fill="none" stroke-linecap="round"/>352 </svg>353 </div>354 </div>355 </div>356 357 <!-- Keyboard -->358 <div class="keyboard">359 <div class="kb-suggestions">360 <div class="chip">shoes</div>361 <div class="chip">shoestring</div>362 <div class="chip">👟</div>363 <div style="margin-left:auto;" class="round-btn">364 <svg width="36" height="36" viewBox="0 0 24 24">365 <path d="M12 4 v10" stroke="#555" stroke-width="2.2" stroke-linecap="round"/>366 <circle cx="12" cy="16" r="5" stroke="#555" stroke-width="2.2" fill="none"/>367 </svg>368 </div>369 </div>370 <div class="kb-row">371 <div class="key">q</div>372 <div class="key">w</div>373 <div class="key">e</div>374 <div class="key">r</div>375 <div class="key">t</div>376 <div class="key">y</div>377 <div class="key">u</div>378 <div class="key">i</div>379 <div class="key">o</div>380 <div class="key">p</div>381 </div>382 <div class="kb-row">383 <div class="key">a</div>384 <div class="key">s</div>385 <div class="key">d</div>386 <div class="key">f</div>387 <div class="key">g</div>388 <div class="key">h</div>389 <div class="key">j</div>390 <div class="key">k</div>391 <div class="key">l</div>392 </div>393 <div class="kb-row">394 <div class="key wide">395 <svg width="26" height="26" viewBox="0 0 24 24">396 <path d="M8 16 L12 8 L16 16" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>397 </svg>398 </div>399 <div class="key">z</div>400 <div class="key">x</div>401 <div class="key">c</div>402 <div class="key">v</div>403 <div class="key">b</div>404 <div class="key">n</div>405 <div class="key">m</div>406 <div class="key wider">407 <svg width="32" height="32" viewBox="0 0 24 24">408 <path d="M7 7 L17 17" stroke="#333" stroke-width="2" stroke-linecap="round"/>409 <path d="M17 7 L7 17" stroke="#333" stroke-width="2" stroke-linecap="round"/>410 </svg>411 </div>412 </div>413 <div class="bottom-row">414 <div class="key wider"><span class="keycap-label">?123</span></div>415 <div class="key wide"><span class="keycap-label">,</span></div>416 <div class="key wide"><span class="keycap-label">🙂</span></div>417 <div class="spacebar">space</div>418 <div class="key wide"><span class="keycap-label">.</span></div>419 <div class="key wider">420 <svg width="36" height="36" viewBox="0 0 24 24">421 <path d="M6 12 H18" stroke="#333" stroke-width="2.2" stroke-linecap="round"/>422 <path d="M14 8 L18 12 L14 16" stroke="#333" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>423 </svg>424 </div>425 </div>426 </div>427 428</div>429</body>430</html>