GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Grocery Search UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 box-shadow: 0 0 0 1px #ddd;14 }15 16 /* Status bar */17 .status-bar {18 height: 80px;19 padding: 0 32px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 color: #111;24 font-weight: 600;25 font-size: 32px;26 }27 .status-icons {28 display: flex;29 gap: 18px;30 align-items: center;31 color: #333;32 font-size: 26px;33 }34 .dot { width: 8px; height: 8px; background:#333; border-radius:50%; display:inline-block; }35 36 /* Search bar */37 .search-container {38 padding: 16px 24px;39 }40 .search-row {41 display: flex;42 align-items: center;43 gap: 16px;44 }45 .back-btn {46 width: 72px;47 height: 72px;48 border-radius: 36px;49 background: #ffffff;50 border: 1px solid #e0e0e0;51 display: flex;52 align-items: center;53 justify-content: center;54 }55 .back-btn svg { width: 34px; height: 34px; fill: none; stroke: #111; stroke-width: 4; }56 .search-field {57 flex: 1;58 background: #f3f4f6;59 border-radius: 36px;60 height: 88px;61 display: flex;62 align-items: center;63 padding: 0 24px;64 font-size: 34px;65 color: #222;66 }67 .search-text { flex: 1; color:#222; }68 .icon-btn {69 width: 60px;70 height: 60px;71 border-radius: 30px;72 display: flex;73 align-items: center;74 justify-content: center;75 color:#777;76 }77 .icon-btn svg { width: 34px; height: 34px; fill: none; stroke: #777; stroke-width: 4; }78 79 /* Sheet overlay content */80 .sheet {81 margin-top: 8px;82 padding: 16px 24px 180px;83 }84 .results-text {85 font-size: 34px;86 font-weight: 700;87 color: #222;88 margin: 16px 0 12px;89 }90 91 /* Close circle floating */92 .close-fab {93 position: absolute;94 top: 270px;95 left: 50%;96 transform: translateX(-50%);97 width: 110px;98 height: 110px;99 border-radius: 55px;100 background: #1f1f1f;101 display: flex;102 align-items: center;103 justify-content: center;104 color: #fff;105 box-shadow: 0 4px 12px rgba(0,0,0,0.25);106 }107 .close-fab svg { width: 44px; height: 44px; stroke: #fff; stroke-width: 6; }108 109 /* Brand strip */110 .brand-strip {111 margin-top: 140px;112 background: #fafafa;113 border: 1px solid #e6e6e6;114 border-radius: 28px;115 padding: 40px 24px;116 }117 .brand-logos {118 display: flex;119 align-items: center;120 justify-content: space-around;121 gap: 24px;122 margin-bottom: 24px;123 }124 .brand-logo {125 width: 180px;126 height: 180px;127 border-radius: 90px;128 background: #E0E0E0;129 border: 1px solid #BDBDBD;130 display: flex;131 align-items: center;132 justify-content: center;133 color: #757575;134 text-align: center;135 font-size: 26px;136 padding: 12px;137 }138 .brand-names {139 display: flex;140 justify-content: space-around;141 color: #222;142 font-size: 32px;143 font-weight: 600;144 padding: 0 24px;145 }146 147 /* Product details */148 .section-title {149 font-size: 46px;150 font-weight: 800;151 color: #222;152 margin: 36px 0 16px;153 }154 .description {155 font-size: 30px;156 line-height: 1.5;157 color: #333;158 }159 .more-details {160 display: inline-flex;161 align-items: center;162 gap: 12px;163 color: #1a9a4b;164 font-size: 32px;165 font-weight: 700;166 margin-top: 20px;167 }168 .more-details svg { width: 24px; height: 24px; fill:#1a9a4b; }169 170 /* People also bought */171 .pab-title {172 font-size: 46px;173 font-weight: 800;174 color: #222;175 margin: 40px 0 16px;176 }177 .cards-row {178 display: flex;179 gap: 24px;180 overflow: hidden;181 }182 .card {183 width: 332px;184 border: 1px solid #e5e5e5;185 border-radius: 28px;186 padding: 18px;187 box-sizing: border-box;188 }189 .card-img {190 width: 100%;191 height: 340px;192 background: #E0E0E0;193 border: 1px solid #BDBDBD;194 border-radius: 18px;195 display:flex;196 align-items:center;197 justify-content:center;198 color:#757575;199 font-size: 28px;200 text-align:center;201 position: relative;202 }203 .time-chip {204 position: absolute;205 bottom: -18px;206 left: 12px;207 background: #f1f7ef;208 color: #1a9a4b;209 font-weight: 700;210 border: 1px solid #d7ead2;211 border-radius: 26px;212 padding: 8px 16px;213 font-size: 26px;214 display: inline-flex;215 gap: 8px;216 align-items: center;217 }218 .time-chip svg { width: 22px; height: 22px; stroke:#1a9a4b; stroke-width:4; }219 .card-body {220 margin-top: 40px;221 }222 .card-title {223 font-size: 34px;224 color: #222;225 font-weight: 700;226 line-height: 1.25;227 }228 .sub {229 font-size: 30px;230 color: #6b7280;231 margin-top: 4px;232 }233 .price-row {234 margin-top: 16px;235 display: flex;236 align-items: center;237 justify-content: space-between;238 }239 .price { font-size: 36px; color:#111; font-weight:700; }240 .strike { font-size: 26px; color:#888; text-decoration: line-through; margin-left: 8px; }241 .add-btn {242 background: #2fb14b;243 color: #fff;244 font-weight: 800;245 border-radius: 18px;246 padding: 16px 40px;247 font-size: 32px;248 border: none;249 }250 251 /* Bottom sticky bar */252 .bottom-bar {253 position: absolute;254 bottom: 0;255 left: 0;256 right: 0;257 height: 156px;258 border-top: 1px solid #e6e6e6;259 background: #ffffff;260 display: flex;261 align-items: center;262 justify-content: space-between;263 padding: 0 28px;264 }265 .bottom-info {266 font-size: 36px;267 color:#111;268 display: flex;269 gap: 24px;270 align-items: baseline;271 }272 .bottom-info .mrp { color:#555; }273 .cta {274 background: #2fb14b;275 color: #fff;276 font-weight: 800;277 font-size: 42px;278 padding: 30px 64px;279 border-radius: 30px;280 }281</style>282</head>283<body>284<div id="render-target">285 286 <!-- Status bar -->287 <div class="status-bar">288 <div>11:25</div>289 <div class="status-icons">290 <span class="dot"></span>291 <span class="dot"></span>292 <span class="dot"></span>293 <span>⚡</span>294 <span>📶</span>295 </div>296 </div>297 298 <!-- Search bar -->299 <div class="search-container">300 <div class="search-row">301 <div class="back-btn" aria-label="Back">302 <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></svg>303 </div>304 <div class="search-field">305 <div class="search-text">Saffola Classic Masala oats</div>306 <div class="icon-btn" title="Clear">307 <svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg>308 </div>309 <div class="icon-btn" title="Voice">310 <svg viewBox="0 0 24 24"><path d="M12 4c2 0 3 1 3 3v6c0 2-1 3-3 3s-3-1-3-3V7c0-2 1-3 3-3zm0 12v4m-4 0h8"/></svg>311 </div>312 </div>313 </div>314 </div>315 316 <!-- Floating close button -->317 <div class="close-fab">318 <svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg>319 </div>320 321 <!-- Sheet Content -->322 <div class="sheet">323 <div class="results-text">Showing results for "saffola classic masala oats"</div>324 325 <div class="brand-strip">326 <div class="brand-logos">327 <div class="brand-logo">[IMG: Bagrry's Logo]</div>328 <div class="brand-logo">[IMG: DiSano Logo]</div>329 <div class="brand-logo">[IMG: Haldiram's Logo]</div>330 <div class="brand-logo">[IMG: Kellogg's Logo]</div>331 </div>332 <div class="brand-names">333 <div>Bagrry's</div>334 <div>Disano</div>335 <div>Haldiram's</div>336 <div>Kellogg's</div>337 </div>338 </div>339 340 <div class="section-title">Product Details</div>341 <div class="description">342 <div style="font-weight:700; margin-bottom:8px;">Description</div>343 Saffola Masala Oats is made with wholegrain oats, real vegetables & a tasty mix of authentic desi spices which provides a range of delightful flavours making for a perfect evening snack.344 It is ready to eat in just 3 minutes - super convenient to make, super tasty to eat, and super hard to resist! You can enjoy this delicious bowl as it is or with crunchy topping like namkeen or crushed papad.345 </div>346 <div class="more-details">View more details347 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" /></svg>348 </div>349 350 <div class="pab-title">People also bought</div>351 352 <div class="cards-row">353 <!-- Card 1 -->354 <div class="card">355 <div class="card-img">356 [IMG: Amul Gold Milk Pack]357 <div class="time-chip">358 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="none"/><path d="M12 8v4l3 2"/></svg>359 9 MINS360 </div>361 </div>362 <div class="card-body">363 <div class="card-title">Amul Gold Full Cream Fresh Milk</div>364 <div class="sub">500 ml</div>365 <div class="price-row">366 <div class="price">₹33</div>367 <button class="add-btn">ADD</button>368 </div>369 </div>370 </div>371 372 <!-- Card 2 -->373 <div class="card">374 <div class="card-img">375 [IMG: Rajdhani Dalia Pack]376 <div class="time-chip">377 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="none"/><path d="M12 8v4l3 2"/></svg>378 9 MINS379 </div>380 </div>381 <div class="card-body">382 <div class="card-title">Rajdhani Daliya</div>383 <div class="sub">500 g</div>384 <div class="price-row">385 <div>386 <span class="price">₹40</span>387 <span class="strike">₹45</span>388 </div>389 <button class="add-btn">ADD</button>390 </div>391 </div>392 </div>393 394 <!-- Card 3 -->395 <div class="card">396 <div class="card-img">397 [IMG: Harvest Gold Brown Bread]398 <div class="time-chip">399 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="none"/><path d="M12 8v4l3 2"/></svg>400 9 MINS401 </div>402 </div>403 <div class="card-body">404 <div class="card-title">Harvest Gold Healthy Brown Bread</div>405 <div class="sub">400 g</div>406 <div class="price-row">407 <div class="price">₹50</div>408 <button class="add-btn">ADD</button>409 </div>410 </div>411 </div>412 </div>413 </div>414 415 <!-- Bottom bar -->416 <div class="bottom-bar">417 <div class="bottom-info">418 <span>38 g</span>419 <span class="mrp">MRP ₹17</span>420 </div>421 <div class="cta">Add to cart</div>422 </div>423 424</div>425</body>426</html>