GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>UI Render - Reviews & Ratings</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1440px; height: 3120px; position: relative; overflow: hidden;10 background: #FFFFFF; border-radius: 24px; box-shadow: 0 6px 24px rgba(0,0,0,0.08);11 color: #222;12 }13 .safe-area { width: 100%; padding: 24px 60px 0 60px; box-sizing: border-box; }14 /* Status bar (top) */15 .status-bar { height: 96px; display: flex; align-items: center; justify-content: space-between; color: #555; font-size: 40px; }16 .status-left { letter-spacing: 1px; }17 .status-right { display: flex; gap: 24px; align-items: center; }18 .status-dot { width: 10px; height: 10px; background:#999; border-radius: 50%; display:inline-block; }19 /* Action bar */20 .action-bar { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }21 .circle-btn { width: 120px; height: 120px; border-radius: 60px; background: #F7F7F7; border: 1px solid #E6E6E6; display: flex; align-items: center; justify-content: center; }22 .right-actions { display: flex; gap: 24px; }23 .icon svg { width: 56px; height: 56px; }24 /* Tabs */25 .tabs { margin-top: 28px; background: #F3F4F6; border-radius: 28px; display: flex; padding: 12px; gap: 12px; }26 .tab { flex: 1; text-align: center; padding: 28px 0; font-size: 48px; color: #666; border-radius: 20px; }27 .tab.active { background: #FFFFFF; color: #111; box-shadow: 0 2px 0 rgba(0,0,0,0.08) inset; }28 /* Section heading */29 .section-title { font-size: 72px; font-weight: 700; margin: 56px 0 28px 0; }30 /* Rating card */31 .card { border: 1px solid #E6E6E6; border-radius: 28px; padding: 54px; box-sizing: border-box; background: #fff; }32 .rating-card { display: flex; gap: 40px; }33 .rating-left { width: 42%; border-right: 1px solid #EAEAEA; padding-right: 40px; }34 .rating-number { font-size: 140px; font-weight: 700; line-height: 1; }35 .rating-outof { font-size: 60px; color: #666; }36 .rating-meta { margin-top: 28px; font-size: 44px; color: #333; }37 .rating-right { flex: 1; padding-left: 20px; }38 .star-row { display: grid; grid-template-columns: 80px 1fr 120px; align-items: center; gap: 16px; margin: 20px 0; font-size: 44px; color: #666; }39 .progress { height: 24px; background: #EDEDED; border-radius: 12px; overflow: hidden; }40 .bar { height: 100%; border-radius: 12px; }41 .bar.green { background: #64C35C; }42 .bar.green2 { background: #86C97E; }43 .bar.lime { background: #B6D663; }44 .bar.yellow { background: #F5C84A; }45 .bar.red { background: #F36B7A; }46 /* Sort & Filter strip */47 .strip { margin-top: 40px; background: #F6F6F6; border-radius: 24px; border: 1px solid #ECECEC; display: grid; grid-template-columns: 1fr 1fr; }48 .strip > div { padding: 36px 40px; display: flex; align-items: center; gap: 24px; }49 .strip .divider { border-left: 1px solid #E8E8E8; }50 .strip-title { font-size: 52px; font-weight: 700; color: #444; }51 .strip-sub { font-size: 40px; color: #9AA0A6; margin-top: 8px; }52 /* Image placeholder */53 .img-ph { width: 100%; height: 790px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 28px;54 display: flex; justify-content: center; align-items: center; color: #757575; font-size: 48px; }55 /* Subsection titles */56 .subheading { margin: 40px 0 24px 0; font-size: 48px; font-weight: 800; letter-spacing: 1px; color: #333; }57 /* Review snippet */58 .review { font-size: 44px; color: #444; line-height: 1.4; }59 .muted { color: #777; }60 /* Product card */61 .product-card { position: absolute; left: 60px; right: 60px; bottom: 360px; background: #fff; border-top: 1px solid #EEEEEE; box-shadow: 0 4px 16px rgba(0,0,0,0.06); border-radius: 18px; padding: 28px; display: flex; align-items: center; gap: 28px; }62 .thumb { width: 180px; height: 180px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 16px; display:flex; align-items:center; justify-content:center; color:#757575; font-size: 32px; }63 .product-info { flex: 1; }64 .product-title { font-size: 44px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }65 .price-row { margin-top: 12px; display: flex; align-items: baseline; gap: 20px; }66 .price { font-size: 64px; font-weight: 800; color: #111; }67 .mrp { font-size: 44px; color: #999; text-decoration: line-through; }68 .offer { font-size: 44px; color: #FF9F1C; font-weight: 700; }69 /* Bottom Buy Bar */70 .buy-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 220px; background: #fff; border-top: 1px solid #EEE; display: flex; align-items: center; justify-content: space-between; padding: 0 60px; box-sizing: border-box; }71 .buy-button { background: #FF2D55; color: #fff; font-size: 60px; font-weight: 800; border-radius: 20px; padding: 38px 380px; }72 .mini-cart { width: 120px; height: 120px; border-radius: 60px; background: #F7F7F7; border: 1px solid #E6E6E6; display:flex; align-items:center; justify-content:center; }73 /* Utility icons */74 .icon-stroke { stroke: #444; stroke-width: 2.2; fill: none; }75 .icon-muted { stroke: #8A8A8A; }76 .star { width: 40px; height: 40px; vertical-align: middle; }77</style>78</head>79<body>80<div id="render-target">81 <div class="safe-area">82 <!-- Status Bar -->83 <div class="status-bar">84 <div class="status-left">2:28</div>85 <div class="status-right">86 <span>◔</span><span>◑</span><span>◒</span><span>◓</span><span class="status-dot"></span>87 <span>📶</span><span>🔋</span>88 </div>89 </div>90 91 <!-- Action Bar -->92 <div class="action-bar">93 <div class="circle-btn icon">94 <svg viewBox="0 0 24 24">95 <path class="icon-stroke" d="M15 6L9 12l6 6"></path>96 </svg>97 </div>98 <div class="right-actions">99 <div class="circle-btn icon">100 <svg viewBox="0 0 24 24">101 <circle class="icon-stroke" cx="11" cy="11" r="7"></circle>102 <path class="icon-stroke" d="M21 21l-4.5-4.5"></path>103 </svg>104 </div>105 <div class="circle-btn icon">106 <svg viewBox="0 0 24 24">107 <path class="icon-stroke" d="M3 12l9-9 9 9"></path>108 <path class="icon-stroke" d="M6 9v12h12V9"></path>109 </svg>110 </div>111 <div class="circle-btn icon">112 <svg viewBox="0 0 24 24">113 <path class="icon-stroke" d="M3 6h2l2 12h10l2-10H6"></path>114 <circle class="icon-stroke" cx="9" cy="20" r="1.7"></circle>115 <circle class="icon-stroke" cx="17" cy="20" r="1.7"></circle>116 </svg>117 </div>118 </div>119 </div>120 121 <!-- Tabs -->122 <div class="tabs">123 <div class="tab">Details</div>124 <div class="tab">More Like This</div>125 <div class="tab active">Reviews</div>126 </div>127 128 <!-- Reviews & Ratings -->129 <div class="section-title">Reviews & Ratings</div>130 <div class="card rating-card">131 <div class="rating-left">132 <div>133 <span class="rating-number">3.6</span><span class="rating-outof">/5</span>134 </div>135 <div class="rating-meta">23 Reviews | 103 Ratings</div>136 </div>137 <div class="rating-right">138 <!-- 5 Star -->139 <div class="star-row">140 <div>5141 <svg class="star" viewBox="0 0 24 24">142 <path d="M12 3l3 6 6 .8-4.5 4 1.2 6.2L12 17l-5.7 3 1.2-6.2L3 9.8 9 9z" fill="#C5C5C5"></path>143 </svg>144 </div>145 <div class="progress"><div class="bar green" style="width: 72%;"></div></div>146 <div style="text-align:right;">50</div>147 </div>148 <!-- 4 Star -->149 <div class="star-row">150 <div>4151 <svg class="star" viewBox="0 0 24 24">152 <path d="M12 3l3 6 6 .8-4.5 4 1.2 6.2L12 17l-5.7 3 1.2-6.2L3 9.8 9 9z" fill="#C5C5C5"></path>153 </svg>154 </div>155 <div class="progress"><div class="bar green2" style="width: 36%;"></div></div>156 <div style="text-align:right;">15</div>157 </div>158 <!-- 3 Star -->159 <div class="star-row">160 <div>3161 <svg class="star" viewBox="0 0 24 24">162 <path d="M12 3l3 6 6 .8-4.5 4 1.2 6.2L12 17l-5.7 3 1.2-6.2L3 9.8 9 9z" fill="#C5C5C5"></path>163 </svg>164 </div>165 <div class="progress"><div class="bar lime" style="width: 22%;"></div></div>166 <div style="text-align:right;">8</div>167 </div>168 <!-- 2 Star -->169 <div class="star-row">170 <div>2171 <svg class="star" viewBox="0 0 24 24">172 <path d="M12 3l3 6 6 .8-4.5 4 1.2 6.2L12 17l-5.7 3 1.2-6.2L3 9.8 9 9z" fill="#C5C5C5"></path>173 </svg>174 </div>175 <div class="progress"><div class="bar yellow" style="width: 16%;"></div></div>176 <div style="text-align:right;">6</div>177 </div>178 <!-- 1 Star -->179 <div class="star-row">180 <div>1181 <svg class="star" viewBox="0 0 24 24">182 <path d="M12 3l3 6 6 .8-4.5 4 1.2 6.2L12 17l-5.7 3 1.2-6.2L3 9.8 9 9z" fill="#C5C5C5"></path>183 </svg>184 </div>185 <div class="progress"><div class="bar red" style="width: 64%;"></div></div>186 <div style="text-align:right;">24</div>187 </div>188 </div>189 </div>190 191 <!-- Sort & Filter -->192 <div class="strip">193 <div>194 <svg viewBox="0 0 24 24" class="icon-muted" width="60" height="60">195 <path class="icon-stroke icon-muted" d="M7 4v14M4 7l3-3 3 3M17 20V6M14 17l3 3 3-3"></path>196 </svg>197 <div>198 <div class="strip-title">Sort</div>199 <div class="strip-sub">Most Helpful</div>200 </div>201 </div>202 <div class="divider">203 <svg viewBox="0 0 24 24" class="icon-muted" width="60" height="60">204 <path class="icon-stroke icon-muted" d="M4 7h16M9 7a2 2 0 110 0M4 12h16M15 12a2 2 0 110 0M4 17h16M7 17a2 2 0 110 0"></path>205 </svg>206 <div>207 <div class="strip-title">Filter</div>208 <div class="strip-sub">All Stars</div>209 </div>210 </div>211 </div>212 213 <!-- Customer Photos -->214 <div class="subheading">CUSTOMER PHOTOS (1)</div>215 <div class="img-ph">[IMG: Tool kit case photo]</div>216 217 <!-- Customer Reviews -->218 <div class="subheading">CUSTOMER REVIEWS (23)</div>219 <div class="card">220 <div class="review">221 Good product — solid build quality and useful accessories.<br>222 <span class="muted">Reviewed by: Customer • 2 weeks ago</span>223 </div>224 </div>225 </div>226 227 <!-- Product summary card near bottom -->228 <div class="product-card">229 <div class="thumb">[IMG: Tool kit]</div>230 <div class="product-info">231 <div class="product-title">Shopper52 - DRLTOOLSET-nw6 650W 13mm Corded Drill Toolkit...</div>232 <div class="price-row">233 <div class="price">₹3145</div>234 <div class="mrp">₹4999</div>235 <div class="offer">37% OFF</div>236 </div>237 </div>238 </div>239 240 <!-- Bottom Buy Bar -->241 <div class="buy-bar">242 <div class="mini-cart icon">243 <svg viewBox="0 0 24 24">244 <path class="icon-stroke" d="M3 6h2l2 12h10l2-10H6"></path>245 <circle class="icon-stroke" cx="9" cy="20" r="1.6"></circle>246 <circle class="icon-stroke" cx="17" cy="20" r="1.6"></circle>247 </svg>248 </div>249 <div class="buy-button">Buy Now</div>250 </div>251</div>252</body>253</html>