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, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #F5F6F8;12 }13 14 /* Status bar */15 .status-bar {16 height: 100px;17 padding: 0 36px;18 display: flex;19 align-items: center;20 color: #3A3A3A;21 font-weight: 600;22 font-size: 36px;23 opacity: 0.9;24 }25 .status-icons {26 margin-left: auto;27 display: flex; align-items: center; gap: 28px;28 }29 .status-dot { width: 14px; height: 14px; background:#777; border-radius:50%; display:inline-block; }30 .status-battery { width: 36px; height: 20px; border:2px solid #222; border-radius:4px; position: relative; }31 .status-battery::after { content:""; position:absolute; right:-8px; top:6px; width:6px; height:8px; background:#222; border-radius:2px; }32 .status-battery .level { width: 24px; height: 14px; background:#222; margin:2px; }33 34 /* Search bar */35 .search-wrap {36 padding: 18px 36px 24px 36px;37 }38 .search-bar {39 height: 110px; border-radius: 56px; background: #ECECEE;40 display: flex; align-items: center; padding: 0 30px; color:#222;41 }42 .search-icon, .mic-icon, .close-icon {43 width: 48px; height: 48px; display:flex; align-items:center; justify-content:center;44 margin-right: 20px;45 }46 .search-text {47 font-size: 40px; color: #2E2E2E; flex: 1; opacity: 0.95;48 }49 50 .results-line {51 padding: 6px 36px 20px 36px;52 font-size: 40px; color:#4A4A4A; font-weight: 700;53 }54 55 /* Overlay close badge */56 .overlay-close {57 position: absolute; top: 300px; left: 50%; transform: translateX(-50%);58 width: 120px; height: 120px; border-radius: 60px; background: #0F0F10;59 display: flex; align-items: center; justify-content: center; z-index: 10; box-shadow: 0 6px 18px rgba(0,0,0,0.25);60 }61 .overlay-close svg { width: 56px; height: 56px; }62 63 /* Product sheet */64 .sheet {65 position: absolute; top: 360px; left: 0; right: 0;66 background: #FFFFFF; border-top-left-radius: 40px; border-top-right-radius: 40px;67 min-height: 1800px;68 box-shadow: 0 -6px 20px rgba(0,0,0,0.06);69 }70 .hero {71 padding-top: 60px;72 display: flex; justify-content: center;73 }74 .img-ph {75 width: 820px; height: 720px; background:#E0E0E0; border:1px solid #BDBDBD;76 display:flex; align-items:center; justify-content:center; color:#757575; font-size: 36px; border-radius: 8px;77 }78 .dots { display:flex; justify-content:center; gap:16px; margin: 24px 0 30px; }79 .dots span { width: 18px; height: 18px; background:#D0D4D8; border-radius:50%; }80 .dots span.active { background:#5A6066; }81 82 .title-row {83 display:flex; align-items:flex-start; padding: 0 40px; position: relative;84 }85 .title {86 font-size: 64px; font-weight: 800; color:#1f1f1f; line-height: 1.2; margin-right: 20px;87 }88 .share-btn {89 margin-left: auto; width: 92px; height: 92px; border-radius: 46px; border:1px solid #D7D7D7;90 display:flex; align-items:center; justify-content:center;91 }92 93 .chips-row { padding: 20px 40px 10px 40px; display:flex; align-items:center; gap: 20px; }94 .chip {95 display:inline-flex; align-items:center; gap:12px; padding: 14px 18px; border-radius: 20px;96 font-size: 36px; color:#1F5C2C; background:#ECF6E9; font-weight:700;97 }98 .view-link {99 color:#2E7D32; font-size: 40px; font-weight:700; margin-left: 40px; display:inline-flex; align-items:center; gap:10px;100 }101 .divider { height: 2px; background:#EAEAEA; margin: 26px 40px; }102 103 .spec-row { padding: 0 40px; font-size: 44px; color:#333; }104 .price-row { padding: 6px 40px 20px; display:flex; align-items:center; gap: 20px; }105 .price-now { font-size: 60px; font-weight: 800; color:#101010; }106 .price-old { font-size: 48px; color:#8F8F8F; text-decoration: line-through; }107 108 .section-title { padding: 28px 40px 0; font-size: 50px; font-weight: 800; color:#1f1f1f; }109 110 .cards {111 display:flex; gap: 24px; padding: 24px 24px 180px 24px;112 }113 .card {114 width: 320px; border: 1px solid #E5E5E5; border-radius: 24px; background:#fff; padding: 24px; position: relative;115 }116 .card .badge {117 position: absolute; top: 18px; left: 18px; background:#1E66FF; color:#fff; font-weight:800; font-size: 28px;118 border-radius: 14px; padding: 8px 16px;119 }120 .card .ph {121 width: 272px; height: 320px; background:#E0E0E0; border:1px solid #BDBDBD;122 display:flex; align-items:center; justify-content:center; color:#757575; border-radius: 10px; font-size: 30px;123 margin-bottom: 18px;124 }125 .card .name { font-size: 36px; font-weight: 700; color:#2f2f2f; }126 .card .sub { font-size: 30px; color:#666; margin-top: 8px; }127 128 /* Bottom bar */129 .bottom-bar {130 position: absolute; left: 0; right: 0; bottom: 84px;131 background:#FFFFFF; border-top: 1px solid #EAEAEA;132 display:flex; align-items:center; padding: 24px 36px; gap: 30px;133 }134 .bottom-info { font-size: 40px; color:#222; }135 .bottom-price { font-size: 52px; font-weight: 800; color:#111; }136 .bottom-old { font-size: 42px; color:#8F8F8F; text-decoration: line-through; margin-left: 10px; }137 .spacer { flex: 1; }138 .cta {139 background:#3DA65A; color:#fff; font-size: 44px; font-weight: 800;140 padding: 28px 48px; border-radius: 18px;141 }142 143 /* Home indicator */144 .home-indicator {145 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);146 width: 260px; height: 16px; background:#000; border-radius: 8px; opacity: 0.8;147 }148</style>149</head>150<body>151<div id="render-target">152 153 <!-- Status bar -->154 <div class="status-bar">155 8:43156 <div class="status-icons">157 <span class="status-dot"></span>158 <span class="status-dot"></span>159 <span class="status-dot"></span>160 <div class="status-battery"><div class="level"></div></div>161 </div>162 </div>163 164 <!-- Search bar -->165 <div class="search-wrap">166 <div class="search-bar">167 <div class="search-icon">168 <svg viewBox="0 0 24 24" width="44" height="44"><path d="M15 4l-8 8 8 8" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>169 </div>170 <div class="search-text">sundrop peanut butter</div>171 <div class="close-icon">172 <svg viewBox="0 0 24 24" width="44" height="44"><path d="M6 6l12 12M18 6L6 18" stroke="#333" stroke-width="2" stroke-linecap="round"/></svg>173 </div>174 <div class="mic-icon">175 <svg viewBox="0 0 24 24" width="44" height="44">176 <path d="M12 4a3 3 0 0 1 3 3v5a3 3 0 0 1-6 0V7a3 3 0 0 1 3-3z" fill="#333"/>177 <path d="M5 11a7 7 0 0 0 14 0" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>178 <path d="M12 18v3" stroke="#333" stroke-width="2" stroke-linecap="round"/>179 </svg>180 </div>181 </div>182 </div>183 184 <div class="results-line">Showing results for "sundrop peanut butter"</div>185 186 <!-- Floating close badge -->187 <div class="overlay-close">188 <svg viewBox="0 0 24 24">189 <path d="M6 6l12 12M18 6L6 18" stroke="#fff" stroke-width="2" stroke-linecap="round"/>190 </svg>191 </div>192 193 <!-- Product sheet -->194 <div class="sheet">195 <div class="hero">196 <div class="img-ph">[IMG: Peanut Butter Jar]</div>197 </div>198 <div class="dots">199 <span></span><span></span><span class="active"></span><span></span><span></span>200 </div>201 202 <div class="title-row">203 <div class="title">Sundrop Crunchy Peanut Butter</div>204 <div class="share-btn">205 <svg viewBox="0 0 24 24" width="40" height="40">206 <path d="M4 12v8h8" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>207 <path d="M20 4l-12 12" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>208 <path d="M13 4h7v7" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>209 </svg>210 </div>211 </div>212 213 <div class="chips-row">214 <div class="chip">215 <svg viewBox="0 0 24 24" width="36" height="36">216 <circle cx="12" cy="12" r="9" stroke="#2E7D32" stroke-width="2" fill="none"/>217 <path d="M12 7v6l4 2" stroke="#2E7D32" stroke-width="2" stroke-linecap="round"/>218 </svg>219 8 MINS220 </div>221 <a class="view-link" href="#">222 View all products by Sundrop223 <svg viewBox="0 0 24 24" width="34" height="34"><path d="M8 5l8 7-8 7" stroke="#2E7D32" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>224 </a>225 </div>226 227 <div class="divider"></div>228 229 <div class="spec-row">924 g</div>230 <div class="price-row">231 <div class="price-now">₹248</div>232 <div class="price-old">₹250</div>233 </div>234 235 <div class="section-title">You might also like</div>236 237 <div class="cards">238 <div class="card">239 <div class="badge">17% OFF</div>240 <div class="ph">[IMG: Bagrry's Oats Pack]</div>241 <div class="name">Bagrry's Oats</div>242 <div class="sub">Pouch • 1 kg</div>243 </div>244 <div class="card">245 <div class="badge">20% OFF</div>246 <div class="ph">[IMG: Quaker Oats Pack]</div>247 <div class="name">Quaker Oats</div>248 <div class="sub">Pouch • 1 kg</div>249 </div>250 <div class="card">251 <div class="badge">12% OFF</div>252 <div class="ph">[IMG: Saffola Oats Pack]</div>253 <div class="name">Saffola Oats</div>254 <div class="sub">Family Pack</div>255 </div>256 </div>257 258 <!-- Bottom bar inside sheet -->259 <div class="bottom-bar">260 <div class="bottom-info">924 g</div>261 <div class="bottom-price">₹248</div>262 <div class="bottom-old">₹250</div>263 <div class="spacer"></div>264 <div class="cta">Add to cart</div>265 </div>266 </div>267 268 <div class="home-indicator"></div>269</div>270</body>271</html>