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>All Reviews UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color: #212121; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #ffffff;15 }16 .status-bar {17 height: 110px;18 background: #eeeeee;19 display: flex;20 align-items: center;21 padding: 0 40px;22 font-size: 42px;23 color: #616161;24 justify-content: space-between;25 border-bottom: 1px solid #e0e0e0;26 }27 .status-right { display: flex; align-items: center; gap: 26px; }28 .app-bar {29 height: 130px;30 display: flex;31 align-items: center;32 padding: 0 32px;33 gap: 28px;34 border-bottom: 1px solid #e0e0e0;35 background: #ffffff;36 }37 .app-title {38 font-size: 54px;39 font-weight: 600;40 color: #2b2b2b;41 }42 .content { position: relative; }43 .summary {44 display: flex;45 padding: 40px 40px;46 gap: 40px;47 border-bottom: 1px solid #e0e0e0;48 background: #fafafa;49 }50 .sum-left { flex: 1; }51 .sum-right { flex: 1; }52 .divider-vert {53 width: 1px;54 background: #e0e0e0;55 margin: 0 10px;56 }57 .star-row { display: flex; gap: 10px; align-items: center; margin-bottom: 20px; }58 .stars-large svg { width: 56px; height: 56px; }59 .star-green path { fill: #2e7d32; }60 .star-gray path { fill: #cfd8dc; }61 .sum-text { font-size: 36px; color: #616161; }62 .bars { display: grid; grid-template-columns: auto 1fr auto; row-gap: 20px; column-gap: 18px; align-items: center; }63 .bar-label { font-size: 38px; color: #424242; display: flex; align-items: center; gap: 10px; }64 .bar-track {65 width: 100%;66 height: 24px;67 background: #e0e0e0;68 border-radius: 14px;69 overflow: hidden;70 }71 .bar-fill {72 height: 100%;73 background: #2e7d32;74 border-radius: 14px;75 }76 .bar-count { font-size: 36px; color: #616161; }77 .thumbs-row {78 display: flex;79 padding: 22px 32px;80 gap: 22px;81 background: #ffffff;82 border-bottom: 1px solid #e0e0e0;83 }84 .thumb {85 width: 196px; height: 196px;86 background: #E0E0E0;87 border: 1px solid #BDBDBD;88 display: flex; justify-content: center; align-items: center;89 color: #757575; font-size: 32px; text-align: center; border-radius: 8px;90 }91 .filters {92 display: flex;93 align-items: center;94 justify-content: space-between;95 padding: 28px 40px;96 border-top: 1px solid #e0e0e0;97 border-bottom: 1px solid #e0e0e0;98 background: #ffffff;99 }100 .filter-left { display: flex; align-items: center; gap: 16px; font-size: 42px; color: #2b2b2b; }101 .filter-right { display: flex; align-items: center; gap: 20px; font-size: 40px; color: #2b2b2b; }102 .checkbox {103 width: 64px; height: 64px; border: 3px solid #9e9e9e; border-radius: 12px; position: relative;104 }105 .checkbox svg { position: absolute; top: 10px; left: 8px; width: 48px; height: 48px; }106 .review {107 background: #ffffff;108 padding: 34px 40px;109 position: relative;110 }111 .review + .review { border-top: 1px solid #e0e0e0; }112 .review-header {113 display: flex; align-items: center; gap: 18px; margin-bottom: 12px;114 }115 .review-header .stars svg { width: 40px; height: 40px; }116 .review-title { font-size: 44px; font-weight: 700; color: #2b2b2b; }117 .review-body { font-size: 40px; color: #333333; margin: 14px 0 26px; }118 .review-meta {119 display: grid; grid-template-columns: 140px 1fr; column-gap: 24px; align-items: center;120 }121 .avatar {122 width: 140px; height: 140px;123 background: #E0E0E0;124 border: 1px solid #BDBDBD;125 display: flex; justify-content: center; align-items: center;126 color: #757575; font-size: 28px; text-align: center; border-radius: 8px;127 }128 .meta-text { display: flex; flex-direction: column; gap: 10px; }129 .meta-name { font-size: 36px; color: #424242; }130 .meta-time { font-size: 34px; color: #9e9e9e; }131 .actions {132 position: absolute; right: 40px; bottom: 40px;133 display: flex; align-items: center; gap: 26px; color: #9e9e9e; font-size: 38px;134 }135 .actions .count { color: #616161; margin-left: 8px; font-size: 36px; }136 .dotmenu { display: flex; flex-direction: column; gap: 8px; margin-left: 8px; }137 .dotmenu span { width: 10px; height: 10px; background: #9e9e9e; border-radius: 50%; display: block; }138 .bottom-pill {139 position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);140 width: 360px; height: 16px; background: #000000; opacity: 0.1; border-radius: 12px;141 }142 /* Simple helper icons */143 .back-icon svg { width: 60px; height: 60px; }144 .arrow-down svg { width: 34px; height: 34px; }145 .icon { display: inline-flex; align-items: center; }146</style>147</head>148<body>149<div id="render-target">150 <!-- Status Bar -->151 <div class="status-bar">152 <div>2:35</div>153 <div class="status-right">154 <span>⭘</span>155 <span>▴</span>156 <span>🔋 98%</span>157 </div>158 </div>159 160 <!-- App Bar -->161 <div class="app-bar">162 <div class="back-icon">163 <svg viewBox="0 0 48 48"><path d="M30 8 L14 24 L30 40" stroke="#616161" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>164 </div>165 <div class="app-title">All Reviews</div>166 </div>167 168 <!-- Rating Summary -->169 <div class="summary">170 <div class="sum-left">171 <div class="star-row stars-large">172 <svg viewBox="0 0 24 24" class="star-green"><path d="M12 2 L15 9 L22 9 L17 14 L19 22 L12 18 L5 22 L7 14 L2 9 L9 9 Z"/></svg>173 <svg viewBox="0 0 24 24" class="star-green"><path d="M12 2 L15 9 L22 9 L17 14 L19 22 L12 18 L5 22 L7 14 L2 9 L9 9 Z"/></svg>174 <svg viewBox="0 0 24 24" class="star-green"><path d="M12 2 L15 9 L22 9 L17 14 L19 22 L12 18 L5 22 L7 14 L2 9 L9 9 Z"/></svg>175 <svg viewBox="0 0 24 24" class="star-green"><path d="M12 2 L15 9 L22 9 L17 14 L19 22 L12 18 L5 22 L7 14 L2 9 L9 9 Z"/></svg>176 <svg viewBox="0 0 24 24" class="star-gray"><path d="M12 2 L15 9 L22 9 L17 14 L19 22 L12 18 L5 22 L7 14 L2 9 L9 9 Z"/></svg>177 </div>178 <div class="sum-text">170 ratings and 24 reviews</div>179 </div>180 <div class="divider-vert"></div>181 <div class="sum-right">182 <div class="bars">183 <div class="bar-label">5★</div>184 <div class="bar-track"><div class="bar-fill" style="width: 86%;"></div></div>185 <div class="bar-count">89</div>186 187 <div class="bar-label">4★</div>188 <div class="bar-track"><div class="bar-fill" style="width: 48%;"></div></div>189 <div class="bar-count">38</div>190 191 <div class="bar-label">3★</div>192 <div class="bar-track"><div class="bar-fill" style="width: 12%;"></div></div>193 <div class="bar-count">9</div>194 195 <div class="bar-label">2★</div>196 <div class="bar-track"><div class="bar-fill" style="width: 22%;"></div></div>197 <div class="bar-count">15</div>198 199 <div class="bar-label">1★</div>200 <div class="bar-track"><div class="bar-fill" style="width: 28%;"></div></div>201 <div class="bar-count">19</div>202 </div>203 </div>204 </div>205 206 <!-- Thumbnail Row -->207 <div class="thumbs-row">208 <div class="thumb">[IMG: Person outdoors]</div>209 <div class="thumb">[IMG: White sneaker]</div>210 <div class="thumb">[IMG: White sneaker heel]</div>211 <div class="thumb">[IMG: Sneakers pair]</div>212 <div class="thumb">[IMG: White sneaker close]</div>213 </div>214 215 <!-- Filters -->216 <div class="filters">217 <div class="filter-left">218 <span>Most Helpful</span>219 <span class="arrow-down">220 <svg viewBox="0 0 24 24"><path d="M6 8 L12 14 L18 8" stroke="#616161" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>221 </span>222 </div>223 <div class="filter-right">224 <div class="checkbox">225 <svg viewBox="0 0 24 24"><path d="M4 12 L10 18 L20 6" stroke="#2e7d32" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>226 </div>227 <span>Verified Purchases</span>228 </div>229 </div>230 231 <!-- Review 1 -->232 <div class="review">233 <div class="review-header">234 <div class="stars">235 <svg viewBox="0 0 24 24" class="star-green"><path d="M12 2 L15 9 L22 9 L17 14 L19 22 L12 18 L5 22 L7 14 L2 9 L9 9 Z"/></svg>236 <svg viewBox="0 0 24 24" class="star-green"><path d="M12 2 L15 9 L22 9 L17 14 L19 22 L12 18 L5 22 L7 14 L2 9 L9 9 Z"/></svg>237 <svg viewBox="0 0 24 24" class="star-green"><path d="M12 2 L15 9 L22 9 L17 14 L19 22 L12 18 L5 22 L7 14 L2 9 L9 9 Z"/></svg>238 <svg viewBox="0 0 24 24" class="star-green"><path d="M12 2 L15 9 L22 9 L17 14 L19 22 L12 18 L5 22 L7 14 L2 9 L9 9 Z"/></svg>239 <svg viewBox="0 0 24 24" class="star-green"><path d="M12 2 L15 9 L22 9 L17 14 L19 22 L12 18 L5 22 L7 14 L2 9 L9 9 Z"/></svg>240 </div>241 <div class="review-title">Brilliant</div>242 </div>243 <div class="review-body">always good product 👍</div>244 <div class="review-meta">245 <div class="avatar">[IMG: Person outdoors]</div>246 <div class="meta-text">247 <div class="meta-name">Amit Kashyap , Gonda</div>248 <div class="meta-time">3 months ago</div>249 </div>250 </div>251 <div class="actions">252 <span>👍<span class="count">69</span></span>253 <span>👎<span class="count">14</span></span>254 <div class="dotmenu"><span></span><span></span><span></span></div>255 </div>256 </div>257 258 <!-- Review 2 -->259 <div class="review">260 <div class="review-header">261 <div class="stars">262 <svg viewBox="0 0 24 24" class="star-green"><path d="M12 2 L15 9 L22 9 L17 14 L19 22 L12 18 L5 22 L7 14 L2 9 L9 9 Z"/></svg>263 <svg viewBox="0 0 24 24" class="star-green"><path d="M12 2 L15 9 L22 9 L17 14 L19 22 L12 18 L5 22 L7 14 L2 9 L9 9 Z"/></svg>264 <svg viewBox="0 0 24 24" class="star-green"><path d="M12 2 L15 9 L22 9 L17 14 L19 22 L12 18 L5 22 L7 14 L2 9 L9 9 Z"/></svg>265 <svg viewBox="0 0 24 24" class="star-green"><path d="M12 2 L15 9 L22 9 L17 14 L19 22 L12 18 L5 22 L7 14 L2 9 L9 9 Z"/></svg>266 <svg viewBox="0 0 24 24" class="star-green"><path d="M12 2 L15 9 L22 9 L17 14 L19 22 L12 18 L5 22 L7 14 L2 9 L9 9 Z"/></svg>267 </div>268 <div class="review-title">Just wow!</div>269 </div>270 <div class="review-body">Veara level</div>271 <div class="review-meta">272 <div class="avatar">[IMG: Person outdoors]</div>273 <div class="meta-text">274 <div class="meta-name">karthikeyan M..., Salem District</div>275 <div class="meta-time">4 months ago</div>276 </div>277 </div>278 <div class="actions">279 <span>👍<span class="count">16</span></span>280 <span>👎<span class="count">4</span></span>281 <div class="dotmenu"><span></span><span></span><span></span></div>282 </div>283 </div>284 285 <!-- Review 3 -->286 <div class="review">287 <div class="review-header">288 <div class="stars">289 <svg viewBox="0 0 24 24" class="star-green"><path d="M12 2 L15 9 L22 9 L17 14 L19 22 L12 18 L5 22 L7 14 L2 9 L9 9 Z"/></svg>290 <svg viewBox="0 0 24 24" class="star-green"><path d="M12 2 L15 9 L22 9 L17 14 L19 22 L12 18 L5 22 L7 14 L2 9 L9 9 Z"/></svg>291 <svg viewBox="0 0 24 24" class="star-green"><path d="M12 2 L15 9 L22 9 L17 14 L19 22 L12 18 L5 22 L7 14 L2 9 L9 9 Z"/></svg>292 <svg viewBox="0 0 24 24" class="star-green"><path d="M12 2 L15 9 L22 9 L17 14 L19 22 L12 18 L5 22 L7 14 L2 9 L9 9 Z"/></svg>293 <svg viewBox="0 0 24 24" class="star-gray"><path d="M12 2 L15 9 L22 9 L17 14 L19 22 L12 18 L5 22 L7 14 L2 9 L9 9 Z"/></svg>294 </div>295 <div class="review-title">Delightful</div>296 </div>297 <div class="review-body">Good product</div>298 <div class="review-meta">299 <div class="avatar">[IMG: Person outdoors]</div>300 <div class="meta-text">301 <div class="meta-name">yunus Khan, Rajgarh District</div>302 <div class="meta-time">3 months ago</div>303 </div>304 </div>305 <div class="actions">306 <span>👍<span class="count">15</span></span>307 <span>👎<span class="count">4</span></span>308 <div class="dotmenu"><span></span><span></span><span></span></div>309 </div>310 </div>311 312 <!-- Bottom system pill -->313 <div class="bottom-pill"></div>314</div>315</body>316</html>