GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>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; color:#111;}9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#ffffff; border-radius:28px; box-shadow:0 8px 24px rgba(0,0,0,0.15);12 }13 /* Top gradient header */14 .status-header {15 height:260px;16 background: linear-gradient(90deg, #a8e1d7, #bfeadf);17 position:relative;18 padding:24px 30px;19 box-sizing:border-box;20 }21 .status-row {22 display:flex; align-items:center; justify-content:space-between;23 color:#1a3d3a; font-weight:600; font-size:40px;24 }25 .status-icons { display:flex; align-items:center; gap:20px; color:#1a3d3a; }26 .search-row {27 margin-top:24px; display:flex; align-items:center; gap:24px;28 }29 .back-btn {30 width:72px; height:72px; display:flex; align-items:center; justify-content:center;31 }32 .search-bar {33 flex:1; height:100px; background:#fff; border-radius:28px; box-shadow:0 6px 14px rgba(0,0,0,0.12);34 display:flex; align-items:center; padding:0 28px; gap:22px; box-sizing:border-box;35 font-size:40px; color:#333;36 }37 .search-text { flex:1; color:#333; }38 /* Hero image */39 .hero {40 position:relative; background:#fff;41 }42 .hero-img {43 width:100%; height:520px; background:#E0E0E0; border:1px solid #BDBDBD;44 display:flex; align-items:center; justify-content:center; color:#757575; font-size:38px;45 }46 .wish-circle {47 position:absolute; left:30px; top:440px;48 width:92px; height:92px; border-radius:50%; background:#fff; box-shadow:0 4px 10px rgba(0,0,0,0.15);49 display:flex; align-items:center; justify-content:center; border:1px solid #ddd;50 }51 .carousel-dots {52 height:70px; display:flex; align-items:center; justify-content:center; gap:24px;53 }54 .dot { width:26px; height:26px; border-radius:50%; border:3px solid #bbb; }55 .dot.active { background:#666; border-color:#666; }56 /* Content */57 .content { padding:30px; box-sizing:border-box; }58 .title-line { font-size:48px; margin-bottom:20px; }59 .title-line b { color:#0b3160; }60 .color-scroller { display:flex; gap:28px; overflow-x:auto; padding-bottom:14px; }61 .color-item { min-width:200px; }62 .round-img {63 width:200px; height:200px; border-radius:50%; border:3px solid #cfcfcf;64 background:#E0E0E0; display:flex; align-items:center; justify-content:center; color:#757575; font-size:26px; position:relative;65 }66 .badge {67 position:absolute; bottom:-16px; left:18px; background:#c73131; color:#fff;68 padding:10px 16px; border-radius:12px; font-size:26px; box-shadow:0 2px 6px rgba(0,0,0,0.2);69 }70 .price-line { margin-top:26px; font-size:34px; color:#111; }71 .mrp { color:#8c8c8c; text-decoration:line-through; font-size:30px; }72 /* Sizes */73 .size-title { margin-top:40px; font-size:46px; }74 .size-grid { margin-top:24px; display:flex; gap:22px; }75 .size-box {76 width:160px; height:110px; border:2px solid #cfcfcf; border-radius:18px;77 display:flex; align-items:center; justify-content:center; font-size:42px; color:#333; background:#fff;78 }79 .size-box.selected { background:#111; color:#fff; border-color:#111; }80 .size-guide { margin-top:26px; color:#2a73b8; font-size:40px; }81 .divider { height:18px; background:#f0f0f0; margin:34px -30px; }82 /* Deal & pricing block */83 .deal-badge {84 display:inline-block; background:#c73131; color:#fff; padding:12px 18px; border-radius:12px;85 font-weight:700; font-size:32px; margin-bottom:18px;86 }87 .discount-row { display:flex; align-items:flex-end; gap:20px; }88 .discount { font-size:90px; color:#d03a3a; font-weight:700; }89 .final-price { font-size:100px; font-weight:700; }90 .mrp-row { margin-top:10px; font-size:34px; color:#777; }91 .tax-note { margin-top:24px; font-size:40px; }92 /* Offers card */93 .offers {94 border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5; padding:28px 0; display:flex; align-items:center; justify-content:space-between;95 }96 .offer-left { display:flex; align-items:center; gap:26px; }97 .offer-icon {98 width:70px; height:70px; border-radius:50%; background:#f7f1e5; border:1px solid #e2d7c3;99 display:flex; align-items:center; justify-content:center;100 }101 .offer-text { font-size:42px; font-weight:700; }102 .offer-sub { font-size:36px; color:#666; margin-top:6px; }103 .delivery { padding-top:28px; font-size:40px; }104 .delivery .link { color:#2a73b8; }105 /* Bottom nav */106 .bottom-nav {107 position:absolute; left:0; right:0; bottom:110px; height:170px; background:#fff; border-top:1px solid #e6e6e6;108 display:flex; align-items:center; justify-content:space-around;109 }110 .nav-item { display:flex; flex-direction:column; align-items:center; gap:16px; color:#333; font-size:34px; }111 .nav-item.active { color:#2a73b8; }112 .gesture {113 position:absolute; left:50%; transform:translateX(-50%); bottom:40px;114 width:320px; height:18px; background:#bdbdbd; border-radius:12px;115 }116 /* Simple hide scrollbar for scroller */117 .color-scroller::-webkit-scrollbar { height:0; }118 /* SVG defaults */119 svg { display:block; }120</style>121</head>122<body>123<div id="render-target">124 <!-- Header -->125 <div class="status-header">126 <div class="status-row">127 <div>7:26</div>128 <div class="status-icons">129 <!-- simple dots to mimic notification icons -->130 <div style="width:16px; height:16px; background:#1a3d3a; border-radius:50%;"></div>131 <div style="width:16px; height:16px; background:#1a3d3a; border-radius:50%;"></div>132 <div style="width:16px; height:16px; background:#1a3d3a; border-radius:50%;"></div>133 <div style="width:16px; height:16px; background:#1a3d3a; border-radius:50%;"></div>134 <div style="width:16px; height:16px; background:#1a3d3a; border-radius:50%;"></div>135 <div style="width:16px; height:16px; background:#1a3d3a; border-radius:50%;"></div>136 <div style="width:16px; height:16px; background:#1a3d3a; border-radius:50%; margin-left:10px;"></div>137 <!-- WiFi icon -->138 <svg width="48" height="48" viewBox="0 0 24 24">139 <path d="M12 18c.8 0 1.5.7 1.5 1.5S12.8 21 12 21s-1.5-.7-1.5-1.5S11.2 18 12 18zm-4.6-3.2c2.5-2.2 6.7-2.2 9.2 0l-1.3 1.4c-1.8-1.5-5-1.5-6.8 0l-1.1-1.4zm-3.3-3.6c4.4-3.9 11.5-3.9 15.9 0l-1.4 1.5c-3.5-3-9.6-3-13.1 0l-1.4-1.5z" fill="#1a3d3a"/>140 </svg>141 <!-- Battery icon -->142 <svg width="46" height="46" viewBox="0 0 24 24">143 <path d="M18 6h1c1.1 0 2 .9 2 2v8c0 1.1-.9 2-2 2h-1v1h-2v-1H5c-1.1 0-2-.9-2-2V8c0-1.1.9-2 2-2h11zM5 8v8h13V8H5z" fill="#1a3d3a"/>144 </svg>145 </div>146 </div>147 148 <div class="search-row">149 <div class="back-btn">150 <svg width="48" height="48" viewBox="0 0 24 24">151 <path d="M15 6l-6 6 6 6" stroke="#1a3d3a" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>152 </svg>153 </div>154 <div class="search-bar">155 <svg width="42" height="42" viewBox="0 0 24 24">156 <path d="M21 21l-4.3-4.3M10.5 17a6.5 6.5 0 1 1 0-13 6.5 6.5 0 0 1 0 13z" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>157 </svg>158 <div class="search-text">formal coat for women</div>159 <svg width="44" height="44" viewBox="0 0 24 24">160 <path d="M7 7h3l1-2h2l1 2h3v10H7V7z" stroke="#333" stroke-width="1.6" fill="none" />161 </svg>162 </div>163 </div>164 </div>165 166 <!-- Hero -->167 <div class="hero">168 <div class="hero-img">[IMG: Product Photo]</div>169 <div class="wish-circle">170 <svg width="44" height="44" viewBox="0 0 24 24">171 <path d="M12 21s-6.5-4.3-8.3-7.2C2.4 11.1 3.9 8 6.9 8c1.8 0 3 1 3.9 2 1-1 2.1-2 3.9-2 3 0 4.5 3.1 3.2 5.8C18.6 16.7 12 21 12 21z" fill="none" stroke="#c73131" stroke-width="2"/>172 </svg>173 </div>174 <div class="carousel-dots">175 <div class="dot"></div>176 <div class="dot active"></div>177 <div class="dot"></div>178 <div class="dot"></div>179 </div>180 </div>181 182 <!-- Content -->183 <div class="content">184 <div class="title-line">Colour: <b>Blue</b></div>185 186 <div class="color-scroller">187 <div class="color-item">188 <div class="round-img">[IMG: Navy Blazer]</div>189 <div class="badge">Limited Time</div>190 <div class="price-line">₹949.00</div>191 <div class="mrp">₹1,999.00</div>192 </div>193 <div class="color-item">194 <div class="round-img">[IMG: Olive Cardigan]</div>195 <div class="badge">Limited Time</div>196 <div class="price-line">₹949.00</div>197 <div class="mrp">₹1,999.00</div>198 </div>199 <div class="color-item">200 <div class="round-img">[IMG: Blue Blazer]</div>201 <div class="price-line">₹999.00</div>202 <div class="mrp">₹1,999.00</div>203 </div>204 <div class="color-item">205 <div class="round-img">[IMG: Maroon Blazer]</div>206 <div class="price-line">₹999.00</div>207 <div class="mrp">₹1,999.00</div>208 </div>209 <div class="color-item">210 <div class="round-img">[IMG: Black Blazer]</div>211 <div class="badge">Limited Time</div>212 <div class="price-line">₹949.00</div>213 <div class="mrp">₹1,999.00</div>214 </div>215 </div>216 217 <div class="size-title">Size: M</div>218 <div class="size-grid">219 <div class="size-box">S</div>220 <div class="size-box selected">M</div>221 <div class="size-box">L</div>222 <div class="size-box">XL</div>223 <div class="size-box">2XL</div>224 </div>225 226 <div class="size-guide">Size guide</div>227 228 <div class="divider"></div>229 230 <div>231 <div class="deal-badge">Great Indian Festival</div>232 <div class="discount-row">233 <div class="discount">-53%</div>234 <div class="final-price">₹949</div>235 </div>236 <div class="mrp-row">M.R.P.: <span class="mrp">₹1,999</span></div>237 <div class="tax-note">Inclusive of all taxes</div>238 </div>239 240 <div class="divider"></div>241 242 <div class="offers">243 <div class="offer-left">244 <div class="offer-icon">245 <svg width="36" height="36" viewBox="0 0 24 24">246 <path d="M12 2l2 6 6 2-6 2-2 6-2-6-6-2 6-2 2-6z" fill="#c28d3a"/>247 </svg>248 </div>249 <div>250 <div class="offer-text">Save Extra with Offers</div>251 <div class="offer-sub">Bank Offers and Partner Offers</div>252 </div>253 </div>254 <svg width="38" height="38" viewBox="0 0 24 24">255 <path d="M6 9l6 6 6-6" stroke="#333" stroke-width="2.2" fill="none" stroke-linecap="round"/>256 </svg>257 </div>258 259 <div class="delivery">260 <span class="link">FREE delivery</span> Wednesday, 25 October. <span class="link">Details</span>261 </div>262 </div>263 264 <!-- Bottom Navigation -->265 <div class="bottom-nav">266 <div class="nav-item active">267 <svg width="44" height="44" viewBox="0 0 24 24">268 <path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1v-9z" fill="#2a73b8"/>269 </svg>270 <div>Home</div>271 </div>272 <div class="nav-item">273 <svg width="44" height="44" viewBox="0 0 24 24">274 <path d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm-8 9c0-4.4 3.6-8 8-8s8 3.6 8 8H4z" fill="#555"/>275 </svg>276 <div>You</div>277 </div>278 <div class="nav-item">279 <svg width="44" height="44" viewBox="0 0 24 24">280 <path d="M5 12h14M5 6h14M5 18h14" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/>281 </svg>282 <div>More</div>283 </div>284 <div class="nav-item">285 <svg width="44" height="44" viewBox="0 0 24 24">286 <path d="M7 7h13l-2 9H8L7 7zm3 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z" fill="#555"/>287 </svg>288 <div>Cart</div>289 </div>290 <div class="nav-item">291 <svg width="44" height="44" viewBox="0 0 24 24">292 <path d="M4 6h16v2H4V6zm0 5h16v2H4v-2zm0 5h16v2H4v-2z" fill="#555"/>293 </svg>294 <div>Menu</div>295 </div>296 </div>297 298 <div class="gesture"></div>299</div>300</body>301</html>