GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Sundrop Peanut Butter - UI Mock</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 position: relative;9 width: 1080px;10 height: 2400px;11 overflow: hidden;12 background: #ffffff;13 box-shadow: 0 2px 12px rgba(0,0,0,0.15);14 border-radius: 0;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 110px;24 background: #f9f9fb;25 display: flex;26 align-items: center;27 padding: 0 36px;28 color: #111;29 font-weight: 600;30 font-size: 40px;31 }32 .status-icons {33 margin-left: auto;34 display: flex;35 align-items: center;36 gap: 22px;37 }38 .status-dot {39 width: 22px; height: 22px; background: #222; border-radius: 50%;40 }41 .status-square { width: 28px; height: 28px; background: #222; border-radius: 6px; }42 .status-wifi, .status-battery {43 width: 46px; height: 28px; border: 3px solid #222; border-radius: 6px; position: relative;44 }45 .status-battery::after {46 content: ""; position: absolute; right: -10px; top: 8px; width: 8px; height: 12px; background: #222; border-radius: 2px;47 }48 49 /* Top search bar row */50 .search-row {51 position: absolute;52 top: 120px;53 left: 0;54 width: 1080px;55 padding: 26px 32px;56 display: flex;57 align-items: center;58 gap: 24px;59 }60 .icon-btn {61 width: 72px; height: 72px; border-radius: 36px; background: #ffffff; border: 1px solid #e0e0e0;62 display: flex; align-items: center; justify-content: center;63 }64 .search-field {65 flex: 1;66 height: 92px;67 border-radius: 52px;68 background: #f2f3f5;69 border: 1px solid #e5e6ea;70 display: flex;71 align-items: center;72 padding: 0 28px;73 gap: 20px;74 }75 .search-text {76 flex: 1;77 font-size: 38px;78 color: #222;79 }80 .search-actions {81 display: flex; align-items: center; gap: 20px;82 }83 .round-icon {84 width: 58px; height: 58px; border-radius: 50%; background: #ffffff; border: 1px solid #d7d7db; display: flex; align-items: center; justify-content: center;85 }86 87 .subheading {88 position: absolute;89 top: 240px;90 left: 32px;91 font-size: 40px;92 color: #333;93 font-weight: 700;94 }95 96 /* Bottom sheet product panel */97 .sheet {98 position: absolute;99 left: 0;100 top: 300px;101 width: 1080px;102 height: 1900px;103 background: #ffffff;104 border-top-left-radius: 36px;105 border-top-right-radius: 36px;106 box-shadow: 0 -6px 18px rgba(0,0,0,0.08);107 padding: 40px 36px 180px;108 }109 110 .close-fab {111 position: absolute;112 top: 248px;113 left: 50%;114 transform: translateX(-50%);115 width: 120px; height: 120px; border-radius: 60px;116 background: #191919;117 box-shadow: 0 6px 16px rgba(0,0,0,0.25);118 display: flex; align-items: center; justify-content: center;119 z-index: 3;120 }121 .close-fab span { color: #fff; font-size: 72px; line-height: 0; }122 123 .label-green {124 width: 360px;125 height: 70px;126 border-radius: 12px;127 background: #25a55b;128 color: #fff;129 font-weight: 800;130 letter-spacing: 0.3px;131 display: flex; align-items: center; justify-content: center;132 font-size: 36px;133 margin: 20px auto 26px;134 }135 136 .image-box {137 width: 820px;138 height: 640px;139 margin: 0 auto;140 background: #E0E0E0;141 border: 1px solid #BDBDBD;142 display: flex; align-items: center; justify-content: center;143 color: #757575; font-size: 34px; text-align: center; padding: 18px;144 }145 146 .dots {147 width: 1080px;148 display: flex; gap: 16px; justify-content: center; align-items: center;149 margin-top: 26px;150 }151 .dot { width: 18px; height: 18px; border-radius: 50%; background: #c9c9cf; }152 .dot.active { background: #6f7480; }153 154 .title-row {155 margin-top: 30px;156 display: flex; align-items: center;157 }158 .product-title {159 font-size: 64px; font-weight: 800; color: #212121; flex: 1;160 }161 .share-circle {162 width: 96px; height: 96px; border-radius: 48px; border: 1px solid #e3e3e8; display: flex; align-items: center; justify-content: center;163 }164 165 .badge-row {166 margin-top: 18px; display: flex; align-items: center; gap: 18px; color: #394a5d;167 }168 .time-pill {169 display: inline-flex; align-items: center; gap: 12px; background: #f1f4f7; color: #1d2939; border-radius: 24px; padding: 10px 16px; font-weight: 700; font-size: 32px;170 }171 172 .link {173 margin-top: 24px; color: #1f8b2f; font-size: 40px; font-weight: 700;174 }175 176 .weight-price {177 margin-top: 30px; font-size: 42px; color: #222; display: flex; gap: 26px; align-items: baseline;178 }179 .price { font-size: 56px; font-weight: 800; color: #000; }180 .strike { color: #8a8f98; text-decoration: line-through; margin-left: 12px; font-weight: 700; }181 182 .section-title {183 margin-top: 56px; font-size: 56px; font-weight: 800; color: #1c2430;184 }185 186 .cards {187 margin-top: 24px; display: flex; gap: 24px;188 }189 .card {190 width: 330px; height: 520px; border: 1px solid #e5e6ea; border-radius: 28px; background: #fff; padding: 18px; position: relative;191 }192 .discount-badge {193 position: absolute; top: 18px; left: 18px; background: #1e88e5; color: #fff; font-weight: 800; font-size: 30px; padding: 8px 14px; border-radius: 20px;194 }195 .product-img {196 width: 100%; height: 360px; background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px;197 border-radius: 16px;198 }199 .card-caption {200 position: absolute; bottom: 84px; left: 18px; right: 18px; font-size: 36px; color: #222; font-weight: 700;201 }202 .card-footer {203 position: absolute; bottom: 22px; left: 18px; right: 18px; display: flex; align-items: baseline; gap: 12px; font-size: 36px; color: #222;204 }205 .card-price { font-size: 44px; font-weight: 800; }206 .card-strike { color: #8a8f98; text-decoration: line-through; }207 208 .add-to-cart {209 position: absolute;210 right: 36px;211 bottom: 40px;212 width: 440px;213 height: 120px;214 background: #2fa64a;215 color: #ffffff;216 border-radius: 24px;217 display: flex; align-items: center; justify-content: center;218 font-size: 46px; font-weight: 800;219 box-shadow: 0 8px 20px rgba(47,166,74,0.35);220 }221 222 /* Bottom navigation handle */223 .bottom-safe {224 position: absolute;225 left: 0;226 bottom: 0;227 width: 1080px;228 height: 90px;229 background: #0c0c0c;230 display: flex; align-items: center; justify-content: center;231 }232 .home-pill {233 width: 480px; height: 18px; background: #1f1f1f; border-radius: 12px;234 }235 236 /* Simple SVG icons styles override */237 svg { display: block; }238</style>239</head>240<body>241<div id="render-target">242 243 <!-- Status bar -->244 <div class="status-bar">245 8:44246 <div class="status-icons">247 <div class="status-dot"></div>248 <div class="status-square"></div>249 <div class="status-square"></div>250 <div class="status-wifi"></div>251 <div class="status-battery"></div>252 </div>253 </div>254 255 <!-- Search row -->256 <div class="search-row">257 <div class="icon-btn">258 <!-- Back arrow -->259 <svg width="42" height="42" viewBox="0 0 24 24">260 <path d="M15 5l-7 7 7 7" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>261 </svg>262 </div>263 264 <div class="search-field">265 <div class="search-text">sundrop peanut butter</div>266 <div class="search-actions">267 <div class="round-icon">268 <!-- Clear X -->269 <svg width="28" height="28" viewBox="0 0 24 24">270 <path d="M6 6l12 12M18 6L6 18" stroke="#444" stroke-width="2" stroke-linecap="round"/>271 </svg>272 </div>273 <div class="round-icon">274 <!-- Mic icon -->275 <svg width="28" height="28" viewBox="0 0 24 24">276 <rect x="8" y="4" width="8" height="12" rx="4" fill="#444"/>277 <path d="M12 16v4M8 20h8" stroke="#444" stroke-width="2" stroke-linecap="round"/>278 </svg>279 </div>280 </div>281 </div>282 </div>283 284 <div class="subheading">Showing results for "sundrop peanut butter"</div>285 286 <!-- Floating close button -->287 <div class="close-fab"><span>×</span></div>288 289 <!-- Bottom sheet panel -->290 <div class="sheet">291 292 <div class="label-green">Crunchy - 924g</div>293 294 <div class="image-box">[IMG: Nutritional Information Chart]</div>295 296 <div class="dots">297 <div class="dot active"></div>298 <div class="dot"></div>299 <div class="dot"></div>300 <div class="dot"></div>301 <div class="dot"></div>302 </div>303 304 <div class="title-row">305 <div class="product-title">Sundrop Crunchy Peanut Butter</div>306 <div class="share-circle">307 <!-- Share icon -->308 <svg width="36" height="36" viewBox="0 0 24 24">309 <path d="M18 8l-6-4v8l6-4zM6 6v12h2" stroke="#3e4f61" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>310 </svg>311 </div>312 </div>313 314 <div class="badge-row">315 <div class="time-pill">316 <!-- clock -->317 <svg width="28" height="28" viewBox="0 0 24 24">318 <circle cx="12" cy="12" r="9" stroke="#394a5d" stroke-width="2" fill="none"/>319 <path d="M12 7v6l4 2" stroke="#394a5d" stroke-width="2" stroke-linecap="round"/>320 </svg>321 8 MINS322 </div>323 </div>324 325 <div class="link">View all products by Sundrop ›</div>326 327 <div class="weight-price">328 <div>924 g</div>329 </div>330 <div class="weight-price">331 <div class="price">₹248</div>332 <div class="strike">₹250</div>333 </div>334 335 <div class="section-title">You might also like</div>336 337 <div class="cards">338 <div class="card">339 <div class="discount-badge">17% OFF</div>340 <div class="product-img">[IMG: Bagrry's White Oats Pack]</div>341 <div class="card-caption">Bagrry's White Oats</div>342 <div class="card-footer">343 <div>924 g</div>344 <div class="card-price">₹248</div>345 <div class="card-strike">₹250</div>346 </div>347 </div>348 349 <div class="card">350 <div class="discount-badge">20% OFF</div>351 <div class="product-img">[IMG: Quaker Oats Pack]</div>352 <div class="card-caption">Quaker Oats</div>353 <div class="card-footer">354 <div>924 g</div>355 <div class="card-price">₹248</div>356 <div class="card-strike">₹250</div>357 </div>358 </div>359 360 <div class="card">361 <div class="discount-badge" style="background:#3c84ff;">12% OFF</div>362 <div class="product-img">[IMG: Saffola Oats Packs]</div>363 <div class="card-caption">Saffola Oats</div>364 <div class="card-footer">365 <div>924 g</div>366 <div class="card-price">₹248</div>367 <div class="card-strike">₹250</div>368 </div>369 </div>370 </div>371 372 <div class="add-to-cart">Add to cart</div>373 </div>374 375 <!-- Bottom system bar -->376 <div class="bottom-safe">377 <div class="home-pill"></div>378 </div>379 380</div>381</body>382</html>