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 - Mock UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color:#222; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden; background: #ffffff;12 }13 14 /* Status bar */15 .status-bar {16 position: absolute; top: 0; left: 0; right: 0; height: 130px;17 background: #2b2030; color:#fff; display:flex; align-items:center; justify-content: space-between;18 padding: 0 32px; font-size: 36px;19 }20 .status-right { display:flex; gap:28px; align-items:center; font-size: 32px; opacity:.9; }21 22 /* Header */23 .header {24 position: absolute; top: 130px; left: 0; right: 0; height: 120px;25 background: #fff; border-bottom: 1px solid #eee; display:flex; align-items:center; justify-content: space-between; padding: 0 16px 0 8px;26 }27 .icon-btn { width: 90px; height: 90px; display:flex; align-items:center; justify-content:center; cursor: default; }28 .header-right { display:flex; align-items:center; gap: 6px; }29 .dot-notif {30 position:absolute; top: 24px; right: 220px;31 width: 20px; height: 20px; background:#ff6f2c; border-radius:50%; border:3px solid #fff;32 }33 34 /* Toast */35 .toast {36 position: absolute; top: 220px; left: 40px; right: 40px;37 background: #343434; color:#fff; border-radius: 6px; padding: 28px 32px; display:flex; align-items:center; gap: 24px;38 box-shadow: 0 10px 24px rgba(0,0,0,.35);39 }40 .toast p { margin: 0; font-size: 36px; line-height: 1.35; }41 42 /* Meta rows */43 .meta { position: absolute; left: 40px; right: 40px; top: 270px; }44 .rating-row { display:flex; align-items:center; gap: 12px; margin-top: 140px; }45 .rating-row .stars { display:flex; gap:6px; }46 .badge { background:#ff6f2c; color:#fff; font-size: 26px; padding: 8px 14px; border-radius: 10px; margin-left: 14px; }47 .viewing-row { display:flex; align-items:center; gap: 12px; color:#6b6b6b; margin-top: 18px; font-size: 30px; }48 49 /* Gallery */50 .gallery {51 position: absolute; top: 520px; left: 0; right: 0; height: 740px; background:#fff;52 border-top:1px solid #f0f0f0; border-bottom:1px solid #f0f0f0;53 }54 .img-ph {55 position:absolute; left: 40px; right: 40px; top: 80px; bottom: 40px;56 background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; font-size: 36px;57 }58 .ribbon {59 position:absolute; top: 12px; left: 40px; background:#ff6f2c; color:#fff; padding: 10px 18px; border-radius: 6px; font-size: 28px; font-weight:600;60 }61 .close-x { position:absolute; top: 12px; right: 24px; font-size: 40px; color:#222; }62 .side-sticky {63 position:absolute; right: 24px; top: 180px; background:#fff; border:1px solid #eee; border-radius: 14px;64 padding: 16px 18px; box-shadow:0 6px 16px rgba(0,0,0,.08); font-size: 30px; color:#ff6f2c; text-align:center;65 }66 .view-similar {67 position:absolute; left: 40px; bottom: 36px; background:#fff; border:1px solid #eee; border-radius: 60px;68 padding: 22px 32px; font-size: 36px; display:flex; align-items:center; gap:16px; box-shadow:0 10px 20px rgba(0,0,0,.15);69 }70 .fab {71 position:absolute; right: 40px; bottom: 36px; width: 92px; height:92px; border-radius:50%; background:#fff; border:1px solid #eee;72 display:flex; align-items:center; justify-content:center; box-shadow:0 10px 20px rgba(0,0,0,.15);73 }74 .heart-fab {75 position:absolute; right: 36px; bottom: -26px; width: 96px; height: 96px; background:#ff6f2c; border-radius:50%;76 display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 6px 16px rgba(0,0,0,.2);77 }78 79 /* Dots */80 .dots { position:absolute; top: 1278px; left:0; right:0; display:flex; align-items:center; justify-content:center; gap: 18px; }81 .dot { width: 18px; height: 18px; border-radius:50%; background:#cfcfcf; }82 .dot.active { background:#ff6f2c; width: 22px; height: 22px; }83 84 /* Select colour */85 .section-title { position:absolute; left:40px; top: 1340px; font-size: 44px; font-weight: 700; }86 .thumbs { position:absolute; top: 1410px; left:40px; right:40px; display:flex; gap: 26px; }87 .thumb {88 width: 180px; height: 180px; background:#E0E0E0; border: 6px solid transparent; border-radius: 10px; display:flex; align-items:center; justify-content:center; color:#757575; font-size: 26px;89 box-shadow: inset 0 0 0 1px #BDBDBD;90 }91 .thumb.active { border-color:#ffb089; }92 93 /* Pricing */94 .pricing {95 position:absolute; left:40px; right:40px; top: 1660px; background:#fff;96 border-top:1px solid #f2f2f2; padding-top: 20px;97 }98 .price-row { display:flex; align-items:center; justify-content: space-between; margin: 10px 0; }99 .label { color:#7a7a7a; font-size: 30px; }100 .mrp { text-decoration: line-through; color:#9a9a9a; font-size: 30px; }101 .offer { font-size: 38px; font-weight:700; }102 .deal { color:#11a157; font-size: 34px; margin-top: 18px; }103 .deal strong { color:#222; font-size: 54px; }104 .dashed { border-top: 3px dashed #7ad17e; margin: 14px 0; }105 .action-row { display:flex; gap: 24px; margin-top: 26px; }106 .btn {107 flex:1; height: 140px; border-radius: 16px; font-size: 40px; font-weight:700; cursor: default;108 display:flex; align-items:center; justify-content:center;109 }110 .btn-outline { border: 3px solid #ff6f2c; color:#ff6f2c; background:#fff; }111 .btn-solid { background:#ff6f2c; color:#fff; }112 .chat-tag {113 position:absolute; right: 20px; top: 1740px; background:#ff6f2c; color:#fff; padding:12px 18px; border-radius: 10px; font-size:30px; box-shadow:0 8px 18px rgba(0,0,0,.15);114 }115 116 /* Bottom nav */117 .bottom-nav {118 position:absolute; left:0; right:0; bottom:0; height: 240px; background:#fff; border-top:1px solid #eee;119 display:flex; align-items:center; justify-content: space-around;120 }121 .nav-item { display:flex; flex-direction:column; align-items:center; gap: 16px; color:#6c6c6c; font-size:28px; }122 .nav-item.active { color:#ff6f2c; }123 .gesture { position:absolute; bottom: 10px; left: 50%; transform: translateX(-50%); width: 300px; height: 10px; background:#000; opacity:.12; border-radius: 6px; }124 125 /* Simple helper icons */126 svg { display:block; }127</style>128</head>129<body>130<div id="render-target">131 132 <!-- Status Bar -->133 <div class="status-bar">134 <div>11:05</div>135 <div class="status-right">136 <span>87°</span>137 <span>◦◦</span>138 <span>📶</span>139 <span>🔋</span>140 </div>141 </div>142 143 <!-- Header -->144 <div class="header">145 <div class="icon-btn">146 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">147 <path d="M15 6L9 12l6 6" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>148 </svg>149 </div>150 <div style="font-size:32px; color:#fff"></div>151 <div class="header-right">152 <div class="icon-btn">153 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">154 <circle cx="11" cy="11" r="7" stroke="#222" stroke-width="2"/>155 <path d="M20 20l-3.5-3.5" stroke="#222" stroke-width="2" stroke-linecap="round"/>156 </svg>157 </div>158 <div class="icon-btn" style="position:relative;">159 <svg width="44" height="44" viewBox="0 0 24 24" fill="#ff6f2c">160 <path d="M12 21s-8-5.4-8-10.2C4 7.5 5.8 6 7.7 6c1.5 0 2.7.9 3.3 2.1C11.6 6.9 12.8 6 14.3 6 16.2 6 18 7.5 18 10.8 18 15.6 12 21 12 21z"/>161 </svg>162 </div>163 <div class="icon-btn">164 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">165 <path d="M6 6h15l-1.5 9H8L6 6z" stroke="#222" stroke-width="2" stroke-linejoin="round"/>166 <circle cx="9" cy="20" r="1.6" fill="#222"/>167 <circle cx="17" cy="20" r="1.6" fill="#222"/>168 </svg>169 </div>170 </div>171 <div class="dot-notif"></div>172 </div>173 174 <!-- Toast -->175 <div class="toast">176 <svg width="64" height="64" viewBox="0 0 24 24" fill="#ff6f2c">177 <path d="M12 21s-8-5.4-8-10.2C4 7.5 5.8 6 7.7 6c1.5 0 2.7.9 3.3 2.1C11.6 6.9 12.8 6 14.3 6 16.2 6 18 7.5 18 10.8 18 15.6 12 21 12 21z"/>178 </svg>179 <p>Ines Fabric Pull Out Sofa Cum Bed In Maroon Colour With Storage has been Added To Wishlist</p>180 </div>181 182 <!-- Meta information -->183 <div class="meta">184 <div class="rating-row">185 <div class="stars">186 <svg width="34" height="34" viewBox="0 0 24 24" fill="#ffb300"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.2-.6L12 2.5l2.8 6.5 7.2.6-5.5 4.3 1.7 7.1z"/></svg>187 <svg width="34" height="34" viewBox="0 0 24 24" fill="#ffb300"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.2-.6L12 2.5l2.8 6.5 7.2.6-5.5 4.3 1.7 7.1z"/></svg>188 <svg width="34" height="34" viewBox="0 0 24 24" fill="#ffb300"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.2-.6L12 2.5l2.8 6.5 7.2.6-5.5 4.3 1.7 7.1z"/></svg>189 <svg width="34" height="34" viewBox="0 0 24 24" fill="#ffb300"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.2-.6L12 2.5l2.8 6.5 7.2.6-5.5 4.3 1.7 7.1z"/></svg>190 <svg width="34" height="34" viewBox="0 0 24 24" fill="#ffb300"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.2-.6L12 2.5l2.8 6.5 7.2.6-5.5 4.3 1.7 7.1z"/></svg>191 </div>192 <div style="font-size: 32px;">5 (6 Sold)</div>193 <span class="badge">pf Assured</span>194 </div>195 <div class="viewing-row">196 <svg width="30" height="30" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="#999" stroke-width="2"/><circle cx="12" cy="12" r="3" fill="#999"/></svg>197 <span><strong>14 People</strong> are Viewing this Product Right Now</span>198 </div>199 </div>200 201 <!-- Gallery -->202 <div class="gallery">203 <div class="ribbon">Get Extra Rs. 1,500/- Off</div>204 <div class="close-x">×</div>205 <div class="side-sticky">Buy On<br>Phone</div>206 207 <div class="img-ph">[IMG: Maroon Sofa Product]</div>208 209 <div class="view-similar">210 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">211 <rect x="3" y="4" width="14" height="16" rx="2" stroke="#222" stroke-width="2"/>212 <path d="M7 8h6" stroke="#222" stroke-width="2" stroke-linecap="round"/>213 </svg>214 <span>View Similar Items</span>215 </div>216 217 <div class="fab">218 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">219 <path d="M18 8l-8 8M10 8h8v8" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>220 </svg>221 </div>222 223 <div class="heart-fab">224 <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff">225 <path d="M12 21s-8-5.4-8-10.2C4 7.5 5.8 6 7.7 6c1.5 0 2.7.9 3.3 2.1C11.6 6.9 12.8 6 14.3 6 16.2 6 18 7.5 18 10.8 18 15.6 12 21 12 21z"/>226 </svg>227 </div>228 </div>229 230 <!-- Dots -->231 <div class="dots">232 <div class="dot active"></div>233 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>234 </div>235 236 <!-- Select Colour -->237 <div class="section-title">Select Colour</div>238 <div class="thumbs">239 <div class="thumb active">[IMG]</div>240 <div class="thumb">[IMG]</div>241 <div class="thumb">[IMG]</div>242 <div class="thumb">[IMG]</div>243 <div class="thumb">[IMG]</div>244 <div class="thumb">[IMG]</div>245 <div class="thumb">[IMG]</div>246 </div>247 248 <!-- Pricing -->249 <div class="pricing">250 <div class="price-row">251 <div class="label">MRP</div>252 <div class="mrp">₹67,850</div>253 </div>254 <div class="price-row">255 <div class="label">Offer Price</div>256 <div class="offer">₹61,110 [Retail Discount ₹6,740]</div>257 </div>258 <div class="dashed"></div>259 <div class="deal">Today's Deal <strong>₹54,999</strong> [Coupon Discount ₹6,111]</div>260 261 <div class="action-row">262 <div class="btn btn-outline">ADD TO CART</div>263 <div class="btn btn-solid">BUY NOW</div>264 </div>265 </div>266 267 <div class="chat-tag">Let's Chat</div>268 269 <!-- Bottom Navigation -->270 <div class="bottom-nav">271 <div class="nav-item active">272 <svg width="52" height="52" viewBox="0 0 24 24" fill="none">273 <path d="M4 10l8-6 8 6v8a2 2 0 0 1-2 2h-4V14H10v6H6a2 2 0 0 1-2-2v-8z" stroke="#ff6f2c" stroke-width="2" fill="none"/>274 </svg>275 <div>Home</div>276 </div>277 <div class="nav-item">278 <svg width="52" height="52" viewBox="0 0 24 24" fill="none">279 <circle cx="12" cy="8" r="4" stroke="#666" stroke-width="2"/>280 <path d="M4 20c1.5-4 14.5-4 16 0" stroke="#666" stroke-width="2" stroke-linecap="round"/>281 </svg>282 <div>My Account</div>283 </div>284 <div class="nav-item">285 <svg width="52" height="52" viewBox="0 0 24 24" fill="none">286 <rect x="5" y="4" width="14" height="16" rx="2" stroke="#666" stroke-width="2"/>287 <path d="M5 9h14" stroke="#666" stroke-width="2"/>288 </svg>289 <div>Gift Cards</div>290 </div>291 <div class="nav-item">292 <svg width="52" height="52" viewBox="0 0 24 24" fill="none">293 <circle cx="12" cy="12" r="9" stroke="#666" stroke-width="2"/>294 <text x="12" y="16" text-anchor="middle" font-size="10" fill="#666">pf</text>295 </svg>296 <div>Studios</div>297 </div>298 <div class="nav-item">299 <svg width="52" height="52" viewBox="0 0 24 24" fill="none">300 <rect x="4" y="4" width="6" height="6" fill="#666"/><rect x="14" y="4" width="6" height="6" fill="#666"/>301 <rect x="4" y="14" width="6" height="6" fill="#666"/><rect x="14" y="14" width="6" height="6" fill="#666"/>302 </svg>303 <div>Categories</div>304 </div>305 <div class="gesture"></div>306 </div>307 308</div>309</body>310</html>