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 Details Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 color: #212121;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 120px;25 background: #e6e6e6;26 display: flex;27 align-items: center;28 padding: 0 36px;29 box-sizing: border-box;30 font-size: 40px;31 color: #555;32 }33 .status-icons {34 margin-left: auto;35 display: flex;36 align-items: center;37 gap: 24px;38 }39 .status-icons .circle {40 width: 28px; height: 28px; border: 3px solid #666; border-radius: 50%;41 }42 .status-icons .wifi {43 width: 34px; height: 28px; border: 3px solid #666; border-radius: 6px;44 }45 .battery {46 width: 72px; height: 36px; border: 3px solid #666; border-radius: 8px; position: relative;47 }48 .battery::after {49 content: "";50 position: absolute;51 right: -10px; top: 8px;52 width: 10px; height: 20px; background: #666; border-radius: 3px;53 }54 .battery .fill {55 position: absolute; left: 4px; top: 4px; height: 24px; width: 48px; background: #4caf50; border-radius: 6px;56 }57 58 /* Content */59 .content {60 position: absolute;61 top: 120px;62 left: 0;63 right: 0;64 bottom: 0;65 overflow-y: auto;66 }67 68 .row {69 display: flex;70 align-items: center;71 justify-content: space-between;72 padding: 28px 40px;73 font-size: 40px;74 border-bottom: 1px solid #eeeeee;75 }76 .row .label-muted { color: #9e9e9e; }77 .link {78 color: #3f51b5;79 font-weight: 600;80 padding: 16px 40px 32px;81 font-size: 40px;82 }83 .section-title {84 padding: 40px;85 font-size: 54px;86 font-weight: 700;87 }88 .chevron {89 width: 36px; height: 36px;90 }91 .chevron svg { width: 100%; height: 100%; }92 .divider { height: 1px; background: #eeeeee; margin: 0 40px; }93 94 /* Product cards */95 .cards {96 display: flex;97 gap: 40px;98 padding: 20px 40px 30px;99 }100 .card {101 width: 312px;102 }103 .img-ph {104 width: 312px; height: 312px;105 background: #E0E0E0;106 border: 1px solid #BDBDBD;107 display: flex; align-items: center; justify-content: center;108 color: #757575; font-size: 32px; text-align: center;109 }110 .card-title {111 font-size: 38px; line-height: 1.2; margin-top: 18px; color: #424242;112 }113 .price-row {114 margin-top: 10px; font-size: 36px; display: flex; gap: 12px; align-items: baseline;115 }116 .strike { color: #9e9e9e; text-decoration: line-through; }117 .price { font-weight: 700; }118 .discount { color: #2e7d32; font-weight: 700; }119 .rating-row {120 margin-top: 12px; display: flex; align-items: center; gap: 12px; font-size: 34px; color: #757575;121 }122 .stars { display: inline-flex; gap: 6px; }123 .star svg { width: 34px; height: 34px; }124 .star.green path { fill: #2e7d32; }125 .star.gray path { fill: #c8c8c8; }126 127 /* Banner placeholder */128 .banner {129 margin: 20px 40px 40px;130 height: 180px;131 background: #E0E0E0;132 border: 1px solid #BDBDBD;133 display: flex; align-items: center; justify-content: center;134 color: #757575; font-size: 40px; font-weight: 600;135 }136 137 /* Ratings & Reviews section */138 .rate-bar {139 display: flex; align-items: center; justify-content: space-between; padding: 0 40px 20px;140 }141 .btn-outline {142 border: 1px solid #e0e0e0; background: #ffffff; color: #3f51b5; padding: 22px 36px; border-radius: 16px; font-size: 40px; font-weight: 700;143 }144 .ratings-grid {145 display: grid;146 grid-template-columns: 1fr 10px 1fr;147 gap: 0;148 padding: 20px 40px 30px;149 }150 .ratings-summary {151 padding-right: 40px;152 }153 .summary-title { font-size: 44px; color: #9e9e9e; font-weight: 700; }154 .big-stars { margin-top: 16px; display: inline-flex; gap: 6px; }155 .big-stars .star svg { width: 42px; height: 42px; }156 .summary-text { margin-top: 12px; font-size: 34px; color: #757575; }157 .vline { width: 1px; background: #e0e0e0; }158 .breakdown { padding-left: 40px; font-size: 36px; }159 .break-item { display: flex; align-items: center; gap: 16px; margin: 16px 0; }160 .progress {161 position: relative;162 width: 420px; height: 20px; background: #dddddd; border-radius: 10px; overflow: hidden;163 }164 .progress .fill { position: absolute; left: 0; top: 0; height: 100%; background: #2e7d32; }165 166 .review-snippet {167 padding: 30px 40px;168 border-top: 1px solid #eeeeee;169 display: flex; align-items: center; gap: 20px;170 font-size: 42px; font-weight: 700;171 }172 .review-snippet .stars .star svg { width: 38px; height: 38px; }173 174 /* Bottom action bar */175 .bottom-bar {176 position: absolute;177 bottom: 0;178 left: 0;179 width: 1080px;180 height: 220px;181 background: #ffffff;182 border-top: 1px solid #e0e0e0;183 box-sizing: border-box;184 padding: 26px 36px 40px;185 }186 .bottom-actions {187 display: flex; gap: 36px; align-items: center;188 }189 .btn-cart {190 flex: 1;191 height: 120px;192 border: 2px solid #5a54ff;193 color: #5a54ff;194 background: #ffffff;195 border-radius: 18px;196 font-size: 46px; font-weight: 700;197 display: flex; align-items: center; justify-content: center;198 }199 .btn-buy {200 flex: 1;201 height: 120px;202 background: #5a54ff;203 color: #ffffff;204 border-radius: 18px;205 font-size: 46px; font-weight: 800;206 display: flex; align-items: center; justify-content: center;207 box-shadow: 0 6px 16px rgba(90,84,255,0.3);208 }209 .gesture-bar {210 position: absolute;211 bottom: 12px;212 left: 50%;213 transform: translateX(-50%);214 width: 240px;215 height: 12px;216 background: #cfcfcf;217 border-radius: 6px;218 }219</style>220</head>221<body>222<div id="render-target">223 224 <!-- Status bar -->225 <div class="status-bar">226 <div>2:35</div>227 <div class="status-icons">228 <div class="circle"></div>229 <div class="wifi"></div>230 <div class="battery"><div class="fill"></div></div>231 <div style="font-size:34px;color:#666;">98%</div>232 </div>233 </div>234 235 <div class="content">236 <!-- Info rows -->237 <div class="row">238 <div class="label-muted">Ideal For</div>239 <div style="font-weight:700;">Men</div>240 </div>241 <div class="link">Read More</div>242 <div class="row" style="border-bottom:none;">243 <div style="font-weight:700;">All Details</div>244 <div class="chevron">245 <svg viewBox="0 0 24 24"><path d="M8 4l8 8-8 8" fill="none" stroke="#424242" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>246 </div>247 </div>248 <div class="divider"></div>249 250 <!-- Similar section -->251 <div class="section-title">Similar Value Products</div>252 <div class="cards">253 <!-- Card 1 -->254 <div class="card">255 <div class="img-ph">[IMG: White Sneakers with Stripes]</div>256 <div class="card-title">Trending Stylish Cas...</div>257 <div class="price-row">258 <span class="strike">999</span>259 <span class="price">₹289</span>260 <span class="discount">71% off</span>261 </div>262 <div class="rating-row">263 <div class="stars">264 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.4 7 1-5.2 4.8 1.6 7-6.5-3.5-6.5 3.5 1.6-7-5.2-4.8 7-1z"/></svg></span>265 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.4 7 1-5.2 4.8 1.6 7-6.5-3.5-6.5 3.5 1.6-7-5.2-4.8 7-1z"/></svg></span>266 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.4 7 1-5.2 4.8 1.6 7-6.5-3.5-6.5 3.5 1.6-7-5.2-4.8 7-1z"/></svg></span>267 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.4 7 1-5.2 4.8 1.6 7-6.5-3.5-6.5 3.5 1.6-7-5.2-4.8 7-1z"/></svg></span>268 <span class="star gray"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.4 7 1-5.2 4.8 1.6 7-6.5-3.5-6.5 3.5 1.6-7-5.2-4.8 7-1z"/></svg></span>269 </div>270 <div>(445)</div>271 </div>272 </div>273 274 <!-- Card 2 -->275 <div class="card">276 <div class="img-ph">[IMG: Casual White Sneaker On Feet]</div>277 <div class="card-title">Stylish Casual Sneak...</div>278 <div class="price-row">279 <span class="strike">1,499</span>280 <span class="price">₹379</span>281 <span class="discount">74% off</span>282 </div>283 <div class="rating-row">284 <div class="stars">285 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.4 7 1-5.2 4.8 1.6 7-6.5-3.5-6.5 3.5 1.6-7-5.2-4.8 7-1z"/></svg></span>286 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.4 7 1-5.2 4.8 1.6 7-6.5-3.5-6.5 3.5 1.6-7-5.2-4.8 7-1z"/></svg></span>287 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.4 7 1-5.2 4.8 1.6 7-6.5-3.5-6.5 3.5 1.6-7-5.2-4.8 7-1z"/></svg></span>288 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.4 7 1-5.2 4.8 1.6 7-6.5-3.5-6.5 3.5 1.6-7-5.2-4.8 7-1z"/></svg></span>289 <span class="star gray"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.4 7 1-5.2 4.8 1.6 7-6.5-3.5-6.5 3.5 1.6-7-5.2-4.8 7-1z"/></svg></span>290 </div>291 <div>(4)</div>292 </div>293 </div>294 295 <!-- Card 3 -->296 <div class="card">297 <div class="img-ph">[IMG: White Sneakers For Men]</div>298 <div class="card-title">Sneakers For Men</div>299 <div class="price-row">300 <span class="strike">1,999</span>301 <span class="price">₹388</span>302 <span class="discount">80% off</span>303 </div>304 <div class="rating-row">305 <div class="stars">306 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.4 7 1-5.2 4.8 1.6 7-6.5-3.5-6.5 3.5 1.6-7-5.2-4.8 7-1z"/></svg></span>307 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.4 7 1-5.2 4.8 1.6 7-6.5-3.5-6.5 3.5 1.6-7-5.2-4.8 7-1z"/></svg></span>308 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.4 7 1-5.2 4.8 1.6 7-6.5-3.5-6.5 3.5 1.6-7-5.2-4.8 7-1z"/></svg></span>309 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.4 7 1-5.2 4.8 1.6 7-6.5-3.5-6.5 3.5 1.6-7-5.2-4.8 7-1z"/></svg></span>310 <span class="star gray"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.4 7 1-5.2 4.8 1.6 7-6.5-3.5-6.5 3.5 1.6-7-5.2-4.8 7-1z"/></svg></span>311 </div>312 <div>(16)</div>313 </div>314 </div>315 </div>316 317 <div class="banner">[IMG: Banner - SuperCoin Promotion]</div>318 319 <!-- Ratings & Reviews -->320 <div class="rate-bar">321 <div class="section-title" style="padding:0;">Ratings & Reviews</div>322 <button class="btn-outline">Rate Product</button>323 </div>324 325 <div class="ratings-grid">326 <div class="ratings-summary">327 <div class="summary-title">Good</div>328 <div class="big-stars">329 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.4 7 1-5.2 4.8 1.6 7-6.5-3.5-6.5 3.5 1.6-7-5.2-4.8 7-1z"/></svg></span>330 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.4 7 1-5.2 4.8 1.6 7-6.5-3.5-6.5 3.5 1.6-7-5.2-4.8 7-1z"/></svg></span>331 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.4 7 1-5.2 4.8 1.6 7-6.5-3.5-6.5 3.5 1.6-7-5.2-4.8 7-1z"/></svg></span>332 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.4 7 1-5.2 4.8 1.6 7-6.5-3.5-6.5 3.5 1.6-7-5.2-4.8 7-1z"/></svg></span>333 <span class="star gray"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.4 7 1-5.2 4.8 1.6 7-6.5-3.5-6.5 3.5 1.6-7-5.2-4.8 7-1z"/></svg></span>334 </div>335 <div class="summary-text">170 ratings and 24 reviews</div>336 </div>337 <div class="vline"></div>338 <div class="breakdown">339 <div class="break-item">340 <div>5★</div>341 <div class="progress"><div class="fill" style="width: 360px;"></div></div>342 <div>89</div>343 </div>344 <div class="break-item">345 <div>4★</div>346 <div class="progress"><div class="fill" style="width: 180px;"></div></div>347 <div>38</div>348 </div>349 <div class="break-item">350 <div>3★</div>351 <div class="progress"><div class="fill" style="width: 60px;"></div></div>352 <div>9</div>353 </div>354 <div class="break-item">355 <div>2★</div>356 <div class="progress"><div class="fill" style="width: 120px;"></div></div>357 <div>15</div>358 </div>359 <div class="break-item">360 <div>1★</div>361 <div class="progress"><div class="fill" style="width: 140px;"></div></div>362 <div>19</div>363 </div>364 </div>365 </div>366 367 <div class="review-snippet">368 <div class="stars">369 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.4 7 1-5.2 4.8 1.6 7-6.5-3.5-6.5 3.5 1.6-7-5.2-4.8 7-1z"/></svg></span>370 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.4 7 1-5.2 4.8 1.6 7-6.5-3.5-6.5 3.5 1.6-7-5.2-4.8 7-1z"/></svg></span>371 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.4 7 1-5.2 4.8 1.6 7-6.5-3.5-6.5 3.5 1.6-7-5.2-4.8 7-1z"/></svg></span>372 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.4 7 1-5.2 4.8 1.6 7-6.5-3.5-6.5 3.5 1.6-7-5.2-4.8 7-1z"/></svg></span>373 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.4 7 1-5.2 4.8 1.6 7-6.5-3.5-6.5 3.5 1.6-7-5.2-4.8 7-1z"/></svg></span>374 </div>375 <div>Brilliant</div>376 </div>377 378 <div style="height: 360px;"></div> <!-- spacer above bottom bar -->379 380 </div>381 382 <!-- Bottom bar -->383 <div class="bottom-bar">384 <div class="bottom-actions">385 <div class="btn-cart">Add to cart</div>386 <div class="btn-buy">Buy Now</div>387 </div>388 </div>389 <div class="gesture-bar"></div>390 391</div>392</body>393</html>