GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Ratings & Reviews - UI Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #222; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #FFFFFF; border-radius: 0; box-shadow: none;12 }13 /* Top status bar */14 .status-bar {15 height: 90px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 40px; font-size: 36px; color: #555;16 border-bottom: 1px solid #eee;17 }18 .status-icons { display: flex; gap: 32px; align-items: center; color: #777; }19 /* Header search */20 .header {21 padding: 28px 32px; display: flex; align-items: center; gap: 24px; background: #fff;22 }23 .icon-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }24 .search-box {25 flex: 1; background: #f1f3f4; border-radius: 20px; height: 96px; display: flex; align-items: center; padding: 0 28px; border: 1px solid #e5e5e5;26 box-shadow: inset 0 1px 0 rgba(0,0,0,0.03);27 }28 .search-placeholder { color: #777; font-size: 36px; flex: 1; }29 .cart-btn { width: 72px; height: 72px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }30 /* Horizontal suggestion cards */31 .suggestions { padding: 16px 24px 28px; display: flex; gap: 24px; overflow: hidden; }32 .card {33 width: 330px; border: 1px solid #e2e2e2; border-radius: 16px; padding: 18px; background: #fff;34 box-shadow: 0 1px 0 rgba(0,0,0,0.04);35 }36 .card-img {37 width: 100%; height: 160px; background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center; color: #757575; border-radius: 8px; margin-bottom: 12px;38 font-size: 28px;39 }40 .strike { text-decoration: line-through; color: #999; }41 .price-row { font-size: 34px; display: flex; gap: 14px; align-items: baseline; }42 .save { color: #1a9e1a; font-size: 28px; margin-top: 6px; }43 .green { color: #1a9e1a; }44 .rating-mini { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: #666; }45 .divider { height: 16px; background: #f6f1fb; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }46 /* Ratings & reviews header */47 .section-header {48 padding: 36px 32px; display: flex; align-items: center; justify-content: space-between;49 }50 .section-title { font-size: 48px; font-weight: 700; }51 .rate-btn { background: #fff; border: 1px solid #e0e0e0; box-shadow: 0 2px 0 rgba(0,0,0,0.06); border-radius: 14px; padding: 22px 28px; font-size: 34px; color: #1a73e8; }52 .overall-rating { padding: 0 32px 24px; display: flex; align-items: center; gap: 22px; color: #777; font-size: 34px; }53 /* Review item */54 .review { padding: 28px 32px; border-top: 1px solid #eee; }55 .review .title-row { display: flex; align-items: center; gap: 18px; font-size: 38px; }56 .review .review-for { color: #777; font-size: 30px; margin-top: 8px; }57 .review .content { font-size: 38px; line-height: 1.35; margin-top: 18px; }58 .review .author { color: #999; font-size: 34px; margin-top: 24px; }59 .review .actions { display: flex; gap: 20px; margin-top: 24px; align-items: center; }60 .chip {61 display: inline-flex; align-items: center; gap: 16px; border: 1px solid #d9d9d9; border-radius: 100px; padding: 18px 26px; color: #555; font-size: 32px; background: #fff;62 }63 .verified { display: flex; align-items: center; gap: 14px; color: #666; font-size: 30px; margin-top: 20px; }64 .more { position: absolute; right: 28px; top: 28px; }65 /* Subsection label */66 .subsection { padding: 28px 32px; color: #333; font-size: 40px; font-weight: 600; border-top: 1px solid #eee; }67 /* Bottom action bar */68 .bottom-bar {69 position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 24px 34px; background: #fff; box-shadow: 0 -2px 6px rgba(0,0,0,0.05);70 display: flex; gap: 22px; align-items: center;71 }72 .btn-outline {73 height: 120px; flex: 1; border: 1px solid #e0e0e0; border-radius: 16px; display: flex; align-items: center; justify-content: center; gap: 18px; font-size: 38px; background: #fff; color: #333;74 }75 .btn-primary {76 height: 120px; width: 360px; border-radius: 16px; background: #FFC107; color: #000; font-size: 40px; font-weight: 600; display: flex; align-items: center; justify-content: center;77 box-shadow: 0 2px 0 rgba(0,0,0,0.06);78 }79 /* Floating help icon */80 .floating {81 position: absolute; right: 36px; bottom: 180px; width: 120px; height: 120px; border-radius: 60px; background: #2158F5;82 box-shadow: 0 8px 18px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; border: 6px solid #F3F6FF;83 }84 .floating-inner {85 width: 84px; height: 84px; border-radius: 42px; background: #FFD54F; display: flex; align-items: center; justify-content: center; color: #0b41d1; font-weight: 800; font-size: 50px;86 }87 /* Bottom gesture pill */88 .gesture-pill {89 position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);90 width: 300px; height: 12px; background: #000; opacity: 0.3; border-radius: 10px;91 }92 93 /* Simple star icons */94 .stars { display: flex; gap: 8px; }95 .star-ico { width: 44px; height: 44px; }96 .star-ico.small { width: 32px; height: 32px; }97 .green-fill { fill: #1ab61a; }98</style>99</head>100<body>101<div id="render-target">102 103 <div class="status-bar">104 <div>11:47</div>105 <div class="status-icons">106 <span>G</span>107 <span>Q</span>108 <span>P</span>109 <span>T</span>110 <span>•</span>111 <span>▴</span>112 <span>🔊</span>113 <span>🔋</span>114 </div>115 </div>116 117 <div class="header">118 <div class="icon-btn">119 <svg width="48" height="48" viewBox="0 0 24 24"><path d="M15 19L8 12l7-7" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>120 </div>121 <div class="search-box">122 <svg width="44" height="44" viewBox="0 0 24 24" style="margin-right:14px"><circle cx="11" cy="11" r="7" stroke="#666" stroke-width="2" fill="none"/><path d="M20 20l-4.5-4.5" stroke="#666" stroke-width="2" stroke-linecap="round"/></svg>123 <div class="search-placeholder">Search for products</div>124 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M9 4v7a3 3 0 006 0V4" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/><path d="M12 20v-3" stroke="#777" stroke-width="2" stroke-linecap="round"/></svg>125 </div>126 <div class="cart-btn">127 <svg width="48" height="48" viewBox="0 0 24 24"><path d="M3 4h2l3 12h9l2-8H6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/><circle cx="9" cy="20" r="1.8" fill="#222"/><circle cx="17" cy="20" r="1.8" fill="#222"/></svg>128 </div>129 </div>130 131 <div class="suggestions">132 <div class="card">133 <div class="card-img">[IMG: Product Thumbnail]</div>134 <div class="price-row"><span class="strike">3,695</span><span>₹2,586</span></div>135 <div class="save">30% off <span style="color:#1a73e8">Plus</span></div>136 <div class="rating-mini">137 <div class="stars">138 <svg class="star-ico small" viewBox="0 0 24 24"><path class="green-fill" d="M12 2l3 6 7 .9-5 4.8 1.3 7.3-6.3-3.4-6.3 3.4L6 13.7 1 8.9l7-.9z"/></svg>139 <svg class="star-ico small" viewBox="0 0 24 24"><path class="green-fill" d="M12 2l3 6 7 .9-5 4.8 1.3 7.3-6.3-3.4-6.3 3.4L6 13.7 1 8.9l7-.9z"/></svg>140 <svg class="star-ico small" viewBox="0 0 24 24"><path class="green-fill" d="M12 2l3 6 7 .9-5 4.8 1.3 7.3-6.3-3.4-6.3 3.4L6 13.7 1 8.9l7-.9z"/></svg>141 <svg class="star-ico small" viewBox="0 0 24 24"><path class="green-fill" d="M12 2l3 6 7 .9-5 4.8 1.3 7.3-6.3-3.4-6.3 3.4L6 13.7 1 8.9l7-.9z"/></svg>142 <svg class="star-ico small" viewBox="0 0 24 24"><path class="green-fill" d="M12 2l3 6 7 .9-5 4.8 1.3 7.3-6.3-3.4-6.3 3.4L6 13.7 1 8.9l7-.9z"/></svg>143 </div>144 <span>(50)</span>145 </div>146 <div class="green" style="margin-top:8px">Big Saving Deal</div>147 </div>148 149 <div class="card">150 <div class="card-img">[IMG: Running Shoes]</div>151 <div class="price-row"><span class="strike">4,999</span><span>₹2,040</span></div>152 <div class="save">59% off <span style="color:#1a73e8">Plus</span></div>153 <div class="rating-mini">154 <div class="stars">155 <svg class="star-ico small" viewBox="0 0 24 24"><path class="green-fill" d="M12 2l3 6 7 .9-5 4.8 1.3 7.3-6.3-3.4-6.3 3.4L6 13.7 1 8.9l7-.9z"/></svg>156 <svg class="star-ico small" viewBox="0 0 24 24"><path class="green-fill" d="M12 2l3 6 7 .9-5 4.8 1.3 7.3-6.3-3.4-6.3 3.4L6 13.7 1 8.9l7-.9z"/></svg>157 <svg class="star-ico small" viewBox="0 0 24 24"><path class="green-fill" d="M12 2l3 6 7 .9-5 4.8 1.3 7.3-6.3-3.4-6.3 3.4L6 13.7 1 8.9l7-.9z"/></svg>158 <svg class="star-ico small" viewBox="0 0 24 24"><path class="green-fill" d="M12 2l3 6 7 .9-5 4.8 1.3 7.3-6.3-3.4-6.3 3.4L6 13.7 1 8.9l7-.9z"/></svg>159 <svg class="star-ico small" viewBox="0 0 24 24"><path class="green-fill" d="M12 2l3 6 7 .9-5 4.8 1.3 7.3-6.3-3.4-6.3 3.4L6 13.7 1 8.9l7-.9z"/></svg>160 </div>161 <span>(36)</span>162 </div>163 <div class="green" style="margin-top:8px">Big Saving Deal</div>164 </div>165 166 <div class="card">167 <div class="card-img">[IMG: Sports Shoe]</div>168 <div class="price-row"><span class="strike">3,695</span><span>₹2,886</span></div>169 <div class="save">22% off <span style="color:#1a73e8">Plus</span></div>170 <div class="rating-mini">171 <div class="stars">172 <svg class="star-ico small" viewBox="0 0 24 24"><path class="green-fill" d="M12 2l3 6 7 .9-5 4.8 1.3 7.3-6.3-3.4-6.3 3.4L6 13.7 1 8.9l7-.9z"/></svg>173 <svg class="star-ico small" viewBox="0 0 24 24"><path class="green-fill" d="M12 2l3 6 7 .9-5 4.8 1.3 7.3-6.3-3.4-6.3 3.4L6 13.7 1 8.9l7-.9z"/></svg>174 <svg class="star-ico small" viewBox="0 0 24 24"><path class="green-fill" d="M12 2l3 6 7 .9-5 4.8 1.3 7.3-6.3-3.4-6.3 3.4L6 13.7 1 8.9l7-.9z"/></svg>175 <svg class="star-ico small" viewBox="0 0 24 24"><path class="green-fill" d="M12 2l3 6 7 .9-5 4.8 1.3 7.3-6.3-3.4-6.3 3.4L6 13.7 1 8.9l7-.9z"/></svg>176 <svg class="star-ico small" viewBox="0 0 24 24"><path class="green-fill" d="M12 2l3 6 7 .9-5 4.8 1.3 7.3-6.3-3.4-6.3 3.4L6 13.7 1 8.9l7-.9z"/></svg>177 </div>178 <span>(27)</span>179 </div>180 <div class="green" style="margin-top:8px">Big Saving Deal</div>181 </div>182 </div>183 184 <div class="divider"></div>185 186 <div class="section-header">187 <div class="section-title">Ratings & Reviews</div>188 <div class="rate-btn">Rate Product</div>189 </div>190 191 <div class="overall-rating">192 <div class="stars">193 <svg class="star-ico" viewBox="0 0 24 24"><path class="green-fill" d="M12 2l3 6 7 .9-5 4.8 1.3 7.3-6.3-3.4-6.3 3.4L6 13.7 1 8.9l7-.9z"/></svg>194 <svg class="star-ico" viewBox="0 0 24 24"><path class="green-fill" d="M12 2l3 6 7 .9-5 4.8 1.3 7.3-6.3-3.4-6.3 3.4L6 13.7 1 8.9l7-.9z"/></svg>195 <svg class="star-ico" viewBox="0 0 24 24"><path class="green-fill" d="M12 2l3 6 7 .9-5 4.8 1.3 7.3-6.3-3.4-6.3 3.4L6 13.7 1 8.9l7-.9z"/></svg>196 <svg class="star-ico" viewBox="0 0 24 24"><path class="green-fill" d="M12 2l3 6 7 .9-5 4.8 1.3 7.3-6.3-3.4-6.3 3.4L6 13.7 1 8.9l7-.9z"/></svg>197 <svg class="star-ico" viewBox="0 0 24 24"><path class="green-fill" d="M12 2l3 6 7 .9-5 4.8 1.3 7.3-6.3-3.4-6.3 3.4L6 13.7 1 8.9l7-.9z"/></svg>198 </div>199 <div>49 ratings and 3 reviews</div>200 </div>201 202 <!-- Review 1 -->203 <div class="review" style="position: relative;">204 <div class="title-row">205 <div class="stars">206 <svg class="star-ico small" viewBox="0 0 24 24"><path class="green-fill" d="M12 2l3 6 7 .9-5 4.8 1.3 7.3-6.3-3.4-6.3 3.4L6 13.7 1 8.9l7-.9z"/></svg>207 <svg class="star-ico small" viewBox="0 0 24 24"><path class="green-fill" d="M12 2l3 6 7 .9-5 4.8 1.3 7.3-6.3-3.4-6.3 3.4L6 13.7 1 8.9l7-.9z"/></svg>208 <svg class="star-ico small" viewBox="0 0 24 24"><path class="green-fill" d="M12 2l3 6 7 .9-5 4.8 1.3 7.3-6.3-3.4-6.3 3.4L6 13.7 1 8.9l7-.9z"/></svg>209 <svg class="star-ico small" viewBox="0 0 24 24"><path class="green-fill" d="M12 2l3 6 7 .9-5 4.8 1.3 7.3-6.3-3.4-6.3 3.4L6 13.7 1 8.9l7-.9z"/></svg>210 <svg class="star-ico small" viewBox="0 0 24 24"><path class="green-fill" d="M12 2l3 6 7 .9-5 4.8 1.3 7.3-6.3-3.4-6.3 3.4L6 13.7 1 8.9l7-.9z"/></svg>211 </div>212 <div style="font-weight:700">Brilliant</div>213 </div>214 <div class="review-for">Review for: Size 6.5</div>215 <div class="content">Very good original Nike</div>216 <div class="author">Bimal Charles, Chennai</div>217 <div class="actions">218 <div class="chip">219 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M7 12h4l3-6 3 12h-9z" stroke="#6b6b6b" stroke-width="2" fill="none" stroke-linecap="round"/></svg>220 Helpful for 2221 </div>222 <div class="chip">223 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M21 15a7 7 0 10-14 0c0 3-3 4-3 4h17" stroke="#6b6b6b" stroke-width="2" fill="none" stroke-linecap="round"/></svg>224 </div>225 </div>226 <div class="verified">227 <svg width="28" height="28" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#000" opacity="0.8"/><path d="M7 12l3 3 7-7" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>228 Verified Purchase · 1 month ago229 </div>230 <div class="more">231 <svg width="40" height="40" viewBox="0 0 24 24"><circle cx="5" cy="12" r="1.8" fill="#777"/><circle cx="12" cy="12" r="1.8" fill="#777"/><circle cx="19" cy="12" r="1.8" fill="#777"/></svg>232 </div>233 </div>234 235 <!-- Review 2 -->236 <div class="review" style="position: relative;">237 <div class="title-row">238 <div class="stars">239 <svg class="star-ico small" viewBox="0 0 24 24"><path class="green-fill" d="M12 2l3 6 7 .9-5 4.8 1.3 7.3-6.3-3.4-6.3 3.4L6 13.7 1 8.9l7-.9z"/></svg>240 <svg class="star-ico small" viewBox="0 0 24 24"><path class="green-fill" d="M12 2l3 6 7 .9-5 4.8 1.3 7.3-6.3-3.4-6.3 3.4L6 13.7 1 8.9l7-.9z"/></svg>241 <svg class="star-ico small" viewBox="0 0 24 24"><path class="green-fill" d="M12 2l3 6 7 .9-5 4.8 1.3 7.3-6.3-3.4-6.3 3.4L6 13.7 1 8.9l7-.9z"/></svg>242 <svg class="star-ico small" viewBox="0 0 24 24"><path class="green-fill" d="M12 2l3 6 7 .9-5 4.8 1.3 7.3-6.3-3.4-6.3 3.4L6 13.7 1 8.9l7-.9z"/></svg>243 <svg class="star-ico small" viewBox="0 0 24 24"><path class="green-fill" d="M12 2l3 6 7 .9-5 4.8 1.3 7.3-6.3-3.4-6.3 3.4L6 13.7 1 8.9l7-.9z"/></svg>244 </div>245 <div style="font-weight:700">Best in the market!</div>246 </div>247 <div class="review-for">Review for: Size 6.5</div>248 <div class="content">Nice</div>249 <div class="author">Flipkart Cust..., Hyderabad</div>250 <div class="actions">251 <div class="chip">252 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M7 12h4l3-6 3 12h-9z" stroke="#6b6b6b" stroke-width="2" fill="none" stroke-linecap="round"/></svg>253 Helpful for 1254 </div>255 <div class="chip">256 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M21 15a7 7 0 10-14 0c0 3-3 4-3 4h17" stroke="#6b6b6b" stroke-width="2" fill="none" stroke-linecap="round"/></svg>257 </div>258 </div>259 <div class="verified">260 <svg width="28" height="28" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#000" opacity="0.8"/><path d="M7 12l3 3 7-7" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>261 Verified Purchase · 6 days ago262 </div>263 <div class="more">264 <svg width="40" height="40" viewBox="0 0 24 24"><circle cx="5" cy="12" r="1.8" fill="#777"/><circle cx="12" cy="12" r="1.8" fill="#777"/><circle cx="19" cy="12" r="1.8" fill="#777"/></svg>265 </div>266 </div>267 268 <div class="subsection">All 3 reviews</div>269 270 <div class="bottom-bar">271 <div class="btn-outline">272 <svg width="46" height="46" viewBox="0 0 24 24"><path d="M3 4h2l3 12h9l2-8H6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/><path d="M7 6h4M9 2v8" stroke="#333" stroke-width="2" stroke-linecap="round"/></svg>273 </div>274 <div class="btn-outline">Pay with EMI</div>275 <div class="btn-primary">Buy now</div>276 </div>277 278 <div class="floating">279 <div class="floating-inner">f</div>280 </div>281 282 <div class="gesture-pill"></div>283 284</div>285</body>286</html>