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 Page Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #ffffff;12 }13 /* Top status bar */14 .status-bar {15 height: 130px; background: #7b7b7b; color: #fff; font-size: 36px;16 display: flex; align-items: center; padding: 0 40px; box-sizing: border-box;17 }18 .status-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }19 .status-dot { width: 16px; height: 16px; background: #e8e8e8; border-radius: 50%; }20 /* Header with search */21 .header {22 height: 150px; display: flex; align-items: center; padding: 0 32px; gap: 20px; box-sizing: border-box;23 }24 .icon-btn { width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center; }25 .back-icon svg, .cart-icon svg, .menu-icon svg { width: 44px; height: 44px; }26 .logo {27 width: 80px; height: 80px; background: #e64a4a; border-radius: 16px;28 color: #fff; font-weight: bold; display: flex; align-items: center; justify-content: center;29 }30 .search {31 flex: 1; height: 96px; background: #f5f7f9; border: 2px solid #d6dce2; border-radius: 48px;32 display: flex; align-items: center; padding: 0 24px; box-sizing: border-box; gap: 18px;33 }34 .search .placeholder { color: #9099a3; font-size: 34px; }35 .search .mic { margin-left: auto; width: 44px; height: 44px; }36 /* Page title */37 .page-title {38 font-size: 56px; font-weight: 700; color: #2d2d2d; margin: 20px 32px;39 }40 /* Specifications card */41 .spec-card {42 margin: 0 0 24px 0; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6;43 background: #ffffff;44 }45 .spec-header {46 font-size: 40px; font-weight: 700; color: #333; padding: 24px 32px; border-bottom: 1px solid #ebebeb;47 }48 .spec-table { width: 100%; border-collapse: collapse; }49 .spec-table td {50 font-size: 36px; color: #424242; padding: 36px 32px; border-right: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2;51 }52 .spec-table td:last-child { color: #2a7bdc; border-right: none; }53 .spec-table tr:nth-child(4) td { background: #f4f4f6; }54 .show-all {55 color: #2a7bdc; font-weight: 700; font-size: 34px; padding: 28px 32px; text-transform: uppercase;56 }57 /* Frequently bought section */58 .section-title {59 font-size: 48px; font-weight: 700; color: #3a3a3a; margin: 24px 32px;60 }61 .card-row {62 display: flex; gap: 24px; align-items: center; padding: 24px 32px; border-top: 1px solid #e6e6e6;63 }64 .img-ph {65 width: 200px; height: 160px; background: #E0E0E0; border: 1px solid #BDBDBD;66 display: flex; justify-content: center; align-items: center; color: #757575; font-size: 26px; text-align: center;67 }68 .row-text { flex: 1; }69 .row-text .name { font-size: 36px; color: #333; margin-bottom: 10px; }70 .row-text .price { font-size: 42px; font-weight: 700; }71 .plus-box {72 width: 100px; height: 100px; border-radius: 12px; background: #f1f1f1; border: 1px solid #dcdcdc;73 display: flex; align-items: center; justify-content: center;74 }75 .mini-card {76 flex: 1; display: flex; gap: 22px; align-items: center;77 }78 .mini-text { flex: 1; }79 .mini-text .name { font-size: 36px; color: #333; line-height: 1.2; }80 .mini-text .by { font-size: 30px; color: #777; margin-top: 6px; }81 .mini-text .strike { font-size: 34px; color: #9e9e9e; text-decoration: line-through; margin-top: 10px; }82 .mini-text .off { font-size: 36px; color: #1a9e33; font-weight: 700; margin-left: 12px; }83 /* Bottom overlay */84 .bottom-sheet {85 position: absolute; left: 0; right: 0; bottom: 120px;86 background: #ffffff; border-top-left-radius: 48px; border-top-right-radius: 48px;87 box-shadow: 0 0 30px rgba(0,0,0,0.12);88 padding: 40px 32px 180px 32px; box-sizing: border-box;89 }90 .sheet-close {91 position: absolute; right: 32px; top: 24px;92 width: 64px; height: 64px; border-radius: 32px; background: #f1f1f1; display: flex; align-items: center; justify-content: center;93 }94 .sheet-title { font-size: 44px; font-weight: 700; color: #3a3a3a; margin-right: 260px; }95 .sheet-row { display: flex; align-items: flex-start; gap: 24px; margin-top: 18px; }96 .sheet-left { flex: 1; }97 .sheet-left .incl { font-size: 32px; color: #707070; margin-top: 8px; }98 .sheet-left .big-price { font-size: 60px; font-weight: 800; margin-top: 14px; }99 .sheet-left .mrp { font-size: 34px; color: #8a8a8a; margin-top: 8px; }100 .sheet-left .off { color: #16a34a; font-weight: 800; margin-left: 16px; }101 .coupon {102 width: 240px; height: 120px; border: 2px dashed #16a34a; border-radius: 20px;103 display: flex; align-items: center; justify-content: center; flex-direction: column;104 color: #16a34a; font-weight: 800;105 }106 .coupon small { color: #6b6b6b; font-weight: 600; margin-top: 6px; }107 .actions {108 position: absolute; left: 32px; right: 32px; bottom: 24px; display: flex; gap: 24px;109 }110 .btn {111 flex: 1; height: 130px; border-radius: 24px; display: flex; align-items: center; justify-content: center; gap: 18px;112 color: #fff; font-size: 40px; font-weight: 800; text-transform: uppercase;113 }114 .btn.add { background: #2176ff; }115 .btn.buy { background: #e53935; }116 .btn svg { width: 50px; height: 50px; }117 /* Gesture bar */118 .gesture { position: absolute; bottom: 26px; left: 340px; width: 400px; height: 12px; background: #cfcfcf; border-radius: 6px; }119</style>120</head>121<body>122<div id="render-target">123 <!-- Status bar -->124 <div class="status-bar">125 <div>8:16</div>126 <div class="status-right">127 <div class="status-dot"></div>128 <div class="status-dot"></div>129 <div class="status-dot"></div>130 <div class="status-dot"></div>131 </div>132 </div>133 134 <!-- Header with back, logo, search, cart, menu -->135 <div class="header">136 <div class="icon-btn back-icon">137 <svg viewBox="0 0 24 24">138 <path d="M15 18l-6-6 6-6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>139 </svg>140 </div>141 <div class="logo">m</div>142 <div class="search">143 <svg viewBox="0 0 24 24" width="44" height="44">144 <circle cx="10" cy="10" r="7" stroke="#808a96" stroke-width="2" fill="none"/>145 <path d="M15 15l6 6" stroke="#808a96" stroke-width="2" fill="none" stroke-linecap="round"/>146 </svg>147 <div class="placeholder">Search for IT & Electro...</div>148 <svg class="mic" viewBox="0 0 24 24">149 <rect x="9" y="4" width="6" height="10" rx="3" fill="#4285F4"/>150 <path d="M5 11c0 4 3 6 7 6s7-2 7-6" stroke="#4285F4" stroke-width="2" fill="none"/>151 <path d="M12 21v-4" stroke="#4285F4" stroke-width="2" stroke-linecap="round"/>152 </svg>153 </div>154 <div class="icon-btn cart-icon">155 <svg viewBox="0 0 24 24">156 <path d="M6 6h14l-2 8H8L6 6z" fill="none" stroke="#333" stroke-width="2"/>157 <circle cx="9" cy="20" r="2" fill="#333"/>158 <circle cx="17" cy="20" r="2" fill="#333"/>159 </svg>160 </div>161 <div class="icon-btn menu-icon">162 <svg viewBox="0 0 24 24">163 <path d="M3 6h18M3 12h18M3 18h18" stroke="#333" stroke-width="2" stroke-linecap="round"/>164 </svg>165 </div>166 </div>167 168 <div class="page-title">About This Product</div>169 170 <div class="spec-card">171 <div class="spec-header">Product Specifications</div>172 <table class="spec-table">173 <tr>174 <td style="width:50%;">Brand</td>175 <td>Ranz</td>176 </tr>177 <tr>178 <td>Colour</td>179 <td style="color:#333;">Black</td>180 </tr>181 <tr>182 <td>Load Capacity</td>183 <td style="color:#333;">30 kg</td>184 </tr>185 <tr>186 <td>Size</td>187 <td style="color:#333;">14-42 inch</td>188 </tr>189 </table>190 <div class="show-all">SHOW ALL SPECIFICATIONS</div>191 </div>192 193 <div class="section-title">Frequently Bought Together</div>194 195 <div class="card-row">196 <div class="img-ph">[IMG: Wall Mount Stand]</div>197 <div class="row-text">198 <div class="name">RANZ 14-42 Inch Fix Lcd Wall Mount Stand</div>199 <div class="price">₹327</div>200 </div>201 </div>202 203 <div class="card-row">204 <div class="plus-box">205 <svg viewBox="0 0 24 24" width="40" height="40">206 <path d="M12 5v14M5 12h14" stroke="#666" stroke-width="2" stroke-linecap="round"/>207 </svg>208 </div>209 <div class="mini-card">210 <div class="img-ph" style="width:220px; height:140px;">[IMG: Electric Blower]</div>211 <div class="mini-text">212 <div class="name">Jakmister 950W 18000rpm Electric Dust...</div>213 <div class="by">By: Jakmister</div>214 <div style="display:flex; align-items:center; gap:10px; margin-top:10px;">215 <div class="strike">₹3,000</div>216 <div class="off">45% OFF</div>217 </div>218 </div>219 </div>220 </div>221 222 <!-- Bottom sheet -->223 <div class="bottom-sheet">224 <div class="sheet-close">225 <svg viewBox="0 0 24 24" width="28" height="28">226 <path d="M6 6l12 12M18 6L6 18" stroke="#666" stroke-width="2" stroke-linecap="round"/>227 </svg>228 </div>229 <div class="sheet-title">RANZ 14-42 Inch Fix Lcd Wall Mount Stand</div>230 <div class="sheet-row">231 <div class="sheet-left">232 <div class="incl">₹327 (Incl. of all taxes)</div>233 <div class="big-price">₹277 <span style="font-size:40px; font-weight:700; color:#4a4a4a;">+ ₹50 GST</span></div>234 <div class="mrp">MRP ₹590 <span class="off">44% OFF</span></div>235 </div>236 <div class="coupon">237 HELLO238 <small>Tap to Copy</small>239 </div>240 </div>241 242 <div class="actions">243 <div class="btn add">244 <svg viewBox="0 0 24 24">245 <path d="M6 6h14l-2 8H8L6 6z" fill="none" stroke="#fff" stroke-width="2"/>246 <circle cx="9" cy="20" r="2" fill="#fff"/>247 <circle cx="17" cy="20" r="2" fill="#fff"/>248 </svg>249 ADD TO CART250 </div>251 <div class="btn buy">BUY NOW</div>252 </div>253 </div>254 255 <div class="gesture"></div>256</div>257</body>258</html>