GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Product Reviews UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target {9    position: relative;10    overflow: hidden;11    width: 1080px;12    height: 2400px;13    background: #f2f2f2;14  }15 16  /* Top dark area */17  .status-header {18    position: relative;19    width: 100%;20    background: #2d2f33;21    color: #fff;22  }23  .status-bar {24    height: 110px;25    display: flex;26    align-items: center;27    padding: 0 40px;28    font-weight: 600;29    font-size: 40px;30    letter-spacing: 0.5px;31  }32  .status-icons {33    margin-left: auto;34    display: flex;35    align-items: center;36    gap: 24px;37  }38  .dot {39    width: 14px; height: 14px; background: rgba(255,255,255,0.8); border-radius: 50%;40  }41  .icon-shape {42    width: 40px; height: 40px; border-radius: 8px; border: 2px solid rgba(255,255,255,0.8);43  }44 45  .search-row {46    height: 180px;47    display: flex;48    align-items: center;49    gap: 28px;50    padding: 0 36px 24px 36px;51  }52  .icon-btn {53    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;54  }55  .search-box {56    flex: 1;57    height: 120px;58    background: #ffffff;59    border-radius: 16px;60    display: flex;61    align-items: center;62    padding: 0 28px;63    box-shadow: 0 2px 0 rgba(0,0,0,0.05) inset;64  }65  .search-box svg { margin-right: 20px; }66  .search-placeholder {67    color: #6b6f75; font-size: 40px;68  }69  .scan-btn {70    width: 92px; height: 92px; background: rgba(255,255,255,0.1);71    border-radius: 16px; display: flex; align-items: center; justify-content: center;72  }73 74  /* Content area */75  .content {76    background: #efefef;77    padding: 40px 56px 140px 56px;78  }79  .helpful-row {80    color: #2b2b2b;81    font-size: 36px;82    display: flex;83    align-items: center;84    gap: 24px;85    margin-top: 18px;86  }87  .chip {88    display: inline-flex; align-items: center;89    border: 2px solid #d6d6d6;90    background: #f8f8f8;91    color: #333;92    padding: 16px 22px;93    border-radius: 10px;94    font-size: 34px;95  }96  .divider {97    width: 100%;98    height: 2px;99    background: #cfcfcf;100    margin: 36px 0;101  }102 103  .review {104    padding-top: 8px;105    padding-bottom: 40px;106  }107  .stars {108    display: flex; gap: 8px; margin-bottom: 22px;109  }110  .stars svg { width: 52px; height: 52px; }111  .reviewer {112    font-size: 40px;113    color: #1e1e1e;114    margin-bottom: 10px;115  }116  .reviewer .name { text-decoration: underline; font-weight: 600; }117  .ago {118    font-size: 34px; color: #8c8f93; font-style: italic; margin-bottom: 26px;119  }120  .title {121    font-size: 48px; font-weight: 700; color: #1e1e1e; margin-bottom: 16px;122  }123  .text {124    font-size: 38px; color: #3a3a3a; line-height: 1.5; margin-bottom: 26px;125  }126  .meta {127    font-size: 38px; color: #1e1e1e; margin-bottom: 12px;128  }129  .meta b { font-weight: 700; }130  .recommend {131    font-size: 42px; color: #1e1e1e; font-weight: 700; margin: 26px 0 16px 0;132  }133  .recommend .check { color: #8c8f93; font-weight: 600; margin-right: 12px; }134 135  /* Segmented bars */136  .bars {137    width: 860px;138    margin: 26px auto 10px auto;139  }140  .seg-bar {141    display: flex; gap: 12px; height: 38px; margin-bottom: 26px;142  }143  .seg {144    flex: 1;145    background: #1717ff;146    border-radius: 6px;147  }148  .seg.gray { background: #d3d3d3; }149 150  /* Bottom gesture bar (visual) */151  .gesture {152    position: absolute; bottom: 26px; left: 50%;153    transform: translateX(-50%);154    width: 360px; height: 18px; background: #0d0d0d; border-radius: 12px;155  }156</style>157</head>158<body>159<div id="render-target">160  <div class="status-header">161    <div class="status-bar">162      8:43163      <div class="status-icons">164        <!-- simple placeholders for status icons -->165        <div class="dot"></div>166        <div class="dot"></div>167        <div class="dot"></div>168        <div class="icon-shape"></div>169        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">170          <path d="M17 6h3a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-3M7 6H4a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h3" stroke="#fff" stroke-width="2"/>171          <rect x="7" y="6" width="10" height="12" rx="2" stroke="#fff" stroke-width="2"/>172        </svg>173      </div>174    </div>175 176    <div class="search-row">177      <div class="icon-btn">178        <svg viewBox="0 0 24 24" width="44" height="44">179          <path d="M15 18L9 12l6-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>180        </svg>181      </div>182      <div class="icon-btn">183        <svg viewBox="0 0 24 24" width="48" height="48">184          <path d="M3 6h18M3 12h18M3 18h18" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>185        </svg>186      </div>187      <div class="search-box">188        <svg viewBox="0 0 24 24" width="48" height="48">189          <circle cx="10" cy="10" r="7" stroke="#6b6f75" stroke-width="2" fill="none"></circle>190          <path d="M21 21l-6-6" stroke="#6b6f75" stroke-width="2" stroke-linecap="round"></path>191        </svg>192        <div class="search-placeholder">Cycle life guard</div>193      </div>194      <div class="scan-btn">195        <svg viewBox="0 0 24 24" width="52" height="52">196          <path d="M4 7h2M8 7h2M12 7h2M16 7h2M4 17h2M8 17h2M12 17h2M16 17h2" stroke="#fff" stroke-width="2" stroke-linecap="square"></path>197          <rect x="3" y="4" width="18" height="16" rx="2" stroke="#fff" stroke-width="2" fill="none"/>198        </svg>199      </div>200    </div>201  </div>202 203  <div class="content">204    <div class="helpful-row">205      Helpful?206      <span class="chip">Yes - 4</span>207      <span class="chip">No - 0</span>208    </div>209    <div class="divider"></div>210 211    <!-- Review 1 -->212    <div class="review">213      <div class="stars">214        <!-- 4 filled, 1 outline -->215        <svg viewBox="0 0 24 24"><path d="M12 2l2.5 6.5 7 .6-5.2 4.2 1.8 6.7L12 17l-6.1 3 1.8-6.7-5.2-4.2 7-.6L12 2z" fill="#7b7d80"></path></svg>216        <svg viewBox="0 0 24 24"><path d="M12 2l2.5 6.5 7 .6-5.2 4.2 1.8 6.7L12 17l-6.1 3 1.8-6.7-5.2-4.2 7-.6L12 2z" fill="#7b7d80"></path></svg>217        <svg viewBox="0 0 24 24"><path d="M12 2l2.5 6.5 7 .6-5.2 4.2 1.8 6.7L12 17l-6.1 3 1.8-6.7-5.2-4.2 7-.6L12 2z" fill="#7b7d80"></path></svg>218        <svg viewBox="0 0 24 24"><path d="M12 2l2.5 6.5 7 .6-5.2 4.2 1.8 6.7L12 17l-6.1 3 1.8-6.7-5.2-4.2 7-.6L12 2z" fill="#7b7d80"></path></svg>219        <svg viewBox="0 0 24 24"><path d="M12 2l2.5 6.5 7 .6-5.2 4.2 1.8 6.7L12 17l-6.1 3 1.8-6.7-5.2-4.2 7-.6L12 2z" fill="none" stroke="#7b7d80"></path></svg>220      </div>221 222      <div class="reviewer"><span class="name">Rhian</span>, Hampshire</div>223      <div class="ago">3 years ago</div>224 225      <div class="title">Good quality shin pads</div>226      <div class="text">227        Good value for money and a comfortable fit. The support sock doesn't move or rub.228      </div>229 230      <div class="meta"><b>Age:</b> 35 to 44</div>231      <div class="meta"><b>Gender:</b> Female</div>232 233      <div class="recommend"><span class="check">✓</span>Yes, I recommend this product.</div>234 235      <div class="bars">236        <div class="seg-bar">237          <div class="seg"></div>238          <div class="seg"></div>239          <div class="seg"></div>240          <div class="seg"></div>241          <div class="seg"></div>242          <div class="seg gray"></div>243        </div>244        <div class="seg-bar">245          <div class="seg"></div>246          <div class="seg"></div>247          <div class="seg"></div>248          <div class="seg"></div>249          <div class="seg"></div>250          <div class="seg"></div>251        </div>252      </div>253    </div>254 255    <div class="helpful-row" style="margin-top: 20px;">256      Helpful?257      <span class="chip">Yes - 4</span>258      <span class="chip">No - 2</span>259    </div>260    <div class="divider"></div>261 262    <!-- Review 2 -->263    <div class="review">264      <div class="stars">265        <!-- 5 filled -->266        <svg viewBox="0 0 24 24"><path d="M12 2l2.5 6.5 7 .6-5.2 4.2 1.8 6.7L12 17l-6.1 3 1.8-6.7-5.2-4.2 7-.6L12 2z" fill="#7b7d80"></path></svg>267        <svg viewBox="0 0 24 24"><path d="M12 2l2.5 6.5 7 .6-5.2 4.2 1.8 6.7L12 17l-6.1 3 1.8-6.7-5.2-4.2 7-.6L12 2z" fill="#7b7d80"></path></svg>268        <svg viewBox="0 0 24 24"><path d="M12 2l2.5 6.5 7 .6-5.2 4.2 1.8 6.7L12 17l-6.1 3 1.8-6.7-5.2-4.2 7-.6L12 2z" fill="#7b7d80"></path></svg>269        <svg viewBox="0 0 24 24"><path d="M12 2l2.5 6.5 7 .6-5.2 4.2 1.8 6.7L12 17l-6.1 3 1.8-6.7-5.2-4.2 7-.6L12 2z" fill="#7b7d80"></path></svg>270        <svg viewBox="0 0 24 24"><path d="M12 2l2.5 6.5 7 .6-5.2 4.2 1.8 6.7L12 17l-6.1 3 1.8-6.7-5.2-4.2 7-.6L12 2z" fill="#7b7d80"></path></svg>271      </div>272 273      <div class="reviewer"><span class="name">Anonymous</span></div>274      <div class="ago">3 years ago</div>275 276      <div class="title">Shin pads for V little league</div>277      <div class="text">278        Great fit for little ones very happy with size and purchase279      </div>280 281      <div class="meta"><b>Age:</b> 35 to 44</div>282      <div class="meta"><b>Gender:</b> Female</div>283 284      <div class="recommend"><span class="check">✓</span>Yes, I recommend this product.</div>285 286      <div class="bars">287        <div class="seg-bar">288          <div class="seg"></div>289          <div class="seg"></div>290          <div class="seg"></div>291          <div class="seg"></div>292          <div class="seg"></div>293          <div class="seg"></div>294        </div>295        <div class="seg-bar">296          <div class="seg"></div>297          <div class="seg"></div>298          <div class="seg"></div>299          <div class="seg"></div>300          <div class="seg"></div>301          <div class="seg"></div>302        </div>303      </div>304    </div>305 306    <div class="helpful-row">307      Helpful?308      <span class="chip">Yes - 5</span>309      <span class="chip">No - 2</span>310    </div>311  </div>312 313  <div class="gesture"></div>314</div>315</body>316</html>