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 UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #333; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #ffffff; border-radius: 28px; box-shadow: 0 8px 30px rgba(0,0,0,0.12);12 }13 /* Status bar */14 .system-bar {15 height: 120px; background: #9FA0A4; color: #fff; display: flex; align-items: center;16 padding: 0 40px; font-weight: 600; font-size: 40px; letter-spacing: 0.2px;17 }18 .sys-left { flex: 0 0 auto; }19 .sys-center { flex: 1; display: flex; gap: 28px; justify-content: center; align-items: center; opacity: 0.9; font-size: 34px; }20 .sys-right { flex: 0 0 auto; display: flex; align-items: center; gap: 18px; font-size: 34px; }21 .battery { width: 46px; height: 22px; border: 3px solid #fff; border-radius: 6px; position: relative; }22 .battery::after { content: ""; position: absolute; right: -10px; top: 5px; width: 8px; height: 12px; background: #fff; border-radius: 2px; }23 .battery .level { background: #fff; width: 70%; height: 100%; }24 /* Header */25 .app-header {26 height: 160px; display: grid; grid-template-columns: 100px 120px 1fr 100px 100px; align-items: center;27 padding: 0 32px; gap: 24px; background: #fff;28 }29 .icon-btn { width: 92px; height: 92px; display: flex; justify-content: center; align-items: center; }30 .logo {31 width: 100px; height: 100px; background: #E54A4A; border-radius: 20px; color: #fff; font-weight: 800; font-size: 56px;32 display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 8px rgba(0,0,0,0.15);33 }34 .search-box {35 height: 100px; background: #fff; border: 2px solid #D9D9DE; border-radius: 50px;36 display: flex; align-items: center; padding: 0 28px; gap: 22px; box-shadow: 0 3px 8px rgba(0,0,0,0.08) inset;37 }38 .search-box .placeholder { color: #7A7A7A; font-size: 36px; }39 .chip-outline {40 background: #F6E6E8; color: #C03A3A; border-radius: 18px; font-weight: 700; padding: 22px 30px; font-size: 32px;41 }42 /* Content */43 .content { padding: 20px 40px 220px; }44 .title-row { display: flex; justify-content: space-between; align-items: center; }45 .page-title { font-size: 56px; font-weight: 800; letter-spacing: 0.3px; }46 .subtitle { font-size: 34px; color: #60656B; margin-top: 22px; }47 .ratings-wrap { display: grid; grid-template-columns: 420px 1fr; gap: 40px; margin-top: 28px; }48 .big-score { font-size: 120px; font-weight: 800; color: #21A31C; display: flex; align-items: center; gap: 22px; }49 .small-note { color: #8A8F96; font-size: 34px; margin-top: 22px; line-height: 1.3; }50 .dist-row { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 20px; margin: 18px 0; font-size: 40px; color: #3A3A3A; }51 .bar { height: 30px; background: #E9E9EB; border-radius: 18px; overflow: hidden; }52 .fill { height: 100%; background: #2FA74B; border-radius: 18px; }53 .divider { border-top: 2px dashed #DADDE0; margin: 26px 0; }54 .review { padding: 26px 0; }55 .stars { display: flex; gap: 10px; margin-bottom: 16px; }56 .review .name { font-size: 42px; font-weight: 700; }57 .review .date { color: #8C8F95; font-size: 30px; margin: 6px 0 22px; }58 .review .headline { font-size: 44px; font-weight: 800; margin-bottom: 10px; }59 .review .text { font-size: 38px; color: #454B52; line-height: 1.4; }60 .link-row { display: flex; align-items: center; gap: 14px; color: #1F6FD1; font-weight: 800; font-size: 36px; margin: 22px 0 30px; }61 /* FAQ section */62 .faq-header { display: flex; justify-content: space-between; align-items: center; background: #F4F5F8; border-radius: 16px; padding: 30px 26px; margin-top: 26px; }63 .faq-title { font-size: 48px; font-weight: 800; }64 .faq-sub { font-size: 32px; color: #7D8087; padding: 20px 8px; }65 .question { font-size: 40px; font-weight: 800; color: #333; padding: 24px 8px; }66 /* Bottom CTA */67 .cta-bar {68 position: absolute; left: 0; right: 0; bottom: 0; height: 180px; background: #fff;69 box-shadow: 0 -6px 18px rgba(0,0,0,0.08); display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 20px 30px;70 }71 .btn {72 border-radius: 26px; display: flex; align-items: center; justify-content: center; gap: 18px;73 font-size: 42px; font-weight: 800; color: #fff;74 }75 .btn.cart { background: #2C7BE5; }76 .btn.buy { background: #E53935; }77 /* Simple SVG convenience */78 svg { display: block; }79</style>80</head>81<body>82<div id="render-target">83 <!-- Status bar -->84 <div class="system-bar">85 <div class="sys-left">9:13</div>86 <div class="sys-center">87 • • • ib •88 </div>89 <div class="sys-right">90 <span>⇄</span>91 <div class="battery"><div class="level"></div></div>92 <span>83%</span>93 </div>94 </div>95 96 <!-- App header -->97 <div class="app-header">98 <div class="icon-btn">99 <svg width="60" height="60" viewBox="0 0 60 60">100 <path d="M40 10 L20 30 L40 50" stroke="#222" stroke-width="8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>101 </svg>102 </div>103 <div class="logo">m</div>104 <div class="search-box">105 <svg width="44" height="44" viewBox="0 0 24 24">106 <circle cx="10" cy="10" r="6" stroke="#555" stroke-width="2" fill="none"></circle>107 <path d="M14.5 14.5 L20 20" stroke="#555" stroke-width="2" stroke-linecap="round"></path>108 </svg>109 <div class="placeholder">Search for Hammer Dr...</div>110 <div style="margin-left:auto;">111 <svg width="44" height="44" viewBox="0 0 24 24">112 <path d="M12 2 C9 2 8 4 8 6 L8 12 C7 12 6.5 12.5 6.5 13.2 C6.5 14 7 14.5 8 14.5 L16 14.5 C17 14.5 17.5 14 17.5 13.2 C17.5 12.5 17 12 16 12 L16 6 C16 4 15 2 12 2 Z" fill="#3E6DE0"/>113 <rect x="10" y="16.5" width="4" height="4.5" rx="1" fill="#3E6DE0"/>114 </svg>115 </div>116 </div>117 <div class="icon-btn">118 <svg width="60" height="60" viewBox="0 0 24 24">119 <path d="M3 4 H6 L7.5 13.5 C7.8 15.2 9.2 16.5 11 16.5 H17 C18.8 16.5 20.2 15.2 20.5 13.5 L21 9 H8" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>120 <circle cx="10" cy="20" r="1.8" fill="#222"></circle>121 <circle cx="17" cy="20" r="1.8" fill="#222"></circle>122 </svg>123 </div>124 <div class="icon-btn">125 <svg width="58" height="58" viewBox="0 0 24 24">126 <path d="M3 6 H21 M3 12 H21 M3 18 H21" stroke="#222" stroke-width="2.6" stroke-linecap="round"/>127 </svg>128 </div>129 </div>130 131 <div class="content">132 <div class="title-row">133 <div class="page-title">Reviews & Ratings</div>134 <div class="chip-outline">WRITE A REVIEW</div>135 </div>136 137 <div class="subtitle">Pinaka Mod.Pi-226 1600W 26mm Hammer Drill</div>138 139 <div class="ratings-wrap">140 <div>141 <div class="big-score">142 4.9143 <svg width="80" height="80" viewBox="0 0 24 24">144 <path d="M12 2 L14.8 8.9 L22 9.2 L16.5 14 L18.4 21 L12 17 L5.6 21 L7.5 14 L2 9.2 L9.2 8.9 Z" fill="#22B228"/>145 </svg>146 </div>147 <div class="small-note">Average Rating based on 7 ratings and 7 reviews</div>148 </div>149 <div>150 <div class="dist-row">151 <div>5</div>152 <div class="bar"><div class="fill" style="width:72%;"></div></div>153 </div>154 <div class="dist-row">155 <div>4</div>156 <div class="bar"><div class="fill" style="width:18%;"></div></div>157 </div>158 <div class="dist-row">159 <div>3</div>160 <div class="bar"><div class="fill" style="width:3%; background:#C7E7CC;"></div></div>161 </div>162 <div class="dist-row">163 <div>2</div>164 <div class="bar"><div class="fill" style="width:2%; background:#D8F0DA;"></div></div>165 </div>166 <div class="dist-row">167 <div>1</div>168 <div class="bar"><div class="fill" style="width:1%; background:#E8F7E9;"></div></div>169 </div>170 </div>171 </div>172 173 <div class="divider"></div>174 175 <!-- Review 1 -->176 <div class="review">177 <div class="stars">178 <svg width="42" height="42" viewBox="0 0 24 24"><path d="M12 2 L14.6 8.5 L22 9.2 L16.7 13.8 L18.4 21 L12 17.2 L5.6 21 L7.3 13.8 L2 9.2 L9.4 8.5 Z" fill="#FFC107"/></svg>179 <svg width="42" height="42" viewBox="0 0 24 24"><path d="M12 2 L14.6 8.5 L22 9.2 L16.7 13.8 L18.4 21 L12 17.2 L5.6 21 L7.3 13.8 L2 9.2 L9.4 8.5 Z" fill="#FFC107"/></svg>180 <svg width="42" height="42" viewBox="0 0 24 24"><path d="M12 2 L14.6 8.5 L22 9.2 L16.7 13.8 L18.4 21 L12 17.2 L5.6 21 L7.3 13.8 L2 9.2 L9.4 8.5 Z" fill="#FFC107"/></svg>181 <svg width="42" height="42" viewBox="0 0 24 24"><path d="M12 2 L14.6 8.5 L22 9.2 L16.7 13.8 L18.4 21 L12 17.2 L5.6 21 L7.3 13.8 L2 9.2 L9.4 8.5 Z" fill="#FFC107"/></svg>182 <svg width="42" height="42" viewBox="0 0 24 24"><path d="M12 2 L14.6 8.5 L22 9.2 L16.7 13.8 L18.4 21 L12 17.2 L5.6 21 L7.3 13.8 L2 9.2 L9.4 8.5 Z" fill="#FFC107"/></svg>183 </div>184 <div class="name">Ishmita</div>185 <div class="date">June 6, 2022</div>186 <div class="headline">Strong grip</div>187 <div class="text">Good for general purposes.</div>188 </div>189 190 <div class="divider"></div>191 192 <!-- Review 2 -->193 <div class="review">194 <div class="stars">195 <svg width="42" height="42" viewBox="0 0 24 24"><path d="M12 2 L14.6 8.5 L22 9.2 L16.7 13.8 L18.4 21 L12 17.2 L5.6 21 L7.3 13.8 L2 9.2 L9.4 8.5 Z" fill="#FFC107"/></svg>196 <svg width="42" height="42" viewBox="0 0 24 24"><path d="M12 2 L14.6 8.5 L22 9.2 L16.7 13.8 L18.4 21 L12 17.2 L5.6 21 L7.3 13.8 L2 9.2 L9.4 8.5 Z" fill="#FFC107"/></svg>197 <svg width="42" height="42" viewBox="0 0 24 24"><path d="M12 2 L14.6 8.5 L22 9.2 L16.7 13.8 L18.4 21 L12 17.2 L5.6 21 L7.3 13.8 L2 9.2 L9.4 8.5 Z" fill="#FFC107"/></svg>198 <svg width="42" height="42" viewBox="0 0 24 24"><path d="M12 2 L14.6 8.5 L22 9.2 L16.7 13.8 L18.4 21 L12 17.2 L5.6 21 L7.3 13.8 L2 9.2 L9.4 8.5 Z" fill="#FFC107"/></svg>199 <svg width="42" height="42" viewBox="0 0 24 24"><path d="M12 2 L14.6 8.5 L22 9.2 L16.7 13.8 L18.4 21 L12 17.2 L5.6 21 L7.3 13.8 L2 9.2 L9.4 8.5 Z" fill="#FFC107"/></svg>200 </div>201 <div class="name">Chundi Harshavardhan Reddy</div>202 <div class="date">April 10, 2023</div>203 <div class="headline">Solid Build Quality</div>204 <div class="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>205 </div>206 207 <div class="divider"></div>208 209 <div class="link-row">210 <span>VIEW 5 MORE HELPFUL REVIEWS</span>211 <svg width="34" height="34" viewBox="0 0 24 24">212 <path d="M8 5 L16 12 L8 19" fill="none" stroke="#1F6FD1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>213 </svg>214 </div>215 216 <!-- FAQ -->217 <div class="faq-header">218 <div class="faq-title">Frequently Asked Questions</div>219 <div class="chip-outline">ASK NOW</div>220 </div>221 <div class="faq-sub">Displaying Questions 1-2 / 2</div>222 <div class="divider"></div>223 <div class="question">Q1: What is the price of this product ?</div>224 </div>225 226 <!-- Bottom CTA bar -->227 <div class="cta-bar">228 <div class="btn cart">229 <svg width="52" height="52" viewBox="0 0 24 24">230 <path d="M3 5 H6 L7.2 13 C7.5 14.7 9 16 10.7 16 H17 C18.7 16 20.2 14.7 20.5 13 L21 9 H8" stroke="#fff" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>231 <circle cx="10" cy="20" r="1.8" fill="#fff"></circle>232 <circle cx="17" cy="20" r="1.8" fill="#fff"></circle>233 </svg>234 <span>ADD TO CART</span>235 </div>236 <div class="btn buy">237 <span>BUY NOW</span>238 </div>239 </div>240</div>241</body>242</html>