GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Product Reviews UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px; height: 2400px;9 position: relative; overflow: hidden;10 background: #ffffff; color: #222;11 box-shadow: 0 2px 8px rgba(0,0,0,0.08);12 }13 14 /* Status bar */15 .status-bar {16 height: 110px;17 background: #f2f2f2;18 display: flex; align-items: center;19 padding: 0 30px;20 font-size: 36px; color: #333;21 }22 .status-right {23 margin-left: auto; display: flex; align-items: center; gap: 22px;24 }25 .status-icon {26 width: 36px; height: 36px; background: #ddd; border-radius: 6px;27 }28 29 /* Header */30 .header {31 height: 130px;32 display: flex; align-items: center;33 padding: 0 30px;34 border-bottom: 1px solid #e6e6e6;35 background: #fff;36 }37 .header .left {38 display: flex; align-items: center; gap: 18px;39 }40 .header .right {41 margin-left: auto; display: flex; align-items: center; gap: 40px;42 }43 .icon-btn svg { width: 56px; height: 56px; fill: none; stroke: #333; stroke-width: 6; }44 45 /* Content */46 .content {47 padding: 10px 36px 240px 36px;48 }49 .review {50 padding: 24px 0 24px 0;51 border-bottom: 1px solid #e8e8e8;52 }53 .title {54 font-weight: 800; font-size: 46px; margin-bottom: 18px;55 }56 .body-text {57 font-size: 34px; line-height: 1.45; color: #333; margin-bottom: 16px;58 }59 .meta {60 display: flex; align-items: center; gap: 16px;61 font-size: 30px; color: #666; margin-bottom: 16px;62 }63 .verified {64 display: inline-flex; align-items: center; gap: 10px;65 color: #2e7d32; font-weight: 700;66 }67 .verified svg { width: 40px; height: 40px; }68 .actions {69 display: flex; align-items: center; gap: 20px; font-size: 32px; color: #444;70 }71 .thumb { display: inline-flex; align-items: center; gap: 10px; }72 .report { margin-left: auto; color: #555; font-weight: 700; }73 .rating-row {74 display: flex; align-items: center; gap: 14px; margin-top: 10px; font-size: 34px; color: #555;75 }76 .rating-badge {77 display: inline-flex; align-items: center; gap: 10px;78 border: 1px solid #ddd; border-radius: 12px; padding: 10px 16px; font-weight: 700;79 }80 .rating-badge .star svg { width: 30px; height: 30px; fill: #f5a623; stroke: #f5a623; }81 .section-title { font-size: 44px; font-weight: 800; margin: 20px 0 12px; }82 .view-all {83 margin: 40px auto; width: 900px; height: 110px;84 border-radius: 18px; background: #f7fbff; border: 1px solid #cfe3ff;85 display: flex; align-items: center; justify-content: center;86 font-size: 40px; color: #2071d6; font-weight: 800;87 }88 89 .videos-header {90 display: flex; align-items: center; justify-content: space-between;91 padding: 12px 0; margin-top: 10px; border-top: 1px solid #eee;92 }93 .videos-header .label { font-size: 40px; font-weight: 700; color: #444; }94 .chevron {95 width: 36px; height: 36px;96 }97 .chevron svg { width: 36px; height: 36px; stroke: #999; stroke-width: 8; fill: none; }98 99 /* Bottom action bar */100 .bottom-bar {101 position: absolute; left: 0; right: 0; bottom: 0;102 height: 210px; background: #fff;103 box-shadow: 0 -6px 16px rgba(0,0,0,0.08);104 display: flex; align-items: center; gap: 24px;105 padding: 20px 26px;106 }107 .wishlist {108 width: 140px; height: 140px; border-radius: 24px;109 border: 1px solid #e0e0e0; display: flex; align-items: center; justify-content: center;110 font-size: 60px; color: #2f6ddf; background: #fff;111 }112 .add-to-cart {113 flex: 1; height: 160px; background: #fde34a; border-radius: 22px;114 display: flex; align-items: center; justify-content: center; gap: 20px;115 font-size: 44px; font-weight: 800; color: #1d1d1d;116 border: 2px solid #f3d534;117 }118 .add-to-cart svg { width: 50px; height: 50px; stroke: #1d1d1d; stroke-width: 6; fill: none; }119 120 /* Floating chat bubble */121 .chat-fab {122 position: absolute; right: 30px; bottom: 250px;123 width: 160px; height: 160px; border-radius: 80px;124 background: #2f76ff; display: flex; align-items: center; justify-content: center;125 box-shadow: 0 10px 16px rgba(0,0,0,0.2);126 }127 .chat-fab .dots {128 width: 90px; height: 60px; background: #fff; border-radius: 30px;129 display: flex; justify-content: space-around; align-items: center; padding: 6px 18px;130 }131 .dot {132 width: 14px; height: 14px; background: #2f76ff; border-radius: 7px;133 }134</style>135</head>136<body>137<div id="render-target">138 139 <!-- Status Bar -->140 <div class="status-bar">141 <div>9:37</div>142 <div class="status-right">143 <div class="status-icon" title="signal"></div>144 <div class="status-icon" title="wifi"></div>145 <div class="status-icon" title="battery"></div>146 </div>147 </div>148 149 <!-- Header -->150 <div class="header">151 <div class="left">152 <div class="icon-btn">153 <svg viewBox="0 0 24 24"><path d="M15 4 L7 12 L15 20" /></svg>154 </div>155 </div>156 <div class="right">157 <div class="icon-btn" title="search">158 <svg viewBox="0 0 24 24">159 <circle cx="10" cy="10" r="7"></circle>160 <path d="M16 16 L22 22"></path>161 </svg>162 </div>163 <div class="icon-btn" title="heart">164 <svg viewBox="0 0 24 24">165 <path d="M12 20 C12 20 4 14 4 8 C4 5 6.5 3.5 9 4.5 C10.2 5 11 6 12 7 C13 6 13.8 5 15 4.5 C17.5 3.5 20 5 20 8 C20 14 12 20 12 20Z"></path>166 </svg>167 </div>168 <div class="icon-btn" title="cart">169 <svg viewBox="0 0 24 24">170 <path d="M3 5 H6 L7 13 H19 L21 8 H7"></path>171 <circle cx="9" cy="19" r="2"></circle>172 <circle cx="17" cy="19" r="2"></circle>173 </svg>174 </div>175 </div>176 </div>177 178 <!-- Content -->179 <div class="content">180 181 <!-- Review 1 -->182 <div class="review">183 <div class="title">thubsup</div>184 <div class="body-text">185 it's a super quality product with fare price color combo is noiseless. i'm waiting for the black colour launch ................186 </div>187 188 <div class="meta">189 <div class="verified">190 <svg viewBox="0 0 24 24">191 <circle cx="12" cy="12" r="11" fill="#4CAF50" stroke="#4CAF50"></circle>192 <path d="M7 12 L10 15 L17 8" stroke="#fff" stroke-width="3" fill="none"></path>193 </svg>194 AKSHAY (India) | 22-11-2018195 </div>196 </div>197 198 <div class="actions">199 <div class="thumb">👍 <span>166</span></div>200 <div class="thumb" style="margin-left: 12px;">👎 <span>31</span></div>201 <div class="report">Report</div>202 </div>203 204 <div class="rating-row">205 <div class="rating-badge">206 <div>5</div>207 <div class="star">208 <svg viewBox="0 0 24 24">209 <polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"></polygon>210 </svg>211 </div>212 </div>213 <div>Product Experience (2 to 8 weeks)</div>214 </div>215 </div>216 217 <!-- Review 2 -->218 <div class="review">219 <div class="section-title">Worth for money</div>220 <div class="body-text">Add more colours</div>221 222 <div class="meta">223 <div class="verified">224 <svg viewBox="0 0 24 24">225 <circle cx="12" cy="12" r="11" fill="#4CAF50" stroke="#4CAF50"></circle>226 <path d="M7 12 L10 15 L17 8" stroke="#fff" stroke-width="3" fill="none"></path>227 </svg>228 JOSEPH (India) | 09-11-2018229 </div>230 </div>231 232 <div class="actions">233 <div class="thumb">👍 <span>103</span></div>234 <div class="thumb" style="margin-left: 12px;">👎 <span>22</span></div>235 <div class="report">Report</div>236 </div>237 238 <div class="rating-row">239 <div class="rating-badge">240 <div>5</div>241 <div class="star">242 <svg viewBox="0 0 24 24">243 <polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"></polygon>244 </svg>245 </div>246 </div>247 <div>Product Experience (2 to 8 weeks)</div>248 </div>249 </div>250 251 <!-- Review 3 -->252 <div class="review">253 <div class="section-title">Shoes are good but..</div>254 <div class="body-text">255 Shoes are good but how do I clean this.. It became filthy when I Drenched in rain256 </div>257 258 <div class="meta">259 <div class="verified">260 <svg viewBox="0 0 24 24">261 <circle cx="12" cy="12" r="11" fill="#4CAF50" stroke="#4CAF50"></circle>262 <path d="M7 12 L10 15 L17 8" stroke="#fff" stroke-width="3" fill="none"></path>263 </svg>264 Harish (India) | 09-10-2018265 </div>266 </div>267 268 <div class="actions">269 <div class="thumb">👍 <span>108</span></div>270 <div class="thumb" style="margin-left: 12px;">👎 <span>34</span></div>271 <div class="report">Report</div>272 </div>273 274 <div class="rating-row">275 <div class="rating-badge">276 <div>5</div>277 <div class="star">278 <svg viewBox="0 0 24 24">279 <polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"></polygon>280 </svg>281 </div>282 </div>283 <div>Product Experience (2 to 8 weeks)</div>284 </div>285 </div>286 287 <!-- View all button -->288 <div class="view-all">View all 9409 Reviews</div>289 290 <!-- Videos section -->291 <div class="videos-header">292 <div class="label">VIDEOS</div>293 <div class="chevron">294 <svg viewBox="0 0 24 24"><path d="M6 9 L12 15 L18 9"></path></svg>295 </div>296 </div>297 298 <!-- Placeholder below videos (collapsed) -->299 <div style="height: 120px;"></div>300 </div>301 302 <!-- Floating chat bubble -->303 <div class="chat-fab">304 <div class="dots">305 <div class="dot"></div>306 <div class="dot"></div>307 <div class="dot"></div>308 </div>309 </div>310 311 <!-- Bottom bar -->312 <div class="bottom-bar">313 <div class="wishlist">❤+</div>314 <div class="add-to-cart">315 <span>ADD TO CART</span>316 <svg viewBox="0 0 24 24">317 <path d="M3 5 H6 L7 13 H19 L21 8 H7"></path>318 <circle cx="9" cy="19" r="2"></circle>319 <circle cx="17" cy="19" r="2"></circle>320 </svg>321 </div>322 </div>323 324</div>325</body>326</html>