GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="utf-8">5<title>Product Detail - Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; color:#222; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #ffffff;15 }16 /* Top teal app bar */17 .appbar {18 position: relative;19 width: 100%;20 height: 240px;21 background: #149da4;22 color:#fff;23 }24 .status {25 height: 96px;26 display: flex;27 align-items: center;28 padding: 0 36px;29 font-weight: 600;30 font-size: 36px;31 opacity: 0.95;32 }33 .status .right {34 margin-left: auto;35 display: flex;36 gap: 20px;37 align-items: center;38 }39 .toolbar {40 height: 144px;41 display: flex;42 align-items: center;43 padding: 0 36px;44 gap: 24px;45 }46 .toolbar .spacer { flex:1; }47 .toolbar svg { display:block; }48 .divider {49 height: 12px;50 background:#f1f1f1;51 box-shadow: inset 0 -1px 0 rgba(0,0,0,0.08);52 }53 54 /* Product hero image */55 .image-wrap {56 position: relative;57 padding: 36px;58 background:#fff;59 }60 .hero {61 width: 100%;62 height: 880px;63 background:#E0E0E0;64 border:1px solid #BDBDBD;65 display:flex;66 align-items:center;67 justify-content:center;68 color:#757575;69 font-size: 40px;70 }71 .fab {72 position: absolute;73 right: 48px;74 bottom: 120px;75 width: 132px;76 height: 132px;77 background: #ffffff;78 border-radius: 50%;79 box-shadow: 0 6px 18px rgba(0,0,0,0.15);80 display:flex;81 align-items:center;82 justify-content:center;83 }84 .fab.share { bottom: -20px; }85 .carousel-dots {86 margin: 44px 0 10px;87 display:flex;88 justify-content:center;89 gap: 22px;90 }91 .dot {92 width: 18px; height: 18px; border-radius: 50%;93 background:#e0e0e0;94 }95 .dot.active { background:#35a9b0; }96 97 /* Size selector */98 .section {99 padding: 24px 36px;100 border-top: 1px solid #eee;101 background:#fff;102 }103 .size-header {104 display:flex;105 align-items:center;106 font-weight:700;107 font-size: 40px;108 color:#333;109 }110 .size-header .link {111 margin-left:auto;112 color:#35a9b0;113 font-weight:600;114 font-size:34px;115 }116 .size-grid {117 display:flex;118 gap: 28px;119 padding-top: 30px;120 flex-wrap: wrap;121 }122 .size-btn {123 width: 130px;124 height: 110px;125 border:1px solid #ddd;126 border-radius: 16px;127 display:flex; align-items:center; justify-content:center;128 font-size: 40px; color:#333; background:#fff;129 }130 131 /* Title and rating */132 .title { font-size: 48px; font-weight:700; color:#222; padding: 8px 36px 12px; }133 .rating-row {134 display:flex; align-items:center; gap: 18px;135 padding: 0 36px 10px;136 }137 .badge {138 border:1px solid #e0e0e0;139 border-radius: 14px;140 padding: 16px 22px;141 display:flex; align-items:center; gap:16px;142 font-size: 34px; color:#444; background:#fff;143 }144 .stars { color:#f6b300; display:flex; gap:6px; }145 .small-muted { color:#777; font-size: 32px; }146 147 .madein {148 margin: 18px 36px;149 width: 260px; height: 110px;150 background:#E0E0E0; border:1px solid #BDBDBD;151 display:flex; align-items:center; justify-content:center; color:#757575; font-size: 30px; border-radius: 12px;152 }153 154 .price-row {155 padding: 8px 36px;156 display:flex; align-items: baseline; gap: 18px; flex-wrap:wrap;157 }158 .price {159 font-size: 64px; font-weight:700; color:#111;160 }161 .mrp {162 color:#7d7d7d; font-size: 38px; text-decoration: line-through;163 }164 .off {165 color:#1aa1a7; font-size: 40px; font-weight:700;166 }167 .tax-note { padding: 8px 36px 26px; color:#666; font-size: 32px; }168 169 /* Bottom bar */170 .bottom-bar {171 position: absolute;172 left:0; right:0; bottom:0;173 height: 168px;174 display:flex;175 box-shadow: 0 -6px 20px rgba(0,0,0,0.08);176 z-index: 2;177 }178 .btn {179 flex:1;180 display:flex; align-items:center; justify-content:center;181 font-size: 44px; font-weight:800; letter-spacing:1px; color:#fff;182 }183 .btn.cart { background:#ff7a00; }184 .btn.buy { background: linear-gradient(90deg, #ff7a00 0%, #ff4660 100%); }185 186 /* Simple utility icons color */187 .icon-white path, .icon-white circle, .icon-white line, .icon-white polyline { stroke:#ffffff; }188 .icon-gray path, .icon-gray circle, .icon-gray line, .icon-gray polyline { stroke:#666; }189</style>190</head>191<body>192<div id="render-target">193 <div class="appbar">194 <div class="status">195 10:09196 <div class="right">197 <span style="width:18px;height:18px;border-radius:50%;background:#fff;opacity:.9;display:inline-block"></span>198 <span style="width:18px;height:18px;border-radius:50%;background:#fff;opacity:.9;display:inline-block"></span>199 <span style="width:18px;height:18px;border-radius:50%;background:#fff;opacity:.9;display:inline-block"></span>200 <span style="width:18px;height:18px;border-radius:50%;background:#fff;opacity:.9;display:inline-block"></span>201 </div>202 </div>203 <div class="toolbar">204 <!-- Back arrow -->205 <svg class="icon-white" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke-width="2.5">206 <polyline points="15 18 9 12 15 6"></polyline>207 </svg>208 <div class="spacer"></div>209 <!-- Search -->210 <svg class="icon-white" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke-width="2.2">211 <circle cx="11" cy="11" r="7"></circle>212 <line x1="21" y1="21" x2="16.65" y2="16.65"></line>213 </svg>214 <!-- Cart -->215 <svg class="icon-white" width="66" height="66" viewBox="0 0 24 24" fill="none" stroke-width="2">216 <circle cx="9" cy="20" r="1.6"></circle>217 <circle cx="17" cy="20" r="1.6"></circle>218 <path d="M3 4h2l2.2 10h9.6l2-7H6"></path>219 </svg>220 </div>221 </div>222 <div class="divider"></div>223 224 <div class="image-wrap">225 <div class="hero">[IMG: Men's Black Running Shoes]</div>226 <!-- Floating wishlist heart -->227 <div class="fab" title="Wishlist">228 <svg class="icon-gray" width="56" height="56" viewBox="0 0 24 24" fill="none" stroke-width="1.8">229 <path d="M12 21s-7-4.35-9.5-8.1C.8 10 2 6.5 5.2 6.5c2 0 3.1 1.3 3.8 2.3.7-1 1.8-2.3 3.8-2.3 3.2 0 4.4 3.5 2.7 6.4C19 16.65 12 21 12 21z"></path>230 </svg>231 </div>232 <!-- Floating share -->233 <div class="fab share" title="Share">234 <svg class="icon-gray" width="56" height="56" viewBox="0 0 24 24" fill="none" stroke-width="1.8">235 <circle cx="18" cy="5" r="3"></circle>236 <circle cx="6" cy="12" r="3"></circle>237 <circle cx="18" cy="19" r="3"></circle>238 <path d="M8.5 11l6-4"></path>239 <path d="M8.5 13l6 4"></path>240 </svg>241 </div>242 243 <div class="carousel-dots">244 <div class="dot"></div>245 <div class="dot active"></div>246 <div class="dot"></div>247 <div class="dot"></div>248 <div class="dot"></div>249 </div>250 </div>251 252 <div class="section">253 <div class="size-header">254 Select Size - IND/UK255 <span class="link">Size Chart</span>256 </div>257 <div class="size-grid">258 <div class="size-btn">6</div>259 <div class="size-btn">7</div>260 <div class="size-btn">8</div>261 <div class="size-btn">9</div>262 <div class="size-btn">10</div>263 </div>264 </div>265 266 <div class="section" style="border-top:1px solid #f0f0f0;">267 <div class="title">Men's Black Running Sports Shoes</div>268 <div class="rating-row">269 <div class="badge">270 <strong>2.8</strong>271 <div class="stars">★ ★ ★ ☆ ☆</div>272 <span class="small-muted">(51) & 5 Reviews</span>273 </div>274 </div>275 276 <div class="madein">[IMG: Made in India Badge]</div>277 278 <div class="price-row">279 <div class="price">₹649</div>280 <div class="mrp">MRP: ₹899</div>281 <div class="off">27% off</div>282 </div>283 <div class="tax-note">Inclusive of all taxes</div>284 </div>285 286 <!-- Bottom sticky actions -->287 <div class="bottom-bar">288 <div class="btn cart">ADD TO CART</div>289 <div class="btn buy">BUY NOW</div>290 </div>291</div>292</body>293</html>