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; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16 color: #333;17 }18 .status-bar {19 height: 110px;20 background: #e6e6e6;21 color: #757575;22 font-weight: 600;23 letter-spacing: 0.5px;24 position: relative;25 padding: 0 40px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 }30 .status-left { font-size: 42px; }31 .status-right {32 display: flex;33 align-items: center;34 gap: 30px;35 }36 .content {37 padding: 40px 48px 24px 48px;38 }39 40 /* Summary section */41 .summary {42 display: flex;43 border-bottom: 1px solid #eee;44 padding-bottom: 40px;45 margin-bottom: 30px;46 }47 .summary-left {48 width: 42%;49 padding-right: 36px;50 border-right: 1px solid #ddd;51 }52 .summary-big {53 font-size: 160px;54 line-height: 1;55 color: #4b4b4b;56 margin-top: 10px;57 margin-bottom: 20px;58 }59 .stars-row {60 display: flex;61 gap: 8px;62 margin-bottom: 22px;63 }64 .review-count {65 font-size: 40px;66 color: #757575;67 }68 .summary-right {69 width: 58%;70 padding-left: 40px;71 }72 .rating-line {73 display: flex;74 align-items: center;75 margin: 18px 0;76 }77 .rating-line .label {78 display: flex;79 align-items: center;80 width: 120px;81 font-size: 34px;82 color: #888;83 }84 .rating-line .bar {85 height: 12px;86 background: #eee;87 border-radius: 8px;88 position: relative;89 width: 540px;90 margin-right: 20px;91 overflow: hidden;92 }93 .rating-line .fill {94 position: absolute;95 left: 0;96 top: 0;97 height: 100%;98 background: #f6c344;99 border-radius: 8px;100 }101 .rating-line .count {102 width: 120px;103 text-align: right;104 color: #888;105 font-size: 34px;106 }107 108 /* Info recommendation */109 .info-row {110 display: flex;111 align-items: center;112 gap: 18px;113 padding: 20px 0 36px 0;114 color: #2f6dbf;115 font-size: 38px;116 }117 118 /* Reviews header */119 .reviews-header {120 display: flex;121 align-items: center;122 justify-content: space-between;123 margin: 10px 0 20px 0;124 }125 .reviews-header .title {126 font-size: 52px;127 font-weight: 700;128 color: #333;129 }130 .sort-wrapper {131 display: flex;132 align-items: center;133 gap: 16px;134 color: #666;135 font-size: 36px;136 }137 .select {138 display: flex;139 align-items: center;140 gap: 14px;141 background: #f7f7f7;142 border: 1px solid #ddd;143 border-radius: 12px;144 padding: 18px 24px;145 color: #333;146 font-size: 36px;147 }148 149 /* Review card */150 .review {151 position: relative;152 padding: 34px 0 24px 0;153 border-bottom: 1px solid #eee;154 }155 .experience {156 display: flex;157 align-items: center;158 gap: 18px;159 color: #666;160 font-size: 36px;161 margin-bottom: 12px;162 }163 .badge {164 display: inline-flex;165 align-items: center;166 gap: 8px;167 background: #f1f5fb;168 border: 1px solid #d7e2f3;169 border-radius: 12px;170 padding: 12px 16px;171 font-size: 36px;172 color: #333;173 }174 .review-title {175 font-size: 52px;176 font-weight: 800;177 color: #3c3c3c;178 margin: 18px 0 6px 0;179 }180 .review-text {181 font-size: 38px;182 color: #666;183 line-height: 1.45;184 margin-bottom: 22px;185 }186 .author {187 display: flex;188 align-items: center;189 gap: 14px;190 font-size: 34px;191 color: #666;192 margin-bottom: 20px;193 }194 .actions {195 display: flex;196 align-items: center;197 gap: 34px;198 font-size: 36px;199 color: #777;200 }201 .report {202 position: absolute;203 right: 0;204 bottom: 34px;205 color: #9aa0a6;206 font-weight: 600;207 font-size: 38px;208 }209 210 /* Bottom home indicator */211 .home-indicator {212 position: absolute;213 bottom: 24px;214 left: 50%;215 transform: translateX(-50%);216 width: 300px;217 height: 14px;218 background: #222;219 border-radius: 10px;220 opacity: 0.7;221 }222 223 /* Utility: svg size presets */224 .icon-24 { width: 42px; height: 42px; }225 .star-sm { width: 34px; height: 34px; }226 .star-lg { width: 50px; height: 50px; }227 .green { color: #2db36b; }228</style>229</head>230<body>231<div id="render-target">232 233 <!-- Status bar -->234 <div class="status-bar">235 <div class="status-left">8:50</div>236 <div class="status-right">237 <!-- wifi -->238 <svg class="icon-24" viewBox="0 0 24 24">239 <path fill="#757575" d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 4c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm4 4c1-1 3-1 4 0l-2 2-2-2z"/>240 </svg>241 <!-- battery -->242 <svg class="icon-24" viewBox="0 0 24 24">243 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="#757575"></rect>244 <rect x="20" y="10" width="2" height="4" fill="#757575"></rect>245 <rect x="4" y="8" width="12" height="8" fill="#ffffff"></rect>246 </svg>247 </div>248 </div>249 250 <div class="content">251 252 <!-- Summary section -->253 <div class="summary">254 <div class="summary-left">255 <div class="summary-big">4.6</div>256 <div class="stars-row">257 <svg class="star-lg" viewBox="0 0 24 24"><path fill="#FFC107" d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 7-6.2-3.3-6.2 3.3 1.2-7-5-4.8 6.9-1z"/></svg>258 <svg class="star-lg" viewBox="0 0 24 24"><path fill="#FFC107" d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 7-6.2-3.3-6.2 3.3 1.2-7-5-4.8 6.9-1z"/></svg>259 <svg class="star-lg" viewBox="0 0 24 24"><path fill="#FFC107" d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 7-6.2-3.3-6.2 3.3 1.2-7-5-4.8 6.9-1z"/></svg>260 <svg class="star-lg" viewBox="0 0 24 24"><path fill="#FFC107" d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 7-6.2-3.3-6.2 3.3 1.2-7-5-4.8 6.9-1z"/></svg>261 <svg class="star-lg" viewBox="0 0 24 24"><path fill="#FFC107" d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 7-6.2-3.3-6.2 3.3 1.2-7-5-4.8 6.9-1z"/></svg>262 </div>263 <div class="review-count">4959 Reviews</div>264 </div>265 266 <div class="summary-right">267 <div class="rating-line">268 <div class="label">269 5270 <svg class="star-sm" viewBox="0 0 24 24"><path fill="#FFC107" d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 7-6.2-3.3-6.2 3.3 1.2-7-5-4.8 6.9-1z"/></svg>271 </div>272 <div class="bar"><div class="fill" style="width: 80%;"></div></div>273 <div class="count">3436</div>274 </div>275 <div class="rating-line">276 <div class="label">277 4278 <svg class="star-sm" viewBox="0 0 24 24"><path fill="#FFC107" d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 7-6.2-3.3-6.2 3.3 1.2-7-5-4.8 6.9-1z"/></svg>279 </div>280 <div class="bar"><div class="fill" style="width: 32%;"></div></div>281 <div class="count">1176</div>282 </div>283 <div class="rating-line">284 <div class="label">285 3286 <svg class="star-sm" viewBox="0 0 24 24"><path fill="#FFC107" d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 7-6.2-3.3-6.2 3.3 1.2-7-5-4.8 6.9-1z"/></svg>287 </div>288 <div class="bar"><div class="fill" style="width: 10%;"></div></div>289 <div class="count">235</div>290 </div>291 <div class="rating-line">292 <div class="label">293 2294 <svg class="star-sm" viewBox="0 0 24 24"><path fill="#FFC107" d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 7-6.2-3.3-6.2 3.3 1.2-7-5-4.8 6.9-1z"/></svg>295 </div>296 <div class="bar"><div class="fill" style="width: 4%;"></div></div>297 <div class="count">55</div>298 </div>299 <div class="rating-line">300 <div class="label">301 1302 <svg class="star-sm" viewBox="0 0 24 24"><path fill="#FFC107" d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 7-6.2-3.3-6.2 3.3 1.2-7-5-4.8 6.9-1z"/></svg>303 </div>304 <div class="bar"><div class="fill" style="width: 5%;"></div></div>305 <div class="count">57</div>306 </div>307 </div>308 </div>309 310 <!-- Info recommendation -->311 <div class="info-row">312 <svg class="icon-24" viewBox="0 0 24 24">313 <circle cx="12" cy="12" r="10" fill="#1E88E5"></circle>314 <rect x="11" y="10" width="2" height="6" fill="#ffffff"></rect>315 <circle cx="12" cy="7" r="1.5" fill="#ffffff"></circle>316 </svg>317 <span>4737 customers recommend this product</span>318 </div>319 320 <!-- Reviews header -->321 <div class="reviews-header">322 <div class="title">Reviews (4959)</div>323 <div class="sort-wrapper">324 <span>Sort by</span>325 <div class="select">326 <span>The Newest</span>327 <svg width="30" height="30" viewBox="0 0 24 24"><path fill="#777" d="M6 9l6 6 6-6z"/></svg>328 </div>329 </div>330 </div>331 332 <!-- Review 1 -->333 <div class="review">334 <div class="experience">335 <div class="badge">336 <span>5</span>337 <svg class="star-sm" viewBox="0 0 24 24"><path fill="#FFC107" d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 7-6.2-3.3-6.2 3.3 1.2-7-5-4.8 6.9-1z"/></svg>338 </div>339 <span>Product Experience (2 to 8 weeks)</span>340 </div>341 <div class="review-title">Excellent</div>342 <div class="review-text">Excellent shoes at such an affordable price.</div>343 <div class="author">344 <svg width="38" height="38" viewBox="0 0 24 24">345 <circle cx="12" cy="12" r="10" fill="#2db36b"></circle>346 <path d="M10 12l2 2 4-4" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>347 </svg>348 <span>SOUMYA (India) | 20-01-2018</span>349 </div>350 <div class="actions">351 <span>👍 10</span>352 <span>👎 0</span>353 </div>354 <div class="report">Report</div>355 </div>356 357 <!-- Review 2 -->358 <div class="review">359 <div class="experience">360 <div class="badge">361 <span>4</span>362 <svg class="star-sm" viewBox="0 0 24 24"><path fill="#FFC107" d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 7-6.2-3.3-6.2 3.3 1.2-7-5-4.8 6.9-1z"/></svg>363 </div>364 <span>Product Experience (2 to 8 weeks)</span>365 </div>366 <div class="review-title">Perfect shoe for walking</div>367 <div class="review-text">Very light and comfortable shoe, also stylish</div>368 <div class="author">369 <svg width="38" height="38" viewBox="0 0 24 24">370 <circle cx="12" cy="12" r="10" fill="#2db36b"></circle>371 <path d="M10 12l2 2 4-4" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>372 </svg>373 <span>Rajiv (India) | 23-03-2018</span>374 </div>375 <div class="actions">376 <span>👍 9</span>377 <span>👎 2</span>378 </div>379 <div class="report">Report</div>380 </div>381 382 <!-- Review 3 -->383 <div class="review">384 <div class="experience">385 <div class="badge">386 <span>5</span>387 <svg class="star-sm" viewBox="0 0 24 24"><path fill="#FFC107" d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 7-6.2-3.3-6.2 3.3 1.2-7-5-4.8 6.9-1z"/></svg>388 </div>389 <span>Product Experience (2 to 8 weeks)</span>390 </div>391 <div class="review-title">Excellent soft shoes</div>392 <div class="review-text">Must buy if you are looking for soft sole shoes. Shoes are comfortable, soft. You can walk for longer hours.</div>393 <div class="author">394 <svg width="38" height="38" viewBox="0 0 24 24">395 <circle cx="12" cy="12" r="10" fill="#2db36b"></circle>396 <path d="M10 12l2 2 4-4" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>397 </svg>398 <span>Nilisha (India) | 23-03-2018</span>399 </div>400 <div class="actions">401 <span>👍 6</span>402 <span>👎 0</span>403 </div>404 <div class="report">Report</div>405 </div>406 407 </div>408 409 <div class="home-indicator"></div>410</div>411</body>412</html>