GD-ML/AndroidCode

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: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;16    color: #2b2b2b;17  }18 19  /* Status bar */20  .status-bar {21    height: 160px;22    background: #8B8B8B;23    color: #fff;24    display: flex;25    align-items: center;26    padding: 0 48px;27    font-weight: 600;28    font-size: 42px;29    justify-content: space-between;30  }31  .status-right {32    display: flex;33    align-items: center;34    gap: 28px;35    font-size: 36px;36  }37  .sb-icon {38    width: 40px; height: 40px;39  }40  .battery {41    display: flex; align-items: center; gap: 12px;42  }43  .battery svg { width: 46px; height: 46px; }44 45  /* App Bar */46  .app-bar {47    height: 170px;48    background: #EFEFEF;49    display: flex;50    align-items: center;51    padding: 0 36px;52    gap: 24px;53    border-bottom: 1px solid #E3E3E3;54  }55  .back-icon svg { width: 64px; height: 64px; }56  .app-title {57    font-size: 52px;58    font-weight: 700;59    color: #333;60  }61 62  /* Content area */63  .content {64    padding: 24px 52px 120px;65    overflow: hidden;66  }67 68  .review {69    padding: 30px 0;70  }71  .stars {72    display: flex;73    gap: 8px;74    margin-bottom: 10px;75  }76  .star svg { width: 46px; height: 46px; fill: #FFC107; }77 78  .user {79    font-size: 38px;80    font-weight: 600;81    margin: 6px 0 2px;82    color: #3a3a3a;83  }84  .meta {85    font-size: 28px;86    color: #8a8a8a;87    margin-bottom: 24px;88  }89 90  .review-title {91    font-size: 46px;92    font-weight: 700;93    margin: 12px 0 10px;94    color: #2f2f2f;95  }96  .review-text {97    font-size: 36px;98    line-height: 1.5;99    color: #444;100  }101  .divider {102    border-top: 2px dashed #D2D2D2;103    margin: 36px 0;104  }105 106  /* Bottom gesture bar */107  .bottom-bar {108    position: absolute;109    bottom: 24px;110    left: 50%;111    transform: translateX(-50%);112    width: 360px;113    height: 18px;114    background: #000;115    border-radius: 12px;116    opacity: 0.85;117  }118</style>119</head>120<body>121<div id="render-target">122  <!-- Status Bar -->123  <div class="status-bar">124    <div>9:14</div>125    <div class="status-right">126      <!-- simple circular icons -->127      <svg class="sb-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#ffffff88"/></svg>128      <svg class="sb-icon" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3" fill="#ffffff88"/></svg>129      <svg class="sb-icon" viewBox="0 0 24 24"><path d="M4 12h16" stroke="#fff" stroke-width="2"/></svg>130      <svg class="sb-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#fff"/></svg>131      <div class="battery">132        <svg viewBox="0 0 24 24">133          <rect x="2" y="6" width="18" height="12" rx="2" fill="#fff"/>134          <rect x="20" y="10" width="2" height="4" fill="#fff"/>135          <rect x="4" y="8" width="12" height="8" fill="#4CAF50"/>136        </svg>137        <span>84%</span>138      </div>139    </div>140  </div>141 142  <!-- App Bar -->143  <div class="app-bar">144    <div class="back-icon">145      <svg viewBox="0 0 24 24">146        <path d="M15 6L9 12l6 6" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>147      </svg>148    </div>149    <div class="app-title">Reviews & Ratings</div>150  </div>151 152  <!-- Content -->153  <div class="content">154    <!-- First review (no stars shown) -->155    <div class="review">156      <div class="user">User</div>157      <div class="meta">undefined NaN, NaN</div>158      <div class="review-title">Pinaka Hammer drill machine</div>159      <div class="review-text">160        Very Very nice product and quality and iam happy<br/>161        Very good moglix162      </div>163      <div class="divider"></div>164    </div>165 166    <!-- Review 2 -->167    <div class="review">168      <div class="stars">169        <div class="star"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>170        <div class="star"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>171        <div class="star"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>172        <div class="star"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>173        <div class="star"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>174      </div>175      <div class="user">S M Sreejith</div>176      <div class="meta">undefined NaN, NaN</div>177      <div class="review-title">Wireless Printing Heaven</div>178      <div class="review-text">179        The Wi Fi feature is fantastic. I can print from my phone or laptop effortlessly. Plus, the LCD display adds180        a modern touch to this printer181      </div>182      <div class="divider"></div>183    </div>184 185    <!-- Review 3 -->186    <div class="review">187      <div class="stars">188        <div class="star"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>189        <div class="star"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>190        <div class="star"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>191        <div class="star"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>192        <div class="star"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>193      </div>194      <div class="user">Nenavath Prabhu</div>195      <div class="meta">undefined NaN, NaN</div>196      <div class="review-title">Powerful and Reliable</div>197      <div class="review-text">198        This hammer drill is incredibly powerful. It effortlessly handled all my drilling tasks with ease. Definitely a199        reliable tool200      </div>201      <div class="divider"></div>202    </div>203 204    <!-- Review 4 -->205    <div class="review">206      <div class="stars">207        <div class="star"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>208        <div class="star"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>209        <div class="star"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>210        <div class="star"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>211        <div class="star"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>212      </div>213      <div class="user">Vibhalakshi</div>214      <div class="meta">undefined NaN, NaN</div>215      <div class="review-title">Highly recommended</div>216      <div class="review-text">217        I have never had an issue with this product, and i will continue to use it for years to come.218      </div>219      <div class="divider"></div>220    </div>221 222    <!-- Review 5 -->223    <div class="review">224      <div class="stars">225        <div class="star"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>226        <div class="star"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>227        <div class="star"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>228        <div class="star"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>229        <div class="star"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>230      </div>231      <div class="user">Sanjay Joshi</div>232      <div class="meta">undefined NaN, NaN</div>233      <div class="review-title">Powerful and Reliable Performance</div>234      <div class="review-text">235        Its exceptional quality ensures longlasting reliability, making it a valuable addition to my toolbox.236      </div>237    </div>238  </div>239 240  <!-- Bottom gesture bar -->241  <div class="bottom-bar"></div>242</div>243</body>244</html>