GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Search UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #ffffff;14 }15 16 /* Status bar */17 .status-bar {18 height: 120px;19 padding: 0 36px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 color: #222;24 font-weight: 600;25 font-size: 36px;26 }27 .status-right {28 display: flex;29 align-items: center;30 gap: 24px;31 }32 .status-dot { width: 16px; height: 16px; background:#9E9E9E; border-radius:50%; display:inline-block; }33 34 /* Search bar */35 .search-wrap { padding: 12px 36px 0 36px; }36 .search-bar {37 height: 110px;38 background: #F1F3F4;39 border-radius: 28px;40 display: flex;41 align-items: center;42 padding: 0 30px;43 gap: 24px;44 color: #6b6b6b;45 }46 .search-placeholder {47 flex: 1;48 font-size: 38px;49 color: #6b6b6b;50 }51 .icon-btn {52 width: 72px;53 height: 72px;54 border-radius: 36px;55 background: #ffffff;56 display: flex;57 align-items: center;58 justify-content: center;59 box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);60 }61 62 /* Section titles */63 .section-header {64 margin: 36px 36px 18px 36px;65 display: flex;66 align-items: center;67 justify-content: space-between;68 }69 .section-header .title {70 font-size: 48px;71 font-weight: 800;72 color: #222;73 }74 .section-header .action {75 font-size: 40px;76 color: #2E7D32;77 font-weight: 700;78 }79 80 /* Chips */81 .chips { padding: 0 36px; display: flex; gap: 20px; flex-wrap: wrap; }82 .chip {83 background: #F5F7FB;84 border: 1px solid #E5EAF0;85 color: #333;86 font-size: 34px;87 padding: 20px 28px;88 border-radius: 40px;89 }90 91 /* Promo banner */92 .promo {93 margin: 30px 36px;94 background: #F4CF5E;95 border-radius: 36px;96 padding: 36px;97 display: grid;98 grid-template-columns: 1.2fr 1fr;99 align-items: center;100 gap: 24px;101 }102 .promo .headline {103 font-size: 48px;104 font-weight: 800;105 color: #222;106 line-height: 1.1;107 margin-bottom: 18px;108 }109 .promo .sub {110 font-size: 36px;111 color: #333;112 margin-bottom: 26px;113 }114 .promo .cta {115 background: #222;116 color: #fff;117 padding: 24px 34px;118 border-radius: 18px;119 font-size: 36px;120 display: inline-block;121 font-weight: 700;122 }123 .promo .img {124 width: 100%;125 height: 240px;126 background: #E0E0E0;127 border: 1px solid #BDBDBD;128 border-radius: 18px;129 display: flex;130 align-items: center;131 justify-content: center;132 color: #757575;133 text-align: center;134 padding: 16px;135 }136 137 /* Trending */138 .trend-title { margin: 26px 36px 10px 36px; font-size: 48px; font-weight: 900; color: #1a1a1a; }139 .trend-chips { padding: 10px 36px 0 36px; display: flex; flex-wrap: wrap; gap: 24px 24px; }140 .trend-chip {141 display: flex;142 align-items: center;143 gap: 22px;144 background: #EEF4FF;145 border: 1px solid #D7E3FF;146 color: #333;147 padding: 18px 26px;148 border-radius: 44px;149 font-size: 36px;150 }151 .trend-chip .thumb {152 width: 74px;153 height: 74px;154 background: #E0E0E0;155 border: 1px solid #BDBDBD;156 border-radius: 50%;157 display: flex;158 align-items: center;159 justify-content: center;160 color: #757575;161 font-size: 20px;162 }163 164 /* Keyboard mock */165 .keyboard {166 position: absolute;167 left: 0;168 right: 0;169 bottom: 70px;170 height: 860px;171 background: #101315;172 border-top-left-radius: 28px;173 border-top-right-radius: 28px;174 padding: 22px 28px;175 box-sizing: border-box;176 }177 .kb-top-icons {178 display: flex;179 align-items: center;180 gap: 36px;181 margin-bottom: 16px;182 }183 .kb-circle {184 width: 72px; height: 72px; border-radius: 36px; background: #1C1F22;185 display:flex; align-items:center; justify-content:center; color:#d7d7d7; font-size:26px;186 border: 1px solid #2a2e32;187 }188 .kb-rows { display: grid; grid-template-rows: repeat(4, 1fr); gap: 18px; margin-top: 12px; }189 .kb-row { display: flex; gap: 12px; }190 .key {191 flex: 1;192 height: 120px;193 background: #1A1D20;194 border-radius: 20px;195 color: #eaeaea;196 display: flex;197 align-items: center;198 justify-content: center;199 font-size: 42px;200 border: 1px solid #262a2e;201 }202 .key.wide { flex: 1.5; }203 .key.space { flex: 4; }204 .key.small { flex: 0.9; }205 206 /* Gesture bar */207 .gesture {208 position: absolute;209 bottom: 18px;210 left: 50%;211 transform: translateX(-50%);212 width: 300px;213 height: 12px;214 background: #DADADA;215 border-radius: 12px;216 opacity: 0.8;217 }218</style>219</head>220<body>221<div id="render-target">222 223 <!-- Status bar -->224 <div class="status-bar">225 <div>8:40</div>226 <div class="status-right">227 <span class="status-dot"></span>228 <span class="status-dot"></span>229 <span class="status-dot"></span>230 <!-- WiFi -->231 <svg width="42" height="42" viewBox="0 0 24 24">232 <path d="M2 8c5-4 15-4 20 0" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>233 <path d="M5 12c3-3 11-3 14 0" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>234 <path d="M8 16c2-2 6-2 8 0" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>235 <circle cx="12" cy="19" r="1.5" fill="#444"/>236 </svg>237 <!-- Battery -->238 <svg width="50" height="42" viewBox="0 0 28 18">239 <rect x="1" y="2" width="22" height="14" rx="2" stroke="#444" stroke-width="2" fill="none"/>240 <rect x="24" y="6" width="3" height="6" rx="1" fill="#444"/>241 <rect x="3" y="4" width="14" height="10" fill="#444"/>242 </svg>243 </div>244 </div>245 246 <!-- Search bar -->247 <div class="search-wrap">248 <div class="search-bar">249 <!-- Back arrow -->250 <svg width="54" height="54" viewBox="0 0 24 24">251 <path d="M15 6l-6 6 6 6" stroke="#6b6b6b" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>252 </svg>253 <div class="search-placeholder">Search for atta, dal, coke and more</div>254 <div class="icon-btn">255 <svg width="32" height="32" viewBox="0 0 24 24">256 <rect x="9" y="4" width="6" height="10" rx="3" fill="#616161"/>257 <path d="M12 14v4" stroke="#616161" stroke-width="2" stroke-linecap="round"/>258 <path d="M8 18h8" stroke="#616161" stroke-width="2" stroke-linecap="round"/>259 </svg>260 </div>261 </div>262 </div>263 264 <!-- Recent searches -->265 <div class="section-header">266 <div class="title">Recent searches</div>267 <div class="action">clear</div>268 </div>269 <div class="chips">270 <div class="chip">sundrop peanut butter</div>271 <div class="chip">tata salt</div>272 </div>273 274 <!-- Promo banner -->275 <div class="promo">276 <div>277 <div class="headline">Lowest prices.<br>Fastest delivery.</div>278 <div class="sub">Stock up for July!</div>279 <div class="cta">Shop now</div>280 </div>281 <div class="img">[IMG: Housefull Sale - Groceries banner]</div>282 </div>283 284 <!-- Trending now -->285 <div class="trend-title">#trendingnow</div>286 <div class="trend-chips">287 <div class="trend-chip">288 <div class="thumb">[IMG]</div><div>sugar</div>289 </div>290 <div class="trend-chip">291 <div class="thumb">[IMG]</div><div>atta</div>292 </div>293 <div class="trend-chip">294 <div class="thumb">[IMG]</div><div>tea</div>295 </div>296 <div class="trend-chip">297 <div class="thumb">[IMG]</div><div>ghee</div>298 </div>299 <div class="trend-chip">300 <div class="thumb">[IMG]</div><div>mustard oil</div>301 </div>302 <div class="trend-chip">303 <div class="thumb">[IMG]</div><div>salt</div>304 </div>305 <div class="trend-chip">306 <div class="thumb">[IMG]</div><div>biscuit</div>307 </div>308 <div class="trend-chip">309 <div class="thumb">[IMG]</div><div>dal</div>310 </div>311 <div class="trend-chip">312 <div class="thumb">[IMG]</div><div>detergent powder</div>313 </div>314 <div class="trend-chip">315 <div class="thumb">[IMG]</div><div>chocolate</div>316 </div>317 </div>318 319 <!-- Keyboard mock -->320 <div class="keyboard">321 <div class="kb-top-icons">322 <div class="kb-circle">▦</div>323 <div class="kb-circle">😊</div>324 <div class="kb-circle">GIF</div>325 <div class="kb-circle">⚙</div>326 <div class="kb-circle">Gx</div>327 <div class="kb-circle">🎨</div>328 <div class="kb-circle">🎤</div>329 </div>330 331 <div class="kb-rows">332 <div class="kb-row">333 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div>334 <div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div>335 <div class="key">o</div><div class="key">p</div>336 </div>337 <div class="kb-row">338 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div>339 <div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div>340 <div class="key">l</div>341 </div>342 <div class="kb-row">343 <div class="key small">⇧</div><div class="key">z</div><div class="key">x</div><div class="key">c</div>344 <div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>345 <div class="key wide">⌫</div>346 </div>347 <div class="kb-row">348 <div class="key small">?123</div>349 <div class="key small">,</div>350 <div class="key small">☺</div>351 <div class="key space">space</div>352 <div class="key small">.</div>353 <div class="key wide">✓</div>354 </div>355 </div>356 </div>357 358 <div class="gesture"></div>359</div>360</body>361</html>