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>Reviews UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 border-radius: 24px;16 box-shadow: 0 10px 30px rgba(0,0,0,0.08);17 color: #222;18 }19 20 /* Top status bar */21 .status-bar {22 background: #4B53C6;23 color: #fff;24 height: 160px;25 padding: 24px 36px 10px 36px;26 box-sizing: border-box;27 }28 .status-row {29 display: flex;30 align-items: center;31 justify-content: space-between;32 font-weight: 600;33 font-size: 40px;34 }35 .status-right {36 display: flex;37 align-items: center;38 gap: 26px;39 }40 .status-dot { width: 16px; height: 16px; background: #fff; border-radius: 50%; opacity: 0.8; }41 .icon-simple {42 width: 42px; height: 42px;43 }44 /* Tabs/Chips */45 .chip-row {46 display: flex;47 gap: 18px;48 margin-top: 26px;49 overflow: hidden;50 }51 .chip {52 padding: 18px 28px;53 background: #6B73E6;54 color: #fff;55 border-radius: 30px;56 font-size: 36px;57 white-space: nowrap;58 }59 .chip.dark {60 background: #2b2b2b;61 border: 1px solid #555;62 }63 .chip .close {64 margin-right: 16px;65 font-weight: 700;66 opacity: 0.9;67 }68 69 /* Content area */70 .content {71 padding: 36px;72 box-sizing: border-box;73 }74 .product-title {75 font-size: 54px;76 font-weight: 700;77 margin: 12px 0 8px;78 }79 .meta {80 color: #666;81 font-size: 34px;82 margin-bottom: 4px;83 }84 .meta .divider {85 margin: 0 12px;86 color: #aaa;87 }88 .review-text {89 font-size: 40px;90 line-height: 1.45;91 margin: 16px 0 26px;92 color: #333;93 }94 95 /* Avatar and review block */96 .review {97 display: grid;98 grid-template-columns: 110px 1fr;99 gap: 28px;100 margin-top: 36px;101 }102 .avatar {103 width: 110px;104 height: 110px;105 background: #E0E0E0;106 border: 1px solid #BDBDBD;107 border-radius: 50%;108 display: flex;109 align-items: center;110 justify-content: center;111 color: #757575;112 font-size: 24px;113 text-align: center;114 }115 .review .name {116 font-size: 40px;117 font-weight: 600;118 margin-top: 6px;119 margin-bottom: 10px;120 }121 .stars {122 color: #FF9800;123 font-size: 40px;124 letter-spacing: 4px;125 margin-right: 12px;126 }127 .verified {128 color: #E67E22;129 font-size: 34px;130 font-weight: 700;131 margin-left: 10px;132 }133 .review-title {134 font-size: 50px;135 font-weight: 800;136 margin: 12px 0 8px;137 }138 139 /* Actions */140 .actions {141 display: flex;142 align-items: center;143 justify-content: space-between;144 margin: 22px 0 34px;145 }146 .actions-left {147 display: flex;148 align-items: center;149 gap: 28px;150 }151 .pill {152 padding: 22px 30px;153 border: 1px solid #D5D5D5;154 border-radius: 22px;155 font-size: 40px;156 background: #fff;157 color: #333;158 box-shadow: 0 2px 0 rgba(0,0,0,0.04);159 }160 .share {161 display: flex;162 align-items: center;163 gap: 10px;164 color: #4B53C6;165 font-size: 40px;166 font-weight: 600;167 }168 .report {169 font-size: 40px;170 color: #777;171 }172 173 .helpful-count {174 font-size: 34px;175 color: #777;176 margin-top: 10px;177 margin-bottom: 10px;178 }179 180 /* Bottom elements */181 .fab {182 position: absolute;183 right: 42px;184 bottom: 300px;185 width: 120px;186 height: 120px;187 background: #5466F2;188 border-radius: 60px;189 display: flex;190 align-items: center;191 justify-content: center;192 box-shadow: 0 12px 24px rgba(84,102,242,0.4);193 }194 .fab svg { width: 64px; height: 64px; }195 .ad-bar {196 position: absolute;197 left: 0;198 bottom: 120px;199 width: 100%;200 height: 200px;201 background: #F8F8F8;202 border-top: 1px solid #E5E5E5;203 display: flex;204 align-items: center;205 justify-content: space-between;206 padding: 24px 36px;207 box-sizing: border-box;208 }209 .ad-info {210 display: flex;211 align-items: center;212 gap: 24px;213 }214 .ad-thumb {215 width: 160px;216 height: 160px;217 background: #E0E0E0;218 border: 1px solid #BDBDBD;219 display: flex;220 align-items: center;221 justify-content: center;222 color: #757575;223 font-size: 26px;224 }225 .ad-text {226 font-size: 38px;227 color: #333;228 }229 .install-btn {230 background: #2874F0;231 color: #fff;232 padding: 28px 48px;233 border-radius: 16px;234 font-size: 46px;235 font-weight: 700;236 }237 238 .system-nav {239 position: absolute;240 left: 0;241 bottom: 0;242 width: 100%;243 height: 120px;244 background: #0b0b0b;245 }246 .home-pill {247 width: 240px;248 height: 18px;249 background: #d9d9d9;250 border-radius: 10px;251 position: absolute;252 left: 50%;253 top: 50%;254 transform: translate(-50%, -40%);255 opacity: 0.9;256 }257</style>258</head>259<body>260<div id="render-target">261 262 <div class="status-bar">263 <div class="status-row">264 <div>9:26</div>265 <div class="status-right">266 <div class="status-dot"></div>267 <div class="status-dot"></div>268 <svg class="icon-simple" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">269 <rect x="2" y="6" width="20" height="12" rx="2"></rect>270 <rect x="20" y="9" width="2" height="6" rx="1" fill="#fff" stroke="none"></rect>271 </svg>272 <svg class="icon-simple" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">273 <path d="M6 2h12v4H6zM5 7h14l-2 15H7L5 7z"></path>274 </svg>275 </div>276 </div>277 <div class="chip-row">278 <div class="chip dark"><span class="close">×</span>Amazon.</div>279 <div class="chip">Flipkar</div>280 <div class="chip">2gud.co</div>281 <div class="chip">Google.</div>282 <div class="chip">Relianc</div>283 <div class="chip">Shop</div>284 </div>285 </div>286 287 <div class="content">288 <!-- First text-only review block -->289 <div class="product-title">Washbasins mirror</div>290 <div class="meta">Reviewed in India on 24 October 2023</div>291 <div class="meta">Size: Pack of 4 <span class="divider">|</span> Colour: Silver-Matt</div>292 <div class="review-text">Easy to install, good quality performance etc.</div>293 <div class="actions">294 <div class="actions-left">295 <div class="pill">Helpful</div>296 <div class="share">297 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#4B53C6" stroke-width="2">298 <circle cx="18" cy="5" r="3"></circle>299 <circle cx="6" cy="12" r="3"></circle>300 <circle cx="18" cy="19" r="3"></circle>301 <path d="M8.7 11l6.6-4M8.7 13l6.6 4"></path>302 </svg>303 Share304 </div>305 </div>306 <div class="report">Report</div>307 </div>308 309 <!-- Second review -->310 <div class="review">311 <div class="avatar">[IMG: User Avatar]</div>312 <div>313 <div class="name">Haneefa</div>314 <div>315 <span class="stars">★★★★★</span>316 <span class="verified">Verified Purchase</span>317 </div>318 <div class="review-title">Quality product</div>319 <div class="meta">Reviewed in India on 14 October 2023</div>320 <div class="meta">Size: Pack of 2 <span class="divider">|</span> Colour: Brass Antique</div>321 <div class="review-text">The product was as expected and I am impressed with the quality of it..</div>322 <div class="actions">323 <div class="actions-left">324 <div class="pill">Helpful</div>325 <div class="share">326 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#4B53C6" stroke-width="2">327 <circle cx="18" cy="5" r="3"></circle>328 <circle cx="6" cy="12" r="3"></circle>329 <circle cx="18" cy="19" r="3"></circle>330 <path d="M8.7 11l6.6-4M8.7 13l6.6 4"></path>331 </svg>332 Share333 </div>334 </div>335 <div class="report">Report</div>336 </div>337 </div>338 </div>339 340 <!-- Third review -->341 <div class="review">342 <div class="avatar">[IMG: User Avatar]</div>343 <div>344 <div class="name">VC</div>345 <div>346 <span class="stars">★★★★☆</span>347 <span class="verified">Verified Purchase</span>348 </div>349 <div class="review-title">Good quality</div>350 <div class="meta">Reviewed in India on 2 September 2023</div>351 <div class="meta">Size: Pack of 1 <span class="divider">|</span> Colour: Silver-Matt</div>352 <div class="review-text">353 Good quality sturdy stopper. But comes with low quality screw. I had difficult time installing and had to use different screws by painfully pulling out the original ones with pliers. Their head was getting damaged with slightest slip while tightening.354 </div>355 <div class="helpful-count">2 people found this helpful</div>356 <div class="actions">357 <div class="actions-left">358 <div class="pill">Helpful</div>359 <div class="share">360 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#4B53C6" stroke-width="2">361 <circle cx="18" cy="5" r="3"></circle>362 <circle cx="6" cy="12" r="3"></circle>363 <circle cx="18" cy="19" r="3"></circle>364 <path d="M8.7 11l6.6-4M8.7 13l6.6 4"></path>365 </svg>366 Share367 </div>368 </div>369 <div class="report">Report</div>370 </div>371 </div>372 </div>373 </div>374 375 <!-- Floating action button -->376 <div class="fab">377 <svg viewBox="0 0 24 24" stroke="#fff" stroke-width="2" fill="none">378 <path d="M12 5v14M5 12h14"></path>379 </svg>380 </div>381 382 <!-- Bottom ad bar -->383 <div class="ad-bar">384 <div class="ad-info">385 <div class="ad-thumb">[IMG: Ad Banner]</div>386 <div class="ad-text">Foreign Products To Buy</div>387 </div>388 <div class="install-btn">Install</div>389 </div>390 391 <!-- System navigation bar -->392 <div class="system-nav">393 <div class="home-pill"></div>394 </div>395 396</div>397</body>398</html>