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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #ffffff; border-radius: 28px; box-shadow: 0 12px 40px rgba(0,0,0,0.18);12 }13 .status-bar {14 height: 140px; background: #E0E0E0; color: #ffffff; padding: 32px 40px; box-sizing: border-box;15 display: flex; align-items: center; justify-content: space-between;16 }17 .status-icons { opacity: 0.85; }18 .app-bar {19 height: 120px; display: flex; align-items: center; justify-content: space-between;20 padding: 0 40px;21 }22 .icon-btn { width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; }23 .section { padding: 0 40px; }24 .rating-block { display: flex; align-items: flex-start; gap: 40px; padding: 20px 40px; }25 .stars-row { display: flex; align-items: center; gap: 8px; }26 .reviews-count { margin-top: 16px; color: #757575; font-size: 34px; }27 .divider-vert { width: 2px; background: #E0E0E0; height: 120px; }28 .breakdown { flex: 1; padding-top: 8px; }29 .bar-row { display: grid; grid-template-columns: 70px 1fr 100px; align-items: center; gap: 16px; margin: 18px 0; font-size: 34px; color: #757575; }30 .bar-track { width: 100%; height: 16px; background: #F1F1F1; border-radius: 10px; overflow: hidden; }31 .bar-fill { height: 100%; background: #F7C948; width: 20%; }32 .bar-fill.w30 { width: 30%; }33 .info-row { display: flex; align-items: center; gap: 16px; padding: 24px 40px; color: #1976D2; font-size: 36px; }34 .write-review {35 margin: 24px 40px; background: #EAF3FB; border-radius: 20px; height: 120px; display: flex; align-items: center;36 padding: 0 40px; color: #1976D2; font-weight: 600; font-size: 36px; gap: 18px;37 }38 .reviews-header { display: flex; align-items: center; justify-content: space-between; padding: 30px 40px 10px; }39 .reviews-title { font-size: 44px; font-weight: 700; color: #212121; }40 .sort-by { display: flex; align-items: center; gap: 16px; color: #616161; font-size: 34px; }41 .sort-pill { border: 2px solid #E0E0E0; padding: 20px 26px; border-radius: 18px; color: #424242; font-weight: 600; display: flex; align-items: center; gap: 14px; }42 .review-card { padding: 34px 40px; border-top: 2px solid #EEEEEE; }43 .rev-head { display: flex; align-items: center; gap: 24px; color: #616161; font-size: 36px; }44 .score-badge { width: 86px; height: 86px; border-radius: 20px; background: #F8F9FA; border: 2px solid #E0E0E0; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; color: #424242; }45 .rev-title { font-size: 36px; color: #424242; }46 .rev-text { margin-top: 24px; font-size: 36px; color: #424242; line-height: 1.4; }47 .rev-meta { display: flex; align-items: center; gap: 14px; margin-top: 24px; color: #616161; font-size: 32px; }48 .actions { display: flex; align-items: center; gap: 26px; margin-top: 24px; color: #616161; font-size: 32px; }49 .action { display: flex; align-items: center; gap: 12px; }50 .report { margin-left: auto; color: #9E9E9E; font-weight: 600; }51 .chat-bubble {52 position: absolute; right: 40px; bottom: 320px; display: flex; align-items: center; gap: 16px;53 }54 .bubble-card {55 background: #ffffff; border-radius: 20px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);56 padding: 24px 28px; font-size: 32px; color: #424242; position: relative;57 }58 .bubble-close {59 position: absolute; top: -16px; left: -16px; width: 44px; height: 44px; border-radius: 50%;60 background: #E0E0E0; display: flex; align-items: center; justify-content: center; color: #616161; font-weight: 700;61 box-shadow: 0 2px 6px rgba(0,0,0,0.15);62 }63 .avatar {64 width: 132px; height: 132px; border-radius: 50%; background: #E0E0E0; border: 1px solid #BDBDBD;65 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 24px;66 }67 .bottom-bar {68 position: absolute; left: 40px; right: 40px; bottom: 140px;69 background: #ffffff; border-radius: 28px; box-shadow: 0 10px 28px rgba(0,0,0,0.18);70 height: 160px; display: flex; align-items: center; padding: 0 24px; gap: 24px;71 }72 .fav-slot {73 width: 220px; height: 120px; border-radius: 22px; border: 2px solid #E0E0E0; display: flex; align-items: center; justify-content: center; color: #1976D2; gap: 18px; font-weight: 700; font-size: 36px;74 background: #ffffff;75 }76 .cta {77 flex: 1; height: 120px; background: #FFEB3B; border-radius: 22px; display: flex; align-items: center; justify-content: center; gap: 20px;78 color: #212121; font-weight: 800; font-size: 44px;79 }80 .system-bottom {81 position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: #000000;82 }83 .home-indicator {84 position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);85 width: 220px; height: 12px; background: #FFFFFF; border-radius: 8px; opacity: 0.6;86 }87 88 /* SVG helpers */89 .star svg { display: block; }90 .muted { color: #9E9E9E; }91 92</style>93</head>94<body>95<div id="render-target">96 97 <!-- Status bar -->98 <div class="status-bar">99 <div style="display:flex; align-items:center; gap:20px;">100 <div style="font-size:42px; color:#616161;">10:41</div>101 <div class="status-icons" style="display:flex; gap:18px;">102 <span style="font-size:40px; color:#9E9E9E;">●</span>103 <span style="font-size:40px; color:#9E9E9E;">●</span>104 <span style="font-size:40px; color:#9E9E9E;">●</span>105 <span style="font-size:40px; color:#9E9E9E;">●</span>106 <span style="font-size:40px; color:#9E9E9E;">●</span>107 </div>108 </div>109 <div style="display:flex; align-items:center; gap:18px;">110 <svg width="44" height="44"><circle cx="22" cy="22" r="18" fill="#C7C7C7"/></svg>111 <svg width="44" height="44"><rect x="10" y="10" width="24" height="24" fill="#C7C7C7"/></svg>112 </div>113 </div>114 115 <!-- App bar -->116 <div class="app-bar">117 <div class="icon-btn">118 <svg width="48" height="48" viewBox="0 0 24 24">119 <path d="M15 5 L8 12 L15 19" stroke="#212121" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>120 </svg>121 </div>122 <div style="display:flex; align-items:center; gap:32px;">123 <!-- Search -->124 <div class="icon-btn">125 <svg width="48" height="48" viewBox="0 0 24 24">126 <circle cx="11" cy="11" r="6" stroke="#212121" stroke-width="2.4" fill="none"/>127 <path d="M16 16 L21 21" stroke="#212121" stroke-width="2.4" stroke-linecap="round"/>128 </svg>129 </div>130 <!-- Heart -->131 <div class="icon-btn">132 <svg width="48" height="48" viewBox="0 0 24 24">133 <path d="M12 20 C12 20 4 14 4 9 C4 6.5 6 5 8 5 C9.5 5 11 6 12 7 C13 6 14.5 5 16 5 C18 5 20 6.5 20 9 C20 14 12 20 12 20 Z" fill="none" stroke="#212121" stroke-width="2.2" stroke-linejoin="round"/>134 </svg>135 </div>136 <!-- Cart -->137 <div class="icon-btn">138 <svg width="48" height="48" viewBox="0 0 24 24">139 <circle cx="9" cy="20" r="2" fill="#212121"/>140 <circle cx="17" cy="20" r="2" fill="#212121"/>141 <path d="M3 4 H6 L7.5 14 H18 L20 7 H8" stroke="#212121" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>142 </svg>143 </div>144 </div>145 </div>146 147 <!-- Rating summary -->148 <div class="rating-block">149 <div style="width: 440px;">150 <div class="stars-row">151 <!-- 5 stars -->152 <div class="star"><svg width="40" height="40" viewBox="0 0 20 20"><path d="M10 1 L12.4 6.8 L18.6 7.2 L13.6 11.1 L15.4 17 L10 13.8 L4.6 17 L6.4 11.1 L1.4 7.2 L7.6 6.8 Z" fill="#F7C948"/></svg></div>153 <div class="star"><svg width="40" height="40" viewBox="0 0 20 20"><path d="M10 1 L12.4 6.8 L18.6 7.2 L13.6 11.1 L15.4 17 L10 13.8 L4.6 17 L6.4 11.1 L1.4 7.2 L7.6 6.8 Z" fill="#F7C948"/></svg></div>154 <div class="star"><svg width="40" height="40" viewBox="0 0 20 20"><path d="M10 1 L12.4 6.8 L18.6 7.2 L13.6 11.1 L15.4 17 L10 13.8 L4.6 17 L6.4 11.1 L1.4 7.2 L7.6 6.8 Z" fill="#F7C948"/></svg></div>155 <div class="star"><svg width="40" height="40" viewBox="0 0 20 20"><path d="M10 1 L12.4 6.8 L18.6 7.2 L13.6 11.1 L15.4 17 L10 13.8 L4.6 17 L6.4 11.1 L1.4 7.2 L7.6 6.8 Z" fill="#F7C948"/></svg></div>156 <div class="star"><svg width="40" height="40" viewBox="0 0 20 20"><path d="M10 1 L12.4 6.8 L18.6 7.2 L13.6 11.1 L15.4 17 L10 13.8 L4.6 17 L6.4 11.1 L1.4 7.2 L7.6 6.8 Z" fill="#F7C948"/></svg></div>157 </div>158 <div class="reviews-count">2348 Reviews</div>159 </div>160 <div class="divider-vert"></div>161 <div class="breakdown">162 <div class="bar-row">163 <div style="display:flex; align-items:center; gap:10px;">164 <span>2</span>165 <svg width="28" height="28" viewBox="0 0 20 20"><path d="M10 1 L12.4 6.8 L18.6 7.2 L13.6 11.1 L15.4 17 L10 13.8 L4.6 17 L6.4 11.1 L1.4 7.2 L7.6 6.8 Z" fill="#BDBDBD"/></svg>166 </div>167 <div class="bar-track"><div class="bar-fill" style="width:14%;"></div></div>168 <div style="text-align:right; color:#757575;">81</div>169 </div>170 <div class="bar-row">171 <div style="display:flex; align-items:center; gap:10px;">172 <span>1</span>173 <svg width="28" height="28" viewBox="0 0 20 20"><path d="M10 1 L12.4 6.8 L18.6 7.2 L13.6 11.1 L15.4 17 L10 13.8 L4.6 17 L6.4 11.1 L1.4 7.2 L7.6 6.8 Z" fill="#BDBDBD"/></svg>174 </div>175 <div class="bar-track"><div class="bar-fill w30"></div></div>176 <div style="text-align:right; color:#757575;">129</div>177 </div>178 </div>179 </div>180 181 <!-- Info line -->182 <div class="info-row">183 <svg width="40" height="40" viewBox="0 0 24 24">184 <circle cx="12" cy="12" r="10" stroke="#1976D2" stroke-width="2" fill="none"/>185 <circle cx="12" cy="8" r="1.5" fill="#1976D2"/>186 <path d="M12 11 V17" stroke="#1976D2" stroke-width="2" stroke-linecap="round"/>187 </svg>188 <span>2060 customers recommend this product</span>189 </div>190 191 <!-- Write a review -->192 <div class="write-review">193 <svg width="40" height="40" viewBox="0 0 24 24">194 <path d="M4 16 L4 20 L8 20 L18 10 L14 6 L4 16 Z" fill="none" stroke="#1976D2" stroke-width="2" stroke-linejoin="round"/>195 <path d="M12 4 L20 12" stroke="#1976D2" stroke-width="2"/>196 </svg>197 <span>WRITE A REVIEW</span>198 </div>199 200 <!-- Reviews header -->201 <div class="reviews-header">202 <div class="reviews-title">Reviews (2348)</div>203 <div class="sort-by">204 <span>Sort by</span>205 <div class="sort-pill">206 <span>The Newest</span>207 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M6 9 L12 15 L18 9" stroke="#616161" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>208 </div>209 </div>210 </div>211 212 <!-- Review 1 -->213 <div class="review-card">214 <div class="rev-head">215 <div class="score-badge">216 <span>4</span>217 <svg width="26" height="26" viewBox="0 0 20 20"><path d="M10 1 L12.4 6.8 L18.6 7.2 L13.6 11.1 L15.4 17 L10 13.8 L4.6 17 L6.4 11.1 L1.4 7.2 L7.6 6.8 Z" fill="#F7C948"/></svg>218 </div>219 <div class="rev-title">Product Experience (2 to 8 weeks)</div>220 </div>221 <div class="rev-text">Good product</div>222 <div class="rev-meta">223 <svg width="34" height="34" viewBox="0 0 24 24">224 <circle cx="12" cy="12" r="10" fill="#2ECC71"/>225 <path d="M8 12 L11 15 L17 9" stroke="#ffffff" stroke-width="2.2" fill="none" stroke-linecap="round"/>226 </svg>227 <span>prem (India) | 18-12-2023</span>228 </div>229 <div class="actions">230 <div class="action">231 <svg width="36" height="36" viewBox="0 0 24 24">232 <path d="M4 13 H8 V21 H18 L20 12 L12 6 V4 H8 C6 4 4 6 4 8 V13 Z" stroke="#9E9E9E" stroke-width="2" fill="none" stroke-linejoin="round"/>233 </svg>234 <span>0</span>235 </div>236 <div class="action">237 <svg width="36" height="36" viewBox="0 0 24 24">238 <path d="M4 11 H8 V3 H18 L20 12 L12 18 V20 H8 C6 20 4 18 4 16 V11 Z" stroke="#9E9E9E" stroke-width="2" fill="none" stroke-linejoin="round"/>239 </svg>240 <span>0</span>241 </div>242 <div class="report">Report</div>243 </div>244 </div>245 246 <!-- Review 2 -->247 <div class="review-card">248 <div class="rev-head">249 <div class="score-badge">250 <span>5</span>251 <svg width="26" height="26" viewBox="0 0 20 20"><path d="M10 1 L12.4 6.8 L18.6 7.2 L13.6 11.1 L15.4 17 L10 13.8 L4.6 17 L6.4 11.1 L1.4 7.2 L7.6 6.8 Z" fill="#F7C948"/></svg>252 </div>253 <div class="rev-title">Product Experience (3 to 6 months)</div>254 </div>255 <div class="rev-text">No comments<br/>As expected</div>256 <div class="rev-meta">257 <svg width="34" height="34" viewBox="0 0 24 24">258 <circle cx="12" cy="12" r="10" fill="#2ECC71"/>259 <path d="M8 12 L11 15 L17 9" stroke="#ffffff" stroke-width="2.2" fill="none" stroke-linecap="round"/>260 </svg>261 <span>Kaza (India) | 11-12-2023</span>262 </div>263 <div class="actions">264 <div class="action">265 <svg width="36" height="36" viewBox="0 0 24 24">266 <path d="M4 13 H8 V21 H18 L20 12 L12 6 V4 H8 C6 4 4 6 4 8 V13 Z" stroke="#9E9E9E" stroke-width="2" fill="none" stroke-linejoin="round"/>267 </svg>268 <span>0</span>269 </div>270 <div class="action">271 <svg width="36" height="36" viewBox="0 0 24 24">272 <path d="M4 11 H8 V3 H18 L20 12 L12 18 V20 H8 C6 20 4 18 4 16 V11 Z" stroke="#9E9E9E" stroke-width="2" fill="none" stroke-linejoin="round"/>273 </svg>274 <span>0</span>275 </div>276 <div class="report">Report</div>277 </div>278 </div>279 280 <!-- Review 3 -->281 <div class="review-card">282 <div class="rev-head">283 <div class="score-badge">284 <span>5</span>285 <svg width="26" height="26" viewBox="0 0 20 20"><path d="M10 1 L12.4 6.8 L18.6 7.2 L13.6 11.1 L15.4 17 L10 13.8 L4.6 17 L6.4 11.1 L1.4 7.2 L7.6 6.8 Z" fill="#F7C948"/></svg>286 </div>287 <div class="rev-title">Product Experience (3 to 6 months)</div>288 </div>289 <div class="rev-text">Very nice product for kids up to 10yrs</div>290 <div class="rev-meta">291 <svg width="34" height="34" viewBox="0 0 24 24">292 <circle cx="12" cy="12" r="10" fill="#2ECC71"/>293 <path d="M8 12 L11 15 L17 9" stroke="#ffffff" stroke-width="2.2" fill="none" stroke-linecap="round"/>294 </svg>295 <span>Firoz (India) | 08-12-2023</span>296 </div>297 <div class="actions">298 <div class="action">299 <svg width="36" height="36" viewBox="0 0 24 24">300 <path d="M4 13 H8 V21 H18 L20 12 L12 6 V4 H8 C6 4 4 6 4 8 V13 Z" stroke="#9E9E9E" stroke-width="2" fill="none" stroke-linejoin="round"/>301 </svg>302 <span>0</span>303 </div>304 <div class="action">305 <svg width="36" height="36" viewBox="0 0 24 24">306 <path d="M4 11 H8 V3 H18 L20 12 L12 18 V20 H8 C6 20 4 18 4 16 V11 Z" stroke="#9E9E9E" stroke-width="2" fill="none" stroke-linejoin="round"/>307 </svg>308 <span>0</span>309 </div>310 <div class="report">Report</div>311 </div>312 </div>313 314 <!-- Chat bubble -->315 <div class="chat-bubble">316 <div class="bubble-card">317 <div class="bubble-close">×</div>318 <div style="font-weight:700; margin-bottom:8px;">Hi There,</div>319 <div>Please click here to sign in & chat with me:)</div>320 </div>321 <div class="avatar">[IMG: Chat agent avatar]</div>322 </div>323 324 <!-- Bottom add-to-cart bar -->325 <div class="bottom-bar">326 <div class="fav-slot">327 <svg width="44" height="44" viewBox="0 0 24 24">328 <path d="M12 20 C12 20 4 14 4 9 C4 6.5 6 5 8 5 C9.5 5 11 6 12 7 C13 6 14.5 5 16 5 C18 5 20 6.5 20 9 C20 14 12 20 12 20 Z" fill="none" stroke="#1976D2" stroke-width="2.2"/>329 </svg>330 </div>331 <div class="cta">332 <span>ADD TO CART</span>333 <svg width="52" height="52" viewBox="0 0 24 24">334 <circle cx="9" cy="20" r="2" fill="#212121"/>335 <circle cx="17" cy="20" r="2" fill="#212121"/>336 <path d="M3 4 H6 L7.5 14 H18 L20 7 H8" stroke="#212121" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>337 </svg>338 </div>339 </div>340 341 <!-- System bottom area -->342 <div class="system-bottom">343 <div class="home-indicator"></div>344 </div>345 346</div>347</body>348</html>