GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Product Reviews UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: #ffffff; color: #212121;11 }12 13 /* Status bar */14 .status-bar {15 height: 90px; display: flex; align-items: center; justify-content: space-between;16 padding: 0 32px; font-size: 32px; color: #424242;17 border-bottom: 1px solid #e0e0e0;18 }19 .status-left { display: flex; align-items: center; gap: 18px; }20 .status-icons { display: flex; align-items: center; gap: 24px; }21 .badge-dot { width: 10px; height: 10px; background: #9e9e9e; border-radius: 50%; display: inline-block; }22 23 /* Top thumbnails */24 .thumb-row { display: flex; gap: 24px; padding: 24px 24px 18px 24px; }25 .thumb {26 width: 318px; height: 260px; background: #E0E0E0; border: 1px solid #BDBDBD;27 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px; text-align: center;28 }29 30 /* Filters */31 .filters { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; }32 .filter-item { padding: 24px; display: flex; align-items: center; gap: 18px; font-size: 36px; }33 .filter-item + .filter-item { border-left: 1px solid #e0e0e0; }34 .check-box {35 width: 46px; height: 46px; border: 3px solid #424242; border-radius: 8px; position: relative;36 }37 .check-box .tick {38 position: absolute; left: 8px; top: 8px; width: 28px; height: 28px;39 border-right: 5px solid #1e88e5; border-bottom: 5px solid #1e88e5; transform: rotate(45deg);40 }41 .dropdown { width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 18px solid #616161; margin-left: 8px; }42 43 /* Reviews */44 .reviews { }45 .review-card {46 position: relative;47 padding: 26px 24px 20px 24px;48 border-bottom: 1px solid #eeeeee;49 }50 .rating-line { display: flex; align-items: center; gap: 18px; }51 .stars { display: flex; gap: 6px; }52 .title { font-size: 40px; font-weight: 600; color: #1f1f1f; }53 .subtext { margin-top: 16px; color: #616161; font-size: 30px; }54 .review-text { margin-top: 24px; font-size: 36px; }55 .review-photos { display: flex; gap: 24px; margin-top: 24px; }56 .photo { width: 330px; height: 220px; background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575; display: flex; align-items: center; justify-content: center; font-size: 24px; }57 .author { margin-top: 22px; font-size: 34px; color: #424242; }58 .chips { display: flex; gap: 24px; margin-top: 18px; }59 .chip {60 display: inline-flex; align-items: center; gap: 14px;61 border: 2px solid #cfcfcf; border-radius: 30px; padding: 16px 26px; font-size: 32px; color: #424242; background: #fafafa;62 }63 .verified { display: flex; align-items: center; gap: 12px; color: #2e7d32; margin-top: 16px; font-size: 30px; }64 .dot { margin: 0 8px; color: #9e9e9e; }65 .ellipsis {66 position: absolute; right: 24px; top: 180px;67 display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center;68 }69 .ellipsis div { width: 8px; height: 8px; background: #757575; border-radius: 50%; }70 71 /* Icons */72 .icon { display: inline-block; vertical-align: middle; }73 .star svg { display: block; }74 .green { fill: #2e7d32; }75 .grey { fill: #cfd8dc; }76 77</style>78</head>79<body>80<div id="render-target">81 82 <!-- Status bar -->83 <div class="status-bar">84 <div class="status-left">85 <div>8:16</div>86 <span class="badge-dot"></span>87 <span class="badge-dot"></span>88 </div>89 <div class="status-icons">90 <!-- simple signal icon -->91 <svg width="34" height="34" viewBox="0 0 24 24">92 <rect x="2" y="16" width="3" height="6" fill="#616161"></rect>93 <rect x="7" y="13" width="3" height="9" fill="#616161"></rect>94 <rect x="12" y="10" width="3" height="12" fill="#616161"></rect>95 <rect x="17" y="6" width="3" height="16" fill="#616161"></rect>96 </svg>97 <!-- wifi -->98 <svg width="34" height="34" viewBox="0 0 24 24">99 <path d="M2 8c5-5 15-5 20 0" stroke="#616161" stroke-width="2" fill="none" />100 <path d="M5 11c4-4 10-4 14 0" stroke="#616161" stroke-width="2" fill="none" />101 <path d="M8 14c3-3 5-3 8 0" stroke="#616161" stroke-width="2" fill="none" />102 <circle cx="12" cy="18" r="2" fill="#616161" />103 </svg>104 <!-- battery -->105 <div style="display:flex; align-items:center; gap:10px;">106 <svg width="50" height="30" viewBox="0 0 50 30">107 <rect x="1" y="5" width="42" height="20" rx="4" ry="4" stroke="#616161" fill="none" stroke-width="2"></rect>108 <rect x="3" y="7" width="30" height="16" fill="#616161"></rect>109 <rect x="44" y="11" width="5" height="8" fill="#616161"></rect>110 </svg>111 <div style="font-size:28px; color:#616161;">87%</div>112 </div>113 </div>114 </div>115 116 <!-- Top thumbnails -->117 <div class="thumb-row">118 <div class="thumb">[IMG: Product Box Label]</div>119 <div class="thumb">[IMG: Tool kit & drill bits]</div>120 <div class="thumb">[IMG: Drill machine in case]</div>121 </div>122 123 <!-- Filters -->124 <div class="filters">125 <div class="filter-item">126 <div style="font-weight:700;">Most Helpful</div>127 <div class="dropdown"></div>128 </div>129 <div class="filter-item">130 <div class="check-box"><div class="tick"></div></div>131 <div style="font-weight:700;">Verified Purchases</div>132 </div>133 </div>134 135 <!-- Reviews list -->136 <div class="reviews">137 138 <!-- Review 1 -->139 <div class="review-card">140 <div class="rating-line">141 <div class="stars">142 <span class="star icon">143 <svg width="42" height="42" viewBox="0 0 24 24" class="green"><path d="M12 .6l3.09 6.26 6.91 1.01-5 4.88 1.18 6.89L12 16.77l-6.18 3.27 1.18-6.89-5-4.88 6.91-1.01L12 .6z"/></svg>144 </span>145 <span class="star icon">146 <svg width="42" height="42" viewBox="0 0 24 24" class="green"><path d="M12 .6l3.09 6.26 6.91 1.01-5 4.88 1.18 6.89L12 16.77l-6.18 3.27 1.18-6.89-5-4.88 6.91-1.01L12 .6z"/></svg>147 </span>148 <span class="star icon">149 <svg width="42" height="42" viewBox="0 0 24 24" class="green"><path d="M12 .6l3.09 6.26 6.91 1.01-5 4.88 1.18 6.89L12 16.77l-6.18 3.27 1.18-6.89-5-4.88 6.91-1.01L12 .6z"/></svg>150 </span>151 <span class="star icon">152 <svg width="42" height="42" viewBox="0 0 24 24" class="green"><path d="M12 .6l3.09 6.26 6.91 1.01-5 4.88 1.18 6.89L12 16.77l-6.18 3.27 1.18-6.89-5-4.88 6.91-1.01L12 .6z"/></svg>153 </span>154 <span class="star icon">155 <svg width="42" height="42" viewBox="0 0 24 24" class="grey"><path d="M12 .6l3.09 6.26 6.91 1.01-5 4.88 1.18 6.89L12 16.77l-6.18 3.27 1.18-6.89-5-4.88 6.91-1.01L12 .6z"/></svg>156 </span>157 </div>158 <div class="title">Good quality product</div>159 </div>160 161 <div class="subtext">Review for: Chuck Size 26 mm</div>162 <div class="review-text">Cool</div>163 164 <div class="review-photos">165 <div class="photo">[IMG: Product Box]</div>166 <div class="photo">[IMG: Drill & bits]</div>167 </div>168 169 <div class="author">Himanshu S..., Jambusar</div>170 171 <div class="chips">172 <div class="chip">173 <svg width="32" height="32" viewBox="0 0 24 24">174 <path d="M2 21h4V9H2v12zm6 0h5l5-8V7c0-1.1-.9-2-2-2h-4v10H8v6z" fill="#616161"></path>175 </svg>176 Helpful for 83177 </div>178 <div class="chip">179 <svg width="32" height="32" viewBox="0 0 24 24">180 <path d="M4 4h16v12H6l-2 4V4z" fill="#616161"></path>181 </svg>182 19183 </div>184 </div>185 186 <div class="verified">187 <svg width="28" height="28" viewBox="0 0 24 24">188 <circle cx="12" cy="12" r="10" fill="#2e7d32"></circle>189 <path d="M8 12l3 3 5-6" stroke="#ffffff" stroke-width="2" fill="none"></path>190 </svg>191 Verified Purchase192 <span class="dot">·</span>193 Jul, 2021194 </div>195 196 <div class="ellipsis">197 <div></div><div></div><div></div>198 </div>199 </div>200 201 <!-- Review 2 -->202 <div class="review-card">203 <div class="rating-line">204 <div class="stars">205 <span class="star icon">206 <svg width="42" height="42" viewBox="0 0 24 24" class="green"><path d="M12 .6l3.09 6.26 6.91 1.01-5 4.88 1.18 6.89L12 16.77l-6.18 3.27 1.18-6.89-5-4.88 6.91-1.01L12 .6z"/></svg>207 </span>208 <span class="star icon">209 <svg width="42" height="42" viewBox="0 0 24 24" class="green"><path d="M12 .6l3.09 6.26 6.91 1.01-5 4.88 1.18 6.89L12 16.77l-6.18 3.27 1.18-6.89-5-4.88 6.91-1.01L12 .6z"/></svg>210 </span>211 <span class="star icon">212 <svg width="42" height="42" viewBox="0 0 24 24" class="green"><path d="M12 .6l3.09 6.26 6.91 1.01-5 4.88 1.18 6.89L12 16.77l-6.18 3.27 1.18-6.89-5-4.88 6.91-1.01L12 .6z"/></svg>213 </span>214 <span class="star icon">215 <svg width="42" height="42" viewBox="0 0 24 24" class="green"><path d="M12 .6l3.09 6.26 6.91 1.01-5 4.88 1.18 6.89L12 16.77l-6.18 3.27 1.18-6.89-5-4.88 6.91-1.01L12 .6z"/></svg>216 </span>217 <span class="star icon">218 <svg width="42" height="42" viewBox="0 0 24 24" class="grey"><path d="M12 .6l3.09 6.26 6.91 1.01-5 4.88 1.18 6.89L12 16.77l-6.18 3.27 1.18-6.89-5-4.88 6.91-1.01L12 .6z"/></svg>219 </span>220 </div>221 <div class="title">Worth the money</div>222 </div>223 224 <div class="subtext">Review for: Chuck Size 26 mm</div>225 <div class="review-text">Very nice</div>226 227 <div class="author">Flipkart Cust..., Ganjam District</div>228 229 <div class="chips">230 <div class="chip">231 <svg width="32" height="32" viewBox="0 0 24 24">232 <path d="M2 21h4V9H2v12zm6 0h5l5-8V7c0-1.1-.9-2-2-2h-4v10H8v6z" fill="#616161"></path>233 </svg>234 Helpful for 39235 </div>236 <div class="chip">237 <svg width="32" height="32" viewBox="0 0 24 24">238 <path d="M4 4h16v12H6l-2 4V4z" fill="#616161"></path>239 </svg>240 16241 </div>242 </div>243 244 <div class="verified">245 <svg width="28" height="28" viewBox="0 0 24 24">246 <circle cx="12" cy="12" r="10" fill="#2e7d32"></circle>247 <path d="M8 12l3 3 5-6" stroke="#ffffff" stroke-width="2" fill="none"></path>248 </svg>249 Verified Purchase250 <span class="dot">·</span>251 Apr, 2021252 </div>253 254 <div class="ellipsis">255 <div></div><div></div><div></div>256 </div>257 </div>258 259 <!-- Review 3 -->260 <div class="review-card">261 <div class="rating-line">262 <div class="stars">263 <span class="star icon">264 <svg width="42" height="42" viewBox="0 0 24 24" class="green"><path d="M12 .6l3.09 6.26 6.91 1.01-5 4.88 1.18 6.89L12 16.77l-6.18 3.27 1.18-6.89-5-4.88 6.91-1.01L12 .6z"/></svg>265 </span>266 <span class="star icon">267 <svg width="42" height="42" viewBox="0 0 24 24" class="green"><path d="M12 .6l3.09 6.26 6.91 1.01-5 4.88 1.18 6.89L12 16.77l-6.18 3.27 1.18-6.89-5-4.88 6.91-1.01L12 .6z"/></svg>268 </span>269 <span class="star icon">270 <svg width="42" height="42" viewBox="0 0 24 24" class="green"><path d="M12 .6l3.09 6.26 6.91 1.01-5 4.88 1.18 6.89L12 16.77l-6.18 3.27 1.18-6.89-5-4.88 6.91-1.01L12 .6z"/></svg>271 </span>272 <span class="star icon">273 <svg width="42" height="42" viewBox="0 0 24 24" class="green"><path d="M12 .6l3.09 6.26 6.91 1.01-5 4.88 1.18 6.89L12 16.77l-6.18 3.27 1.18-6.89-5-4.88 6.91-1.01L12 .6z"/></svg>274 </span>275 <span class="star icon">276 <svg width="42" height="42" viewBox="0 0 24 24" class="grey"><path d="M12 .6l3.09 6.26 6.91 1.01-5 4.88 1.18 6.89L12 16.77l-6.18 3.27 1.18-6.89-5-4.88 6.91-1.01L12 .6z"/></svg>277 </span>278 </div>279 <div class="title">Good quality product</div>280 </div>281 282 <div class="subtext">Review for: Chuck Size 26 mm</div>283 <div class="review-text">Very good product, Very powerful machine, Thank you Flipkart</div>284 285 <div class="review-photos">286 <div class="photo">[IMG: Drill front panel]</div>287 <div class="photo">[IMG: Drill case]</div>288 </div>289 </div>290 291 </div>292 293 <!-- bottom spacer to mimic visible end -->294 <div style="height: 60px;"></div>295</div>296</body>297</html>