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 Screen Mock</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 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #FFFFFF;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 120px;24 background: #D5D5D5;25 color: #1f1f1f;26 font-size: 32px;27 display: flex;28 align-items: center;29 padding: 0 32px;30 box-sizing: border-box;31 letter-spacing: 0.5px;32 }33 .status-left { flex: 1; }34 .status-right {35 display: flex;36 align-items: center;37 gap: 22px;38 }39 .status-icon svg { display: block; }40 41 /* Header / search row */42 .search-header {43 position: absolute;44 top: 120px;45 left: 0;46 width: 1080px;47 padding: 28px 28px 22px 28px;48 box-sizing: border-box;49 background: #FFFFFF;50 border-bottom: 1px solid #F0F0F0;51 }52 .search-row {53 display: flex;54 align-items: center;55 gap: 24px;56 padding: 8px 6px;57 }58 .back-btn {59 width: 68px; height: 68px; display: flex; align-items: center; justify-content: center;60 }61 .search-text {62 flex: 1;63 font-size: 48px;64 color: #222;65 }66 .caret {67 width: 3px; height: 56px; background: #1e1e1e; display: inline-block; margin-left: 6px; vertical-align: -6px;68 }69 .clear-text {70 font-size: 38px;71 color: #6E6E6E;72 }73 74 .section-label {75 margin-top: 26px;76 font-size: 40px;77 font-weight: 700;78 color: #2D2D2D;79 padding-left: 28px;80 }81 82 /* Quick actions bar above keyboard */83 .quick-actions {84 position: absolute;85 left: 0;86 width: 1080px;87 bottom: 920px; /* sits right above keyboard */88 height: 160px;89 background: #FFFFFF;90 border-top: 1px solid #ECECEC;91 display: flex;92 align-items: center;93 justify-content: space-around;94 color: #333;95 }96 .qa-item {97 display: flex;98 flex-direction: column;99 align-items: center;100 gap: 18px;101 font-size: 30px;102 }103 .qa-icon {104 width: 80px; height: 80px; border: 2px solid #CFCFCF; border-radius: 18px; display: flex; align-items: center; justify-content: center;105 color: #777;106 }107 108 /* Keyboard mock */109 .keyboard {110 position: absolute;111 left: 0; bottom: 0;112 width: 1080px;113 height: 920px;114 background: #101717;115 color: #E9F0EF;116 box-sizing: border-box;117 padding: 14px 18px 28px 18px;118 }119 .kb-suggest {120 height: 110px;121 display: flex;122 align-items: center;123 padding: 0 14px;124 gap: 28px;125 color: #D6DFDE;126 font-size: 36px;127 }128 .kb-suggest .separator { color: #6A7775; }129 .kb-row {130 display: flex;131 justify-content: center;132 margin-top: 16px;133 padding: 0 6px;134 }135 .key {136 height: 110px;137 min-width: 88px;138 padding: 0 16px;139 margin: 8px;140 background: #273332;141 border-radius: 18px;142 display: flex;143 align-items: center;144 justify-content: center;145 font-size: 38px;146 color: #E9F0EF;147 }148 .key.wide { min-width: 130px; }149 .key.xwide { min-width: 520px; }150 .key.icon {151 padding: 0;152 width: 130px;153 }154 .key.mint {155 background: #8EE8C9;156 color: #133B30;157 }158 .key.circle {159 width: 110px; height: 110px; border-radius: 55px; padding: 0;160 }161 .key.transparent {162 background: transparent;163 }164 .kb-icons { display: inline-flex; align-items: center; justify-content: center; }165 166 /* Gesture bar */167 .gesture {168 position: absolute;169 bottom: 14px;170 left: 50%;171 transform: translateX(-50%);172 width: 300px;173 height: 10px;174 background: #EDEDED;175 border-radius: 8px;176 opacity: 0.95;177 }178</style>179</head>180<body>181<div id="render-target">182 183 <!-- Status bar -->184 <div class="status-bar">185 <div class="status-left">2:53</div>186 <div class="status-right">187 <div class="status-icon">188 <svg width="42" height="26" viewBox="0 0 42 26">189 <path d="M2 24h38c1 0 2-1 2-2V4c0-1-1-2-2-2H2C1 2 0 3 0 4v18c0 1 1 2 2 2z" fill="none" stroke="#1f1f1f" stroke-width="2"/>190 <rect x="4" y="6" width="30" height="14" rx="2" fill="#1f1f1f"/>191 </svg>192 </div>193 <div class="status-icon">194 <svg width="36" height="26" viewBox="0 0 36 26">195 <path d="M2 24h6V12H2v12zm8 0h6V8h-6v16zm8 0h6V4h-6v20zm8 0h6V2h-6v22z" fill="#1f1f1f"/>196 </svg>197 </div>198 <div class="status-icon">199 <svg width="64" height="26" viewBox="0 0 64 26">200 <rect x="2" y="4" width="50" height="18" rx="4" ry="4" fill="none" stroke="#1f1f1f" stroke-width="2"/>201 <rect x="54" y="8" width="6" height="10" rx="2" fill="#1f1f1f"/>202 <rect x="6" y="8" width="42" height="10" rx="2" fill="#1f1f1f"/>203 </svg>204 </div>205 <div style="font-size:32px;">100%</div>206 </div>207 </div>208 209 <!-- Header with search -->210 <div class="search-header">211 <div class="search-row">212 <div class="back-btn">213 <svg width="44" height="44" viewBox="0 0 44 44">214 <path d="M28 8 L14 22 L28 36" stroke="#222" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>215 </svg>216 </div>217 <div class="search-text">Chalsea boots<span class="caret"></span></div>218 <div class="clear-text">Clear</div>219 </div>220 <div class="section-label">Search suggestions</div>221 </div>222 223 <!-- Quick actions -->224 <div class="quick-actions">225 <div class="qa-item">226 <div class="qa-icon">227 <svg width="44" height="44" viewBox="0 0 48 48">228 <rect x="8" y="12" width="32" height="24" rx="6" fill="none" stroke="#777" stroke-width="2"/>229 <circle cx="24" cy="24" r="6" fill="none" stroke="#777" stroke-width="2"/>230 </svg>231 </div>232 <div>Take Photo</div>233 </div>234 <div class="qa-item">235 <div class="qa-icon">236 <svg width="44" height="44" viewBox="0 0 48 48">237 <rect x="8" y="8" width="32" height="32" rx="4" fill="none" stroke="#777" stroke-width="2"/>238 <rect x="16" y="16" width="16" height="16" fill="none" stroke="#777" stroke-width="2" stroke-dasharray="4 4"/>239 </svg>240 </div>241 <div>Scan Code</div>242 </div>243 <div class="qa-item">244 <div class="qa-icon">245 <svg width="44" height="44" viewBox="0 0 48 48">246 <path d="M24 6c7 0 12 5 12 12 0 9-12 22-12 22S12 27 12 18c0-7 5-12 12-12z" fill="none" stroke="#777" stroke-width="2"/>247 <circle cx="24" cy="18" r="5" fill="none" stroke="#777" stroke-width="2"/>248 </svg>249 </div>250 <div>Find Store</div>251 </div>252 </div>253 254 <!-- Keyboard -->255 <div class="keyboard">256 <div class="kb-suggest">257 <div class="kb-icons">258 <svg width="54" height="54" viewBox="0 0 48 48">259 <rect x="6" y="6" width="12" height="12" fill="#D6DFDE"/>260 <rect x="30" y="6" width="12" height="12" fill="#D6DFDE"/>261 <rect x="6" y="30" width="12" height="12" fill="#D6DFDE"/>262 <rect x="30" y="30" width="12" height="12" fill="#D6DFDE"/>263 </svg>264 </div>265 <div>boots</div>266 <div class="separator">|</div>267 <div>bootstrap</div>268 <div class="separator">|</div>269 <div>boost</div>270 <div style="margin-left:auto" class="kb-icons">271 <svg width="46" height="46" viewBox="0 0 48 48">272 <path d="M24 6c5 0 10 4 10 10v8c0 6-5 10-10 10s-10-4-10-10v-8c0-6 5-10 10-10z" fill="none" stroke="#D6DFDE" stroke-width="2"/>273 <rect x="20" y="34" width="8" height="6" rx="2" fill="#D6DFDE"/>274 </svg>275 </div>276 </div>277 278 <!-- Row 1 -->279 <div class="kb-row">280 <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>281 <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>282 </div>283 284 <!-- Row 2 -->285 <div class="kb-row">286 <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>287 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>288 </div>289 290 <!-- Row 3 -->291 <div class="kb-row">292 <div class="key wide">293 <svg width="40" height="40" viewBox="0 0 48 48">294 <path d="M24 10 L14 22h6v12h8V22h6L24 10z" fill="#E9F0EF"/>295 </svg>296 </div>297 <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>298 <div class="key wide">299 <svg width="44" height="44" viewBox="0 0 48 48">300 <path d="M10 16h22l6 8-6 8H10l6-8-6-8z" fill="none" stroke="#E9F0EF" stroke-width="2"/>301 <path d="M22 18l8 6-8 6" stroke="#E9F0EF" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>302 </svg>303 </div>304 </div>305 306 <!-- Row 4 -->307 <div class="kb-row">308 <div class="key mint wide">?123</div>309 <div class="key">,</div>310 <div class="key wide">311 <svg width="36" height="36" viewBox="0 0 48 48">312 <circle cx="24" cy="20" r="8" fill="#E9F0EF"/>313 <path d="M12 40c3-6 21-6 24 0" stroke="#E9F0EF" stroke-width="3" fill="none" stroke-linecap="round"/>314 </svg>315 </div>316 <div class="key xwide"></div>317 <div class="key">.</div>318 <div class="key mint circle">319 <svg width="46" height="46" viewBox="0 0 48 48">320 <circle cx="21" cy="21" r="10" stroke="#133B30" stroke-width="3" fill="none"/>321 <path d="M30 30 L40 40" stroke="#133B30" stroke-width="4" stroke-linecap="round"/>322 </svg>323 </div>324 </div>325 </div>326 327 <!-- Gesture bar -->328 <div class="gesture"></div>329</div>330</body>331</html>