GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Yonex Badminton Racket - Reviews</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13  }14  /* Top app bar */15  .appbar {16    position: absolute;17    top: 0;18    left: 0;19    width: 1080px;20    height: 160px;21    background: #121212;22    color: #fff;23    padding: 28px 36px;24    box-sizing: border-box;25  }26  .appbar .row {27    display: flex;28    align-items: center;29    gap: 28px;30    margin-top: 24px;31  }32  .icon-btn {33    width: 64px;34    height: 64px;35    display: flex;36    align-items: center;37    justify-content: center;38    border-radius: 16px;39  }40  .search-pill {41    flex: 1;42    height: 90px;43    background: #f4f4f4;44    border-radius: 45px;45    display: flex;46    align-items: center;47    padding: 0 30px;48    box-sizing: border-box;49    color: #222;50    font-size: 36px;51    box-shadow: inset 0 0 0 1px #d0d0d0;52  }53  .search-pill svg { margin-right: 18px; }54  .barcode {55    width: 90px;56    height: 90px;57    border-radius: 18px;58    background: #f4f4f4;59    box-shadow: inset 0 0 0 1px #d0d0d0;60    display: flex;61    align-items: center;62    justify-content: center;63  }64 65  /* Content area */66  .content {67    position: absolute;68    top: 160px;69    left: 0;70    width: 100%;71    height: calc(100% - 160px);72    padding: 40px;73    box-sizing: border-box;74    color: #222;75  }76  .stars { display: inline-flex; gap: 10px; vertical-align: middle; }77  .stars svg { width: 44px; height: 44px; }78  .blue { fill: #1a33ff; }79  .grey { fill: #9c9c9c; }80 81  .link {82    color: #1a33ff;83    font-size: 38px;84    font-weight: 600;85    margin-left: 22px;86    text-decoration: underline;87    cursor: pointer;88  }89  .subtext {90    font-size: 34px;91    color: #444;92    margin: 26px 0 26px;93  }94  .divider {95    width: 100%;96    height: 2px;97    background: #e0e0e0;98    margin: 28px 0 24px;99  }100  .section-title {101    font-size: 42px;102    font-weight: 700;103    margin-bottom: 10px;104  }105  .snapshot-row {106    display: flex;107    align-items: center;108    gap: 20px;109    margin: 22px 0;110  }111  .bar {112    width: 780px;113    height: 40px;114    background: #e9e9e9;115    border-radius: 8px;116    position: relative;117    overflow: hidden;118  }119  .bar .fill {120    height: 100%;121    background: #1a33ff;122  }123 124  .avg-grid {125    margin-top: 36px;126  }127  .avg-row { display: flex; gap: 20px; margin-bottom: 22px; }128  .avg-box {129    height: 42px;130    background: #1a33ff;131    border-radius: 6px;132    flex: 1;133  }134 135  .reviews-count {136    margin: 46px 0 24px;137    font-size: 36px;138    color: #222;139  }140  .review-stars { display: flex; gap: 12px; margin-bottom: 18px; }141  .author-line {142    font-size: 36px;143    color: #1a33ff;144    text-decoration: underline;145    font-weight: 700;146    margin: 10px 0;147  }148  .muted { color: #6f6f6f; font-size: 34px; font-style: italic; }149  .review-title {150    font-size: 40px;151    font-weight: 800;152    margin: 28px 0 12px;153  }154  .review-text {155    font-size: 36px;156    line-height: 1.45;157    color: #333;158  }159  .meta { font-size: 36px; margin-top: 24px; }160  .meta b { color: #000; }161  .recommend {162    display: flex;163    align-items: center;164    gap: 16px;165    font-size: 38px;166    font-weight: 700;167    color: #222;168    margin-top: 26px;169  }170  .small-grid { margin-top: 36px; }171  .bottom-spacer { height: 140px; }172</style>173</head>174<body>175<div id="render-target">176  <!-- Top App Bar -->177  <div class="appbar">178    <div style="color:#bbb; font-size:28px;">12:23  •  status icons</div>179    <div class="row">180      <div class="icon-btn">181        <svg width="44" height="44" viewBox="0 0 24 24">182          <path d="M15 18l-6-6 6-6" stroke="#fff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>183        </svg>184      </div>185      <div class="icon-btn">186        <svg width="40" height="40" viewBox="0 0 24 24">187          <path d="M3 6h18M3 12h18M3 18h18" stroke="#fff" stroke-width="2.4" stroke-linecap="round"></path>188        </svg>189      </div>190      <div class="search-pill">191        <svg width="40" height="40" viewBox="0 0 24 24">192          <circle cx="10" cy="10" r="7" stroke="#666" stroke-width="2.2" fill="none"></circle>193          <path d="M15 15l6 6" stroke="#666" stroke-width="2.2" stroke-linecap="round"></path>194        </svg>195        Yonex Badminton Racket196      </div>197      <div class="barcode">198        <svg width="46" height="46" viewBox="0 0 24 24">199          <path d="M3 4v16M6 4v16M10 4v16M13 4v16M16 4v16M20 4v16" stroke="#666" stroke-width="1.8"></path>200        </svg>201      </div>202    </div>203  </div>204 205  <!-- Content -->206  <div class="content">207    <!-- Stars and link -->208    <div style="display:flex; align-items:center;">209      <div class="stars">210        <svg viewBox="0 0 24 24" class="blue"><path d="M12 2l2.8 6.6 7.2.6-5.4 4.7 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.2l7.2-.6L12 2z"></path></svg>211        <svg viewBox="0 0 24 24" class="blue"><path d="M12 2l2.8 6.6 7.2.6-5.4 4.7 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.2l7.2-.6L12 2z"></path></svg>212        <svg viewBox="0 0 24 24" class="blue"><path d="M12 2l2.8 6.6 7.2.6-5.4 4.7 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.2l7.2-.6L12 2z"></path></svg>213        <svg viewBox="0 0 24 24" class="blue"><path d="M12 2l2.8 6.6 7.2.6-5.4 4.7 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.2l7.2-.6L12 2z"></path></svg>214        <svg viewBox="0 0 24 24" class="blue"><path d="M12 2l2.8 6.6 7.2.6-5.4 4.7 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.2l7.2-.6L12 2z"></path></svg>215      </div>216      <div class="link">1 reviews</div>217    </div>218 219    <div class="subtext">1 out of 1 (100%) reviewers recommend this product</div>220    <div class="divider"></div>221 222    <!-- Rating Snapshot -->223    <div class="section-title">RATING SNAPSHOT</div>224    <div style="font-size:34px; color:#555; margin-bottom:8px;">Select a row below to filter reviews</div>225 226    <div class="snapshot-row">227      <svg width="40" height="40" viewBox="0 0 24 24" class="blue"><path d="M12 2l2.8 6.6 7.2.6-5.4 4.7 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.2l7.2-.6L12 2z"></path></svg>228      <div class="bar"><div class="fill" style="width: 120px;"></div></div>229    </div>230    <div class="snapshot-row">231      <svg width="40" height="40" viewBox="0 0 24 24" class="grey"><path d="M12 2l2.8 6.6 7.2.6-5.4 4.7 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.2l7.2-.6L12 2z"></path></svg>232      <div class="bar"></div>233    </div>234    <div class="snapshot-row">235      <svg width="40" height="40" viewBox="0 0 24 24" class="grey"><path d="M12 2l2.8 6.6 7.2.6-5.4 4.7 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.2l7.2-.6L12 2z"></path></svg>236      <div class="bar"></div>237    </div>238    <div class="snapshot-row">239      <svg width="40" height="40" viewBox="0 0 24 24" class="grey"><path d="M12 2l2.8 6.6 7.2.6-5.4 4.7 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.2l7.2-.6L12 2z"></path></svg>240      <div class="bar"></div>241    </div>242    <div class="snapshot-row">243      <svg width="40" height="40" viewBox="0 0 24 24" class="grey"><path d="M12 2l2.8 6.6 7.2.6-5.4 4.7 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.2l7.2-.6L12 2z"></path></svg>244      <div class="bar"></div>245    </div>246 247    <div class="divider"></div>248 249    <!-- Average Ratings -->250    <div class="section-title">AVERAGE CUSTOMER RATINGS</div>251    <div class="avg-grid">252      <div class="avg-row">253        <div class="avg-box"></div>254        <div class="avg-box"></div>255        <div class="avg-box"></div>256        <div class="avg-box"></div>257      </div>258      <div class="avg-row">259        <div class="avg-box"></div>260        <div class="avg-box"></div>261        <div class="avg-box"></div>262        <div class="avg-box"></div>263      </div>264    </div>265 266    <!-- Reviews -->267    <div class="reviews-count">1 to 1 of 1 Reviews</div>268 269    <div class="review-stars">270      <svg viewBox="0 0 24 24" class="grey"><path d="M12 2l2.8 6.6 7.2.6-5.4 4.7 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.2l7.2-.6L12 2z"></path></svg>271      <svg viewBox="0 0 24 24" class="grey"><path d="M12 2l2.8 6.6 7.2.6-5.4 4.7 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.2l7.2-.6L12 2z"></path></svg>272      <svg viewBox="0 0 24 24" class="grey"><path d="M12 2l2.8 6.6 7.2.6-5.4 4.7 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.2l7.2-.6L12 2z"></path></svg>273      <svg viewBox="0 0 24 24" class="grey"><path d="M12 2l2.8 6.6 7.2.6-5.4 4.7 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.2l7.2-.6L12 2z"></path></svg>274      <svg viewBox="0 0 24 24" class="grey"><path d="M12 2l2.8 6.6 7.2.6-5.4 4.7 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.2l7.2-.6L12 2z"></path></svg>275    </div>276 277    <div class="author-line">Slippery., Evesham</div>278    <div class="muted">a year ago</div>279 280    <div class="review-title">Great upgrade</div>281    <div class="review-text">282      First time used today and very impressed. Bit of an upgrade from my Dunlop racket and bit stiffer and tighter on the strings. Made quite a difference so very pleased.283    </div>284 285    <div class="meta"><b>Age:</b> 55 to 64</div>286    <div class="meta"><b>Gender:</b> Male</div>287 288    <div class="recommend">289      <svg width="44" height="44" viewBox="0 0 24 24">290        <path d="M20 6L9 17l-5-5" stroke="#1a33ff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>291      </svg>292      Yes, I recommend this product.293    </div>294 295    <!-- Extra rating bars (bottom portion) -->296    <div class="small-grid">297      <div class="avg-row">298        <div class="avg-box"></div>299        <div class="avg-box"></div>300        <div class="avg-box"></div>301        <div class="avg-box"></div>302      </div>303      <div class="avg-row">304        <div class="avg-box"></div>305        <div class="avg-box"></div>306        <div class="avg-box"></div>307        <div class="avg-box"></div>308      </div>309    </div>310 311    <div class="bottom-spacer"></div>312  </div>313</div>314</body>315</html>