GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Product Ratings UI</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body{ margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif;}8 #render-target{9 position:relative; overflow:hidden;10 width:1080px; height:2400px;11 background:#ffffff; color:#222;12 }13 14 /* Top status + appbar */15 .statusbar{16 height:90px; padding:0 28px;17 display:flex; align-items:center; justify-content:space-between;18 color:#111;19 }20 .status-left{font-weight:700; font-size:40px;}21 .status-right{display:flex; gap:22px; align-items:center;}22 .dot{width:16px; height:16px; background:#111; border-radius:50%;}23 .appbar{24 height:110px; display:flex; align-items:center; justify-content:space-between;25 padding:0 28px; border-bottom:1px solid #eee;26 }27 .icon-btn{width:68px; height:68px; display:flex; align-items:center; justify-content:center; border-radius:34px;}28 .icons-right{display:flex; gap:24px;}29 svg{display:block}30 31 .content{position:absolute; left:0; right:0; top:200px; bottom:180px; overflow:auto; padding:0 28px 24px 28px;}32 33 .hint{34 font-size:34px; color:#666; line-height:48px; margin:20px 6px 30px;35 }36 37 .section-title{38 font-weight:700; font-size:44px; margin:26px 6px 18px; color:#222;39 }40 41 .card{42 border:1px solid #e5e5e5; border-radius:18px; padding:30px; background:#fff;43 box-shadow:0 2px 0 rgba(0,0,0,0.02);44 }45 46 /* Ratings box */47 .ratings-box{display:flex; gap:40px;}48 .big-rating{49 width:300px; border-right:1px solid #eee; text-align:center;50 }51 .big-rating .score{font-size:120px; font-weight:800; display:flex; align-items:center; justify-content:center; gap:18px;}52 .star{53 width:42px; height:42px; background:#1fa74f; color:#fff; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; font-weight:800;54 }55 .subtext{color:#777; font-size:34px; margin-top:8px;}56 .bars{flex:1; padding-top:6px;}57 .row{display:flex; align-items:center; gap:18px; margin:16px 0;}58 .label{width:40px; text-align:right; font-size:34px; color:#444;}59 .bar{60 height:14px; background:#eee; border-radius:8px; overflow:hidden; flex:1;61 }62 .bar > span{display:block; height:100%; background:#3bb54a;}63 64 /* Review */65 .review{margin-top:28px;}66 .review-head{display:flex; align-items:center; justify-content:space-between;}67 .user{display:flex; align-items:center; gap:18px;}68 .avatar{69 width:56px; height:56px; background:#e0e0e0; border:1px solid #bdbdbd; border-radius:50%;70 display:flex; align-items:center; justify-content:center; font-size:26px; color:#777;71 }72 .name{font-size:36px; font-weight:700;}73 .verified{color:#27ae60; font-size:30px; margin-left:10px;}74 .date{color:#777; font-size:32px;}75 .chips{display:flex; flex-wrap:wrap; gap:18px; margin-top:18px;}76 .chip{77 border:1px solid #e6e6e6; border-radius:14px; padding:12px 18px; font-size:32px; color:#333; display:flex; align-items:center; gap:14px;78 }79 .pip{width:14px; height:32px; background:#2ea24b; border-radius:6px;}80 .review-title{display:flex; align-items:center; gap:12px; margin:18px 0 8px;}81 .green-star{82 width:40px; height:40px; background:#1fa74f; border-radius:8px; display:flex; align-items:center; justify-content:center;83 }84 .review-title span{font-size:38px; font-weight:700;}85 .review-text{font-size:36px; color:#444; margin:8px 0 8px 0;}86 87 /* Feedback banner */88 .feedback{89 margin-top:32px; border-top:1px solid #f0f0f0; padding-top:34px;90 }91 .feedback .panel{92 border:1px dashed #ff6f8c; border-radius:16px; padding:26px; display:flex; align-items:center; justify-content:space-between;93 }94 .feedback .left{display:flex; align-items:center; gap:26px;}95 .thumb{width:50px; height:50px; border-radius:10px; background:#f5f5f5; display:flex; align-items:center; justify-content:center;}96 .feedback h3{margin:0; font-size:44px;}97 .feedback p{margin:6px 0 0; color:#666; font-size:34px;}98 .link{color:#ff3f6c; font-weight:700; font-size:38px;}99 100 /* Brand section */101 .brand-row{102 display:flex; align-items:center; justify-content:space-between; margin:34px 6px 18px;103 }104 .brand-row .brand{font-weight:800; font-size:44px;}105 .follow-btn{106 background:#ff4d73; color:#fff; border:none; padding:22px 44px; border-radius:20px; font-size:38px;107 }108 .cta-outline{109 border:1px solid #cfcfcf; background:#fff; color:#333; border-radius:18px; padding:22px 34px; font-size:38px;110 }111 112 .product-scroll{display:flex; gap:26px; margin-top:16px; overflow:hidden;}113 .prod{114 width:310px; height:310px; border:1px solid #bdbdbd; background:#e0e0e0; color:#777;115 display:flex; align-items:center; justify-content:center; border-radius:12px;116 }117 118 /* Bottom sticky bar */119 .bottom-bar{120 position:absolute; left:0; right:0; bottom:0;121 height:180px; background:#fff; border-top:1px solid #eee;122 display:flex; align-items:center; gap:24px; padding:26px;123 }124 .circle{125 width:120px; height:120px; border:1px solid #ddd; border-radius:26px;126 display:flex; align-items:center; justify-content:center; background:#fff;127 }128 .btn{129 flex:1; height:120px; border-radius:26px; font-size:46px; font-weight:700; border:2px solid #ff4d73;130 display:flex; align-items:center; justify-content:center;131 }132 .btn.primary{133 background:#ff4d73; color:#fff; border:none;134 }135 .btn.light{136 background:#fff; color:#ff4d73;137 }138</style>139</head>140<body>141<div id="render-target">142 143 <!-- Status bar -->144 <div class="statusbar">145 <div class="status-left">4:12</div>146 <div class="status-right">147 <div class="dot"></div>148 <div class="dot" style="border-radius:4px; width:18px;"></div>149 <div class="dot" style="width:18px; height:18px;"></div>150 <div style="font-weight:700;">95%</div>151 </div>152 </div>153 154 <!-- App Bar -->155 <div class="appbar">156 <div class="icon-btn" aria-label="Back">157 <svg width="46" height="46" viewBox="0 0 24 24"><path d="M15.5 3.5 7 12l8.5 8.5" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>158 </div>159 <div class="icons-right">160 <div class="icon-btn" aria-label="Search">161 <svg width="40" height="40" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" fill="none" stroke="#111" stroke-width="2"/><path d="M20 20l-3.5-3.5" stroke="#111" stroke-width="2" stroke-linecap="round"/></svg>162 </div>163 <div class="icon-btn" aria-label="Wishlist">164 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 21s-7-4.6-9-8.2C1.3 9 2.8 6.5 5.3 6c1.6-.3 3.2.4 4.2 1.7 1-1.3 2.6-2 4.2-1.7 2.5.5 4 3 2.3 6.8C19 16.4 12 21 12 21z" fill="none" stroke="#111" stroke-width="2" stroke-linejoin="round"/></svg>165 </div>166 <div class="icon-btn" aria-label="Bag">167 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M6 8h12l-1 12H7L6 8z" fill="none" stroke="#111" stroke-width="2"/><path d="M9 8V6a3 3 0 0 1 6 0v2" fill="none" stroke="#111" stroke-width="2"/></svg>168 </div>169 </div>170 </div>171 172 <div class="content">173 <div class="hint">An order, once placed, can be cancelled until the seller processes it.</div>174 175 <div class="section-title">RATINGS AND REVIEWS</div>176 <div class="card">177 <div class="ratings-box">178 <div class="big-rating">179 <div class="score">5 <div class="star">★</div></div>180 <div class="subtext">1 Rating & 1 Review</div>181 </div>182 <div class="bars">183 <div class="row">184 <div class="label">5★</div>185 <div class="bar"><span style="width:92%"></span></div>186 <div style="width:50px; text-align:center; color:#666; font-size:30px;">1</div>187 </div>188 <div class="row">189 <div class="label">4★</div>190 <div class="bar"><span style="width:4%; background:#eaeaea"></span></div>191 <div style="width:50px; text-align:center; color:#666; font-size:30px;">0</div>192 </div>193 <div class="row">194 <div class="label">3★</div>195 <div class="bar"><span style="width:4%; background:#eaeaea"></span></div>196 <div style="width:50px; text-align:center; color:#666; font-size:30px;">0</div>197 </div>198 <div class="row">199 <div class="label">2★</div>200 <div class="bar"><span style="width:4%; background:#eaeaea"></span></div>201 <div style="width:50px; text-align:center; color:#666; font-size:30px;">0</div>202 </div>203 <div class="row">204 <div class="label">1★</div>205 <div class="bar"><span style="width:4%; background:#eaeaea"></span></div>206 <div style="width:50px; text-align:center; color:#666; font-size:30px;">0</div>207 </div>208 </div>209 </div>210 211 <div class="review">212 <div class="review-head">213 <div class="user">214 <div class="avatar">A</div>215 <div class="name">Arman <span class="verified">• Verified Buyer</span></div>216 </div>217 <div class="date">23rd Apr 2022</div>218 </div>219 220 <div class="review-title">221 <div class="green-star">222 <svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.2-5.4-2.9-5.4 2.9 1-6.2-4.4-4.3 6.1-.9L12 3z" fill="#fff"/></svg>223 </div>224 <span>Build Qwality zyada sahi nahin hai..</span>225 </div>226 <div class="review-text">build Qwality zyada sahi nahin hai..</div>227 228 <div class="chips">229 <div class="chip"><span class="pip"></span>5/5 Easy to Install</div>230 <div class="chip"><span class="pip"></span>4/5 User Friendly</div>231 <div class="chip"><span class="pip"></span>5/5 App Control</div>232 <div class="chip"><span class="pip"></span>4/5 Connectivity</div>233 <div class="chip"><span class="pip"></span>3/5 Delivery</div>234 </div>235 </div>236 </div>237 238 <div class="feedback">239 <div class="panel">240 <div class="left">241 <div class="thumb">242 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M9 21V8l6-5v13l-2 5H9z" fill="#ff4d73"/></svg>243 </div>244 <div>245 <h3>We'd love to hear from you!</h3>246 <p>This will just take 2 min of your time</p>247 </div>248 </div>249 <div class="link">Give Feedback ›</div>250 </div>251 </div>252 253 <div class="brand-row">254 <div class="brand">More From iBELL</div>255 <button class="follow-btn">+ Follow</button>256 </div>257 258 <div style="display:flex; justify-content:flex-end; margin:6px;">259 <button class="cta-outline">View All Products</button>260 </div>261 262 <div class="product-scroll">263 <div class="prod">[IMG: iBELL Cordless Drill]</div>264 <div class="prod">[IMG: iBELL Hammer Drill]</div>265 <div class="prod">[IMG: Product Thumbnail]</div>266 </div>267 268 <div style="height:220px"></div>269 </div>270 271 <!-- Bottom bar -->272 <div class="bottom-bar">273 <div class="circle">274 <svg width="46" height="46" viewBox="0 0 24 24"><path d="M12 21s-7-4.6-9-8.2C1.3 9 2.8 6.5 5.3 6c1.6-.3 3.2.4 4.2 1.7 1-1.3 2.6-2 4.2-1.7 2.5.5 4 3 2.3 6.8C19 16.4 12 21 12 21z" fill="none" stroke="#111" stroke-width="2" stroke-linejoin="round"/></svg>275 </div>276 <div class="btn light">Buy Now</div>277 <div class="btn primary">Add to Bag</div>278 </div>279 280</div>281</body>282</html>