GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Ratings & Reviews</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    position: relative;10    overflow: hidden;11    width: 1080px;12    height: 2400px;13    background: #FFFFFF;14    color: #2E2E2E;15  }16  .status-bar {17    height: 96px;18    padding: 0 36px;19    display: flex;20    align-items: center;21    color: #616161;22    font-size: 36px;23    border-bottom: 1px solid #F0F0F0;24  }25  .header {26    height: 132px;27    display: flex;28    align-items: center;29    padding: 0 36px;30  }31  .back-btn {32    width: 90px;33    height: 90px;34    display: flex;35    align-items: center;36    justify-content: center;37    margin-right: 18px;38  }39  .header-title {40    font-size: 48px;41    font-weight: 700;42    color: #3E3E45;43  }44  .section {45    padding: 0 48px;46  }47  .rating-summary {48    margin-top: 24px;49    display: grid;50    grid-template-columns: 420px 1px 1fr;51    column-gap: 36px;52    align-items: start;53    padding: 24px 0 12px;54    border-bottom: 1px solid #ECECEC;55  }56  .rating-left {57    text-align: left;58  }59  .big-rating {60    font-size: 96px;61    font-weight: 700;62    color: #2E2E2E;63    line-height: 1;64    display: flex;65    align-items: center;66    gap: 16px;67  }68  .big-rating .star {69    color: #0D9D87;70    font-size: 54px;71    font-weight: 800;72  }73  .verified {74    margin-top: 18px;75    font-size: 32px;76    color: #80868B;77  }78  .divider-vert {79    width: 1px;80    background: #E6E6E6;81    height: 280px;82    margin-top: 12px;83  }84  .bars {85    padding-top: 6px;86  }87  .bar-row {88    display: grid;89    grid-template-columns: 140px 1fr 84px;90    align-items: center;91    margin: 26px 0;92    font-size: 34px;93    color: #42464C;94  }95  .bar-label { white-space: nowrap; }96  .bar-track {97    height: 20px;98    background: #EDEDED;99    border-radius: 20px;100    overflow: hidden;101  }102  .bar-fill {103    height: 100%;104    border-radius: 20px;105  }106  .fill-teal { background: #1AA885; }107  .fill-teal-light { background: #72C9BD; }108  .fill-yellow { background: #F9B938; }109  .fill-red { background: #F06A6E; }110  .bar-value { text-align: right; color: #616871; font-size: 34px; }111  .filters-title {112    font-size: 36px;113    color: #4A4F56;114    margin: 28px 0 24px 0;115  }116  .chip-row {117    display: flex;118    gap: 18px;119    flex-wrap: wrap;120  }121  .chip {122    padding: 18px 28px;123    border: 2px solid #E5E5E5;124    border-radius: 40px;125    font-size: 34px;126    color: #3E4248;127    background: #FFFFFF;128  }129  .chip.active {130    border-color: #F24F6C;131    color: #F24F6C;132    font-weight: 700;133  }134  .sort-box {135    margin-top: 28px;136    border: 2px solid #EAEAEA;137    border-radius: 24px;138    height: 120px;139    display: flex;140    align-items: center;141    padding: 0 28px;142    color: #F24F6C;143    font-size: 38px;144    justify-content: space-between;145  }146  .sort-left {147    display: flex;148    align-items: center;149    gap: 16px;150    color: #F24F6C;151    font-weight: 700;152  }153  .caret {154    width: 32px; height: 32px; margin-left: 8px;155  }156  .reviews-header {157    margin: 42px 0 24px;158    font-size: 42px;159    font-weight: 700;160    color: #2E2E2E;161  }162  .review {163    padding: 24px 0;164    border-bottom: 1px solid #EEEEEE;165  }166  .review-top {167    display: flex;168    align-items: center;169    gap: 24px;170    margin-bottom: 18px;171  }172  .rating-pill {173    background: #1AA885;174    color: #FFFFFF;175    border-radius: 12px;176    padding: 8px 16px;177    font-size: 34px;178    font-weight: 800;179    width: fit-content;180  }181  .review-age {182    font-size: 32px;183    color: #7A8188;184  }185  .review-text {186    font-size: 38px;187    color: #2E2E2E;188    margin: 12px 0 22px;189  }190  .size-pill {191    display: inline-block;192    background: #F4F4F6;193    color: #2E2E2E;194    border-radius: 16px;195    padding: 16px 22px;196    font-size: 36px;197    font-weight: 700;198    margin-bottom: 18px;199  }200  .size-pill span {201    font-weight: 500;202    margin-left: 8px;203  }204  .author {205    font-size: 34px;206    color: #6F757B;207    margin-bottom: 24px;208  }209  .review-footer {210    display: flex;211    align-items: center;212    justify-content: flex-end;213    gap: 24px;214    color: #6E747A;215    font-size: 34px;216  }217  .thumb {218    display: inline-flex;219    align-items: center;220    gap: 12px;221    color: #6E747A;222  }223  .thumb svg { width: 40px; height: 40px; }224</style>225</head>226<body>227<div id="render-target">228 229  <div class="status-bar">230    <div style="flex:1;">10:14</div>231    <div style="display:flex; gap:24px; align-items:center;">232      <span>•</span><span>•</span><span>•</span>233    </div>234  </div>235 236  <div class="header">237    <div class="back-btn">238      <svg viewBox="0 0 24 24" width="48" height="48">239        <path d="M15 19l-7-7 7-7" fill="none" stroke="#4A4A4A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>240      </svg>241    </div>242    <div class="header-title">Ratings & Reviews</div>243  </div>244 245  <div class="section">246    <div class="rating-summary">247      <div class="rating-left">248        <div class="big-rating">4.4 <span class="star">★</span></div>249        <div class="verified">49 verified buyers</div>250      </div>251      <div class="divider-vert"></div>252      <div class="bars">253        <div class="bar-row">254          <div class="bar-label">5 ★</div>255          <div class="bar-track"><div class="bar-fill fill-teal" style="width: 78%;"></div></div>256          <div class="bar-value">33</div>257        </div>258        <div class="bar-row">259          <div class="bar-label">4 ★</div>260          <div class="bar-track"><div class="bar-fill fill-teal" style="width: 28%;"></div></div>261          <div class="bar-value">9</div>262        </div>263        <div class="bar-row">264          <div class="bar-label">3 ★</div>265          <div class="bar-track"><div class="bar-fill fill-teal-light" style="width: 12%;"></div></div>266          <div class="bar-value">3</div>267        </div>268        <div class="bar-row">269          <div class="bar-label">2 ★</div>270          <div class="bar-track"><div class="bar-fill fill-yellow" style="width: 8%;"></div></div>271          <div class="bar-value">2</div>272        </div>273        <div class="bar-row">274          <div class="bar-label">1 ★</div>275          <div class="bar-track"><div class="bar-fill fill-red" style="width: 8%;"></div></div>276          <div class="bar-value">2</div>277        </div>278      </div>279    </div>280 281    <div class="filters-title">Filter photos and reviews by</div>282    <div class="chip-row">283      <div class="chip">All</div>284      <div class="chip active">5 ★</div>285      <div class="chip">4 ★</div>286      <div class="chip">3 ★</div>287      <div class="chip">2 ★</div>288      <div class="chip">1 ★</div>289    </div>290 291    <div class="sort-box">292      <div class="sort-left">293        <svg width="36" height="36" viewBox="0 0 24 24">294          <path d="M7 5v14M7 5l-2 2M7 5l2 2M17 19V5M17 19l-2-2M17 19l2-2" stroke="#F24F6C" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>295        </svg>296        Most Helpful297      </div>298      <svg class="caret" viewBox="0 0 24 24">299        <path d="M6 9l6 6 6-6" fill="none" stroke="#F24F6C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>300      </svg>301    </div>302 303    <div class="reviews-header">Customer Reviews (3)</div>304 305    <div class="review">306      <div class="review-top">307        <div class="rating-pill">5 ★</div>308        <div class="review-age">6 months ago</div>309      </div>310      <div class="review-text">Love the fabric and finish.</div>311      <div class="size-pill">Size bought: <span>40</span></div>312      <div class="author">Meeta Shanker</div>313      <div class="review-footer">314        <div style="margin-right: 18px; color:#7C8288;">Helpful?</div>315        <div class="thumb">316          <svg viewBox="0 0 24 24">317            <path d="M2 10h4v10H2zM22 10c0-1.1-.9-2-2-2h-6l1-4-4 4v12h9c1.1 0 2-.9 2-2v-8z" fill="none" stroke="#7C8288" stroke-width="1.6"/>318          </svg>319          <span>0</span>320        </div>321        <div class="thumb">322          <svg viewBox="0 0 24 24">323            <path d="M2 14h4V4H2zM22 14c0 1.1-.9 2-2 2h-6l1 4-4-4V0h9c1.1 0 2 .9 2 2v12z" transform="rotate(180 12 12)" fill="none" stroke="#7C8288" stroke-width="1.6"/>324          </svg>325        </div>326      </div>327    </div>328 329    <div class="review">330      <div class="review-top">331        <div class="rating-pill">5 ★</div>332        <div class="review-age">6 months ago</div>333      </div>334      <div class="review-text">Value for money.</div>335      <div class="size-pill">Size bought: <span>42</span></div>336      <div class="author">Saurabh yadav</div>337      <div class="review-footer">338        <div style="margin-right: 18px; color:#7C8288;">Helpful?</div>339        <div class="thumb">340          <svg viewBox="0 0 24 24">341            <path d="M2 10h4v10H2zM22 10c0-1.1-.9-2-2-2h-6l1-4-4 4v12h9c1.1 0 2-.9 2-2v-8z" fill="none" stroke="#7C8288" stroke-width="1.6"/>342          </svg>343          <span>0</span>344        </div>345        <div class="thumb">346          <svg viewBox="0 0 24 24">347            <path d="M2 14h4V4H2zM22 14c0 1.1-.9 2-2 2h-6l1 4-4-4V0h9c1.1 0 2 .9 2 2v12z" transform="rotate(180 12 12)" fill="none" stroke="#7C8288" stroke-width="1.6"/>348          </svg>349        </div>350      </div>351    </div>352 353  </div>354 355</div>356</body>357</html>