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>Ratings & Reviews UI</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#FFFFFF; border-radius:0; box-shadow:none;12 color:#212121;13 }14 .status-bar {15 height:120px; background:#E8E8E8; display:flex; align-items:center; padding:0 36px; box-sizing:border-box;16 font-weight:600; color:#333; font-size:44px;17 }18 .status-icons { margin-left:auto; display:flex; align-items:center; gap:28px; color:#555; font-size:38px; }19 .icon { width:44px; height:44px; }20 .battery { display:flex; align-items:center; gap:12px; font-weight:700; }21 /* banner placeholder */22 .promo {23 width:100%; height:260px; background:#E0E0E0; border:1px solid #BDBDBD;24 display:flex; align-items:center; justify-content:center; color:#757575; font-size:46px; font-weight:600;25 }26 .section {27 padding:40px 44px; box-sizing:border-box;28 }29 .row { display:flex; align-items:center; }30 .title {31 font-size:64px; font-weight:800; color:#212121;32 }33 .rate-btn {34 margin-left:auto; padding:26px 34px; border:1px solid #DDD; border-radius:16px; font-size:38px; color:#4F4F4F;35 box-shadow:0 2px 0 rgba(0,0,0,0.06); background:#fff;36 }37 38 .card {39 margin-top:36px; background:#fff; border:1px solid #eee; border-radius:14px;40 padding:30px; box-sizing:border-box;41 display:flex; gap:40px; align-items:flex-start;42 }43 .left-summary { width:48%; }44 .right-dist { flex:1; padding-left:40px; border-left:1px solid #E5E5E5; }45 .rating-word { font-size:52px; font-weight:800; color:#616161; margin-bottom:18px; }46 .stars { display:flex; align-items:center; gap:12px; margin:14px 0 16px; }47 .star svg { width:54px; height:54px; }48 .green { fill:#2E7D32; }49 .grey { fill:#BDBDBD; }50 .subtext { color:#757575; font-size:34px; }51 52 .dist-row { display:flex; align-items:center; margin:18px 0; font-size:38px; color:#333; }53 .dist-row .label { width:120px; }54 .bar {55 flex:1; height:26px; background:#E0E0E0; border-radius:14px; position:relative; margin:0 20px;56 }57 .bar .fill { position:absolute; left:0; top:0; bottom:0; background:#2E7D32; border-radius:14px; }58 .dist-row .count { width:80px; text-align:right; color:#606060; }59 60 .divider { height:1px; background:#eee; margin:36px 0; }61 62 .review { padding:40px 44px; box-sizing:border-box; border-top:1px solid #eee; }63 .review .header { display:flex; align-items:center; gap:20px; }64 .review .header .stars { gap:8px; }65 .review .title { font-size:52px; font-weight:800; color:#2c2c2c; }66 .review .text { font-size:40px; color:#333; margin:22px 0 26px; }67 .review .meta-row { display:flex; gap:26px; align-items:flex-start; }68 .review .photo {69 width:180px; height:180px; background:#E0E0E0; border:1px solid #BDBDBD;70 display:flex; align-items:center; justify-content:center; color:#757575; font-size:32px;71 }72 .review .meta { flex:1; }73 .review .name { font-size:40px; color:#616161; font-weight:700; }74 .review .time { font-size:34px; color:#9E9E9E; margin-top:6px; }75 .review .actions { margin-left:auto; display:flex; align-items:center; gap:30px; color:#7b7b7b; }76 .act { display:flex; align-items:center; gap:12px; font-size:38px; color:#757575; }77 .three-dots { width:12px; height:12px; border-radius:50%; background:#9E9E9E; box-shadow: 18px 0 0 #9E9E9E, 36px 0 0 #9E9E9E; margin-left:24px; }78 79 .bottom-bar {80 position:absolute; left:0; right:0; bottom:120px;81 display:flex; gap:30px; padding:30px 40px; box-sizing:border-box; background:#fff;82 border-top:1px solid #eee;83 }84 .btn {85 flex:1; height:120px; border-radius:18px; font-size:48px; font-weight:700; display:flex; align-items:center; justify-content:center;86 }87 .btn-outline { border:2px solid #D0D0D0; color:#3F3F3F; background:#fff; }88 .btn-primary { background:#5A45FF; color:#fff; }89 .nav-pill {90 position:absolute; left:50%; transform:translateX(-50%);91 bottom:36px; width:300px; height:16px; background:#DADADA; border-radius:12px;92 }93</style>94</head>95<body>96<div id="render-target">97 98 <!-- Status bar -->99 <div class="status-bar">100 <div>2:35</div>101 <div class="status-icons">102 <!-- simple minimized icon -->103 <svg class="icon" viewBox="0 0 24 24"><path fill="#666" d="M5 11h14v2H5z"/></svg>104 <!-- location/network icon -->105 <svg class="icon" viewBox="0 0 24 24"><path fill="#666" d="M12 2L3 9l9 13 9-13z"/></svg>106 <div class="battery">107 <svg class="icon" viewBox="0 0 28 18">108 <rect x="1" y="3" width="22" height="12" rx="2" ry="2" fill="#666"></rect>109 <rect x="23" y="6" width="3" height="6" rx="1" fill="#666"></rect>110 <rect x="3" y="5" width="16" height="8" rx="1" fill="#9CCC65"></rect>111 </svg>112 <span>98%</span>113 </div>114 </div>115 </div>116 117 <!-- Promo banner -->118 <div class="promo">[IMG: SuperCoin Promo Banner]</div>119 120 <!-- Ratings & Reviews section -->121 <div class="section">122 <div class="row">123 <div class="title">Ratings & Reviews</div>124 <div class="rate-btn">Rate Product</div>125 </div>126 127 <div class="card">128 <div class="left-summary">129 <div class="rating-word">Good</div>130 <div class="stars">131 <div class="star"><svg viewBox="0 0 24 24"><path class="green" d="M12 2l3 6 6 .7-4.5 4 1.4 6.3L12 16l-5.9 3 1.4-6.3L3 8.7l6-.7z"/></svg></div>132 <div class="star"><svg viewBox="0 0 24 24"><path class="green" d="M12 2l3 6 6 .7-4.5 4 1.4 6.3L12 16l-5.9 3 1.4-6.3L3 8.7l6-.7z"/></svg></div>133 <div class="star"><svg viewBox="0 0 24 24"><path class="green" d="M12 2l3 6 6 .7-4.5 4 1.4 6.3L12 16l-5.9 3 1.4-6.3L3 8.7l6-.7z"/></svg></div>134 <div class="star"><svg viewBox="0 0 24 24"><path class="green" d="M12 2l3 6 6 .7-4.5 4 1.4 6.3L12 16l-5.9 3 1.4-6.3L3 8.7l6-.7z"/></svg></div>135 <div class="star"><svg viewBox="0 0 24 24"><path class="grey" d="M12 2l3 6 6 .7-4.5 4 1.4 6.3L12 16l-5.9 3 1.4-6.3L3 8.7l6-.7z"/></svg></div>136 </div>137 <div class="subtext">170 ratings and 24 reviews</div>138 </div>139 140 <div class="right-dist">141 <div class="dist-row">142 <div class="label">5 ★</div>143 <div class="bar"><div class="fill" style="width:88%;"></div></div>144 <div class="count">89</div>145 </div>146 <div class="dist-row">147 <div class="label">4 ★</div>148 <div class="bar"><div class="fill" style="width:45%;"></div></div>149 <div class="count">38</div>150 </div>151 <div class="dist-row">152 <div class="label">3 ★</div>153 <div class="bar"><div class="fill" style="width:18%;"></div></div>154 <div class="count">9</div>155 </div>156 <div class="dist-row">157 <div class="label">2 ★</div>158 <div class="bar"><div class="fill" style="width:28%;"></div></div>159 <div class="count">15</div>160 </div>161 <div class="dist-row">162 <div class="label">1 ★</div>163 <div class="bar"><div class="fill" style="width:32%;"></div></div>164 <div class="count">19</div>165 </div>166 </div>167 </div>168 </div>169 170 <!-- Review 1 -->171 <div class="review">172 <div class="header">173 <div class="stars">174 <svg viewBox="0 0 24 24" class="star"><path class="green" d="M12 2l3 6 6 .7-4.5 4 1.4 6.3L12 16l-5.9 3 1.4-6.3L3 8.7l6-.7z"/></svg>175 <svg viewBox="0 0 24 24" class="star"><path class="green" d="M12 2l3 6 6 .7-4.5 4 1.4 6.3L12 16l-5.9 3 1.4-6.3L3 8.7l6-.7z"/></svg>176 <svg viewBox="0 0 24 24" class="star"><path class="green" d="M12 2l3 6 6 .7-4.5 4 1.4 6.3L12 16l-5.9 3 1.4-6.3L3 8.7l6-.7z"/></svg>177 <svg viewBox="0 0 24 24" class="star"><path class="green" d="M12 2l3 6 6 .7-4.5 4 1.4 6.3L12 16l-5.9 3 1.4-6.3L3 8.7l6-.7z"/></svg>178 <svg viewBox="0 0 24 24" class="star"><path class="green" d="M12 2l3 6 6 .7-4.5 4 1.4 6.3L12 16l-5.9 3 1.4-6.3L3 8.7l6-.7z"/></svg>179 </div>180 <div class="title">Brilliant</div>181 </div>182 <div class="text">always good product 👍</div>183 <div class="meta-row">184 <div class="photo">[IMG: Reviewer Photo]</div>185 <div class="meta">186 <div class="name">Amit Kashyap , Gonda</div>187 <div class="time">3 months ago</div>188 </div>189 <div class="actions">190 <div class="act">191 <svg viewBox="0 0 24 24" class="icon"><path fill="#8e8e8e" d="M2 21h4V9H2v12zm20-11c0-1.1-.9-2-2-2h-6l1-4V3l-5 6v10h9c1.1 0 2-.9 2-2v-6z"/></svg>192 <span>69</span>193 </div>194 <div class="act">195 <svg viewBox="0 0 24 24" class="icon"><path fill="#8e8e8e" d="M2 3h4v12H2V3zm20 11c0 1.1-.9 2-2 2h-6l1 4v1l-5-6V5h9c1.1 0 2 .9 2 2v7z"/></svg>196 <span>14</span>197 </div>198 <div class="three-dots"></div>199 </div>200 </div>201 </div>202 203 <!-- Review 2 -->204 <div class="review">205 <div class="header">206 <div class="stars">207 <svg viewBox="0 0 24 24" class="star"><path class="green" d="M12 2l3 6 6 .7-4.5 4 1.4 6.3L12 16l-5.9 3 1.4-6.3L3 8.7l6-.7z"/></svg>208 <svg viewBox="0 0 24 24" class="star"><path class="green" d="M12 2l3 6 6 .7-4.5 4 1.4 6.3L12 16l-5.9 3 1.4-6.3L3 8.7l6-.7z"/></svg>209 <svg viewBox="0 0 24 24" class="star"><path class="green" d="M12 2l3 6 6 .7-4.5 4 1.4 6.3L12 16l-5.9 3 1.4-6.3L3 8.7l6-.7z"/></svg>210 <svg viewBox="0 0 24 24" class="star"><path class="green" d="M12 2l3 6 6 .7-4.5 4 1.4 6.3L12 16l-5.9 3 1.4-6.3L3 8.7l6-.7z"/></svg>211 <svg viewBox="0 0 24 24" class="star"><path class="green" d="M12 2l3 6 6 .7-4.5 4 1.4 6.3L12 16l-5.9 3 1.4-6.3L3 8.7l6-.7z"/></svg>212 </div>213 <div class="title">Just wow!</div>214 </div>215 <div class="text">Veara level</div>216 <div class="meta-row">217 <div class="photo">[IMG: Reviewer Photo]</div>218 <div class="meta">219 <div class="name">karthikeyan M..., Salem District</div>220 <div class="time">4 months ago</div>221 </div>222 <div class="actions">223 <div class="act">224 <svg viewBox="0 0 24 24" class="icon"><path fill="#8e8e8e" d="M2 21h4V9H2v12zm20-11c0-1.1-.9-2-2-2h-6l1-4V3l-5 6v10h9c1.1 0 2-.9 2-2v-6z"/></svg>225 <span>16</span>226 </div>227 <div class="act">228 <svg viewBox="0 0 24 24" class="icon"><path fill="#8e8e8e" d="M2 3h4v12H2V3zm20 11c0 1.1-.9 2-2 2h-6l1 4v1l-5-6V5h9c1.1 0 2 .9 2 2v7z"/></svg>229 <span>4</span>230 </div>231 <div class="three-dots"></div>232 </div>233 </div>234 </div>235 236 <!-- Review 3 -->237 <div class="review">238 <div class="header">239 <div class="stars">240 <svg viewBox="0 0 24 24" class="star"><path class="green" d="M12 2l3 6 6 .7-4.5 4 1.4 6.3L12 16l-5.9 3 1.4-6.3L3 8.7l6-.7z"/></svg>241 <svg viewBox="0 0 24 24" class="star"><path class="green" d="M12 2l3 6 6 .7-4.5 4 1.4 6.3L12 16l-5.9 3 1.4-6.3L3 8.7l6-.7z"/></svg>242 <svg viewBox="0 0 24 24" class="star"><path class="green" d="M12 2l3 6 6 .7-4.5 4 1.4 6.3L12 16l-5.9 3 1.4-6.3L3 8.7l6-.7z"/></svg>243 <svg viewBox="0 0 24 24" class="star"><path class="green" d="M12 2l3 6 6 .7-4.5 4 1.4 6.3L12 16l-5.9 3 1.4-6.3L3 8.7l6-.7z"/></svg>244 <svg viewBox="0 0 24 24" class="star"><path class="grey" d="M12 2l3 6 6 .7-4.5 4 1.4 6.3L12 16l-5.9 3 1.4-6.3L3 8.7l6-.7z"/></svg>245 </div>246 <div class="title">Delightful</div>247 </div>248 <div class="text">Good product</div>249 <div class="meta-row">250 <div class="photo">[IMG: Reviewer Photo]</div>251 <div class="meta">252 <div class="name">yunus Khan, Rajgarh District</div>253 <div class="time">3 months ago</div>254 </div>255 <div class="actions">256 <div class="act">257 <svg viewBox="0 0 24 24" class="icon"><path fill="#8e8e8e" d="M2 21h4V9H2v12zm20-11c0-1.1-.9-2-2-2h-6l1-4V3l-5 6v10h9c1.1 0 2-.9 2-2v-6z"/></svg>258 <span>15</span>259 </div>260 <div class="act">261 <svg viewBox="0 0 24 24" class="icon"><path fill="#8e8e8e" d="M2 3h4v12H2V3zm20 11c0 1.1-.9 2-2 2h-6l1 4v1l-5-6V5h9c1.1 0 2 .9 2 2v7z"/></svg>262 <span>4</span>263 </div>264 <div class="three-dots"></div>265 </div>266 </div>267 </div>268 269 <!-- Bottom action bar -->270 <div class="bottom-bar">271 <div class="btn btn-outline">Add to cart</div>272 <div class="btn btn-primary">Buy Now</div>273 </div>274 275 <!-- Android navigation pill -->276 <div class="nav-pill"></div>277 278</div>279</body>280</html>