GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>All Reviews UI</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7 #render-target {8 width:1080px; height:2400px;9 position:relative; overflow:hidden;10 background:#ffffff; color:#222;11 }12 /* Top status bar */13 .status-bar {14 height:90px; padding:0 32px;15 display:flex; align-items:center; justify-content:space-between;16 font-weight:600; color:#000; font-size:34px;17 }18 .status-icons { display:flex; gap:24px; align-items:center; color:#666; font-size:30px; }19 /* App bar */20 .app-bar {21 height:110px; display:flex; align-items:center;22 padding:0 24px; border-bottom:1px solid #eee; gap:20px;23 }24 .back-btn {25 width:72px; height:72px; display:flex; align-items:center; justify-content:center;26 border-radius:36px;27 }28 .back-btn svg { width:42px; height:42px; fill:#000; }29 .title { font-size:54px; font-weight:700; color:#111; }30 /* Ratings block */31 .ratings {32 display:flex; gap:40px; padding:32px 28px; border-top:1px solid #f2f2f2;33 }34 .rating-left {35 width:400px; display:flex; flex-direction:column; gap:16px; align-items:flex-start;36 border-right:1px solid #eee; padding-right:24px;37 }38 .stars-row { display:flex; gap:6px; }39 .star { color:#24a148; font-size:48px; }40 .rating-count { font-size:34px; color:#666; }41 .rating-right { flex:1; display:flex; flex-direction:column; gap:22px; padding-top:6px; }42 .bar-row { display:flex; align-items:center; gap:18px; }43 .bar-label { width:80px; font-size:36px; color:#222; }44 .bar-track { flex:1; height:26px; background:#e9e9e9; border-radius:16px; position:relative; overflow:hidden; }45 .bar-fill { height:100%; background:#24a148; }46 .bar-val { width:120px; text-align:right; font-size:34px; color:#666; }47 /* Gallery */48 .gallery { display:flex; gap:22px; padding:20px 28px; }49 .thumb {50 width:300px; height:260px; background:#E0E0E0; border:1px solid #BDBDBD;51 display:flex; align-items:center; justify-content:center; color:#757575; font-size:28px;52 border-radius:12px; overflow:hidden;53 }54 /* Filters */55 .filters { display:flex; justify-content:space-between; align-items:center; padding:22px 28px; border-top:1px solid #eee; border-bottom:1px solid #eee; }56 .filter-left { display:flex; align-items:center; gap:16px; font-size:42px; font-weight:700; }57 .chev { width:34px; height:34px; }58 .verified { display:flex; align-items:center; gap:16px; font-size:40px; color:#222; }59 .checkbox {60 width:44px; height:44px; border:2px solid #777; border-radius:10px; display:flex; align-items:center; justify-content:center;61 }62 /* Review card */63 .review { padding:30px 28px; border-bottom:1px solid #f0f0f0; }64 .review-header { display:flex; align-items:center; gap:16px; }65 .review-stars .star { font-size:42px; }66 .review-title { font-size:44px; font-weight:700; }67 .review-meta { color:#666; font-size:34px; margin:18px 0; }68 .review-text { font-size:38px; line-height:1.5; color:#222; }69 .author-row { display:flex; align-items:center; gap:12px; margin-top:26px; color:#333; font-size:36px; }70 .chips { display:flex; gap:18px; margin-top:22px; }71 .chip {72 display:inline-flex; align-items:center; gap:12px; border:1px solid #ddd; padding:16px 22px; border-radius:40px;73 font-size:34px; color:#333; background:#fafafa;74 }75 .dot { width:16px; height:16px; background:#1a73e8; border-radius:50%; margin-right:10px; }76 .footer-row { display:flex; align-items:center; gap:16px; color:#666; font-size:32px; margin-top:18px; }77 .menu-dot { margin-left:auto; width:10px; height:10px; background:#999; border-radius:50%; box-shadow: 0 0 0 6px #999, 0 0 0 12px #999; }78 .review-image { width:300px; height:260px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; font-size:28px; border-radius:12px; margin-top:24px; }79</style>80</head>81<body>82<div id="render-target">83 84 <!-- Status bar -->85 <div class="status-bar">86 <div>10:54</div>87 <div class="status-icons">88 <span>S</span>89 <span>ib</span>90 <span>LR</span>91 <span>•</span>92 <span>🔊</span>93 <span>🔋</span>94 </div>95 </div>96 97 <!-- App bar -->98 <div class="app-bar">99 <div class="back-btn">100 <svg viewBox="0 0 24 24"><path d="M15.5 19.5L8 12l7.5-7.5-1.5-1.5L5 12l9 9 1.5-1.5z"/></svg>101 </div>102 <div class="title">All Reviews</div>103 </div>104 105 <!-- Ratings Summary -->106 <div class="ratings">107 <div class="rating-left">108 <div class="stars-row">109 <span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span>110 <span style="color:#24a148; font-size:46px; margin-left:8px;">★</span>111 </div>112 <div class="rating-count">3,057 ratings and 315 reviews</div>113 </div>114 <div class="rating-right">115 <div class="bar-row">116 <div class="bar-label">5★</div>117 <div class="bar-track"><div class="bar-fill" style="width:86%;"></div></div>118 <div class="bar-val">1,673</div>119 </div>120 <div class="bar-row">121 <div class="bar-label">4★</div>122 <div class="bar-track"><div class="bar-fill" style="width:52%;"></div></div>123 <div class="bar-val">854</div>124 </div>125 <div class="bar-row">126 <div class="bar-label">3★</div>127 <div class="bar-track"><div class="bar-fill" style="width:28%;"></div></div>128 <div class="bar-val">290</div>129 </div>130 <div class="bar-row">131 <div class="bar-label">2★</div>132 <div class="bar-track"><div class="bar-fill" style="width:10%;"></div></div>133 <div class="bar-val">75</div>134 </div>135 <div class="bar-row">136 <div class="bar-label">1★</div>137 <div class="bar-track"><div class="bar-fill" style="width:16%;"></div></div>138 <div class="bar-val">165</div>139 </div>140 </div>141 </div>142 143 <!-- Image gallery -->144 <div class="gallery">145 <div class="thumb">[IMG: Mouse Photo]</div>146 <div class="thumb">[IMG: Mouse on Desk]</div>147 <div class="thumb">[IMG: Close Mouse]</div>148 <div class="thumb">[IMG: Product Box]</div>149 </div>150 151 <!-- Filters -->152 <div class="filters">153 <div class="filter-left">154 <span>Most Helpful</span>155 <svg class="chev" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z" fill="#777"/></svg>156 </div>157 <div class="verified">158 <div class="checkbox"></div>159 <span>Verified Purchases</span>160 </div>161 </div>162 163 <!-- Review 1 -->164 <div class="review">165 <div class="review-header">166 <div class="review-stars">167 <span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span>168 </div>169 <div class="review-title">Just wow!</div>170 </div>171 <div class="review-meta">Review for: Color Black</div>172 <div class="review-text">173 Excellent mouse for this price. Felt its far better than HP Logitech Zebronics and Dell wireless mouse as i have used all of the above. Worthy buy. 👌🏼174 </div>175 <div class="author-row">176 <span>Gopi Naraya.., Chennai</span>177 </div>178 <div class="chips">179 <div class="chip">👍 Helpful for 27</div>180 <div class="chip">💬 8</div>181 </div>182 <div class="footer-row">183 <span class="dot"></span>184 <span>Verified Purchase · Jul, 2022</span>185 <div class="menu-dot"></div>186 </div>187 </div>188 189 <!-- Review 2 -->190 <div class="review">191 <div class="review-header">192 <div class="review-stars">193 <span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span>194 </div>195 <div class="review-title">Terrific</div>196 </div>197 <div class="review-meta">Review for: Color Black</div>198 <div class="review-text">199 Awesome quality product. Very light weight and dpi is working perfectly. Best product at this price. Range is also very good. Loved this200 </div>201 <div class="review-image">[IMG: Mouse Photo]</div>202 </div>203 204</div>205</body>206</html>