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, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #FFFFFF;15 }16 * { box-sizing: border-box; }17 18 /* Status bar */19 .status-bar {20 height: 140px;21 background: #909090;22 color: #ffffff;23 display: flex;24 align-items: center;25 padding: 0 38px;26 font-size: 40px;27 letter-spacing: 0.5px;28 }29 .status-time { font-weight: 600; }30 .status-icons {31 margin-left: auto;32 display: flex;33 align-items: center;34 gap: 26px;35 }36 .status-icons svg { display: block; }37 38 /* Search header */39 .search-header {40 height: 140px;41 display: flex;42 align-items: center;43 padding: 0 32px;44 border-bottom: 1px solid #e3e3e3;45 background: #ffffff;46 }47 .icon-btn {48 width: 72px;49 height: 72px;50 display: flex;51 justify-content: center;52 align-items: center;53 color: #333;54 }55 .search-text {56 font-size: 48px;57 color: #1f1f1f;58 margin-left: 16px;59 }60 .header-actions {61 margin-left: auto;62 display: flex;63 align-items: center;64 gap: 28px;65 }66 .circle-x {67 width: 72px;68 height: 72px;69 border: 2px solid #777;70 border-radius: 50%;71 color: #555;72 display: flex;73 align-items: center;74 justify-content: center;75 font-size: 38px;76 line-height: 1;77 }78 .more-vert {79 width: 72px;80 height: 72px;81 display: flex;82 align-items: center;83 justify-content: center;84 }85 .dot {86 width: 10px; height: 10px; background: #444; border-radius: 50%; margin: 6px 0;87 }88 89 /* Segmented tabs */90 .segmented {91 display: flex;92 background: #f6f6f6;93 border-bottom: 1px solid #dedede;94 border-top: 1px solid #dedede;95 height: 112px;96 }97 .tab {98 flex: 1;99 display: flex;100 align-items: center;101 justify-content: center;102 position: relative;103 font-size: 40px;104 color: #7a7a7a;105 }106 .tab + .tab { border-left: 1px solid #dddddd; }107 .tab.active { color: #111; background: #f9f9f9; }108 .tab.active::after {109 content: "";110 position: absolute;111 bottom: 0; left: 24px; right: 24px;112 height: 6px; background: #111;113 border-radius: 3px;114 }115 116 /* Suggestions list */117 .suggestions { background: #ffffff; }118 .suggestion {119 display: flex;120 align-items: center;121 gap: 26px;122 padding: 0 36px;123 height: 150px;124 border-bottom: 1px solid #e6e6e6;125 }126 .suggestion:last-child { border-bottom: none; }127 .suggestion-text {128 font-size: 44px;129 color: #202020;130 }131 .suggestion-text b { font-weight: 700; }132 .search-icon {133 width: 54px; height: 54px; color: #3a3a3a;134 }135 136 /* Keyboard mock */137 .keyboard {138 position: absolute;139 bottom: 34px;140 left: 0; right: 0;141 height: 820px;142 background: #2a2522;143 color: #e9d7c8;144 border-top-left-radius: 26px;145 border-top-right-radius: 26px;146 overflow: hidden;147 }148 .kb-suggest {149 height: 110px;150 background: #3a332f;151 display: flex;152 align-items: center;153 padding: 0 28px;154 gap: 24px;155 font-size: 36px;156 }157 .kb-suggest .sep { color: #9c8f85; margin: 0 8px; }158 .kb-row {159 display: flex;160 justify-content: center;161 gap: 12px;162 padding: 18px 18px;163 }164 .key {165 background: #3b3430;166 color: #f0e4d7;167 border-radius: 18px;168 width: 92px; height: 120px;169 display: flex; align-items: center; justify-content: center;170 font-size: 44px; font-weight: 500;171 }172 .key.wide { width: 640px; }173 .key.medium { width: 140px; }174 .key.round {175 width: 120px; height: 120px; border-radius: 60px; background: #e8c9a7; color: #2a2522; font-weight: 600;176 }177 178 /* Gesture pill */179 .gesture-pill {180 position: absolute;181 bottom: 0;182 left: 50%;183 transform: translateX(-50%);184 width: 320px;185 height: 14px;186 background: #eaeaea;187 border-radius: 8px;188 }189</style>190</head>191<body>192<div id="render-target">193 194 <!-- Status Bar -->195 <div class="status-bar">196 <div class="status-time">11:37</div>197 <div class="status-icons">198 <!-- WiFi -->199 <svg width="40" height="40" viewBox="0 0 40 40">200 <path d="M4 14c8-6 24-6 32 0" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/>201 <path d="M9 20c6-4 16-4 22 0" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/>202 <path d="M15 26c3-2 7-2 10 0" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/>203 <circle cx="20" cy="30" r="2.4" fill="#fff"/>204 </svg>205 <!-- Battery -->206 <svg width="54" height="40" viewBox="0 0 54 40">207 <rect x="2" y="8" width="44" height="24" rx="4" stroke="#fff" stroke-width="3" fill="none"/>208 <rect x="6" y="12" width="36" height="16" rx="2" fill="#fff"/>209 <rect x="48" y="14" width="6" height="12" rx="2" fill="#fff"/>210 </svg>211 </div>212 </div>213 214 <!-- Search Header -->215 <div class="search-header">216 <div class="icon-btn">217 <!-- Back Arrow -->218 <svg width="64" height="64" viewBox="0 0 48 48">219 <path d="M28 10 L14 24 L28 38" stroke="#333" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>220 </svg>221 </div>222 <div class="search-text">men's shirt</div>223 <div class="header-actions">224 <div class="circle-x">×</div>225 <div class="more-vert">226 <div class="dot"></div>227 <div class="dot"></div>228 <div class="dot"></div>229 </div>230 </div>231 </div>232 233 <!-- Segmented Tabs -->234 <div class="segmented">235 <div class="tab active">Women</div>236 <div class="tab">Men</div>237 <div class="tab">Kids</div>238 </div>239 240 <!-- Suggestions -->241 <div class="suggestions">242 <div class="suggestion">243 <svg class="search-icon" viewBox="0 0 48 48">244 <circle cx="20" cy="20" r="14" stroke="currentColor" stroke-width="4" fill="none"/>245 <path d="M32 32 L44 44" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>246 </svg>247 <div class="suggestion-text">man's shirt</div>248 </div>249 <div class="suggestion">250 <svg class="search-icon" viewBox="0 0 48 48">251 <circle cx="20" cy="20" r="14" stroke="currentColor" stroke-width="4" fill="none"/>252 <path d="M32 32 L44 44" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>253 </svg>254 <div class="suggestion-text">man's shirt cotton</div>255 </div>256 <div class="suggestion">257 <svg class="search-icon" viewBox="0 0 48 48">258 <circle cx="20" cy="20" r="14" stroke="currentColor" stroke-width="4" fill="none"/>259 <path d="M32 32 L44 44" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>260 </svg>261 <div class="suggestion-text">man's shirt polo</div>262 </div>263 <div class="suggestion">264 <svg class="search-icon" viewBox="0 0 48 48">265 <circle cx="20" cy="20" r="14" stroke="currentColor" stroke-width="4" fill="none"/>266 <path d="M32 32 L44 44" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>267 </svg>268 <div class="suggestion-text"><b>menos</b> shirt</div>269 </div>270 </div>271 272 <!-- Keyboard Mock -->273 <div class="keyboard">274 <div class="kb-suggest">275 <div>shirt</div>276 <div class="sep">|</div>277 <div>shirts</div>278 <div class="sep">|</div>279 <div style="width:34px;height:34px;background:#6fc1ff;border-radius:6px;"></div>280 <div style="width:34px;height:34px;background:#4db6ac;border-radius:6px;"></div>281 <div style="margin-left:auto;">282 <!-- Mic icon -->283 <svg width="44" height="44" viewBox="0 0 48 48">284 <rect x="16" y="8" width="16" height="22" rx="8" stroke="#e9d7c8" stroke-width="4" fill="none"/>285 <path d="M10 22c0 8 6 14 14 14s14-6 14-14" stroke="#e9d7c8" stroke-width="4" fill="none" stroke-linecap="round"/>286 <path d="M24 36v8" stroke="#e9d7c8" stroke-width="4" stroke-linecap="round"/>287 </svg>288 </div>289 </div>290 291 <div class="kb-row">292 <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>293 </div>294 <div class="kb-row">295 <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>296 </div>297 <div class="kb-row">298 <div class="key medium">⇧</div>299 <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>300 <div class="key medium">⌫</div>301 </div>302 <div class="kb-row">303 <div class="key medium">?123</div>304 <div class="key medium">,</div>305 <div class="key medium">☺</div>306 <div class="key wide"></div>307 <div class="key medium">.</div>308 <div class="key round">🔍</div>309 </div>310 </div>311 312 <!-- Gesture pill -->313 <div class="gesture-pill"></div>314 315</div>316</body>317</html>