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; color: #222; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Top gradient/status/search */18 .top-gradient {19 width: 1080px;20 height: 280px;21 background: linear-gradient(135deg, #7ad5d4, #b2e5d8);22 position: relative;23 padding: 20px 36px 0 36px;24 box-sizing: border-box;25 }26 .status-row {27 display: flex;28 align-items: center;29 justify-content: space-between;30 color: #0a2b2b;31 font-weight: 600;32 font-size: 38px;33 opacity: 0.95;34 padding-top: 8px;35 }36 .status-icons span {37 display: inline-block;38 width: 18px;39 height: 18px;40 margin-left: 18px;41 background: rgba(0,0,0,0.35);42 border-radius: 50%;43 }44 45 .search-row {46 margin-top: 28px;47 display: flex;48 align-items: center;49 gap: 18px;50 }51 .back-btn {52 width: 72px;53 height: 72px;54 display: grid;55 place-items: center;56 }57 .search-box {58 flex: 1;59 background: #fff;60 height: 96px;61 border-radius: 28px;62 box-shadow: 0 6px 14px rgba(0,0,0,0.12);63 display: flex;64 align-items: center;65 padding: 0 26px;66 box-sizing: border-box;67 gap: 18px;68 color: #5b5b5b;69 font-size: 36px;70 }71 .search-box .placeholder { flex: 1; }72 .scan-btn {73 width: 72px;74 height: 72px;75 border-radius: 18px;76 background: #eef6f6;77 display: grid;78 place-items: center;79 }80 81 /* Product header: brand + rating */82 .product-header {83 width: 100%;84 background: #fff;85 padding: 28px 36px 24px 36px;86 box-sizing: border-box;87 border-top: 1px solid #eaeaea;88 border-bottom: 1px solid #f0f0f0;89 display: flex;90 }91 .product-info {92 flex: 1;93 }94 .brand-line {95 color: #117a8b;96 font-weight: 600;97 font-size: 36px;98 margin-bottom: 8px;99 }100 .title-line {101 font-size: 34px;102 color: #333;103 }104 .rating {105 display: flex;106 align-items: center;107 gap: 8px;108 margin-left: 18px;109 }110 .rating-count { font-size: 34px; color: #555; margin-left: 8px; }111 112 /* Image area */113 .image-wrap {114 position: relative;115 width: 100%;116 height: 860px;117 background: #fafafa;118 border-bottom: 1px solid #eee;119 display: flex;120 align-items: center;121 justify-content: center;122 }123 .img-placeholder {124 width: 920px;125 height: 640px;126 background: #E0E0E0;127 border: 1px solid #BDBDBD;128 color: #757575;129 display: flex;130 align-items: center;131 justify-content: center;132 font-size: 36px;133 border-radius: 12px;134 }135 .circle-btn {136 position: absolute;137 width: 86px;138 height: 86px;139 border-radius: 50%;140 background: #ffffff;141 border: 1px solid #e2e2e2;142 display: grid;143 place-items: center;144 box-shadow: 0 2px 8px rgba(0,0,0,0.06);145 }146 .circle-btn.share { right: 34px; top: 26px; }147 .circle-btn.wishlist { left: 34px; bottom: 26px; }148 149 .dots {150 height: 60px;151 display: flex;152 justify-content: center;153 align-items: center;154 gap: 22px;155 background: #fff;156 border-bottom: 1px solid #eee;157 }158 .dot {159 width: 18px; height: 18px; border-radius: 50%;160 border: 2px solid #bbb;161 background: #fff;162 }163 .dot.active { background: #777; border-color: #777; }164 165 /* Variants section */166 .variants {167 padding: 28px 36px 10px 36px;168 }169 .section-title {170 font-size: 40px;171 color: #333;172 margin-bottom: 22px;173 }174 .section-title b { font-weight: 700; }175 .thumb-row {176 display: flex;177 gap: 28px;178 }179 .thumb-card {180 width: 316px;181 display: flex;182 flex-direction: column;183 align-items: center;184 }185 .thumb {186 width: 220px;187 height: 220px;188 border-radius: 50%;189 background: #E0E0E0;190 border: 6px solid #d9d9d9;191 display: grid;192 place-items: center;193 color: #757575;194 font-size: 26px;195 position: relative;196 }197 .thumb.selected { border-color: #111; }198 .badge {199 position: absolute;200 bottom: -16px;201 left: 50%;202 transform: translateX(-50%);203 background: #e01844;204 color: #fff;205 padding: 10px 18px;206 border-radius: 12px;207 font-size: 28px;208 font-weight: 700;209 white-space: nowrap;210 }211 .price {212 margin-top: 32px;213 font-size: 34px;214 color: #222;215 font-weight: 600;216 }217 .mrp {218 margin-top: 6px;219 font-size: 30px;220 color: #b7b7b7;221 text-decoration: line-through;222 }223 224 .size-row {225 padding: 18px 36px 22px 36px;226 font-size: 40px;227 }228 229 /* Bottom navigation */230 .bottom-nav {231 position: absolute;232 left: 0;233 bottom: 60px;234 width: 100%;235 height: 180px;236 border-top: 1px solid #e6e6e6;237 background: #ffffff;238 display: flex;239 justify-content: space-around;240 align-items: center;241 }242 .nav-item {243 width: 160px;244 display: flex;245 flex-direction: column;246 align-items: center;247 color: #444;248 font-size: 28px;249 }250 .nav-item.active { color: #0bb3b3; }251 .home-indicator {252 position: absolute;253 bottom: 18px;254 left: 50%;255 transform: translateX(-50%);256 width: 360px;257 height: 10px;258 background: #c9c9c9;259 border-radius: 6px;260 }261 262 /* Utilities */263 .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }264</style>265</head>266<body>267<div id="render-target">268 269 <!-- Top Gradient Area -->270 <div class="top-gradient">271 <div class="status-row">272 <div>11:07</div>273 <div class="status-icons">274 <span></span><span></span><span></span><span></span>275 <span style="width:6px;height:6px;border-radius:50%;margin-left:16px;background:rgba(0,0,0,0.4)"></span>276 <span style="width:20px;height:18px;margin-left:22px;background:rgba(0,0,0,0.5);border-radius:3px;"></span>277 <span style="width:14px;height:24px;margin-left:18px;background:rgba(0,0,0,0.6);border-radius:2px;"></span>278 </div>279 </div>280 281 <div class="search-row">282 <div class="back-btn" aria-label="Back">283 <svg width="40" height="40" viewBox="0 0 24 24" fill="#222"><path d="M15.5 3.9 14.1 2.5 5.6 11l8.5 8.5 1.4-1.4L8.4 11z"/></svg>284 </div>285 <div class="search-box">286 <svg width="44" height="44" viewBox="0 0 24 24" fill="#555"><path d="M15.5 14h-.8l-.3-.3a6 6 0 1 0-.7.7l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"/></svg>287 <div class="placeholder">party wear shoes for mens</div>288 <div class="scan-btn" title="Scan">289 <svg width="34" height="34" viewBox="0 0 24 24" fill="#0aa"><path d="M4 4h6v2H6v4H4V4zm14 0v6h-2V6h-4V4h6zM4 20v-6h2v4h4v2H4zm16-6v6h-6v-2h4v-4h2z"/></svg>290 </div>291 </div>292 </div>293 </div>294 295 <!-- Product Header -->296 <div class="product-header">297 <div class="product-info">298 <div class="brand-line">Brand: Centrino</div>299 <div class="title-line">Centrino Mens 2810-2 Uniform Dress Shoe</div>300 </div>301 <div class="rating" title="4 out of 5">302 <svg width="40" height="40" viewBox="0 0 24 24" fill="#ff9800"><path d="M12 17.3l-5.5 3.3 1.5-6.3L3 9.8l6.4-.5L12 3l2.6 6.3 6.4.5-5 4.5 1.5 6.3z"/></svg>303 <svg width="40" height="40" viewBox="0 0 24 24" fill="#ff9800"><path d="M12 17.3l-5.5 3.3 1.5-6.3L3 9.8l6.4-.5L12 3l2.6 6.3 6.4.5-5 4.5 1.5 6.3z"/></svg>304 <svg width="40" height="40" viewBox="0 0 24 24" fill="#ff9800"><path d="M12 17.3l-5.5 3.3 1.5-6.3L3 9.8l6.4-.5L12 3l2.6 6.3 6.4.5-5 4.5 1.5 6.3z"/></svg>305 <svg width="40" height="40" viewBox="0 0 24 24" fill="#ff9800"><path d="M12 17.3l-5.5 3.3 1.5-6.3L3 9.8l6.4-.5L12 3l2.6 6.3 6.4.5-5 4.5 1.5 6.3z"/></svg>306 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#ff9800" stroke-width="2"><path d="M12 3l2.6 6.3 6.4.5-5 4.5 1.5 6.3L12 17.3 6.5 20.6l1.5-6.3-5-4.5 6.4-.5z"/></svg>307 <div class="rating-count">13</div>308 </div>309 </div>310 311 <!-- Image Area -->312 <div class="image-wrap">313 <div class="img-placeholder">[IMG: Black Dress Shoe]</div>314 <div class="circle-btn share" title="Share">315 <svg width="34" height="34" viewBox="0 0 24 24" fill="#666"><path d="M18 16.1a2.9 2.9 0 1 0 0 5.8 2.9 2.9 0 0 0 0-5.8zM6 9.1a2.9 2.9 0 1 0 0-5.8 2.9 2.9 0 0 0 0 5.8zm12 2.4-8.3 4.8a3 3 0 0 1-.6-1.6l8.1-4.7a3 3 0 0 1 .8 1.5zm-9.7-1.8L16.7 5a3 3 0 0 0-.8-1.5L7.7 7.9c.2.6.4 1.2.6 1.8z"/></svg>316 </div>317 <div class="circle-btn wishlist" title="Add to wishlist">318 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2"><path d="M12 21s-6-4.2-8.5-7.2a5 5 0 0 1 7.1-7l1.4 1.3 1.4-1.3a5 5 0 1 1 7.1 7C18 16.8 12 21 12 21z"/></svg>319 </div>320 </div>321 322 <div class="dots">323 <div class="dot active"></div>324 <div class="dot"></div><div class="dot"></div><div class="dot"></div>325 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>326 </div>327 328 <!-- Variants -->329 <div class="variants">330 <div class="section-title">Colour: <b>Black</b></div>331 <div class="thumb-row">332 <div class="thumb-card">333 <div class="thumb selected">334 <span>[IMG: Black]</span>335 </div>336 <div class="price">₹709.00</div>337 <div class="mrp">₹2,499.00</div>338 </div>339 340 <div class="thumb-card">341 <div class="thumb">342 <span>[IMG: Brown]</span>343 <div class="badge">Limited Time</div>344 </div>345 <div class="price">₹759.00</div>346 <div class="mrp">₹2,499.00</div>347 </div>348 349 <div class="thumb-card">350 <div class="thumb">351 <span>[IMG: Tan]</span>352 <div class="badge">Limited Time</div>353 </div>354 <div class="price">₹709.00</div>355 <div class="mrp">₹2,499.00</div>356 </div>357 </div>358 </div>359 360 <div class="size-row">Size: <b>9 UK</b></div>361 362 <!-- Bottom Navigation -->363 <div class="bottom-nav">364 <div class="nav-item active">365 <svg width="56" height="56" viewBox="0 0 24 24" fill="#0bb3b3"><path d="M12 3l9 7h-2v9h-6v-6H11v6H5v-9H3z"/></svg>366 <div>Home</div>367 </div>368 <div class="nav-item">369 <svg width="56" height="56" viewBox="0 0 24 24" fill="#666"><path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4 0-7 2.5-7 5v1h14v-1c0-2.5-3-5-7-5z"/></svg>370 <div>You</div>371 </div>372 <div class="nav-item">373 <svg width="56" height="56" viewBox="0 0 24 24" fill="#666"><path d="M3 11h8V3H3v8zm0 10h8v-8H3v8zm10 0h8v-8h-8v8zm0-18v8h8V3h-8z"/></svg>374 <div>More</div>375 </div>376 <div class="nav-item">377 <svg width="56" height="56" viewBox="0 0 24 24" fill="#666"><path d="M7 4h-2l-1 2H1v2h2l3 9h12l3-9H7.6L7 4zm3 16a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm8 0a2 2 0 1 0 .001 4.001A2 2 0 0 0 18 20z"/></svg>378 <div>Cart</div>379 </div>380 <div class="nav-item">381 <svg width="56" height="56" viewBox="0 0 24 24" fill="#666"><path d="M4 6h16v2H4zM4 11h16v2H4zM4 16h16v2H4z"/></svg>382 <div>Menu</div>383 </div>384 </div>385 386 <div class="home-indicator"></div>387</div>388</body>389</html>