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 Screen</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13 color: #222;14 }15 #render-target {16 width: 1080px;17 height: 2400px;18 position: relative;19 overflow: hidden;20 background: #FFFFFF;21 }22 23 /* Top dark header */24 .dark-header {25 position: relative;26 width: 100%;27 height: 260px;28 background: #2D2B33;29 color: #fff;30 box-sizing: border-box;31 padding: 28px 36px 0;32 }33 .status-row {34 display: flex;35 align-items: center;36 justify-content: space-between;37 height: 90px;38 font-size: 42px;39 opacity: 0.95;40 }41 .status-icons {42 display: flex;43 align-items: center;44 gap: 26px;45 font-size: 40px;46 }47 .icon-circle {48 width: 34px;49 height: 34px;50 border-radius: 50%;51 border: 3px solid #fff;52 opacity: 0.9;53 display: inline-block;54 }55 .nav-row {56 margin-top: 20px;57 height: 100px;58 display: flex;59 align-items: center;60 justify-content: space-between;61 padding: 0 6px;62 }63 .nav-left, .nav-right {64 display: flex;65 align-items: center;66 gap: 28px;67 }68 .icon-btn svg {69 width: 56px;70 height: 56px;71 fill: #fff;72 }73 74 /* Tabs */75 .tabs {76 width: 100%;77 height: 110px;78 background: #fff;79 display: flex;80 align-items: flex-end;81 box-sizing: border-box;82 padding: 0 34px;83 border-bottom: 1px solid #E8E8E8;84 }85 .tab {86 margin-right: 36px;87 padding: 0 8px 24px;88 font-size: 40px;89 color: #8A8A8A;90 position: relative;91 }92 .tab.active {93 color: #1F1F1F;94 font-weight: 600;95 }96 .tab.active::after {97 content: "";98 position: absolute;99 left: 14px;100 right: 14px;101 bottom: 0;102 height: 8px;103 border-radius: 4px;104 background: #FF7A00;105 }106 107 /* Scrollable content area */108 .content {109 position: absolute;110 top: 370px; /* 260 header + 110 tabs */111 bottom: 330px; /* 220 action bar + 110 gesture area */112 left: 0;113 right: 0;114 overflow-y: auto;115 -webkit-overflow-scrolling: touch;116 background: #FFFFFF;117 }118 .section {119 padding: 36px;120 }121 .stars {122 display: flex;123 gap: 8px;124 margin-bottom: 18px;125 }126 .stars svg {127 width: 44px;128 height: 44px;129 fill: #FFA000;130 }131 .review-text {132 font-size: 40px;133 color: #3A3A3A;134 line-height: 1.4;135 }136 .divider {137 height: 2px;138 background: #EFEFEF;139 margin: 38px 0;140 }141 .row-link {142 display: flex;143 align-items: center;144 justify-content: space-between;145 padding: 14px 6px;146 font-size: 40px;147 color: #333;148 }149 .chev {150 width: 26px; height: 26px;151 border-right: 6px solid #9E9E9E;152 border-top: 6px solid #9E9E9E;153 transform: rotate(45deg);154 margin-right: 8px;155 }156 157 .qa-block {158 background: #F6F7F9;159 padding: 48px 36px 60px;160 border-top: 1px solid #EEE;161 border-bottom: 1px solid #EEE;162 }163 .qa-title {164 font-size: 44px;165 font-weight: 700;166 margin-bottom: 26px;167 }168 .qa-sub {169 text-align: center;170 color: #8B8B8B;171 font-size: 38px;172 margin: 36px 0 44px;173 }174 .qa-btn {175 margin: 0 auto;176 width: 380px;177 height: 100px;178 border-radius: 18px;179 border: 2px solid #D0D0D0;180 background: #fff;181 font-size: 38px;182 display: flex;183 align-items: center;184 justify-content: center;185 color: #333;186 box-shadow: 0 2px 0 rgba(0,0,0,0.02);187 }188 189 .products {190 background: #fff;191 padding: 38px 36px;192 }193 .products .header {194 display: flex;195 align-items: center;196 justify-content: space-between;197 margin-bottom: 26px;198 }199 .products .header .title {200 font-size: 44px;201 font-weight: 700;202 }203 .product-row {204 display: flex;205 gap: 36px;206 }207 .card {208 width: 320px;209 border-radius: 28px;210 background: #fff;211 }212 .img-ph {213 width: 320px;214 height: 320px;215 background: #E0E0E0;216 border: 1px solid #BDBDBD;217 border-radius: 28px;218 display: flex;219 align-items: center;220 justify-content: center;221 color: #757575;222 font-size: 30px;223 text-align: center;224 padding: 10px;225 }226 .price {227 font-size: 36px;228 margin-top: 16px;229 color: #333;230 }231 232 .desc {233 padding: 36px;234 }235 .desc h3 {236 font-size: 46px;237 margin: 16px 0 18px;238 }239 .desc p {240 font-size: 38px;241 color: #4A4A4A;242 line-height: 1.35;243 }244 .big-image {245 margin-top: 24px;246 height: 480px;247 background: #E0E0E0;248 border: 1px solid #BDBDBD;249 border-radius: 18px;250 display: flex;251 align-items: center;252 justify-content: center;253 color: #757575;254 font-size: 36px;255 position: relative;256 }257 .float-top {258 position: absolute;259 right: 24px;260 top: 24px;261 width: 92px;262 height: 92px;263 background: #FFFFFF;264 border: 2px solid #E0E0E0;265 border-radius: 50%;266 display: flex;267 align-items: center;268 justify-content: center;269 box-shadow: 0 6px 14px rgba(0,0,0,0.08);270 }271 .float-top .up {272 width: 20px; height: 20px;273 border-left: 6px solid #666;274 border-top: 6px solid #666;275 transform: rotate(45deg);276 margin-top: 6px;277 }278 279 /* Bottom action bar */280 .action-bar {281 position: absolute;282 left: 0; right: 0;283 bottom: 110px;284 height: 220px;285 background: #fff;286 border-top: 1px solid #EAEAEA;287 display: flex;288 align-items: center;289 justify-content: center;290 gap: 34px;291 padding: 0 36px;292 box-sizing: border-box;293 }294 .btn {295 flex: 1;296 height: 120px;297 border-radius: 18px;298 font-size: 44px;299 font-weight: 700;300 color: #fff;301 display: flex;302 align-items: center;303 justify-content: center;304 }305 .buy-now {306 background: #FFA000;307 }308 .add-cart {309 background: linear-gradient(90deg, #FF8F00, #FF3D00);310 }311 312 /* Bottom dark system area (gesture bar) */313 .system-bar {314 position: absolute;315 left: 0; right: 0; bottom: 0;316 height: 110px;317 background: #2D2B33;318 display: flex;319 align-items: center;320 justify-content: center;321 }322 .gesture-pill {323 width: 260px;324 height: 12px;325 background: #C9C9C9;326 border-radius: 8px;327 opacity: 0.9;328 }329</style>330</head>331<body>332<div id="render-target">333 334 <!-- Top Dark Header -->335 <div class="dark-header">336 <div class="status-row">337 <div>3:00</div>338 <div class="status-icons">339 <span class="icon-circle"></span>340 <span class="icon-circle"></span>341 <span class="icon-circle"></span>342 <span style="font-size:46px; opacity:.8;">•</span>343 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M5 12h2M17 12h2M12 5v2M12 17v2"/></svg>344 <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff"><path d="M18 3H6a1 1 0 0 0-1 1v16l7-3 7 3V4a1 1 0 0 0-1-1z"/></svg>345 <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff"><path d="M20 6h-3V4a1 1 0 0 0-1-1h-8a1 1 0 0 0-1 1v2H4v2h1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8h1V6ZM8 5h8v1H8V5Zm9 13H7V8h10v10Z"/></svg>346 </div>347 </div>348 349 <div class="nav-row">350 <div class="nav-left">351 <div class="icon-btn">352 <svg viewBox="0 0 24 24"><path d="M15.5 19.5L8 12l7.5-7.5" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>353 </div>354 </div>355 <div class="nav-right">356 <div class="icon-btn" title="Cart">357 <svg viewBox="0 0 24 24"><path d="M7 6h13l-1.5 9H8.5L7 6z" fill="#fff"/><circle cx="9" cy="20" r="1.5" fill="#fff"/><circle cx="17" cy="20" r="1.5" fill="#fff"/></svg>358 </div>359 <div class="icon-btn" title="Share">360 <svg viewBox="0 0 24 24"><path d="M18 8a3 3 0 1 0-3-3 3 3 0 0 0 3 3zm-12 8a3 3 0 1 0 3 3 3 3 0 0 0-3-3zm12 0a3 3 0 1 0 3 3 3 3 0 0 0-3-3z" fill="#fff"/><path d="M8.6 16.6l6.8-3.2M8.6 7.4l6.8 3.2" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>361 </div>362 <div class="icon-btn" title="More">363 <svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="2" fill="#fff"/><circle cx="12" cy="12" r="2" fill="#fff"/><circle cx="19" cy="12" r="2" fill="#fff"/></svg>364 </div>365 </div>366 </div>367 </div>368 369 <!-- Tabs -->370 <div class="tabs">371 <div class="tab">Overview</div>372 <div class="tab active">Reviews</div>373 <div class="tab">Description</div>374 <div class="tab">You May Also Like</div>375 </div>376 377 <!-- Scrollable Content -->378 <div class="content">379 380 <div class="section">381 <div class="stars">382 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.3l-5 4.9L18.2 22 12 18.6 5.8 22 7 14.2 2 9.3l6.9-1L12 2z"/></svg>383 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.3l-5 4.9L18.2 22 12 18.6 5.8 22 7 14.2 2 9.3l6.9-1L12 2z"/></svg>384 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.3l-5 4.9L18.2 22 12 18.6 5.8 22 7 14.2 2 9.3l6.9-1L12 2z"/></svg>385 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.3l-5 4.9L18.2 22 12 18.6 5.8 22 7 14.2 2 9.3l6.9-1L12 2z"/></svg>386 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.3l-5 4.9L18.2 22 12 18.6 5.8 22 7 14.2 2 9.3l6.9-1L12 2z"/></svg>387 </div>388 <div class="review-text">Good quality, good product,</div>389 390 <div class="divider"></div>391 392 <div class="row-link">393 <div>See All Reviews</div>394 <div class="chev"></div>395 </div>396 </div>397 398 <div class="qa-block">399 <div class="qa-title">Questions & Answers(0)</div>400 <div class="qa-sub">If you have any question about the product, please ask!</div>401 <div class="qa-btn">Ask a question</div>402 </div>403 404 <div class="products">405 <div class="header">406 <div class="title">Products related to this item</div>407 <div class="chev"></div>408 </div>409 <div class="product-row">410 <div class="card">411 <div class="img-ph">[IMG: Portable blender with green lid]</div>412 <div class="price">₹3,700.69</div>413 </div>414 <div class="card">415 <div class="img-ph">[IMG: Two portable blenders with fruits]</div>416 <div class="price">₹3,700.69</div>417 </div>418 </div>419 </div>420 421 <div class="desc">422 <h3>Description</h3>423 <p>XIAOMI Mijia Portable Juicer Mixer Electric Mini Blender Fruit Vegetables Quick Juicing Kitchen Food Processor Fitness Travel</p>424 <div class="big-image">425 [IMG: Product banner image]426 <div class="float-top"><div class="up"></div></div>427 </div>428 </div>429 430 <div style="height: 40px;"></div>431 </div>432 433 <!-- Bottom Action Buttons -->434 <div class="action-bar">435 <div class="btn buy-now">Buy Now</div>436 <div class="btn add-cart">Add to Cart</div>437 </div>438 439 <!-- System Gesture Bar -->440 <div class="system-bar">441 <div class="gesture-pill"></div>442 </div>443</div>444</body>445</html>