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=1080, initial-scale=1.0">6<title>Rating & Reviews</title>7<style>8 * { box-sizing: border-box; }9 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif; color: #222; }10 #render-target {11 position: relative;12 overflow: hidden;13 width: 1080px;14 height: 2400px;15 background: #ffffff;16 }17 18 /* Status bar */19 .statusbar {20 height: 120px;21 padding: 0 40px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #777;26 font-size: 38px;27 background: #fafafa;28 }29 .status-right { display: flex; align-items: center; gap: 28px; }30 .sb-icon { width: 44px; height: 44px; stroke: #777; fill: none; }31 32 /* Header */33 .header {34 height: 150px;35 padding: 0 36px;36 display: flex;37 align-items: center;38 justify-content: space-between;39 border-bottom: 1px solid #eee;40 background: #fff;41 }42 .header-title {43 font-size: 54px;44 font-weight: 600;45 letter-spacing: 0.5px;46 }47 .icon-btn { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; }48 49 /* Rating summary */50 .summary {51 display: flex;52 padding: 40px 40px 20px 40px;53 gap: 40px;54 }55 .score {56 width: 380px;57 }58 .score .value {59 font-size: 120px;60 font-weight: 700;61 line-height: 1;62 margin-bottom: 10px;63 }64 .stars { display: flex; gap: 8px; margin: 12px 0; }65 .star svg { width: 44px; height: 44px; }66 .star.yellow svg polygon { fill: #FFC107; stroke: #FFC107; }67 .star.gray svg polygon { fill: #C9C9C9; stroke: #C9C9C9; }68 .score .count { color: #777; font-size: 36px; }69 70 .breakdown {71 flex: 1;72 padding-top: 18px;73 }74 .row {75 display: flex;76 align-items: center;77 gap: 20px;78 margin: 18px 0;79 }80 .row .mini-stars { display: flex; gap: 6px; }81 .row .mini-stars svg { width: 34px; height: 34px; }82 .bar {83 flex: 1;84 height: 18px;85 border-radius: 10px;86 background: #E0E0E0;87 overflow: hidden;88 }89 .bar .fill {90 height: 100%;91 background: #BDBDBD;92 border-radius: 10px;93 width: 0%;94 }95 .row:nth-child(1) .bar .fill { width: 88%; }96 .row:nth-child(2) .bar .fill { width: 6%; }97 .row:nth-child(3) .bar .fill { width: 0%; }98 .row:nth-child(4) .bar .fill { width: 0%; }99 .row:nth-child(5) .bar .fill { width: 0%; }100 .row .num {101 width: 40px;102 text-align: right;103 color: #777;104 font-size: 34px;105 }106 107 .divider {108 height: 12px;109 background: #f1f1f1;110 margin: 14px 0 0 0;111 border-top: 1px solid #eee;112 border-bottom: 1px solid #eee;113 }114 115 /* Filters */116 .filters {117 display: flex;118 gap: 20px;119 padding: 24px 40px;120 align-items: center;121 }122 .chip {123 padding: 22px 36px;124 border-radius: 40px;125 font-size: 36px;126 background: #f7f7f7;127 color: #333;128 border: 1px solid #e5e5e5;129 }130 .chip.active {131 background: #fff;132 border: 3px solid #222;133 font-weight: 600;134 }135 136 /* Review item */137 .review {138 padding: 24px 40px 0 40px;139 }140 .review-card {141 padding: 16px 0 30px 0;142 border-bottom: 1px solid #eee;143 }144 .review-header {145 display: flex;146 align-items: center;147 gap: 20px;148 font-size: 36px;149 color: #333;150 }151 .avatar {152 width: 92px;153 height: 92px;154 border-radius: 46px;155 background: #E0E0E0;156 border: 1px solid #BDBDBD;157 display: flex;158 align-items: center;159 justify-content: center;160 color: #757575;161 font-size: 24px;162 }163 .user-name { font-weight: 600; }164 .flags { font-size: 34px; }165 166 .review-stars { display: flex; align-items: center; gap: 12px; margin: 12px 0; }167 .review-stars .date { color: #777; font-size: 32px; }168 169 .options { color: #777; font-size: 34px; margin: 6px 0 12px 0; }170 .review-text { font-size: 40px; line-height: 1.4; color: #222; }171 172 /* Bottom action bar */173 .action-bar {174 position: absolute;175 left: 0; right: 0; bottom: 120px;176 height: 220px;177 background: #ffffff;178 border-top: 1px solid #eee;179 box-shadow: 0 -6px 20px rgba(0,0,0,0.08);180 display: flex;181 align-items: center;182 gap: 28px;183 padding: 0 40px;184 }185 .ab-item {186 width: 160px;187 display: flex;188 flex-direction: column;189 align-items: center;190 gap: 16px;191 color: #333;192 font-size: 32px;193 }194 .ab-icon { width: 72px; height: 72px; }195 .buy-btn {196 flex: 1;197 height: 140px;198 background: #f4c645;199 border-radius: 80px;200 display: flex;201 align-items: center;202 justify-content: center;203 font-size: 48px;204 font-weight: 700;205 color: #222;206 }207 208 /* OS navigation area */209 .os-nav {210 position: absolute;211 left: 0; bottom: 0;212 width: 1080px; height: 120px;213 background: #000;214 }215 .home-indicator {216 position: absolute;217 left: 50%; transform: translateX(-50%);218 bottom: 36px;219 width: 240px; height: 12px;220 background: #cfcfcf;221 border-radius: 6px;222 opacity: 0.8;223 }224</style>225</head>226<body>227<div id="render-target">228 229 <!-- Status Bar -->230 <div class="statusbar">231 <div>10:09 21°</div>232 <div class="status-right">233 <svg class="sb-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke-width="2"/></svg>234 <svg class="sb-icon" viewBox="0 0 24 24"><path d="M5 12h14" stroke-width="2"/></svg>235 <svg class="sb-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" stroke-width="2"/><path d="M12 2v4M12 18v4M2 12h4M18 12h4" stroke-width="2"/></svg>236 <svg class="sb-icon" viewBox="0 0 24 24"><circle cx="7" cy="12" r="2" stroke-width="2"/><circle cx="17" cy="12" r="2" stroke-width="2"/></svg>237 <svg class="sb-icon" viewBox="0 0 24 24"><path d="M6 3h12v18H6z" stroke-width="2"/><rect x="9" y="4" width="6" height="3" stroke-width="2"/></svg>238 </div>239 </div>240 241 <!-- Header -->242 <div class="header">243 <div class="icon-btn">244 <svg viewBox="0 0 24 24" width="60" height="60">245 <path d="M15 6 L9 12 L15 18" stroke="#333" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>246 </svg>247 </div>248 <div class="header-title">Rating & Reviews</div>249 <div class="icon-btn">250 <svg viewBox="0 0 24 24" width="60" height="60">251 <path d="M6 8h12v12H6z" fill="none" stroke="#333" stroke-width="2" />252 <path d="M8 8c0-3 8-3 8 0" fill="none" stroke="#333" stroke-width="2" />253 </svg>254 </div>255 </div>256 257 <!-- Rating Summary -->258 <div class="summary">259 <div class="score">260 <div class="value">5.0</div>261 <div class="stars">262 <span class="star yellow">263 <svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>264 </span>265 <span class="star yellow">266 <svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>267 </span>268 <span class="star yellow">269 <svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>270 </span>271 <span class="star yellow">272 <svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>273 </span>274 <span class="star yellow">275 <svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>276 </span>277 </div>278 <div class="count">1 Review</div>279 </div>280 281 <div class="breakdown">282 <div class="row">283 <div class="mini-stars">284 <svg viewBox="0 0 24 24"><polygon fill="#C9C9C9" stroke="#C9C9C9" points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>285 <svg viewBox="0 0 24 24"><polygon fill="#C9C9C9" stroke="#C9C9C9" points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>286 <svg viewBox="0 0 24 24"><polygon fill="#C9C9C9" stroke="#C9C9C9" points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>287 <svg viewBox="0 0 24 24"><polygon fill="#C9C9C9" stroke="#C9C9C9" points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>288 <svg viewBox="0 0 24 24"><polygon fill="#C9C9C9" stroke="#C9C9C9" points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>289 </div>290 <div class="bar"><div class="fill"></div></div>291 <div class="num">1</div>292 </div>293 <div class="row">294 <div class="mini-stars">295 <svg viewBox="0 0 24 24"><polygon fill="#C9C9C9" stroke="#C9C9C9" points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>296 <svg viewBox="0 0 24 24"><polygon fill="#C9C9C9" stroke="#C9C9C9" points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>297 <svg viewBox="0 0 24 24"><polygon fill="#C9C9C9" stroke="#C9C9C9" points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>298 <svg viewBox="0 0 24 24"><polygon fill="#C9C9C9" stroke="#C9C9C9" points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>299 </div>300 <div class="bar"><div class="fill"></div></div>301 <div class="num">0</div>302 </div>303 <div class="row">304 <div class="mini-stars">305 <svg viewBox="0 0 24 24"><polygon fill="#C9C9C9" stroke="#C9C9C9" points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>306 <svg viewBox="0 0 24 24"><polygon fill="#C9C9C9" stroke="#C9C9C9" points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>307 <svg viewBox="0 0 24 24"><polygon fill="#C9C9C9" stroke="#C9C9C9" points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>308 </div>309 <div class="bar"><div class="fill"></div></div>310 <div class="num">0</div>311 </div>312 <div class="row">313 <div class="mini-stars">314 <svg viewBox="0 0 24 24"><polygon fill="#C9C9C9" stroke="#C9C9C9" points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>315 <svg viewBox="0 0 24 24"><polygon fill="#C9C9C9" stroke="#C9C9C9" points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>316 </div>317 <div class="bar"><div class="fill"></div></div>318 <div class="num">0</div>319 </div>320 <div class="row">321 <div class="mini-stars">322 <svg viewBox="0 0 24 24"><polygon fill="#C9C9C9" stroke="#C9C9C9" points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>323 </div>324 <div class="bar"><div class="fill"></div></div>325 <div class="num">0</div>326 </div>327 </div>328 </div>329 330 <div class="divider"></div>331 332 <!-- Filters -->333 <div class="filters">334 <div class="chip active">All (1)</div>335 <div class="chip">Most Recent</div>336 </div>337 338 <!-- Review -->339 <div class="review">340 <div class="review-card">341 <div class="review-header">342 <div class="avatar">[IMG: Avatar]</div>343 <div class="user-name">cdk***est</div>344 <div class="flags">🇺🇸 👑</div>345 </div>346 347 <div class="review-stars">348 <span class="star yellow"><svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill="#FFC107" stroke="#FFC107"/></svg></span>349 <span class="star yellow"><svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill="#FFC107" stroke="#FFC107"/></svg></span>350 <span class="star yellow"><svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill="#FFC107" stroke="#FFC107"/></svg></span>351 <span class="star yellow"><svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill="#FFC107" stroke="#FFC107"/></svg></span>352 <span class="star yellow"><svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill="#FFC107" stroke="#FFC107"/></svg></span>353 <div class="date">Sep 2024</div>354 </div>355 356 <div class="options">Options: Dark Khaki</div>357 <div class="review-text">358 Default 5-star ratings by platform because the buyer did not leave timely reviews.359 </div>360 </div>361 </div>362 363 <!-- Bottom Action Bar -->364 <div class="action-bar">365 <div class="ab-item">366 <svg class="ab-icon" viewBox="0 0 24 24">367 <path d="M3 9h18" stroke="#333" stroke-width="2" fill="none"/>368 <rect x="4" y="9" width="16" height="11" stroke="#333" stroke-width="2" fill="none"/>369 <path d="M7 9V5h10v4" stroke="#333" stroke-width="2" fill="none"/>370 </svg>371 <div>Store</div>372 </div>373 <div class="ab-item">374 <svg class="ab-icon" viewBox="0 0 24 24">375 <rect x="3" y="4" width="18" height="14" rx="3" ry="3" stroke="#333" stroke-width="2" fill="none"/>376 <path d="M8 18l-3 3" stroke="#333" stroke-width="2" fill="none"/>377 </svg>378 <div>Chat</div>379 </div>380 <div class="buy-btn">Buy Now</div>381 </div>382 383 <!-- OS Nav area -->384 <div class="os-nav">385 <div class="home-indicator"></div>386 </div>387 388</div>389</body>390</html>