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 - Volleyball</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #FFFFFF;12 }13 /* Status bar */14 .status-bar {15 height: 110px; background: #E6E6E6; color: #333; font-size: 34px; line-height: 110px; padding: 0 36px;16 display: flex; align-items: center; justify-content: space-between;17 }18 .status-left { display: flex; align-items: center; gap: 28px; }19 .status-icons { display: flex; align-items: center; gap: 18px; color: #fff; }20 .dot { width: 18px; height: 18px; background: #CFCFCF; border-radius: 50%; display: inline-block; }21 .status-right { display: flex; align-items: center; gap: 24px; color: #666; }22 .bar-icon { width: 42px; height: 24px; background: #fff; border-radius: 6px; }23 /* App bar */24 .app-bar {25 height: 120px; background: #FFFFFF; display: flex; align-items: center; justify-content: space-between;26 padding: 0 36px; border-bottom: 1px solid #F0F0F0;27 }28 .app-actions { display: flex; align-items: center; gap: 44px; }29 .icon-btn svg { width: 54px; height: 54px; fill: none; stroke: #222; stroke-width: 5; }30 .back-btn svg { width: 56px; height: 56px; }31 /* Product image */32 .product-hero {33 position: relative; padding: 40px 36px 24px 36px; background: #FFFFFF;34 }35 .image-placeholder {36 width: 1008px; height: 980px; margin: 0 auto; background: #E0E0E0;37 border: 1px solid #BDBDBD; display: flex; justify-content: center; align-items: center;38 color: #757575; font-size: 36px; text-align: center;39 }40 .share-fab {41 position: absolute; right: 48px; bottom: 70px; width: 110px; height: 110px; border-radius: 55px;42 background: #FFFFFF; border: 1px solid #DADADA; box-shadow: 0 8px 24px rgba(0,0,0,0.12);43 display: flex; align-items: center; justify-content: center;44 }45 .share-fab svg { width: 56px; height: 56px; stroke: #607D8B; stroke-width: 5; fill: none; }46 /* Under-hero controls */47 .under-hero {48 display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center;49 padding: 12px 36px 0 36px;50 }51 .pill {52 display: inline-flex; align-items: center; gap: 14px;53 border: 2px solid #CFD8DC; color: #2E6DA4; background: #FFFFFF;54 border-radius: 16px; padding: 22px 26px; font-size: 34px; width: fit-content;55 }56 .dots { display: flex; justify-content: center; gap: 18px; }57 .dots .d { width: 18px; height: 18px; border-radius: 50%; background: #C9D3E1; }58 .dots .d.active { background: #1E88E5; }59 .rating-pill {60 justify-self: end; display: inline-flex; align-items: center; gap: 16px;61 background: #FFF7CF; color: #2E5AA6; border: 1px solid #E9E2B5; border-radius: 16px; padding: 22px 26px; font-size: 34px;62 }63 .rating-pill .star svg { width: 40px; height: 40px; fill: #F7C948; stroke: #E0B12C; stroke-width: 2; }64 /* Product info */65 .content { padding: 18px 36px 0 36px; }66 .brand { font-size: 46px; color: #111; font-weight: 700; margin-bottom: 8px; }67 .title { font-size: 38px; color: #333; line-height: 1.3; margin-bottom: 20px; }68 .id-row { display: flex; align-items: center; gap: 12px; color: #1976D2; font-size: 34px; }69 .id-row .info-icon {70 width: 44px; height: 44px; border: 2px solid #90CAF9; color: #1976D2;71 border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: bold;72 }73 /* Price block */74 .price-block { display: flex; align-items: center; gap: 22px; padding: 30px 36px; }75 .price-tag {76 background: #FFE168; color: #111; font-weight: 800; font-size: 48px;77 padding: 24px 32px; border-radius: 10px; display: inline-block;78 }79 .mrp { font-size: 38px; color: #777; text-decoration: line-through; }80 .divider { height: 16px; background: #F4F4F4; margin-top: 24px; }81 /* Delivery section */82 .section-title { padding: 32px 36px 16px 36px; font-size: 38px; color: #555; font-weight: 800; letter-spacing: 1px; }83 .pincode-card {84 margin: 0 36px; background: #FFFFFF; border: 2px solid #EAEAEA; border-radius: 20px;85 padding: 28px; display: flex; align-items: center; justify-content: space-between;86 }87 .pin-left { display: flex; align-items: center; gap: 18px; font-size: 36px; color: #333; }88 .check {89 width: 40px; height: 40px; border-radius: 50%; background: #43A047;90 display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 28px; font-weight: bold;91 }92 /* Chat bubble overlay */93 .chat-bubble {94 position: absolute; right: 36px; top: 1660px; display: flex; align-items: center; gap: 18px;95 }96 .bubble {97 position: relative; background: #FFFFFF; border: 2px solid #E0E0E0; border-radius: 16px;98 box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 20px 24px; font-size: 32px; color: #333;99 }100 .bubble .close {101 position: absolute; left: -16px; top: -16px; width: 44px; height: 44px; border-radius: 22px;102 background: #F0F0F0; border: 1px solid #D0D0D0; display: flex; align-items: center; justify-content: center; color: #666; font-size: 24px;103 }104 .avatar {105 width: 120px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 60px;106 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 24px;107 }108 /* Bottom add-to-cart */109 .bottom-card {110 position: absolute; left: 24px; right: 24px; bottom: 130px;111 background: #FFFFFF; border-radius: 26px; box-shadow: 0 10px 30px rgba(0,0,0,0.15);112 padding: 22px; display: flex; align-items: center; gap: 22px;113 }114 .wishlist-box {115 width: 160px; height: 130px; border: 2px solid #E8EDF1; border-radius: 20px; display: flex; align-items: center; justify-content: center;116 }117 .wishlist-box svg { width: 60px; height: 60px; stroke: #5C7EA3; fill: none; stroke-width: 4; }118 .cta-btn {119 flex: 1; height: 130px; border-radius: 20px; background: #FFE168; color: #111; font-size: 44px; font-weight: 800;120 display: flex; align-items: center; justify-content: center; gap: 22px; letter-spacing: 1px;121 }122 .cta-btn svg { width: 54px; height: 54px; stroke: #111; stroke-width: 5; fill: none; }123 /* Home bar */124 .home-bar {125 position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);126 width: 220px; height: 12px; border-radius: 6px; background: #111;127 }128</style>129</head>130<body>131<div id="render-target">132 <!-- Status bar -->133 <div class="status-bar">134 <div class="status-left">135 <div>10:40</div>136 <div class="status-icons">137 <span class="dot"></span>138 <span class="dot"></span>139 <span class="dot"></span>140 <span class="dot"></span>141 </div>142 </div>143 <div class="status-right">144 <div class="bar-icon"></div>145 <div class="bar-icon" style="width: 48px;"></div>146 </div>147 </div>148 149 <!-- App bar -->150 <div class="app-bar">151 <div class="back-btn icon-btn" aria-label="Back">152 <svg viewBox="0 0 48 48"><path d="M30 10 L16 24 L30 38"/></svg>153 </div>154 <div class="app-actions">155 <div class="icon-btn" aria-label="Search">156 <svg viewBox="0 0 48 48">157 <circle cx="22" cy="22" r="14"></circle>158 <line x1="34" y1="34" x2="44" y2="44"></line>159 </svg>160 </div>161 <div class="icon-btn" aria-label="Wishlist">162 <svg viewBox="0 0 48 48">163 <path d="M24 40 C8 28,6 18,14 13 C18 10,22 12,24 15 C26 12,30 10,34 13 C42 18,40 28,24 40 Z"></path>164 </svg>165 </div>166 <div class="icon-btn" aria-label="Cart">167 <svg viewBox="0 0 48 48">168 <path d="M6 10 H12 L16 32 H38 L42 18 H18"></path>169 <circle cx="20" cy="38" r="3"></circle>170 <circle cx="36" cy="38" r="3"></circle>171 </svg>172 </div>173 </div>174 </div>175 176 <!-- Product hero -->177 <div class="product-hero">178 <div class="image-placeholder">[IMG: Mint & white volleyball - COPAYA BV 100]</div>179 <div class="share-fab" aria-label="Share">180 <svg viewBox="0 0 48 48">181 <circle cx="12" cy="24" r="6"></circle>182 <circle cx="36" cy="12" r="6"></circle>183 <circle cx="36" cy="36" r="6"></circle>184 <path d="M16 22 L30 14"></path>185 <path d="M16 26 L30 34"></path>186 </svg>187 </div>188 </div>189 190 <!-- Under hero controls -->191 <div class="under-hero">192 <div>193 <div class="pill">194 <svg viewBox="0 0 48 48" style="width:40px;height:40px;stroke:#2E6DA4;fill:none;stroke-width:4;">195 <rect x="8" y="10" width="14" height="20"></rect>196 <rect x="26" y="14" width="14" height="20"></rect>197 </svg>198 <span>View similar</span>199 </div>200 </div>201 <div class="dots">202 <span class="d"></span>203 <span class="d active"></span>204 <span class="d"></span>205 <span class="d"></span>206 <span class="d"></span>207 <span class="d"></span>208 <span class="d"></span>209 <span class="d"></span>210 </div>211 <div class="rating-pill">212 <span class="star">213 <svg viewBox="0 0 48 48"><path d="M24 6 L29 18 L42 18 L31 26 L35 38 L24 30 L13 38 L17 26 L6 18 L19 18 Z"></path></svg>214 </span>215 <span>4.28 (2.3k)</span>216 </div>217 </div>218 219 <!-- Product info -->220 <div class="content">221 <div class="brand">COPAYA</div>222 <div class="title">Beach Volleyball Outdoor Ball 100<br>Green</div>223 <div class="id-row">224 <div class="info-icon">i</div>225 <div>ID: 8558716</div>226 </div>227 </div>228 229 <!-- Price block -->230 <div class="price-block">231 <div class="price-tag">₹499</div>232 <div class="mrp">₹699</div>233 </div>234 235 <div class="divider"></div>236 237 <!-- Delivery & Services -->238 <div class="section-title">DELIVERY & SERVICES</div>239 <div class="pincode-card">240 <div class="pin-left">241 <div>110026</div>242 <div class="check">✓</div>243 </div>244 <div style="font-size:32px; color:#888;">Change</div>245 </div>246 247 <!-- Chat bubble overlay -->248 <div class="chat-bubble">249 <div class="bubble">250 <div class="close">×</div>251 <div style="font-weight:700; margin-bottom:8px;">Hi There,</div>252 <div>Please click here to sign in & chat with me:)</div>253 </div>254 <div class="avatar">[IMG: Support avatar]</div>255 </div>256 257 <!-- Bottom add to cart -->258 <div class="bottom-card">259 <div class="wishlist-box" aria-label="Add to wishlist">260 <svg viewBox="0 0 48 48">261 <path d="M24 40 C8 28,6 18,14 13 C18 10,22 12,24 15 C26 12,30 10,34 13 C42 18,40 28,24 40 Z"></path>262 <path d="M24 18 V30" />263 <path d="M18 24 H30" />264 </svg>265 </div>266 <div class="cta-btn">267 <span>ADD TO CART</span>268 <svg viewBox="0 0 48 48">269 <path d="M6 10 H12 L16 32 H38 L42 18 H18"></path>270 <circle cx="20" cy="38" r="3"></circle>271 <circle cx="36" cy="38" r="3"></circle>272 </svg>273 </div>274 </div>275 276 <!-- Home indicator bar -->277 <div class="home-bar"></div>278</div>279</body>280</html>