GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Reviews & Ratings</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #FFFFFF;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16 color: #333;17 }18 19 /* Status bar */20 .status-bar {21 height: 150px;22 background: #8f8f8f;23 color: #fff;24 display: flex;25 align-items: center;26 padding: 0 36px;27 font-weight: 600;28 font-size: 42px;29 letter-spacing: 0.5px;30 }31 .status-icons {32 margin-left: auto;33 display: flex;34 align-items: center;35 gap: 26px;36 }37 .status-dot {38 width: 18px; height: 18px; background: #dcdcdc; border-radius: 50%;39 opacity: 0.9;40 }41 .battery {42 width: 56px; height: 28px; border: 3px solid #fff; border-radius: 6px; position: relative;43 }44 .battery::after {45 content: ""; position: absolute; right: -10px; top: 7px; width: 6px; height: 14px; background: #fff; border-radius: 2px;46 }47 .battery-level {48 position: absolute; left: 3px; top: 3px; height: 20px; width: 40px; background: #fff; border-radius: 3px;49 }50 51 /* App bar */52 .app-bar {53 height: 150px;54 background: #ffffff;55 display: flex;56 align-items: center;57 padding: 0 40px;58 box-shadow: 0 1px 0 rgba(0,0,0,0.08);59 }60 .app-title {61 font-size: 48px;62 font-weight: 700;63 color: #333;64 margin-left: 20px;65 }66 67 /* Content */68 .content {69 padding: 40px;70 }71 .product-title {72 font-size: 44px;73 color: #333;74 margin: 20px 0 40px 0;75 font-weight: 600;76 }77 78 .rating-summary {79 display: flex;80 gap: 60px;81 align-items: center;82 margin-bottom: 40px;83 }84 .avg-box {85 width: 360px;86 display: flex;87 flex-direction: column;88 align-items: center;89 gap: 20px;90 }91 .avg-text {92 text-align: center;93 color: #9e9e9e;94 font-size: 34px;95 line-height: 1.25;96 }97 .bars {98 flex: 1;99 max-width: 560px;100 }101 .rating-row {102 display: flex;103 align-items: center;104 gap: 20px;105 margin: 16px 0;106 }107 .rating-label {108 width: 36px;109 text-align: right;110 font-size: 34px;111 color: #555;112 }113 .bar {114 flex: 1;115 height: 30px;116 background: #e6e6e6;117 border-radius: 18px;118 overflow: hidden;119 }120 .bar-fill {121 height: 100%;122 background: #2e7d32; /* green */123 border-radius: 18px;124 }125 .bar-fill.light {126 background: #66bb6a;127 }128 129 .cta {130 margin: 30px 0 20px;131 background: #d32f2f;132 color: #fff;133 text-align: center;134 font-weight: 800;135 font-size: 44px;136 height: 120px;137 line-height: 120px;138 border-radius: 28px;139 letter-spacing: 1px;140 }141 142 .divider {143 border-top: 2px dashed #d0d0d0;144 margin: 36px 0;145 }146 147 .review {148 margin-bottom: 24px;149 }150 .stars {151 display: flex;152 gap: 8px;153 margin-bottom: 10px;154 }155 .review-name {156 font-size: 40px;157 font-weight: 600;158 color: #333;159 margin-top: 8px;160 }161 .review-meta {162 font-size: 32px;163 color: #9e9e9e;164 margin-bottom: 20px;165 }166 .review-title {167 font-size: 40px;168 font-weight: 800;169 margin: 10px 0 10px 0;170 color: #333;171 }172 .review-text {173 font-size: 36px;174 line-height: 1.5;175 color: #555;176 }177 178 /* Bottom navigation area */179 .bottom-area {180 position: absolute;181 left: 0;182 right: 0;183 bottom: 0;184 height: 180px;185 background: #101010;186 display: flex;187 align-items: center;188 justify-content: center;189 }190 .home-pill {191 width: 300px;192 height: 18px;193 background: #cfcfcf;194 border-radius: 9px;195 opacity: 0.8;196 }197 198 /* Icon helpers */199 .icon { display: inline-block; }200</style>201</head>202<body>203<div id="render-target">204 205 <!-- Status Bar -->206 <div class="status-bar">207 9:14208 <div class="status-icons">209 <div class="status-dot"></div>210 <div class="status-dot"></div>211 <div class="status-dot"></div>212 <div class="status-dot"></div>213 <div class="status-dot"></div>214 <div class="battery"><div class="battery-level"></div></div>215 </div>216 </div>217 218 <!-- Header -->219 <div class="app-bar">220 <svg class="icon" width="64" height="64" viewBox="0 0 48 48">221 <path d="M30 8 L14 24 L30 40" fill="none" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>222 </svg>223 <div class="app-title">Reviews & Ratings</div>224 </div>225 226 <!-- Content -->227 <div class="content">228 <div class="product-title">Pinaka Mod.Pi-226 1600W 26mm Hammer Drill</div>229 230 <div class="rating-summary">231 <div class="avg-box">232 <svg width="120" height="120" viewBox="0 0 50 50">233 <polygon points="25,3 31,18 47,18 34,28 39,44 25,35 11,44 16,28 3,18 19,18" fill="#2e7d32"></polygon>234 </svg>235 <div class="avg-text">Average Rating based on ratings and 7 reviews</div>236 </div>237 238 <div class="bars">239 <div class="rating-row">240 <div class="rating-label">5</div>241 <div class="bar"><div class="bar-fill" style="width:70%"></div></div>242 </div>243 <div class="rating-row">244 <div class="rating-label">4</div>245 <div class="bar"><div class="bar-fill light" style="width:18%"></div></div>246 </div>247 <div class="rating-row">248 <div class="rating-label">3</div>249 <div class="bar"><div class="bar-fill" style="width:0%"></div></div>250 </div>251 <div class="rating-row">252 <div class="rating-label">2</div>253 <div class="bar"><div class="bar-fill" style="width:0%"></div></div>254 </div>255 <div class="rating-row">256 <div class="rating-label">1</div>257 <div class="bar"><div class="bar-fill" style="width:0%"></div></div>258 </div>259 </div>260 </div>261 262 <div class="cta">WRITE A REVIEW</div>263 264 <div class="divider"></div>265 266 <!-- Review 1 -->267 <div class="review">268 <div class="stars">269 <svg width="40" height="40" viewBox="0 0 50 50"><polygon points="25,3 31,18 47,18 34,28 39,44 25,35 11,44 16,28 3,18 19,18" fill="#F5A623"></polygon></svg>270 <svg width="40" height="40" viewBox="0 0 50 50"><polygon points="25,3 31,18 47,18 34,28 39,44 25,35 11,44 16,28 3,18 19,18" fill="#F5A623"></polygon></svg>271 <svg width="40" height="40" viewBox="0 0 50 50"><polygon points="25,3 31,18 47,18 34,28 39,44 25,35 11,44 16,28 3,18 19,18" fill="#F5A623"></polygon></svg>272 <svg width="40" height="40" viewBox="0 0 50 50"><polygon points="25,3 31,18 47,18 34,28 39,44 25,35 11,44 16,28 3,18 19,18" fill="#F5A623"></polygon></svg>273 <svg width="40" height="40" viewBox="0 0 50 50"><polygon points="25,3 31,18 47,18 34,28 39,44 25,35 11,44 16,28 3,18 19,18" fill="#F5A623"></polygon></svg>274 </div>275 <div class="review-name">Ishmita</div>276 <div class="review-meta">undefined NaN, NaN</div>277 <div class="review-title">Strong grip</div>278 <div class="review-text">Good for general purposes.</div>279 </div>280 281 <div class="divider"></div>282 283 <!-- Review 2 -->284 <div class="review">285 <div class="stars">286 <svg width="40" height="40" viewBox="0 0 50 50"><polygon points="25,3 31,18 47,18 34,28 39,44 25,35 11,44 16,28 3,18 19,18" fill="#F5A623"></polygon></svg>287 <svg width="40" height="40" viewBox="0 0 50 50"><polygon points="25,3 31,18 47,18 34,28 39,44 25,35 11,44 16,28 3,18 19,18" fill="#F5A623"></polygon></svg>288 <svg width="40" height="40" viewBox="0 0 50 50"><polygon points="25,3 31,18 47,18 34,28 39,44 25,35 11,44 16,28 3,18 19,18" fill="#F5A623"></polygon></svg>289 <svg width="40" height="40" viewBox="0 0 50 50"><polygon points="25,3 31,18 47,18 34,28 39,44 25,35 11,44 16,28 3,18 19,18" fill="#F5A623"></polygon></svg>290 <svg width="40" height="40" viewBox="0 0 50 50"><polygon points="25,3 31,18 47,18 34,28 39,44 25,35 11,44 16,28 3,18 19,18" fill="#F5A623"></polygon></svg>291 </div>292 <div class="review-name">Chundi Harshavardhan Reddy</div>293 <div class="review-meta">undefined NaN, NaN</div>294 <div class="review-title">Solid Build Quality</div>295 <div class="review-text">This drill feels robust and well built. I can tell it is going to last a long time, even with frequent use on construction sites.</div>296 </div>297 298 <div class="divider"></div>299 300 <!-- Review 3 -->301 <div class="review">302 <div class="stars">303 <svg width="40" height="40" viewBox="0 0 50 50"><polygon points="25,3 31,18 47,18 34,28 39,44 25,35 11,44 16,28 3,18 19,18" fill="#F5A623"></polygon></svg>304 <svg width="40" height="40" viewBox="0 0 50 50"><polygon points="25,3 31,18 47,18 34,28 39,44 25,35 11,44 16,28 3,18 19,18" fill="#F5A623"></polygon></svg>305 <svg width="40" height="40" viewBox="0 0 50 50"><polygon points="25,3 31,18 47,18 34,28 39,44 25,35 11,44 16,28 3,18 19,18" fill="#F5A623"></polygon></svg>306 <svg width="40" height="40" viewBox="0 0 50 50"><polygon points="25,3 31,18 47,18 34,28 39,44 25,35 11,44 16,28 3,18 19,18" fill="#F5A623"></polygon></svg>307 <svg width="40" height="40" viewBox="0 0 50 50"><polygon points="25,3 31,18 47,18 34,28 39,44 25,35 11,44 16,28 3,18 19,18" fill="#F5A623"></polygon></svg>308 </div>309 <div class="review-name">User</div>310 <div class="review-meta">undefined NaN, NaN</div>311 <div class="review-title">Pinaka Hammer drill machine</div>312 <div class="review-text">Very Very nice product and quality and iam happy<br>Very good moglix</div>313 </div>314 315 <div class="divider"></div>316 317 <!-- Review 4 -->318 <div class="review">319 <div class="stars">320 <svg width="40" height="40" viewBox="0 0 50 50"><polygon points="25,3 31,18 47,18 34,28 39,44 25,35 11,44 16,28 3,18 19,18" fill="#F5A623"></polygon></svg>321 <svg width="40" height="40" viewBox="0 0 50 50"><polygon points="25,3 31,18 47,18 34,28 39,44 25,35 11,44 16,28 3,18 19,18" fill="#F5A623"></polygon></svg>322 <svg width="40" height="40" viewBox="0 0 50 50"><polygon points="25,3 31,18 47,18 34,28 39,44 25,35 11,44 16,28 3,18 19,18" fill="#F5A623"></polygon></svg>323 <svg width="40" height="40" viewBox="0 0 50 50"><polygon points="25,3 31,18 47,18 34,28 39,44 25,35 11,44 16,28 3,18 19,18" fill="#F5A623"></polygon></svg>324 <svg width="40" height="40" viewBox="0 0 50 50"><polygon points="25,3 31,18 47,18 34,28 39,44 25,35 11,44 16,28 3,18 19,18" fill="#F5A623"></polygon></svg>325 </div>326 <div class="review-name">S M Sreejith</div>327 <div class="review-meta">undefined NaN, NaN</div>328 </div>329 330 </div>331 332 <!-- Bottom area -->333 <div class="bottom-area">334 <div class="home-pill"></div>335 </div>336 337</div>338</body>339</html>