GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Product Reviews UI</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7 #render-target {8 width:1080px; height:2400px;9 position:relative; overflow:hidden;10 background:#ffffff; color:#222;11 box-shadow:0 2px 10px rgba(0,0,0,0.15);12 border-radius:20px;13 }14 15 /* Status bar */16 .status-bar {17 height:110px;18 background:#f5f5f5;19 color:#333;20 display:flex;21 align-items:center;22 padding:0 36px;23 font-weight:600;24 font-size:36px;25 letter-spacing:0.5px;26 }27 .status-icons {28 margin-left:auto;29 display:flex;30 align-items:center;31 gap:18px;32 }33 .dot { width:18px; height:18px; border-radius:50%; background:#cfcfcf; display:inline-block; }34 35 /* Header */36 .header {37 height:110px;38 display:flex;39 align-items:center;40 padding:0 28px;41 border-bottom:1px solid #e6e6e6;42 background:#fff;43 }44 .header .left {45 width:90px; display:flex; align-items:center; justify-content:center;46 }47 .header .right {48 margin-left:auto; display:flex; align-items:center; gap:34px;49 }50 .icon-btn { width:64px; height:64px; display:flex; align-items:center; justify-content:center; }51 .icon { width:44px; height:44px; }52 53 /* Content area */54 .content {55 position:absolute; left:0; top:220px; right:0; bottom:230px; /* leave space for add-to-cart bar */56 overflow:hidden; /* locked to screenshot boundaries */57 padding:24px 36px 0 36px;58 }59 60 .review-text {61 font-size:36px; line-height:52px;62 color:#333; margin-top:8px;63 }64 .user-meta {65 display:flex; align-items:center; gap:16px;66 color:#4a4a4a; font-size:30px; margin-top:18px;67 }68 .verify {69 width:36px; height:36px; border-radius:50%; background:#2ecc71; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:24px; font-weight:700;70 }71 .feedback {72 display:flex; align-items:center; gap:32px; margin-top:18px;73 color:#666; font-size:30px;74 }75 .feedback .fb-item { display:flex; align-items:center; gap:12px; }76 .report-link { margin-left:auto; color:#4a4a4a; font-weight:600; }77 .divider { height:1px; background:#e7e7e7; margin:24px 0; }78 79 .exp-row {80 display:flex; align-items:center; gap:18px; margin-bottom:12px;81 font-size:34px; color:#666;82 }83 .star-badge {84 display:flex; align-items:center; gap:10px;85 background:#f8f8f8; border-radius:12px;86 padding:10px 16px; font-weight:700;87 }88 .star {89 width:30px; height:30px; display:inline-block;90 }91 .review-title {92 font-size:44px; font-weight:800; margin:18px 0 8px 0; color:#1f1f1f;93 }94 .review-body {95 font-size:34px; line-height:52px; color:#444;96 }97 98 .view-all {99 margin:30px 0 22px 0;100 background:#f1f8ff; border:1px solid #d6e6ff;101 height:120px; border-radius:20px;102 display:flex; align-items:center; justify-content:center;103 color:#2d74c4; font-weight:800; font-size:42px;104 }105 106 .section-row {107 height:120px; display:flex; align-items:center;108 font-size:40px; font-weight:700; color:#333;109 border-top:1px solid #eee; border-bottom:1px solid #eee;110 padding:0 36px; margin-top:12px;111 }112 .section-row .chev { margin-left:auto; width:36px; height:36px; }113 114 /* Floating chat */115 .chat-fab {116 position:absolute; right:40px; bottom:370px;117 width:160px; height:160px; border-radius:80px;118 background:#2f7bd9; box-shadow:0 6px 20px rgba(0,0,0,0.25);119 display:flex; align-items:center; justify-content:center;120 }121 .chat-inner {122 width:108px; height:108px; border-radius:54px;123 background:#ffffff; display:flex; align-items:center; justify-content:center;124 }125 126 /* Bottom add to cart bar */127 .bottom-bar {128 position:absolute; left:20px; right:20px; bottom:20px;129 height:180px; background:#ffffff; border-radius:24px;130 box-shadow:0 8px 22px rgba(0,0,0,0.15);131 display:flex; align-items:center; padding:24px;132 }133 .wishlist-box {134 width:160px; height:130px; border-radius:18px;135 border:2px solid #e6e6e6; display:flex; align-items:center; justify-content:center;136 margin-right:24px; background:#fafafa;137 }138 .cart-btn {139 flex:1; height:130px; background:#ffe25e; border-radius:18px;140 display:flex; align-items:center; justify-content:center;141 font-weight:800; font-size:46px; color:#2c2c2c;142 letter-spacing:2px;143 }144 .cart-btn svg { margin-left:18px; }145 146 /* small helpers */147 .muted { color:#787878; }148</style>149</head>150<body>151<div id="render-target">152 153 <!-- Status bar -->154 <div class="status-bar">155 8:31156 <div class="status-icons">157 <span class="dot"></span>158 <span class="dot"></span>159 <span class="dot"></span>160 <span class="dot"></span>161 <span class="dot" style="background:#8ec8ff;"></span>162 </div>163 </div>164 165 <!-- Header -->166 <div class="header">167 <div class="left">168 <svg class="icon" viewBox="0 0 24 24">169 <path d="M15 18l-6-6 6-6" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>170 </svg>171 </div>172 <div class="right">173 <div class="icon-btn">174 <svg class="icon" viewBox="0 0 24 24">175 <circle cx="10" cy="10" r="7" fill="none" stroke="#222" stroke-width="2"/>176 <path d="M21 21l-5-5" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/>177 </svg>178 </div>179 <div class="icon-btn">180 <svg class="icon" viewBox="0 0 24 24">181 <path d="M12 21s-7-4.5-7-10a4 4 0 018 0 4 4 0 018 0c0 5.5-7 10-7 10z" fill="none" stroke="#222" stroke-width="2"/>182 </svg>183 </div>184 <div class="icon-btn">185 <svg class="icon" viewBox="0 0 24 24">186 <path d="M6 6h15l-2 10H8L6 6z" fill="none" stroke="#222" stroke-width="2"/>187 <circle cx="9" cy="20" r="2" fill="#222"/>188 <circle cx="17" cy="20" r="2" fill="#222"/>189 </svg>190 </div>191 </div>192 </div>193 194 <!-- Content -->195 <div class="content">196 197 <!-- First review snippet -->198 <div class="review-text">199 Do not use this on wet, smooth surfaces. It tends to get slippery.200 </div>201 <div class="user-meta">202 <div class="verify">✓</div>203 <div>ALTAF (India) | 29-12-2017</div>204 </div>205 <div class="feedback">206 <div class="fb-item">207 <svg viewBox="0 0 24 24" width="36" height="36"><path d="M14 9V5a3 3 0 00-3-3H9v20h7l3-9h-5z" fill="none" stroke="#666" stroke-width="2"/></svg>208 <span>173</span>209 </div>210 <div class="fb-item">211 <svg viewBox="0 0 24 24" width="36" height="36" style="transform:rotate(180deg)"><path d="M14 9V5a3 3 0 00-3-3H9v20h7l3-9h-5z" fill="none" stroke="#666" stroke-width="2"/></svg>212 <span>60</span>213 </div>214 <div class="report-link">Report</div>215 </div>216 217 <div class="divider"></div>218 219 <!-- Second review -->220 <div class="exp-row">221 <div class="star-badge">222 <span style="font-size:32px; font-weight:800;">5</span>223 <svg class="star" viewBox="0 0 24 24">224 <path d="M12 2l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1 3-7z" fill="#ffc107"/>225 </svg>226 </div>227 <div>Product Experience (More than 1 year)</div>228 </div>229 230 <div class="review-title">This lowest price is the best among all ....</div>231 <div class="review-body">232 So far I have run over 800 Km in the shoes, and I like how they are friendly with my feet, I neve feel tired running many half marathon, they are best among all costly shoe in my drawer ....233 </div>234 235 <div class="user-meta" style="margin-top:18px;">236 <div class="verify">✓</div>237 <div>Satish (India) | 16-09-2017</div>238 </div>239 <div class="feedback">240 <div class="fb-item">241 <svg viewBox="0 0 24 24" width="36" height="36"><path d="M14 9V5a3 3 0 00-3-3H9v20h7l3-9h-5z" fill="none" stroke="#666" stroke-width="2"/></svg>242 <span>125</span>243 </div>244 <div class="fb-item">245 <svg viewBox="0 0 24 24" width="36" height="36" style="transform:rotate(180deg)"><path d="M14 9V5a3 3 0 00-3-3H9v20h7l3-9h-5z" fill="none" stroke="#666" stroke-width="2"/></svg>246 <span>58</span>247 </div>248 <div class="report-link">Report</div>249 </div>250 251 <div class="divider"></div>252 253 <!-- Third review -->254 <div class="exp-row">255 <div class="star-badge">256 <span style="font-size:32px; font-weight:800;">5</span>257 <svg class="star" viewBox="0 0 24 24">258 <path d="M12 2l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1 3-7z" fill="#ffc107"/>259 </svg>260 </div>261 <div>Product Experience (7 to 12 months)</div>262 </div>263 264 <div class="review-title">Best quality</div>265 <div class="review-body">It was a good experience.. I prefer this shoe for my running</div>266 267 <div class="user-meta" style="margin-top:18px;">268 <div class="verify">✓</div>269 <div>Premraj (India) | 08-12-2017</div>270 </div>271 <div class="feedback">272 <div class="fb-item">273 <svg viewBox="0 0 24 24" width="36" height="36"><path d="M14 9V5a3 3 0 00-3-3H9v20h7l3-9h-5z" fill="none" stroke="#666" stroke-width="2"/></svg>274 <span>98</span>275 </div>276 <div class="fb-item">277 <svg viewBox="0 0 24 24" width="36" height="36" style="transform:rotate(180deg)"><path d="M14 9V5a3 3 0 00-3-3H9v20h7l3-9h-5z" fill="none" stroke="#666" stroke-width="2"/></svg>278 <span>51</span>279 </div>280 <div class="report-link">Report</div>281 </div>282 283 <!-- View all button -->284 <div class="view-all">View all 17733 Reviews</div>285 286 <!-- Sections -->287 <div class="section-row">288 VIDEOS289 <svg class="chev" viewBox="0 0 24 24">290 <path d="M6 9l6 6 6-6" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>291 </svg>292 </div>293 294 <div class="section-row" style="margin-top:30px;">295 COMPARE PRODUCTS296 <svg class="chev" viewBox="0 0 24 24">297 <path d="M18 15l-6-6-6 6" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>298 </svg>299 </div>300 301 </div>302 303 <!-- Floating chat -->304 <div class="chat-fab">305 <div class="chat-inner">306 <svg viewBox="0 0 24 24" width="70" height="70">307 <path d="M4 5h16v12H8l-4 4V5z" fill="none" stroke="#2f7bd9" stroke-width="2"/>308 <circle cx="9" cy="11" r="1.5" fill="#2f7bd9"/>309 <circle cx="13" cy="11" r="1.5" fill="#2f7bd9"/>310 <circle cx="17" cy="11" r="1.5" fill="#2f7bd9"/>311 </svg>312 </div>313 </div>314 315 <!-- Bottom Add to Cart bar -->316 <div class="bottom-bar">317 <div class="wishlist-box">318 <svg viewBox="0 0 24 24" width="64" height="64">319 <path d="M12 21s-7-4.5-7-10a4 4 0 018 0 4 4 0 018 0c0 5.5-7 10-7 10z" fill="none" stroke="#333" stroke-width="2"/>320 <path d="M12 7v8" stroke="#4a90e2" stroke-width="2"/>321 <path d="M8 11h8" stroke="#4a90e2" stroke-width="2"/>322 </svg>323 </div>324 <div class="cart-btn">325 ADD TO CART326 <svg viewBox="0 0 24 24" width="60" height="60">327 <path d="M6 6h15l-2 10H8L6 6z" fill="none" stroke="#2c2c2c" stroke-width="2"/>328 <circle cx="9" cy="20" r="2" fill="#2c2c2c"/>329 <circle cx="17" cy="20" r="2" fill="#2c2c2c"/>330 </svg>331 </div>332 </div>333 334</div>335</body>336</html>