GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Furniture Category UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8 #render-target {9 position: relative;10 overflow: hidden;11 width: 1080px;12 height: 2400px;13 background: #ffffff;14 }15 16 /* Top hero banner */17 .hero {18 position: relative;19 width: 100%;20 height: 650px;21 background: #E0E0E0;22 border-bottom: 1px solid #d7d7d7;23 }24 .hero .img-placeholder {25 position: absolute;26 left: 0; top: 0; right: 0; bottom: 0;27 display: flex; justify-content: center; align-items: flex-end;28 color: #757575;29 font-size: 28px;30 }31 .status-bar {32 position: absolute;33 top: 20px; left: 24px; right: 24px;34 height: 44px;35 display: flex; align-items: center; justify-content: space-between;36 color: #ffffff;37 font-weight: 600;38 }39 .status-icons {40 display: flex; align-items: center; gap: 18px;41 }42 .status-dot { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.9); }43 .status-bar svg { fill: rgba(255,255,255,0.95); }44 45 .back-btn {46 position: absolute;47 left: 36px;48 top: 270px;49 width: 110px; height: 110px;50 background: #ffffff;51 border-radius: 55px;52 box-shadow: 0 4px 16px rgba(0,0,0,0.15);53 display: flex; align-items: center; justify-content: center;54 }55 .back-btn svg { width: 48px; height: 48px; fill: #000; }56 57 /* Page content */58 .content {59 padding: 40px 36px 0 36px;60 }61 .title {62 font-size: 64px;63 font-weight: 800;64 color: #121212;65 margin: 40px 0 24px 8px;66 }67 68 /* Category cards */69 .cards {70 display: flex;71 gap: 36px;72 overflow-x: auto;73 padding: 0 8px 10px 8px;74 }75 .card {76 flex: 0 0 462px;77 background: #fff;78 border: 1px solid #e6e6e6;79 }80 .card .card-img {81 height: 360px;82 background: #E0E0E0;83 border-bottom: 1px solid #dcdcdc;84 display: flex; align-items: center; justify-content: center;85 color: #757575; font-size: 26px;86 }87 .card .card-label {88 background: #f5f5f5;89 padding: 30px;90 font-size: 34px;91 color: #2b2b2b;92 }93 94 /* Filter chips */95 .filters {96 margin: 28px 8px 18px 8px;97 display: flex;98 gap: 26px;99 overflow-x: auto;100 padding-bottom: 16px;101 }102 .chip {103 height: 100px;104 padding: 0 42px;105 border-radius: 50px;106 display: inline-flex; align-items: center; justify-content: center;107 font-size: 36px;108 color: #111;109 background: #f3f3f3;110 border: 1px solid #e1e1e1;111 white-space: nowrap;112 }113 .chip.primary {114 background: #fff;115 border: 4px solid #111;116 font-weight: 700;117 }118 119 .thin-indicator {120 height: 6px;121 width: 160px;122 background: #111;123 border-radius: 3px;124 margin: 8px 0 0 8px;125 }126 127 /* Availability panel */128 .availability {129 margin: 26px 0 0 0;130 background: #f1f1f1;131 border-top: 1px solid #e5e5e5;132 border-bottom: 1px solid #e5e5e5;133 padding: 36px;134 display: flex; align-items: center; justify-content: space-between;135 }136 .avail-left {137 display: flex; align-items: flex-start; gap: 24px;138 }139 .mini-icons { display: flex; gap: 18px; }140 .mini-icons svg { width: 52px; height: 52px; fill: #1f1f1f; }141 .avail-text .heading {142 font-size: 46px; font-weight: 800; color: #1a1a1a;143 }144 .avail-text .sub {145 font-size: 32px; color: #5c5c5c; margin-top: 12px; max-width: 620px;146 }147 .toggle-pill {148 width: 260px; height: 120px;149 background: #0e0e0e;150 border-radius: 60px;151 display: flex; align-items: center; justify-content: center;152 }153 .toggle-pill svg { width: 56px; height: 56px; fill: #fff; }154 155 .results {156 padding: 30px 36px;157 font-size: 36px;158 color: #222;159 }160 161 /* Bottom navigation */162 .bottom-nav {163 position: absolute;164 bottom: 0; left: 0; right: 0;165 height: 190px;166 background: #ffffff;167 border-top: 1px solid #e6e6e6;168 display: flex; align-items: center; justify-content: space-around;169 padding: 0 40px;170 }171 .nav-item {172 display: flex; flex-direction: column; align-items: center; gap: 10px;173 color: #7a7a7a;174 font-size: 24px;175 }176 .nav-item svg { width: 58px; height: 58px; fill: #9a9a9a; }177 178 /* Home indicator bar */179 .home-indicator {180 position: absolute;181 bottom: 18px; left: 50%;182 transform: translateX(-50%);183 width: 240px; height: 12px;184 background: #000;185 opacity: 0.9;186 border-radius: 6px;187 }188 189 /* Scrollbar hiding for a cleaner look */190 .cards::-webkit-scrollbar,191 .filters::-webkit-scrollbar { height: 0; width: 0; }192</style>193</head>194<body>195<div id="render-target">196 197 <!-- Hero banner with status bar and back button -->198 <div class="hero">199 <div class="status-bar">200 <div class="time">11:10</div>201 <div class="status-icons">202 <div class="status-dot"></div>203 <div class="status-dot"></div>204 <div class="status-dot"></div>205 <svg viewBox="0 0 24 24"><path d="M17 4c2.8 0 5 2.2 5 5s-2.2 5-5 5H7c-2.8 0-5-2.2-5-5s2.2-5 5-5h10z"/></svg>206 <svg viewBox="0 0 24 24"><path d="M13 3v3h-2V3H8l4-3 4 3h-3zM5 9h14l-2 12H7L5 9z"/></svg>207 </div>208 </div>209 <div class="back-btn">210 <svg viewBox="0 0 24 24"><path d="M15.5 5l-8 7 8 7V5z"/></svg>211 </div>212 <div class="img-placeholder">[IMG: Living room banner with white sofa]</div>213 </div>214 215 <div class="content">216 <div class="title">Furniture</div>217 218 <!-- Category cards -->219 <div class="cards">220 <div class="card">221 <div class="card-img">[IMG: Beige sofa]</div>222 <div class="card-label">Sofas & sectionals</div>223 </div>224 <div class="card">225 <div class="card-img">[IMG: Armchair with houndstooth fabric]</div>226 <div class="card-label">Armchairs &<br>accent chairs</div>227 </div>228 <div class="card">229 <div class="card-img">[IMG: White dresser]</div>230 <div class="card-label">Dressers</div>231 </div>232 </div>233 234 <!-- Filter chips -->235 <div class="filters">236 <div class="chip primary">Best match</div>237 <div class="chip">Size</div>238 <div class="chip">Color</div>239 <div class="chip">Price</div>240 <div class="chip">Material</div>241 </div>242 243 <div class="thin-indicator"></div>244 245 <!-- Availability section -->246 <div class="availability">247 <div class="avail-left">248 <div class="mini-icons">249 <!-- store icon -->250 <svg viewBox="0 0 24 24"><path d="M3 9l2-5h14l2 5v2H3V9zm0 4h18v8H3v-8zm4 2v4h4v-4H7z"/></svg>251 <!-- delivery truck icon -->252 <svg viewBox="0 0 24 24"><path d="M3 6h10v9H3V6zm11 3h4l3 3v3h-7V9zM6.5 18a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm11 0a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"/></svg>253 </div>254 <div class="avail-text">255 <div class="heading">Show availability</div>256 <div class="sub">Select store or Zip code to see what’s in stock.</div>257 </div>258 </div>259 <div class="toggle-pill">260 <!-- gear icon -->261 <svg viewBox="0 0 24 24"><path d="M12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm9 4l-2.1.6.2 2.2-2 .9-1.4-1.7-2 .8-1 .2-1-.2-2-.8-1.4 1.7-2-.9.2-2.2L3 12l2.1-.6-.2-2.2 2-.9 1.4 1.7 2-.8 1-.2 1 .2 2 .8 1.4-1.7 2 .9-.2 2.2L21 12z"/></svg>262 </div>263 </div>264 265 <div class="results">Showing 9051 products</div>266 </div>267 268 <!-- Bottom navigation bar -->269 <div class="bottom-nav">270 <div class="nav-item">271 <svg viewBox="0 0 24 24"><path d="M12 3l9 8v9h-6v-6H9v6H3v-9l9-8z"/></svg>272 </div>273 <div class="nav-item">274 <svg viewBox="0 0 24 24"><path d="M10 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm11 20-6-6"/></svg>275 </div>276 <div class="nav-item">277 <svg viewBox="0 0 24 24"><path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"/></svg>278 </div>279 <div class="nav-item">280 <svg viewBox="0 0 24 24"><path d="M12 4.5c-3.5-3.4-9.5 1.1-7 5.7 2.4 4.3 7 8.3 7 8.3s4.6-4 7-8.3c2.5-4.6-3.5-9.1-7-5.7z"/></svg>281 </div>282 <div class="nav-item">283 <svg viewBox="0 0 24 24"><path d="M7 7h10l2 12H5L7 7zm3-4h4v3h-4V3z"/></svg>284 </div>285 </div>286 287 <div class="home-indicator"></div>288</div>289</body>290</html>