GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Product Page Mock</title>5<style>6 body { margin:0; padding:0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background:#ffffff; box-shadow: 0 0 0 1px rgba(0,0,0,0.08);10 }11 .status-bar {12 height:90px; padding:20px 30px; color:#212121; font-weight:600; font-size:34px;13 display:flex; align-items:center; justify-content:space-between;14 }15 .status-icons { display:flex; gap:24px; align-items:center; color:#666; font-size:28px; }16 .header {17 display:flex; align-items:center; justify-content:space-between;18 padding:20px 30px; border-bottom:1px solid #eee;19 }20 .title-row { display:flex; align-items:center; gap:20px; width:820px; }21 .back-btn { width:64px; height:64px; display:flex; align-items:center; justify-content:center; }22 .icon-btn { width:64px; height:64px; display:flex; align-items:center; justify-content:center; }23 .title { font-size:44px; font-weight:700; color:#1c1c1c; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }24 .subtitle { font-size:32px; color:#757575; margin-top:6px; }25 .price-row { padding:8px 30px; display:flex; align-items:center; gap:18px; }26 .mrp { color:#9e9e9e; font-size:32px; text-decoration:line-through; }27 .price { font-size:40px; font-weight:700; color:#1c1c1c; }28 .off { font-size:32px; color:#2e7d32; font-weight:700; }29 .ratings { padding:16px 30px; display:flex; align-items:center; gap:20px; }30 .rating-badge { display:flex; align-items:center; gap:12px; background:#e8f5e9; color:#2e7d32; border-radius:26px; padding:12px 18px; font-size:32px; font-weight:700; }31 .link { color:#2962ff; font-size:32px; font-weight:600; }32 .dot { color:#bdbdbd; }33 .section { padding:24px 30px; }34 .size-header { display:flex; align-items:center; justify-content:space-between; }35 .size-guide { color:#2962ff; font-size:32px; font-weight:700; }36 .chips { display:flex; flex-wrap:wrap; gap:18px; margin-top:20px; }37 .chip {38 padding:18px 28px; border:1px solid #d0d0d0; border-radius:40px; font-size:34px; color:#1c1c1c;39 background:#fff;40 }41 .chip.disabled { color:#9e9e9e; border-color:#e0e0e0; }42 .soldout-note { font-size:28px; color:#9e9e9e; margin-left:20px; }43 .badges { display:flex; gap:24px; margin-top:20px; }44 .badge {45 flex:1; display:flex; align-items:center; gap:18px; border:1px solid #e0e0e0; border-radius:18px;46 padding:22px; font-size:34px; color:#1c1c1c; background:#fafafa;47 }48 .delivery { padding:24px 30px; border-top:1px solid #f0f0f0; }49 .delivery-row { display:flex; align-items:center; justify-content:space-between; }50 .pincode-btn {51 padding:18px 26px; border:2px solid #cfd8dc; border-radius:16px; font-size:34px; color:#0d47a1; font-weight:700; background:#fff;52 }53 .similar { padding:14px 30px; }54 .sim-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }55 .cards { display:flex; gap:24px; overflow-x:auto; padding-bottom:10px; }56 .card {57 min-width:320px; width:320px; border:1px solid #e0e0e0; border-radius:18px; background:#fff;58 display:flex; flex-direction:column; overflow:hidden;59 }60 .card-img {61 width:100%; height:240px; background:#E0E0E0; border-bottom:1px solid #BDBDBD;62 display:flex; align-items:center; justify-content:center; color:#616161; font-size:28px;63 }64 .card-body { padding:18px; }65 .card-title { font-size:32px; font-weight:600; color:#1c1c1c; line-height:1.25; }66 .sizes { font-size:30px; color:#616161; margin-top:12px; }67 .price-line { margin-top:10px; display:flex; align-items:center; gap:12px; font-size:30px; }68 .old { text-decoration:line-through; color:#9e9e9e; }69 .new { font-weight:800; color:#1c1c1c; }70 .disc { color:#2e7d32; font-weight:800; }71 .stars { margin-top:8px; color:#ff9800; font-size:30px; display:flex; align-items:center; gap:8px; }72 .tiny { color:#616161; font-size:28px; }73 .card-actions { display:flex; align-items:center; justify-content:space-between; padding:14px 18px 18px; }74 .select-btn { background:#0d47a1; color:#fff; padding:16px 22px; border-radius:14px; font-size:32px; font-weight:700; }75 .heart-btn { width:56px; height:56px; border:1px solid #e0e0e0; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#fff; }76 .bottom-bar {77 position:absolute; bottom:0; left:0; width:100%; height:140px; background:#0d2c5a; display:flex; align-items:center; justify-content:space-between;78 padding:0 30px; color:#fff;79 }80 .wish { width:96px; height:96px; border-radius:20px; background:#fff; border:1px solid #e0e0e0; display:flex; align-items:center; justify-content:center; }81 .add-btn { display:flex; align-items:center; gap:20px; font-size:42px; font-weight:800; }82 /* simple utility */83 .muted { color:#757575; }84 /* Scrollbar hidden aesthetic */85 .cards::-webkit-scrollbar { height:0; }86 /* Icon styles */87 svg { display:block; }88</style>89</head>90<body>91<div id="render-target">92 93 <!-- Status bar -->94 <div class="status-bar">95 <div>12:53</div>96 <div class="status-icons">97 <span>◦◦</span>98 <span>LR</span>99 <span style="display:flex; align-items:center; gap:8px;">100 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M12 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6-2a1 1 0 0 0 1-1c0-4.97-4.03-9-9-9a1 1 0 1 0 0 2c3.86 0 7 3.14 7 7a1 1 0 0 0 1 1z" fill="#616161"/></svg>101 <span>100%</span>102 </span>103 </div>104 </div>105 106 <!-- Header -->107 <div class="header">108 <div class="title-row">109 <div class="back-btn">110 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" stroke="#1c1c1c" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>111 </div>112 <div>113 <div class="title">Puma Hybrid Nx Men Black Runnin...</div>114 <div class="subtitle">★ 4.0 · ₹4119 | 45% off</div>115 </div>116 </div>117 <div style="display:flex; gap:16px;">118 <div class="icon-btn">119 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M15.5 15.5L21 21" stroke="#1c1c1c" stroke-width="2" stroke-linecap="round"/><circle cx="10" cy="10" r="6" stroke="#1c1c1c" stroke-width="2" fill="none"/></svg>120 </div>121 <div class="icon-btn">122 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M7 7h10l-1 12H8L7 7zm1-3h8l1 3H7l1-3z" fill="#1c1c1c"/></svg>123 </div>124 </div>125 </div>126 127 <!-- Price -->128 <div class="price-row">129 <div class="mrp">MRP ₹7499</div>130 <div class="muted">Inclusive of all taxes</div>131 </div>132 133 <!-- Ratings line -->134 <div class="ratings">135 <div class="rating-badge">136 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 17.3l-5.4 3 1-6.1L3 9.8l6.1-.9L12 3l2.9 6 6.1.9-4.6 4.4 1 6.1z" fill="#2e7d32"/></svg>137 4.0138 </div>139 <div class="dot">•</div>140 <div class="link">8 ratings</div>141 <div class="dot">▾</div>142 </div>143 144 <!-- Select Size -->145 <div class="section">146 <div class="size-header">147 <div style="font-size:40px; font-weight:800;">Select Size</div>148 <div class="size-guide">Size Guide ›</div>149 </div>150 <div class="chips">151 <div class="chip">UK 6</div>152 <div class="chip">UK 7</div>153 <div class="chip">UK 8</div>154 <div class="chip">UK 9</div>155 <div class="chip">UK 10</div>156 <div class="chip disabled">UK 11</div>157 </div>158 <div class="soldout-note">sold out</div>159 </div>160 161 <!-- Assurance badges -->162 <div class="section">163 <div class="badges">164 <div class="badge">165 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M12 2l8 4v6c0 5-3.5 8-8 10-4.5-2-8-5-8-10V6l8-4z" fill="#1e88e5"/><path d="M9 12l2 2 4-4" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>166 100% Authentic167 </div>168 <div class="badge">169 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M12 5a7 7 0 1 1-7 7" stroke="#1e88e5" stroke-width="2" fill="none"/><path d="M6 5H12V11" stroke="#1e88e5" stroke-width="2" fill="none" stroke-linecap="round"/></svg>170 Easy return policy171 </div>172 </div>173 </div>174 175 <!-- Delivery -->176 <div class="delivery">177 <div class="delivery-row">178 <div style="font-size:40px; font-weight:800;">Check delivery date</div>179 <button class="pincode-btn">Enter Pincode</button>180 </div>181 </div>182 183 <!-- Similar Products -->184 <div class="similar">185 <div class="sim-header">186 <div style="font-size:42px; font-weight:800;">Similar Products</div>187 <div class="link">View All</div>188 </div>189 <div class="cards">190 <!-- Card 1 -->191 <div class="card">192 <div class="card-img">[IMG: Puma Softride Enzo Evo Slip SF Unisex Black Shoe]</div>193 <div class="card-body">194 <div class="card-title">Puma Softride Enzo Evo Slip SF Unisex Black Ru...</div>195 <div class="sizes">11 Sizes</div>196 <div class="price-line">197 <span class="new">₹3849</span>198 <span class="old">₹6999</span>199 <span class="disc">45%</span>200 </div>201 <div class="stars">202 ★★★★★ <span class="tiny">5/5 (1)</span>203 </div>204 </div>205 <div class="card-actions">206 <div class="heart-btn">207 <svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 21s-7-4.6-9-8.6C1.2 9.5 3.2 7 6 7c1.7 0 3 .9 4 2.2C11 7.9 12.3 7 14 7c2.8 0 4.8 2.5 3 5.4C19 16.4 12 21 12 21z" fill="none" stroke="#1c1c1c" stroke-width="1.5"/></svg>208 </div>209 <div class="select-btn">Select Size</div>210 </div>211 </div>212 213 <!-- Card 2 -->214 <div class="card">215 <div class="card-img">[IMG: Puma Cell Phase Men Black Running Shoes]</div>216 <div class="card-body">217 <div class="card-title">Puma Cell Phase Men Black Running Shoes</div>218 <div class="sizes">8 Sizes</div>219 <div class="price-line">220 <span class="new">₹3569</span>221 <span class="old">₹6499</span>222 <span class="disc">45%</span>223 </div>224 <div class="stars">225 ★★★★★ <span class="tiny">5/5 (1)</span>226 </div>227 </div>228 <div class="card-actions">229 <div class="heart-btn">230 <svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 21s-7-4.6-9-8.6C1.2 9.5 3.2 7 6 7c1.7 0 3 .9 4 2.2C11 7.9 12.3 7 14 7c2.8 0 4.8 2.5 3 5.4C19 16.4 12 21 12 21z" fill="none" stroke="#1c1c1c" stroke-width="1.5"/></svg>231 </div>232 <div class="select-btn">Select Size</div>233 </div>234 </div>235 236 <!-- Card 3 -->237 <div class="card">238 <div class="card-img">[IMG: Fila Men Black Running Shoes]</div>239 <div class="card-body">240 <div class="card-title">Fila Men Black Running Shoes</div>241 <div class="sizes">10 Sizes</div>242 <div class="price-line">243 <span class="new">₹3200</span>244 <span class="old">₹5599</span>245 <span class="disc">42%</span>246 </div>247 <div class="stars">248 ★★★★☆ <span class="tiny">4.0</span>249 </div>250 </div>251 <div class="card-actions">252 <div class="heart-btn">253 <svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 21s-7-4.6-9-8.6C1.2 9.5 3.2 7 6 7c1.7 0 3 .9 4 2.2C11 7.9 12.3 7 14 7c2.8 0 4.8 2.5 3 5.4C19 16.4 12 21 12 21z" fill="none" stroke="#1c1c1c" stroke-width="1.5"/></svg>254 </div>255 <div class="select-btn">Select Size</div>256 </div>257 </div>258 </div>259 </div>260 261 <!-- Spacer to allow scroll area above bottom bar -->262 <div style="height:420px;"></div>263 264 <!-- Bottom bar -->265 <div class="bottom-bar">266 <div class="wish">267 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 21s-7-4.6-9-8.6C1.2 9.5 3.2 7 6 7c1.7 0 3 .9 4 2.2C11 7.9 12.3 7 14 7c2.8 0 4.8 2.5 3 5.4C19 16.4 12 21 12 21z" fill="none" stroke="#1c1c1c" stroke-width="1.7"/></svg>268 </div>269 <div class="add-btn">270 <svg width="48" height="48" viewBox="0 0 24 24"><path d="M7 7h10l-1 12H8L7 7zm1-3h8l1 3H7l1-3z" fill="#fff"/></svg>271 Add to Bag272 </div>273 </div>274 275</div>276</body>277</html>