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 UI Mock</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 border-radius: 18px;16 box-shadow: 0 10px 30px rgba(0,0,0,0.12);17 }18 19 /* Status bar */20 .status-bar {21 height: 90px;22 padding: 0 34px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 color: #000;27 font-size: 32px;28 }29 .status-left { display: flex; align-items: center; gap: 18px; }30 .status-right { display: flex; align-items: center; gap: 20px; font-size: 28px; color: #555; }31 .dot { width: 10px; height: 10px; background:#777; border-radius:50%; display:inline-block; }32 .battery {33 display:flex; align-items:center; gap:8px; color:#222; font-size:28px;34 }35 .battery .icon {36 width: 32px; height: 18px; border: 2px solid #333; border-radius: 4px; position: relative;37 }38 .battery .icon::after {39 content:''; position:absolute; right:-6px; top:5px; width:4px; height:8px; background:#333; border-radius:2px;40 }41 .battery .fill { width: 70%; height: 100%; background:#4CAF50; }42 43 /* Header search */44 .header {45 position: relative;46 padding: 10px 30px 20px 30px;47 }48 .back-btn {49 width: 60px; height: 60px; display:flex; align-items:center; justify-content:center; position:absolute; left:24px; top:24px;50 }51 .search-bar {52 margin: 10px 30px 0 100px;53 position: relative;54 }55 .search-pill {56 height: 100px;57 border: 3px solid #000;58 border-radius: 50px;59 background: #fff;60 display: flex;61 align-items: center;62 padding: 0 140px 0 30px;63 font-size: 34px;64 color: #6f6f6f;65 }66 .camera-btn {67 position: absolute;68 right: 120px;69 top: 18px;70 width: 64px; height: 64px;71 border-radius: 50%;72 border: 2px solid #000;73 display:flex; align-items:center; justify-content:center;74 }75 .search-action {76 position: absolute;77 right: 20px;78 top: 10px;79 width: 84px; height: 84px;80 border-radius: 42px;81 background:#000;82 display:flex; align-items:center; justify-content:center;83 }84 /* Section titles */85 .section { padding: 10px 34px; }86 .section h3 {87 margin: 24px 0 16px 0; font-size: 36px; color:#111; font-weight: 700;88 }89 .chips { display: flex; flex-wrap: wrap; gap: 16px; }90 .chip {91 background: #F5F5F5;92 border: 1px solid #E0E0E0;93 border-radius: 28px;94 padding: 14px 24px;95 font-size: 32px;96 color: #333;97 }98 .chip.small { font-size: 30px; }99 .trash {100 position: absolute; right: 34px; top: 12px; width: 50px; height: 50px; display:flex; align-items:center; justify-content:center; color:#888;101 }102 .subhead { position: relative; }103 /* Browsing history */104 .browse-header {105 display: flex; align-items: center; justify-content: space-between;106 font-size: 34px; color:#111; font-weight: 600; margin-top: 18px;107 }108 .products {109 display: flex;110 gap: 24px;111 padding: 18px 34px;112 overflow: hidden;113 }114 .card {115 width: 236px;116 }117 .card .img {118 width: 236px; height: 236px;119 background:#E0E0E0;120 border: 1px solid #BDBDBD;121 display:flex; align-items:center; justify-content:center;122 color:#757575; font-size: 24px; text-align:center; padding: 6px;123 }124 .price-row {125 display:flex; align-items:center; gap: 8px; margin-top: 10px;126 font-size: 28px; color:#111;127 }128 .sold { color:#777; font-size: 26px; }129 130 /* Keyboard mock */131 .keyboard {132 position: absolute;133 left: 0;134 bottom: 40px;135 width: 1080px;136 height: 920px;137 background: #101417;138 border-top-left-radius: 18px;139 border-top-right-radius: 18px;140 padding: 20px 24px;141 box-sizing: border-box;142 color: #e9ecef;143 }144 .kb-top {145 display:flex; align-items:center; gap: 28px; margin-bottom: 14px;146 }147 .kb-top .icon {148 width: 74px; height: 74px; border-radius: 18px; background:#1d2226; display:flex; align-items:center; justify-content:center; font-size: 28px;149 color:#cfd8dc;150 }151 .keys { display: grid; grid-template-columns: repeat(10, 1fr); gap: 16px; margin-top: 12px; }152 .key {153 height: 106px;154 background: #192025;155 border: 1px solid #222a30;156 border-radius: 18px;157 display:flex; align-items:center; justify-content:center;158 font-size: 40px; color:#e0e0e0;159 }160 .row2 { grid-template-columns: repeat(9, 1fr); }161 .row3 { grid-template-columns: repeat(7, 1fr); }162 .kb-bottom {163 display:flex; align-items:center; gap: 16px; margin-top: 18px;164 }165 .key-wide { flex: 1; height: 100px; background:#192025; border:1px solid #222a30; border-radius: 18px; display:flex; align-items:center; justify-content:center; font-size: 34px; color:#dfe5ea; }166 .action-left, .action-right {167 width: 140px; height: 100px; border-radius: 48px; display:flex; align-items:center; justify-content:center; font-size: 36px;168 }169 .action-left { background:#7FD1B9; color:#0a0f12; }170 .action-right { background:#7FD1B9; color:#0a0f12; }171 .home-indicator {172 position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);173 width: 400px; height: 10px; border-radius: 5px; background:#d0d0d0;174 }175 176 /* Simple icons */177 svg { display:block; }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">186 <div style="font-weight:600;">8:52</div>187 <span class="dot"></span>188 <span style="font-size:28px;">✉️</span>189 <span style="font-size:28px;">📧</span>190 <span style="font-size:28px;">⚠️</span>191 <span class="dot"></span>192 </div>193 <div class="status-right">194 <div class="battery">195 <div class="icon"><div class="fill"></div></div>196 <div>95%</div>197 </div>198 </div>199 </div>200 201 <!-- Search header -->202 <div class="header">203 <div class="back-btn">204 <svg width="36" height="36" viewBox="0 0 24 24">205 <path d="M15 19L8 12l7-7" stroke="#000" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>206 </svg>207 </div>208 <div class="search-bar">209 <div class="search-pill">men dress shoes clearance</div>210 <div class="camera-btn">211 <svg width="32" height="32" viewBox="0 0 24 24">212 <path d="M7 7h10l2 3v7H5V10z" stroke="#000" stroke-width="2" fill="none"/>213 <circle cx="12" cy="12" r="3" stroke="#000" stroke-width="2" fill="none"/>214 </svg>215 </div>216 <div class="search-action">217 <svg width="40" height="40" viewBox="0 0 24 24">218 <circle cx="11" cy="11" r="7" stroke="#fff" stroke-width="2" fill="none"/>219 <path d="M16.5 16.5L21 21" stroke="#fff" stroke-width="2" stroke-linecap="round"/>220 </svg>221 </div>222 </div>223 </div>224 225 <!-- Suggested searches -->226 <div class="section">227 <h3>Suggested searches</h3>228 <div class="chips">229 <div class="chip">white t shirt</div>230 <div class="chip">lights</div>231 <div class="chip">dress shoes</div>232 <div class="chip">More ▾</div>233 </div>234 </div>235 236 <!-- Recently searched -->237 <div class="section subhead">238 <h3>Recently searched</h3>239 <div class="trash">240 <svg width="30" height="30" viewBox="0 0 24 24">241 <path d="M4 7h16M9 7V5h6v2M6 7l1 12h10l1-12" stroke="#999" stroke-width="2" fill="none" stroke-linecap="round"/>242 </svg>243 </div>244 <div class="chips">245 <div class="chip">mens sports shoes</div>246 <div class="chip">Clohco shoes</div>247 <div class="chip">Clohco shoes.</div>248 <div class="chip">Nike shoes</div>249 <div class="chip">formal shoes</div>250 <div class="chip">spoke wrench</div>251 <div class="chip">More ▾</div>252 </div>253 </div>254 255 <!-- Popular right now -->256 <div class="section">257 <h3>Popular right now</h3>258 <div class="chips">259 <div class="chip">🔥 men shoes</div>260 <div class="chip">🔥 men dress shoes</div>261 <div class="chip">badminton racket</div>262 <div class="chip">t shirts</div>263 <div class="chip">kids shoes</div>264 <div class="chip">mens pants</div>265 <div class="chip">More ▾</div>266 </div>267 </div>268 269 <!-- Browsing history recommendation -->270 <div class="section">271 <div class="browse-header">272 <div>Browsing history recommendation</div>273 <div>›</div>274 </div>275 <div class="products">276 <div class="card">277 <div class="img">[IMG: Badminton rackets]</div>278 <div class="price-row">279 <div style="font-weight:700;">$92.48</div>280 <div class="sold">9 sold</div>281 </div>282 </div>283 <div class="card">284 <div class="img">[IMG: Black dress shoe]</div>285 <div class="price-row">286 <div style="font-weight:700;">$18.97</div>287 <div class="sold">1K+ sold</div>288 </div>289 </div>290 <div class="card">291 <div class="img">[IMG: Under-cabinet light]</div>292 <div class="price-row">293 <div style="font-weight:700;">$4.28</div>294 <div class="sold">100K+ sold</div>295 </div>296 </div>297 <div class="card">298 <div class="img">[IMG: White t-shirts pack]</div>299 <div class="price-row">300 <div style="font-weight:700;">$10.18</div>301 <div class="sold">38K+ sold</div>302 </div>303 </div>304 </div>305 </div>306 307 <!-- Keyboard mock -->308 <div class="keyboard">309 <div class="kb-top">310 <div class="icon">⌗</div>311 <div class="icon">🙂</div>312 <div class="icon">GIF</div>313 <div class="icon">G↔️</div>314 <div class="icon">🎨</div>315 <div class="icon">🎤</div>316 </div>317 318 <div class="keys">319 <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>320 </div>321 <div class="keys row2">322 <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>323 </div>324 <div class="keys row3">325 <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>326 </div>327 328 <div class="kb-bottom">329 <div class="action-left">?123</div>330 <div class="key-wide">,</div>331 <div class="key-wide">🙂</div>332 <div class="key-wide">space</div>333 <div class="key-wide">.</div>334 <div class="action-right">335 <svg width="30" height="30" viewBox="0 0 24 24">336 <circle cx="11" cy="11" r="7" stroke="#0a0f12" stroke-width="2" fill="none"/>337 <path d="M16.5 16.5L21 21" stroke="#0a0f12" stroke-width="2" stroke-linecap="round"/>338 </svg>339 </div>340 </div>341 </div>342 343 <div class="home-indicator"></div>344</div>345</body>346</html>