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 Detail Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 * { box-sizing: border-box; }10 #render-target {11 width: 1080px;12 height: 2400px;13 position: relative;14 overflow: hidden;15 background: #ffffff;16 font-family: Arial, Helvetica, sans-serif;17 color: #222;18 }19 20 /* Header with status and search */21 .header {22 position: relative;23 height: 220px;24 background: linear-gradient(180deg, #87ded0 0%, #b2e6c5 100%);25 }26 .status {27 height: 78px;28 display: flex;29 align-items: center;30 padding: 0 28px;31 font-size: 34px;32 color: #1a1a1a;33 opacity: 0.95;34 }35 .status .right {36 margin-left: auto;37 display: flex;38 gap: 18px;39 align-items: center;40 }41 .back-btn {42 position: absolute;43 top: 116px;44 left: 22px;45 width: 82px;46 height: 82px;47 background: transparent;48 border: none;49 padding: 0;50 }51 .search-bar {52 position: absolute;53 top: 112px;54 left: 120px;55 width: 840px;56 height: 96px;57 background: #fff;58 border-radius: 22px;59 box-shadow: 0 6px 16px rgba(0,0,0,0.18);60 display: flex;61 align-items: center;62 padding: 0 24px;63 }64 .search-bar .q {65 margin-left: 12px;66 font-size: 38px;67 color: #333;68 flex: 1;69 }70 .scan {71 width: 60px;72 height: 60px;73 border-radius: 14px;74 background: #eef4f7;75 display: flex;76 align-items: center;77 justify-content: center;78 }79 80 /* Hero product block */81 .hero {82 position: relative;83 padding: 26px 30px 0;84 }85 .hero .img {86 width: 1020px;87 height: 680px;88 background: #E0E0E0;89 border: 1px solid #BDBDBD;90 display: flex;91 align-items: center;92 justify-content: center;93 color: #757575;94 font-size: 38px;95 border-radius: 12px;96 }97 .fav {98 position: absolute;99 left: 36px;100 top: 610px;101 width: 70px;102 height: 70px;103 border-radius: 50%;104 background: #ffffff;105 border: 1px solid #d9d9d9;106 display: flex;107 align-items: center;108 justify-content: center;109 }110 .dots {111 display: flex;112 justify-content: center;113 align-items: center;114 gap: 14px;115 margin-top: 22px;116 }117 .dot {118 width: 16px;119 height: 16px;120 border-radius: 50%;121 background: #d7d7d7;122 }123 .dot.active { background: #0da4a0; }124 .bought {125 text-align: center;126 color: #666;127 font-size: 34px;128 margin-top: 18px;129 }130 131 .divider {132 width: 100%;133 height: 2px;134 background: #e8e8e8;135 margin: 14px 0;136 }137 138 /* Pattern row */139 .pattern {140 position: relative;141 padding: 22px 28px;142 display: flex;143 align-items: center;144 gap: 14px;145 }146 .pattern .label { color: #6e6e6e; font-size: 38px; }147 .pattern .value { font-size: 42px; font-weight: 700; }148 .pattern .chev {149 margin-left: auto;150 width: 40px; height: 40px;151 }152 153 /* Variants carousel (static row) */154 .variants {155 padding: 0 24px 12px;156 display: flex;157 gap: 26px;158 }159 .card {160 width: 330px;161 border: 1px solid #dadada;162 border-radius: 20px;163 padding: 16px;164 background: #fff;165 }166 .card.selected {167 border-color: #f39a3a;168 background: #fff6ed;169 }170 .card .vimg {171 width: 100%;172 height: 260px;173 background: #E0E0E0;174 border: 1px solid #BDBDBD;175 border-radius: 12px;176 display: flex;177 align-items: center;178 justify-content: center;179 color: #757575;180 font-size: 30px;181 }182 .card .title {183 font-size: 36px;184 margin: 14px 6px 6px;185 color: #222;186 }187 .price {188 font-size: 38px;189 font-weight: 700;190 margin-left: 6px;191 }192 .unit {193 font-size: 30px;194 color: #7c7c7c;195 margin-left: 6px;196 }197 .stock { color: #1c8f3c; font-size: 30px; margin-left: 6px; }198 .unavail { color: #cc3a26; font-size: 30px; margin: 10px 6px 6px; }199 200 /* Deal section */201 .deal {202 padding: 24px 28px 18px;203 }204 .deal .badge {205 display: inline-block;206 background: #e11c48;207 color: #fff;208 padding: 14px 22px;209 border-radius: 12px;210 font-weight: 700;211 font-size: 34px;212 margin-bottom: 18px;213 }214 .line {215 font-size: 36px;216 margin: 12px 0;217 color: #333;218 }219 .strike {220 text-decoration: line-through;221 color: #9a9a9a;222 }223 .dealprice {224 color: #d12b24;225 font-weight: 800;226 font-size: 44px;227 }228 .fulfilled {229 display: inline-block;230 background: #4c5562;231 color: #fff;232 font-size: 26px;233 padding: 6px 12px;234 border-radius: 10px;235 margin-left: 12px;236 }237 .ends {238 font-size: 32px;239 color: #444;240 margin-top: 4px;241 }242 .save { font-size: 36px; }243 .save .val { color: #d12b24; font-weight: 700; }244 245 /* Bottom navigation */246 .bottom-nav {247 position: absolute;248 bottom: 0;249 left: 0;250 width: 1080px;251 height: 156px;252 border-top: 1px solid #e6e6e6;253 background: #fff;254 display: flex;255 justify-content: space-around;256 align-items: center;257 }258 .nav-item {259 display: flex;260 flex-direction: column;261 align-items: center;262 gap: 8px;263 color: #3c3c3c;264 font-size: 28px;265 }266 .nav-item.active { color: #0da4a0; }267 .nav-item svg { width: 56px; height: 56px; }268</style>269</head>270<body>271<div id="render-target">272 273 <div class="header">274 <div class="status">275 <div>10:15</div>276 <div class="right">277 <span>•</span>278 <span>◦</span>279 <span>◦</span>280 <span>🔋</span>281 </div>282 </div>283 284 <button class="back-btn" aria-label="Back">285 <svg viewBox="0 0 24 24" width="82" height="82">286 <path d="M14 4 L6 12 L14 20" stroke="#222" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>287 </svg>288 </button>289 290 <div class="search-bar">291 <svg width="40" height="40" viewBox="0 0 24 24">292 <circle cx="10" cy="10" r="7" stroke="#666" stroke-width="2" fill="none"/>293 <path d="M16 16 L22 22" stroke="#666" stroke-width="2" stroke-linecap="round"/>294 </svg>295 <div class="q">quaker oats</div>296 <div class="scan" title="Scan">297 <svg viewBox="0 0 24 24" width="28" height="28">298 <rect x="5" y="7" width="14" height="10" stroke="#333" stroke-width="2" fill="none" rx="2"/>299 <circle cx="12" cy="12" r="3" stroke="#333" stroke-width="2" fill="none"/>300 </svg>301 </div>302 </div>303 </div>304 305 <div class="hero">306 <div class="img">[IMG: Quaker oats package close-up]</div>307 <div class="fav" title="Add to wishlist">308 <svg viewBox="0 0 24 24" width="40" height="40">309 <path d="M12 21s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 11c0 5.6-7 10-7 10z" fill="none" stroke="#777" stroke-width="1.8"/>310 </svg>311 </div>312 313 <div class="dots">314 <div class="dot active"></div>315 <div class="dot"></div>316 <div class="dot"></div>317 <div class="dot"></div>318 <div class="dot"></div>319 <div class="dot"></div>320 </div>321 322 <div class="bought">10K+ bought in past month</div>323 </div>324 325 <div class="divider"></div>326 327 <div class="pattern">328 <div class="label">Pattern Name:</div>329 <div class="value">Oats, 1kg</div>330 <svg class="chev" viewBox="0 0 24 24">331 <path d="M6 14 L12 8 L18 14" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>332 </svg>333 </div>334 335 <div class="variants">336 <div class="card">337 <div class="vimg">[IMG: 1.5kg combo pack]</div>338 <div class="title">Oats, 1.5kg ...</div>339 <div class="unavail">Currently unavailable.</div>340 </div>341 342 <div class="card selected">343 <div class="vimg">[IMG: Oats 1kg pack]</div>344 <div class="title">Oats, 1kg</div>345 <div class="price">₹179.00</div>346 <div class="unit">(₹179.00 / kg)</div>347 <div class="stock">In stock</div>348 </div>349 350 <div class="card">351 <div class="vimg">[IMG: Oats 1kg + ...]</div>352 <div class="title">Oats, 1kg + ...</div>353 <div class="unavail">Currently unavailable.</div>354 </div>355 </div>356 357 <div class="divider"></div>358 359 <div class="deal">360 <div class="badge">Deal of the Day</div>361 <div class="line">M.R.P.: <span class="strike">₹199</span></div>362 <div class="line">Deal of the Day: <span class="dealprice">₹179</span> <span class="unit">(₹179 / kg)</span> <span class="fulfilled">Fulfilled</span></div>363 <div class="ends">Ends in 12h 44m 10s</div>364 <div class="line save">You Save: <span class="val">₹20 (10%)</span></div>365 </div>366 367 <div class="bottom-nav">368 <div class="nav-item active">369 <svg viewBox="0 0 24 24">370 <path d="M3 10 L12 3 L21 10 V21 H3 Z" fill="none" stroke="currentColor" stroke-width="2"/>371 </svg>372 <div>Home</div>373 </div>374 <div class="nav-item">375 <svg viewBox="0 0 24 24">376 <circle cx="12" cy="8" r="4" fill="none" stroke="currentColor" stroke-width="2"/>377 <path d="M4 21c2-4 6-5 8-5s6 1 8 5" fill="none" stroke="currentColor" stroke-width="2"/>378 </svg>379 <div>You</div>380 </div>381 <div class="nav-item">382 <svg viewBox="0 0 24 24">383 <rect x="4" y="4" width="16" height="16" rx="3" ry="3" fill="none" stroke="currentColor" stroke-width="2"/>384 <path d="M4 12 H20" stroke="currentColor" stroke-width="2"/>385 </svg>386 <div>More</div>387 </div>388 <div class="nav-item">389 <svg viewBox="0 0 24 24">390 <path d="M3 6 H6 L7 14 H19 L21 8 H7" fill="none" stroke="currentColor" stroke-width="2"/>391 <circle cx="9" cy="19" r="2" fill="currentColor"/>392 <circle cx="17" cy="19" r="2" fill="currentColor"/>393 </svg>394 <div>Cart</div>395 </div>396 <div class="nav-item">397 <svg viewBox="0 0 24 24">398 <path d="M4 6 H20 M4 12 H20 M4 18 H20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>399 </svg>400 <div>Menu</div>401 </div>402 </div>403 404</div>405</body>406</html>