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>Amazon Reviews Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff;13 }14 15 /* Top system/status and tab chips */16 .status-bar {17 background: #5263cc;18 color: #fff;19 height: 150px;20 box-sizing: border-box;21 padding: 24px 32px 12px 32px;22 }23 .status-row {24 display: flex; align-items: center; justify-content: space-between;25 font-size: 36px;26 }27 .icon-dot { width: 12px; height: 12px; background: #fff; border-radius: 50%; display: inline-block; margin: 0 18px; }28 .chips {29 margin-top: 18px;30 display: flex; gap: 16px; flex-wrap: nowrap;31 }32 .chip {33 background: #4455c0;34 color: #fff;35 border-radius: 18px;36 padding: 16px 26px;37 font-size: 34px;38 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);39 }40 .chip.x { background: #2e3aa8; padding-left: 20px; padding-right: 20px; }41 42 /* Amazon header */43 .amazon-header {44 background: #1f2a33;45 color: #fff;46 padding: 26px 32px;47 }48 .amazon-top {49 display: flex; align-items: center; justify-content: space-between;50 }51 .left-inline {52 display: flex; align-items: center; gap: 26px;53 }54 .hamburger svg { width: 48px; height: 48px; }55 .logo {56 font-size: 52px; font-weight: 700; letter-spacing: 0.5px;57 }58 .logo small { font-weight: 400; font-size: 40px; margin-left: 8px; }59 .right-inline {60 display: flex; align-items: center; gap: 28px; font-size: 36px;61 }62 .header-icon svg { width: 52px; height: 52px; fill: none; stroke: #fff; stroke-width: 2.5; }63 .cart-badge {64 position: relative; display: inline-block;65 }66 .cart-badge .badge {67 position: absolute; right: -6px; top: -10px;68 background: #f8a429; color: #0a0a0a; font-weight: 700;69 border-radius: 12px; padding: 4px 10px; font-size: 30px;70 }71 .search-row {72 margin-top: 18px; display: flex; align-items: center; gap: 18px;73 }74 .search {75 flex: 1; background: #fff; border-radius: 28px;76 height: 90px; display: flex; align-items: center; padding: 0 28px;77 font-size: 36px; color: #888;78 }79 .search-btn {80 width: 110px; height: 90px; background: #ffbd73;81 border-radius: 22px; display: flex; align-items: center; justify-content: center;82 }83 .search-btn svg { width: 54px; height: 54px; fill: none; stroke: #1f2a33; stroke-width: 6; }84 85 /* Location bar */86 .location-bar {87 background: #2a3a46;88 color: #d6e3ea;89 padding: 26px 32px;90 display: flex; align-items: center; gap: 18px;91 font-size: 36px;92 }93 .location-icon {94 width: 36px; height: 36px; border-radius: 50%;95 border: 2px solid #c7d2da; display: inline-flex; align-items: center; justify-content: center;96 }97 .location-icon svg { width: 26px; height: 26px; fill: none; stroke: #c7d2da; stroke-width: 2.5; }98 .caret { margin-left: 8px; border-top: 10px solid #c7d2da; border-left: 10px solid transparent; border-right: 10px solid transparent; width: 0; height: 0; }99 100 /* Breadcrumb */101 .breadcrumb {102 background: #f1f3f4; padding: 26px 32px; color: #2a2a2a; font-size: 40px;103 display: flex; align-items: center; gap: 18px;104 border-bottom: 1px solid #e5e5e5;105 }106 .breadcrumb .back { width: 34px; height: 34px; border-left: 6px solid #666; border-bottom: 6px solid #666; transform: rotate(45deg); margin-right: 8px; }107 108 /* Content */109 .content { padding: 32px; }110 .section-title { font-size: 64px; font-weight: 700; color: #1a1a1a; margin: 10px 0 12px; }111 .rating-row {112 display: flex; align-items: center; gap: 18px; font-size: 40px; color: #333; margin: 8px 0 6px;113 }114 .stars { display: flex; gap: 8px; }115 .star svg { width: 44px; height: 44px; }116 .star.filled svg { fill: #f59d0c; }117 .star.half svg path { fill: url(#gradStar); }118 .light-link { color: #1374ba; font-size: 38px; margin-left: auto; }119 .subtext { font-size: 36px; color: #666; margin-top: 8px; }120 121 .bars { margin-top: 24px; }122 .bar-row {123 display: grid; grid-template-columns: 150px 1fr 100px; align-items: center;124 gap: 18px; margin: 18px 0;125 font-size: 38px; color: #1478cc;126 }127 .bar-label { text-align: left; }128 .bar {129 height: 46px; background: #e3e7ea; border-radius: 12px; overflow: hidden; position: relative;130 }131 .bar > span {132 position: absolute; left: 0; top: 0; bottom: 0; background: #f5a21b;133 border-top-right-radius: 12px; border-bottom-right-radius: 12px;134 }135 .percent { color: #888; text-align: right; font-size: 36px; }136 137 .how-row {138 display: flex; align-items: center; gap: 18px; font-size: 36px; color: #3c3c3c;139 margin: 22px 0 10px;140 }141 .chev-small {142 width: 20px; height: 20px; border-left: 4px solid #666; border-bottom: 4px solid #666; transform: rotate(-45deg);143 }144 145 /* Reviews with images card */146 .image-card {147 border: 1px solid #e6e6e6; border-radius: 24px; padding: 24px;148 margin-top: 18px;149 }150 .image-card-title { font-size: 48px; font-weight: 700; color: #222; margin-bottom: 20px; }151 .image-row { display: flex; align-items: center; gap: 24px; }152 .img-ph {153 width: 220px; height: 220px; background: #E0E0E0; border: 1px solid #BDBDBD;154 display: flex; justify-content: center; align-items: center; color: #757575; font-size: 32px; text-align: center;155 border-radius: 8px;156 }157 .arrow-right {158 margin-left: auto; width: 24px; height: 24px; border-top: 6px solid #666; border-right: 6px solid #666; transform: rotate(45deg);159 }160 161 /* Dropdown */162 .dropdown {163 margin: 26px 8px; width: 540px; background: #edf0f2; border-radius: 18px;164 padding: 24px 28px; font-size: 40px; color: #2a2a2a; display: flex; justify-content: space-between; align-items: center;165 box-shadow: inset 0 0 0 1px #dde2e6;166 }167 .dropdown .caret-down {168 border-top: 18px solid #3c3c3c; border-left: 18px solid transparent; border-right: 18px solid transparent; width: 0; height: 0;169 }170 171 .ratings-summary { font-size: 36px; color: #3c3c3c; margin: 6px 8px 18px; }172 173 /* Floating action button */174 .fab {175 position: absolute; right: 40px; bottom: 540px;176 width: 120px; height: 120px; background: #6154d6; color: #fff; border-radius: 50%;177 display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0,0,0,0.2);178 font-size: 74px; line-height: 0;179 }180 181 /* Ad card */182 .ad-card {183 margin: 20px 32px; border: 1px solid #e6e6e6; border-radius: 18px; padding: 24px;184 display: flex; align-items: center; justify-content: space-between; gap: 20px;185 }186 .ad-left { display: flex; align-items: center; gap: 24px; }187 .app-icon {188 width: 110px; height: 110px; background: #E0E0E0; border: 1px solid #BDBDBD;189 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px; border-radius: 20px;190 }191 .ad-text { font-size: 40px; color: #333; }192 .ad-text small { display: block; font-size: 32px; color: #888; }193 .install-btn {194 background: #1976d2; color: #fff; border-radius: 12px; padding: 18px 38px; font-size: 42px; font-weight: 700;195 }196 197 /* Bottom handle */198 .handle {199 position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);200 width: 300px; height: 12px; background: #0a0a0a; border-radius: 12px;201 }202</style>203</head>204<body>205<div id="render-target">206 207 <!-- Status bar and quick tabs -->208 <div class="status-bar">209 <div class="status-row">210 <div>9:25</div>211 <div style="display:flex; align-items:center; gap:20px;">212 <span class="icon-dot"></span>213 <span class="icon-dot"></span>214 <span class="icon-dot"></span>215 <span class="icon-dot"></span>216 </div>217 </div>218 <div class="chips">219 <div class="chip x">×</div>220 <div class="chip">Amazon.</div>221 <div class="chip">Flipkar</div>222 <div class="chip">2gud.co</div>223 <div class="chip">Google.</div>224 <div class="chip">Relianc</div>225 <div class="chip">...</div>226 </div>227 </div>228 229 <!-- Amazon header -->230 <div class="amazon-header">231 <div class="amazon-top">232 <div class="left-inline">233 <div class="hamburger">234 <svg viewBox="0 0 24 24"><path d="M3 5h18M3 12h18M3 19h18" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>235 </div>236 <div class="logo">amazon<span style="color:#f59d0c">⌒</span><small>.in</small></div>237 </div>238 <div class="right-inline">239 <div>Sign in ›</div>240 <div class="header-icon">241 <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8" /></svg>242 </div>243 <div class="header-icon cart-badge">244 <span class="badge">1</span>245 <svg viewBox="0 0 24 24"><path d="M3 4h3l2 12h10l2-8H7" /><circle cx="9" cy="20" r="2"/><circle cx="17" cy="20" r="2"/></svg>246 </div>247 </div>248 </div>249 <div class="search-row">250 <div class="search">Search Amazon.in</div>251 <div class="search-btn">252 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4.5-4.5"/></svg>253 </div>254 </div>255 </div>256 257 <!-- Location bar -->258 <div class="location-bar">259 <div class="location-icon">260 <svg viewBox="0 0 24 24"><path d="M12 22s7-8 7-12a7 7 0 10-14 0c0 4 7 12 7 12z"/></svg>261 </div>262 <div>Delivering to Delhi 110001 - Update location</div>263 <div class="caret"></div>264 </div>265 266 <!-- Breadcrumb -->267 <div class="breadcrumb">268 <div class="back"></div>269 <div>Plantex Rich Rose Gold Gate Stopper for The Door...</div>270 </div>271 272 <!-- Content -->273 <div class="content">274 <div class="section-title">Customer reviews</div>275 <div class="rating-row">276 <div class="stars">277 <div class="star filled">278 <svg viewBox="0 0 24 24"><path d="M12 2l3.2 6.8 7 1-5.2 4.8 1.6 7L12 18l-6.6 3.6 1.6-7L2 9.8l7-1z"/></svg>279 </div>280 <div class="star filled">281 <svg viewBox="0 0 24 24"><path d="M12 2l3.2 6.8 7 1-5.2 4.8 1.6 7L12 18l-6.6 3.6 1.6-7L2 9.8l7-1z"/></svg>282 </div>283 <div class="star filled">284 <svg viewBox="0 0 24 24"><path d="M12 2l3.2 6.8 7 1-5.2 4.8 1.6 7L12 18l-6.6 3.6 1.6-7L2 9.8l7-1z"/></svg>285 </div>286 <div class="star filled">287 <svg viewBox="0 0 24 24"><path d="M12 2l3.2 6.8 7 1-5.2 4.8 1.6 7L12 18l-6.6 3.6 1.6-7L2 9.8l7-1z"/></svg>288 </div>289 <div class="star">290 <svg viewBox="0 0 24 24"><path d="M12 2l3.2 6.8 7 1-5.2 4.8 1.6 7L12 18l-6.6 3.6 1.6-7L2 9.8l7-1z" fill="#f5d19b"/></svg>291 </div>292 </div>293 <div>4.4 out of 5</div>294 <a class="light-link" href="#">Write a review</a>295 </div>296 <div class="subtext">101 global ratings</div>297 298 <div class="bars">299 <div class="bar-row">300 <div class="bar-label">5 star</div>301 <div class="bar"><span style="width:68%;"></span></div>302 <div class="percent">68%</div>303 </div>304 <div class="bar-row">305 <div class="bar-label">4 star</div>306 <div class="bar"><span style="width:17%;"></span></div>307 <div class="percent">17%</div>308 </div>309 <div class="bar-row">310 <div class="bar-label">3 star</div>311 <div class="bar"><span style="width:6%;"></span></div>312 <div class="percent">6%</div>313 </div>314 <div class="bar-row">315 <div class="bar-label">2 star</div>316 <div class="bar"><span style="width:4%;"></span></div>317 <div class="percent">4%</div>318 </div>319 <div class="bar-row">320 <div class="bar-label">1 star</div>321 <div class="bar"><span style="width:5%;"></span></div>322 <div class="percent">5%</div>323 </div>324 </div>325 326 <div class="how-row">327 <div class="chev-small"></div>328 <div>How are ratings calculated?</div>329 </div>330 331 <div class="image-card">332 <div class="image-card-title">Reviews with images</div>333 <div class="image-row">334 <div class="img-ph">[IMG: Door stopper close-up]</div>335 <div class="img-ph">[IMG: Hardware on red surface]</div>336 <div class="arrow-right"></div>337 </div>338 </div>339 340 <div class="dropdown">341 <div>Top reviews</div>342 <div class="caret-down"></div>343 </div>344 345 <div class="ratings-summary">101 total ratings, 18 with reviews</div>346 </div>347 348 <!-- Floating add button -->349 <div class="fab">+</div>350 351 <!-- Ad card -->352 <div class="ad-card">353 <div class="ad-left">354 <div class="app-icon">App</div>355 <div class="ad-text">Ubuy: International Shopping <small>FREE · Lifestyle</small></div>356 </div>357 <div class="install-btn">Install</div>358 </div>359 360 <div class="handle"></div>361</div>362</body>363</html>