GD-ML/AndroidCode
13.4k
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>Product Reviews UI</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #ffffff;15 }16 17 /* Header / Status bar */18 .status-bar {19 position: absolute;20 top:0; left:0; right:0;21 height: 150px;22 background:#202427;23 color:#fff;24 padding: 24px 36px 0 36px;25 box-sizing: border-box;26 }27 .status-row {28 display:flex;29 align-items:center;30 justify-content: space-between;31 font-weight:600;32 font-size:42px;33 }34 .status-icons {35 display:flex; align-items:center; gap:24px;36 }37 .dot { width:16px; height:16px; background:#bfc5cc; border-radius:50%; display:inline-block; }38 .signal {39 width:36px; height:36px;40 border:2px solid #bfc5cc; border-radius:6px;41 }42 .battery {43 width:44px; height:24px; border:2px solid #bfc5cc; border-radius:4px; position:relative;44 }45 .battery::after {46 content:""; position:absolute; right:-8px; top:6px; width:6px; height:12px; background:#bfc5cc; border-radius:2px;47 }48 49 .search-bar-wrap {50 position:absolute; top:88px; left:0; right:0;51 padding: 18px 36px 24px 36px; box-sizing: border-box;52 }53 .search-row {54 display:flex; align-items:center; gap:24px;55 }56 .icon-btn {57 width:72px; height:72px; display:flex; align-items:center; justify-content:center;58 border-radius:12px; color:#fff;59 }60 .search-input {61 flex:1; height:72px; border-radius:36px;62 background:#f0f2f4; display:flex; align-items:center; padding:0 28px; box-sizing:border-box;63 font-size:36px; color:#555;64 }65 .search-input svg { margin-right:16px; }66 .barcode {67 width:72px; height:72px; border-radius:12px; display:flex; align-items:center; justify-content:center;68 border:2px solid rgba(255,255,255,0.6);69 }70 71 /* Content area */72 .content {73 position:absolute; top:180px; left:0; right:0; bottom:0;74 background:#f6f6f6;75 padding: 40px 54px;76 box-sizing:border-box;77 overflow:auto;78 }79 .card {80 background:#fff; border-radius:8px;81 padding: 32px; box-sizing: border-box;82 }83 84 .recommend {85 display:flex; align-items:center; gap:18px;86 font-weight:700; font-size:40px; color:#222;87 margin: 8px 0 24px 0;88 }89 90 .segments { display:flex; gap:12px; margin:22px 0; }91 .seg {92 height:36px; width:140px; border-radius:6px;93 background:#d9d9d9;94 }95 .seg.blue { background:#0f23ff; }96 97 .helpful-row {98 display:flex; align-items:center; gap:24px;99 margin-top:26px; color:#333; font-size:34px;100 }101 .pill {102 border:2px solid #e3e3e3; border-radius:12px; padding:10px 16px; font-weight:600; background:#fafafa;103 }104 .divider {105 margin:32px 0; height:2px; background:#3a3a3a;106 }107 108 .stars { display:flex; gap:12px; margin-bottom:18px; }109 .star svg { width:52px; height:52px; }110 .star.fill path { fill:#777; }111 .star.outline path { fill:none; stroke:#777; stroke-width:2; }112 113 .author {114 color:#0b4da8; font-size:40px; font-weight:700; text-decoration: underline; margin: 12px 0;115 }116 .date { color:#8a8a8a; font-size:36px; font-style: italic; margin-bottom:24px; }117 118 .title { font-size:48px; font-weight:800; color:#1e1e1e; margin: 16px 0 18px 0; }119 .text { font-size:38px; line-height:1.55; color:#333; margin-bottom:22px; }120 .meta { font-size:38px; color:#222; }121 .meta b { font-weight:800; }122 123 .home-indicator {124 position:absolute; left:50%; transform:translateX(-50%);125 bottom:22px; width:360px; height:16px; background:#000; opacity:0.2; border-radius:10px;126 }127</style>128</head>129<body>130<div id="render-target">131 132 <!-- Dark status/header -->133 <div class="status-bar">134 <div class="status-row">135 <div>8:43</div>136 <div class="status-icons">137 <span class="dot"></span>138 <span class="dot"></span>139 <span class="dot"></span>140 <span class="signal"></span>141 <div class="battery"></div>142 </div>143 </div>144 145 <div class="search-bar-wrap">146 <div class="search-row">147 <div class="icon-btn">148 <!-- Back arrow -->149 <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">150 <path d="M15.5 19L8.5 12l7-7-1.4-1.4L5.7 12l8.4 8.4z"/>151 </svg>152 </div>153 <div class="icon-btn">154 <!-- Hamburger -->155 <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">156 <path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/>157 </svg>158 </div>159 160 <div class="search-input">161 <!-- Magnifier -->162 <svg width="40" height="40" viewBox="0 0 24 24" fill="#7b7b7b">163 <path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 10-.7.7l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0a4.5 4.5 0 110-9 4.5 4.5 0 010 9z"/>164 </svg>165 <span>Cycle life guard</span>166 </div>167 168 <div class="barcode">169 <!-- Simple barcode icon -->170 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">171 <rect x="4" y="4" width="16" height="16" rx="2"></rect>172 <path d="M7 8v8M10 8v8M13 8v8M16 8v8"></path>173 </svg>174 </div>175 </div>176 </div>177 </div>178 179 <!-- Scrollable content -->180 <div class="content">181 182 <div class="card">183 184 <div class="recommend">185 <!-- Check icon -->186 <svg width="40" height="40" viewBox="0 0 24 24" fill="#2b9c3f">187 <path d="M9 16.2l-3.5-3.5-1.4 1.4L9 19 20 8l-1.4-1.4z"/>188 </svg>189 <span>Yes, I recommend this product.</span>190 </div>191 192 <!-- Rating bars set A -->193 <div class="segments">194 <div class="seg blue"></div>195 <div class="seg blue"></div>196 <div class="seg blue"></div>197 <div class="seg blue"></div>198 <div class="seg blue"></div>199 <div class="seg"></div>200 </div>201 <div class="segments">202 <div class="seg blue"></div>203 <div class="seg blue"></div>204 <div class="seg blue"></div>205 <div class="seg blue"></div>206 <div class="seg"></div>207 <div class="seg"></div>208 </div>209 210 <div class="helpful-row">211 <span>Helpful?</span>212 <span class="pill">Yes - 3</span>213 <span class="pill">No - 0</span>214 </div>215 216 <div class="divider"></div>217 218 <!-- Review 1 -->219 <div class="stars">220 <div class="star fill">221 <svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>222 </div>223 <div class="star fill">224 <svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>225 </div>226 <div class="star fill">227 <svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>228 </div>229 <div class="star fill">230 <svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>231 </div>232 <div class="star fill">233 <svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>234 </div>235 </div>236 237 <div class="author">JVee</div>238 <div class="date">2 years ago</div>239 240 <div class="title">Perfect fit!</div>241 <div class="text">242 Absolutely perfect for one of my 4 year olds birthday presents! Lovely comfortable fit243 </div>244 <div class="meta"><b>Age:</b> 25 to 34</div>245 <div class="meta"><b>Gender:</b> Male</div>246 247 <div class="recommend" style="margin-top:36px;">248 <svg width="40" height="40" viewBox="0 0 24 24" fill="#2b9c3f">249 <path d="M9 16.2l-3.5-3.5-1.4 1.4L9 19 20 8l-1.4-1.4z"/>250 </svg>251 <span>Yes, I recommend this product.</span>252 </div>253 254 <!-- Rating bars set B -->255 <div class="segments">256 <div class="seg blue"></div>257 <div class="seg blue"></div>258 <div class="seg blue"></div>259 <div class="seg blue"></div>260 <div class="seg blue"></div>261 <div class="seg blue"></div>262 </div>263 <div class="segments">264 <div class="seg blue"></div>265 <div class="seg blue"></div>266 <div class="seg blue"></div>267 <div class="seg blue"></div>268 <div class="seg blue"></div>269 <div class="seg blue"></div>270 </div>271 272 <div class="helpful-row">273 <span>Helpful?</span>274 <span class="pill">Yes - 3</span>275 <span class="pill">No - 5</span>276 </div>277 278 <div class="divider"></div>279 280 <!-- Review 2 -->281 <div class="stars">282 <div class="star fill">283 <svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>284 </div>285 <div class="star outline">286 <svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>287 </div>288 <div class="star outline">289 <svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>290 </div>291 <div class="star outline">292 <svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>293 </div>294 <div class="star outline">295 <svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>296 </div>297 </div>298 299 <div class="author">Dutch20</div>300 <div class="date">2 years ago</div>301 302 <div class="title">They don’t stay in place, at all!</div>303 <div class="text">304 I bought these and at first impressions thought they looked/felt great quality. However, they simply don’t stay in place. Even when wearing the sleeves and tight football socks, they still end up moving around all over the place. One even fell out mid game! (Men’s - M)305 </div>306 <div class="meta"><b>Age:</b> 25 to 34</div>307 </div>308 </div>309 310 <div class="home-indicator"></div>311</div>312</body>313</html>