GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>2 seater recliners - UI Mock</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 border-radius: 24px;15 box-shadow: 0 6px 24px rgba(0,0,0,0.15);16 }17 /* Status bar */18 .status-bar {19 height: 120px;20 background: #2d2732;21 color: #ffffff;22 display: flex;23 align-items: center;24 padding: 0 36px;25 font-weight: 600;26 font-size: 34px;27 letter-spacing: 0.4px;28 }29 .status-right {30 margin-left: auto;31 display: flex;32 align-items: center;33 gap: 26px;34 }35 .dot { width: 12px; height: 12px; background:#ffffff; border-radius: 50%; opacity: 0.7; }36 .battery {37 width: 60px; height: 28px; border: 4px solid #fff; border-radius: 6px; position: relative;38 }39 .battery::after {40 content: ""; position: absolute; right: -10px; top: 8px; width: 8px; height: 12px; background: #fff; border-radius: 2px;41 }42 .battery .level { width: 34px; height: 18px; background: #8bc34a; position: absolute; left: 6px; top: 3px; border-radius: 3px; }43 44 /* App header */45 .app-header {46 height: 112px;47 background: #fff;48 display: flex;49 align-items: center;50 padding: 0 24px;51 border-bottom: 1px solid #e6e6e6;52 }53 .title { font-size: 44px; font-weight: 700; color: #1b1b1b; margin-left: 18px; }54 .header-actions { margin-left: auto; display: flex; gap: 34px; }55 .icon-btn { width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; border-radius: 18px; }56 .icon { width: 48px; height: 48px; fill: none; stroke: #333; stroke-width: 4px; }57 58 /* Filters bar */59 .filters {60 display: flex;61 padding: 0;62 height: 120px;63 background: #ffffff;64 border-bottom: 1px solid #eee;65 }66 .filter-item {67 flex: 1;68 padding: 20px 30px;69 display: flex;70 flex-direction: column;71 justify-content: center;72 gap: 8px;73 border-right: 1px solid #f0f0f0;74 }75 .filter-item:last-child { border-right: none; }76 .filter-title { font-size: 36px; color: #333; display: flex; align-items: center; gap: 16px; font-weight: 700; }77 .filter-sub { font-size: 28px; color: #7a7a7a; }78 79 .content {80 padding: 24px 24px 0 24px;81 }82 .section-title {83 font-size: 40px;84 font-weight: 800;85 color: #222;86 margin: 18px 0 12px;87 }88 89 /* Product grid */90 .grid { display: flex; gap: 24px; }91 .card {92 width: calc(50% - 12px);93 }94 .img-box {95 width: 100%;96 height: 540px;97 background: #E0E0E0;98 border: 1px solid #BDBDBD;99 border-radius: 12px;100 display: flex; align-items: center; justify-content: center;101 color: #757575; font-size: 34px; text-align: center; position: relative;102 }103 .tag-new {104 position: absolute;105 left: 0; top: 0;106 background: #ff8a3d;107 color: #fff;108 font-weight: 800;109 font-size: 30px;110 padding: 10px 16px;111 border-top-left-radius: 12px;112 border-bottom-right-radius: 10px;113 }114 .fav-circle {115 position: absolute;116 right: 16px; bottom: 16px;117 width: 66px; height: 66px;118 background: #ffffff;119 border-radius: 50%;120 box-shadow: 0 2px 8px rgba(0,0,0,0.2);121 display: flex; align-items: center; justify-content: center;122 border: 1px solid #ddd;123 }124 .heart {125 width: 34px; height: 34px; stroke: #777; stroke-width: 4px; fill: none;126 }127 .card-title {128 font-size: 36px;129 font-weight: 800;130 color: #222;131 line-height: 1.25;132 margin-top: 18px;133 }134 .brand { font-size: 30px; color: #555; margin-top: 10px; }135 .deal { font-size: 32px; color: #1aa34a; font-weight: 800; margin-top: 12px; }136 .price {137 font-size: 44px; font-weight: 900; color: #1b1b1b; margin-top: 6px;138 }139 .old-price { font-size: 34px; color: #9e9e9e; text-decoration: line-through; margin-left: 14px; font-weight: 600; }140 .save { font-size: 30px; color: #2e7d32; margin-top: 10px; }141 142 /* Banner */143 .banner {144 margin: 24px 0;145 width: 100%;146 height: 230px;147 border-radius: 12px;148 background: #E0E0E0;149 border: 1px solid #BDBDBD;150 display: flex; align-items: center; justify-content: center; color: #555; font-size: 34px; position: relative;151 }152 .banner-overlay {153 position: absolute; right: 24px; top: 24px;154 color: #1f1f1f; font-size: 40px; font-weight: 800;155 }156 157 /* Tiles below banner */158 .tiles {159 display: flex; gap: 24px;160 }161 .tile {162 width: calc(50% - 12px);163 height: 360px;164 border-radius: 12px;165 background: #E0E0E0;166 border: 1px solid #BDBDBD;167 display: flex; align-items: center; justify-content: center; color: #666; font-size: 32px; position: relative;168 }169 .ribbon {170 position: absolute; left: 0; top: 0;171 background: #ff6e66; color: #fff; font-weight: 800; font-size: 30px;172 padding: 12px 18px; border-top-left-radius: 12px; border-bottom-right-radius: 12px;173 }174 175 /* Floating chat */176 .chat {177 position: absolute;178 right: 24px;179 top: 1460px;180 background: #ff7c2f;181 color: #fff;182 font-weight: 800;183 font-size: 34px;184 padding: 18px 26px;185 border-radius: 18px;186 box-shadow: 0 6px 16px rgba(0,0,0,0.25);187 display: inline-flex; align-items: center; gap: 16px;188 }189 .chat-bubble {190 width: 38px; height: 32px;191 border: 3px solid #fff; border-radius: 6px; position: relative;192 }193 .chat-bubble::after {194 content: ""; position: absolute; bottom: -8px; left: 8px; width: 16px; height: 16px;195 border-left: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(45deg);196 }197 198 /* Bottom navigation */199 .bottom-nav {200 position: absolute; bottom: 120px; left: 0; right: 0;201 height: 160px; border-top: 1px solid #e9e9e9; background: #fff;202 display: flex; align-items: center; justify-content: space-around;203 }204 .nav-item {205 display: flex; flex-direction: column; align-items: center; gap: 12px; color: #333; font-size: 30px;206 }207 .nav-item .icon { stroke: #333; }208 .nav-item.active { color: #ff7c2f; font-weight: 800; }209 .nav-item.active .icon { stroke: #ff7c2f; }210 .home-pill {211 position: absolute; bottom: 40px; left: 50%;212 transform: translateX(-50%);213 width: 240px; height: 16px; background: #000; opacity: 0.75; border-radius: 8px;214 }215</style>216</head>217<body>218<div id="render-target">219 220 <!-- Status Bar -->221 <div class="status-bar">222 10:46223 <div class="status-right">224 <div class="dot"></div>225 <div class="dot"></div>226 <div class="battery"><div class="level"></div></div>227 </div>228 </div>229 230 <!-- App Header -->231 <div class="app-header">232 <div class="icon-btn" aria-label="Back">233 <svg class="icon" viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7" /></svg>234 </div>235 <div class="title">2 seater recliners</div>236 <div class="header-actions">237 <div class="icon-btn" aria-label="Search">238 <svg class="icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4"/></svg>239 </div>240 <div class="icon-btn" aria-label="Wishlist">241 <svg class="icon" viewBox="0 0 24 24"><path d="M12 20s-7-4.5-7-9.5a4.5 4.5 0 019 0 4.5 4.5 0 019 0C21 15.5 12 20 12 20z"/></svg>242 </div>243 <div class="icon-btn" aria-label="Cart">244 <svg class="icon" viewBox="0 0 24 24"><path d="M3 6h2l3 12h10l3-9H7"/><circle cx="10" cy="20" r="2"/><circle cx="18" cy="20" r="2"/></svg>245 </div>246 </div>247 </div>248 249 <!-- Filters Bar -->250 <div class="filters">251 <div class="filter-item">252 <div class="filter-title">253 Categories254 <svg width="26" height="26" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#777" stroke-width="3" fill="none"/></svg>255 </div>256 <div class="filter-sub">(30)</div>257 </div>258 <div class="filter-item">259 <div class="filter-title">Sort By</div>260 <div class="filter-sub">Relevance</div>261 </div>262 <div class="filter-item">263 <div class="filter-title">Filter</div>264 <div class="filter-sub">0 Filters Applied</div>265 </div>266 </div>267 268 <div class="content">269 <div class="section-title">Showing Results for "2 seater recliners"</div>270 271 <!-- Product Grid -->272 <div class="grid">273 <!-- Card 1 -->274 <div class="card">275 <div class="img-box">276 <div class="tag-new">New</div>277 [IMG: Brown 2-seater recliner sofa in room]278 <div class="fav-circle">279 <svg class="heart" viewBox="0 0 24 24"><path d="M12 20s-7-4.5-7-9.5a4.5 4.5 0 019 0 4.5 4.5 0 019 0C21 15.5 12 20 12 20z"/></svg>280 </div>281 </div>282 <div class="card-title">Milan Fabric 2 Seater Manual Recliner Sofa in Brown Colour</div>283 <div class="brand">By Royaloak</div>284 <div class="deal">Today's Deal</div>285 <div class="price">₹61,000 <span class="old-price">₹100,000</span></div>286 <div class="save">You Save ₹39,000 (39% off)</div>287 </div>288 289 <!-- Card 2 -->290 <div class="card">291 <div class="img-box">292 <div class="tag-new">New</div>293 [IMG: Baleno fabric 2-seater manual recliner in brown]294 <div class="fav-circle">295 <svg class="heart" viewBox="0 0 24 24"><path d="M12 20s-7-4.5-7-9.5a4.5 4.5 0 019 0 4.5 4.5 0 019 0C21 15.5 12 20 12 20z"/></svg>296 </div>297 </div>298 <div class="card-title">Baleno Fabric 2 Seater Manual Recliner in Brown Colour</div>299 <div class="brand">By Royaloak</div>300 <div class="deal">Today's Deal</div>301 <div class="price">₹35,000 <span class="old-price">₹65,000</span></div>302 <div class="save">You Save ₹30,000 (46% off)</div>303 </div>304 </div>305 306 <!-- Winter Sale Banner -->307 <div class="banner">308 [IMG: Snuggle-up winter sale promotion with free shipping and cashback]309 <div class="banner-overlay">Upto 75% OFF</div>310 </div>311 312 <!-- Tiles -->313 <div class="tiles">314 <div class="tile">315 <div class="ribbon">Extra 5% Coupon Inside</div>316 [IMG: Living room decor art frame]317 </div>318 <div class="tile">319 [IMG: World map wall art with brick texture]320 </div>321 </div>322 </div>323 324 <!-- Floating Chat -->325 <div class="chat">326 <div class="chat-bubble"></div>327 Let's Chat328 </div>329 330 <!-- Bottom Navigation -->331 <div class="bottom-nav">332 <div class="nav-item active">333 <svg class="icon" viewBox="0 0 24 24"><path d="M3 11l9-7 9 7v9H3z" /></svg>334 Home335 </div>336 <div class="nav-item">337 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/></svg>338 My Account339 </div>340 <div class="nav-item">341 <svg class="icon" viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12" rx="2"/><path d="M4 10h16"/></svg>342 Gift Cards343 </div>344 <div class="nav-item">345 <svg class="icon" viewBox="0 0 24 24"><path d="M5 3h14v6H5zM5 12h7v9H5zM14 12h5v9h-5z"/></svg>346 Stores347 </div>348 <div class="nav-item">349 <svg class="icon" viewBox="0 0 24 24"><circle cx="6" cy="7" r="3"/><circle cx="18" cy="7" r="3"/><circle cx="6" cy="17" r="3"/><circle cx="18" cy="17" r="3"/></svg>350 Categories351 </div>352 </div>353 354 <!-- iOS-like home pill -->355 <div class="home-pill"></div>356</div>357</body>358</html>