GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3 <head>4 <meta charset="UTF-8" />5 <meta name="viewport" content="width=1080, initial-scale=1.0" />6 <title>Search Screen Mock</title>7 <style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;13 }14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #ffffff;20 }21 22 /* Status bar */23 .statusbar {24 height: 118px;25 background: #d8d8d8;26 padding: 0 36px;27 display: flex;28 align-items: center;29 justify-content: space-between;30 color: #222;31 font-size: 36px;32 letter-spacing: 0.5px;33 }34 .status-left {35 display: flex;36 align-items: center;37 gap: 18px;38 font-weight: 600;39 }40 .status-right {41 display: flex;42 align-items: center;43 gap: 22px;44 }45 .icon {46 display: inline-flex;47 width: 40px;48 height: 40px;49 }50 51 /* Search header */52 .search-header {53 padding: 28px 36px 16px 24px;54 border-bottom: 1px solid #eeeeee;55 }56 .search-row {57 display: flex;58 align-items: center;59 gap: 22px;60 }61 .back {62 width: 56px;63 height: 56px;64 display: inline-flex;65 align-items: center;66 justify-content: center;67 }68 .search-input {69 flex: 1;70 font-size: 48px;71 color: #222222;72 }73 .clear-btn {74 color: #5c5c5c;75 font-size: 38px;76 }77 .suggest-title {78 margin-top: 34px;79 margin-left: 96px;80 font-size: 44px;81 font-weight: 700;82 color: #222;83 }84 85 /* Bottom utility bar */86 .utility-bar {87 position: absolute;88 left: 0;89 right: 0;90 bottom: 820px;91 height: 160px;92 background: #ffffff;93 border-top: 1px solid #e9e9e9;94 display: flex;95 align-items: center;96 justify-content: space-around;97 text-align: center;98 }99 .util-item {100 width: 280px;101 display: flex;102 flex-direction: column;103 align-items: center;104 gap: 14px;105 color: #222;106 }107 .util-item svg {108 width: 56px;109 height: 56px;110 color: #333;111 }112 .util-label {113 font-size: 34px;114 }115 116 /* Keyboard mock */117 .keyboard {118 position: absolute;119 left: 0;120 right: 0;121 bottom: 0;122 height: 820px;123 background: #1f1a1c;124 color: #eadadc;125 }126 .kb-toprow {127 height: 92px;128 padding: 16px 24px 10px;129 display: flex;130 align-items: center;131 justify-content: space-between;132 color: #e8dcde;133 }134 .kb-chipbar {135 display: flex;136 align-items: center;137 gap: 24px;138 }139 .kb-chip {140 padding: 10px 22px;141 background: #2a2527;142 border-radius: 18px;143 font-size: 32px;144 }145 .kb-rows {146 padding: 0 18px 18px;147 }148 .kb-row {149 display: flex;150 justify-content: center;151 gap: 12px;152 margin: 10px 0;153 }154 .key {155 width: 88px;156 height: 110px;157 background: #2b2729;158 border-radius: 18px;159 display: flex;160 align-items: center;161 justify-content: center;162 font-size: 44px;163 box-shadow: inset 0 -2px 0 rgba(255,255,255,0.03);164 }165 .key.wide {166 width: 140px;167 }168 .key.extra-wide {169 width: 520px;170 }171 .key.circle {172 width: 120px;173 height: 120px;174 border-radius: 60px;175 background: #f0c7cf;176 color: #2a2325;177 font-weight: 700;178 }179 .key.pill {180 width: 180px;181 }182 .home-indicator {183 position: absolute;184 left: 50%;185 transform: translateX(-50%);186 bottom: 18px;187 width: 260px;188 height: 8px;189 background: #e9e9e9;190 border-radius: 8px;191 opacity: 0.9;192 }193 </style>194 </head>195 <body>196 <div id="render-target">197 <!-- Status bar -->198 <div class="statusbar">199 <div class="status-left">200 <span>10:45</span>201 <span>S</span>202 <span>G</span>203 <span>76°</span>204 </div>205 <div class="status-right">206 <!-- WiFi -->207 <svg class="icon" viewBox="0 0 24 24">208 <path d="M12 18.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm0-4.5a6 6 0 0 1 4.24 1.76l1.41-1.41A7.99 7.99 0 0 0 12 12a8 8 0 0 0-5.66 2.35l1.42 1.41A6 6 0 0 1 12 14Z" fill="#222"/>209 </svg>210 <!-- Battery -->211 <svg class="icon" viewBox="0 0 24 24">212 <rect x="1" y="6" width="18" height="12" rx="2" fill="none" stroke="#222" stroke-width="2"/>213 <rect x="3" y="8" width="14" height="8" fill="#222"/>214 <rect x="20" y="10" width="2" height="8" rx="1" fill="#222"/>215 </svg>216 </div>217 </div>218 219 <!-- Search header -->220 <div class="search-header">221 <div class="search-row">222 <div class="back">223 <svg width="48" height="48" viewBox="0 0 24 24">224 <path d="M15.5 19 8.5 12l7-7" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>225 </svg>226 </div>227 <div class="search-input">shirts for men</div>228 <div class="clear-btn">Clear</div>229 </div>230 <div class="suggest-title">Search suggestions</div>231 </div>232 233 <!-- Big empty content area (white by default) -->234 235 <!-- Bottom utility bar -->236 <div class="utility-bar">237 <div class="util-item">238 <svg viewBox="0 0 24 24">239 <circle cx="12" cy="12" r="7" fill="none" stroke="currentColor" stroke-width="1.8"/>240 <rect x="9" y="3" width="6" height="3" rx="1.2" fill="currentColor"/>241 </svg>242 <div class="util-label">Take Photo</div>243 </div>244 <div class="util-item">245 <svg viewBox="0 0 24 24">246 <rect x="4" y="4" width="16" height="16" rx="2" fill="none" stroke="currentColor" stroke-width="1.8"/>247 <rect x="9" y="9" width="6" height="6" rx="1" fill="currentColor"/>248 </svg>249 <div class="util-label">Scan Code</div>250 </div>251 <div class="util-item">252 <svg viewBox="0 0 24 24">253 <path d="M12 2c-3.5 0-6.5 2.8-6.5 6.3 0 4.8 6.5 13.7 6.5 13.7s6.5-8.9 6.5-13.7C18.5 4.8 15.5 2 12 2Zm0 9.2a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z" fill="currentColor"/>254 </svg>255 <div class="util-label">Find Store</div>256 </div>257 </div>258 259 <!-- Keyboard mock -->260 <div class="keyboard">261 <div class="kb-toprow">262 <div class="kb-chipbar">263 <div class="kb-chip">men</div>264 <div class="kb-chip">mens</div>265 <div class="kb-chip">men's</div>266 </div>267 <svg width="54" height="54" viewBox="0 0 24 24">268 <circle cx="12" cy="12" r="8.5" fill="none" stroke="#eadadc" stroke-width="1.6"/>269 <rect x="11" y="7" width="2" height="6" fill="#eadadc"/>270 <circle cx="12" cy="16" r="1" fill="#eadadc"/>271 </svg>272 </div>273 <div class="kb-rows">274 <div class="kb-row">275 <div class="key">q</div>276 <div class="key">w</div>277 <div class="key">e</div>278 <div class="key">r</div>279 <div class="key">t</div>280 <div class="key">y</div>281 <div class="key">u</div>282 <div class="key">i</div>283 <div class="key">o</div>284 <div class="key">p</div>285 </div>286 <div class="kb-row" style="gap: 16px;">287 <div class="key" style="visibility:hidden"></div>288 <div class="key">a</div>289 <div class="key">s</div>290 <div class="key">d</div>291 <div class="key">f</div>292 <div class="key">g</div>293 <div class="key">h</div>294 <div class="key">j</div>295 <div class="key">k</div>296 <div class="key">l</div>297 <div class="key" style="visibility:hidden"></div>298 </div>299 <div class="kb-row">300 <div class="key pill">⇧</div>301 <div class="key">z</div>302 <div class="key">x</div>303 <div class="key">c</div>304 <div class="key">v</div>305 <div class="key">b</div>306 <div class="key">n</div>307 <div class="key">m</div>308 <div class="key pill">⌫</div>309 </div>310 <div class="kb-row">311 <div class="key circle">?123</div>312 <div class="key">,</div>313 <div class="key extra-wide"></div>314 <div class="key">.</div>315 <div class="key circle">316 <svg width="40" height="40" viewBox="0 0 24 24">317 <path d="M10 18l6-6-6-6v12Z" fill="#2a2325"/>318 </svg>319 </div>320 </div>321 </div>322 <div class="home-indicator"></div>323 </div>324 </div>325 </body>326</html>