GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>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 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #ffffff;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16 color: #2d2d2d;17 }18 19 /* Top gradient app bar */20 .top-gradient {21 background: linear-gradient(180deg, #87e6e1 0%, #b9f0e6 100%);22 height: 250px;23 position: relative;24 box-shadow: 0 1px 0 rgba(0,0,0,0.08) inset;25 }26 27 .status-bar {28 height: 72px;29 padding: 0 28px;30 display: flex;31 align-items: center;32 justify-content: space-between;33 font-size: 36px;34 color: #0c2d2c;35 }36 .status-right {37 display: flex;38 align-items: center;39 gap: 22px;40 }41 .status-dot {42 width: 22px; height: 22px; border-radius: 50%; background:#0b9388;43 }44 .status-holo {45 width: 22px; height: 22px; border-radius: 50%; border:2px solid #0b9388;46 }47 48 .search-row {49 display: flex;50 align-items: center;51 gap: 22px;52 padding: 18px 22px 22px 18px;53 }54 .back-btn {55 width: 90px; height: 90px; display:flex; align-items:center; justify-content:center;56 }57 .search-box {58 flex: 1;59 height: 100px;60 background:#ffffff;61 border-radius: 50px;62 box-shadow: 0 6px 14px rgba(0,0,0,0.12);63 display:flex; align-items:center;64 padding: 0 26px;65 gap: 22px;66 font-size: 40px;67 color: #666;68 }69 .search-right {70 margin-left: auto;71 display:flex; align-items:center; gap:18px;72 }73 .chip {74 position:absolute;75 right: 26px;76 top: 26px;77 background: rgba(0,0,0,0.04);78 color:#5a5a5a;79 padding: 6px 10px;80 border-radius: 10px;81 font-size: 26px;82 }83 84 /* Sponsored row */85 .sponsored {86 background:#fff;87 border-top:1px solid #e9e9e9;88 border-bottom:1px solid #e9e9e9;89 display:flex;90 align-items:center;91 gap:20px;92 padding: 18px 20px;93 }94 .thumb {95 width: 210px; height: 120px;96 background:#E0E0E0;97 border:1px solid #BDBDBD;98 display:flex; align-items:center; justify-content:center;99 color:#757575; font-size:28px;100 }101 .sponsored-text {102 flex:1;103 }104 .spon-top {105 display:flex; align-items:center; justify-content:space-between; gap:12px;106 font-size:34px; font-weight:700;107 }108 .spon-price {109 color:#ff6a00; font-size:44px; font-weight:800;110 }111 .spon-prime { color:#0a9d8f; font-weight:700; font-size:30px; margin-left:10px; }112 .spon-right {113 color:#8a8a8a; font-size:28px; white-space:nowrap;114 }115 116 /* Product title and rating */117 .content {118 padding: 26px 28px 0 28px;119 }120 .store-link {121 color:#0a78bd; font-weight:700; font-size:38px; margin-bottom:10px;122 }123 .title-line {124 font-size:40px; line-height:1.25; color:#4a4a4a; margin-right:160px;125 }126 .rating-row {127 margin-top:10px;128 display:flex; align-items:center; gap:12px;129 color:#7a7a7a; font-size:32px;130 }131 .rating-row .count { color:#0a78bd; font-weight:600; margin-left:6px; }132 .spacer { flex:1; }133 134 /* Image block */135 .image-area {136 position: relative;137 margin-top: 26px;138 height: 980px;139 border-top:1px solid #e9e9e9;140 border-bottom:1px solid #e9e9e9;141 padding: 32px 22px 22px 22px;142 }143 .big-img {144 width: 100%;145 height: 900px;146 background:#E0E0E0;147 border:1px solid #BDBDBD;148 display:flex; align-items:center; justify-content:center;149 color:#666; font-size:40px; text-align:center;150 }151 .share-btn {152 position: absolute;153 top: 28px; right: 40px;154 width: 74px; height: 74px; border-radius: 50%;155 background:#ffffff; border:1px solid #d0d0d0;156 display:flex; align-items:center; justify-content:center;157 box-shadow: 0 2px 8px rgba(0,0,0,0.12);158 }159 .discount {160 position: absolute;161 left: 24px; top: 260px;162 width: 130px; height: 130px; border-radius: 50%;163 background: #e35200; color:#fff;164 display:flex; align-items:center; justify-content:center;165 font-weight:900; font-size:38px; text-align:center;166 }167 .fav {168 position: absolute;169 left: 34px; bottom: 40px;170 width: 82px; height: 82px; border-radius: 50%;171 background:#ffffff; border:2px solid #bcd5d3;172 display:flex; align-items:center; justify-content:center;173 }174 .dots {175 position: absolute;176 bottom: 30px; right: 40px; left: 0;177 display:flex; gap:18px; align-items:center; justify-content:center;178 }179 .dot { width:20px; height:20px; border-radius:50%; background:#d9d9d9; }180 .dot.active { background:#0a9d8f; }181 .dot.play {182 width: 0; height: 0; border-left: 22px solid #c9c9c9; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-radius:2px;183 }184 185 /* Colour section */186 .section {187 border-top: 12px solid #f0f0f0;188 padding: 26px;189 }190 .section .row {191 display:flex; align-items:center; justify-content:space-between;192 }193 .section-title {194 font-size:40px; color:#555;195 }196 .selected {197 font-weight:800; color:#222; margin-left:10px;198 }199 .chev {200 width: 34px; height: 34px; transform: rotate(180deg);201 }202 .color-cards {203 margin-top: 26px;204 display:flex; gap:24px; overflow:hidden;205 }206 .card {207 width: 300px; height: 350px; border-radius: 24px; background:#ffffff;208 border:1px solid #e5e5e5; overflow:hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.04);209 }210 .card .img {211 width:100%; height:100%; background:#E0E0E0; border-top:0; border-left:0; border-right:0;212 border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; font-size:30px;213 }214 .card.orange { outline: 6px solid #ffa246; }215 216 /* Bottom nav */217 .bottom-nav {218 position:absolute; left:0; right:0; bottom:0;219 height: 190px; background:#ffffff; border-top:1px solid #e6e6e6;220 display:flex; align-items:center; justify-content:space-around;221 padding-bottom: 16px;222 }223 .nav-item {224 display:flex; flex-direction:column; align-items:center; gap:14px;225 color:#6d6d6d; font-size:30px;226 }227 .nav-item.active { color:#0a9d8f; }228 .nav-icon {229 width: 70px; height: 70px; border-radius: 18px; border:2px solid currentColor;230 display:flex; align-items:center; justify-content:center;231 }232 .cart-badge {233 position:absolute; top:-10px; right:-10px; background:#0a9d8f; color:#fff; width:40px; height:40px; border-radius:20px; font-size:26px; display:flex; align-items:center; justify-content:center;234 }235 236 /* Padding for bottom content */237 .page-padding {238 height: 220px;239 }240</style>241</head>242<body>243<div id="render-target">244 245 <div class="top-gradient">246 <div class="status-bar">247 <div>9:00</div>248 <div class="status-right">249 <div class="status-holo"></div>250 <div class="status-dot"></div>251 <div style="width:10px;height:10px;background:#273032;border-radius:50%"></div>252 <svg width="38" height="38" viewBox="0 0 24 24" fill="#263238"><path d="M6 18c0-3.3 2.7-6 6-6s6 2.7 6 6h-2a4 4 0 0 0-8 0H6zm6-8a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"/></svg>253 </div>254 </div>255 256 <div class="search-row">257 <div class="back-btn">258 <svg width="56" height="56" viewBox="0 0 24 24" fill="#263238">259 <path d="M14 6l-6 6 6 6 1.5-1.5L11 12l4.5-4.5L14 6z"/>260 </svg>261 </div>262 <div class="search-box">263 <svg width="44" height="44" viewBox="0 0 24 24" fill="#6c6c6c">264 <path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.9.9l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/>265 </svg>266 <div style="color:#6b6b6b; letter-spacing:.2px;">portable tool box for toolbox for h...</div>267 <div class="search-right">268 <svg width="44" height="44" viewBox="0 0 24 24" fill="#55a39b">269 <path d="M19 3H5a2 2 0 0 0-2 2v14l4-4h12a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z"/>270 </svg>271 </div>272 </div>273 </div>274 </div>275 276 <div class="sponsored">277 <div class="thumb">[IMG: Steel Locker Box]</div>278 <div class="sponsored-text">279 <div class="spon-top">280 <div style="overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">GinoSet Stainless Steel Locker Boxes, Jewellery Bo...</div>281 <div class="spon-right">Sponsored ⓘ</div>282 </div>283 <div style="display:flex; align-items:center; gap:8px; margin-top:8px;">284 <div class="spon-price">₹569.00</div>285 <div class="spon-prime">prime</div>286 </div>287 </div>288 </div>289 290 <div class="content">291 <div class="store-link">Visit the Plantex Store</div>292 <div class="title-line">293 Plantex High Grade Metal Tool Box for Tools/Tool Kit Box for Home and Garage/Tool Box Without Tools - 5 Compartment (Brown & Ivory)294 </div>295 <div class="rating-row">296 <div style="display:flex; align-items:center; gap:4px;">297 <svg width="30" height="30" viewBox="0 0 24 24" fill="#f4a21f"><path d="M12 17.3l6.2 3.7-1.7-7.1 5.5-4.7-7.2-.6L12 2 9.2 8.6 2 9.2l5.5 4.7L5.8 21z"/></svg>298 <svg width="30" height="30" viewBox="0 0 24 24" fill="#f4a21f"><path d="M12 17.3l6.2 3.7-1.7-7.1 5.5-4.7-7.2-.6L12 2 9.2 8.6 2 9.2l5.5 4.7L5.8 21z"/></svg>299 <svg width="30" height="30" viewBox="0 0 24 24" fill="#f4a21f"><path d="M12 17.3l6.2 3.7-1.7-7.1 5.5-4.7-7.2-.6L12 2 9.2 8.6 2 9.2l5.5 4.7L5.8 21z"/></svg>300 <svg width="30" height="30" viewBox="0 0 24 24" fill="#f4a21f"><path d="M12 17.3l6.2 3.7-1.7-7.1 5.5-4.7-7.2-.6L12 2 9.2 8.6 2 9.2l5.5 4.7L5.8 21z"/></svg>301 <svg width="30" height="30" viewBox="0 0 24 24" fill="#f4a21f"><path d="M12 17.3l6.2 3.7-1.7-7.1 5.5-4.7-7.2-.6L12 2 9.2 8.6 2 9.2l5.5 4.7L5.8 21z"/></svg>302 </div>303 <div style="font-weight:700; color:#333; margin-left:10px;">4.3</div>304 <div class="count">1,171</div>305 </div>306 </div>307 308 <div class="image-area">309 <div class="share-btn">310 <svg width="36" height="36" viewBox="0 0 24 24" fill="#4a4a4a"><path d="M18 16.1a2.9 2.9 0 0 0-2.3 1.2l-6-3a2.9 2.9 0 0 0 0-2.6l6-3A3 3 0 1 0 16 6a2.9 2.9 0 0 0 .1.7l-6 3a3 3 0 1 0 0 4.6l6 3A3 3 0 1 0 18 16.1z"/></svg>311 </div>312 <div class="discount">66%<br>off</div>313 <div class="big-img">[IMG: Brown & Ivory Metal Tool Box]</div>314 <div class="fav">315 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#7aa4a0" stroke-width="2">316 <path d="M12 21s-6-4.35-9-7.7C.6 11.7 1 8.2 3.7 6.8A5 5 0 0 1 12 8a5 5 0 0 1 8.3-1.2c2.7 1.4 3.1 4.9.7 6.5C18 16.7 12 21 12 21z"/>317 </svg>318 </div>319 <div class="dots">320 <div class="dot active"></div>321 <div class="dot"></div>322 <div class="dot"></div>323 <div class="dot"></div>324 <div class="dot"></div>325 <div class="dot play"></div>326 </div>327 </div>328 329 <div class="section">330 <div class="row">331 <div class="section-title">Colour: <span class="selected">Brown & Ivory</span></div>332 <svg class="chev" viewBox="0 0 24 24" fill="#6b6b6b"><path d="M7 10l5 5 5-5H7z"/></svg>333 </div>334 <div class="color-cards">335 <div class="card">336 <div class="img">[IMG: Blue Variant]</div>337 </div>338 <div class="card orange">339 <div class="img">[IMG: Brown & Ivory]</div>340 </div>341 <div class="card">342 <div class="img">[IMG: Red Variant]</div>343 </div>344 <div class="card">345 <div class="img">[IMG: Black Variant]</div>346 </div>347 </div>348 </div>349 350 <div class="page-padding"></div>351 352 <div class="bottom-nav">353 <div class="nav-item active">354 <div class="nav-icon">355 <svg width="40" height="40" viewBox="0 0 24 24" fill="currentColor"><path d="M12 3l9 8h-3v9H6v-9H3l9-8z"/></svg>356 </div>357 <div>Home</div>358 </div>359 <div class="nav-item">360 <div class="nav-icon">361 <svg width="38" height="38" viewBox="0 0 24 24" fill="currentColor"><path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4.4 0-8 2.2-8 5v1h16v-1c0-2.8-3.6-5-8-5z"/></svg>362 </div>363 <div>You</div>364 </div>365 <div class="nav-item">366 <div class="nav-icon">367 <svg width="38" height="38" viewBox="0 0 24 24" fill="currentColor"><path d="M4 4h16v2H4zm2 4h12l-1.5 12h-9z"/></svg>368 </div>369 <div>More</div>370 </div>371 <div class="nav-item">372 <div class="nav-icon" style="position:relative;">373 <svg width="38" height="38" viewBox="0 0 24 24" fill="currentColor"><path d="M7 6h14l-2 10H7L5 4H2v2h3l2 12h12v2H7a2 2 0 0 1-2-1.7L3 6h4zm3 16a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm8 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>374 <div class="cart-badge">1</div>375 </div>376 <div>Cart</div>377 </div>378 <div class="nav-item">379 <div class="nav-icon">380 <svg width="36" height="36" viewBox="0 0 24 24" fill="currentColor"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>381 </div>382 <div>Menu</div>383 </div>384 </div>385 386</div>387</body>388</html>