GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>All Reviews UI</title>6<style>7 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#ffffff; color:#111;11 }12 /* Status bar */13 .status-bar {14 height:88px; padding:0 32px; display:flex; align-items:center; justify-content:space-between;15 color:#111; font-size:34px;16 }17 .status-icons { display:flex; align-items:center; gap:28px; color:#555; }18 .dot { width:10px; height:10px; background:#777; border-radius:50%; display:inline-block; }19 /* App bar */20 .app-bar {21 height:120px; display:flex; align-items:center; gap:24px; padding:0 24px; border-bottom:1px solid #eaeaea;22 }23 .back-btn {24 width:88px; height:88px; display:flex; align-items:center; justify-content:center;25 }26 .app-title { font-size:52px; font-weight:700; }27 /* Chips */28 .chip-row { padding:24px; display:flex; gap:24px; flex-wrap:nowrap; overflow:hidden; }29 .chip {30 padding:22px 32px; border:2px solid #e0e0e0; border-radius:40px; font-size:36px; color:#333; background:#fff;31 }32 .chip.selected { border-color:#2f80ed; color:#2f80ed; background:#eef5ff; }33 /* Ratings summary */34 .ratings-wrap { display:flex; padding:16px 24px 8px; }35 .left-rating { width:46%; border-right:1px solid #f0f0f0; padding:12px 24px 12px 8px; }36 .stars-lg { display:flex; gap:6px; margin:8px 0 6px; }37 .star svg { width:40px; height:40px; }38 .star.green path{ fill:#2e7d32; }39 .left-rating .count { font-size:38px; color:#4a4a4a; margin-top:18px; }40 .right-bars { width:54%; padding:8px 24px; }41 .bar-row { display:flex; align-items:center; gap:16px; margin:18px 0; }42 .bar-row .label { width:42px; font-size:34px; color:#444; }43 .bar { flex:1; height:22px; background:#ececec; border-radius:12px; overflow:hidden; position:relative; }44 .bar .fill { height:100%; background:#2e7d32; }45 .bar-row .qty { width:70px; text-align:right; color:#666; font-size:34px; }46 /* Sort & toggle */47 .controls { display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-top:1px solid #f0f0f0; border-bottom:1px solid #f0f0f0; background:#fff; }48 .dropdown { display:flex; align-items:center; gap:12px; font-size:38px; }49 .checkbox { display:flex; align-items:center; gap:16px; font-size:36px; color:#222; }50 .checkbox input { width:40px; height:40px; }51 /* Review card */52 .review { padding:28px 24px; border-bottom:1px solid #f0f0f0; position:relative; }53 .review .title-row { display:flex; align-items:center; gap:18px; }54 .stars-sm { display:flex; gap:6px; }55 .stars-sm .star svg{ width:34px; height:34px; }56 .review .title { font-size:44px; font-weight:700; color:#111; }57 .subtle { color:#666; font-size:34px; margin:12px 0 18px; }58 .review p { font-size:36px; line-height:1.36; color:#222; margin:0 0 18px; }59 .more { color:#2f80ed; }60 .meta-row { display:flex; align-items:center; justify-content:space-between; margin-top:12px; }61 .user { color:#444; font-size:36px; }62 .kebab { width:60px; height:60px; display:flex; align-items:center; justify-content:center; }63 .actions { display:flex; align-items:center; gap:22px; margin-top:18px; flex-wrap:wrap; }64 .pill {65 display:flex; align-items:center; gap:12px; padding:16px 22px; border:2px solid #e0e0e0; border-radius:40px; font-size:34px; color:#333; background:#fff;66 }67 .verified { color:#2c7a7b; font-size:32px; }68 .time { color:#777; font-size:32px; }69 .dot-sep { width:10px; height:10px; background:#4a4a4a; border-radius:50%; display:inline-block; margin:0 12px; }70 .footer-spacer { height:180px; }71 /* Simple icons */72 .icon { display:inline-flex; }73</style>74</head>75<body>76<div id="render-target">77 78 <!-- Status Bar -->79 <div class="status-bar">80 <div class="time">7:26</div>81 <div class="status-icons">82 <span class="icon" title="notifications">83 <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#555" d="M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2Zm6-6V11a6 6 0 0 0-12 0v5L4 18v2h16v-2l-2-2Z"/></svg>84 </span>85 <span class="icon" title="wifi">86 <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#555" d="M12 20l4-4H8l4 4Zm-8-8 1.4 1.4A9 9 0 0 1 20.6 13L22 11.6A11 11 0 0 0 4 12Zm4-4 1.4 1.4a6 6 0 0 1 9.2 0L20 8a8 8 0 0 0-12 0Z"/></svg>87 </span>88 <span class="icon" title="battery">89 <svg width="52" height="44" viewBox="0 0 28 16"><rect x="1" y="3" width="22" height="10" rx="2" fill="#555"></rect><rect x="3" y="5" width="16" height="6" fill="#9ee37d"></rect><rect x="23" y="6" width="3" height="4" rx="1" fill="#555"></rect></svg>90 </span>91 </div>92 </div>93 94 <!-- App Bar -->95 <div class="app-bar">96 <div class="back-btn">97 <svg width="48" height="48" viewBox="0 0 24 24"><path d="M15.5 19 8.5 12l7-7" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>98 </div>99 <div class="app-title">All Reviews</div>100 </div>101 102 <!-- Filter Chips -->103 <div class="chip-row">104 <div class="chip selected">Overall</div>105 <div class="chip">Easy to assemble</div>106 <div class="chip">Sturdiness</div>107 <div class="chip">Products</div>108 </div>109 110 <!-- Ratings Summary -->111 <div class="ratings-wrap">112 <div class="left-rating">113 <div class="stars-lg">114 <span class="star green">115 <svg viewBox="0 0 24 24"><path d="M12 2 9 9H2l6 4-2 7 6-4 6 4-2-7 6-4h-7z"/></svg>116 </span>117 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2 9 9H2l6 4-2 7 6-4 6 4-2-7 6-4h-7z"/></svg></span>118 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2 9 9H2l6 4-2 7 6-4 6 4-2-7 6-4h-7z"/></svg></span>119 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2 9 9H2l6 4-2 7 6-4 6 4-2-7 6-4h-7z"/></svg></span>120 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2 9 9H2l6 4-2 7 6-4 6 4-2-7 6-4h-7z"/></svg></span>121 </div>122 <div class="count">73 ratings and 11 reviews</div>123 </div>124 <div class="right-bars">125 <div class="bar-row">126 <div class="label">5★</div>127 <div class="bar"><div class="fill" style="width:100%"></div></div>128 <div class="qty">42</div>129 </div>130 <div class="bar-row">131 <div class="label">4★</div>132 <div class="bar"><div class="fill" style="width:43%"></div></div>133 <div class="qty">18</div>134 </div>135 <div class="bar-row">136 <div class="label">3★</div>137 <div class="bar"><div class="fill" style="width:12%"></div></div>138 <div class="qty">5</div>139 </div>140 <div class="bar-row">141 <div class="label">2★</div>142 <div class="bar"><div class="fill" style="width:2%"></div></div>143 <div class="qty">1</div>144 </div>145 <div class="bar-row">146 <div class="label">1★</div>147 <div class="bar"><div class="fill" style="width:17%"></div></div>148 <div class="qty">7</div>149 </div>150 </div>151 </div>152 153 <!-- Controls -->154 <div class="controls">155 <div class="dropdown">Most Helpful156 <svg width="36" height="36" viewBox="0 0 24 24" style="margin-left:10px;"><path d="M7 10l5 5 5-5" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/></svg>157 </div>158 <label class="checkbox">159 <input type="checkbox" checked />160 <span>Verified Purchases</span>161 </label>162 </div>163 164 <!-- Review 1 -->165 <div class="review">166 <div class="title-row">167 <div class="stars-sm">168 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2 9 9H2l6 4-2 7 6-4 6 4-2-7 6-4h-7z"/></svg></span>169 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2 9 9H2l6 4-2 7 6-4 6 4-2-7 6-4h-7z"/></svg></span>170 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2 9 9H2l6 4-2 7 6-4 6 4-2-7 6-4h-7z"/></svg></span>171 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2 9 9H2l6 4-2 7 6-4 6 4-2-7 6-4h-7z"/></svg></span>172 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2 9 9H2l6 4-2 7 6-4 6 4-2-7 6-4h-7z"/></svg></span>173 </div>174 <div class="title">Best in the market!</div>175 </div>176 <div class="subtle">Review for: Color Black</div>177 <p>This sit to stand table is outstanding. Quality of the product is superb. All the installations materials of this product are of high quality. This is must to have ergonomic table who work for longer <span class="more">... more</span></p>178 <div class="user">Santosh Sin..., Pune</div>179 <div class="actions">180 <div class="pill">181 <svg class="icon" width="28" height="28" viewBox="0 0 24 24"><path fill="#666" d="M2 21h4V9H2v12Zm20-11a2 2 0 0 0-2-2h-6l1-4-1-1-5 6v10h9l4-9Z"/></svg>182 Helpful for 3183 </div>184 <div class="pill">185 <svg width="28" height="28" viewBox="0 0 24 24"><path fill="#666" d="M21 6H3v12h6l3 3 3-3h6z"/></svg>186 0187 </div>188 <span class="verified">• Verified Purchase</span>189 <span class="time">· 2 months ago</span>190 </div>191 <div class="kebab" style="position:absolute; right:18px; top:28px;">192 <svg width="26" height="26" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#777"></circle><circle cx="12" cy="12" r="2" fill="#777"></circle><circle cx="12" cy="19" r="2" fill="#777"></circle></svg>193 </div>194 </div>195 196 <!-- Review 2 -->197 <div class="review">198 <div class="title-row">199 <div class="stars-sm">200 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2 9 9H2l6 4-2 7 6-4 6 4-2-7 6-4h-7z"/></svg></span>201 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2 9 9H2l6 4-2 7 6-4 6 4-2-7 6-4h-7z"/></svg></span>202 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2 9 9H2l6 4-2 7 6-4 6 4-2-7 6-4h-7z"/></svg></span>203 <span class="star green"><svg viewBox="0 0 24 24"><path d="M12 2 9 9H2l6 4-2 7 6-4 6 4-2-7 6-4h-7z"/></svg></span>204 <span class="star green" style="opacity:0.3;"><svg viewBox="0 0 24 24"><path d="M12 2 9 9H2l6 4-2 7 6-4 6 4-2-7 6-4h-7z"/></svg></span>205 </div>206 <div class="title">Wonderful</div>207 </div>208 <div class="subtle">Review for: Color Black</div>209 <p>All over a good product, it’s a single motor elevation. Two boards made of engineering wood with black tape, all over finishing is not perfect. Single star less due to boards are not perfect. One littl<span class="more">... more</span></p>210 <div class="user">SANGEET M..., Patiala</div>211 <div class="actions">212 <div class="pill">213 <svg class="icon" width="28" height="28" viewBox="0 0 24 24"><path fill="#666" d="M2 21h4V9H2v12Zm20-11a2 2 0 0 0-2-2h-6l1-4-1-1-5 6v10h9l4-9Z"/></svg>214 Helpful for 9215 </div>216 <div class="pill">217 <svg width="28" height="28" viewBox="0 0 24 24"><path fill="#666" d="M21 6H3v12h6l3 3 3-3h6z"/></svg>218 9219 </div>220 <span class="verified">• Verified Purchase</span>221 <span class="time">· Apr, 2022</span>222 </div>223 <div class="kebab" style="position:absolute; right:18px; top:28px;">224 <svg width="26" height="26" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#777"></circle><circle cx="12" cy="12" r="2" fill="#777"></circle><circle cx="12" cy="19" r="2" fill="#777"></circle></svg>225 </div>226 </div>227 228 <div class="footer-spacer"></div>229</div>230</body>231</html>