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=1440, initial-scale=1.0">6<title>Product Detail - Blackburn Shoes</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; color:#222; }9 #render-target {10 width: 1440px;11 height: 3120px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Status bar */18 .status {19 height: 120px;20 background: #159aa3;21 color: #fff;22 display: flex;23 align-items: center;24 padding: 0 48px;25 font-weight: 600;26 font-size: 48px;27 letter-spacing: 0.5px;28 }29 .status .left { display:flex; align-items:center; gap:28px; }30 .status .right { margin-left: auto; display:flex; align-items:center; gap:28px; }31 .status .dot { font-size: 60px; line-height:0; opacity: .85; margin-left: 10px; }32 33 /* Top app bar */34 .appbar {35 height: 180px;36 background: #fff;37 display:flex;38 align-items:center;39 padding: 0 40px;40 box-shadow: 0 1px 0 rgba(0,0,0,0.1);41 }42 .appbar .left, .appbar .right { display:flex; align-items:center; }43 .appbar .left { gap:20px; }44 .appbar .right { margin-left:auto; gap:48px; }45 .icon-btn { width: 88px; height: 88px; display:flex; align-items:center; justify-content:center; border-radius: 44px; }46 .icon { width: 56px; height: 56px; display:block; }47 48 /* Scrollable content */49 .content {50 position: absolute;51 left: 0; right: 0;52 top: 300px; /* status 120 + appbar 180 */53 bottom: 250px; /* action bar space */54 overflow-y: auto;55 -webkit-overflow-scrolling: touch;56 padding-bottom: 40px;57 background: #fff;58 }59 60 /* Product image area */61 .media {62 position: relative;63 margin: 40px 48px 20px 48px;64 border-radius: 16px;65 overflow: hidden;66 background: #fff;67 }68 .media .img {69 width: 100%;70 height: 980px;71 background: #E0E0E0;72 border: 1px solid #BDBDBD;73 border-radius: 16px;74 display:flex; align-items:center; justify-content:center;75 color:#757575; font-size: 44px; text-align:center; padding: 20px;76 }77 .float-actions {78 position: absolute;79 right: 24px;80 top: 260px;81 display: flex;82 flex-direction: column;83 gap: 36px;84 pointer-events: none;85 }86 .fab {87 width: 140px; height: 140px;88 background: #fff;89 border-radius: 70px;90 box-shadow: 0 8px 20px rgba(0,0,0,0.12);91 display:flex; align-items:center; justify-content:center;92 pointer-events: auto;93 }94 .carousel-dots {95 display:flex; gap:22px; justify-content:center; align-items:center;96 padding: 28px 0 10px;97 }98 .dotc { width: 22px; height: 22px; border-radius: 11px; background:#D0D6D9; }99 .dotc.active { background:#17a3ab; }100 101 /* Section cards */102 .section {103 padding: 48px;104 border-top: 1px solid #ececec;105 background: #fff;106 }107 .section h3 {108 margin: 0 0 24px 0;109 font-size: 54px;110 font-weight: 700;111 letter-spacing: 0.2px;112 }113 .muted { color:#666; font-weight:500; }114 .color-row { display:flex; align-items:center; gap:36px; margin-top: 28px; }115 .swatch {116 width: 140px; height: 140px; border-radius: 16px;117 background:#000; display:flex; align-items:center; justify-content:center;118 }119 .swatch svg { width: 70px; height: 70px; }120 121 /* Size selector */122 .title-row {123 display:flex; align-items:center;124 }125 .title-row .link {126 margin-left: auto;127 color:#1aa5ad; font-weight:700; font-size: 44px; text-decoration: none;128 }129 .sizes { display:flex; gap:36px; margin-top: 36px; }130 .size-chip {131 width: 170px; height: 130px; border-radius: 22px;132 border: 2px solid #ddd; display:flex; align-items:center; justify-content:center;133 font-size: 56px; color:#333; background:#fff;134 }135 .size-chip.active {136 border: 5px solid #111;137 box-shadow: 0 6px 14px rgba(0,0,0,0.08);138 }139 140 /* Product info & pricing */141 .title {142 padding: 36px 48px 16px;143 font-size: 56px;144 font-weight: 700;145 color:#222;146 }147 .price-row {148 padding: 0 48px 36px;149 display:flex; align-items: baseline; gap: 28px;150 }151 .price { font-size: 72px; font-weight:800; color:#222; }152 .mrp { font-size: 46px; color:#888; text-decoration: line-through; }153 .off { font-size: 50px; color:#12a3a9; font-weight:800; }154 155 /* Bottom action bar */156 .action-bar {157 position: absolute;158 left:0; right:0; bottom: 70px;159 height: 180px;160 display:flex;161 box-shadow: 0 -1px 0 rgba(0,0,0,0.08);162 }163 .btn {164 flex:1; display:flex; align-items:center; justify-content:center;165 font-size: 56px; font-weight: 800; color:#fff; letter-spacing: 0.5px;166 }167 .btn.cart { background:#ff8a22; }168 .btn.buy {169 background: linear-gradient(90deg, #ff8a22, #ff4f64);170 }171 172 /* Bottom gesture pill */173 .gesture {174 position: absolute;175 left: 50%;176 transform: translateX(-50%);177 bottom: 18px;178 width: 520px;179 height: 18px;180 border-radius: 9px;181 background: #000;182 opacity: 0.8;183 }184 185 /* Small helpers */186 .spacer-xxl { height: 28px; }187</style>188</head>189<body>190<div id="render-target">191 192 <!-- Status bar -->193 <div class="status">194 <div class="left">195 <span>10:47</span>196 <!-- simple tiny shopping bag glyphs -->197 <svg width="40" height="40" viewBox="0 0 24 24" fill="none"><path d="M6 9h12l-1 10H7L6 9z" stroke="#fff" stroke-width="2"/><path d="M9 9V7a3 3 0 016 0v2" stroke="#fff" stroke-width="2"/></svg>198 <svg width="40" height="40" viewBox="0 0 24 24" fill="none"><path d="M6 9h12l-1 10H7L6 9z" stroke="#fff" stroke-width="2"/><path d="M9 9V7a3 3 0 016 0v2" stroke="#fff" stroke-width="2"/></svg>199 <svg width="40" height="40" viewBox="0 0 24 24" fill="none"><path d="M6 9h12l-1 10H7L6 9z" stroke="#fff" stroke-width="2"/><path d="M9 9V7a3 3 0 016 0v2" stroke="#fff" stroke-width="2"/></svg>200 <span class="dot">•</span>201 </div>202 <div class="right">203 <!-- network/wifi/battery approximations -->204 <svg width="54" height="54" viewBox="0 0 24 24" fill="none"><path d="M2 18l4-4 4 4" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M10 18l4-4 4 4" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>205 <svg width="54" height="54" viewBox="0 0 24 24" fill="none"><path d="M2 9c5-5 15-5 20 0" stroke="#fff" stroke-width="2"/><path d="M5 12c3-3 11-3 14 0" stroke="#fff" stroke-width="2"/><path d="M8 15c2-2 6-2 8 0" stroke="#fff" stroke-width="2"/></svg>206 <svg width="54" height="54" viewBox="0 0 24 24" fill="none"><rect x="4" y="7" width="14" height="10" rx="2" stroke="#fff" stroke-width="2"/><rect x="18" y="10" width="2" height="4" fill="#fff"/></svg>207 </div>208 </div>209 210 <!-- App Bar -->211 <div class="appbar">212 <div class="left">213 <div class="icon-btn" aria-label="Back">214 <svg class="icon" viewBox="0 0 24 24">215 <path d="M15 5L8 12l7 7" fill="none" stroke="#169fa7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>216 </svg>217 </div>218 </div>219 <div class="right">220 <div class="icon-btn" aria-label="Search">221 <svg class="icon" viewBox="0 0 24 24">222 <circle cx="11" cy="11" r="7" stroke="#169fa7" stroke-width="2" fill="none"></circle>223 <path d="M20 20l-3.5-3.5" stroke="#169fa7" stroke-width="2" stroke-linecap="round"></path>224 </svg>225 </div>226 <div class="icon-btn" aria-label="Cart">227 <svg class="icon" viewBox="0 0 24 24">228 <path d="M6 6h14l-2 9H7L5 3H2" fill="none" stroke="#169fa7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>229 <circle cx="9" cy="20" r="1.5" fill="#169fa7"></circle>230 <circle cx="18" cy="20" r="1.5" fill="#169fa7"></circle>231 </svg>232 </div>233 </div>234 </div>235 236 <!-- Content -->237 <div class="content">238 239 <div class="media">240 <div class="img">[IMG: Blackburn Men's Shoes Size Chart and Measuring Guide]</div>241 242 <div class="float-actions">243 <div class="fab" title="Wishlist">244 <svg width="70" height="70" viewBox="0 0 24 24">245 <path d="M12 21s-7-4.5-7-10a4 4 0 017-3 4 4 0 017 3c0 5.5-7 10-7 10z" fill="none" stroke="#7a8a93" stroke-width="2"/>246 </svg>247 </div>248 <div class="fab" title="Share">249 <svg width="70" height="70" viewBox="0 0 24 24">250 <circle cx="18" cy="5" r="3" stroke="#7a8a93" stroke-width="2" fill="none"/>251 <circle cx="6" cy="12" r="3" stroke="#7a8a93" stroke-width="2" fill="none"/>252 <circle cx="18" cy="19" r="3" stroke="#7a8a93" stroke-width="2" fill="none"/>253 <path d="M9 12l6-5M9 12l6 5" stroke="#7a8a93" stroke-width="2" fill="none" stroke-linecap="round"/>254 </svg>255 </div>256 </div>257 258 <div class="carousel-dots">259 <div class="dotc"></div>260 <div class="dotc"></div>261 <div class="dotc active"></div>262 <div class="dotc"></div>263 <div class="dotc"></div>264 </div>265 </div>266 267 <div class="section">268 <h3>Select Color : <span class="muted">Black</span></h3>269 <div class="color-row">270 <div class="swatch">271 <svg viewBox="0 0 24 24">272 <path d="M5 13l4 4 10-10" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>273 </svg>274 </div>275 </div>276 </div>277 278 <div class="section">279 <div class="title-row">280 <h3 style="margin:0;">Select Size - IND/UK : 9</h3>281 <a href="#" class="link">Size Chart</a>282 </div>283 <div class="sizes">284 <div class="size-chip">6</div>285 <div class="size-chip">7</div>286 <div class="size-chip active">9</div>287 <div class="size-chip">10</div>288 </div>289 </div>290 291 <div class="title">850 Blackburn Formal Shoes For Men's</div>292 <div class="price-row">293 <div class="price">₹750</div>294 <div class="mrp">MRP: ₹1,575</div>295 <div class="off">52% off</div>296 </div>297 298 <div class="spacer-xxl"></div>299 </div>300 301 <!-- Bottom action bar -->302 <div class="action-bar">303 <div class="btn cart">ADD TO CART</div>304 <div class="btn buy">BUY NOW</div>305 </div>306 307 <div class="gesture"></div>308</div>309</body>310</html>