GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Product Detail Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">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 /* Status bar */18 .status-bar {19 height: 120px;20 background: #ECECEC;21 display: flex;22 align-items: center;23 padding: 0 40px;24 font-size: 36px;25 color: #5a5a5a;26 }27 .status-icons {28 margin-left: auto;29 display: flex;30 gap: 28px;31 align-items: center;32 }33 .dot { width: 10px; height: 10px; background: #6b6b6b; border-radius: 50%; display: inline-block; }34 35 /* Header search */36 .header {37 background: #fff;38 padding: 28px 24px;39 box-sizing: border-box;40 display: flex;41 align-items: center;42 gap: 20px;43 }44 .icon-btn {45 width: 80px;46 height: 80px;47 display: flex; align-items: center; justify-content: center;48 }49 .search-bar {50 flex: 1;51 height: 96px;52 background: #F5F5F7;53 border: 1px solid #E0E0E0;54 border-radius: 60px;55 display: flex; align-items: center;56 padding: 0 30px;57 gap: 20px;58 box-sizing: border-box;59 }60 .search-placeholder { color: #8d8d8d; font-size: 36px; }61 .actions { display: flex; align-items: center; gap: 20px; }62 .cart-wrap { position: relative; width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; }63 .badge {64 position: absolute;65 top: 6px; right: 8px;66 background: #E53935;67 color: #fff; font-size: 28px; line-height: 36px;68 padding: 4px 12px; border-radius: 20px;69 border: 2px solid #fff;70 }71 72 /* Image banner */73 .media {74 width: 100%;75 height: 720px;76 background: #E0E0E0;77 border-top: 1px solid #BDBDBD;78 border-bottom: 1px solid #BDBDBD;79 display: flex; align-items: center; justify-content: center;80 color: #616161;81 font-size: 40px;82 }83 84 .dots {85 height: 80px;86 display: flex;87 align-items: center;88 justify-content: center;89 gap: 18px;90 }91 .dots span {92 width: 20px; height: 20px; background: #C7C7C7; border-radius: 50%;93 }94 .dots span.active { background: #8E8E8E; }95 96 .divider { height: 2px; background: #EEEEEE; }97 98 /* Info notice */99 .notice {100 display: flex; align-items: center; gap: 16px;101 padding: 22px 32px;102 font-size: 36px;103 }104 .notice .up {105 width: 46px; height: 46px; border-radius: 50%;106 background: #e8f5e9; display: flex; align-items: center; justify-content: center;107 color: #2e7d32; font-weight: bold;108 }109 110 /* Product section */111 .product {112 padding: 24px 32px;113 }114 .title {115 font-size: 42px;116 line-height: 54px;117 font-weight: 700;118 color: #1f1f1f;119 }120 .subtitle {121 font-weight: 400;122 }123 124 .rating-row {125 margin-top: 18px;126 display: flex; align-items: center; gap: 16px;127 }128 .stars { display: flex; gap: 6px; }129 .stars svg { width: 34px; height: 34px; fill: #2E7D32; }130 .ratings-link { color: #2a69ff; font-size: 34px; }131 .assured {132 margin-left: auto;133 display: flex; align-items: center; gap: 10px;134 color: #444;135 font-size: 32px;136 }137 .assured .badge-star { width: 34px; height: 34px; fill: #FBC02D; }138 139 .price-row {140 margin-top: 24px;141 display: flex; align-items: baseline; gap: 24px;142 }143 .discount { color: #1B5E20; font-weight: 800; font-size: 60px; }144 .old-price { color: #9E9E9E; text-decoration: line-through; font-size: 46px; }145 .new-price { font-size: 64px; font-weight: 800; }146 147 .delivery {148 margin-top: 36px;149 display: flex; align-items: center; justify-content: space-between;150 padding: 24px 0;151 border-top: 2px solid #F0F0F0; border-bottom: 2px solid #F0F0F0;152 }153 .delivery .to { font-size: 36px; }154 .delivery .bold { font-weight: 700; }155 .btn-outline {156 padding: 18px 36px; border: 2px solid #DADADA; border-radius: 12px; font-size: 34px; background: #fff;157 }158 159 .shipping-bar {160 display: flex; align-items: center; gap: 18px;161 padding: 26px 32px;162 border-bottom: 2px solid #F0F0F0;163 font-size: 36px;164 }165 .shipping-bar .sep {166 width: 2px; height: 38px; background: #DADADA;167 margin: 0 16px;168 }169 .shipping-bar .green { color: #1B5E20; font-weight: 700; }170 171 .features {172 display: flex; justify-content: space-around; align-items: center;173 padding: 30px 20px;174 border-bottom: 2px solid #F0F0F0;175 text-align: center;176 }177 .feat {178 width: 360px;179 }180 .feat .ic {181 width: 140px; height: 140px; background: #F4F6FF; border-radius: 50%;182 margin: 0 auto 16px; display: flex; align-items: center; justify-content: center;183 border: 1px solid #E0E0E0;184 }185 .feat .label { font-size: 34px; color: #444; }186 187 /* Floating help */188 .floating {189 position: absolute; right: 36px; bottom: 380px;190 width: 140px; height: 140px; border-radius: 50%;191 background: #2A62FF; color: #FFD54F;192 box-shadow: 0 8px 20px rgba(0,0,0,0.25);193 display: flex; align-items: center; justify-content: center;194 font-weight: 800; font-size: 60px;195 border: 6px solid #6EA1FF;196 }197 198 /* Bottom bar */199 .bottom-bar {200 position: absolute; left: 0; bottom: 70px;201 width: 100%; height: 150px; background: #fff;202 border-top: 2px solid #EAEAEA;203 display: flex;204 }205 .btn-cart {206 flex: 1; display: flex; align-items: center; justify-content: center;207 font-size: 46px; font-weight: 700; background: #F5F5F5; color: #222;208 }209 .btn-buy {210 flex: 1; display: flex; align-items: center; justify-content: center;211 font-size: 46px; font-weight: 700; background: #FFC107; color: #111;212 }213 214 /* Home indicator */215 .home-indicator {216 position: absolute; left: 50%; transform: translateX(-50%);217 bottom: 18px; width: 340px; height: 18px; background: #000; opacity: 0.85;218 border-radius: 10px;219 }220 221 /* Simple SVG icon defaults */222 svg { display: block; }223</style>224</head>225<body>226<div id="render-target">227 228 <!-- Status Bar -->229 <div class="status-bar">230 <div>10:32</div>231 <div class="status-icons">232 <span class="dot"></span>233 <span class="dot"></span>234 <span class="dot"></span>235 <span class="dot"></span>236 <span class="dot"></span>237 </div>238 </div>239 240 <!-- Search Header -->241 <div class="header">242 <div class="icon-btn" aria-label="Back">243 <svg width="48" height="48" viewBox="0 0 24 24"><path fill="#333" d="M15.5 3.5L7 12l8.5 8.5-1.4 1.4L4.2 12l9.9-9.9 1.4 1.4z"/></svg>244 </div>245 <div class="search-bar">246 <svg width="42" height="42" viewBox="0 0 24 24"><path fill="#8d8d8d" d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>247 <div class="search-placeholder">Search for products</div>248 <div style="margin-left:auto; display:flex; align-items:center; gap:20px;">249 <svg width="42" height="42" viewBox="0 0 24 24"><path fill="#8d8d8d" d="M12 14a2 2 0 002-2V7a2 2 0 10-4 0v5a2 2 0 002 2zm5-2a5 5 0 01-10 0H5a7 7 0 0014 0h-2z"/></svg>250 </div>251 </div>252 <div class="actions">253 <div class="cart-wrap" aria-label="Cart">254 <svg width="48" height="48" viewBox="0 0 24 24"><path fill="#333" d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2S15.9 22 17 22s2-.9 2-2-.9-2-2-2zM7.2 6l.82 2h8.91c.75 0 1.24.79.9 1.46l-2.24 4.49a1.5 1.5 0 01-1.34.85H9.04a1.5 1.5 0 01-1.41-.96L5.11 4H2V2h3.6c.64 0 1.2.41 1.41 1.02L7.2 6z"/></svg>255 <span class="badge">2</span>256 </div>257 </div>258 </div>259 260 <!-- Product Image -->261 <div class="media">[IMG: Toy close-up - Dancing Spinning Monkey]</div>262 263 <!-- Slider dots -->264 <div class="dots">265 <span class="active"></span><span></span><span></span><span></span><span></span>266 </div>267 268 <div class="divider"></div>269 270 <!-- Notice -->271 <div class="notice">272 <div class="up">↑</div>273 <div><strong>14</strong> people ordered this in the last 30 days</div>274 </div>275 276 <div class="divider"></div>277 278 <!-- Product Details -->279 <div class="product">280 <div class="title">281 Lakshita <span class="subtitle">Rotation Dancing & Spinning Rolling Monkey with Light & Sound Toy for Kids (Blue)</span>282 </div>283 284 <div class="rating-row">285 <div class="stars" aria-label="4 stars">286 <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.4 3.2 1.5-6.1L3 9.8l6.2-.5L12 3l2.8 6.3 6.2.5-5.1 4.6 1.5 6.1z"/></svg>287 <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.4 3.2 1.5-6.1L3 9.8l6.2-.5L12 3l2.8 6.3 6.2.5-5.1 4.6 1.5 6.1z"/></svg>288 <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.4 3.2 1.5-6.1L3 9.8l6.2-.5L12 3l2.8 6.3 6.2.5-5.1 4.6 1.5 6.1z"/></svg>289 <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.4 3.2 1.5-6.1L3 9.8l6.2-.5L12 3l2.8 6.3 6.2.5-5.1 4.6 1.5 6.1z"/></svg>290 <svg viewBox="0 0 24 24" style="fill:#A5D6A7;"><path d="M12 17.3l-5.4 3.2 1.5-6.1L3 9.8l6.2-.5L12 3l2.8 6.3 6.2.5-5.1 4.6 1.5 6.1z"/></svg>291 </div>292 <div class="ratings-link">59 ratings</div>293 <div class="assured">294 <svg class="badge-star" viewBox="0 0 24 24"><path d="M12 17.3l-5.4 3.2 1.5-6.1L3 9.8l6.2-.5L12 3l2.8 6.3 6.2.5-5.1 4.6 1.5 6.1z"/></svg>295 <span>Plus F-ASSURED</span>296 </div>297 </div>298 299 <div class="price-row">300 <div class="discount">−70%</div>301 <div class="old-price">999</div>302 <div class="new-price">₹299</div>303 </div>304 305 <div class="delivery">306 <div class="to">Deliver to: <span class="bold">New Delhi - 110004</span></div>307 <button class="btn-outline">Change</button>308 </div>309 </div>310 311 <!-- Shipping info -->312 <div class="shipping-bar">313 <svg width="46" height="46" viewBox="0 0 24 24"><path fill="#333" d="M3 7h11v7H3V7zm11 0h3l3 3v4h-6V7zM6 18.5A1.5 1.5 0 104.5 17 1.5 1.5 0 006 18.5zm10 0A1.5 1.5 0 1014.5 17 1.5 1.5 0 0016 18.5z"/></svg>314 <span class="green">FREE Delivery</span>315 <span style="color:#9E9E9E; margin-left:8px;">₹40</span>316 <div class="sep"></div>317 <span>Delivery in 2 Days, Saturday</span>318 <div style="margin-left:auto;">319 <svg width="34" height="34" viewBox="0 0 24 24"><path fill="#777" d="M9 6l6 6-6 6-1.4-1.4L12.2 12 7.6 7.4 9 6z"/></svg>320 </div>321 </div>322 323 <!-- Features -->324 <div class="features">325 <div class="feat">326 <div class="ic">327 <div style="width:80px; height:80px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; font-size:22px;">[IMG]</div>328 </div>329 <div class="label">7 Days Replacement</div>330 </div>331 <div class="feat">332 <div class="ic">333 <div style="width:80px; height:80px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; font-size:22px;">[IMG]</div>334 </div>335 <div class="label">Cash on Delivery</div>336 </div>337 </div>338 339 <!-- Floating support -->340 <div class="floating">f</div>341 342 <!-- Bottom sticky bar -->343 <div class="bottom-bar">344 <div class="btn-cart">Go to cart</div>345 <div class="btn-buy">Buy now</div>346 </div>347 348 <div class="home-indicator"></div>349</div>350</body>351</html>