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>Ratings & Reviews</title>7<style>8 body { margin:0; padding:0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color:#333; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#ffffff; border-radius:24px;12 }13 .status-bar { height:150px; background:#E6E6E6; padding:0 40px; display:flex; align-items:flex-end; color:#8b8b8b; font-size:36px; }14 .header { height:150px; display:flex; align-items:center; padding:0 36px; border-bottom:1px solid #eee; }15 .header .left { display:flex; align-items:center; gap:24px; flex:1; }16 .header .right { display:flex; gap:40px; }17 .icon-btn { width:72px; height:72px; display:flex; align-items:center; justify-content:center; color:#333; }18 .content { padding:28px 40px 220px 40px; overflow-y:auto; height:2000px; }19 .section-title { display:flex; align-items:center; gap:24px; margin-top:12px; }20 .section-title h2 { font-size:44px; letter-spacing:0.3px; margin:0; font-weight:700; }21 .divider-line { flex:1; height:2px; background:#E9ECEF; }22 .ratings-wrap { display:flex; gap:40px; padding:40px 0 30px 0; }23 .rating-left { width:360px; display:flex; flex-direction:column; align-items:flex-start; border-right:1px solid #E9ECEF; padding-right:36px; }24 .rating-left .score { font-size:120px; font-weight:600; line-height:1; }25 .stars { display:flex; gap:10px; margin:10px 0 8px 0; }26 .star svg { width:40px; height:40px; }27 .muted { color:#6f7a81; }28 .rating-right { flex:1; display:flex; flex-direction:column; gap:18px; padding-top:14px; }29 .bar-row { display:flex; align-items:center; gap:20px; font-size:34px; color:#8a8f94; }30 .bar { flex:1; height:16px; background:#F1F3F5; border-radius:10px; overflow:hidden; }31 .bar > span { display:block; height:100%; background:#F5C14B; }32 .info-line { display:flex; align-items:center; gap:16px; color:#2d6cdf; font-size:36px; margin:18px 0 28px 0; }33 .pill-cta { background:#E9F2FF; border-radius:20px; padding:26px 28px; display:flex; align-items:center; gap:18px; color:#2d6cdf; font-weight:600; }34 .subhead { display:flex; align-items:center; justify-content:space-between; margin:34px 0 10px; }35 .subhead h3 { margin:0; font-size:42px; font-weight:700; }36 .sort-pill { display:flex; align-items:center; gap:16px; border:1px solid #E6E8EB; border-radius:16px; padding:22px 26px; color:#5f6b75; font-size:34px; }37 .review { padding:30px 0; border-bottom:1px solid #ECEFF2; }38 .review-head { display:flex; align-items:center; gap:22px; }39 .rating-tag { background:#F3F7FF; color:#1f6feb; border-radius:14px; padding:6px 18px; font-weight:700; display:flex; align-items:center; gap:12px; font-size:36px; }40 .review-title { font-size:38px; color:#4a4f55; }41 .review-text { font-size:38px; margin:22px 0; color:#333; }42 .review-meta { display:flex; align-items:center; gap:16px; color:#6a7a7f; font-size:34px; }43 .verify { color:#15A66E; display:flex; align-items:center; gap:12px; }44 .review-actions { display:flex; align-items:center; justify-content:space-between; margin-top:22px; color:#66727a; }45 .thumbs { display:flex; gap:40px; align-items:center; }46 .thumb { display:flex; align-items:center; gap:10px; font-size:34px; }47 .report { color:#6a7a7f; font-weight:600; }48 .sticky-cart { position:absolute; left:24px; right:24px; bottom:110px; background:#ffffff; box-shadow:0 8px 24px rgba(0,0,0,0.12); border-radius:24px; display:flex; align-items:center; padding:22px; gap:24px; }49 .wish { width:140px; height:110px; border:1px solid #E6E8EB; border-radius:18px; display:flex; align-items:center; justify-content:center; color:#1f6feb; }50 .cta { flex:1; height:110px; background:#FFE04D; color:#111; border-radius:18px; display:flex; align-items:center; justify-content:center; gap:18px; font-weight:800; font-size:42px; letter-spacing:1px; }51 /* Floating chat */52 .chat { position:absolute; right:40px; bottom:300px; display:flex; align-items:flex-end; gap:16px; }53 .chat-card { background:#fff; border:1px solid #E6E6E6; border-radius:18px; padding:18px 20px; width:420px; box-shadow:0 8px 20px rgba(0,0,0,0.08); position:relative; }54 .chat-card .close { position:absolute; top:-18px; left:-18px; width:44px; height:44px; background:#E6E6E6; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; color:#666; font-size:26px; }55 .agent { width:120px; height:120px; border-radius:60px; overflow:hidden; }56 .img-ph { width:100%; height:100%; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; font-size:26px; text-align:center; padding:6px; }57 /* Helpers */58 .small-muted { color:#8a8f94; font-size:32px; }59</style>60</head>61<body>62<div id="render-target">63 64 <div class="status-bar">65 <div style="margin-bottom:16px;">8:47</div>66 </div>67 68 <div class="header">69 <div class="left">70 <div class="icon-btn" aria-label="Back">71 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">72 <path d="M15 18l-6-6 6-6"/>73 </svg>74 </div>75 </div>76 <div class="right">77 <div class="icon-btn" aria-label="Search">78 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">79 <circle cx="11" cy="11" r="7"></circle>80 <path d="M21 21l-3.8-3.8"></path>81 </svg>82 </div>83 <div class="icon-btn" aria-label="Wishlist">84 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">85 <path d="M20.8 4.6a5 5 0 0 0-7.1 0L12 6.3l-1.7-1.7a5 5 0 1 0-7.1 7.1L12 22l8.8-8.8a5 5 0 0 0 0-7.1z"/>86 </svg>87 </div>88 <div class="icon-btn" aria-label="Cart">89 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">90 <circle cx="9" cy="21" r="1.5"></circle>91 <circle cx="18" cy="21" r="1.5"></circle>92 <path d="M3 3h2l3 12h9l3-8H6"></path>93 </svg>94 </div>95 </div>96 </div>97 98 <div class="content">99 <div class="section-title">100 <h2>RATINGS & REVIEWS</h2>101 <div class="divider-line"></div>102 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#9AA3A9" stroke-width="2">103 <path d="M6 14l6-6 6 6"/>104 </svg>105 </div>106 107 <div class="ratings-wrap">108 <div class="rating-left">109 <div class="score">4.6</div>110 <div class="stars">111 <span class="star">112 <svg viewBox="0 0 24 24" fill="#F5C14B"><path d="M12 2l3 6 6 .9-4.4 4.3 1 6-5.6-2.9L6.3 19l1-6L3 8.9 9 8z"/></svg>113 </span>114 <span class="star">115 <svg viewBox="0 0 24 24" fill="#F5C14B"><path d="M12 2l3 6 6 .9-4.4 4.3 1 6-5.6-2.9L6.3 19l1-6L3 8.9 9 8z"/></svg>116 </span>117 <span class="star">118 <svg viewBox="0 0 24 24" fill="#F5C14B"><path d="M12 2l3 6 6 .9-4.4 4.3 1 6-5.6-2.9L6.3 19l1-6L3 8.9 9 8z"/></svg>119 </span>120 <span class="star">121 <svg viewBox="0 0 24 24" fill="#F5C14B"><path d="M12 2l3 6 6 .9-4.4 4.3 1 6-5.6-2.9L6.3 19l1-6L3 8.9 9 8z"/></svg>122 </span>123 <span class="star">124 <svg viewBox="0 0 24 24" fill="#F5C14B"><path d="M12 2l3 6 6 .9-4.4 4.3 1 6-5.6-2.9L6.3 19l1-6L3 8.9 9 8z"/></svg>125 </span>126 </div>127 <div class="muted" style="font-size:34px;">4959 Reviews</div>128 </div>129 130 <div class="rating-right">131 <div class="bar-row">132 <span>5</span>133 <svg width="20" height="20" viewBox="0 0 24 24" fill="#D0D4D9"><path d="M12 2l3 6 6 .9-4.4 4.3 1 6-5.6-2.9L6.3 19l1-6L3 8.9 9 8z"/></svg>134 <div class="bar"><span style="width:72%;"></span></div>135 <span>3436</span>136 </div>137 <div class="bar-row">138 <span>4</span>139 <svg width="20" height="20" viewBox="0 0 24 24" fill="#D0D4D9"><path d="M12 2l3 6 6 .9-4.4 4.3 1 6-5.6-2.9L6.3 19l1-6L3 8.9 9 8z"/></svg>140 <div class="bar"><span style="width:36%;"></span></div>141 <span>1176</span>142 </div>143 <div class="bar-row">144 <span>3</span>145 <svg width="20" height="20" viewBox="0 0 24 24" fill="#D0D4D9"><path d="M12 2l3 6 6 .9-4.4 4.3 1 6-5.6-2.9L6.3 19l1-6L3 8.9 9 8z"/></svg>146 <div class="bar"><span style="width:12%;"></span></div>147 <span>235</span>148 </div>149 <div class="bar-row">150 <span>2</span>151 <svg width="20" height="20" viewBox="0 0 24 24" fill="#D0D4D9"><path d="M12 2l3 6 6 .9-4.4 4.3 1 6-5.6-2.9L6.3 19l1-6L3 8.9 9 8z"/></svg>152 <div class="bar"><span style="width:4%;"></span></div>153 <span>55</span>154 </div>155 <div class="bar-row">156 <span>1</span>157 <svg width="20" height="20" viewBox="0 0 24 24" fill="#D0D4D9"><path d="M12 2l3 6 6 .9-4.4 4.3 1 6-5.6-2.9L6.3 19l1-6L3 8.9 9 8z"/></svg>158 <div class="bar"><span style="width:5%;"></span></div>159 <span>57</span>160 </div>161 </div>162 </div>163 164 <div class="info-line">165 <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#2d6cdf" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8h.01M11 12h2v5h-2z"/></svg>166 <div>4737 customers recommend this product</div>167 </div>168 169 <div class="pill-cta">170 <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#2d6cdf" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5l4 4L8 20H4v-4L16.5 3.5z"/></svg>171 <div>WRITE A REVIEW</div>172 </div>173 174 <div class="subhead">175 <h3>Reviews (4959)</h3>176 <div class="sort-pill">177 <span>Sort by</span>178 <strong>The Newest</strong>179 <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#6b7580" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>180 </div>181 </div>182 183 <!-- Review 1 -->184 <div class="review">185 <div class="review-head">186 <div class="rating-tag">5187 <svg width="24" height="24" viewBox="0 0 24 24" fill="#F5C14B"><path d="M12 2l3 6 6 .9-4.4 4.3 1 6-5.6-2.9L6.3 19l1-6L3 8.9 9 8z"/></svg>188 </div>189 <div class="review-title">Product Experience (3 to 6 months)</div>190 </div>191 <div class="review-text">Nice product</div>192 <div class="review-meta">193 <div class="verify">194 <svg width="28" height="28" viewBox="0 0 24 24" fill="#15A66E"><path d="M12 2l2.2 1 2.5.4 1.7 1.8.4 2.5L20 10l.8 2.3-.4 2.5-1.7 1.8-2.5.4L12 20l-2.2-1-2.5-.4L5.6 16l-.4-2.5L4 10l.8-2.3.4-2.5L6.9 3.4 9.4 3 12 2z"/><path fill="#fff" d="M10.2 12.4l1.1 1.1 3.3-3.3 1.1 1.1-4.4 4.4-2.2-2.2z"/></svg>195 <span>Somen (India) | 22-11-2023</span>196 </div>197 </div>198 <div class="review-actions">199 <div class="thumbs">200 <div class="thumb">201 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#78838a" stroke-width="2"><path d="M14 9V5a3 3 0 0 0-3-3l-2 7H4v10h9l5-9V9h-4z"/></svg>202 <span>0</span>203 </div>204 <div class="thumb">205 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#78838a" stroke-width="2"><path d="M10 15v4a3 3 0 0 0 3 3l2-7h5V5H11L6 14v1h4z"/></svg>206 <span>0</span>207 </div>208 </div>209 <div class="report">Report</div>210 </div>211 </div>212 213 <!-- Review 2 -->214 <div class="review">215 <div class="review-head">216 <div class="rating-tag" style="color:#ff9d00;">217 3218 <svg width="24" height="24" viewBox="0 0 24 24" fill="#F5C14B"><path d="M12 2l3 6 6 .9-4.4 4.3 1 6-5.6-2.9L6.3 19l1-6L3 8.9 9 8z"/></svg>219 </div>220 <div class="review-title">Product Experience (3 to 6 months)</div>221 </div>222 <div class="review-text">Sole is not good</div>223 <div class="review-meta">224 <div class="verify">225 <svg width="28" height="28" viewBox="0 0 24 24" fill="#15A66E"><path d="M12 2l2.2 1 2.5.4 1.7 1.8.4 2.5L20 10l.8 2.3-.4 2.5-1.7 1.8-2.5.4L12 20l-2.2-1-2.5-.4L5.6 16l-.4-2.5L4 10l.8-2.3.4-2.5L6.9 3.4 9.4 3 12 2z"/><path fill="#fff" d="M10.2 12.4l1.1 1.1 3.3-3.3 1.1 1.1-4.4 4.4-2.2-2.2z"/></svg>226 <span>Anant (India) | 03-11-2023</span>227 </div>228 </div>229 <div class="review-actions">230 <div class="thumbs">231 <div class="thumb">232 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#78838a" stroke-width="2"><path d="M14 9V5a3 3 0 0 0-3-3l-2 7H4v10h9l5-9V9h-4z"/></svg>233 <span>0</span>234 </div>235 <div class="thumb">236 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#78838a" stroke-width="2"><path d="M10 15v4a3 3 0 0 0 3 3l2-7h5V5H11L6 14v1h4z"/></svg>237 <span>0</span>238 </div>239 </div>240 <div class="report">Report</div>241 </div>242 </div>243 244 </div>245 246 <!-- Floating chat with placeholder avatar -->247 <div class="chat">248 <div class="chat-card">249 <div class="close">×</div>250 <div style="font-weight:700; margin-bottom:6px;">Hi There,</div>251 <div class="small-muted" style="line-height:1.4;">Please click here to sign in & chat with me:)</div>252 </div>253 <div class="agent">254 <div class="img-ph">[IMG: Support Agent]</div>255 </div>256 </div>257 258 <!-- Sticky Add to Cart -->259 <div class="sticky-cart">260 <div class="wish" aria-label="Add to wishlist">261 <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="#1f6feb" stroke-width="2">262 <path d="M20.8 4.6a5 5 0 0 0-7.1 0L12 6.3l-1.7-1.7a5 5 0 1 0-7.1 7.1L12 22l8.8-8.8a5 5 0 0 0 0-7.1z"/>263 <path d="M12 7v8"/>264 <path d="M8 11h8"/>265 </svg>266 </div>267 <div class="cta">268 ADD TO CART269 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">270 <circle cx="9" cy="21" r="1.5"></circle>271 <circle cx="18" cy="21" r="1.5"></circle>272 <path d="M3 3h2l3 12h9l3-8H6"></path>273 </svg>274 </div>275 </div>276 277</div>278</body>279</html>