GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Search Products UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #F6F7F6;13 }14 15 /* Header */16 .header {17 background: #6C9746; /* green */18 color: #fff;19 width: 100%;20 height: 280px;21 box-shadow: 0 2px 0 rgba(0,0,0,0.08);22 }23 .status-bar {24 height: 80px;25 display: flex;26 align-items: center;27 padding: 0 30px;28 font-size: 30px;29 letter-spacing: 0.5px;30 }31 .status-icons {32 margin-left: auto;33 display: flex;34 align-items: center;35 gap: 26px;36 }37 .appbar {38 height: 200px;39 display: flex;40 align-items: center;41 padding: 0 30px;42 position: relative;43 }44 .title {45 font-size: 54px;46 font-weight: 700;47 margin-left: 30px;48 color: #fff;49 }50 .icon-btn {51 width: 84px;52 height: 84px;53 display: flex;54 align-items: center;55 justify-content: center;56 border-radius: 16px;57 }58 .icon-btn svg { fill: #fff; }59 60 /* Search bar */61 .search-wrap {62 position: relative;63 margin: 24px 30px 10px 30px;64 }65 .search-input {66 background: #fff;67 border-radius: 24px;68 height: 130px;69 display: flex;70 align-items: center;71 padding: 0 30px;72 box-shadow: 0 2px 6px rgba(0,0,0,0.06) inset;73 border: 1px solid #e5e5e5;74 }75 .search-input .placeholder {76 color: #8B8B8B;77 font-size: 38px;78 margin-left: 22px;79 flex: 1;80 }81 .search-input .right-icon {82 margin-left: auto;83 }84 85 /* Sections */86 .section {87 padding: 20px 30px;88 }89 .section-title {90 display: flex;91 align-items: center;92 gap: 18px;93 font-size: 42px;94 color: #333;95 font-weight: 700;96 }97 .chips {98 margin-top: 18px;99 display: flex;100 flex-wrap: wrap;101 gap: 18px;102 }103 .chip {104 background: #EEEEEE;105 color: #333;106 font-size: 36px;107 padding: 20px 28px;108 border-radius: 20px;109 border: 1px solid #D9D9D9;110 }111 .divider {112 width: 100%;113 height: 14px;114 background: #ECECEC;115 }116 117 /* Banner */118 .banner {119 margin: 18px 0 0 0;120 width: 100%;121 height: 620px;122 display: flex;123 align-items: center;124 justify-content: center;125 background: #E0E0E0;126 border-top: 1px solid #BDBDBD;127 border-bottom: 1px solid #BDBDBD;128 color: #757575;129 font-size: 40px;130 text-align: center;131 }132 133 /* Keyboard */134 .keyboard {135 position: absolute;136 bottom: 0;137 left: 0;138 width: 1080px;139 height: 980px;140 background: #111214;141 color: #fff;142 box-shadow: 0 -4px 12px rgba(0,0,0,0.25);143 }144 .kbd-toolbar {145 height: 110px;146 display: flex;147 align-items: center;148 padding: 0 34px;149 gap: 38px;150 }151 .kbd-tool {152 width: 92px;153 height: 92px;154 background: #1F2023;155 border-radius: 22px;156 display: flex;157 align-items: center;158 justify-content: center;159 border: 1px solid #2B2C2F;160 font-size: 34px;161 }162 .keys {163 padding: 12px 24px 0 24px;164 display: grid;165 grid-template-columns: repeat(10, 1fr);166 grid-gap: 16px;167 }168 .key {169 height: 120px;170 background: #2C2D31;171 border-radius: 26px;172 display: flex;173 align-items: center;174 justify-content: center;175 border: 1px solid #3A3B3F;176 font-size: 44px;177 position: relative;178 }179 .key .sub {180 position: absolute;181 top: 10px; left: 16px;182 font-size: 24px;183 color: #9FA1A6;184 }185 .row-2, .row-3, .row-4 {186 display: flex;187 gap: 16px;188 padding: 12px 24px 0 24px;189 }190 .row-2 .key, .row-3 .key { flex: 1; }191 .backspace {192 width: 160px;193 }194 .space { flex: 3; }195 .key.small { width: 150px; }196 .key.medium { width: 190px; }197 .enter {198 width: 170px;199 background: #3A3B3F;200 }201 .home-indicator {202 position: absolute;203 bottom: 22px;204 left: 50%;205 transform: translateX(-50%);206 width: 540px;207 height: 12px;208 background: #D1D1D1;209 border-radius: 6px;210 }211 /* Icons simple */212 .icon { width: 44px; height: 44px; }213</style>214</head>215<body>216<div id="render-target">217 218 <!-- Header -->219 <div class="header">220 <div class="status-bar">221 <div>4:41</div>222 <div class="status-icons">223 <!-- simple dots to mimic icons -->224 <svg class="icon" viewBox="0 0 24 24"><circle cx="6" cy="12" r="3" fill="#fff"/><circle cx="12" cy="12" r="3" fill="#fff"/><circle cx="18" cy="12" r="3" fill="#fff"/></svg>225 <!-- WiFi -->226 <svg class="icon" viewBox="0 0 24 24"><path d="M2 9c5-5 15-5 20 0l-2 2c-4-4-12-4-16 0L2 9zm4 4c3-3 9-3 12 0l-2 2c-2-2-6-2-8 0l-2-2zm6 6l-3-3 3-3 3 3-3 3z" fill="#fff"/></svg>227 <!-- Battery -->228 <svg class="icon" viewBox="0 0 24 24"><rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/><rect x="4" y="8" width="14" height="8" fill="#fff"/><rect x="20" y="10" width="2" height="4" fill="#fff"/></svg>229 </div>230 </div>231 <div class="appbar">232 <div class="icon-btn">233 <!-- Back arrow -->234 <svg width="48" height="48" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>235 </div>236 <div class="title">Search Products</div>237 <div class="icon-btn" style="margin-left:auto;">238 <!-- Scanner icon -->239 <svg width="48" height="48" viewBox="0 0 24 24">240 <rect x="4" y="4" width="16" height="16" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/>241 <path d="M8 6v12M12 6v12M16 6v12" stroke="#fff" stroke-width="1.6"/>242 </svg>243 </div>244 </div>245 </div>246 247 <!-- Search bar -->248 <div class="search-wrap">249 <div class="search-input">250 <!-- Search icon -->251 <svg class="icon" viewBox="0 0 24 24">252 <circle cx="10" cy="10" r="6" stroke="#7C7C7C" stroke-width="2" fill="none"/>253 <path d="M15 15l6 6" stroke="#7C7C7C" stroke-width="2" />254 </svg>255 <div class="placeholder">Search 100000+ products</div>256 <div class="right-icon">257 <!-- Mic icon -->258 <svg class="icon" viewBox="0 0 24 24">259 <rect x="9" y="4" width="6" height="10" rx="3" fill="#7C7C7C"/>260 <path d="M6 10c0 4 12 4 12 0M12 18v2" stroke="#7C7C7C" stroke-width="2" fill="none" stroke-linecap="round"/>261 </svg>262 </div>263 </div>264 </div>265 266 <!-- Recent Searches -->267 <div class="section">268 <div class="section-title">269 <!-- Clock icon -->270 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="#555" stroke-width="2" fill="none"/><path d="M12 7v6l4 2" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/></svg>271 <span>Recent Searches</span>272 </div>273 <div class="chips" style="margin-top:22px;">274 <div class="chip">lean meat</div>275 </div>276 </div>277 278 <div class="divider"></div>279 280 <!-- Popular Searches -->281 <div class="section">282 <div class="section-title">283 <!-- Swirl/refresh icon -->284 <svg class="icon" viewBox="0 0 24 24"><path d="M12 5a7 7 0 1 1-7 7" stroke="#555" stroke-width="2" fill="none"/><path d="M5 5v5h5" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>285 <span>Popular Searches</span>286 </div>287 <div class="chips">288 <div class="chip">rice</div>289 <div class="chip">bread</div>290 <div class="chip">biscuits</div>291 <div class="chip">cheese</div>292 <div class="chip">vegetables</div>293 <div class="chip">mango</div>294 <div class="chip">tea</div>295 <div class="chip">namkeen</div>296 </div>297 </div>298 299 <!-- Banner -->300 <div class="banner">[IMG: Men's Den grooming products banner - Up to 50% OFF]</div>301 302 <!-- Keyboard overlay -->303 <div class="keyboard">304 <div class="kbd-toolbar">305 <div class="kbd-tool">⌁</div>306 <div class="kbd-tool">😊</div>307 <div class="kbd-tool">GIF</div>308 <div class="kbd-tool">309 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm7-3a7 7 0 1 1-14 0 7 7 0 0 1 14 0z" fill="#fff"/></svg>310 </div>311 <div class="kbd-tool">言</div>312 <div class="kbd-tool">🎨</div>313 <div class="kbd-tool">314 <svg width="34" height="34" viewBox="0 0 24 24"><rect x="9" y="3" width="6" height="11" rx="3" fill="#fff"/><path d="M6 10c0 4 12 4 12 0M12 18v3" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>315 </div>316 </div>317 318 <!-- Row 1 -->319 <div class="keys">320 <div class="key"><span class="sub">1</span>q</div>321 <div class="key"><span class="sub">2</span>w</div>322 <div class="key"><span class="sub">3</span>e</div>323 <div class="key"><span class="sub">4</span>r</div>324 <div class="key"><span class="sub">5</span>t</div>325 <div class="key"><span class="sub">6</span>y</div>326 <div class="key"><span class="sub">7</span>u</div>327 <div class="key"><span class="sub">8</span>i</div>328 <div class="key"><span class="sub">9</span>o</div>329 <div class="key"><span class="sub">0</span>p</div>330 </div>331 332 <!-- Row 2 -->333 <div class="row-2">334 <div class="key">a</div>335 <div class="key">s</div>336 <div class="key">d</div>337 <div class="key">f</div>338 <div class="key">g</div>339 <div class="key">h</div>340 <div class="key">j</div>341 <div class="key">k</div>342 <div class="key">l</div>343 </div>344 345 <!-- Row 3 -->346 <div class="row-3">347 <div class="key">z</div>348 <div class="key">x</div>349 <div class="key">c</div>350 <div class="key">v</div>351 <div class="key">b</div>352 <div class="key">n</div>353 <div class="key">m</div>354 <div class="key backspace">355 <svg width="48" height="48" viewBox="0 0 24 24">356 <path d="M3 12l6-6h10a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H9l-6-6z" fill="none" stroke="#fff" stroke-width="2"/>357 <path d="M13 9l4 4M17 9l-4 4" stroke="#fff" stroke-width="2"/>358 </svg>359 </div>360 </div>361 362 <!-- Row 4 -->363 <div class="row-4">364 <div class="key small">?123</div>365 <div class="key medium">,</div>366 <div class="key space"> </div>367 <div class="key medium">.</div>368 <div class="key enter">369 <svg width="40" height="40" viewBox="0 0 24 24">370 <circle cx="10" cy="10" r="6" stroke="#fff" stroke-width="2" fill="none"/>371 <path d="M15 15l6 6" stroke="#fff" stroke-width="2" />372 </svg>373 </div>374 </div>375 376 <div class="home-indicator"></div>377 </div>378 379</div>380</body>381</html>