GD-ML/AndroidCode

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>Reviews Page</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13    color: #111;14  }15 16  #render-target {17    width: 1080px;18    height: 2400px;19    position: relative;20    overflow: hidden;21    background: #fff;22  }23 24  .section {25    padding: 0 48px;26  }27 28  .top-area {29    padding-top: 110px;30    text-align: center;31    position: relative;32  }33 34  .close-btn {35    position: absolute;36    right: 40px;37    top: 100px;38    width: 56px;39    height: 56px;40    cursor: default;41  }42 43  .close-btn svg {44    width: 56px;45    height: 56px;46  }47 48  .review-count {49    font-weight: 800;50    letter-spacing: 1px;51    font-size: 38px;52    margin-bottom: 18px;53  }54 55  .stars {56    display: inline-flex;57    gap: 22px;58    align-items: center;59  }60 61  .stars.small {62    gap: 16px;63  }64 65  .star svg {66    width: 68px;67    height: 68px;68    fill: #111;69  }70 71  .star.small svg {72    width: 48px;73    height: 48px;74  }75 76  .divider {77    height: 1px;78    background: #E5E5E5;79    margin: 36px 0;80  }81 82  .invite {83    text-align: center;84    font-weight: 700;85    font-size: 40px;86    margin: 28px 0 36px;87  }88 89  .cta {90    background: #000;91    color: #fff;92    height: 120px;93    display: flex;94    align-items: center;95    padding: 0 40px;96    margin: 0 48px;97    letter-spacing: 6px;98    font-weight: 800;99    font-size: 34px;100  }101 102  .list {103    padding: 40px 48px 0;104  }105 106  .review-card {107    margin-bottom: 64px;108  }109 110  .row {111    display: flex;112    align-items: center;113    justify-content: space-between;114  }115 116  .date {117    color: #6e6e6e;118    font-size: 32px;119    letter-spacing: 0.3px;120  }121 122  .title {123    margin-top: 24px;124    font-weight: 800;125    font-size: 40px;126    text-transform: uppercase;127  }128 129  .body {130    color: #7a7a7a;131    font-size: 34px;132    line-height: 1.6;133    margin-top: 16px;134  }135 136  .recommend {137    display: inline-flex;138    align-items: center;139    gap: 18px;140    margin-top: 26px;141    font-weight: 800;142    text-transform: uppercase;143    font-size: 30px;144  }145 146  .rec-icon {147    width: 44px;148    height: 44px;149    border-radius: 50%;150    background: #27AE60;151    display: inline-flex;152    align-items: center;153    justify-content: center;154  }155 156  .rec-icon svg {157    width: 26px;158    height: 26px;159    fill: #fff;160  }161 162  .meta {163    margin-top: 28px;164    padding-top: 22px;165    border-top: 1px solid #E5E5E5;166    display: flex;167    gap: 16px;168    align-items: center;169    font-size: 30px;170  }171 172  .author {173    font-weight: 800;174    text-transform: uppercase;175    letter-spacing: 0.5px;176  }177 178  .verified {179    color: #6e6e6e;180  }181</style>182</head>183<body>184<div id="render-target">185  <!-- Header -->186  <div class="top-area section">187    <div class="close-btn" aria-label="Close">188      <svg viewBox="0 0 24 24">189        <path d="M5 6.4 6.4 5 12 10.6 17.6 5 19 6.4 13.4 12 19 17.6 17.6 19 12 13.4 6.4 19 5 17.6 10.6 12 5 6.4Z" fill="#111"/>190      </svg>191    </div>192 193    <div class="review-count">627 REVIEWS</div>194    <div class="stars">195      <div class="star">196        <svg viewBox="0 0 24 24"><path d="M12 17.3 6.1 21l1.6-6.9L2 9.2l7-.6L12 2l3 6.6 7 .6-5.7 4.9L17.9 21z"/></svg>197      </div>198      <div class="star">199        <svg viewBox="0 0 24 24"><path d="M12 17.3 6.1 21l1.6-6.9L2 9.2l7-.6L12 2l3 6.6 7 .6-5.7 4.9L17.9 21z"/></svg>200      </div>201      <div class="star">202        <svg viewBox="0 0 24 24"><path d="M12 17.3 6.1 21l1.6-6.9L2 9.2l7-.6L12 2l3 6.6 7 .6-5.7 4.9L17.9 21z"/></svg>203      </div>204      <div class="star">205        <svg viewBox="0 0 24 24"><path d="M12 17.3 6.1 21l1.6-6.9L2 9.2l7-.6L12 2l3 6.6 7 .6-5.7 4.9L17.9 21z"/></svg>206      </div>207      <div class="star">208        <svg viewBox="0 0 24 24"><path d="M12 17.3 6.1 21l1.6-6.9L2 9.2l7-.6L12 2l3 6.6 7 .6-5.7 4.9L17.9 21z"/></svg>209      </div>210    </div>211  </div>212 213  <div class="divider"></div>214 215  <!-- Invite & CTA -->216  <div class="section">217    <div class="invite">Tell others what you thought</div>218  </div>219  <div class="cta">WRITE A REVIEW</div>220 221  <!-- Reviews List -->222  <div class="list">223 224    <!-- Review 1 -->225    <div class="review-card">226      <div class="row">227        <div class="stars small">228          <div class="star small"><svg viewBox="0 0 24 24"><path d="M12 17.3 6.1 21l1.6-6.9L2 9.2l7-.6L12 2l3 6.6 7 .6-5.7 4.9L17.9 21z"/></svg></div>229          <div class="star small"><svg viewBox="0 0 24 24"><path d="M12 17.3 6.1 21l1.6-6.9L2 9.2l7-.6L12 2l3 6.6 7 .6-5.7 4.9L17.9 21z"/></svg></div>230          <div class="star small"><svg viewBox="0 0 24 24"><path d="M12 17.3 6.1 21l1.6-6.9L2 9.2l7-.6L12 2l3 6.6 7 .6-5.7 4.9L17.9 21z"/></svg></div>231          <div class="star small"><svg viewBox="0 0 24 24"><path d="M12 17.3 6.1 21l1.6-6.9L2 9.2l7-.6L12 2l3 6.6 7 .6-5.7 4.9L17.9 21z"/></svg></div>232          <div class="star small"><svg viewBox="0 0 24 24"><path d="M12 17.3 6.1 21l1.6-6.9L2 9.2l7-.6L12 2l3 6.6 7 .6-5.7 4.9L17.9 21z"/></svg></div>233        </div>234        <div class="date">OCT 17, 2023</div>235      </div>236 237      <div class="title">Awesome product fits great.</div>238      <div class="body">Great fit, looks good and they are perfect for coaching.</div>239 240      <div class="recommend">241        <span class="rec-icon">242          <svg viewBox="0 0 24 24"><path d="M9.2 16.6 5.5 13l1.4-1.4 2.3 2.3 7-7 1.4 1.4-8.4 8.3z"/></svg>243        </span>244        Recommends this product245      </div>246 247      <div class="meta">248        <span class="author">GRANT</span>249        <span class="verified">· VERIFIED PURCHASER</span>250      </div>251 252      <div class="divider" style="margin-top:28px;"></div>253    </div>254 255    <!-- Review 2 -->256    <div class="review-card">257      <div class="row">258        <div class="stars small">259          <div class="star small"><svg viewBox="0 0 24 24"><path d="M12 17.3 6.1 21l1.6-6.9L2 9.2l7-.6L12 2l3 6.6 7 .6-5.7 4.9L17.9 21z"/></svg></div>260          <div class="star small"><svg viewBox="0 0 24 24"><path d="M12 17.3 6.1 21l1.6-6.9L2 9.2l7-.6L12 2l3 6.6 7 .6-5.7 4.9L17.9 21z"/></svg></div>261          <div class="star small"><svg viewBox="0 0 24 24"><path d="M12 17.3 6.1 21l1.6-6.9L2 9.2l7-.6L12 2l3 6.6 7 .6-5.7 4.9L17.9 21z"/></svg></div>262          <div class="star small"><svg viewBox="0 0 24 24"><path d="M12 17.3 6.1 21l1.6-6.9L2 9.2l7-.6L12 2l3 6.6 7 .6-5.7 4.9L17.9 21z"/></svg></div>263          <div class="star small"><svg viewBox="0 0 24 24"><path d="M12 17.3 6.1 21l1.6-6.9L2 9.2l7-.6L12 2l3 6.6 7 .6-5.7 4.9L17.9 21z"/></svg></div>264        </div>265        <div class="date">OCT 17, 2023</div>266      </div>267 268      <div class="title">Best purchase ever</div>269      <div class="body">Everything was perfect down to the delivery for the pants</div>270 271      <div class="recommend">272        <span class="rec-icon">273          <svg viewBox="0 0 24 24"><path d="M9.2 16.6 5.5 13l1.4-1.4 2.3 2.3 7-7 1.4 1.4-8.4 8.3z"/></svg>274        </span>275        Recommends this product276      </div>277 278      <div class="meta">279        <span class="author">STAR11</span>280        <span class="verified">· VERIFIED PURCHASER</span>281      </div>282 283      <div class="divider" style="margin-top:28px;"></div>284    </div>285 286    <!-- Review 3 -->287    <div class="review-card">288      <div class="row">289        <div class="stars small">290          <div class="star small"><svg viewBox="0 0 24 24"><path d="M12 17.3 6.1 21l1.6-6.9L2 9.2l7-.6L12 2l3 6.6 7 .6-5.7 4.9L17.9 21z"/></svg></div>291          <div class="star small"><svg viewBox="0 0 24 24"><path d="M12 17.3 6.1 21l1.6-6.9L2 9.2l7-.6L12 2l3 6.6 7 .6-5.7 4.9L17.9 21z"/></svg></div>292          <div class="star small"><svg viewBox="0 0 24 24"><path d="M12 17.3 6.1 21l1.6-6.9L2 9.2l7-.6L12 2l3 6.6 7 .6-5.7 4.9L17.9 21z"/></svg></div>293          <div class="star small"><svg viewBox="0 0 24 24"><path d="M12 17.3 6.1 21l1.6-6.9L2 9.2l7-.6L12 2l3 6.6 7 .6-5.7 4.9L17.9 21z"/></svg></div>294          <div class="star small"><svg viewBox="0 0 24 24"><path d="M12 17.3 6.1 21l1.6-6.9L2 9.2l7-.6L12 2l3 6.6 7 .6-5.7 4.9L17.9 21z"/></svg></div>295        </div>296        <div class="date">OCT 17, 2023</div>297      </div>298 299      <div class="title">Very comfortable and very flexible</div>300      <div class="body">Very easy to fit and workout in. Love the pocket with zipper to keep stuff from falling out while doing your ...</div>301 302      <div class="recommend">303        <span class="rec-icon">304          <svg viewBox="0 0 24 24"><path d="M9.2 16.6 5.5 13l1.4-1.4 2.3 2.3 7-7 1.4 1.4-8.4 8.3z"/></svg>305        </span>306        Recommends this product307      </div>308 309      <div class="meta">310        <span class="author">USER</span>311        <span class="verified">· VERIFIED PURCHASER</span>312      </div>313    </div>314 315  </div>316</div>317</body>318</html>