GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1440, initial-scale=1">6<title>Product Reviews UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1440px; height: 3120px; position: relative; overflow: hidden;11    background: #ffffff; border-radius: 24px; box-shadow: 0 8px 24px rgba(0,0,0,0.08);12    color: #212121;13  }14  .status-bar {15    height: 96px; padding: 0 48px; display: flex; align-items: center; justify-content: space-between; color: #333;16    font-weight: 600; font-size: 40px;17  }18  .status-icons { display: flex; gap: 28px; align-items: center; }19  .circle-icon { width: 88px; height: 88px; border-radius: 44px; background: #ffffff; border: 1px solid #E0E0E0; display: inline-flex; align-items: center; justify-content: center; }20  header.navbar {21    position: relative; padding: 24px 32px 16px; border-bottom-left-radius: 24px; border-bottom-right-radius: 24px;22  }23  .back-wrap { display: flex; align-items: center; gap: 24px; }24  .back-btn { width: 96px; height: 96px; border-radius: 48px; background: #F5F5F5; border: 1px solid #E0E0E0; display: flex; align-items: center; justify-content: center; }25  .action-right { position: absolute; right: 32px; top: 24px; display: flex; gap: 24px; }26  .tabs {27    margin: 24px 32px 0; background: #F3F4F6; border: 1px solid #E0E0E0; border-radius: 24px; display: flex; overflow: hidden;28    box-shadow: 0 6px 14px rgba(0,0,0,0.06);29  }30  .tab {31    flex: 1; text-align: center; padding: 32px 0; font-size: 44px; color: #666; font-weight: 600;32  }33  .tab.active {34    background: #ffffff; color: #111; box-shadow: 0 6px 14px rgba(0,0,0,0.07); border-left: 1px solid #E0E0E0; border-right: 1px solid #E0E0E0;35  }36 37  .stats-card {38    margin: 24px 32px 0; border: 1px solid #E0E0E0; border-radius: 24px; padding: 32px; background: #fff;39  }40  .stats-top { font-size: 44px; color: #444; font-weight: 600; display: flex; gap: 16px; align-items: baseline; }41  .bar-row { margin-top: 24px; display: flex; align-items: center; gap: 24px; color: #777; font-size: 40px; }42  .bar { flex: 1; height: 24px; background: #ECECEC; border-radius: 12px; overflow: hidden; }43  .bar > span { display: block; height: 100%; width: 35%; background: #FF5A5F; }44 45  .sf-row {46    margin: 24px 32px; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #E8E8E8; border-radius: 24px; overflow: hidden;47    background: #fff;48  }49  .sf-cell { padding: 32px; display: flex; align-items: center; gap: 24px; }50  .sf-cell + .sf-cell { border-left: 1px solid #E8E8E8; }51  .sf-texts { display: flex; flex-direction: column; }52  .sf-title { font-size: 44px; color: #333; font-weight: 700; }53  .sf-sub { font-size: 40px; color: #9E9E9E; }54 55  .section-title {56    margin: 32px 32px 16px; font-weight: 800; font-size: 52px; color: #222; letter-spacing: 1px;57  }58  .photo-box {59    margin: 0 32px 24px; width: calc(100% - 64px); height: 900px; background: #E0E0E0; border: 1px solid #BDBDBD;60    border-radius: 32px; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 48px; text-align: center;61  }62 63  .review-block { margin: 24px 32px; padding-bottom: 24px; }64  .review-title { font-size: 56px; font-weight: 800; color: #222; margin-bottom: 12px; }65  .rating-row { display: flex; align-items: center; gap: 16px; font-size: 40px; color: #9E9E9E; margin-bottom: 24px; }66  .stars { display: inline-flex; gap: 8px; }67  .review-text { font-size: 48px; color: #333; line-height: 1.35; margin-bottom: 24px; }68  .user-row { display: flex; align-items: center; gap: 20px; color: #666; font-size: 44px; margin-bottom: 24px; }69  .avatar { width: 72px; height: 72px; border-radius: 36px; background: #EEEEEE; border: 1px solid #D0D0D0; display: flex; align-items: center; justify-content: center; color: #777; font-weight: 700; }70  .verified { width: 48px; height: 48px; border-radius: 24px; background: #1EBE4A; display: inline-flex; align-items: center; justify-content: center; }71  .actions { display: flex; gap: 24px; margin-top: 12px; }72  .pill {73    display: inline-flex; align-items: center; gap: 16px; padding: 20px 28px; border: 1px solid #E0E0E0; border-radius: 20px;74    color: #444; font-size: 44px; background: #fff;75  }76 77  .product-strip {78    margin: 24px 0; border-top: 1px solid #EEE; border-bottom: 1px solid #EEE; padding: 24px 32px; display: flex; align-items: center; gap: 24px;79  }80  .thumb { width: 140px; height: 140px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 34px; }81  .prod-info { flex: 1; }82  .prod-title { font-size: 44px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }83  .price-row { display: flex; align-items: baseline; gap: 16px; margin-top: 8px; }84  .price { font-size: 56px; font-weight: 800; color: #111; }85  .mrp { font-size: 44px; color: #9E9E9E; text-decoration: line-through; }86  .off { font-size: 44px; color: #FF8C00; font-weight: 700; }87 88  .bottom-bar {89    position: absolute; left: 0; right: 0; bottom: 24px; padding: 24px 32px;90  }91  .buy-row { background: #fff; display: flex; align-items: center; gap: 24px; }92  .buy-cart { width: 140px; height: 140px; border-radius: 20px; border: 1px solid #E0E0E0; display: flex; align-items: center; justify-content: center; background: #fff; }93  .buy-btn { flex: 1; height: 140px; border-radius: 24px; border: none; background: #FF2D55; color: #fff; font-size: 56px; font-weight: 800; cursor: pointer; }94  .safe-area { height: 40px; }95 96  /* Simple icon styles */97  svg { display: block; }98  .icon-gray path, .icon-gray circle { stroke: #777; fill: none; }99  .icon-green path, .icon-green polygon { fill: #1EBE4A; }100  .icon-muted path { stroke: #9E9E9E; }101</style>102</head>103<body>104<div id="render-target">105 106  <div class="status-bar">107    <div>2:28</div>108    <div class="status-icons">109      <div class="circle-icon">110        <svg width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="#9E9E9E" fill="none"/></svg>111      </div>112      <div class="circle-icon">113        <svg width="40" height="40" viewBox="0 0 24 24"><path d="M3 12h18" stroke="#9E9E9E"/></svg>114      </div>115      <div class="circle-icon">116        <svg width="40" height="40" viewBox="0 0 24 24"><path d="M4 4h16v16H4z" stroke="#9E9E9E" fill="none"/></svg>117      </div>118    </div>119  </div>120 121  <header class="navbar">122    <div class="back-wrap">123      <div class="back-btn">124        <svg width="56" height="56" viewBox="0 0 24 24">125          <path d="M15 6l-6 6 6 6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>126        </svg>127      </div>128    </div>129    <div class="action-right">130      <div class="circle-icon" title="Search">131        <svg width="44" height="44" viewBox="0 0 24 24">132          <circle cx="10" cy="10" r="6" stroke="#333" fill="none"/>133          <path d="M14.5 14.5L20 20" stroke="#333"/>134        </svg>135      </div>136      <div class="circle-icon" title="Home">137        <svg width="44" height="44" viewBox="0 0 24 24">138          <path d="M3 12l9-8 9 8" stroke="#333" fill="none"/>139          <path d="M6 10v8h12v-8" stroke="#333" fill="none"/>140        </svg>141      </div>142      <div class="circle-icon" title="Cart">143        <svg width="44" height="44" viewBox="0 0 24 24">144          <path d="M4 5h2l2 12h10l2-8H8" stroke="#333" fill="none"/>145          <circle cx="10" cy="20" r="1.6" fill="#333"/>146          <circle cx="17" cy="20" r="1.6" fill="#333"/>147        </svg>148      </div>149    </div>150 151    <div class="tabs">152      <div class="tab">Details</div>153      <div class="tab">More Like This</div>154      <div class="tab active">Reviews</div>155    </div>156  </header>157 158  <div class="stats-card">159    <div class="stats-top">160      <span>23 Reviews | 103 Ratings</span>161    </div>162    <div class="bar-row">163      <span>1 ★</span>164      <div class="bar"><span></span></div>165      <span>24</span>166    </div>167  </div>168 169  <div class="sf-row">170    <div class="sf-cell">171      <svg width="64" height="64" viewBox="0 0 24 24" class="icon-gray">172        <path d="M8 4v6M8 14v6M16 4v8M16 16v4" stroke="#333" stroke-width="2"/>173      </svg>174      <div class="sf-texts">175        <div class="sf-title">Sort</div>176        <div class="sf-sub">Most Helpful</div>177      </div>178    </div>179    <div class="sf-cell">180      <svg width="64" height="64" viewBox="0 0 24 24" class="icon-gray">181        <path d="M4 6h10M4 12h14M4 18h6" stroke="#333" stroke-width="2" stroke-linecap="round"/>182      </svg>183      <div class="sf-texts">184        <div class="sf-title">Filter</div>185        <div class="sf-sub">All Stars</div>186      </div>187    </div>188  </div>189 190  <div class="section-title">CUSTOMER PHOTOS (1)</div>191  <div class="photo-box">[IMG: Tool set photo]</div>192 193  <div class="section-title">CUSTOMER REVIEWS (23)</div>194 195  <div class="review-block">196    <div class="review-title">Good product</div>197    <div class="rating-row">198      <div class="stars">199        <svg width="56" height="56" viewBox="0 0 24 24" class="icon-green"><polygon points="12,2 15,9 22,9 16.5,13.5 18.7,21 12,16.8 5.3,21 7.5,13.5 2,9 9,9"/></svg>200        <svg width="56" height="56" viewBox="0 0 24 24" class="icon-green"><polygon points="12,2 15,9 22,9 16.5,13.5 18.7,21 12,16.8 5.3,21 7.5,13.5 2,9 9,9"/></svg>201        <svg width="56" height="56" viewBox="0 0 24 24" class="icon-green"><polygon points="12,2 15,9 22,9 16.5,13.5 18.7,21 12,16.8 5.3,21 7.5,13.5 2,9 9,9"/></svg>202        <svg width="56" height="56" viewBox="0 0 24 24" class="icon-green"><polygon points="12,2 15,9 22,9 16.5,13.5 18.7,21 12,16.8 5.3,21 7.5,13.5 2,9 9,9"/></svg>203        <svg width="56" height="56" viewBox="0 0 24 24" class="icon-green"><polygon points="12,2 15,9 22,9 16.5,13.5 18.7,21 12,16.8 5.3,21 7.5,13.5 2,9 9,9"/></svg>204      </div>205      <span style="color:#9E9E9E">Jul 04, 2023</span>206    </div>207    <div class="review-text">I am satisfied, very good product 👌👌👌👌</div>208 209    <div class="user-row">210      <div class="avatar">S</div>211      <div>Sania parween</div>212      <div class="verified">213        <svg width="28" height="28" viewBox="0 0 24 24"><path d="M6 12l3 3 7-7" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>214      </div>215    </div>216 217    <div class="actions">218      <div class="pill">219        <svg width="44" height="44" viewBox="0 0 24 24">220          <path d="M4 14h3l3-6h7v10H9l-5-4v-0z" stroke="#666" fill="none" stroke-linecap="round"/>221        </svg>222        <span>Helpful (3)</span>223      </div>224      <div class="pill">225        <svg width="44" height="44" viewBox="0 0 24 24">226          <path d="M3 5h18v12H7l-4 4V5z" stroke="#666" fill="none"/>227        </svg>228        <span>0</span>229      </div>230    </div>231  </div>232 233  <div class="product-strip">234    <div class="thumb">[IMG: Tool kit]</div>235    <div class="prod-info">236      <div class="prod-title">Shopper52 - DRLTOOLSET-nw6 650W 13mm Corded...</div>237      <div class="price-row">238        <div class="price">₹3145</div>239        <div class="mrp">₹4999</div>240        <div class="off">37% OFF</div>241      </div>242    </div>243  </div>244 245  <div class="bottom-bar">246    <div class="buy-row">247      <div class="buy-cart">248        <svg width="64" height="64" viewBox="0 0 24 24">249          <path d="M4 5h2l2 12h10l2-8H8" stroke="#333" fill="none"/>250          <circle cx="10" cy="20" r="1.6" fill="#333"/>251          <circle cx="17" cy="20" r="1.6" fill="#333"/>252        </svg>253      </div>254      <button class="buy-btn">Buy Now</button>255    </div>256    <div class="safe-area"></div>257  </div>258 259</div>260</body>261</html>