GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Product Detail - Sundrop Peanut Butter</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #FFFFFF;15 }16 17 /* Status bar */18 .status-bar {19 height: 110px;20 background: #efefef;21 color: #000;22 display: flex;23 align-items: center;24 padding: 0 40px;25 font-weight: 600;26 font-size: 38px;27 letter-spacing: 0.2px;28 }29 .status-icons {30 margin-left: auto;31 display: flex;32 align-items: center;33 gap: 28px;34 }35 .dot { width: 18px; height: 18px; background: #cfcfcf; border-radius: 50%; }36 37 /* Search bar */38 .search-wrap {39 background: #f3f3f3;40 padding: 24px 32px 32px;41 }42 .search-bar {43 height: 96px;44 background: #ffffff;45 border: 1px solid #ddd;46 border-radius: 48px;47 display: flex;48 align-items: center;49 padding: 0 28px;50 gap: 22px;51 color: #222;52 font-size: 36px;53 }54 .search-text { flex: 1; color: #444; }55 .light-text { color: #777; }56 57 /* Floating close button */58 .close-circle {59 position: absolute;60 top: 210px;61 left: 50%;62 transform: translateX(-50%);63 width: 120px;64 height: 120px;65 background: rgba(0,0,0,0.8);66 border-radius: 60px;67 display: flex;68 align-items: center;69 justify-content: center;70 z-index: 5;71 }72 .close-circle svg { width: 56px; height: 56px; }73 74 .results-line {75 padding: 18px 36px;76 font-size: 34px;77 color: #4d4d4d;78 font-weight: 600;79 }80 81 /* Product card (sheet) */82 .product-sheet {83 position: relative;84 background: #ffffff;85 border-top-left-radius: 36px;86 border-top-right-radius: 36px;87 box-shadow: 0 8px 24px rgba(0,0,0,0.06);88 padding-bottom: 40px;89 }90 91 .img-hero {92 margin: 40px auto 22px;93 width: 840px;94 height: 840px;95 background: #E0E0E0;96 border: 1px solid #BDBDBD;97 border-radius: 24px;98 display: flex;99 align-items: center;100 justify-content: center;101 color: #757575;102 font-size: 36px;103 text-align: center;104 }105 106 .pager-dots {107 display: flex;108 justify-content: center;109 gap: 18px;110 margin-bottom: 12px;111 }112 .pager-dots span {113 width: 18px; height: 18px; border-radius: 50%;114 background: #dcdcdc;115 }116 .pager-dots .active { background: #424242; }117 118 .title-row {119 display: flex;120 align-items: center;121 padding: 24px 36px 12px;122 }123 .title-row h1 {124 font-size: 58px;125 margin: 0;126 font-weight: 800;127 color: #1d1d1d;128 letter-spacing: -0.5px;129 flex: 1;130 line-height: 1.2;131 }132 .icon-circle {133 width: 96px; height: 96px;134 border-radius: 48px;135 border: 1px solid #e2e2e2;136 display: flex; align-items: center; justify-content: center;137 background: #fff;138 }139 .icon-circle svg { width: 44px; height: 44px; }140 141 .meta-row {142 display: flex;143 align-items: center;144 gap: 20px;145 padding: 8px 36px 0;146 }147 .pill {148 display: inline-flex;149 align-items: center;150 gap: 12px;151 background: #f5f7f4;152 border: 1px solid #e5efe0;153 color: #2f7a2f;154 padding: 10px 16px;155 border-radius: 24px;156 font-size: 28px;157 font-weight: 700;158 }159 .green-link {160 color: #2e7d32;161 font-weight: 700;162 font-size: 34px;163 }164 .divider { margin: 28px 36px; border-bottom: 1px solid #eee; }165 166 .weight { font-size: 40px; color: #222; padding: 0 36px; margin-top: 8px; }167 .price-row {168 padding: 8px 36px 24px;169 display: flex; align-items: baseline; gap: 18px;170 }171 .price-now { font-size: 56px; font-weight: 800; color: #111; }172 .price-old { font-size: 44px; color: #9c9c9c; text-decoration: line-through; }173 174 /* Suggestions */175 .section-title {176 padding: 10px 36px;177 font-size: 48px;178 font-weight: 800;179 color: #222;180 }181 .cards {182 display: grid;183 grid-template-columns: repeat(3, 1fr);184 gap: 22px;185 padding: 18px 36px 12px;186 }187 .card {188 background: #fff;189 border: 1px solid #e8e8e8;190 border-radius: 28px;191 padding: 20px;192 position: relative;193 }194 .sale-tag {195 position: absolute;196 top: 16px; left: 16px;197 background: #2563eb;198 color: #fff;199 font-size: 26px;200 font-weight: 800;201 padding: 10px 16px;202 border-radius: 16px;203 }204 .card .img {205 width: 100%;206 height: 340px;207 background: #E0E0E0;208 border: 1px solid #BDBDBD;209 border-radius: 20px;210 display: flex; align-items: center; justify-content: center;211 color: #757575; font-size: 30px; text-align: center;212 }213 214 .bottom-info {215 padding: 26px 36px 160px;216 font-size: 40px;217 color: #222;218 }219 .bottom-price { display: flex; align-items: baseline; gap: 16px; }220 .bottom-price .now { font-size: 56px; font-weight: 800; }221 .bottom-price .old { font-size: 44px; color: #9c9c9c; text-decoration: line-through; }222 223 /* Add to cart button */224 .cta-bar {225 position: absolute;226 bottom: 44px;227 left: 0;228 width: 100%;229 padding: 0 36px;230 display: flex;231 align-items: center;232 justify-content: flex-end;233 box-sizing: border-box;234 }235 .cta {236 background: #2f8f3a;237 color: #fff;238 font-size: 48px;239 font-weight: 800;240 padding: 34px 48px;241 border-radius: 24px;242 box-shadow: 0 6px 12px rgba(47,143,58,0.35);243 width: 420px;244 text-align: center;245 }246 .home-indicator {247 position: absolute;248 bottom: 16px;249 left: 50%;250 transform: translateX(-50%);251 width: 240px; height: 12px;252 background: #0f0f0f;253 border-radius: 6px;254 opacity: 0.9;255 }256 257 /* SVG icon base styles */258 svg { fill: none; stroke: #222; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }259 .icon-light svg { stroke: #666; }260 .icon-green svg { stroke: #2e7d32; }261</style>262</head>263<body>264<div id="render-target">265 266 <!-- Status bar -->267 <div class="status-bar">268 8:42269 <div class="status-icons">270 <div class="dot"></div>271 <div class="dot"></div>272 <div class="dot"></div>273 <div class="dot"></div>274 <!-- WiFi icon -->275 <svg width="42" height="42" viewBox="0 0 32 32" class="icon-light">276 <path d="M4 12c10-8 14-8 24 0"></path>277 <path d="M8 16c7-6 9-6 16 0"></path>278 <path d="M12 20c4-3 4-3 8 0"></path>279 <circle cx="16" cy="24" r="2"></circle>280 </svg>281 <!-- Battery -->282 <svg width="52" height="42" viewBox="0 0 40 24" class="icon-light">283 <rect x="2" y="4" width="30" height="16" rx="3"></rect>284 <rect x="34" y="9" width="4" height="6" rx="1"></rect>285 <rect x="5" y="7" width="24" height="10" rx="2" fill="#4caf50" stroke="none"></rect>286 </svg>287 </div>288 </div>289 290 <!-- Search bar area -->291 <div class="search-wrap">292 <div class="search-bar">293 <!-- Back icon -->294 <svg width="48" height="48" viewBox="0 0 32 32">295 <path d="M18 6L8 16l10 10"></path>296 </svg>297 <div class="search-text">sundrop peanut butter</div>298 <!-- Clear (x) -->299 <svg width="44" height="44" viewBox="0 0 32 32">300 <path d="M8 8l16 16M24 8L8 24"></path>301 </svg>302 <!-- Mic icon -->303 <svg width="44" height="44" viewBox="0 0 32 32">304 <rect x="12" y="6" width="8" height="14" rx="4"></rect>305 <path d="M8 14c0 5 4 8 8 8s8-3 8-8M16 22v4M12 26h8"></path>306 </svg>307 </div>308 </div>309 310 <!-- Floating close circle -->311 <div class="close-circle">312 <svg viewBox="0 0 32 32">313 <path d="M8 8l16 16M24 8L8 24" stroke="#fff"></path>314 </svg>315 </div>316 317 <!-- Results line -->318 <div class="results-line">Showing results for "sundrop peanut butter"</div>319 320 <!-- Product sheet -->321 <div class="product-sheet">322 323 <div class="img-hero">[IMG: Sundrop Peanut Butter Jar]</div>324 325 <div class="pager-dots">326 <span class="active"></span>327 <span></span>328 <span></span>329 <span></span>330 <span></span>331 </div>332 333 <div class="title-row">334 <h1>Sundrop Crunchy Peanut Butter</h1>335 <div class="icon-circle">336 <!-- Share icon -->337 <svg viewBox="0 0 32 32">338 <path d="M20 4l8 8-8 8"></path>339 <path d="M28 12H12"></path>340 <rect x="4" y="8" width="8" height="16" rx="2"></rect>341 </svg>342 </div>343 </div>344 345 <div class="meta-row">346 <div class="pill">347 <svg width="32" height="32" viewBox="0 0 32 32" class="icon-green">348 <circle cx="16" cy="16" r="12"></circle>349 <path d="M16 8v8l6 3"></path>350 </svg>351 8 MINS352 </div>353 <div class="green-link">View all products by Sundrop ›</div>354 </div>355 356 <div class="divider"></div>357 358 <div class="weight">924 g</div>359 <div class="price-row">360 <div class="price-now">₹248</div>361 <div class="price-old">₹250</div>362 </div>363 364 <div class="section-title">You might also like</div>365 366 <div class="cards">367 <div class="card">368 <div class="sale-tag">17% OFF</div>369 <div class="img">[IMG: Bagrry's Oats Pack]</div>370 </div>371 <div class="card">372 <div class="sale-tag">20% OFF</div>373 <div class="img">[IMG: Quaker Oats Pack]</div>374 </div>375 <div class="card">376 <div class="sale-tag">12% OFF</div>377 <div class="img">[IMG: Saffola Oats Combo]</div>378 </div>379 </div>380 381 <div class="bottom-info">382 924 g383 <div class="bottom-price">384 <div class="now">₹248</div>385 <div class="old">₹250</div>386 </div>387 </div>388 389 </div>390 391 <!-- CTA bar -->392 <div class="cta-bar">393 <div class="cta">Add to cart</div>394 </div>395 396 <div class="home-indicator"></div>397</div>398</body>399</html>