GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Product Page Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 color: #1c2430;15 }16 17 /* Status bar */18 .status-bar {19 height: 90px;20 background: #2f2f31;21 color: #fff;22 display: flex;23 align-items: center;24 padding: 0 40px;25 font-weight: 600;26 font-size: 38px;27 letter-spacing: 1px;28 }29 .status-icons {30 margin-left: auto;31 display: flex;32 align-items: center;33 gap: 28px;34 }35 .status-dot {36 width: 12px; height: 12px; background: #fff; border-radius: 50%;37 }38 39 /* Top nav */40 .top-nav {41 height: 120px;42 background: #ffffff;43 display: flex;44 align-items: center;45 padding: 0 28px;46 border-bottom: 1px solid #e8e8ea;47 }48 .nav-left, .nav-right { display: flex; align-items: center; }49 .nav-left { gap: 24px; }50 .nav-right { margin-left: auto; gap: 36px; }51 .icon-btn {52 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;53 border-radius: 14px;54 }55 .icon {56 width: 48px; height: 48px;57 }58 59 /* Carousel */60 .carousel {61 width: 100%;62 height: 520px;63 background: #E0E0E0;64 border-bottom: 1px solid #d6d6d6;65 display: flex;66 align-items: center;67 justify-content: center;68 color: #666;69 font-size: 42px;70 }71 .dots {72 display: flex;73 gap: 14px;74 justify-content: center;75 margin: 18px 0 8px;76 }77 .dot {78 width: 18px; height: 18px; border-radius: 50%; background: #cdd2db;79 }80 .dot.active { background: #2e3a56; }81 82 .page {83 padding: 0 32px 240px;84 }85 86 .row-between {87 display: flex;88 justify-content: space-between;89 align-items: center;90 }91 92 .tag-premium {93 display: inline-flex;94 background: #f2d048;95 color: #1d2130;96 padding: 10px 22px;97 border-radius: 10px;98 font-weight: 700;99 font-size: 34px;100 margin-top: 10px;101 }102 103 .title {104 font-size: 54px;105 font-weight: 800;106 line-height: 1.2;107 margin: 22px 0 16px;108 color: #1f2a3b;109 }110 111 .rating {112 display: flex;113 align-items: center;114 gap: 16px;115 color: #2e3a56;116 font-size: 36px;117 margin-bottom: 16px;118 }119 .star {120 width: 34px; height: 34px; color: #f0c419;121 }122 .wa-circle {123 margin-left: auto;124 width: 96px; height: 96px; border-radius: 50%;125 border: 1px solid #d8dbe3;126 display: flex; align-items: center; justify-content: center;127 }128 129 .card {130 border: 1px solid #e5e7ed;131 border-radius: 18px;132 padding: 24px;133 margin-top: 22px;134 background: #fff;135 }136 .section-title {137 font-size: 40px;138 font-weight: 700;139 color: #25314a;140 margin-bottom: 16px;141 }142 143 .color-grid {144 display: grid;145 grid-template-columns: repeat(4, 1fr);146 gap: 18px;147 }148 .thumb {149 height: 220px;150 border: 2px solid #cfd4dd;151 border-radius: 16px;152 background: #E0E0E0;153 display: flex; align-items: center; justify-content: center;154 color: #6b6f76; font-size: 30px; text-align: center;155 }156 .thumb.selected {157 border: 4px solid #d5b04c;158 }159 160 .sizes {161 display: flex;162 gap: 28px;163 flex-wrap: wrap;164 padding-top: 12px;165 }166 .size-pill {167 width: 150px; height: 150px; border-radius: 50%;168 border: 3px solid #bfc6d3; color: #1f2a3b;169 display: flex; align-items: center; justify-content: center;170 font-size: 46px; font-weight: 700; background: #fff;171 }172 .size-chart {173 margin-left: auto;174 color: #b28c1f;175 font-weight: 800;176 font-size: 40px;177 }178 179 .stats {180 display: grid;181 grid-template-columns: repeat(3, 1fr);182 gap: 16px;183 text-align: center;184 padding: 16px 0;185 }186 .stat-item .num {187 font-weight: 800; font-size: 50px; color: #0f1531;188 }189 .stat-item .label {190 margin-top: 8px; font-size: 34px; color: #495269; display: flex; justify-content: center; align-items: center; gap: 12px;191 }192 193 .delivery-card .input-area {194 border: 1px solid #e5e7ed;195 border-radius: 16px;196 padding: 26px;197 margin-top: 10px;198 font-size: 36px;199 color: #8b90a1;200 height: 110px;201 display: flex; align-items: center;202 }203 204 /* Bottom bar */205 .bottom-bar {206 position: absolute;207 left: 0; right: 0; bottom: 0;208 height: 220px;209 background: #ffffff;210 box-shadow: 0 -6px 18px rgba(0,0,0,0.08);211 display: flex;212 align-items: center;213 padding: 20px 28px 26px;214 gap: 24px;215 }216 .fav-square {217 width: 120px; height: 120px; border-radius: 26px; border: 1px solid #dfe3ea; display: flex; align-items: center; justify-content: center;218 background: #f8f9fb;219 }220 .price-wrap {221 flex: 1; display: flex; align-items: baseline; gap: 26px; flex-wrap: wrap;222 }223 .price-now {224 font-size: 60px; font-weight: 900; color: #0f1531;225 }226 .price-old {227 font-size: 44px; color: #8b90a1; text-decoration: line-through;228 }229 .price-off {230 font-size: 40px; color: #1a6ed2; font-weight: 700;231 }232 .free-delivery {233 font-size: 42px; color: #0a8f42; font-weight: 800; margin-left: auto;234 }235 .btn {236 height: 120px; min-width: 300px; border-radius: 28px; display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 800; border: none;237 }238 .btn-dark { background: #0f1420; color: #fff; }239 .btn-gold { background: #e9c047; color: #1c2430; }240 241 /* Simple helpers */242 .muted { color: #69738a; }243</style>244</head>245<body>246<div id="render-target">247 248 <!-- Status Bar -->249 <div class="status-bar">250 10:14251 <div class="status-icons">252 <div class="status-dot"></div>253 <div class="status-dot"></div>254 <div class="status-dot"></div>255 <div class="status-dot"></div>256 <svg class="icon" viewBox="0 0 24 24" fill="#fff"><rect x="3" y="7" width="16" height="10" rx="2"/><rect x="19" y="10" width="2" height="4"/></svg>257 </div>258 </div>259 260 <!-- Top Navigation -->261 <div class="top-nav">262 <div class="nav-left">263 <div class="icon-btn" title="Back">264 <svg class="icon" viewBox="0 0 24 24" stroke="#1f2a3b" fill="none" stroke-width="2">265 <path d="M15 18l-6-6 6-6"/>266 </svg>267 </div>268 </div>269 <div class="nav-right">270 <div class="icon-btn" title="Search">271 <svg class="icon" viewBox="0 0 24 24" stroke="#1f2a3b" fill="none" stroke-width="2">272 <circle cx="11" cy="11" r="7"></circle>273 <path d="M21 21l-4.3-4.3"></path>274 </svg>275 </div>276 <div class="icon-btn" title="Wishlist">277 <svg class="icon" viewBox="0 0 24 24" stroke="#1f2a3b" fill="none" stroke-width="2">278 <path d="M12 21s-7-4.4-9-8.5C1 9 2.5 6 5.5 6A5 5 0 0 1 12 8a5 5 0 0 1 6.5-2c3 0 4.5 3 2.5 6.5C19 16.6 12 21 12 21z"/>279 </svg>280 </div>281 <div class="icon-btn" title="Cart">282 <svg class="icon" viewBox="0 0 24 24" stroke="#1f2a3b" fill="none" stroke-width="2">283 <circle cx="9" cy="20" r="1.8"></circle>284 <circle cx="17" cy="20" r="1.8"></circle>285 <path d="M3 4h2l2.4 12.2a2 2 0 0 0 2 1.6h7.6a2 2 0 0 0 1.9-1.4L22 8H7.3"></path>286 </svg>287 </div>288 </div>289 </div>290 291 <!-- Carousel -->292 <div class="carousel">293 [IMG: White sneaker close-up]294 </div>295 <div class="dots">296 <div class="dot"></div>297 <div class="dot active"></div>298 <div class="dot"></div>299 <div class="dot"></div>300 <div class="dot"></div>301 <div class="dot"></div>302 <div class="dot"></div>303 <div class="dot"></div>304 </div>305 306 <div class="page">307 <div class="tag-premium">Premium</div>308 309 <div class="row-between">310 <div style="flex:1;">311 <div class="title">Atom Men White Casual Sneaker</div>312 <div class="rating">313 <svg class="star" viewBox="0 0 24 24" fill="#f0c419"><path d="M12 2l3.1 6.5L22 9.2l-5 4.9L18.2 22 12 18.6 5.8 22 7 14.1 2 9.2l6.9-0.7z"/></svg>314 <span>4.0</span>315 <span class="muted">88 Reviews</span>316 </div>317 </div>318 <div class="wa-circle">319 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#2bb741" stroke-width="2">320 <path d="M4 19l1.5-4A8 8 0 1 1 20 12a8 8 0 0 1-11.5 6.9L4 19z"/>321 <path d="M9.5 8.5c.2 1.6 1.2 3.2 2.8 4.3 1 .7 1.9 1 2.7.9l1-.9-1.1-1.8-1.3.4c-.8-.3-1.7-1.1-2.2-1.8l.2-1.3-2-1z"/>322 </svg>323 </div>324 </div>325 326 <div class="card">327 <div class="section-title">Colors available</div>328 <div class="color-grid">329 <div class="thumb">[IMG: Grey & Green Sneaker]</div>330 <div class="thumb">[IMG: Black Sneaker Set]</div>331 <div class="thumb selected">[IMG: White & Blue Sneaker]</div>332 <div class="thumb">[IMG: White & Green Sneaker]</div>333 </div>334 </div>335 336 <div class="card">337 <div class="row-between">338 <div class="section-title" style="margin-bottom:0;">Available size</div>339 <div class="size-chart">Size Chart</div>340 </div>341 <div class="sizes">342 <div class="size-pill">6</div>343 <div class="size-pill">7</div>344 <div class="size-pill">8</div>345 <div class="size-pill">9</div>346 <div class="size-pill">10</div>347 <div class="size-pill">11</div>348 </div>349 </div>350 351 <div class="card">352 <div class="stats">353 <div class="stat-item">354 <div class="num">0</div>355 <div class="label">356 <svg class="icon" viewBox="0 0 24 24" stroke="#5c6477" fill="none" stroke-width="2">357 <path d="M12 21s-7-4.4-9-8.5C1 9 2.5 6 5.5 6A5 5 0 0 1 12 8a5 5 0 0 1 6.5-2c3 0 4.5 3 2.5 6.5C19 16.6 12 21 12 21z"/>358 </svg>359 Likes360 </div>361 </div>362 <div class="stat-item">363 <div class="num">0</div>364 <div class="label">365 <svg class="icon" viewBox="0 0 24 24" stroke="#5c6477" fill="none" stroke-width="2">366 <circle cx="12" cy="12" r="9"></circle>367 <path d="M12 3v9l6 3"></path>368 </svg>369 Coins Earned370 </div>371 </div>372 <div class="stat-item">373 <div class="num">0</div>374 <div class="label">375 <svg class="icon" viewBox="0 0 24 24" stroke="#5c6477" fill="none" stroke-width="2">376 <path d="M4 12h8M12 12l-3-3M12 12l-3 3"></path>377 <rect x="14" y="7" width="7" height="10" rx="2"></rect>378 </svg>379 Shares380 </div>381 </div>382 </div>383 </div>384 385 <div class="card delivery-card">386 <div class="section-title">Check Delivery</div>387 <div class="input-area">Enter pincode</div>388 </div>389 </div>390 391 <!-- Bottom action bar -->392 <div class="bottom-bar">393 <div class="fav-square">394 <svg class="icon" viewBox="0 0 24 24" stroke="#1f2a3b" fill="none" stroke-width="2">395 <path d="M12 21s-7-4.4-9-8.5C1 9 2.5 6 5.5 6A5 5 0 0 1 12 8a5 5 0 0 1 6.5-2c3 0 4.5 3 2.5 6.5C19 16.6 12 21 12 21z"/>396 </svg>397 </div>398 399 <div class="price-wrap">400 <div class="price-now">₹ 1195</div>401 <div class="price-old">₹ 3295</div>402 <div class="price-off">64% Off</div>403 <div class="free-delivery">Free Delivery</div>404 </div>405 406 <button class="btn btn-dark">ADD TO BAG</button>407 <button class="btn btn-gold">BUY NOW</button>408 </div>409 410</div>411</body>412</html>