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; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16 color: #111;17 }18 19 /* Top gradient header */20 .top-gradient {21 width: 1080px;22 height: 300px;23 background: linear-gradient(180deg, #AEE3E1 0%, #D4EFE6 100%);24 position: relative;25 }26 27 .status-bar {28 position: absolute;29 top: 20px;30 left: 32px;31 right: 32px;32 height: 48px;33 display: flex;34 align-items: center;35 justify-content: space-between;36 color: #1b2430;37 font-size: 36px;38 opacity: 0.9;39 }40 41 .status-icons {42 display: flex;43 align-items: center;44 gap: 18px;45 }46 47 .search-row {48 position: absolute;49 left: 24px;50 right: 24px;51 top: 98px;52 display: flex;53 align-items: center;54 gap: 24px;55 }56 57 .icon-btn {58 width: 72px;59 height: 72px;60 display: flex;61 align-items: center;62 justify-content: center;63 border-radius: 36px;64 color: #263238;65 }66 67 .search-bar {68 flex: 1;69 height: 110px;70 background: #fff;71 border-radius: 24px;72 display: flex;73 align-items: center;74 padding: 0 28px;75 box-shadow: 0 6px 18px rgba(0,0,0,0.12);76 border: 1px solid #e6e6e6;77 }78 79 .search-input {80 flex: 1;81 margin-left: 18px;82 font-size: 42px;83 color: #333;84 }85 86 .tabs {87 height: 108px;88 background: #ffffff;89 display: flex;90 align-items: center;91 border-bottom: 1px solid #e5e7eb;92 }93 .tabs .tab {94 flex: 1;95 text-align: center;96 font-size: 40px;97 color: #2b3a42;98 }99 .tabs .tab.active {100 font-weight: 600;101 position: relative;102 }103 .tabs .tab.active::after {104 content: "";105 position: absolute;106 left: 25%;107 right: 25%;108 bottom: -1px;109 height: 6px;110 background: #0ea5a4;111 border-radius: 3px;112 }113 .tabs .tab.last {114 flex: 0 0 120px;115 }116 117 /* Product teaser grid (top) */118 .teaser-grid {119 display: grid;120 grid-template-columns: 1fr 1fr;121 column-gap: 28px;122 row-gap: 16px;123 padding: 24px 28px 10px 28px;124 }125 .teaser {126 background: #ffffff;127 border-radius: 20px;128 }129 .teaser-title {130 font-size: 38px;131 line-height: 46px;132 color: #2f3b45;133 margin-top: 8px;134 }135 .stars {136 color: #ff9f1a;137 font-size: 36px;138 letter-spacing: 2px;139 display: inline-block;140 vertical-align: middle;141 }142 .rating-count {143 font-size: 32px;144 color: #6b7280;145 margin-left: 10px;146 vertical-align: middle;147 }148 .price {149 font-size: 44px;150 margin-top: 8px;151 }152 153 /* Section headers */154 .section {155 margin-top: 18px;156 padding: 18px 28px 0 28px;157 }158 .section h2 {159 font-size: 56px;160 margin: 8px 0 6px 0;161 color: #111827;162 }163 .section .subtle {164 font-size: 28px;165 color: #6b7280;166 }167 168 /* Horizontal cards in recommendation row */169 .rec-row {170 display: grid;171 grid-template-columns: repeat(3, 1fr);172 column-gap: 36px;173 padding: 8px 28px 0 28px;174 }175 .card {176 background: #fff;177 border-radius: 16px;178 }179 .img-ph {180 width: 100%;181 height: 420px;182 background: #E0E0E0;183 border: 1px solid #BDBDBD;184 border-radius: 12px;185 display: flex;186 align-items: center;187 justify-content: center;188 color: #757575;189 font-size: 32px;190 }191 .card-title {192 font-size: 40px;193 line-height: 46px;194 color: #0f3c4c;195 margin-top: 16px;196 }197 .small-grey {198 font-size: 32px;199 color: #6b7280;200 margin-top: 6px;201 }202 .card .stars {203 font-size: 34px;204 }205 .card-price {206 font-size: 44px;207 color: #c2410c;208 margin-top: 6px;209 }210 211 .divider {212 height: 2px;213 background: #e5e7eb;214 width: 100%;215 margin: 32px 0;216 }217 218 /* Bottom navigation */219 .bottom-nav {220 position: absolute;221 left: 0;222 right: 0;223 bottom: 80px;224 height: 140px;225 background: #ffffff;226 border-top: 1px solid #e5e7eb;227 display: flex;228 align-items: center;229 justify-content: space-around;230 }231 .nav-item {232 display: flex;233 flex-direction: column;234 align-items: center;235 color: #0f766e;236 font-size: 28px;237 gap: 8px;238 }239 .nav-item span {240 font-size: 26px;241 color: #4b5563;242 }243 .nav-item.active {244 color: #0ea5a4;245 }246 247 .gesture {248 position: absolute;249 left: 50%;250 transform: translateX(-50%);251 bottom: 24px;252 width: 260px;253 height: 12px;254 background: #cfcfcf;255 border-radius: 8px;256 }257 258 /* Utility icon color */259 .icon {260 width: 48px;261 height: 48px;262 }263 264 /* Currency symbol */265 .rs { font-family: Arial, sans-serif; }266</style>267</head>268<body>269<div id="render-target">270 <div class="top-gradient">271 <div class="status-bar">272 <div>3:48</div>273 <div class="status-icons">274 <!-- signal -->275 <svg width="38" height="38" viewBox="0 0 24 24" fill="#2c3e50" aria-hidden="true">276 <path d="M2 20h2v-2H2v2zm3-3h2v-4H5v4zm3-5h2V6H8v6zm3-7h2V3h-2v2zm3 2h2V2h-2v5zm3-3v14h2V4h-2z"/>277 </svg>278 <!-- wifi -->279 <svg width="38" height="38" viewBox="0 0 24 24" fill="#2c3e50" aria-hidden="true">280 <path d="M12 18c.9 0 1.7.37 2.29.97L12 22l-2.29-3.03C10.3 18.37 11.1 18 12 18zm0-4c2.21 0 4.2.9 5.66 2.34l-1.41 1.41C15.14 16.63 13.64 16 12 16s-3.14.63-4.24 1.75l-1.41-1.41C7.8 14.9 9.79 14 12 14zm0-4c3.87 0 7.39 1.57 9.9 4.1l-1.41 1.41C18.3 9.31 9.7 9.31 3.5 15.5L2.1 14.1C4.62 11.57 8.13 10 12 10z"/>281 </svg>282 <!-- battery -->283 <svg width="44" height="44" viewBox="0 0 24 24" aria-hidden="true">284 <rect x="2" y="7" width="18" height="10" rx="2" ry="2" fill="#2c3e50"></rect>285 <rect x="20" y="10" width="2" height="4" fill="#2c3e50"></rect>286 <rect x="4" y="9" width="12" height="6" fill="#9be1d9"></rect>287 </svg>288 </div>289 </div>290 291 <div class="search-row">292 <div class="icon-btn">293 <!-- Back arrow -->294 <svg class="icon" viewBox="0 0 24 24" fill="#263238">295 <path d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>296 </svg>297 </div>298 <div class="search-bar">299 <!-- search icon -->300 <svg class="icon" viewBox="0 0 24 24" fill="#374151" aria-hidden="true">301 <path d="M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 5 1.5-1.5-5-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>302 </svg>303 <div class="search-input">chair</div>304 <!-- scan icon -->305 <svg class="icon" viewBox="0 0 24 24" fill="#374151" aria-hidden="true">306 <path d="M3 5h4V3H3a2 2 0 0 0-2 2v4h2V5zm0 10H1v4a2 2 0 0 0 2 2h4v-2H3v-4zm20-8V5a2 2 0 0 0-2-2h-4v2h4v4h2zM19 21h-4v2h4a2 2 0 0 0 2-2v-4h-2v4zM7 8h10v8H7z"/>307 </svg>308 </div>309 </div>310 </div>311 312 <div class="tabs">313 <div class="tab active">Details</div>314 <div class="tab">Compare</div>315 <div class="tab">Reviews</div>316 <div class="tab last">317 <svg width="46" height="46" viewBox="0 0 24 24" fill="#222">318 <path d="M7 14l5-5 5 5z"/>319 </svg>320 </div>321 </div>322 323 <!-- Top teaser grid with titles, ratings and prices -->324 <div class="teaser-grid">325 <div class="teaser">326 <div class="teaser-title">Ikea ADDE Chair (Stainless Steel, Black, Pack of 2)</div>327 <div>328 <span class="stars">★★★★☆</span>329 <span class="rating-count">119</span>330 </div>331 <div class="price">₹2,539.00</div>332 </div>333 <div class="teaser">334 <div class="teaser-title">IKEA Marius Durable Stool - 45 cm - by STOCKLAND...</div>335 <div>336 <span class="stars">★★★★☆</span>337 <span class="rating-count">413</span>338 </div>339 <div class="price">₹648.00</div>340 </div>341 </div>342 343 <!-- You might also like -->344 <div class="section">345 <h2>You might also like</h2>346 <div class="subtle">Sponsored</div>347 </div>348 349 <div class="rec-row">350 <div class="card">351 <div class="img-ph">[IMG: Black high back mesh office chair]</div>352 <div class="card-title">ACE ENTERPRISES High Back Mesh E...</div>353 <div class="small-grey">354 <span class="stars">★★★★★</span>355 <span>2 reviews</span>356 </div>357 <div class="card-price">₹4,999</div>358 </div>359 <div class="card">360 <div class="img-ph">[IMG: Bamboo cane single seater chair]</div>361 <div class="card-title">My Crystal India Bamboo Cane Sof...</div>362 <div class="small-grey">363 <span class="stars">★★★★★</span>364 <span>1 review</span>365 </div>366 <div class="card-price">₹3,999 <span style="color:#2563eb;font-size:30px;vertical-align:middle;">prime</span></div>367 </div>368 <div class="card">369 <div class="img-ph">[IMG: Outdoor rattan furniture set]</div>370 <div class="card-title">MERRY FAIR Piece Ratta...</div>371 <div class="small-grey">372 <span class="stars">★★★★☆</span>373 </div>374 <div class="card-price">₹55,999</div>375 </div>376 </div>377 378 <div class="divider"></div>379 380 <div class="section" style="padding-top:0;">381 <h2>Customers who viewed this item also viewed</h2>382 </div>383 384 <div class="rec-row" style="margin-top: 8px;">385 <div class="card">386 <div class="img-ph" style="height: 340px;">[IMG: Black perforated plastic chair]</div>387 <div class="card-title">Minimal Plastic Chair (Black)</div>388 <div class="card-price">₹999</div>389 </div>390 <div class="card">391 <div class="img-ph" style="height: 340px;">[IMG: Grey perforated plastic chair]</div>392 <div class="card-title">Minimal Plastic Chair (Grey)</div>393 <div class="card-price">₹999</div>394 </div>395 <div class="card">396 <div class="img-ph" style="height: 340px;">[IMG: White perforated plastic chair]</div>397 <div class="card-title">Minimal Plastic Chair (White)</div>398 <div class="card-price">₹999</div>399 </div>400 </div>401 402 <!-- Bottom navigation -->403 <div class="bottom-nav">404 <div class="nav-item active">405 <svg width="48" height="48" viewBox="0 0 24 24" fill="#0ea5a4">406 <path d="M12 3l9 8h-3v9H6v-9H3z"/>407 </svg>408 <span>Home</span>409 </div>410 <div class="nav-item">411 <svg width="48" height="48" viewBox="0 0 24 24" fill="#0f766e">412 <path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4.33 0-8 2.17-8 5v1h16v-1c0-2.83-3.67-5-8-5z"/>413 </svg>414 <span>Account</span>415 </div>416 <div class="nav-item">417 <svg width="48" height="48" viewBox="0 0 24 24" fill="#0f766e">418 <path d="M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z"/>419 </svg>420 <span>Layers</span>421 </div>422 <div class="nav-item">423 <svg width="48" height="48" viewBox="0 0 24 24" fill="#0f766e">424 <path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2S15.9 22 17 22s2-.9 2-2-.9-2-2-2zM7.16 14l.84-2h8l2-7H6.21l-.94-2H1v2h3l3.6 7.59L6.24 16c-.19.55.23 1 .82 1H19v-2H7.97l.19-.5z"/>425 </svg>426 <span>Cart (0)</span>427 </div>428 <div class="nav-item">429 <svg width="48" height="48" viewBox="0 0 24 24" fill="#0f766e">430 <path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/>431 </svg>432 <span>Menu</span>433 </div>434 </div>435 436 <div class="gesture"></div>437</div>438</body>439</html>