GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>PF Furniture - Mobile UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 }14 15 /* Status bar */16 .status-bar {17 height: 120px;18 background: #2f2731;19 color: #fff;20 padding: 0 32px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 font-weight: 600;25 letter-spacing: 0.5px;26 }27 .status-left { display: flex; align-items: center; gap: 24px; }28 .status-right { display: flex; align-items: center; gap: 22px; color: #fff; opacity: 0.95; }29 30 /* App bar */31 .app-bar {32 height: 140px;33 background: #fff;34 display: flex;35 align-items: center;36 padding: 0 28px;37 border-bottom: 1px solid #ececec;38 }39 .hamburger { width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center; margin-right: 18px; }40 .brand {41 color: #ff6e3d;42 font-size: 74px;43 font-weight: 800;44 margin-right: auto;45 }46 .app-icons { display: flex; align-items: center; gap: 34px; }47 .icon-btn { width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center; color: #444; }48 49 /* Category strip */50 .category-strip {51 padding: 18px 18px 8px;52 overflow-x: auto;53 white-space: nowrap;54 }55 .cats {56 display: flex;57 gap: 26px;58 padding: 6px 10px 20px;59 }60 .cat {61 width: 170px;62 }63 .cat-img {64 width: 170px;65 height: 150px;66 background: #E0E0E0;67 border: 1px solid #BDBDBD;68 border-radius: 14px;69 display: flex;70 align-items: center;71 justify-content: center;72 color: #757575;73 font-size: 24px;74 text-align: center;75 padding: 8px;76 }77 .cat-label {78 text-align: center;79 margin-top: 10px;80 font-size: 28px;81 color: #444;82 line-height: 1.15;83 }84 85 /* Floating phone banner */86 .phone-banner {87 position: absolute;88 top: 540px;89 right: 28px;90 background: #ffffff;91 border: 1px solid #e6e2db;92 border-radius: 18px;93 box-shadow: 0 8px 18px rgba(0,0,0,0.08);94 display: flex;95 align-items: center;96 padding: 24px 26px;97 gap: 20px;98 z-index: 5;99 }100 .phone-title {101 font-size: 34px;102 color: #5b513b;103 font-weight: 700;104 }105 .phone-num {106 font-size: 40px;107 color: #8a5d0a;108 font-weight: 800;109 margin-top: 4px;110 }111 112 /* Hero row */113 .hero-row {114 display: flex;115 gap: 26px;116 padding: 14px 24px 0;117 }118 .hero-left {119 width: 710px;120 height: 720px;121 background: #f7f7f7;122 border: 1px solid #e5e5e5;123 border-radius: 16px;124 position: relative;125 overflow: hidden;126 }127 .hero-right {128 width: 316px;129 height: 720px;130 background: #ffffff;131 border: 1px solid #e5e5e5;132 border-radius: 16px;133 padding: 24px;134 }135 .hero-title {136 position: absolute;137 left: 32px;138 top: 36px;139 font-size: 80px;140 color: #cc3a2e;141 font-weight: 900;142 line-height: 0.95;143 }144 .hero-sub {145 position: absolute;146 left: 32px;147 top: 240px;148 font-size: 40px;149 color: #333;150 font-weight: 700;151 }152 .hero-point {153 position: absolute;154 left: 32px;155 top: 300px;156 font-size: 30px;157 color: #555;158 }159 .hero-img {160 position: absolute;161 right: 0;162 bottom: 0;163 width: 470px;164 height: 420px;165 background: #E0E0E0;166 border: 1px solid #BDBDBD;167 border-top-left-radius: 14px;168 display: flex;169 align-items: center;170 justify-content: center;171 color: #757575;172 }173 .btn-shop {174 position: absolute;175 left: 32px;176 bottom: 36px;177 background: #ff6f3d;178 color: #fff;179 font-weight: 700;180 border-radius: 10px;181 padding: 18px 28px;182 font-size: 30px;183 }184 .brand-card {185 width: 100%;186 height: 100%;187 background: #fafafa;188 border: 1px dashed #d7d7d7;189 border-radius: 12px;190 display: flex;191 align-items: center;192 justify-content: center;193 color: #676767;194 text-align: center;195 padding: 16px;196 font-size: 34px;197 line-height: 1.2;198 }199 200 /* Second row banners */201 .second-row {202 display: flex;203 gap: 26px;204 padding: 26px 24px 0;205 }206 .banner-left {207 width: 710px;208 height: 320px;209 background: #ffffff;210 border: 1px solid #e5e5e5;211 border-radius: 16px;212 padding: 20px;213 display: flex;214 align-items: center;215 gap: 18px;216 }217 .banner-img {218 width: 420px;219 height: 260px;220 background: #E0E0E0;221 border: 1px solid #BDBDBD;222 border-radius: 12px;223 color: #757575;224 display: flex;225 align-items: center;226 justify-content: center;227 }228 .banner-text h3 {229 margin: 0 0 8px 0;230 font-size: 40px;231 color: #333;232 }233 .banner-text p {234 margin: 0;235 font-size: 28px;236 color: #666;237 }238 .banner-right {239 width: 316px;240 height: 320px;241 background: #fff2e1;242 border: 1px solid #e5e5e5;243 border-radius: 16px;244 padding: 24px;245 color: #6b4c1e;246 }247 .banner-right h4 {248 margin: 0 0 12px 0;249 font-size: 36px;250 }251 .banner-right .readmore {252 margin-top: 24px;253 font-weight: 700;254 color: #8a4f0f;255 font-size: 28px;256 }257 258 /* Coupon banner */259 .coupon {260 margin: 26px 24px 210px;261 background: #d8292f;262 color: #fff;263 border-radius: 16px;264 height: 290px;265 position: relative;266 padding: 24px 28px;267 overflow: hidden;268 }269 .coupon h2 {270 margin: 0;271 font-size: 54px;272 font-weight: 900;273 letter-spacing: 1px;274 }275 .coupon p { margin: 12px 0 0 0; font-size: 34px; opacity: 0.95; }276 .coupon .pill {277 position: absolute;278 right: 28px;279 bottom: 24px;280 background: #ff8b57;281 color: #fff;282 padding: 18px 24px;283 border-radius: 12px;284 font-weight: 800;285 font-size: 30px;286 }287 .coupon .close {288 position: absolute;289 right: 24px;290 top: 18px;291 width: 48px;292 height: 48px;293 border-radius: 50%;294 background: rgba(255,255,255,0.2);295 display: flex;296 align-items: center;297 justify-content: center;298 font-weight: 800;299 }300 301 /* Floating chat */302 .chat-pill {303 position: absolute;304 right: 36px;305 bottom: 210px;306 background: #ff8a32;307 color: #fff;308 padding: 18px 22px;309 border-radius: 16px;310 font-weight: 800;311 display: flex;312 align-items: center;313 gap: 14px;314 box-shadow: 0 6px 16px rgba(0,0,0,0.2);315 }316 317 /* Bottom nav */318 .bottom-nav {319 position: absolute;320 left: 0;321 right: 0;322 bottom: 0;323 height: 180px;324 background: #ffffff;325 border-top: 1px solid #ececec;326 display: flex;327 justify-content: space-around;328 align-items: center;329 }330 .nav-item {331 width: 20%;332 display: flex;333 flex-direction: column;334 align-items: center;335 gap: 8px;336 font-size: 26px;337 color: #777;338 }339 .nav-item.active { color: #ff7a3d; font-weight: 800; }340 .nav-icon { width: 54px; height: 54px; }341</style>342</head>343<body>344<div id="render-target">345 346 <!-- Status bar -->347 <div class="status-bar">348 <div class="status-left">349 <div style="font-size:46px;">10:44</div>350 </div>351 <div class="status-right">352 <!-- simple dots and icons -->353 <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="3"/></svg>354 <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">355 <path d="M2 17c4.5-5.5 15.5-5.5 20 0"/><path d="M6 17c2.8-3.5 9.2-3.5 12 0"/><path d="M10 17c1.4-1.5 2.6-1.5 4 0"/><circle cx="12" cy="17" r="1.2" fill="#fff" stroke="none"/>356 </svg>357 <svg width="52" height="52" viewBox="0 0 28 18" fill="none" stroke="#fff" stroke-width="2">358 <rect x="1" y="1" width="22" height="16" rx="2" ry="2" fill="none"></rect>359 <rect x="3" y="3" width="18" height="12" fill="#fff"></rect>360 <rect x="24" y="6" width="3" height="6" fill="#fff" stroke="none"></rect>361 </svg>362 </div>363 </div>364 365 <!-- App bar -->366 <div class="app-bar">367 <div class="hamburger">368 <svg width="48" height="48" viewBox="0 0 24 24" stroke="#333" stroke-width="2" fill="none">369 <path d="M3 6h18M3 12h18M3 18h18"/>370 </svg>371 </div>372 <div class="brand">pf</div>373 <div class="app-icons">374 <div class="icon-btn" aria-label="Search">375 <svg width="44" height="44" viewBox="0 0 24 24" stroke="#333" stroke-width="2" fill="none">376 <circle cx="11" cy="11" r="7"/><path d="M20 20l-4.2-4.2"/>377 </svg>378 </div>379 <div class="icon-btn" aria-label="Wishlist">380 <svg width="44" height="44" viewBox="0 0 24 24" stroke="#333" stroke-width="2" fill="none">381 <path d="M12 21s-7-4.7-9-8.5C1 9 2.7 6 5.8 6c2 0 3 1.2 4.2 2.5C11.2 7.2 12.2 6 14.2 6 17.3 6 19 9 21 12.5 19 16.3 12 21 12 21z"/>382 </svg>383 </div>384 <div class="icon-btn" aria-label="Cart">385 <svg width="44" height="44" viewBox="0 0 24 24" stroke="#333" stroke-width="2" fill="none">386 <path d="M3 6h2l2.5 10h10.5l2-7H7"/><circle cx="10" cy="19" r="1.6"/><circle cx="17" cy="19" r="1.6"/>387 </svg>388 </div>389 </div>390 </div>391 392 <!-- Category strip -->393 <div class="category-strip">394 <div class="cats">395 <div class="cat">396 <div class="cat-img">[IMG: Furniture]</div>397 <div class="cat-label">Furniture</div>398 </div>399 <div class="cat">400 <div class="cat-img">[IMG: Mattress]</div>401 <div class="cat-label">Mattresses</div>402 </div>403 <div class="cat">404 <div class="cat-img">[IMG: Furnishings]</div>405 <div class="cat-label">Furnishings</div>406 </div>407 <div class="cat">408 <div class="cat-img">[IMG: Lamps & Lighting]</div>409 <div class="cat-label">Lamps & Lighting</div>410 </div>411 <div class="cat">412 <div class="cat-img">[IMG: Sofas]</div>413 <div class="cat-label">Sofas & Seating</div>414 </div>415 <div class="cat">416 <div class="cat-img">[IMG: Home Decor]</div>417 <div class="cat-label">Home Decor</div>418 </div>419 <div class="cat">420 <div class="cat-img">[IMG: Storage]</div>421 <div class="cat-label">Storage</div>422 </div>423 </div>424 </div>425 426 <!-- Floating phone banner -->427 <div class="phone-banner">428 <div style="width:70px;height:70px;border-radius:12px;border:1px solid #e1c9a8;display:flex;align-items:center;justify-content:center;background:#fff6e8;">429 <svg width="38" height="38" viewBox="0 0 24 24" fill="#d08b2a">430 <path d="M6.6 10.8c1.6 3 3.6 5 6.6 6.6l2.2-2.2c.3-.3.8-.4 1.2-.2 1 .4 2.2.6 3.4.6.4 0 .8.4.8.8V20c0 .9-.7 1.6-1.6 1.6C9.8 21.6 2.4 14.2 2.4 4.8 2.4 3.9 3.1 3.2 4 3.2h3.6c.4 0 .8.4.8.8 0 1.2.2 2.4.6 3.4.1.4 0 .9-.3 1.2l-2.1 2.2z"/>431 </svg>432 </div>433 <div>434 <div class="phone-title">Talk to a Sales Expert</div>435 <div class="phone-num">022-6116-7373</div>436 </div>437 </div>438 439 <!-- Hero row -->440 <div class="hero-row">441 <div class="hero-left">442 <div class="hero-title">Winter SALE</div>443 <div class="hero-sub">Upto 75% OFF</div>444 <div class="hero-point">Plus assured cashback • Free shipping on thousands of products</div>445 <div class="hero-img">[IMG: Cozy Bed Setup]</div>446 <div class="btn-shop">SHOP NOW →</div>447 </div>448 <div class="hero-right">449 <div class="brand-card">Brand Bazaar • Upto 85% OFF on featured brands (HomeTown, Interio, Spacewood, and more)</div>450 </div>451 </div>452 453 <!-- Second row -->454 <div class="second-row">455 <div class="banner-left">456 <div class="banner-img">[IMG: Modern Bedroom - Spacewood]</div>457 <div class="banner-text">458 <h3>Be a Trendsetter</h3>459 <p>with Spacewood Furniture</p>460 <p style="margin-top:16px;color:#8a8a8a;">Shop Now →</p>461 </div>462 </div>463 <div class="banner-right">464 <h4>How To Glam Your Home This Festive Season</h4>465 <div style="height:150px;background:#ffe7ca;border:1px solid #ffd5a3;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#b87a30;">[IMG: Festive Decor]</div>466 <div class="readmore">Read more →</div>467 </div>468 </div>469 470 <!-- Coupon banner -->471 <div class="coupon">472 <div class="close">✕</div>473 <h2>GET EXTRA 10% OFF</h2>474 <p>On Signing Up — Exclusive Coupon: HELLO</p>475 <div class="pill">Apply on Multiple Purchases</div>476 </div>477 478 <!-- Floating chat -->479 <div class="chat-pill">480 <svg width="34" height="34" viewBox="0 0 24 24" fill="#fff">481 <path d="M3 4h18v12H8l-5 4V4z"/>482 </svg>483 <div>Let’s Chat</div>484 </div>485 486 <!-- Bottom Navigation -->487 <div class="bottom-nav">488 <div class="nav-item active">489 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#ff7a3d" stroke-width="2">490 <path d="M3 11l9-7 9 7v9H3z"/><path d="M9 20v-6h6v6" stroke="#ff7a3d"/>491 </svg>492 <div>Home</div>493 </div>494 <div class="nav-item">495 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2">496 <circle cx="12" cy="8" r="3"/><path d="M4 20c0-4 4-6 8-6s8 2 8 6"/>497 </svg>498 <div>My Account</div>499 </div>500 <div class="nav-item">501 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2">502 <rect x="4" y="5" width="16" height="14" rx="2"/><path d="M8 9h8M8 13h8"/>503 </svg>504 <div>Gift Cards</div>505 </div>506 <div class="nav-item">507 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2">508 <path d="M3 10h18v10H3z"/><path d="M6 10V6h12v4"/>509 </svg>510 <div>Stores</div>511 </div>512 <div class="nav-item">513 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2">514 <circle cx="6" cy="6" r="2"/><circle cx="18" cy="6" r="2"/><circle cx="6" cy="18" r="2"/><circle cx="18" cy="18" r="2"/>515 </svg>516 <div>Categories</div>517 </div>518 </div>519 520</div>521</body>522</html>