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 UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Status bar */18 .statusbar {19 position: absolute;20 top: 0;21 left: 0;22 width: 100%;23 height: 110px;24 background: #d6d6d6;25 display: flex;26 align-items: center;27 padding: 0 36px;28 color: #333;29 font-size: 36px;30 }31 .status-left { flex: 1; }32 .status-center { flex: 1; display: flex; justify-content: center; gap: 22px; }33 .status-dot {34 width: 24px; height: 24px; border-radius: 50%; background: #ffffff; opacity: 0.85;35 }36 .status-right { flex: 1; display: flex; justify-content: flex-end; align-items: center; gap: 24px; }37 .icon-wifi, .icon-battery { width: 44px; height: 44px; }38 39 /* Header / Search input area */40 .header {41 position: absolute;42 top: 110px;43 left: 0;44 width: 100%;45 padding: 24px 36px 30px 36px;46 border-bottom: 1px solid #ededed;47 background: #ffffff;48 display: flex;49 align-items: center;50 gap: 24px;51 }52 .back-icon { width: 48px; height: 48px; }53 .search-text {54 flex: 1;55 font-size: 56px;56 color: #111;57 font-weight: 600;58 line-height: 1.2;59 }60 .clear-btn { font-size: 34px; color: #666; }61 62 /* Suggestions */63 .suggestions {64 position: absolute;65 top: 110px; /* base */66 left: 0;67 width: 100%;68 }69 .suggestions-inner {70 margin-top: 160px; /* below header */71 padding: 0 36px;72 }73 .section-title {74 font-size: 40px;75 color: #444;76 margin: 24px 0 10px 0;77 }78 .suggestion-row {79 display: flex;80 align-items: center;81 padding: 28px 0;82 border-top: 1px solid #efefef;83 border-bottom: 1px solid #efefef;84 }85 .s-icon { width: 56px; height: 56px; margin-right: 26px; }86 .s-text { flex: 1; font-size: 36px; color: #222; }87 .s-arrow { width: 42px; height: 42px; }88 89 /* Content area filler */90 .content-filler {91 position: absolute;92 top: 650px; /* adjust to sit below suggestions rows */93 left: 0;94 width: 100%;95 height: 720px;96 background: #fbf9f7;97 border-top: 1px solid #f0f0f0;98 }99 100 /* Action toolbar above keyboard */101 .action-toolbar {102 position: absolute;103 bottom: 900px; /* sits above keyboard */104 left: 0;105 width: 100%;106 height: 150px;107 background: #ffffff;108 border-top: 1px solid #eaeaea;109 display: flex;110 justify-content: space-around;111 align-items: center;112 }113 .action-item { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #333; }114 .action-icon { width: 58px; height: 58px; }115 .action-label { font-size: 30px; color: #333; }116 117 /* Keyboard */118 .keyboard {119 position: absolute;120 bottom: 0;121 left: 0;122 width: 100%;123 height: 900px;124 background: #1d1d1f;125 border-top: 1px solid #222;126 color: #eee;127 }128 .kb-suggestions {129 height: 120px;130 border-bottom: 1px solid #2a2a2a;131 display: flex;132 align-items: center;133 padding: 0 24px;134 gap: 22px;135 font-size: 32px;136 color: #d4d4d4;137 }138 .kb-suggestions .sep { color: #7a7a7a; }139 .kb-suggestions .right { margin-left: auto; display: flex; align-items: center; gap: 18px; }140 .kb-row {141 display: flex;142 justify-content: center;143 gap: 16px;144 padding: 18px 24px;145 }146 .key {147 width: 86px; height: 110px;148 border-radius: 24px;149 background: #2b2b2b;150 display: flex; align-items: center; justify-content: center;151 font-size: 42px; color: #f1f1f1;152 }153 .key.wide { width: 126px; }154 .key.xwide { width: 540px; }155 .key.func { background: #3a3a3a; color: #ddd; font-size: 36px; }156 .key.search {157 width: 126px; height: 110px; border-radius: 26px;158 background: #c8d4f8; color: #1d1d1f;159 }160 161 .gesture-pill {162 position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);163 width: 420px; height: 12px; border-radius: 12px; background: #e0e0e0; opacity: 0.8;164 }165</style>166</head>167<body>168<div id="render-target">169 170 <!-- Status bar -->171 <div class="statusbar">172 <div class="status-left">4:21</div>173 <div class="status-center">174 <div class="status-dot"></div>175 <div class="status-dot"></div>176 <div class="status-dot"></div>177 <div class="status-dot"></div>178 <div class="status-dot" style="width: 10px; height: 10px; opacity: 0.7;"></div>179 </div>180 <div class="status-right">181 <!-- Simple WiFi icon -->182 <svg class="icon-wifi" viewBox="0 0 48 48">183 <path d="M7 18c10-9 24-9 34 0" stroke="#333" stroke-width="3" fill="none" stroke-linecap="round"/>184 <path d="M12 24c7-6 17-6 24 0" stroke="#333" stroke-width="3" fill="none" stroke-linecap="round"/>185 <path d="M18 30c4-4 10-4 14 0" stroke="#333" stroke-width="3" fill="none" stroke-linecap="round"/>186 <circle cx="25" cy="36" r="3" fill="#333"/>187 </svg>188 <!-- Simple Battery icon -->189 <svg class="icon-battery" viewBox="0 0 60 48">190 <rect x="6" y="10" width="42" height="28" rx="4" stroke="#333" stroke-width="3" fill="none"/>191 <rect x="10" y="14" width="26" height="20" fill="#333"/>192 <rect x="50" y="18" width="6" height="12" rx="2" fill="#333"/>193 </svg>194 </div>195 </div>196 197 <!-- Header with back and clear -->198 <div class="header">199 <svg class="back-icon" viewBox="0 0 48 48">200 <path d="M30 8 L14 24 L30 40" stroke="#111" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>201 </svg>202 <div class="search-text">Chunky chelsea Boots</div>203 <div class="clear-btn">Clear</div>204 </div>205 206 <!-- Suggestions block -->207 <div class="suggestions">208 <div class="suggestions-inner">209 <div class="section-title">Search suggestions</div>210 211 <div class="suggestion-row">212 <svg class="s-icon" viewBox="0 0 64 64">213 <circle cx="28" cy="28" r="18" stroke="#222" stroke-width="4" fill="none"/>214 <line x1="40" y1="40" x2="56" y2="56" stroke="#222" stroke-width="4" stroke-linecap="round"/>215 </svg>216 <div class="s-text">chunky chelsea boots</div>217 <svg class="s-arrow" viewBox="0 0 48 48">218 <path d="M16 10 L32 24 L16 38" stroke="#333" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>219 </svg>220 </div>221 222 <div class="suggestion-row">223 <svg class="s-icon" viewBox="0 0 64 64">224 <circle cx="28" cy="28" r="18" stroke="#222" stroke-width="4" fill="none"/>225 <line x1="40" y1="40" x2="56" y2="56" stroke="#222" stroke-width="4" stroke-linecap="round"/>226 </svg>227 <div class="s-text">chunky chelsea boots high</div>228 <svg class="s-arrow" viewBox="0 0 48 48">229 <path d="M16 10 L32 24 L16 38" stroke="#333" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>230 </svg>231 </div>232 </div>233 </div>234 235 <!-- Spacer content area -->236 <div class="content-filler"></div>237 238 <!-- Action toolbar -->239 <div class="action-toolbar">240 <div class="action-item">241 <svg class="action-icon" viewBox="0 0 64 64">242 <rect x="8" y="16" width="48" height="36" rx="8" stroke="#333" stroke-width="3" fill="none"/>243 <circle cx="32" cy="34" r="8" fill="#333"/>244 <rect x="20" y="8" width="12" height="8" rx="2" fill="#333"/>245 </svg>246 <div class="action-label">Take Photo</div>247 </div>248 <div class="action-item">249 <svg class="action-icon" viewBox="0 0 64 64">250 <rect x="12" y="12" width="40" height="40" rx="6" stroke="#333" stroke-width="3" fill="none"/>251 <rect x="20" y="20" width="24" height="24" rx="4" stroke="#333" stroke-width="3" fill="none"/>252 </svg>253 <div class="action-label">Scan Code</div>254 </div>255 <div class="action-item">256 <svg class="action-icon" viewBox="0 0 64 64">257 <path d="M32 10c8 0 14 6 14 14 0 12-14 28-14 28S18 36 18 24c0-8 6-14 14-14z" stroke="#333" stroke-width="3" fill="none"/>258 <circle cx="32" cy="24" r="6" fill="#333"/>259 </svg>260 <div class="action-label">Find Store</div>261 </div>262 </div>263 264 <!-- Keyboard -->265 <div class="keyboard">266 <div class="kb-suggestions">267 <div>Boots</div>268 <div class="sep">|</div>269 <div>Bootstrap</div>270 <div class="sep">|</div>271 <div>🧦</div>272 <div>🥾</div>273 <div class="right">274 <svg viewBox="0 0 48 48" width="48" height="48">275 <path d="M24 8v24" stroke="#9f9f9f" stroke-width="4" stroke-linecap="round"/>276 <circle cx="24" cy="36" r="4" fill="#9f9f9f"/>277 </svg>278 </div>279 </div>280 281 <div class="kb-row">282 <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>283 </div>284 <div class="kb-row">285 <div class="key wide">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 wide">l</div>286 </div>287 <div class="kb-row">288 <div class="key func">⇧</div><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><div class="key func" style="width:126px;">⌫</div>289 </div>290 <div class="kb-row">291 <div class="key func">?123</div>292 <div class="key func" style="width:86px;">,</div>293 <div class="key func" style="width:86px;">☺</div>294 <div class="key xwide"></div>295 <div class="key func" style="width:86px;">.</div>296 <div class="key search">297 <svg viewBox="0 0 48 48" width="40" height="40">298 <circle cx="22" cy="22" r="12" stroke="#1d1d1f" stroke-width="3" fill="none"/>299 <line x1="32" y1="32" x2="44" y2="44" stroke="#1d1d1f" stroke-width="3" stroke-linecap="round"/>300 </svg>301 </div>302 </div>303 304 <div class="gesture-pill"></div>305 </div>306 307</div>308</body>309</html>