GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>Product Reviews UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #ffffff;12 color: #222;13 }14 15 /* Status bar */16 .status-bar {17 height: 140px;18 background: #efefef;19 display: flex;20 align-items: center;21 padding: 0 40px;22 font-size: 38px;23 color: #4c4c4c;24 }25 .status-right {26 margin-left: auto;27 display: flex;28 align-items: center;29 gap: 26px;30 }31 .dot {32 width: 28px; height: 28px; border-radius: 50%; background: #9e9e9e;33 display: inline-block;34 }35 .battery {36 border: 2px solid #555; width: 60px; height: 28px; position: relative; border-radius: 6px;37 }38 .battery::after {39 content: ""; position: absolute; right: -10px; top: 8px; width: 8px; height: 12px; background: #555; border-radius: 2px;40 }41 .battery-fill {42 position: absolute; left: 2px; top: 2px; height: 22px; width: 42px; background: #4caf50; border-radius: 4px;43 }44 45 /* Ratings summary */46 .ratings-section {47 padding: 30px 40px;48 }49 .summary-card {50 display: grid;51 grid-template-columns: 480px 1px 1fr;52 column-gap: 40px;53 align-items: stretch;54 padding: 20px 0 10px;55 }56 .summary-left h2 {57 margin: 10px 0 20px; font-size: 50px; font-weight: 700; color: #6f6f6f;58 }59 .stars-row { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }60 .star { width: 40px; height: 40px; }61 .star polygon { fill: #2e7d32; }62 .star.gray polygon { fill: #bdbdbd; }63 .summary-left .meta {64 font-size: 34px; color: #777;65 }66 .divider-v { background: #e0e0e0; width: 1px; }67 .bars { padding-top: 10px; }68 .bar-row { display: grid; grid-template-columns: 90px 1fr 90px; align-items: center; margin: 16px 0; font-size: 36px; color: #000; }69 .bar-bg { height: 22px; background: #e6e6e6; border-radius: 12px; overflow: hidden; }70 .bar-fill { height: 100%; background: #2e7d32; border-radius: 12px; }71 72 .section-divider { height: 20px; background: #f5f5f5; margin: 18px -40px 0; }73 74 /* Review cards */75 .review {76 padding: 40px;77 border-bottom: 1px solid #e5e5e5;78 }79 .review-header {80 display: flex; align-items: center; gap: 18px; margin-bottom: 16px;81 }82 .review-title {83 font-size: 44px; font-weight: 700; color: #222;84 }85 .review-text { font-size: 38px; color: #333; margin: 12px 0 24px; }86 .review-footer {87 display: grid; grid-template-columns: 210px 1fr 300px; align-items: center;88 gap: 20px;89 }90 .img-ph {91 width: 200px; height: 200px; background: #E0E0E0; border: 1px solid #BDBDBD;92 display: flex; justify-content: center; align-items: center; color: #757575; font-size: 26px;93 }94 .reviewer {95 color: #8a8a8a; font-size: 34px;96 }97 .time { color: #999; font-size: 32px; margin-top: 6px; }98 .actions {99 display: flex; justify-content: flex-end; align-items: center; gap: 28px; color: #9e9e9e; font-size: 38px;100 }101 .thumb { width: 40px; height: 40px; }102 .ellipsis { width: 28px; height: 28px; }103 .review .stars-row .star { width: 36px; height: 36px; }104 105 /* "All reviews" row */106 .all-reviews {107 display: flex; align-items: center; justify-content: space-between;108 padding: 36px 40px; font-size: 42px; font-weight: 700; color: #222;109 border-bottom: 1px solid #e5e5e5;110 }111 .chev-right { width: 40px; height: 40px; }112 113 /* Q&A box */114 .qa {115 padding: 30px 40px;116 }117 .qa p { font-size: 40px; color: #5a5a5a; margin: 10px 0 20px; }118 .qa-btn {119 height: 140px; border-radius: 16px; background: #fff; border: 1px solid #e2e2e2;120 box-shadow: 0 6px 12px rgba(0,0,0,0.06);121 display: flex; justify-content: center; align-items: center; font-size: 44px; font-weight: 700; color: #111;122 }123 124 /* Bottom action bar */125 .bottom-bar {126 position: absolute; left: 0; bottom: 0; width: 100%; height: 190px;127 background: #ffffff; box-shadow: 0 -6px 16px rgba(0,0,0,0.08);128 display: grid; grid-template-columns: 1fr 1fr; gap: 30px;129 padding: 24px 40px;130 }131 .btn-outline {132 border: 1px solid #d7d7f7; background: #fff; color: #5c4df2;133 border-radius: 18px; font-size: 44px; font-weight: 700;134 display: flex; justify-content: center; align-items: center;135 }136 .btn-primary {137 background: #5c4df2; color: #fff; border-radius: 18px; font-size: 44px; font-weight: 700;138 display: flex; justify-content: center; align-items: center; box-shadow: 0 6px 12px rgba(92,77,242,0.3);139 }140 141 /* Spacing to avoid overlap with bottom bar */142 .spacer-bottom { height: 220px; }143</style>144</head>145<body>146<div id="render-target">147 148 <!-- Status bar -->149 <div class="status-bar">150 <div>2:35</div>151 <div class="status-right">152 <span class="dot"></span>153 <span class="dot"></span>154 <div class="battery"><div class="battery-fill"></div></div>155 <div>98%</div>156 </div>157 </div>158 159 <!-- Ratings summary -->160 <div class="ratings-section">161 <div class="summary-card">162 <div class="summary-left">163 <h2>Good</h2>164 <div class="stars-row">165 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,13 19,20 12,16 5,20 7,13 2,9 9,9"/></svg>166 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,13 19,20 12,16 5,20 7,13 2,9 9,9"/></svg>167 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,13 19,20 12,16 5,20 7,13 2,9 9,9"/></svg>168 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,13 19,20 12,16 5,20 7,13 2,9 9,9"/></svg>169 <svg class="star gray" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,13 19,20 12,16 5,20 7,13 2,9 9,9"/></svg>170 </div>171 <div class="meta">170 ratings and 24 reviews</div>172 </div>173 <div class="divider-v"></div>174 <div class="bars">175 <div class="bar-row">176 <div>5 ★</div>177 <div class="bar-bg"><div class="bar-fill" style="width: 86%;"></div></div>178 <div style="text-align:right;">89</div>179 </div>180 <div class="bar-row">181 <div>4 ★</div>182 <div class="bar-bg"><div class="bar-fill" style="width: 38%; background:#8bc34a;"></div></div>183 <div style="text-align:right;">38</div>184 </div>185 <div class="bar-row">186 <div>3 ★</div>187 <div class="bar-bg"><div class="bar-fill" style="width: 12%; background:#66bb6a;"></div></div>188 <div style="text-align:right;">9</div>189 </div>190 <div class="bar-row">191 <div>2 ★</div>192 <div class="bar-bg"><div class="bar-fill" style="width: 22%; background:#69a66a;"></div></div>193 <div style="text-align:right;">15</div>194 </div>195 <div class="bar-row">196 <div>1 ★</div>197 <div class="bar-bg"><div class="bar-fill" style="width: 28%; background:#6ca56b;"></div></div>198 <div style="text-align:right;">19</div>199 </div>200 </div>201 </div>202 </div>203 204 <div class="section-divider"></div>205 206 <!-- Review 1 -->207 <div class="review">208 <div class="review-header">209 <div class="stars-row">210 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,13 19,20 12,16 5,20 7,13 2,9 9,9"/></svg>211 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,13 19,20 12,16 5,20 7,13 2,9 9,9"/></svg>212 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,13 19,20 12,16 5,20 7,13 2,9 9,9"/></svg>213 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,13 19,20 12,16 5,20 7,13 2,9 9,9"/></svg>214 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,13 19,20 12,16 5,20 7,13 2,9 9,9"/></svg>215 </div>216 <div class="review-title">Brilliant</div>217 </div>218 <div class="review-text">always good product 👍</div>219 <div class="review-footer">220 <div class="img-ph">[IMG: Reviewer photo]</div>221 <div>222 <div class="reviewer">Amit Kashyap , Gonda</div>223 <div class="time">3 months ago</div>224 </div>225 <div class="actions">226 <svg class="thumb" viewBox="0 0 24 24"><path fill="#b0b0b0" d="M2 21h4V9H2v12zm20-11c0-1.1-.9-2-2-2h-6l.84-4.03.02-.23c0-.31-.13-.61-.35-.83L13 2 7.59 7.41C7.22 7.78 7 8.3 7 8.83V19c0 1.1.9 2 2 2h9c.82 0 1.54-.5 1.85-1.25l2.02-5.02c.08-.19.13-.4.13-.62V10z"/></svg>227 <div>69</div>228 <svg class="thumb" viewBox="0 0 24 24"><path fill="#b0b0b0" d="M2 3h4v12H2V3zm20 11c0 1.1-.9 2-2 2h-6l.84 4.03.02.23c0 .31-.13.61-.35.83L13 22 7.59 16.59C7.22 16.22 7 15.7 7 15.17V6c0-1.1.9-2 2-2h9c.82 0 1.54.5 1.85 1.25l2.02 5.02c.08.19.13.4.13.62v3.11z"/></svg>229 <div>14</div>230 <svg class="ellipsis" viewBox="0 0 24 24"><circle cx="5" cy="12" r="2" fill="#b0b0b0"/><circle cx="12" cy="12" r="2" fill="#b0b0b0"/><circle cx="19" cy="12" r="2" fill="#b0b0b0"/></svg>231 </div>232 </div>233 </div>234 235 <!-- Review 2 -->236 <div class="review">237 <div class="review-header">238 <div class="stars-row">239 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,13 19,20 12,16 5,20 7,13 2,9 9,9"/></svg>240 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,13 19,20 12,16 5,20 7,13 2,9 9,9"/></svg>241 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,13 19,20 12,16 5,20 7,13 2,9 9,9"/></svg>242 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,13 19,20 12,16 5,20 7,13 2,9 9,9"/></svg>243 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,13 19,20 12,16 5,20 7,13 2,9 9,9"/></svg>244 </div>245 <div class="review-title">Just wow!</div>246 </div>247 <div class="review-text">Veara level</div>248 <div class="review-footer">249 <div></div>250 <div>251 <div class="reviewer">karthikeyan M..., Salem District</div>252 <div class="time">4 months ago</div>253 </div>254 <div class="actions">255 <svg class="thumb" viewBox="0 0 24 24"><path fill="#b0b0b0" d="M2 21h4V9H2v12zm20-11c0-1.1-.9-2-2-2h-6l.84-4.03.02-.23c0-.31-.13-.61-.35-.83L13 2 7.59 7.41C7.22 7.78 7 8.3 7 8.83V19c0 1.1.9 2 2 2h9c.82 0 1.54-.5 1.85-1.25l2.02-5.02c.08-.19.13-.4.13-.62V10z"/></svg>256 <div>16</div>257 <svg class="thumb" viewBox="0 0 24 24"><path fill="#b0b0b0" d="M2 3h4v12H2V3zm20 11c0 1.1-.9 2-2 2h-6l.84 4.03.02.23c0 .31-.13.61-.35.83L13 22 7.59 16.59C7.22 16.22 7 15.7 7 15.17V6c0-1.1.9-2 2-2h9c.82 0 1.54.5 1.85 1.25l2.02 5.02c.08.19.13.4.13.62v3.11z"/></svg>258 <div>4</div>259 <svg class="ellipsis" viewBox="0 0 24 24"><circle cx="5" cy="12" r="2" fill="#b0b0b0"/><circle cx="12" cy="12" r="2" fill="#b0b0b0"/><circle cx="19" cy="12" r="2" fill="#b0b0b0"/></svg>260 </div>261 </div>262 </div>263 264 <!-- Review 3 -->265 <div class="review">266 <div class="review-header">267 <div class="stars-row">268 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,13 19,20 12,16 5,20 7,13 2,9 9,9"/></svg>269 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,13 19,20 12,16 5,20 7,13 2,9 9,9"/></svg>270 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,13 19,20 12,16 5,20 7,13 2,9 9,9"/></svg>271 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,13 19,20 12,16 5,20 7,13 2,9 9,9"/></svg>272 <svg class="star gray" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,13 19,20 12,16 5,20 7,13 2,9 9,9"/></svg>273 </div>274 <div class="review-title">Delightful</div>275 </div>276 <div class="review-text">Good product</div>277 <div class="review-footer">278 <div></div>279 <div>280 <div class="reviewer">yunus Khan, Rajgarh District</div>281 <div class="time">3 months ago</div>282 </div>283 <div class="actions">284 <svg class="thumb" viewBox="0 0 24 24"><path fill="#b0b0b0" d="M2 21h4V9H2v12zm20-11c0-1.1-.9-2-2-2h-6l.84-4.03.02-.23c0-.31-.13-.61-.35-.83L13 2 7.59 7.41C7.22 7.78 7 8.3 7 8.83V19c0 1.1.9 2 2 2h9c.82 0 1.54-.5 1.85-1.25l2.02-5.02c.08-.19.13-.4.13-.62V10z"/></svg>285 <div>15</div>286 <svg class="thumb" viewBox="0 0 24 24"><path fill="#b0b0b0" d="M2 3h4v12H2V3zm20 11c0 1.1-.9 2-2 2h-6l.84 4.03.02.23c0 .31-.13.61-.35.83L13 22 7.59 16.59C7.22 16.22 7 15.7 7 15.17V6c0-1.1.9-2 2-2h9c.82 0 1.54.5 1.85 1.25l2.02 5.02c.08.19.13.4.13.62v3.11z"/></svg>287 <div>4</div>288 <svg class="ellipsis" viewBox="0 0 24 24"><circle cx="5" cy="12" r="2" fill="#b0b0b0"/><circle cx="12" cy="12" r="2" fill="#b0b0b0"/><circle cx="19" cy="12" r="2" fill="#b0b0b0"/></svg>289 </div>290 </div>291 </div>292 293 <!-- All reviews and Q&A -->294 <div class="all-reviews">295 <div>All 24 reviews</div>296 <svg class="chev-right" viewBox="0 0 24 24"><path fill="#444" d="M9 6l6 6-6 6z"/></svg>297 </div>298 299 <div class="qa">300 <p>Have doubts regarding this product?</p>301 <div class="qa-btn">POST YOUR QUESTION</div>302 </div>303 304 <div class="spacer-bottom"></div>305 306 <!-- Bottom action bar -->307 <div class="bottom-bar">308 <div class="btn-outline">Add to cart</div>309 <div class="btn-primary">Buy Now</div>310 </div>311 312</div>313</body>314</html>