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 {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13 color: #111;14 }15 #render-target {16 position: relative;17 width: 1080px;18 height: 2400px;19 overflow: hidden;20 background: #ffffff;21 border-radius: 0;22 box-shadow: none;23 }24 25 /* Status bar */26 .status-bar {27 height: 110px;28 padding: 0 36px;29 display: flex;30 align-items: center;31 justify-content: space-between;32 font-weight: 600;33 font-size: 36px;34 color: #222;35 }36 .status-right {37 display: flex;38 align-items: center;39 gap: 26px;40 }41 .icon-signal, .icon-wifi, .icon-battery {42 display: inline-block;43 }44 .icon-signal {45 width: 46px; height: 36px;46 }47 .icon-wifi {48 width: 46px; height: 36px;49 }50 .icon-battery {51 width: 64px; height: 30px;52 }53 54 /* Search header */55 .search-header {56 display: flex;57 align-items: center;58 gap: 26px;59 padding: 12px 30px;60 }61 .back-btn {62 width: 80px;63 height: 80px;64 display: flex;65 align-items: center;66 justify-content: center;67 }68 .search-pill {69 flex: 1;70 height: 120px;71 border: 3px solid #000;72 border-radius: 70px;73 display: flex;74 align-items: center;75 padding: 0 28px;76 box-sizing: border-box;77 position: relative;78 }79 .search-text {80 font-size: 44px;81 line-height: 1;82 color: #111;83 flex: 1;84 }85 .pill-actions {86 height: 86px;87 width: 210px;88 background: #000;89 border-radius: 46px;90 display: flex;91 align-items: center;92 justify-content: space-around;93 padding: 0 18px;94 }95 .circle-btn {96 width: 56px;97 height: 56px;98 border-radius: 50%;99 background: #D6D6D6;100 display: flex;101 align-items: center;102 justify-content: center;103 }104 105 /* Suggestions list */106 .suggestions {107 margin-top: 16px;108 }109 .suggestion-item {110 height: 130px;111 display: flex;112 align-items: center;113 padding: 0 34px;114 border-bottom: 1px solid #eeeeee;115 box-sizing: border-box;116 gap: 26px;117 }118 .suggestion-text {119 font-size: 40px;120 color: #212121;121 }122 .suggestion-text .bold {123 font-weight: 600;124 }125 .magnify {126 width: 48px;127 height: 48px;128 flex: 0 0 auto;129 }130 131 /* Keyboard */132 .keyboard {133 position: absolute;134 bottom: 0;135 left: 0;136 width: 1080px;137 height: 820px;138 background: #1f1f1f;139 border-top-left-radius: 24px;140 border-top-right-radius: 24px;141 box-shadow: 0 -8px 20px rgba(0,0,0,0.2);142 color: #fff;143 }144 .kb-suggestions {145 height: 110px;146 display: flex;147 align-items: center;148 gap: 24px;149 padding: 0 30px;150 border-bottom: 1px solid rgba(255,255,255,0.08);151 }152 .kb-chip {153 background: #2a2a2a;154 padding: 16px 24px;155 border-radius: 20px;156 font-size: 34px;157 color: #d9d9d9;158 }159 .kb-rows {160 padding: 18px 24px;161 }162 .kb-row {163 display: flex;164 justify-content: center;165 gap: 18px;166 margin-bottom: 18px;167 }168 .key {169 background: #2c2c2c;170 color: #eaeaea;171 font-size: 40px;172 border-radius: 18px;173 padding: 22px 28px;174 min-width: 80px;175 text-align: center;176 }177 .key.small { min-width: 70px; }178 .key.wide { min-width: 160px; }179 .key.xwide { min-width: 520px; }180 .key.action {181 background: #3a3a3a;182 color: #cfd3d6;183 }184 .kb-bottom {185 display: flex;186 align-items: center;187 justify-content: space-between;188 padding: 0 24px 24px 24px;189 }190 .kb-bottom .left-actions {191 display: flex;192 gap: 16px;193 }194 .kb-bottom .right-actions {195 display: flex;196 gap: 16px;197 }198</style>199</head>200<body>201<div id="render-target">202 203 <!-- Status Bar -->204 <div class="status-bar">205 <div>1:12</div>206 <div class="status-right">207 <!-- Simple signal icon -->208 <svg class="icon-signal" viewBox="0 0 46 36">209 <rect x="2" y="22" width="6" height="12" fill="#555"></rect>210 <rect x="12" y="18" width="6" height="16" fill="#777"></rect>211 <rect x="22" y="12" width="6" height="22" fill="#999"></rect>212 <rect x="32" y="6" width="6" height="28" fill="#bbb"></rect>213 </svg>214 <!-- Simple WiFi icon -->215 <svg class="icon-wifi" viewBox="0 0 46 36">216 <path d="M3 12 C12 4,34 4,43 12" stroke="#777" stroke-width="4" fill="none"></path>217 <path d="M9 18 C16 12,30 12,37 18" stroke="#999" stroke-width="4" fill="none"></path>218 <path d="M18 24 C22 20,24 20,28 24" stroke="#bbb" stroke-width="4" fill="none"></path>219 <circle cx="23" cy="29" r="3" fill="#bbb"></circle>220 </svg>221 <!-- Simple Battery icon -->222 <svg class="icon-battery" viewBox="0 0 64 30">223 <rect x="1" y="5" width="54" height="20" rx="4" ry="4" stroke="#777" stroke-width="2" fill="none"></rect>224 <rect x="55" y="10" width="7" height="10" rx="2" fill="#777"></rect>225 <rect x="5" y="9" width="40" height="12" rx="2" fill="#bbb"></rect>226 </svg>227 </div>228 </div>229 230 <!-- Search Header -->231 <div class="search-header">232 <div class="back-btn">233 <svg width="54" height="54" viewBox="0 0 54 54">234 <path d="M32 12 L16 27 L32 42" stroke="#000" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>235 </svg>236 </div>237 <div class="search-pill">238 <div class="search-text">walking shoes</div>239 <div class="pill-actions">240 <div class="circle-btn">241 <svg width="28" height="28" viewBox="0 0 28 28">242 <path d="M6 6 L22 22 M22 6 L6 22" stroke="#666" stroke-width="3" stroke-linecap="round"></path>243 </svg>244 </div>245 <svg width="42" height="42" viewBox="0 0 42 42">246 <circle cx="18" cy="18" r="12" stroke="#fff" stroke-width="4" fill="none"></circle>247 <line x1="28" y1="28" x2="36" y2="36" stroke="#fff" stroke-width="4" stroke-linecap="round"></line>248 </svg>249 </div>250 </div>251 </div>252 253 <!-- Suggestions -->254 <div class="suggestions">255 <div class="suggestion-item">256 <svg class="magnify" viewBox="0 0 48 48">257 <circle cx="20" cy="20" r="13" stroke="#757575" stroke-width="4" fill="none"></circle>258 <line x1="31" y1="31" x2="44" y2="44" stroke="#757575" stroke-width="4" stroke-linecap="round"></line>259 </svg>260 <div class="suggestion-text">walking shoes <span class="bold">for women comfortable</span></div>261 </div>262 <div class="suggestion-item">263 <svg class="magnify" viewBox="0 0 48 48">264 <circle cx="20" cy="20" r="13" stroke="#757575" stroke-width="4" fill="none"></circle>265 <line x1="31" y1="31" x2="44" y2="44" stroke="#757575" stroke-width="4" stroke-linecap="round"></line>266 </svg>267 <div class="suggestion-text"><span class="bold">mens</span> walking shoes</div>268 </div>269 <div class="suggestion-item">270 <svg class="magnify" viewBox="0 0 48 48">271 <circle cx="20" cy="20" r="13" stroke="#757575" stroke-width="4" fill="none"></circle>272 <line x1="31" y1="31" x2="44" y2="44" stroke="#757575" stroke-width="4" stroke-linecap="round"></line>273 </svg>274 <div class="suggestion-text"><span class="bold">women</span> walking shoes</div>275 </div>276 <div class="suggestion-item">277 <svg class="magnify" viewBox="0 0 48 48">278 <circle cx="20" cy="20" r="13" stroke="#757575" stroke-width="4" fill="none"></circle>279 <line x1="31" y1="31" x2="44" y2="44" stroke="#757575" stroke-width="4" stroke-linecap="round"></line>280 </svg>281 <div class="suggestion-text"><span class="bold">baby</span> walking shoes</div>282 </div>283 <div class="suggestion-item">284 <svg class="magnify" viewBox="0 0 48 48">285 <circle cx="20" cy="20" r="13" stroke="#757575" stroke-width="4" fill="none"></circle>286 <line x1="31" y1="31" x2="44" y2="44" stroke="#757575" stroke-width="4" stroke-linecap="round"></line>287 </svg>288 <div class="suggestion-text">walking shoes <span class="bold">women arch support</span></div>289 </div>290 <div class="suggestion-item">291 <svg class="magnify" viewBox="0 0 48 48">292 <circle cx="20" cy="20" r="13" stroke="#757575" stroke-width="4" fill="none"></circle>293 <line x1="31" y1="31" x2="44" y2="44" stroke="#757575" stroke-width="4" stroke-linecap="round"></line>294 </svg>295 <div class="suggestion-text">walking shoes <span class="bold">for 1 year old</span></div>296 </div>297 <div class="suggestion-item">298 <svg class="magnify" viewBox="0 0 48 48">299 <circle cx="20" cy="20" r="13" stroke="#757575" stroke-width="4" fill="none"></circle>300 <line x1="31" y1="31" x2="44" y2="44" stroke="#757575" stroke-width="4" stroke-linecap="round"></line>301 </svg>302 <div class="suggestion-text">walking shoes <span class="bold">for women comfortable clearance</span></div>303 </div>304 <div class="suggestion-item">305 <svg class="magnify" viewBox="0 0 48 48">306 <circle cx="20" cy="20" r="13" stroke="#757575" stroke-width="4" fill="none"></circle>307 <line x1="31" y1="31" x2="44" y2="44" stroke="#757575" stroke-width="4" stroke-linecap="round"></line>308 </svg>309 <div class="suggestion-text">walking shoes <span class="bold">for men seniors</span></div>310 </div>311 <div class="suggestion-item">312 <svg class="magnify" viewBox="0 0 48 48">313 <circle cx="20" cy="20" r="13" stroke="#757575" stroke-width="4" fill="none"></circle>314 <line x1="31" y1="31" x2="44" y2="44" stroke="#757575" stroke-width="4" stroke-linecap="round"></line>315 </svg>316 <div class="suggestion-text">walking shoes</div>317 </div>318 </div>319 320 <!-- Keyboard -->321 <div class="keyboard">322 <div class="kb-suggestions">323 <div class="kb-chip">shoes</div>324 <div class="kb-chip">shows</div>325 <div class="kb-chip">🧢</div>326 </div>327 <div class="kb-rows">328 <div class="kb-row">329 <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>330 <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>331 </div>332 <div class="kb-row">333 <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>334 <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="kb-row">337 <div class="key action wide">⇧</div>338 <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>339 <div class="key action wide">⌫</div>340 </div>341 <div class="kb-row">342 <div class="key action wide">?123</div>343 <div class="key action small">,</div>344 <div class="key action small">☺</div>345 <div class="key xwide">space</div>346 <div class="key action small">.</div>347 <div class="key action wide">348 <svg width="40" height="40" viewBox="0 0 40 40">349 <circle cx="18" cy="18" r="12" stroke="#cfd3d6" stroke-width="3" fill="none"></circle>350 <line x1="27" y1="27" x2="36" y2="36" stroke="#cfd3d6" stroke-width="3" stroke-linecap="round"></line>351 </svg>352 </div>353 </div>354 </div>355 <div class="kb-bottom">356 <div class="left-actions"></div>357 <div class="right-actions"></div>358 </div>359 </div>360 361</div>362</body>363</html>