GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Product Detail - Sundrop Peanut Butter</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #F3F4F6;12 border-radius: 0;13 }14 /* Status bar */15 .status-bar {16 height: 110px;17 padding: 0 36px;18 display: flex;19 align-items: center;20 justify-content: space-between;21 color: #2B2D31;22 font-weight: 600;23 font-size: 38px;24 }25 .status-right {26 display: flex; align-items: center; gap: 26px;27 }28 .dot { width: 18px; height: 18px; background:#9EA3AA; border-radius:50%; display:inline-block; }29 .battery {30 width: 44px; height: 26px; border: 3px solid #2B2D31; border-radius:6px; position: relative;31 }32 .battery::after { content:""; position:absolute; right:-10px; top:7px; width:6px; height:12px; background:#2B2D31; border-radius:2px; }33 .battery-fill { width: 26px; height: 18px; background:#2B2D31; margin: 3px; border-radius:3px; }34 /* Search bar */35 .search-area { padding: 0 30px; }36 .search-bar {37 margin-top: 12px;38 height: 110px;39 background: #EAECEF;40 border-radius: 60px;41 display: flex;42 align-items: center;43 padding: 0 30px;44 gap: 24px;45 color: #333;46 }47 .search-text { font-size: 40px; flex: 1; color:#333; }48 .icon-btn {49 width: 70px; height: 70px; border-radius: 50%;50 display:flex; align-items:center; justify-content:center;51 }52 .results-text {53 padding: 26px 34px;54 font-size: 42px;55 font-weight: 700;56 color: #3A3D41;57 }58 /* Bottom sheet / product card */59 .sheet {60 position: absolute; left: 0; right: 0; top: 420px; height: 1850px;61 background: #FFFFFF; border-top-left-radius: 40px; border-top-right-radius: 40px;62 box-shadow: 0 6px 24px rgba(0,0,0,0.12);63 }64 .sheet-inner { padding: 40px 40px 0 40px; }65 .close-fab {66 position: absolute; left: 50%; transform: translateX(-50%);67 top: 360px; width: 110px; height: 110px; background: #262626; color: #fff;68 border-radius: 55px; display:flex; align-items:center; justify-content:center; box-shadow: 0 8px 20px rgba(0,0,0,0.25);69 }70 /* Hero area */71 .hero {72 position: relative;73 margin-top: 30px;74 height: 600px;75 background: #fff;76 border-radius: 24px;77 }78 .badge-ribbon {79 position: absolute; left: 40px; top: 10px;80 background: #2E7D32; color:#fff; padding: 16px 26px; border-radius: 10px;81 font-size: 38px; font-weight: 700;82 }83 .veg-box {84 position: absolute; right: 80px; top: 40px;85 width: 120px; height: 120px; border: 3px solid #2E7D32; border-radius: 14px;86 display:flex; align-items:center; justify-content:center; color:#2E7D32; font-size: 28px;87 }88 .veg-box .dot { width: 34px; height: 34px; background:#2E7D32; }89 .img-placeholder {90 position: absolute; left: 50%; top: 50%; transform: translate(-50%, -40%);91 width: 540px; height: 540px; background:#E0E0E0; border:1px solid #BDBDBD;92 display:flex; align-items:center; justify-content:center; color:#757575; font-size: 34px; text-align:center; border-radius: 16px;93 }94 .carousel-dots {95 height: 40px; display:flex; justify-content:center; gap: 20px; margin-top: 18px;96 }97 .dot-big { width: 16px; height:16px; background:#C0C6CC; border-radius:50%; }98 .dot-big.active { background:#6D7680; }99 /* Title and actions */100 .title-row { display:flex; align-items:flex-start; justify-content:space-between; margin-top: 30px; }101 .product-title { font-size: 64px; font-weight: 800; color:#1C1F23; line-height: 1.2; max-width: 800px; }102 .share-btn {103 width: 100px; height: 100px; border-radius: 50%; border: 2px solid #E5E7EB;104 display:flex; align-items:center; justify-content:center;105 }106 .meta-row { display:flex; align-items:center; gap: 20px; margin-top: 26px; }107 .time-badge {108 display:inline-flex; align-items:center; gap: 14px; background:#F1F3F5; color:#1F6F2A;109 border-radius: 22px; padding: 12px 20px; font-size: 34px; font-weight:700;110 color:#2B3E2F;111 }112 .link-line { margin-top: 22px; color:#2E7D32; font-size: 40px; font-weight:600; display:flex; align-items:center; gap: 10px; }113 .divider { height: 2px; background:#ECEFF2; margin: 32px 0; }114 .prop { font-size: 40px; color:#333; margin-bottom: 20px; }115 .price-row { display:flex; align-items:baseline; gap: 20px; margin-bottom: 30px; }116 .price { font-size: 58px; font-weight: 800; color:#111; }117 .strike { font-size: 44px; color:#9AA0A6; text-decoration: line-through; }118 /* Suggestions */119 .section-title { font-size: 56px; font-weight: 800; color:#1E2226; margin: 24px 0 20px 0; }120 .cards { display:flex; gap: 24px; }121 .card {122 flex: 0 0 320px; background:#fff; border:2px solid #EDF0F4; border-radius: 28px; padding: 20px; position: relative;123 }124 .discount {125 position:absolute; left:16px; top:14px; background:#2D69FF; color:#fff; padding: 12px 16px; border-radius: 16px;126 font-size: 30px; font-weight:800;127 }128 .card .img-placeholder { position: relative; transform:none; left:auto; top:auto; width: 280px; height: 320px; border-radius: 20px; }129 /* Bottom action bar */130 .bottom-bar {131 position: absolute; left: 0; right: 0; bottom: 90px;132 display:flex; align-items:center; justify-content:space-between; padding: 20px 40px;133 }134 .bottom-price .prop { margin:0; }135 .bottom-action {136 width: 420px; height: 120px; background:#2E7D32; color:#fff; border-radius: 20px; display:flex; align-items:center; justify-content:center;137 font-size: 48px; font-weight: 800;138 }139 .home-indicator {140 position:absolute; left:50%; transform:translateX(-50%); bottom: 24px;141 width: 360px; height: 16px; background:#000000; opacity:0.8; border-radius: 8px;142 }143 /* Simple icon styling */144 svg { display:block; }145</style>146</head>147<body>148<div id="render-target">149 150 <!-- Status Bar -->151 <div class="status-bar">152 <div>8:44</div>153 <div class="status-right">154 <span class="dot"></span>155 <span class="dot"></span>156 <span class="dot"></span>157 <div class="battery"><div class="battery-fill"></div></div>158 </div>159 </div>160 161 <!-- Search Bar -->162 <div class="search-area">163 <div class="search-bar">164 <div class="icon-btn">165 <svg width="48" height="48" viewBox="0 0 24 24">166 <path d="M15 18l-6-6 6-6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>167 </svg>168 </div>169 <div class="search-text">sundrop peanut butter</div>170 <div class="icon-btn">171 <svg width="40" height="40" viewBox="0 0 24 24">172 <path d="M18 6L6 18M6 6l12 12" stroke="#4A4A4A" stroke-width="2" stroke-linecap="round"/>173 </svg>174 </div>175 <div class="icon-btn">176 <svg width="40" height="40" viewBox="0 0 24 24">177 <path d="M12 3a5 5 0 015 5v3l3 3v2H4v-2l3-3V8a5 5 0 015-5z" fill="#4A4A4A"/>178 </svg>179 </div>180 </div>181 </div>182 183 <!-- Results label -->184 <div class="results-text">Showing results for "sundrop peanut butter"</div>185 186 <!-- Close Floating Button -->187 <div class="close-fab">188 <svg width="56" height="56" viewBox="0 0 24 24">189 <path d="M18 6L6 18M6 6l12 12" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>190 </svg>191 </div>192 193 <!-- Bottom Sheet -->194 <div class="sheet">195 <div class="sheet-inner">196 197 <!-- Hero display -->198 <div class="hero">199 <div class="badge-ribbon">Crunchy- 924g</div>200 <div class="veg-box"><span class="dot"></span></div>201 <div class="img-placeholder">[IMG: Sundrop Peanut Butter Jar]</div>202 </div>203 204 <div class="carousel-dots">205 <div class="dot-big active"></div>206 <div class="dot-big"></div>207 <div class="dot-big"></div>208 <div class="dot-big"></div>209 </div>210 211 <!-- Title and share -->212 <div class="title-row">213 <div class="product-title">Sundrop Crunchy Peanut Butter</div>214 <div class="share-btn">215 <svg width="44" height="44" viewBox="0 0 24 24">216 <path d="M14 4l6 6-6 6M4 20V4h10" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>217 </svg>218 </div>219 </div>220 221 <div class="meta-row">222 <div class="time-badge">223 <svg width="32" height="32" viewBox="0 0 24 24">224 <circle cx="12" cy="12" r="9" stroke="#1F6F2A" stroke-width="2" fill="none"/>225 <path d="M12 7v6l4 2" stroke="#1F6F2A" stroke-width="2" fill="none" stroke-linecap="round"/>226 </svg>227 8 MINS228 </div>229 </div>230 231 <div class="link-line">232 View all products by Sundrop233 <svg width="30" height="30" viewBox="0 0 24 24">234 <path d="M9 6l6 6-6 6" stroke="#2E7D32" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>235 </svg>236 </div>237 238 <div class="divider"></div>239 240 <div class="prop">924 g</div>241 <div class="price-row">242 <div class="price">₹248</div>243 <div class="strike">₹250</div>244 </div>245 246 <div class="section-title">You might also like</div>247 248 <div class="cards">249 <div class="card">250 <div class="discount">17% OFF</div>251 <div class="img-placeholder">[IMG: Bagrry's White Oats Pack]</div>252 </div>253 254 <div class="card">255 <div class="discount">20% OFF</div>256 <div class="img-placeholder">[IMG: Quaker Oats Pack]</div>257 </div>258 259 <div class="card">260 <div class="discount">12% OFF</div>261 <div class="img-placeholder">[IMG: Saffola Oats Pack]</div>262 </div>263 </div>264 265 <!-- Bottom bar -->266 <div class="bottom-bar">267 <div class="bottom-price">268 <div class="prop">924 g</div>269 <div class="price-row">270 <div class="price">₹248</div>271 <div class="strike">₹250</div>272 </div>273 </div>274 <div class="bottom-action">Add to cart</div>275 </div>276 277 </div>278 </div>279 280 <div class="home-indicator"></div>281</div>282</body>283</html>