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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #FAF8F6;15 }16 17 /* Status bar */18 .status-bar {19 height: 120px;20 background: #D2D2D2;21 color: #ffffff;22 position: relative;23 padding: 0 36px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 box-sizing: border-box;28 }29 .status-time {30 color: #ffffff;31 font-weight: 600;32 font-size: 44px;33 letter-spacing: 1px;34 }35 .status-icons {36 display: flex;37 align-items: center;38 gap: 24px;39 }40 .icon-small {41 width: 40px; height: 40px;42 }43 44 /* Search header */45 .search-header {46 background: #F3F1EE;47 height: 160px;48 display: flex;49 align-items: center;50 padding: 0 28px;51 box-sizing: border-box;52 border-bottom: 1px solid #E5E1DB;53 }54 .back-btn {55 width: 72px;56 height: 72px;57 display: flex;58 align-items: center;59 justify-content: center;60 margin-right: 10px;61 }62 .search-input {63 flex: 1;64 font-size: 48px;65 color: #222222;66 }67 .clear-text {68 font-size: 40px;69 color: #6D6D6D;70 padding: 16px 8px;71 }72 73 .content {74 padding: 28px 28px 0 28px;75 }76 .title {77 margin: 28px 8px 10px 8px;78 font-weight: 700;79 font-size: 44px;80 color: #2A2A2A;81 }82 83 /* Suggestion rows */84 .suggestion {85 display: flex;86 align-items: center;87 justify-content: space-between;88 padding: 26px 16px;89 border-bottom: 1px solid #EEEAE4;90 }91 .suggestion-left {92 display: flex;93 align-items: center;94 gap: 28px;95 }96 .suggestion-text {97 font-size: 42px;98 color: #333333;99 }100 .icon-wrap {101 width: 72px; height: 72px;102 display: flex; align-items: center; justify-content: center;103 }104 .chevron {105 width: 36px; height: 36px;106 }107 108 /* Quick actions bar */109 .quick-actions {110 position: absolute;111 left: 0; right: 0;112 bottom: 850px; /* sits above keyboard */113 height: 160px;114 border-top: 1px solid #E8E4DE;115 background: #FFFFFF;116 display: flex;117 align-items: center;118 justify-content: space-around;119 text-align: center;120 }121 .qa-item { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #3D3D3D; }122 .qa-item svg { width: 64px; height: 64px; stroke: #3D3D3D; }123 .qa-item span { font-size: 34px; color: #3D3D3D; }124 125 /* Keyboard mock */126 .keyboard {127 position: absolute;128 left: 0; bottom: 0; right: 0;129 height: 850px;130 background: #E7E6E9;131 border-top: 1px solid #D4D4D8;132 box-sizing: border-box;133 padding: 18px 16px 20px;134 }135 .kb-suggest {136 height: 88px;137 margin: 0 12px 16px;138 border-radius: 22px;139 background: #FFFFFF;140 display: flex;141 align-items: center;142 justify-content: center;143 color: #3D3D3D;144 font-size: 40px;145 position: relative;146 }147 .kb-suggest .mic {148 position: absolute; right: 24px;149 width: 44px; height: 44px;150 }151 .key-row {152 display: grid;153 grid-auto-flow: column;154 gap: 14px;155 margin: 10px 12px;156 }157 .key {158 background: #FFFFFF;159 border-radius: 18px;160 min-height: 120px;161 display: flex; align-items: center; justify-content: center;162 color: #2F2F2F;163 font-size: 42px;164 box-shadow: inset 0 0 0 1px #E0E0E0;165 }166 .row1 { grid-template-columns: repeat(10, 1fr); }167 .row2 { grid-template-columns: repeat(9, 1fr); padding: 0 54px; }168 .row3 { grid-template-columns: 1.5fr repeat(7, 1fr) 1.8fr; }169 .row4 { grid-template-columns: 1.6fr 1.1fr 1.1fr 6fr 1.1fr 1.8fr; }170 .space { grid-column: span 1; }171</style>172</head>173<body>174<div id="render-target">175 176 <!-- Status Bar -->177 <div class="status-bar">178 <div class="status-time">12:52</div>179 <div class="status-icons">180 <!-- WiFi -->181 <svg class="icon-small" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">182 <path d="M2 8c5.5-4.5 14.5-4.5 20 0"></path>183 <path d="M5 12c4-3 10-3 14 0"></path>184 <path d="M9 16c2-1.5 4-1.5 6 0"></path>185 <circle cx="12" cy="19" r="1.5" fill="#ffffff" stroke="none"></circle>186 </svg>187 <!-- Battery -->188 <svg class="icon-small" viewBox="0 0 28 18" fill="none" stroke="#ffffff" stroke-width="2">189 <rect x="1" y="3" width="22" height="12" rx="2"></rect>190 <rect x="3" y="5" width="18" height="8" rx="1" fill="#ffffff" stroke="none"></rect>191 <rect x="24" y="7" width="3" height="6" rx="1"></rect>192 </svg>193 </div>194 </div>195 196 <!-- Search Header -->197 <div class="search-header">198 <div class="back-btn">199 <svg width="48" height="48" viewBox="0 0 24 24" stroke="#1F1F1F" fill="none" stroke-width="2">200 <path d="M15 18l-6-6 6-6"></path>201 </svg>202 </div>203 <div class="search-input">sneakers</div>204 <div class="clear-text">Clear</div>205 </div>206 207 <!-- Content: Suggestions -->208 <div class="content">209 <div class="title">Search suggestions</div>210 211 <!-- Row 1 with clock icon -->212 <div class="suggestion">213 <div class="suggestion-left">214 <div class="icon-wrap">215 <svg width="64" height="64" viewBox="0 0 24 24" stroke="#2F2F2F" fill="none" stroke-width="2">216 <circle cx="12" cy="12" r="8.5"></circle>217 <path d="M12 7v6l4 2"></path>218 </svg>219 </div>220 <div class="suggestion-text">sneakers</div>221 </div>222 <svg class="chevron" viewBox="0 0 24 24" stroke="#4B4B4B" fill="none" stroke-width="2">223 <path d="M9 6l6 6-6 6"></path>224 </svg>225 </div>226 227 <!-- Row 2 -->228 <div class="suggestion">229 <div class="suggestion-left">230 <div class="icon-wrap">231 <svg width="64" height="64" viewBox="0 0 24 24" stroke="#2F2F2F" fill="none" stroke-width="2">232 <circle cx="10.5" cy="10.5" r="7.5"></circle>233 <path d="M16 16l5 5"></path>234 </svg>235 </div>236 <div class="suggestion-text">sneakers men</div>237 </div>238 <svg class="chevron" viewBox="0 0 24 24" stroke="#4B4B4B" fill="none" stroke-width="2">239 <path d="M9 6l6 6-6 6"></path>240 </svg>241 </div>242 243 <!-- Row 3 -->244 <div class="suggestion">245 <div class="suggestion-left">246 <div class="icon-wrap">247 <svg width="64" height="64" viewBox="0 0 24 24" stroke="#2F2F2F" fill="none" stroke-width="2">248 <circle cx="10.5" cy="10.5" r="7.5"></circle>249 <path d="M16 16l5 5"></path>250 </svg>251 </div>252 <div class="suggestion-text">sneakers white</div>253 </div>254 <svg class="chevron" viewBox="0 0 24 24" stroke="#4B4B4B" fill="none" stroke-width="2">255 <path d="M9 6l6 6-6 6"></path>256 </svg>257 </div>258 259 <!-- Row 4 -->260 <div class="suggestion">261 <div class="suggestion-left">262 <div class="icon-wrap">263 <svg width="64" height="64" viewBox="0 0 24 24" stroke="#2F2F2F" fill="none" stroke-width="2">264 <circle cx="10.5" cy="10.5" r="7.5"></circle>265 <path d="M16 16l5 5"></path>266 </svg>267 </div>268 <div class="suggestion-text">sneakers shoes</div>269 </div>270 <svg class="chevron" viewBox="0 0 24 24" stroke="#4B4B4B" fill="none" stroke-width="2">271 <path d="M9 6l6 6-6 6"></path>272 </svg>273 </div>274 275 <!-- Row 5 -->276 <div class="suggestion" style="border-bottom: none;">277 <div class="suggestion-left">278 <div class="icon-wrap">279 <svg width="64" height="64" viewBox="0 0 24 24" stroke="#2F2F2F" fill="none" stroke-width="2">280 <circle cx="10.5" cy="10.5" r="7.5"></circle>281 <path d="M16 16l5 5"></path>282 </svg>283 </div>284 <div class="suggestion-text">sneakers men white</div>285 </div>286 <svg class="chevron" viewBox="0 0 24 24" stroke="#4B4B4B" fill="none" stroke-width="2">287 <path d="M9 6l6 6-6 6"></path>288 </svg>289 </div>290 </div>291 292 <!-- Quick Actions -->293 <div class="quick-actions">294 <div class="qa-item">295 <svg viewBox="0 0 24 24" fill="none" stroke-width="1.8">296 <rect x="4" y="4" width="16" height="12" rx="2"></rect>297 <circle cx="12" cy="10" r="3.2"></circle>298 </svg>299 <span>Take photo</span>300 </div>301 <div class="qa-item">302 <svg viewBox="0 0 24 24" fill="none" stroke-width="1.8">303 <rect x="4" y="4" width="16" height="16" rx="2"></rect>304 <rect x="8" y="8" width="8" height="8"></rect>305 </svg>306 <span>Scan Code</span>307 </div>308 <div class="qa-item">309 <svg viewBox="0 0 24 24" fill="none" stroke-width="1.8">310 <path d="M12 21s7-5.5 7-11a7 7 0 10-14 0c0 5.5 7 11 7 11z"></path>311 <circle cx="12" cy="10" r="3"></circle>312 </svg>313 <span>Find stores</span>314 </div>315 </div>316 317 <!-- Keyboard -->318 <div class="keyboard">319 <div class="kb-suggest">320 sneakers321 <svg class="mic" viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2">322 <rect x="9" y="3" width="6" height="10" rx="3" />323 <path d="M5 10v2a7 7 0 0014 0v-2M12 21v-3"></path>324 </svg>325 </div>326 327 <div class="key-row row1">328 <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>329 <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>330 </div>331 332 <div class="key-row row2">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 337 <div class="key-row row3">338 <div class="key">⇧</div>339 <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>340 <div class="key">⌫</div>341 </div>342 343 <div class="key-row row4">344 <div class="key">?123</div>345 <div class="key">,</div>346 <div class="key">😊</div>347 <div class="key">space</div>348 <div class="key">.</div>349 <div class="key">🔎</div>350 </div>351 </div>352 353</div>354</body>355</html>