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 - Ratings & Viewed Together</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 }13 #render-target {14 width: 1080px;15 height: 2400px;16 position: relative;17 overflow: hidden;18 background: #FFFFFF;19 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;20 color: #111;21 }22 23 /* Status bar */24 .status-bar {25 height: 98px;26 background: #000;27 color: #fff;28 padding: 0 36px;29 display: flex;30 align-items: center;31 justify-content: space-between;32 box-sizing: border-box;33 font-weight: 600;34 letter-spacing: 0.5px;35 }36 .status-right {37 display: flex;38 align-items: center;39 gap: 22px;40 }41 .dot {42 width: 10px;43 height: 10px;44 background: #fff;45 opacity: 0.8;46 border-radius: 50%;47 display: inline-block;48 }49 50 /* App bar */51 .app-bar {52 height: 120px;53 background: #fff;54 display: flex;55 align-items: center;56 padding: 0 24px;57 box-sizing: border-box;58 border-bottom: 1px solid #E9E9E9;59 gap: 16px;60 }61 .app-title {62 font-size: 38px;63 font-weight: 700;64 white-space: nowrap;65 overflow: hidden;66 text-overflow: ellipsis;67 flex: 1;68 }69 .icon-btn {70 width: 92px;71 height: 92px;72 border-radius: 46px;73 border: 1px solid #D8D8D8;74 background: #fff;75 display: flex;76 align-items: center;77 justify-content: center;78 }79 80 /* Link row */81 .policy-link {82 padding: 24px 32px 20px;83 font-size: 34px;84 }85 .policy-link a {86 color: #111;87 text-decoration: underline;88 font-weight: 600;89 }90 91 /* Section header */92 .section {93 padding: 10px 0 0;94 }95 .section-header {96 display: flex;97 align-items: center;98 justify-content: space-between;99 padding: 28px 32px;100 box-sizing: border-box;101 }102 .section-title {103 font-size: 44px;104 font-weight: 700;105 }106 107 /* Ratings block */108 .ratings-wrap {109 padding: 12px 32px 34px;110 border-bottom: 12px solid #EFEFEF;111 }112 .rating-row {113 display: flex;114 align-items: center;115 gap: 40px;116 }117 .rating-value {118 font-size: 120px;119 font-weight: 700;120 color: #111;121 line-height: 1;122 }123 .stars {124 display: flex;125 flex-direction: column;126 gap: 10px;127 }128 .stars-row {129 display: flex;130 gap: 10px;131 }132 .rating-sub {133 font-size: 32px;134 color: #8A8A8A;135 }136 137 /* Viewed together */138 .cards-header-divider {139 height: 12px;140 background: #EFEFEF;141 width: 100%;142 }143 .viewed-title {144 padding: 28px 32px 8px;145 }146 .viewed-title .section-title { font-size: 42px; }147 .cards-scroller {148 display: flex;149 gap: 28px;150 padding: 16px 24px 160px;151 overflow-x: auto;152 -webkit-overflow-scrolling: touch;153 }154 .card {155 width: 480px;156 background: #fff;157 border: 1px solid #E6E6E6;158 border-radius: 12px;159 box-shadow: 0 2px 6px rgba(0,0,0,0.06);160 overflow: hidden;161 flex: 0 0 auto;162 }163 .card-img {164 width: 100%;165 height: 600px;166 background: #E0E0E0;167 border-bottom: 1px solid #BDBDBD;168 display: flex;169 align-items: center;170 justify-content: center;171 color: #757575;172 font-size: 30px;173 box-sizing: border-box;174 }175 .card-body {176 padding: 20px 22px 24px;177 }178 .brand {179 font-weight: 800;180 letter-spacing: 0.4px;181 font-size: 36px;182 margin-bottom: 8px;183 }184 .desc {185 color: #656565;186 font-size: 30px;187 line-height: 1.3;188 min-height: 116px;189 }190 .price {191 font-size: 34px;192 font-weight: 700;193 margin: 12px 0 8px;194 }195 .link {196 font-size: 32px;197 text-decoration: underline;198 color: #111;199 font-weight: 600;200 }201 202 /* Bottom bar */203 .bottom-bar {204 position: absolute;205 left: 0;206 right: 0;207 bottom: 54px;208 height: 190px;209 background: #fff;210 border-top: 1px solid #E6E6E6;211 box-shadow: 0 -6px 20px rgba(0,0,0,0.08);212 display: flex;213 align-items: center;214 padding: 0 34px;215 box-sizing: border-box;216 gap: 24px;217 }218 .ghost-like {219 width: 120px;220 height: 120px;221 border-radius: 60px;222 border: 1px solid #D8D8D8;223 display: flex;224 align-items: center;225 justify-content: center;226 background: #fff;227 }228 .cta {229 flex: 1;230 height: 120px;231 background: #111;232 color: #fff;233 border-radius: 10px;234 display: flex;235 align-items: center;236 justify-content: center;237 font-weight: 800;238 font-size: 40px;239 letter-spacing: 1px;240 box-shadow: 0 6px 10px rgba(0,0,0,0.25);241 }242 243 /* Gesture bar */244 .gesture {245 position: absolute;246 bottom: 18px;247 left: 50%;248 transform: translateX(-50%);249 width: 280px;250 height: 10px;251 background: #CFCFCF;252 border-radius: 6px;253 }254 255 /* Utilities */256 .divider {257 height: 12px;258 background: #EFEFEF;259 width: 100%;260 }261 /* Hide scrollbars visually in some engines without disabling scroll */262 .cards-scroller::-webkit-scrollbar { height: 0; }263</style>264</head>265<body>266<div id="render-target">267 268 <!-- Status bar -->269 <div class="status-bar">270 <div class="status-left">8:33</div>271 <div class="status-right">272 <span>◯</span>273 <span>⦿</span>274 <span>P</span>275 <span>N</span>276 <span class="dot"></span>277 <span style="transform: translateY(-1px);">📶</span>278 <span style="transform: translateY(-1px);">🔋</span>279 </div>280 </div>281 282 <!-- App bar -->283 <div class="app-bar">284 <div class="icon-btn" aria-label="Back">285 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">286 <path d="M15 18l-6-6 6-6"/>287 </svg>288 </div>289 <div class="app-title">LOUIS PHILIPPE Stripes Cotto...</div>290 <div class="icon-btn" aria-label="Wishlist">291 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">292 <path d="M12 21s-6.5-4.4-9-8.4C1 9 2.7 6 6 6c2 0 3.2 1.1 4 2 0.8-0.9 2-2 4-2 3.3 0 5 3 3 6.6-2.5 4-9 8.4-9 8.4z"/>293 </svg>294 </div>295 <div class="icon-btn" aria-label="Bag">296 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">297 <path d="M6 8h12l-1 12H7L6 8z"/>298 <path d="M9 8V6a3 3 0 016 0v2"/>299 </svg>300 </div>301 </div>302 303 <!-- Policy link -->304 <div class="policy-link">305 <a href="javascript:void(0)">Read Our Return & Exchange Policy</a>306 </div>307 308 <div class="divider"></div>309 310 <!-- Ratings & Reviews -->311 <div class="section">312 <div class="section-header">313 <div class="section-title">Ratings & Reviews</div>314 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">315 <path d="M6 9l6 6 6-6"/>316 </svg>317 </div>318 319 <div class="ratings-wrap">320 <div class="rating-row">321 <div class="rating-value">0.0</div>322 <div class="stars">323 <div class="stars-row">324 <!-- 5 outline stars -->325 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#C7C7C7" stroke-width="2">326 <path d="M12 17.3l-6.2 3.7 1.7-7.1L2 8.9l7.2-.6L12 2l2.8 6.3 7.2.6-5.5 4.9 1.7 7.1z"/>327 </svg>328 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#C7C7C7" stroke-width="2">329 <path d="M12 17.3l-6.2 3.7 1.7-7.1L2 8.9l7.2-.6L12 2l2.8 6.3 7.2.6-5.5 4.9 1.7 7.1z"/>330 </svg>331 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#C7C7C7" stroke-width="2">332 <path d="M12 17.3l-6.2 3.7 1.7-7.1L2 8.9l7.2-.6L12 2l2.8 6.3 7.2.6-5.5 4.9 1.7 7.1z"/>333 </svg>334 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#C7C7C7" stroke-width="2">335 <path d="M12 17.3l-6.2 3.7 1.7-7.1L2 8.9l7.2-.6L12 2l2.8 6.3 7.2.6-5.5 4.9 1.7 7.1z"/>336 </svg>337 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#C7C7C7" stroke-width="2">338 <path d="M12 17.3l-6.2 3.7 1.7-7.1L2 8.9l7.2-.6L12 2l2.8 6.3 7.2.6-5.5 4.9 1.7 7.1z"/>339 </svg>340 </div>341 <div class="rating-sub">( 0 Verified Buyer )</div>342 </div>343 </div>344 </div>345 </div>346 347 <!-- Viewed Together -->348 <div class="viewed-title">349 <div class="section-title">Viewed Together</div>350 </div>351 352 <div class="cards-scroller">353 <!-- Card 1 -->354 <div class="card">355 <div class="card-img">[IMG: Men's Work Wear Shirt - Light Blue]</div>356 <div class="card-body">357 <div class="brand">LOUIS PHILIPPE</div>358 <div class="desc">Textured Cotton Regular Fit Men's Work Wear Shirt</div>359 <div class="price">199</div>360 <div class="link">Add To Bag</div>361 </div>362 </div>363 364 <!-- Card 2 -->365 <div class="card">366 <div class="card-img">[IMG: Men's Work Wear Shirt - Maroon]</div>367 <div class="card-body">368 <div class="brand">LOUIS PHILIPPE</div>369 <div class="desc">Textured Cotton Regular Fit Men's Work Wear Shirt</div>370 <div class="price">₹5999</div>371 <div class="link">Add To Bag</div>372 </div>373 </div>374 375 <!-- Card 3 -->376 <div class="card">377 <div class="card-img">[IMG: Men's Work Wear Shirt - Grey]</div>378 <div class="card-body">379 <div class="brand">LOUIS PHILIPPE</div>380 <div class="desc">Premium Cotton Regular Fit Men's Work Wear Shirt</div>381 <div class="price">₹2499</div>382 <div class="link">Add To Bag</div>383 </div>384 </div>385 </div>386 387 <!-- Bottom Add to Bag bar -->388 <div class="bottom-bar">389 <div class="ghost-like" aria-label="Wishlist">390 <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">391 <path d="M12 21s-6.5-4.4-9-8.4C1 9 2.7 6 6 6c2 0 3.2 1.1 4 2 0.8-0.9 2-2 4-2 3.3 0 5 3 3 6.6-2.5 4-9 8.4-9 8.4z"/>392 </svg>393 </div>394 <div class="cta">ADD TO BAG</div>395 </div>396 397 <!-- Gesture bar -->398 <div class="gesture"></div>399</div>400</body>401</html>