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>Product Reviews and Suggestions</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 color: #212121;16 }17 18 /* Status bar */19 .status-bar {20 height: 110px;21 background: #E0E0E0;22 padding: 0 36px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 font-weight: 600;27 color: #424242;28 font-size: 40px;29 }30 .status-icons { display: flex; align-items: center; gap: 24px; }31 32 /* App bar */33 .app-bar {34 height: 110px;35 display: flex;36 align-items: center;37 justify-content: space-between;38 padding: 0 36px;39 }40 .left-actions { display: flex; align-items: center; gap: 24px; }41 .right-actions { display: flex; align-items: center; gap: 42px; }42 .icon { width: 56px; height: 56px; fill: none; stroke: #2f2f2f; stroke-width: 4; }43 44 .content {45 position: absolute;46 left: 0; right: 0;47 top: 220px; bottom: 0;48 overflow-y: auto;49 padding-bottom: 260px;50 }51 52 /* Reviews */53 .review {54 padding: 24px 36px;55 }56 .row {57 display: flex;58 align-items: center;59 }60 .space-between { justify-content: space-between; }61 .author {62 display: flex; align-items: center; gap: 18px;63 color: #4A4A4A; font-size: 36px;64 }65 .report { color: #757575; font-size: 36px; }66 .meta-gap { height: 18px; }67 .thumbs { display: flex; align-items: center; gap: 20px; color: #7A7A7A; font-size: 36px; }68 .divider { height: 2px; background: #E5E5E5; margin: 30px 0; }69 .exp-pill {70 display: inline-flex; align-items: center; gap: 24px;71 font-size: 40px; color: #2f2f2f;72 }73 .exp-box {74 width: 84px; height: 84px; border-radius: 16px;75 background: #EAF5FF; display: inline-flex; align-items: center; justify-content: center;76 border: 1px solid #D6E8FF; font-weight: 700; color: #0066CC;77 }78 .comment { font-size: 44px; color: #333; margin: 24px 0 30px; }79 80 .view-all {81 margin: 34px 36px 18px;82 background: #F3F9FF;83 border: 1px solid #E0EEFF;84 border-radius: 28px;85 height: 120px;86 display: flex; align-items: center; justify-content: center;87 color: #1A73E8; font-weight: 700; font-size: 44px;88 }89 90 /* Section title */91 .section-title {92 font-size: 48px; font-weight: 800; color: #424242;93 letter-spacing: 1px;94 margin: 36px;95 }96 97 /* Product carousel */98 .carousel {99 display: flex;100 gap: 36px;101 padding: 0 36px 24px;102 overflow-x: auto;103 }104 .card {105 width: 330px;106 border: 1px solid #E0E0E0;107 border-radius: 12px;108 overflow: hidden;109 background: #fff;110 position: relative;111 }112 .card-media {113 position: relative;114 width: 100%;115 height: 250px;116 background: #E0E0E0;117 border-bottom: 1px solid #BDBDBD;118 display: flex; align-items: center; justify-content: center;119 color: #757575; font-size: 32px;120 }121 .rating-pill {122 position: absolute; left: 16px; bottom: 12px;123 display: inline-flex; align-items: center; gap: 8px;124 background: #fff; border: 1px solid #E0E0E0; border-radius: 10px;125 padding: 6px 12px; font-size: 28px; color: #424242;126 }127 .img-like {128 position: absolute; right: 16px; bottom: 12px;129 width: 48px; height: 48px; border-radius: 50%;130 border: 1px solid #D0D0D0; background: #fff;131 display: flex; align-items: center; justify-content: center;132 }133 .badge {134 position: absolute; top: 12px; left: 12px;135 background: #7C4DFF; color: #fff; font-size: 24px; font-weight: 700;136 padding: 8px 14px; border-radius: 8px;137 }138 .card-body { padding: 18px; }139 .brand { font-size: 34px; font-weight: 800; color: #2e2e2e; }140 .name { font-size: 30px; color: #555; margin-top: 6px; height: 72px; overflow: hidden; }141 .price-row { display: flex; align-items: center; gap: 16px; margin-top: 14px; }142 .price-tag {143 background: #FFD84D; padding: 8px 12px; border-radius: 6px;144 font-weight: 800; font-size: 32px; color: #1c1c1c;145 }146 .strike { color: #9E9E9E; text-decoration: line-through; font-size: 28px; }147 .offer { color: #2E7D32; font-size: 26px; }148 149 /* Slider indicator */150 .slider {151 margin: 8px 36px 16px;152 height: 10px; background: #E9EEF5; border-radius: 8px; position: relative;153 }154 .slider .progress { position: absolute; left: 0; top: 0; bottom: 0; width: 280px; background: #5B8BD8; border-radius: 8px; }155 .slider .knob {156 position: absolute; left: 260px; top: 50%; transform: translateY(-50%);157 width: 48px; height: 48px; border-radius: 50%; background: #D7DFEA; border: 2px solid #BFC8D6;158 }159 160 /* Chat widget */161 .chat-widget {162 position: absolute; right: 36px; bottom: 330px;163 display: flex; align-items: center; gap: 16px;164 }165 .chat-bubble {166 background: #fff; border: 1px solid #DADADA; border-radius: 16px;167 padding: 18px 22px; color: #333; font-size: 30px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);168 position: relative;169 }170 .chat-close {171 position: absolute; left: -18px; top: -18px;172 width: 42px; height: 42px; background: #E0E0E0; border: 1px solid #C5C5C5; border-radius: 50%;173 display: flex; align-items: center; justify-content: center; color: #666; font-weight: 700;174 }175 .chat-avatar {176 width: 132px; height: 132px; border-radius: 50%;177 background: #E0E0E0; border: 1px solid #BDBDBD;178 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px;179 overflow: hidden;180 }181 182 /* Sticky Add to Cart */183 .sticky-bar {184 position: absolute; left: 24px; right: 24px; bottom: 40px;185 background: #fff; border: 1px solid #E0E0E0; border-radius: 24px;186 box-shadow: 0 8px 24px rgba(0,0,0,0.12);187 height: 150px; display: flex; align-items: center; padding: 0 24px; gap: 24px;188 }189 .wishlist-box {190 width: 170px; height: 110px; border: 2px solid #DDE6F0; border-radius: 16px;191 display: flex; align-items: center; justify-content: center; color: #4A90E2;192 background: #F7FBFF;193 }194 .add-btn {195 flex: 1; height: 110px; border-radius: 18px; background: #FFE165;196 color: #1a1a1a; font-size: 48px; font-weight: 900;197 display: flex; align-items: center; justify-content: center; gap: 18px;198 border: 1px solid #F1CC41;199 }200 .foot-hint {201 position: absolute; left: 36px; bottom: 210px; color: #8D8D8D; font-weight: 800; font-size: 44px;202 }203 204 /* Small helpers */205 .muted { color: #757575; }206 .count { width: 40px; text-align: center; }207</style>208</head>209<body>210<div id="render-target">211 212 <!-- Status bar -->213 <div class="status-bar">214 <div>8:47</div>215 <div class="status-icons">216 <!-- simple wifi -->217 <svg class="icon" viewBox="0 0 24 24" stroke="#616161"><path d="M2 9c5-5 15-5 20 0"/><path d="M5 12c3-3 11-3 14 0"/><path d="M8 15c2-2 6-2 8 0"/><circle cx="12" cy="19" r="1.5" fill="#616161" stroke="none"/></svg>218 <!-- battery -->219 <svg class="icon" viewBox="0 0 24 24" stroke="#616161"><rect x="2" y="7" width="18" height="10" rx="2"/><rect x="20" y="10" width="2" height="4" rx="1" stroke="#616161"/></svg>220 </div>221 </div>222 223 <!-- App bar -->224 <div class="app-bar">225 <div class="left-actions">226 <svg class="icon" viewBox="0 0 24 24"><path d="M15 4L7 12l8 8"/></svg>227 </div>228 <div class="right-actions">229 <svg class="icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3-3"/></svg>230 <svg class="icon" viewBox="0 0 24 24"><path d="M12 21c4-3 7-6 7-10a7 7 0 0 0-14 0c0 4 3 7 7 10z"/></svg>231 <svg class="icon" viewBox="0 0 24 24"><path d="M6 6h15l-2 9H7L6 6z"/><circle cx="9" cy="20" r="1.5"/><circle cx="17" cy="20" r="1.5"/></svg>232 </div>233 </div>234 235 <div class="content">236 237 <!-- Review 1 -->238 <div class="review">239 <div class="row space-between">240 <div class="author">241 <svg width="48" height="48" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#E8F5E9" stroke="#43A047"/><path d="M7 12l3 3 7-7" stroke="#43A047" stroke-width="2" fill="none"/></svg>242 <div>Anant (India) | 03-11-2023</div>243 </div>244 <div class="report">Report</div>245 </div>246 247 <div class="meta-gap"></div>248 249 <div class="thumbs">250 <svg width="44" height="44" viewBox="0 0 24 24" stroke="#7A7A7A" fill="none"><path d="M14 10V4l-5 6H5v8h9l3-8h-3z"/></svg>251 <div class="count">0</div>252 <svg width="44" height="44" viewBox="0 0 24 24" stroke="#7A7A7A" fill="none"><path d="M10 14v6l5-6h4V6H10L7 14h3z"/></svg>253 <div class="count">0</div>254 </div>255 256 <div class="divider"></div>257 258 <div class="exp-pill">259 <div class="exp-box">260 5261 <svg width="28" height="28" viewBox="0 0 24 24" fill="#FFB300" style="margin-left:6px;"><path d="M12 2l2.8 6h6.2l-5 3.7 1.9 6.3L12 15.6 6.1 18l1.9-6.3-5-3.7h6.2z"/></svg>262 </div>263 <div>Product Experience (7 to 12 months)</div>264 </div>265 266 <div class="comment">Good for walking.</div>267 268 <div class="row space-between">269 <div class="author">270 <svg width="48" height="48" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#E8F5E9" stroke="#43A047"/><path d="M7 12l3 3 7-7" stroke="#43A047" stroke-width="2" fill="none"/></svg>271 <div>Vikram (India) | 02-11-2023</div>272 </div>273 <div class="report">Report</div>274 </div>275 276 <div class="meta-gap"></div>277 278 <div class="thumbs">279 <svg width="44" height="44" viewBox="0 0 24 24" stroke="#7A7A7A" fill="none"><path d="M14 10V4l-5 6H5v8h9l3-8h-3z"/></svg>280 <div class="count">0</div>281 <svg width="44" height="44" viewBox="0 0 24 24" stroke="#7A7A7A" fill="none"><path d="M10 14v6l5-6h4V6H10L7 14h3z"/></svg>282 <div class="count">0</div>283 </div>284 </div>285 286 <div class="view-all">View all 4959 Reviews</div>287 288 <div class="divider" style="margin: 18px 0;"></div>289 290 <div class="section-title">CUSTOMERS ALSO BOUGHT</div>291 292 <div class="carousel">293 <!-- Card 1 -->294 <div class="card">295 <div class="card-media">296 [IMG: Blue Yoga Mat]297 <div class="rating-pill">298 <svg width="20" height="20" viewBox="0 0 24 24" fill="#FFB300"><path d="M12 2l2.6 6h6.4l-5.2 3.8 2 6.2L12 16l-5.8 2.1 2-6.2L3 8h6.4z"/></svg>299 <span>4.2</span>300 </div>301 <div class="img-like">302 <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#5E6F82" stroke-width="2"><path d="M12 21c4-3 7-6 7-10a7 7 0 0 0-14 0c0 4 3 7 7 10z"/></svg>303 </div>304 </div>305 <div class="card-body">306 <div class="brand">DOMYOS</div>307 <div class="name">Yoga Mat Basic 4mm - Blue</div>308 <div class="price-row">309 <div class="price-tag">₹499</div>310 <div class="strike">₹599</div>311 </div>312 </div>313 </div>314 315 <!-- Card 2 -->316 <div class="card">317 <div class="card-media">318 <div class="badge">EXCLUSIVE ONLINE</div>319 [IMG: Women's Black Gym Pants]320 <div class="rating-pill">321 <svg width="20" height="20" viewBox="0 0 24 24" fill="#FFB300"><path d="M12 2l2.6 6h6.4l-5.2 3.8 2 6.2L12 16l-5.8 2.1 2-6.2L3 8h6.4z"/></svg>322 <span>4.5</span>323 </div>324 <div class="img-like">325 <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#5E6F82" stroke-width="2"><path d="M12 21c4-3 7-6 7-10a7 7 0 0 0-14 0c0 4 3 7 7 10z"/></svg>326 </div>327 </div>328 <div class="card-body">329 <div class="brand">DOMYOS</div>330 <div class="name">Women's Cotton Gym Pant Adjustable...</div>331 <div class="price-row">332 <div class="price-tag">₹799</div>333 <div class="strike">₹1,199</div>334 <div class="offer">(+1 Offer)</div>335 </div>336 </div>337 </div>338 339 <!-- Card 3 -->340 <div class="card">341 <div class="card-media">342 [IMG: Fitness Accessory]343 <div class="rating-pill">344 <svg width="20" height="20" viewBox="0 0 24 24" fill="#FFB300"><path d="M12 2l2.6 6h6.4l-5.2 3.8 2 6.2L12 16l-5.8 2.1 2-6.2L3 8h6.4z"/></svg>345 <span>4.0</span>346 </div>347 <div class="img-like">348 <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#5E6F82" stroke-width="2"><path d="M12 21c4-3 7-6 7-10a7 7 0 0 0-14 0c0 4 3 7 7 10z"/></svg>349 </div>350 </div>351 <div class="card-body">352 <div class="brand">QUECHUA</div>353 <div class="name">Outdoor Bottle with Quick Cap</div>354 <div class="price-row">355 <div class="price-tag">₹299</div>356 </div>357 </div>358 </div>359 </div>360 361 <div class="slider">362 <div class="progress"></div>363 <div class="knob"></div>364 </div>365 366 <div class="divider"></div>367 <div class="foot-hint">FREQUENTLY BOUGHT TOGETHER</div>368 369 </div>370 371 <!-- Chat widget -->372 <div class="chat-widget">373 <div class="chat-bubble">374 <div class="chat-close">×</div>375 <div><b>Hi There,</b><br/>Please click here to sign in<br/>& chat with me:)</div>376 </div>377 <div class="chat-avatar">Agent Avatar</div>378 </div>379 380 <!-- Sticky Add to Cart -->381 <div class="sticky-bar">382 <div class="wishlist-box">383 <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#4A90E2" stroke-width="2">384 <path d="M12 21c4-3 7-6 7-10a7 7 0 0 0-14 0c0 4 3 7 7 10z"/>385 <path d="M12 8v8M8 12h8"/>386 </svg>387 </div>388 <div class="add-btn">389 ADD TO CART390 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#1a1a1a" stroke-width="2" style="margin-left:8px;">391 <path d="M6 6h15l-2 9H7L6 6z"/><circle cx="9" cy="20" r="1.5"/><circle cx="17" cy="20" r="1.5"/>392 </svg>393 </div>394 </div>395 396</div>397</body>398</html>