GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Category - Double Sided Jackets</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #FFFFFF;14 color: #111;15 }16 17 /* Top header area */18 .topbar {19 position: absolute;20 top: 90px;21 left: 40px;22 right: 40px;23 height: 80px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 }28 .icon-btn {29 width: 56px;30 height: 56px;31 display: inline-flex;32 align-items: center;33 justify-content: center;34 cursor: default;35 }36 .icon {37 width: 32px;38 height: 32px;39 }40 .top-actions {41 display: flex;42 gap: 32px;43 }44 45 /* Tabs */46 .tabs {47 position: absolute;48 top: 200px;49 left: 40px;50 right: 40px;51 height: 64px;52 display: flex;53 align-items: center;54 gap: 40px;55 font-size: 32px;56 color: #444;57 }58 .tabs .active {59 color: #000;60 font-weight: 700;61 position: relative;62 }63 .tabs .active::after {64 content: "";65 position: absolute;66 left: 0;67 bottom: -8px;68 width: 90%;69 height: 4px;70 background: #000;71 }72 .tabs .results {73 margin-left: auto;74 color: #444;75 }76 77 /* Search bar */78 .search-bar {79 position: absolute;80 top: 280px;81 left: 40px;82 right: 40px;83 height: 90px;84 border: 2px solid #BDBDBD;85 display: flex;86 align-items: center;87 padding: 0 24px;88 font-size: 34px;89 letter-spacing: 0.5px;90 }91 .search-text {92 flex: 1;93 color: #222;94 }95 96 /* Filter chips */97 .filters {98 position: absolute;99 top: 400px;100 left: 40px;101 display: flex;102 gap: 24px;103 }104 .chip {105 border: 2px solid #BDBDBD;106 padding: 18px 28px;107 font-size: 30px;108 color: #333;109 background: #fff;110 }111 112 /* Product grid */113 .products {114 position: absolute;115 top: 520px;116 left: 0;117 right: 0;118 bottom: 180px;119 display: grid;120 grid-template-columns: 1fr 1fr;121 border-top: 1px solid #DADADA;122 border-left: 1px solid #DADADA;123 }124 .card {125 border-right: 1px solid #DADADA;126 border-bottom: 1px solid #DADADA;127 display: flex;128 flex-direction: column;129 position: relative;130 }131 .image {132 height: 420px;133 background: #E0E0E0;134 border-bottom: 1px solid #BDBDBD;135 display: flex;136 align-items: center;137 justify-content: center;138 color: #757575;139 font-size: 28px;140 }141 .plus-overlay {142 position: absolute;143 bottom: 110px;144 left: 50%;145 transform: translateX(-50%);146 width: 80px;147 height: 80px;148 border-radius: 40px;149 border: 2px solid #BDBDBD;150 background: rgba(255,255,255,0.9);151 display: flex;152 align-items: center;153 justify-content: center;154 }155 .plus-overlay svg { width: 32px; height: 32px; }156 157 .info {158 display: flex;159 align-items: flex-start;160 gap: 12px;161 padding: 26px 26px 24px 26px;162 }163 .details {164 flex: 1;165 }166 .title {167 font-size: 30px;168 letter-spacing: 0.5px;169 text-transform: uppercase;170 margin-bottom: 10px;171 color: #111;172 }173 .price, .old-price {174 font-size: 28px;175 color: #111;176 }177 .old-price {178 color: #777;179 text-decoration: line-through;180 margin-right: 10px;181 }182 .discount-tag {183 display: inline-block;184 background: #F1E66C;185 padding: 6px 10px;186 font-size: 26px;187 color: #111;188 border-radius: 4px;189 }190 .bookmark {191 width: 40px;192 height: 40px;193 display: inline-flex;194 align-items: center;195 justify-content: center;196 }197 .bookmark svg { width: 28px; height: 28px; }198 199 /* Bottom navigation */200 .bottom-nav {201 position: absolute;202 left: 0;203 right: 0;204 bottom: 0;205 height: 160px;206 border-top: 1px solid #E0E0E0;207 background: #fff;208 display: flex;209 align-items: center;210 justify-content: space-around;211 font-size: 32px;212 color: #333;213 }214 .bottom-item {215 position: relative;216 }217 .bottom-item.active::after {218 content: "";219 position: absolute;220 left: 50%;221 transform: translateX(-50%);222 bottom: -14px;223 width: 60px;224 height: 4px;225 background: #000;226 }227</style>228</head>229<body>230<div id="render-target">231 232 <!-- Top bar with close and view icons -->233 <div class="topbar">234 <div class="icon-btn" aria-label="Close">235 <svg class="icon" viewBox="0 0 24 24">236 <path d="M5 5 L19 19 M19 5 L5 19" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>237 </svg>238 </div>239 <div class="top-actions">240 <!-- Split view icon -->241 <div class="icon-btn" aria-label="Split View">242 <svg class="icon" viewBox="0 0 24 24">243 <rect x="3" y="4" width="8" height="16" stroke="#111" stroke-width="2" fill="none"/>244 <rect x="13" y="4" width="8" height="16" stroke="#111" stroke-width="2" fill="none"/>245 </svg>246 </div>247 <!-- Grid icon -->248 <div class="icon-btn" aria-label="Grid View">249 <svg class="icon" viewBox="0 0 24 24">250 <rect x="3" y="4" width="7" height="7" stroke="#111" stroke-width="2" fill="none"/>251 <rect x="14" y="4" width="7" height="7" stroke="#111" stroke-width="2" fill="none"/>252 <rect x="3" y="13" width="7" height="7" stroke="#111" stroke-width="2" fill="none"/>253 <rect x="14" y="13" width="7" height="7" stroke="#111" stroke-width="2" fill="none"/>254 </svg>255 </div>256 </div>257 </div>258 259 <!-- Tabs -->260 <div class="tabs">261 <div class="active">WOMAN</div>262 <div>MAN</div>263 <div>KIDS</div>264 <div>HOME</div>265 <div>MASSIMC</div>266 <div class="results">8 RESULTS</div>267 </div>268 269 <!-- Search bar -->270 <div class="search-bar">271 <div class="search-text">DOUBLE SIDED JACKETS</div>272 <div class="icon-btn" aria-label="Clear Search">273 <svg class="icon" viewBox="0 0 24 24">274 <path d="M5 5 L19 19 M19 5 L5 19" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>275 </svg>276 </div>277 </div>278 279 <!-- Filters -->280 <div class="filters">281 <div class="chip">SIZES</div>282 <div class="chip">COLOR</div>283 </div>284 285 <!-- Product Grid -->286 <div class="products">287 <!-- Card 1 -->288 <div class="card">289 <div class="image">[IMG: Model wearing double sided short jacket]</div>290 <div class="plus-overlay">291 <svg viewBox="0 0 24 24">292 <path d="M12 5 V19 M5 12 H19" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>293 </svg>294 </div>295 <div class="info">296 <div class="details">297 <div class="title">DOUBLE SIDED SHORT JACKET</div>298 <div class="price">109.00 USD</div>299 </div>300 <div class="bookmark" aria-label="Save">301 <svg viewBox="0 0 24 24">302 <path d="M6 4 H18 V20 L12 16 L6 20 Z" stroke="#111" stroke-width="2" fill="none"/>303 </svg>304 </div>305 </div>306 </div>307 308 <!-- Card 2 (discount) -->309 <div class="card">310 <div class="image">[IMG: Model wearing double sided short jacket in black]</div>311 <div class="plus-overlay">312 <svg viewBox="0 0 24 24">313 <path d="M12 5 V19 M5 12 H19" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>314 </svg>315 </div>316 <div class="info">317 <div class="details">318 <div class="title">DOUBLE SIDED SHORT JACKET</div>319 <div>320 <span class="old-price">109.00 USD</span>321 <span class="discount-tag">-35% 69.99 USD</span>322 </div>323 </div>324 <div class="bookmark" aria-label="Save">325 <svg viewBox="0 0 24 24">326 <path d="M6 4 H18 V20 L12 16 L6 20 Z" stroke="#111" stroke-width="2" fill="none"/>327 </svg>328 </div>329 </div>330 </div>331 332 <!-- Card 3 -->333 <div class="card">334 <div class="image">[IMG: Model wearing faux fur biker jacket]</div>335 <div class="plus-overlay">336 <svg viewBox="0 0 24 24">337 <path d="M12 5 V19 M5 12 H19" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>338 </svg>339 </div>340 <div class="info">341 <div class="details">342 <div class="title">FAUX FUR BIKER JACKET</div>343 <div class="price">139.00 USD</div>344 </div>345 <div class="bookmark" aria-label="Save">346 <svg viewBox="0 0 24 24">347 <path d="M6 4 H18 V20 L12 16 L6 20 Z" stroke="#111" stroke-width="2" fill="none"/>348 </svg>349 </div>350 </div>351 </div>352 353 <!-- Card 4 (discount) -->354 <div class="card">355 <div class="image">[IMG: Model wearing double-sided belted jacket]</div>356 <div class="plus-overlay">357 <svg viewBox="0 0 24 24">358 <path d="M12 5 V19 M5 12 H19" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>359 </svg>360 </div>361 <div class="info">362 <div class="details">363 <div class="title">DOUBLE-SIDED BELTED JACKET</div>364 <div>365 <span class="old-price">109.00 USD</span>366 <span class="discount-tag">-35% 69.99 USD</span>367 </div>368 </div>369 <div class="bookmark" aria-label="Save">370 <svg viewBox="0 0 24 24">371 <path d="M6 4 H18 V20 L12 16 L6 20 Z" stroke="#111" stroke-width="2" fill="none"/>372 </svg>373 </div>374 </div>375 </div>376 377 <!-- Card 5 -->378 <div class="card">379 <div class="image">[IMG: Model wearing cream jacket]</div>380 <div class="plus-overlay">381 <svg viewBox="0 0 24 24">382 <path d="M12 5 V19 M5 12 H19" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>383 </svg>384 </div>385 <div class="info">386 <div class="details">387 <div class="title">DOUBLE SIDED LONG JACKET</div>388 <div class="price">149.00 USD</div>389 </div>390 <div class="bookmark" aria-label="Save">391 <svg viewBox="0 0 24 24">392 <path d="M6 4 H18 V20 L12 16 L6 20 Z" stroke="#111" stroke-width="2" fill="none"/>393 </svg>394 </div>395 </div>396 </div>397 398 <!-- Card 6 -->399 <div class="card">400 <div class="image">[IMG: Model in studio wearing jacket]</div>401 <div class="plus-overlay">402 <svg viewBox="0 0 24 24">403 <path d="M12 5 V19 M5 12 H19" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>404 </svg>405 </div>406 <div class="info">407 <div class="details">408 <div class="title">STUDIO DOUBLE SIDED JACKET</div>409 <div class="price">129.00 USD</div>410 </div>411 <div class="bookmark" aria-label="Save">412 <svg viewBox="0 0 24 24">413 <path d="M6 4 H18 V20 L12 16 L6 20 Z" stroke="#111" stroke-width="2" fill="none"/>414 </svg>415 </div>416 </div>417 </div>418 </div>419 420 <!-- Bottom Navigation -->421 <div class="bottom-nav">422 <div class="bottom-item active">HOME</div>423 <div class="bottom-item">MENU</div>424 <div class="bottom-item">ACCOUNT</div>425 <div class="bottom-item">BASKET (0)</div>426 </div>427 428</div>429</body>430</html>