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=1440, initial-scale=1.0">6<title>Product Ratings & Reviews</title>7<style>8 :root{9 --bg:#ffffff;10 --text:#1d2330;11 --muted:#788293;12 --border:#E5E7EB;13 --card-border:#DFE3E8;14 --blue:#2D9CDB;15 --yellow:#FFE133;16 --yellow-dark:#f0c800;17 --star:#FFC107;18 --light:#F7F9FC;19 }20 body{ margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; color:var(--text); }21 #render-target{22 width:1440px;23 height:3120px;24 position:relative;25 overflow:hidden;26 background:var(--bg);27 box-shadow:0 6px 24px rgba(0,0,0,0.12);28 }29 30 /* Status bar */31 .status-bar{32 height:110px;33 background:#E6E7EA;34 color:#fff;35 display:flex;36 align-items:center;37 padding:0 36px;38 font-weight:600;39 letter-spacing:1px;40 }41 .status-time{ font-size:44px; opacity:.95; }42 .status-icons{ margin-left:auto; display:flex; gap:26px; align-items:center; }43 .status-dot{ width:14px; height:14px; background:#fff; border-radius:50%; opacity:.65; }44 45 /* App bar */46 .app-bar{47 height:160px;48 background:#fff;49 display:flex;50 align-items:center;51 padding:0 36px;52 border-bottom:1px solid var(--border);53 }54 .app-actions{ margin-left:auto; display:flex; gap:48px; }55 .icon-btn{ width:84px; height:84px; display:flex; align-items:center; justify-content:center; border-radius:50%; }56 .icon{ width:54px; height:54px; fill:none; stroke:#222; stroke-width:3.5; }57 .icon.solid{ fill:#222; stroke:none; }58 59 /* Product carousel */60 .carousel{61 padding:24px 24px 16px 24px;62 display:flex;63 gap:28px;64 overflow:hidden;65 background:#fff;66 }67 .card{68 width:620px;69 border:1px solid var(--card-border);70 border-radius:10px;71 background:#fff;72 overflow:hidden;73 }74 .card .img{75 height:300px;76 background:#E0E0E0;77 border-bottom:1px solid var(--card-border);78 display:flex; align-items:center; justify-content:center;79 color:#6B7280;80 font-size:32px;81 }82 .card-body{ padding:26px 26px 30px 26px; position:relative; }83 .badge{84 position:absolute; top:-34px; left:20px;85 background:#fff; border:1px solid var(--card-border); border-radius:8px;86 padding:6px 12px; display:flex; align-items:center; gap:8px; font-size:28px; font-weight:700; color:#4b5563;87 }88 .favorite{89 position:absolute; top:-34px; right:20px;90 background:#fff; border:1px solid var(--card-border); border-radius:50%;91 width:64px; height:64px; display:flex; align-items:center; justify-content:center;92 }93 .brand{ font-weight:800; letter-spacing:1px; margin-top:12px; }94 .title{ color:#4b5563; font-size:30px; line-height:1.2; margin-top:8px; height:70px; overflow:hidden; }95 .price-row{ margin-top:18px; display:flex; align-items:center; gap:18px; }96 .price{97 background:var(--yellow); padding:10px 18px; font-weight:900; font-size:34px; border-radius:6px;98 }99 .old-price{ color:#9CA3AF; text-decoration:line-through; font-size:28px; }100 101 /* Blue pager bar */102 .pager{103 height:12px; background:#E6F3FF; margin:20px 40px 20px; border-radius:6px; position:relative;104 }105 .pager::after{106 content:""; position:absolute; left:0; top:0; bottom:0; width:340px; background:#1E88E5; border-radius:6px;107 }108 109 /* Section header */110 .section-header{111 display:flex; align-items:center; gap:24px;112 padding:36px 40px 18px;113 border-top:10px solid #F3F4F6;114 }115 .section-title{116 font-size:48px; font-weight:800; letter-spacing:2px;117 }118 .section-expand{ margin-left:auto; width:64px; height:64px; border:1px solid var(--border); border-radius:50%; display:flex; align-items:center; justify-content:center; }119 120 /* Ratings wrap */121 .ratings-wrap{122 padding:10px 40px 30px 40px;123 display:flex;124 gap:40px;125 }126 .score{127 width:420px; padding:20px 0; border-right:2px solid #E5E7EB;128 }129 .score .value{ font-size:120px; font-weight:700; }130 .stars{ margin:10px 0 10px; color:var(--star); display:flex; gap:6px; }131 .review-count{ color:#6B7280; font-size:34px; }132 133 .dist{134 flex:1; padding:10px 20px;135 }136 .dist-row{137 display:flex; align-items:center; gap:20px; margin:22px 0;138 font-size:34px; color:#6B7280;139 }140 .dist-row .bar{141 height:18px; background:#ECEDEF; border-radius:10px; flex:1; position:relative; overflow:hidden;142 }143 .dist-row .bar span{144 position:absolute; left:0; top:0; bottom:0; background:#F3C233; border-radius:10px;145 }146 .dist-row .count{ width:120px; text-align:right; color:#6B7280; }147 148 /* Info note */149 .info-line{150 display:flex; align-items:center; gap:18px; color:#1E88E5; font-weight:700;151 padding:20px 40px;152 }153 154 /* Write review */155 .write-review{156 margin:14px 40px;157 background:#EAF3FB; border:1px solid #D5E5F5; color:#1E88E5;158 height:140px; display:flex; align-items:center; justify-content:center; gap:18px;159 border-radius:18px; font-size:38px; font-weight:700;160 }161 162 /* Review header row */163 .reviews-head{164 display:flex; align-items:center; padding:32px 40px 10px; gap:20px;165 }166 .reviews-head .title{ font-size:44px; font-weight:800; margin-right:auto; color:#111827; }167 .sort{168 margin-left:auto; display:flex; align-items:center; gap:18px;169 border:1px solid var(--border); border-radius:14px; padding:20px 28px; background:#fff; color:#6B7280; font-size:34px;170 }171 172 /* Single review snippet */173 .review{174 padding:30px 40px 0;175 }176 .chip{177 display:inline-flex; align-items:center; gap:10px;178 background:#F3F6FA; border:1px solid #E3E8EF; padding:18px 22px; border-radius:14px; color:#374151; font-weight:700; font-size:32px;179 }180 .rev-title{ margin:28px 0 8px; font-size:42px; font-weight:800; color:#1F2937; }181 .rev-text{ color:#6B7280; font-size:34px; }182 183 /* Bottom sticky add to cart */184 .bottom-bar{185 position:absolute; left:24px; right:24px; bottom:110px;186 background:#fff; border:1px solid var(--border); border-radius:22px;187 box-shadow:0 10px 30px rgba(0,0,0,0.12);188 padding:20px;189 display:flex; align-items:center; gap:24px;190 }191 .wish-btn{192 width:220px; height:120px; border:2px solid #DAE2EA; border-radius:18px; display:flex; align-items:center; justify-content:center; background:#fff;193 }194 .cart-btn{195 flex:1; height:120px; background:var(--yellow); border:none; border-radius:18px; font-size:48px; font-weight:900; letter-spacing:2px; color:#1f2329;196 display:flex; align-items:center; justify-content:center; gap:18px;197 box-shadow:inset 0 -3px 0 rgba(0,0,0,0.05);198 }199 200 /* Gesture pill */201 .gesture{202 position:absolute; left:50%; transform:translateX(-50%);203 bottom:30px; width:320px; height:14px; background:#000; opacity:.18; border-radius:10px;204 }205 206 /* Utility star icon for text */207 .tiny-star{ width:30px; height:30px; fill:var(--star); }208 .muted{ color:#6B7280; }209</style>210</head>211<body>212<div id="render-target">213 214 <!-- Status bar -->215 <div class="status-bar">216 <div class="status-time">1:25</div>217 <div class="status-icons">218 <div class="status-dot"></div>219 <div class="status-dot"></div>220 <div class="status-dot"></div>221 <div class="status-dot"></div>222 </div>223 </div>224 225 <!-- App bar -->226 <div class="app-bar">227 <div class="icon-btn" aria-label="Back">228 <svg class="icon" viewBox="0 0 24 24">229 <polyline points="15,4 7,12 15,20" stroke="#222" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></polyline>230 </svg>231 </div>232 <div style="margin-left:8px; font-size:38px; font-weight:700; color:#1f2937;"></div>233 <div class="app-actions">234 <div class="icon-btn" title="Search">235 <svg class="icon" viewBox="0 0 24 24">236 <circle cx="11" cy="11" r="7" stroke="#222" stroke-width="2.2" fill="none"></circle>237 <line x1="16.5" y1="16.5" x2="21" y2="21" stroke="#222" stroke-width="2.2"></line>238 </svg>239 </div>240 <div class="icon-btn" title="Wishlist">241 <svg class="icon" viewBox="0 0 24 24">242 <path d="M12 21s-6-4.3-8.5-7.2C1.8 11.8 2 8.5 4.6 7c2.2-1.2 4.3-.2 5.4 1.2C11.1 6.8 13.3 5.8 15.4 7c2.6 1.5 2.8 4.8 1.1 6.8C18 16.7 12 21 12 21z" fill="none" stroke="#222" stroke-width="2"></path>243 </svg>244 </div>245 <div class="icon-btn" title="Cart">246 <svg class="icon" viewBox="0 0 24 24">247 <circle cx="9" cy="20" r="1.8" fill="#222"></circle>248 <circle cx="18" cy="20" r="1.8" fill="#222"></circle>249 <path d="M3 4h2l2.2 10.2a2 2 0 0 0 2 1.6h7.5a2 2 0 0 0 2-1.4L21 8H7.2" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>250 </svg>251 </div>252 </div>253 </div>254 255 <!-- Product carousel -->256 <div class="carousel">257 <div class="card">258 <div class="img">[IMG: Running Shoes Close-up]</div>259 <div class="card-body">260 <div class="badge">261 <svg class="tiny-star" viewBox="0 0 24 24"><polygon points="12,2 15.2,8.5 22,9.2 17,13.7 18.4,20.4 12,17 5.6,20.4 7,13.7 2,9.2 8.8,8.5" /></svg>262 4.5263 </div>264 <div class="favorite">265 <svg class="icon" viewBox="0 0 24 24">266 <path d="M12 21s-6-4.3-8.5-7.2C1.8 11.8 2 8.5 4.6 7c2.2-1.2 4.3-.2 5.4 1.2C11.1 6.8 13.3 5.8 15.4 7c2.6 1.5 2.8 4.8 1.1 6.8C18 16.7 12 21 12 21z" fill="none" stroke="#3b82f6" stroke-width="2"></path>267 </svg>268 </div>269 <div class="brand">KALENJI</div>270 <div class="title">Men Running Shoes Run Active - Bla...</div>271 <div class="price-row">272 <div class="price">₹2,299</div>273 <div class="old-price">₹2,999</div>274 </div>275 </div>276 </div>277 <div class="card">278 <div class="img">[IMG: Men's Jog Flow Shoes]</div>279 <div class="card-body">280 <div class="badge">281 <svg class="tiny-star" viewBox="0 0 24 24"><polygon points="12,2 15.2,8.5 22,9.2 17,13.7 18.4,20.4 12,17 5.6,20.4 7,13.7 2,9.2 8.8,8.5" /></svg>282 4.5283 </div>284 <div class="favorite">285 <svg class="icon" viewBox="0 0 24 24">286 <path d="M12 21s-6-4.3-8.5-7.2C1.8 11.8 2 8.5 4.6 7c2.2-1.2 4.3-.2 5.4 1.2C11.1 6.8 13.3 5.8 15.4 7c2.6 1.5 2.8 4.8 1.1 6.8C18 16.7 12 21 12 21z" fill="none" stroke="#3b82f6" stroke-width="2"></path>287 </svg>288 </div>289 <div class="brand">KALENJI</div>290 <div class="title">Men's Running Shoes Jog flow 100.1...</div>291 <div class="price-row">292 <div class="price">₹1,799</div>293 <div class="old-price">₹2,999</div>294 </div>295 </div>296 </div>297 </div>298 299 <div class="pager"></div>300 301 <!-- Ratings & Reviews header -->302 <div class="section-header">303 <div class="section-title">RATINGS & REVIEWS</div>304 <div class="section-expand">305 <svg class="icon" viewBox="0 0 24 24">306 <polyline points="6,9 12,15 18,9" stroke="#6B7280" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"></polyline>307 </svg>308 </div>309 </div>310 311 <!-- Ratings body -->312 <div class="ratings-wrap">313 <div class="score">314 <div class="value">4.4</div>315 <div class="stars">316 <svg class="tiny-star" viewBox="0 0 24 24"><polygon points="12,2 15.2,8.5 22,9.2 17,13.7 18.4,20.4 12,17 5.6,20.4 7,13.7 2,9.2 8.8,8.5"/></svg>317 <svg class="tiny-star" viewBox="0 0 24 24"><polygon points="12,2 15.2,8.5 22,9.2 17,13.7 18.4,20.4 12,17 5.6,20.4 7,13.7 2,9.2 8.8,8.5"/></svg>318 <svg class="tiny-star" viewBox="0 0 24 24"><polygon points="12,2 15.2,8.5 22,9.2 17,13.7 18.4,20.4 12,17 5.6,20.4 7,13.7 2,9.2 8.8,8.5"/></svg>319 <svg class="tiny-star" viewBox="0 0 24 24"><polygon points="12,2 15.2,8.5 22,9.2 17,13.7 18.4,20.4 12,17 5.6,20.4 7,13.7 2,9.2 8.8,8.5"/></svg>320 <svg class="tiny-star" viewBox="0 0 24 24"><polygon points="12,2 15.2,8.5 22,9.2 17,13.7 18.4,20.4 12,17 5.6,20.4 7,13.7 2,9.2 8.8,8.5"/></svg>321 </div>322 <div class="review-count">19358 Reviews</div>323 </div>324 325 <div class="dist">326 <div class="dist-row">327 <span>5</span>328 <div class="bar"><span style="width:86%;"></span></div>329 <div class="count">11888</div>330 </div>331 <div class="dist-row">332 <span>4</span>333 <div class="bar"><span style="width:40%;"></span></div>334 <div class="count">4828</div>335 </div>336 <div class="dist-row">337 <span>3</span>338 <div class="bar"><span style="width:16%;"></span></div>339 <div class="count">1262</div>340 </div>341 <div class="dist-row">342 <span>2</span>343 <div class="bar"><span style="width:6%;"></span></div>344 <div class="count">498</div>345 </div>346 <div class="dist-row">347 <span>1</span>348 <div class="bar"><span style="width:12%;"></span></div>349 <div class="count">882</div>350 </div>351 </div>352 </div>353 354 <!-- Info line -->355 <div class="info-line">356 <svg width="36" height="36" viewBox="0 0 24 24">357 <circle cx="12" cy="12" r="10" stroke="#1E88E5" stroke-width="2" fill="none"></circle>358 <rect x="11" y="10" width="2" height="7" fill="#1E88E5"></rect>359 <rect x="11" y="6.2" width="2" height="2.2" fill="#1E88E5"></rect>360 </svg>361 17390 customers recommend this product362 </div>363 364 <!-- Write a review -->365 <div class="write-review">366 <svg width="42" height="42" viewBox="0 0 24 24">367 <path d="M3 17.3V21h3.7L18 9.7l-3.7-3.7L3 17.3z" fill="#1E88E5"></path>368 <path d="M20.6 7.1c.5-.5.5-1.2 0-1.7L18.6 3.4c-.5-.5-1.2-.5-1.7 0l-1.9 1.9 3.7 3.7 1.9-1.9z" fill="#1E88E5"></path>369 </svg>370 WRITE A REVIEW371 </div>372 373 <!-- Reviews list header -->374 <div class="reviews-head">375 <div class="title">Reviews (19358)</div>376 <div class="muted">Sort by</div>377 <div class="sort">The Newest378 <svg width="26" height="26" viewBox="0 0 24 24" style="margin-left:8px">379 <polyline points="6,9 12,15 18,9" stroke="#6B7280" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></polyline>380 </svg>381 </div>382 </div>383 384 <div class="review">385 <div class="chip">386 5387 <svg class="tiny-star" viewBox="0 0 24 24"><polygon points="12,2 15.2,8.5 22,9.2 17,13.7 18.4,20.4 12,17 5.6,20.4 7,13.7 2,9.2 8.8,8.5"/></svg>388 Product Experience (1 week or less)389 </div>390 <div class="rev-title">Very Good</div>391 <div class="rev-text">Excellent</div>392 </div>393 394 <!-- Bottom bar -->395 <div class="bottom-bar">396 <div class="wish-btn">397 <svg width="60" height="60" viewBox="0 0 24 24">398 <path d="M12 21s-6-4.3-8.5-7.2C1.8 11.8 2 8.5 4.6 7c2.2-1.2 4.3-.2 5.4 1.2C11.1 6.8 13.3 5.8 15.4 7c2.6 1.5 2.8 4.8 1.1 6.8C18 16.7 12 21 12 21z" fill="none" stroke="#0EA5E9" stroke-width="2"></path>399 <rect x="11" y="7" width="2" height="10" fill="#0EA5E9"></rect>400 <rect x="7" y="11" width="10" height="2" fill="#0EA5E9"></rect>401 </svg>402 </div>403 <button class="cart-btn">404 ADD TO CART405 <svg width="54" height="54" viewBox="0 0 24 24">406 <circle cx="9" cy="20" r="1.7" fill="#1f2329"></circle>407 <circle cx="18" cy="20" r="1.7" fill="#1f2329"></circle>408 <path d="M3 4h2l2 9.5a2 2 0 0 0 2 1.5h7.3a2 2 0 0 0 2-1.3L21 8H7" stroke="#1f2329" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>409 </svg>410 </button>411 </div>412 413 <div class="gesture"></div>414</div>415</body>416</html>