GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Product Detail - iBELL Screwdriver</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background:#ffffff;10 border-radius:24px;11 box-shadow: 0 8px 24px rgba(0,0,0,0.15);12 }13 /* Status bar */14 .status-bar {15 position:absolute; top:0; left:0; width:100%; height:120px;16 background:#0d0d0d; color:#fff; padding:0 36px;17 display:flex; align-items:center; justify-content:space-between;18 box-sizing:border-box;19 }20 .status-left, .status-right { display:flex; align-items:center; gap:28px; }21 .time { font-size:42px; letter-spacing:1px; }22 .dot { width:12px; height:12px; background:#ccc; border-radius:50%; }23 /* Hero image area */24 .hero {25 position:absolute; top:120px; left:0; width:100%; height:1180px;26 background:#f5f5f5;27 box-sizing:border-box;28 }29 .hero-inner {30 position:absolute; left:80px; right:80px; top:60px; bottom:60px;31 border:1px solid #bdbdbd; background:#E0E0E0;32 display:flex; align-items:center; justify-content:center; color:#555;33 font-size:36px; text-align:center; padding:20px;34 }35 /* top controls over hero */36 .hero-controls {37 position:absolute; top:24px; left:24px; right:24px;38 display:flex; align-items:center; justify-content:space-between;39 }40 .circle-btn {41 width:84px; height:84px; border-radius:42px; background:rgba(255,255,255,0.9);42 display:flex; align-items:center; justify-content:center; border:1px solid #ddd;43 }44 .hero-right-icons { display:flex; gap:28px; }45 .share-bubble {46 position:absolute; right:36px; top:840px;47 width:120px; height:120px; border-radius:24px; background:#ffffff;48 box-shadow:0 6px 14px rgba(0,0,0,0.12);49 border:1px solid #e5e5e5;50 display:flex; align-items:center; justify-content:center;51 }52 .carousel-dots {53 position:absolute; bottom:72px; left:80px; display:flex; gap:18px;54 }55 .dot-lg { width:18px; height:18px; background:#1f1f1f; border-radius:50%; opacity:0.8; }56 .dot-sm { width:18px; height:18px; background:#bdbdbd; border-radius:50%; }57 .view-similar {58 position:absolute; right:36px; top:980px;59 background:#ffffff; color:#1f1f1f; border:1px solid #dcdcdc;60 padding:22px 32px; border-radius:18px;61 box-shadow:0 4px 10px rgba(0,0,0,0.1);62 display:flex; align-items:center; gap:18px; font-size:36px;63 }64 .view-similar .icon {65 width:60px; height:60px; border-radius:12px; border:1px solid #bdbdbd;66 display:flex; align-items:center; justify-content:center;67 }68 /* Details section */69 .details {70 position:absolute; top:1300px; left:0; right:0; padding:0 48px;71 box-sizing:border-box; color:#1f1f1f;72 }73 .brand-row {74 display:flex; align-items:center; justify-content:space-between;75 }76 .brand { font-size:48px; font-weight:700; }77 .follow { color:#e3366c; font-weight:700; font-size:40px; }78 .title { margin-top:18px; font-size:44px; line-height:1.3; }79 .price-row { margin-top:24px; display:flex; align-items:baseline; gap:24px; }80 .price { font-size:56px; font-weight:700; }81 .mrp { color:#777; font-size:36px; text-decoration:none; }82 .off { color:#2e7d32; font-size:40px; font-weight:700; }83 .tax { margin-top:12px; color:#777; font-size:34px; }84 /* Similar products header */85 .similar-header {86 margin-top:48px; background:#121212; color:#fff;87 padding:28px 48px; font-size:48px; font-weight:800;88 border-radius:16px;89 }90 /* Product cards */91 .cards {92 margin-top:24px; padding:0 24px; display:flex; gap:28px;93 }94 .card {95 width:330px; border:1px solid #e2e2e2; border-radius:24px; overflow:hidden;96 box-shadow:0 6px 16px rgba(0,0,0,0.08); background:#fff;97 }98 .card-img {99 height:310px; background:#E0E0E0; border-bottom:1px solid #cfcfcf;100 display:flex; align-items:center; justify-content:center; color:#555; font-size:28px; padding:12px; text-align:center;101 }102 .card-body { padding:18px 20px; }103 .card-brand { color:#555; font-size:32px; font-weight:700; }104 .card-title { margin-top:6px; font-size:30px; color:#333; height:78px; overflow:hidden; }105 .card-price { margin-top:10px; display:flex; align-items:center; gap:16px; }106 .card-price .p { font-size:36px; font-weight:800; }107 .strike { color:#999; font-size:28px; text-decoration:line-through; }108 .discount { color:#2e7d32; font-size:30px; font-weight:800; }109 /* Bottom home indicator */110 .home-indicator {111 position:absolute; bottom:34px; left:50%; transform:translateX(-50%);112 width:600px; height:20px; background:#000; opacity:0.12; border-radius:10px;113 }114 /* Simple icon styles */115 svg { display:block; }116</style>117</head>118<body>119<div id="render-target">120 121 <!-- Status Bar -->122 <div class="status-bar">123 <div class="status-left">124 <div class="time">4:11</div>125 <div class="dot"></div>126 <div class="dot"></div>127 <div class="dot"></div>128 </div>129 <div class="status-right">130 <!-- simple icons -->131 <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="10" stroke="#fff" stroke-width="2" fill="none"/></svg>132 <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff"><path d="M5 12h14" stroke="#fff" stroke-width="2"/></svg>133 <div style="font-size:32px;">94%</div>134 </div>135 </div>136 137 <!-- Hero Area -->138 <div class="hero">139 <div class="hero-controls">140 <div class="circle-btn">141 <!-- back arrow -->142 <svg width="40" height="40" viewBox="0 0 24 24">143 <path d="M15 6l-6 6 6 6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>144 </svg>145 </div>146 <div class="hero-right-icons">147 <div class="circle-btn">148 <!-- heart icon -->149 <svg width="40" height="40" viewBox="0 0 24 24">150 <path d="M12 21s-7-4.6-9-8.6C1.4 9 3.5 6 6.7 6c2 0 3.3 1.2 4.3 2.5C12 7.2 13.3 6 15.3 6c3.2 0 5.3 3 3.7 6.4C19 16.4 12 21 12 21z" stroke="#333" stroke-width="2" fill="none"/>151 </svg>152 </div>153 <div class="circle-btn">154 <!-- bag icon -->155 <svg width="40" height="40" viewBox="0 0 24 24">156 <path d="M6 8h12l-1 12H7L6 8z" stroke="#333" stroke-width="2" fill="none"/>157 <path d="M9 8V6a3 3 0 0 1 6 0v2" stroke="#333" stroke-width="2" fill="none"/>158 </svg>159 </div>160 </div>161 </div>162 163 <div class="hero-inner">[IMG: iBELL Cordless Rechargeable Electric Screwdriver Kit]</div>164 165 <div class="share-bubble">166 <!-- share icon -->167 <svg width="72" height="72" viewBox="0 0 24 24">168 <circle cx="6" cy="12" r="2" fill="#666"/>169 <circle cx="18" cy="5" r="2" fill="#666"/>170 <circle cx="18" cy="19" r="2" fill="#666"/>171 <path d="M8 12l8-7M8 12l8 7" stroke="#666" stroke-width="2" fill="none"/>172 </svg>173 </div>174 175 <div class="carousel-dots">176 <div class="dot-lg"></div>177 <div class="dot-sm"></div>178 <div class="dot-sm"></div>179 <div class="dot-sm"></div>180 <div class="dot-sm"></div>181 </div>182 183 <div class="view-similar">184 <div class="icon">185 <svg width="44" height="44" viewBox="0 0 24 24">186 <path d="M9 7h6v10H9z" stroke="#333" stroke-width="2" fill="none"/>187 <path d="M5 9h14" stroke="#333" stroke-width="2"/>188 </svg>189 </div>190 <div>View Similar</div>191 </div>192 </div>193 194 <!-- Details Section -->195 <div class="details">196 <div class="brand-row">197 <div class="brand">iBELL</div>198 <div class="follow">+ Follow</div>199 </div>200 <div class="title">iBELL MS06-16 Cordless Rechargeable Electric Screwdriver (Red/Black)</div>201 202 <div class="price-row">203 <div class="price">₹1749</div>204 <div class="mrp">MRP: ₹2200</div>205 <div class="off">(21%)</div>206 </div>207 <div class="tax">inclusive of all taxes</div>208 209 <div class="similar-header">Similar Products</div>210 211 <div class="cards">212 <!-- Card 1 -->213 <div class="card">214 <div class="card-img">[IMG: iBELL ED06-91 High Speed Drill with Bits]</div>215 <div class="card-body">216 <div class="card-brand">iBELL</div>217 <div class="card-title">ED06-91 High Speed Corded Drill</div>218 <div class="card-price">219 <div class="p">₹1,399</div>220 <div class="strike">₹2,300</div>221 <div class="discount">39% OFF</div>222 </div>223 </div>224 </div>225 <!-- Card 2 -->226 <div class="card">227 <div class="card-img">[IMG: iBELL CV 50-81 1050 W Concrete Vibrator]</div>228 <div class="card-body">229 <div class="card-brand">iBELL</div>230 <div class="card-title">CV 50-81 1050 W Concrete Vibrator</div>231 <div class="card-price">232 <div class="p">₹3,890</div>233 <div class="strike">₹4,800</div>234 <div class="discount">18% OFF</div>235 </div>236 </div>237 </div>238 <!-- Card 3 -->239 <div class="card">240 <div class="card-img">[IMG: iBELL EC16-18 1800 W Auto Chain Saw]</div>241 <div class="card-body">242 <div class="card-brand">iBELL</div>243 <div class="card-title">EC16-18 1800 W Auto Chain Saw</div>244 <div class="card-price">245 <div class="p">₹4,800</div>246 <div class="strike">₹5,000</div>247 <div class="discount">4% OFF</div>248 </div>249 </div>250 </div>251 </div>252 </div>253 254 <!-- Home Indicator -->255 <div class="home-indicator"></div>256 257</div>258</body>259</html>