GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>All Reviews UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 position: relative;9 width: 1080px;10 height: 2400px;11 overflow: hidden;12 background: #f5f5f5;13 border-radius: 28px;14 box-shadow: 0 10px 30px rgba(0,0,0,0.15);15 }16 17 /* Top bars */18 .status-bar {19 height: 110px;20 background: #eeeeee;21 display: flex;22 align-items: center;23 padding: 0 40px;24 color: #212121;25 font-size: 40px;26 }27 .status-right {28 margin-left: auto;29 display: flex;30 gap: 28px;31 align-items: center;32 }33 .app-bar {34 height: 120px;35 background: #ffffff;36 display: flex;37 align-items: center;38 padding: 0 30px;39 border-bottom: 1px solid #e0e0e0;40 }41 .back-icon { width: 60px; height: 60px; margin-right: 20px; }42 .title { font-size: 50px; font-weight: 700; color: #222; }43 44 /* Cards and sections */45 .section { padding: 20px 30px; }46 .card {47 background: #ffffff;48 border-radius: 16px;49 padding: 28px;50 box-shadow: 0 1px 0 #e0e0e0;51 }52 53 /* Rating summary */54 .rating-summary {55 display: grid;56 grid-template-columns: 1fr 1fr;57 gap: 18px;58 align-items: center;59 }60 .stars-row {61 display: flex;62 gap: 10px;63 margin-bottom: 10px;64 }65 .star svg { width: 46px; height: 46px; }66 .star.gray svg path { fill: #cfd8dc; }67 .star.green svg path { fill: #2e7d32; }68 .rating-subtext {69 color: #616161;70 font-size: 32px;71 margin-top: 22px;72 }73 .distribution .bar-row {74 display: grid;75 grid-template-columns: 120px 1fr 90px;76 align-items: center;77 margin: 16px 0;78 font-size: 34px;79 color: #424242;80 }81 .bar {82 height: 26px;83 background: #e0e0e0;84 border-radius: 14px;85 overflow: hidden;86 margin: 0 12px;87 }88 .bar > span {89 display: block;90 height: 100%;91 background: #2e7d32;92 border-radius: 14px;93 }94 95 /* Image row */96 .thumbs-row {97 display: grid;98 grid-template-columns: repeat(4, 1fr);99 gap: 18px;100 margin-top: 18px;101 }102 .thumb {103 height: 210px;104 background: #E0E0E0;105 border: 1px solid #BDBDBD;106 display: flex;107 justify-content: center;108 align-items: center;109 color: #757575;110 font-size: 32px;111 border-radius: 10px;112 }113 114 /* Filters row */115 .filters {116 display: flex;117 align-items: center;118 justify-content: space-between;119 background: #ffffff;120 border-radius: 16px;121 padding: 26px 28px;122 margin-top: 14px;123 }124 .filter-left {125 display: flex;126 align-items: center;127 gap: 10px;128 font-size: 40px;129 color: #222;130 font-weight: 700;131 }132 .dropdown-icon { width: 34px; height: 34px; }133 .verified {134 display: flex;135 align-items: center;136 gap: 18px;137 font-size: 38px;138 color: #222;139 font-weight: 600;140 }141 .checkbox {142 width: 42px; height: 42px; border: 3px solid #616161; border-radius: 8px;143 }144 145 /* Review card */146 .review {147 background: #ffffff;148 border-radius: 16px;149 padding: 26px 28px;150 margin-top: 12px;151 }152 .review-header {153 display: flex;154 align-items: center;155 gap: 18px;156 }157 .review-title {158 font-size: 44px;159 font-weight: 800;160 color: #222;161 }162 .review-text {163 font-size: 40px;164 color: #333;165 margin: 22px 0 8px 0;166 }167 .meta {168 color: #757575;169 font-size: 34px;170 margin-top: 18px;171 }172 .meta .place { font-weight: 600; color: #616161; }173 .divider {174 height: 12px;175 background: #eeeeee;176 margin: 6px -30px;177 }178 179 .actions {180 display: flex;181 align-items: center;182 gap: 26px;183 margin-top: 16px;184 color: #757575;185 font-size: 34px;186 }187 .actions .count { display: flex; align-items: center; gap: 12px; }188 .icon-like, .icon-comment, .icon-more {189 width: 42px; height: 42px;190 }191</style>192</head>193<body>194<div id="render-target">195 196 <!-- Status bar -->197 <div class="status-bar">198 <div>9:16</div>199 <div class="status-right">200 <!-- simple signal icon -->201 <svg class="icon-like" viewBox="0 0 24 24">202 <rect x="2" y="16" width="3" height="6" fill="#424242"></rect>203 <rect x="7" y="12" width="3" height="10" fill="#424242"></rect>204 <rect x="12" y="8" width="3" height="14" fill="#424242"></rect>205 <rect x="17" y="4" width="3" height="18" fill="#424242"></rect>206 </svg>207 <!-- wifi icon -->208 <svg class="icon-comment" viewBox="0 0 24 24">209 <path d="M2 9c5-4 15-4 20 0" stroke="#424242" stroke-width="2" fill="none"/>210 <path d="M5 12c4-3 10-3 14 0" stroke="#424242" stroke-width="2" fill="none"/>211 <circle cx="12" cy="16" r="2" fill="#424242"></circle>212 </svg>213 <!-- battery icon -->214 <svg class="icon-more" viewBox="0 0 32 24">215 <rect x="2" y="4" width="24" height="16" rx="3" ry="3" fill="none" stroke="#424242" stroke-width="2"></rect>216 <rect x="4" y="6" width="18" height="12" fill="#424242"></rect>217 <rect x="26" y="9" width="4" height="6" fill="#424242"></rect>218 </svg>219 </div>220 </div>221 222 <!-- App bar -->223 <div class="app-bar">224 <svg class="back-icon" viewBox="0 0 24 24">225 <path d="M15 18l-6-6 6-6" stroke="#222" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>226 </svg>227 <div class="title">All Reviews</div>228 </div>229 230 <!-- Rating summary and images -->231 <div class="section">232 <div class="card rating-summary">233 <div>234 <div class="stars-row">235 <span class="star green">236 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7.3L12 18l-6.3 3.5 1.2-7.3-5-4.9 7-1z"/></svg>237 </span>238 <span class="star green">239 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7.3L12 18l-6.3 3.5 1.2-7.3-5-4.9 7-1z"/></svg>240 </span>241 <span class="star green">242 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7.3L12 18l-6.3 3.5 1.2-7.3-5-4.9 7-1z"/></svg>243 </span>244 <span class="star green">245 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7.3L12 18l-6.3 3.5 1.2-7.3-5-4.9 7-1z"/></svg>246 </span>247 <span class="star gray">248 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7.3L12 18l-6.3 3.5 1.2-7.3-5-4.9 7-1z"/></svg>249 </span>250 </div>251 <div class="rating-subtext">230 ratings and 22 reviews</div>252 </div>253 <div class="distribution">254 <div class="bar-row">255 <div>5★</div>256 <div class="bar"><span style="width: 86%;"></span></div>257 <div style="text-align:right;">95</div>258 </div>259 <div class="bar-row">260 <div>4★</div>261 <div class="bar"><span style="width: 35%;"></span></div>262 <div style="text-align:right;">31</div>263 </div>264 <div class="bar-row">265 <div>3★</div>266 <div class="bar"><span style="width: 28%;"></span></div>267 <div style="text-align:right;">29</div>268 </div>269 <div class="bar-row">270 <div>2★</div>271 <div class="bar"><span style="width: 18%;"></span></div>272 <div style="text-align:right;">19</div>273 </div>274 <div class="bar-row">275 <div>1★</div>276 <div class="bar"><span style="width: 52%;"></span></div>277 <div style="text-align:right;">56</div>278 </div>279 </div>280 </div>281 282 <div class="thumbs-row" style="margin-top: 24px;">283 <div class="thumb">[IMG: Black Shoe]</div>284 <div class="thumb">[IMG: Side of Shoe]</div>285 <div class="thumb">[IMG: Shoes in Plastic]</div>286 <div class="thumb">[IMG: Cardboard Box]</div>287 </div>288 289 <!-- Filters -->290 <div class="filters">291 <div class="filter-left">292 <div>Most Helpful</div>293 <svg class="dropdown-icon" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#222" stroke-width="3" fill="none" stroke-linecap="round"/></svg>294 </div>295 <div class="verified">296 <div class="checkbox"></div>297 <div>Verified Purchases</div>298 </div>299 </div>300 301 <!-- Review 1 -->302 <div class="review">303 <div class="review-header">304 <div class="stars-row" style="margin:0;">305 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7.3L12 18l-6.3 3.5 1.2-7.3-5-4.9 7-1z"/></svg></span>306 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7.3L12 18l-6.3 3.5 1.2-7.3-5-4.9 7-1z"/></svg></span>307 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7.3L12 18l-6.3 3.5 1.2-7.3-5-4.9 7-1z"/></svg></span>308 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7.3L12 18l-6.3 3.5 1.2-7.3-5-4.9 7-1z"/></svg></span>309 </div>310 <div class="review-title">Very Good</div>311 </div>312 <div class="review-text">Supar quality</div>313 314 <div class="thumbs-row" style="grid-template-columns: repeat(4, 200px); gap: 20px;">315 <div class="thumb">[IMG: Black Shoe]</div>316 <div class="thumb">[IMG: Top View]</div>317 <div class="thumb">[IMG: Wrapped Shoes]</div>318 <div class="thumb">[IMG: Box]</div>319 </div>320 321 <div class="meta">322 <span class="place">Flipkart Custo..., Ambarnath</span><br>323 Oct, 2022324 </div>325 326 <div class="actions">327 <div class="count">328 <svg class="icon-like" viewBox="0 0 24 24">329 <path d="M2 21h6V9H2v12zm7-12l5-6 1 1v5h6l-2 10H9V9z" fill="#757575"></path>330 </svg>331 <span>21</span>332 </div>333 <div class="count">334 <svg class="icon-comment" viewBox="0 0 24 24">335 <path d="M4 4h16v12H7l-3 4V4z" fill="#757575"></path>336 </svg>337 <span>5</span>338 </div>339 <div style="margin-left:auto;">340 <svg class="icon-more" viewBox="0 0 24 24">341 <circle cx="5" cy="12" r="2" fill="#757575"></circle>342 <circle cx="12" cy="12" r="2" fill="#757575"></circle>343 <circle cx="19" cy="12" r="2" fill="#757575"></circle>344 </svg>345 </div>346 </div>347 </div>348 349 <div class="divider"></div>350 351 <!-- Review 2 -->352 <div class="review">353 <div class="review-header">354 <div class="stars-row" style="margin:0;">355 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7.3L12 18l-6.3 3.5 1.2-7.3-5-4.9 7-1z"/></svg></span>356 </div>357 <div class="review-title">Worthless</div>358 </div>359 <div class="review-text">Waste of cost</div>360 <div class="meta">361 <span class="place">Kavin B, Kallakkurichi</span><br>362 7 months ago363 </div>364 <div class="actions">365 <div class="count">366 <svg class="icon-like" viewBox="0 0 24 24">367 <path d="M2 21h6V9H2v12zm7-12l5-6 1 1v5h6l-2 10H9V9z" fill="#757575"></path>368 </svg>369 <span>7</span>370 </div>371 <div class="count">372 <svg class="icon-comment" viewBox="0 0 24 24">373 <path d="M4 4h16v12H7l-3 4V4z" fill="#757575"></path>374 </svg>375 <span>1</span>376 </div>377 <div style="margin-left:auto;">378 <svg class="icon-more" viewBox="0 0 24 24">379 <circle cx="5" cy="12" r="2" fill="#757575"></circle>380 <circle cx="12" cy="12" r="2" fill="#757575"></circle>381 <circle cx="19" cy="12" r="2" fill="#757575"></circle>382 </svg>383 </div>384 </div>385 </div>386 387 <div class="divider"></div>388 389 <!-- Review 3 -->390 <div class="review">391 <div class="review-header">392 <div class="stars-row" style="margin:0;">393 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7.3L12 18l-6.3 3.5 1.2-7.3-5-4.9 7-1z"/></svg></span>394 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7.3L12 18l-6.3 3.5 1.2-7.3-5-4.9 7-1z"/></svg></span>395 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7.3L12 18l-6.3 3.5 1.2-7.3-5-4.9 7-1z"/></svg></span>396 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7.3L12 18l-6.3 3.5 1.2-7.3-5-4.9 7-1z"/></svg></span>397 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7.3L12 18l-6.3 3.5 1.2-7.3-5-4.9 7-1z"/></svg></span>398 </div>399 <div class="review-title">Brilliant</div>400 </div>401 <div class="review-text">The amazing product</div>402 <div class="meta">403 <span class="place">Flipkart Custo..., Nashik District</span><br>404 9 months ago405 </div>406 <div class="actions">407 <div class="count">408 <svg class="icon-like" viewBox="0 0 24 24">409 <path d="M2 21h6V9H2v12zm7-12l5-6 1 1v5h6l-2 10H9V9z" fill="#757575"></path>410 </svg>411 <span>6</span>412 </div>413 <div class="count">414 <svg class="icon-comment" viewBox="0 0 24 24">415 <path d="M4 4h16v12H7l-3 4V4z" fill="#757575"></path>416 </svg>417 <span>3</span>418 </div>419 <div style="margin-left:auto;">420 <svg class="icon-more" viewBox="0 0 24 24">421 <circle cx="5" cy="12" r="2" fill="#757575"></circle>422 <circle cx="12" cy="12" r="2" fill="#757575"></circle>423 <circle cx="19" cy="12" r="2" fill="#757575"></circle>424 </svg>425 </div>426 </div>427 </div>428 429 </div>430 431</div>432</body>433</html>