GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>3 Seater Sofa - Mock UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, 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 position: absolute;18 top: 20px;19 left: 0;20 right: 0;21 height: 60px;22 padding: 0 36px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 color: #333;27 font-weight: 600;28 font-size: 34px;29 }30 .status-right {31 display: flex;32 align-items: center;33 gap: 22px;34 }35 36 /* Back + Title */37 .back-row {38 position: absolute;39 top: 110px;40 left: 36px;41 right: 36px;42 display: flex;43 align-items: center;44 gap: 22px;45 }46 .back-btn {47 width: 64px;48 height: 64px;49 border-radius: 32px;50 display: flex;51 align-items: center;52 justify-content: center;53 }54 .page-title {55 margin-top: 20px;56 padding: 0 36px;57 font-size: 72px;58 font-weight: 700;59 color: #222;60 line-height: 1.1;61 }62 63 /* Category cards */64 .category-row {65 margin: 24px 36px 0 36px;66 display: flex;67 gap: 24px;68 }69 .category-card {70 flex: 1;71 border-radius: 8px;72 overflow: hidden;73 background: #fafafa;74 }75 .category-img {76 height: 360px;77 background: #E0E0E0;78 border-bottom: 1px solid #BDBDBD;79 display: flex;80 align-items: center;81 justify-content: center;82 color: #757575;83 font-size: 32px;84 font-weight: 600;85 }86 .category-label {87 padding: 34px;88 font-size: 44px;89 color: #222;90 background: #f7f7f7;91 }92 93 /* Filter chips */94 .filter-row {95 margin: 28px 36px 0 36px;96 display: flex;97 gap: 22px;98 }99 .chip {100 padding: 28px 40px;101 border-radius: 52px;102 background: #f1f1f1;103 color: #222;104 font-size: 40px;105 white-space: nowrap;106 }107 .chip.selected {108 background: #ffffff;109 border: 4px solid #111;110 box-shadow: 0 0 0 2px #ddd inset;111 }112 113 .divider {114 height: 6px;115 background: #e9e9e9;116 margin: 26px 36px 0 36px;117 border-radius: 3px;118 }119 120 /* Availability section */121 .availability {122 margin: 26px 0 0 0;123 background: #f4f4f4;124 padding: 40px 36px;125 }126 .availability .headline {127 display: flex;128 align-items: center;129 gap: 22px;130 font-size: 46px;131 font-weight: 700;132 color: #1a1a1a;133 }134 .availability .sub {135 margin-top: 18px;136 font-size: 36px;137 color: #555;138 max-width: 800px;139 }140 .availability .control {141 position: absolute;142 right: 36px;143 top: 820px;144 width: 260px;145 height: 140px;146 background: #0f0f0f;147 border-radius: 80px;148 display: flex;149 align-items: center;150 justify-content: center;151 }152 153 /* Results header */154 .results-row {155 margin: 34px 36px 0 36px;156 display: flex;157 align-items: center;158 justify-content: space-between;159 color: #333;160 }161 .results-row .text {162 font-size: 44px;163 }164 .view-toggles {165 display: flex;166 gap: 16px;167 }168 .toggle-btn {169 width: 160px;170 height: 92px;171 border-radius: 16px;172 border: 2px solid #999;173 display: flex;174 align-items: center;175 justify-content: center;176 background: #fff;177 }178 179 /* Top seller badge */180 .badge {181 margin: 26px 36px;182 display: inline-block;183 background: #d94252;184 color: #fff;185 padding: 22px 32px;186 border-radius: 16px;187 font-size: 40px;188 font-weight: 700;189 }190 191 /* First product preview image */192 .product-hero {193 margin: 0 0 0 0;194 width: 1080px;195 height: 520px;196 background: #E0E0E0;197 border-top: 1px solid #BDBDBD;198 display: flex;199 align-items: center;200 justify-content: center;201 color: #757575;202 font-size: 36px;203 font-weight: 600;204 }205 206 /* Bottom navigation */207 .bottom-nav {208 position: absolute;209 bottom: 0;210 left: 0;211 right: 0;212 height: 160px;213 border-top: 1px solid #ddd;214 background: #ffffff;215 display: flex;216 align-items: center;217 justify-content: space-around;218 }219</style>220</head>221<body>222<div id="render-target">223 224 <!-- Status bar -->225 <div class="status-bar">226 <div>8:44</div>227 <div class="status-right">228 <!-- Wi-Fi icon -->229 <svg width="44" height="44" viewBox="0 0 24 24">230 <path d="M2 8c5-5 15-5 20 0" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>231 <path d="M5 11c3.5-3.5 10.5-3.5 14 0" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>232 <path d="M8 14c2-2 6-2 8 0" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>233 <circle cx="12" cy="18" r="1.8" fill="#333"/>234 </svg>235 <!-- Battery icon -->236 <svg width="50" height="44" viewBox="0 0 28 18">237 <rect x="1" y="3" width="22" height="12" rx="2" ry="2" stroke="#333" stroke-width="2" fill="none"/>238 <rect x="24" y="6" width="3" height="6" fill="#333"/>239 <rect x="3" y="5" width="16" height="8" fill="#333"/>240 </svg>241 </div>242 </div>243 244 <!-- Back button row -->245 <div class="back-row">246 <div class="back-btn">247 <svg width="44" height="44" viewBox="0 0 24 24">248 <path d="M15 19L8 12l7-7" stroke="#111" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>249 </svg>250 </div>251 </div>252 253 <!-- Page title -->254 <div class="page-title">"3 seater sofa"</div>255 256 <!-- Category cards -->257 <div class="category-row">258 <div class="category-card">259 <div class="category-img">[IMG: Light fabric sofa]</div>260 <div class="category-label">Sofas</div>261 </div>262 <div class="category-card">263 <div class="category-img">[IMG: Bed with white duvet]</div>264 <div class="category-label">Beds</div>265 </div>266 </div>267 268 <!-- Filter chips -->269 <div class="filter-row">270 <div class="chip selected">Best match</div>271 <div class="chip">Price</div>272 <div class="chip">Number of seats</div>273 </div>274 275 <div class="divider"></div>276 277 <!-- Availability section -->278 <div class="availability">279 <div class="headline">280 <!-- store and truck simple icons -->281 <svg width="54" height="54" viewBox="0 0 24 24">282 <rect x="3" y="6" width="18" height="12" stroke="#333" stroke-width="2" fill="none"/>283 <rect x="6" y="9" width="5" height="5" fill="#333"/>284 </svg>285 <svg width="54" height="54" viewBox="0 0 24 24">286 <rect x="2" y="8" width="13" height="8" stroke="#333" stroke-width="2" fill="none"/>287 <rect x="15" y="10" width="6" height="6" stroke="#333" stroke-width="2" fill="none"/>288 <circle cx="7" cy="18" r="2" fill="#333"/>289 <circle cx="18" cy="18" r="2" fill="#333"/>290 </svg>291 <span>Show availability</span>292 </div>293 <div class="sub">Select store or postal code to see what’s in stock.</div>294 </div>295 296 <!-- Dark toggle on the right with gear -->297 <div class="availability control">298 <svg width="64" height="64" viewBox="0 0 24 24">299 <circle cx="12" cy="12" r="5" stroke="#fff" stroke-width="2" fill="none"/>300 <path d="M12 1v4M12 19v4M1 12h4M19 12h4M4.2 4.2l2.8 2.8M17 17l2.8 2.8M4.2 19.8l2.8-2.8M17 7l2.8-2.8" stroke="#fff" stroke-width="2" stroke-linecap="round"/>301 </svg>302 </div>303 304 <!-- Results header -->305 <div class="results-row">306 <div class="text">Showing 147 products</div>307 <div class="view-toggles">308 <div class="toggle-btn">309 <!-- grid icon -->310 <svg width="64" height="64" viewBox="0 0 24 24">311 <rect x="3" y="3" width="7" height="7" stroke="#333" stroke-width="2" fill="none"/>312 <rect x="14" y="3" width="7" height="7" stroke="#333" stroke-width="2" fill="none"/>313 <rect x="3" y="14" width="7" height="7" stroke="#333" stroke-width="2" fill="none"/>314 <rect x="14" y="14" width="7" height="7" stroke="#333" stroke-width="2" fill="none"/>315 </svg>316 </div>317 <div class="toggle-btn">318 <!-- list icon -->319 <svg width="64" height="64" viewBox="0 0 24 24">320 <rect x="3" y="4" width="18" height="4" fill="#333"/>321 <rect x="3" y="10" width="18" height="4" fill="#333"/>322 <rect x="3" y="16" width="18" height="4" fill="#333"/>323 </svg>324 </div>325 </div>326 </div>327 328 <!-- Top seller badge -->329 <div class="badge">Top seller</div>330 331 <!-- First product preview (partial sofa image area) -->332 <div class="product-hero">[IMG: Dark 3-seater sofa - product card]</div>333 334 <!-- Bottom Navigation -->335 <div class="bottom-nav">336 <!-- Home -->337 <svg width="60" height="60" viewBox="0 0 24 24">338 <path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-9z" stroke="#333" stroke-width="2" fill="none"/>339 <path d="M9 21v-6h6v6" stroke="#333" stroke-width="2" fill="none"/>340 </svg>341 <!-- Search -->342 <svg width="60" height="60" viewBox="0 0 24 24">343 <circle cx="11" cy="11" r="7" stroke="#333" stroke-width="2" fill="none"/>344 <path d="M21 21l-5-5" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>345 </svg>346 <!-- Store/Building -->347 <svg width="60" height="60" viewBox="0 0 24 24">348 <rect x="3" y="9" width="18" height="12" stroke="#333" stroke-width="2" fill="none"/>349 <rect x="6" y="12" width="4" height="6" fill="#333"/>350 <rect x="12" y="12" width="4" height="6" fill="#333"/>351 <path d="M2 9h20l-2-5H4z" stroke="#333" stroke-width="2" fill="none"/>352 </svg>353 <!-- Heart -->354 <svg width="60" height="60" viewBox="0 0 24 24">355 <path d="M12 21s-7-4.5-9-8.5C1 9 3 6 6 6c2 0 3.5 1 6 3 2.5-2 4-3 6-3 3 0 5 3 3 6.5-2 4-9 8.5-9 8.5z" stroke="#333" stroke-width="2" fill="none"/>356 </svg>357 <!-- Cart -->358 <svg width="60" height="60" viewBox="0 0 24 24">359 <path d="M3 4h2l2 12h10l2-8H7" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>360 <circle cx="10" cy="20" r="2" fill="#333"/>361 <circle cx="17" cy="20" r="2" fill="#333"/>362 </svg>363 </div>364 365</div>366</body>367</html>