GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Product Reviews Screen</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 }15 16 /* Top system/status bar */17 .status-bar {18 height: 110px;19 background: #2D2E36;20 color: #fff;21 display: flex;22 align-items: center;23 padding: 0 32px;24 box-sizing: border-box;25 font-size: 38px;26 justify-content: space-between;27 }28 .status-left { display: flex; align-items: center; gap: 18px; }29 .status-right { display: flex; align-items: center; gap: 26px; opacity: 0.9; }30 .dot { width: 10px; height: 10px; background: #C7C7C7; border-radius: 50%; display: inline-block; }31 .icon-circle {32 width: 36px; height: 36px; border-radius: 50%;33 border: 2px solid rgba(255,255,255,0.8);34 }35 .battery {36 width: 54px; height: 28px; border: 3px solid #fff; border-radius: 6px; position: relative;37 }38 .battery:after {39 content: ""; width: 6px; height: 16px; background: #fff; position: absolute; right: -10px; top: 4px; border-radius: 2px;40 }41 .battery-level { width: 32px; height: 18px; background: #fff; position: absolute; left: 4px; top: 4px; }42 43 /* Header */44 .header {45 height: 120px;46 display: flex;47 align-items: center;48 padding: 0 24px;49 box-sizing: border-box;50 border-bottom: 1px solid #eee;51 background: #ffffff;52 }53 .header-left, .header-right { display: flex; align-items: center; }54 .header-left { gap: 16px; }55 .header-right { margin-left: auto; gap: 36px; }56 .icon-btn { width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center; }57 58 /* Tabs */59 .tabs {60 height: 110px;61 display: flex;62 align-items: flex-end;63 padding: 0 24px;64 gap: 40px;65 box-sizing: border-box;66 background: #ffffff;67 border-bottom: 1px solid #ececec;68 }69 .tab {70 font-size: 38px;71 color: #777;72 height: 100%;73 display: flex;74 align-items: center;75 position: relative;76 padding-bottom: 22px;77 }78 .tab.active { color: #111; font-weight: 600; }79 .tab.active::after {80 content: "";81 position: absolute;82 bottom: -1px;83 left: 12px;84 width: 72px;85 height: 8px;86 background: #ff6d00;87 border-radius: 8px;88 }89 90 /* Scrollable content area */91 .content {92 position: absolute;93 top: 110px; /* status */94 left: 0;95 right: 0;96 }97 .content-inner {98 position: absolute;99 top: 230px; /* header + tabs (120 + 110) */100 left: 0; right: 0;101 bottom: 340px; /* sticky action + system nav (220 + 120) */102 overflow-y: auto;103 padding: 24px;104 box-sizing: border-box;105 }106 107 /* Sections */108 .stars { display: flex; align-items: center; gap: 8px; margin-top: 10px; }109 .review-text { font-size: 40px; color: #333; margin: 18px 0 28px 0; }110 .divider { height: 2px; background: #eee; margin: 24px 0; }111 .link-row { display: flex; align-items: center; justify-content: space-between; font-size: 40px; color: #444; padding: 22px 0; }112 .chev {113 width: 20px; height: 20px; border-top: 4px solid #bbb; border-right: 4px solid #bbb; transform: rotate(45deg); margin-right: 8px;114 }115 116 .qa-block {117 background: #F7F7F9;118 border-radius: 12px;119 padding: 32px;120 margin: 14px 0 34px 0;121 }122 .qa-title { font-size: 48px; font-weight: 700; color: #222; margin-bottom: 18px; }123 .qa-note { font-size: 36px; color: #9a9a9a; text-align: center; padding: 26px 16px; }124 .qa-btn {125 display: block;126 width: 340px;127 margin: 18px auto 6px auto;128 text-align: center;129 padding: 22px 0;130 border: 2px solid #d6d6d6;131 border-radius: 18px;132 color: #444;133 font-size: 36px;134 background: #fff;135 }136 137 .section-title {138 font-size: 48px;139 font-weight: 700;140 color: #222;141 margin: 22px 0 16px 0;142 display: flex; align-items: center; justify-content: space-between;143 }144 145 .products {146 display: flex; gap: 28px; padding: 8px 0 18px 0;147 }148 .card {149 width: 320px;150 border-radius: 24px;151 background: #fff;152 }153 .img {154 width: 320px; height: 320px; border-radius: 24px;155 background: #E0E0E0; border: 1px solid #BDBDBD;156 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px; text-align: center; padding: 10px; box-sizing: border-box;157 }158 .price { margin-top: 16px; font-size: 36px; color: #222; }159 160 .desc-title { font-size: 48px; font-weight: 700; color: #222; margin: 26px 0 8px 0; }161 .desc-text { font-size: 36px; line-height: 1.38; color: #444; }162 .banner {163 margin-top: 18px;164 height: 420px;165 position: relative;166 border-radius: 18px;167 background: #E0E0E0;168 border: 1px solid #BDBDBD;169 display: flex; align-items: center; justify-content: center;170 color: #757575; font-size: 34px;171 }172 .float-up {173 position: absolute;174 right: 24px; bottom: 24px;175 width: 88px; height: 88px; border-radius: 50%;176 background: #ffffff; border: 2px solid #e0e0e0;177 display: flex; align-items: center; justify-content: center;178 box-shadow: 0 2px 6px rgba(0,0,0,0.12);179 }180 .float-up svg { width: 36px; height: 36px; }181 182 .spacer { height: 160px; } /* to avoid overlap with sticky actions */183 184 /* Sticky purchase bar */185 .purchase-bar {186 position: absolute;187 left: 0; right: 0; bottom: 120px;188 height: 220px;189 background: #fff;190 box-shadow: 0 -2px 12px rgba(0,0,0,0.08);191 display: flex;192 align-items: center;193 padding: 0 32px;194 box-sizing: border-box;195 gap: 26px;196 }197 .btn {198 flex: 1;199 height: 120px;200 border-radius: 18px;201 display: flex; align-items: center; justify-content: center;202 color: #fff; font-weight: 700; font-size: 44px;203 }204 .btn-buy { background: linear-gradient(90deg, #FFB300, #FF9800); }205 .btn-cart { background: linear-gradient(90deg, #FF7043, #FF3D00); }206 207 /* Bottom system nav */208 .system-nav {209 position: absolute; left: 0; right: 0; bottom: 0;210 height: 120px; background: #2D2E36; display: flex; align-items: center; justify-content: center;211 }212 .home-pill {213 width: 240px; height: 14px; background: #CFCFD6; border-radius: 10px; opacity: 0.9;214 }215</style>216</head>217<body>218<div id="render-target">219 220 <!-- Status bar -->221 <div class="status-bar">222 <div class="status-left">223 <div style="font-weight: 600;">2:59</div>224 <div class="icon-circle"></div>225 <div class="icon-circle"></div>226 <div class="icon-circle"></div>227 <span class="dot"></span>228 </div>229 <div class="status-right">230 <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff"><path d="M3 9h2l2-3h10l2 3h2v10H3z"/></svg>231 <div class="battery"><div class="battery-level"></div></div>232 </div>233 </div>234 235 <!-- Header -->236 <div class="header">237 <div class="header-left">238 <div class="icon-btn">239 <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">240 <path d="M15 18l-6-6 6-6"></path>241 </svg>242 </div>243 </div>244 <div class="header-right">245 <div class="icon-btn" title="Cart">246 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2">247 <circle cx="9" cy="20" r="1.8"></circle>248 <circle cx="17" cy="20" r="1.8"></circle>249 <path d="M3 4h2l2.4 10.5h9.6L20 8H7"></path>250 </svg>251 </div>252 <div class="icon-btn" title="Share">253 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2">254 <circle cx="18" cy="5" r="3"></circle>255 <circle cx="6" cy="12" r="3"></circle>256 <circle cx="18" cy="19" r="3"></circle>257 <path d="M8.9 10.7l6.2-3.4M8.9 13.3l6.2 3.4"></path>258 </svg>259 </div>260 <div class="icon-btn" title="More">261 <svg width="44" height="44" viewBox="0 0 24 24" fill="#222">262 <circle cx="5" cy="12" r="2"></circle>263 <circle cx="12" cy="12" r="2"></circle>264 <circle cx="19" cy="12" r="2"></circle>265 </svg>266 </div>267 </div>268 </div>269 270 <!-- Tabs -->271 <div class="tabs">272 <div class="tab">Overview</div>273 <div class="tab active">Reviews</div>274 <div class="tab">Description</div>275 <div class="tab">You May Also Like</div>276 </div>277 278 <!-- Scrollable Content -->279 <div class="content">280 <div class="content-inner">281 282 <!-- Stars and review -->283 <div class="stars">284 <svg width="44" height="44" viewBox="0 0 24 24" fill="#FFA000"><path d="M12 2l3 6 7 .9-5 4.8 1.3 7.3L12 17l-6.3 4 1.3-7.3-5-4.8L9 8z"/></svg>285 <svg width="44" height="44" viewBox="0 0 24 24" fill="#FFA000"><path d="M12 2l3 6 7 .9-5 4.8 1.3 7.3L12 17l-6.3 4 1.3-7.3-5-4.8L9 8z"/></svg>286 <svg width="44" height="44" viewBox="0 0 24 24" fill="#FFA000"><path d="M12 2l3 6 7 .9-5 4.8 1.3 7.3L12 17l-6.3 4 1.3-7.3-5-4.8L9 8z"/></svg>287 <svg width="44" height="44" viewBox="0 0 24 24" fill="#FFA000"><path d="M12 2l3 6 7 .9-5 4.8 1.3 7.3L12 17l-6.3 4 1.3-7.3-5-4.8L9 8z"/></svg>288 <svg width="44" height="44" viewBox="0 0 24 24" fill="#FFA000"><path d="M12 2l3 6 7 .9-5 4.8 1.3 7.3L12 17l-6.3 4 1.3-7.3-5-4.8L9 8z"/></svg>289 </div>290 <div class="review-text">Good quality, good product,</div>291 <div class="divider"></div>292 293 <div class="link-row">294 <div>See All Reviews</div>295 <div class="chev"></div>296 </div>297 298 <!-- Q&A -->299 <div class="qa-block">300 <div class="qa-title">Questions & Answers(0)</div>301 <div class="qa-note">If you have any question about the product, please ask!</div>302 <button class="qa-btn">Ask a question</button>303 </div>304 305 <!-- Related Products -->306 <div class="section-title">307 <span>Products related to this item</span>308 <div class="chev"></div>309 </div>310 <div class="products">311 <div class="card">312 <div class="img">[IMG: Blender Cup product photo]</div>313 <div class="price">₹3,700.69</div>314 </div>315 <div class="card">316 <div class="img">[IMG: Two portable juicers with fruits]</div>317 <div class="price">₹3,700.69</div>318 </div>319 </div>320 321 <!-- Description -->322 <div class="desc-title">Description</div>323 <div class="desc-text">324 XIAOMI Mijia Portable Juicer Mixer Electric Mini Blender Fruit Vegetables Quick Juicing Kitchen Food Processor Fitness Travel325 </div>326 <div class="banner">327 [IMG: Product banner / hero image]328 <div class="float-up" title="Back to top">329 <svg viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">330 <path d="M6 15l6-6 6 6"></path>331 </svg>332 </div>333 </div>334 335 <div class="spacer"></div>336 </div>337 </div>338 339 <!-- Sticky purchase bar -->340 <div class="purchase-bar">341 <div class="btn btn-buy">Buy Now</div>342 <div class="btn btn-cart">Add to Cart</div>343 </div>344 345 <!-- Bottom system nav -->346 <div class="system-nav">347 <div class="home-pill"></div>348 </div>349 350</div>351</body>352</html>