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>Mobile UI Mock</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: #f6f7f9;15 color: #111;16 }17 18 /* Scrollable content area */19 .content {20 position: absolute;21 inset: 0;22 overflow-y: auto;23 padding-bottom: 220px; /* space for bottom bar */24 }25 26 /* Status bar */27 .status-bar {28 height: 68px;29 padding: 18px 28px 0 28px;30 display: flex;31 align-items: center;32 justify-content: space-between;33 color: #0b2b2b;34 font-weight: 600;35 font-size: 34px;36 }37 .status-icons {38 display: flex;39 align-items: center;40 gap: 20px;41 }42 .gradient-top {43 background: linear-gradient(180deg, #b9e6e0 0%, #c8ecf9 100%);44 padding-bottom: 24px;45 position: relative;46 box-shadow: 0 2px 4px rgba(0,0,0,0.04) inset;47 }48 49 /* Search bar */50 .search-row {51 padding: 18px 24px 26px 24px;52 }53 .search-bar {54 background: #fff;55 border-radius: 24px;56 height: 92px;57 display: flex;58 align-items: center;59 box-shadow: 0 6px 10px rgba(0,0,0,0.12);60 padding: 0 22px;61 gap: 18px;62 }63 .search-input {64 flex: 1;65 display: flex;66 align-items: center;67 gap: 16px;68 color: #444;69 font-size: 38px;70 }71 .search-input .query { color: #222; font-weight: 600; }72 73 /* Tabs */74 .tabs {75 display: flex;76 background: #fff;77 border-top: 1px solid #e6e6e6;78 border-bottom: 1px solid #e6e6e6;79 height: 110px;80 align-items: center;81 }82 .tab {83 flex: 1;84 text-align: center;85 font-size: 36px;86 color: #666;87 position: relative;88 }89 .tab.active {90 color: #e47911;91 font-weight: 700;92 }93 .tab.active::after {94 content: "";95 position: absolute;96 bottom: 0;97 left: 20%;98 right: 20%;99 height: 10px;100 background: #e47911;101 border-radius: 6px 6px 0 0;102 }103 .tab-right {104 width: 110px;105 display: flex;106 align-items: center;107 justify-content: center;108 border-left: 1px solid #eaeaea;109 }110 111 /* Sponsored product snippet */112 .product-card {113 background: #fff;114 padding: 26px 28px;115 border-bottom: 1px solid #ececec;116 }117 .sponsored-top {118 display: flex;119 justify-content: space-between;120 align-items: center;121 color: #777;122 font-size: 28px;123 margin-top: 16px;124 }125 .title {126 font-size: 40px;127 line-height: 54px;128 font-weight: 700;129 color: #222;130 margin: 16px 0 14px;131 }132 .deal-row {133 display: flex;134 align-items: center;135 gap: 18px;136 margin: 10px 0;137 }138 .pill {139 background: #cc0c39;140 color: #fff;141 font-weight: 700;142 padding: 8px 14px;143 border-radius: 8px;144 font-size: 28px;145 }146 .deal-text { color: #cc0c39; font-weight: 700; font-size: 30px; }147 .price-row {148 display: flex;149 align-items: baseline;150 gap: 16px;151 margin: 8px 0 10px;152 }153 .price {154 font-size: 54px;155 font-weight: 800;156 color: #111;157 }158 .strike {159 text-decoration: line-through;160 color: #888;161 font-size: 34px;162 }163 .prime {164 color: #1e88e5;165 font-weight: 700;166 font-size: 30px;167 }168 169 /* Section header with "Sponsored i" */170 .section-header {171 background: #fff;172 padding: 28px;173 border-top: 10px solid #f0f2f5;174 }175 .section-title {176 font-size: 46px;177 font-weight: 700;178 color: #222;179 margin-bottom: 16px;180 }181 .subtle {182 color: #666;183 font-size: 28px;184 display: flex;185 align-items: center;186 gap: 10px;187 }188 189 /* Brand cards */190 .brand-grid {191 display: grid;192 grid-template-columns: 1fr 1fr;193 gap: 24px;194 padding: 0 28px 28px;195 background: #fff;196 border-bottom: 10px solid #f0f2f5;197 }198 .brand-card {199 border: 1px solid #e6e6e6;200 border-radius: 8px;201 overflow: hidden;202 background: #fff;203 }204 .img-ph {205 width: 100%;206 height: 250px;207 background: #E0E0E0;208 border-bottom: 1px solid #BDBDBD;209 display: flex;210 align-items: center;211 justify-content: center;212 color: #757575;213 font-size: 28px;214 text-align: center;215 padding: 10px;216 }217 .brand-body {218 padding: 22px;219 }220 .logo-row {221 font-weight: 800;222 letter-spacing: 2px;223 color: #333;224 margin-bottom: 10px;225 }226 .brand-title {227 font-size: 34px;228 font-weight: 700;229 margin: 6px 0;230 }231 .brand-link {232 color: #1e88e5;233 font-size: 30px;234 }235 236 /* Customer reviews */237 .reviews {238 background: #fff;239 padding: 28px;240 border-top: 10px solid #f0f2f5;241 }242 .reviews h3 {243 margin: 0 0 18px 0;244 font-size: 46px;245 font-weight: 800;246 }247 .rating-row {248 display: flex;249 align-items: center;250 gap: 16px;251 font-size: 34px;252 color: #333;253 }254 .stars {255 display: inline-flex;256 gap: 6px;257 }258 .ratings-sub {259 color: #666;260 margin-top: 18px;261 font-size: 32px;262 }263 .divider {264 height: 1px;265 background: #e8e8e8;266 margin: 24px 0;267 }268 269 /* Bottom bar */270 .bottom-bar {271 position: absolute;272 left: 0;273 right: 0;274 bottom: 70px;275 background: #fff;276 border-top: 1px solid #e6e6e6;277 padding: 18px 24px;278 display: flex;279 align-items: center;280 justify-content: space-between;281 gap: 18px;282 }283 .bottom-price {284 font-size: 46px;285 font-weight: 800;286 }287 .add-btn {288 background: #ffd814;289 border: none;290 border-radius: 44px;291 padding: 26px 44px;292 font-size: 40px;293 font-weight: 800;294 color: #111;295 box-shadow: 0 4px 0 #c7a600;296 min-width: 360px;297 text-align: center;298 }299 300 /* Home indicator */301 .home-indicator {302 position: absolute;303 bottom: 18px;304 left: 50%;305 transform: translateX(-50%);306 width: 420px;307 height: 12px;308 background: #bfbfbf;309 border-radius: 10px;310 opacity: 0.9;311 }312 313 /* Simple icon helpers */314 .icon {315 width: 44px; height: 44px;316 }317 .icon-small {318 width: 34px; height: 34px;319 }320 .icon-tiny {321 width: 28px; height: 28px;322 }323</style>324</head>325<body>326<div id="render-target">327 <div class="content">328 <div class="gradient-top">329 <div class="status-bar">330 <div>3:49</div>331 <div class="status-icons">332 <!-- WiFi -->333 <svg class="icon-small" viewBox="0 0 24 24" fill="none" stroke="#1b3a3a" stroke-width="2">334 <path d="M2 8a16 16 0 0 1 20 0" />335 <path d="M5 11a11 11 0 0 1 14 0" />336 <path d="M8 14a6 6 0 0 1 8 0" />337 <circle cx="12" cy="18" r="1.6" fill="#1b3a3a"></circle>338 </svg>339 <!-- Battery -->340 <svg class="icon-small" viewBox="0 0 26 26" fill="none" stroke="#1b3a3a" stroke-width="2">341 <rect x="2" y="7" width="18" height="10" rx="2"></rect>342 <rect x="21" y="10" width="3" height="4" rx="1" fill="#1b3a3a"></rect>343 <rect x="4" y="9" width="12" height="6" rx="1" fill="#1b3a3a"></rect>344 </svg>345 </div>346 </div>347 348 <div class="search-row">349 <div class="search-bar">350 <!-- Back -->351 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">352 <path d="M15 18l-6-6 6-6"></path>353 </svg>354 355 <!-- Search input -->356 <div class="search-input">357 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">358 <circle cx="11" cy="11" r="7"></circle>359 <path d="M20 20l-4-4"></path>360 </svg>361 <span class="query">chair</span>362 </div>363 364 <!-- Scan icon -->365 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">366 <path d="M4 8V6a2 2 0 0 1 2-2h2"></path>367 <path d="M20 8V6a2 2 0 0 0-2-2h-2"></path>368 <path d="M4 16v2a2 2 0 0 0 2 2h2"></path>369 <path d="M20 16v2a2 2 0 0 1-2 2h-2"></path>370 </svg>371 </div>372 </div>373 </div>374 375 <div class="tabs">376 <div class="tab">Details</div>377 <div class="tab">Compare</div>378 <div class="tab active">Reviews</div>379 <div class="tab-right">380 <svg class="icon-small" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">381 <path d="M12 19V5"></path>382 <path d="M5 12l7-7 7 7"></path>383 </svg>384 </div>385 </div>386 387 <div class="product-card">388 <div class="img-ph" style="height: 180px;">[IMG: Product tile crop]</div>389 390 <div class="title">Umark Sheesham Wood Sofa Chair Arm Rest Tray Table Stand Natural Brown Finish (Large)</div>391 392 <div class="deal-row">393 <span class="pill">54% off</span>394 <span class="deal-text">Deal of the Day</span>395 </div>396 397 <div class="price-row">398 <div class="price">₹2,754<span style="font-size:26px; vertical-align: super;">00</span></div>399 <div class="strike">₹5,999.00</div>400 <div class="prime">prime</div>401 </div>402 403 <div class="sponsored-top">404 <span>Sponsored</span>405 <span class="subtle">406 <svg class="icon-tiny" viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2">407 <circle cx="12" cy="12" r="9"></circle>408 <path d="M12 8v8"></path>409 <circle cx="12" cy="6" r="1.2" fill="#777"></circle>410 </svg>411 </span>412 </div>413 </div>414 415 <div class="section-header">416 <div class="section-title">Brands in this category on Amazon</div>417 <div class="subtle">418 Sponsored419 <svg class="icon-tiny" viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2">420 <circle cx="12" cy="12" r="9"></circle>421 <path d="M12 8v8"></path>422 <circle cx="12" cy="6" r="1.2" fill="#777"></circle>423 </svg>424 </div>425 </div>426 427 <div class="brand-grid">428 <div class="brand-card">429 <div class="img-ph">[IMG: Chair with person - ad banner]</div>430 <div class="brand-body">431 <div class="logo-row">AVRO FURNITURE</div>432 <div class="brand-title">Premium chairs for your home</div>433 <div class="brand-link">Shop plastic chair</div>434 </div>435 </div>436 437 <div class="brand-card">438 <div class="img-ph">[IMG: Brand ad - office setup]</div>439 <div class="brand-body">440 <div class="logo-row">CELLBELL</div>441 <div class="brand-title">Ergonomic office chairs for home and office.</div>442 <div class="brand-link">Shop CELLBELL</div>443 </div>444 </div>445 </div>446 447 <div class="reviews">448 <h3>Customer reviews</h3>449 <div class="rating-row">450 <span class="stars">451 <!-- 4 filled stars and 1 outline -->452 <svg width="40" height="40" viewBox="0 0 24 24" fill="#f0ad4e"><path d="M12 2l2.9 6 6.6.6-5 4.3 1.5 6.5L12 16l-6 3.4 1.5-6.5-5-4.3 6.6-.6z"/></svg>453 </span>454 <span class="stars">455 <svg width="40" height="40" viewBox="0 0 24 24" fill="#f0ad4e"><path d="M12 2l2.9 6 6.6.6-5 4.3 1.5 6.5L12 16l-6 3.4 1.5-6.5-5-4.3 6.6-.6z"/></svg>456 </span>457 <span class="stars">458 <svg width="40" height="40" viewBox="0 0 24 24" fill="#f0ad4e"><path d="M12 2l2.9 6 6.6.6-5 4.3 1.5 6.5L12 16l-6 3.4 1.5-6.5-5-4.3 6.6-.6z"/></svg>459 </span>460 <span class="stars">461 <svg width="40" height="40" viewBox="0 0 24 24" fill="#f0ad4e"><path d="M12 2l2.9 6 6.6.6-5 4.3 1.5 6.5L12 16l-6 3.4 1.5-6.5-5-4.3 6.6-.6z"/></svg>462 </span>463 <span class="stars">464 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#f0ad4e" stroke-width="2"><path d="M12 2l2.9 6 6.6.6-5 4.3 1.5 6.5L12 16l-6 3.4 1.5-6.5-5-4.3 6.6-.6z"/></svg>465 </span>466 <span>4.2 out of 5</span>467 <span>468 <svg class="icon-small" viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2">469 <path d="M9 6l6 6-6 6"></path>470 </svg>471 </span>472 </div>473 <div class="ratings-sub">2,741 global ratings</div>474 <div class="divider"></div>475 </div>476 </div>477 478 <div class="bottom-bar">479 <div class="bottom-price">₹1,369<span style="font-size:26px; vertical-align: super;">00</span></div>480 <button class="add-btn">Add to Cart</button>481 </div>482 483 <div class="home-indicator"></div>484</div>485</body>486</html>