GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8" />5<meta name="viewport" content="width=1080, initial-scale=1.0" />6<title>Double Sided Jackets</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: "Helvetica Neue", Arial, sans-serif;13 color: #222;14 }15 #render-target {16 position: relative;17 overflow: hidden;18 width: 1080px;19 height: 2400px;20 background: #FFFFFF;21 }22 23 /* Status bar */24 .status-bar {25 height: 96px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 padding: 0 40px;30 color: #666;31 font-size: 34px;32 letter-spacing: 0.5px;33 }34 .status-right {35 display: flex;36 gap: 26px;37 align-items: center;38 }39 .status-icon {40 width: 40px; height: 40px;41 }42 43 /* Top toolbar */44 .toolbar {45 height: 120px;46 display: flex;47 align-items: center;48 justify-content: space-between;49 padding: 0 36px;50 }51 .icon-btn {52 width: 48px; height: 48px;53 }54 .toolbar-right {55 display: flex;56 gap: 36px;57 align-items: center;58 }59 60 /* Category tabs */61 .tabs {62 display: flex;63 align-items: center;64 gap: 48px;65 padding: 26px 36px 20px;66 font-size: 34px;67 text-transform: uppercase;68 color: #555;69 }70 .tabs .active {71 color: #111;72 font-weight: 700;73 position: relative;74 }75 .tabs .active::after {76 content: "";77 position: absolute;78 left: 0;79 bottom: -14px;80 width: 50px;81 height: 4px;82 background: #111;83 border-radius: 2px;84 }85 86 /* Search/filter bar */87 .search-bar {88 margin: 28px 36px 0;89 border: 1px solid #BDBDBD;90 height: 110px;91 display: flex;92 align-items: center;93 justify-content: space-between;94 padding: 0 28px;95 font-size: 32px;96 letter-spacing: 0.6px;97 color: #222;98 }99 .filter-row {100 display: flex;101 gap: 24px;102 padding: 28px 36px;103 }104 .filter-btn {105 border: 1px solid #BDBDBD;106 padding: 18px 28px;107 font-size: 30px;108 text-transform: uppercase;109 color: #333;110 background: #fff;111 }112 113 /* Product grid */114 .grid {115 position: relative;116 margin-top: 20px;117 margin-bottom: 0;118 display: grid;119 grid-template-columns: 1fr 1fr;120 gap: 0;121 }122 .grid::before {123 content: "";124 position: absolute;125 left: 540px;126 top: 0;127 width: 1px;128 height: 1400px;129 background: #D0D0D0;130 }131 .product-card {132 border-bottom: 1px solid #D0D0D0;133 }134 .product-card:nth-child(odd) {135 border-right: 1px solid #D0D0D0;136 }137 .product-img {138 position: relative;139 width: 540px;140 height: 540px;141 background: #E0E0E0;142 border: 1px solid #BDBDBD;143 display: flex;144 align-items: center;145 justify-content: center;146 color: #757575;147 font-size: 28px;148 text-align: center;149 box-sizing: border-box;150 }151 .plus-chip {152 position: absolute;153 bottom: 20px;154 left: 50%;155 transform: translateX(-50%);156 width: 64px;157 height: 64px;158 background: rgba(230,230,230,0.9);159 border: 1px solid #BDBDBD;160 border-radius: 50%;161 display: flex;162 align-items: center;163 justify-content: center;164 color: #555;165 font-size: 42px;166 line-height: 0;167 }168 .product-info {169 display: flex;170 align-items: flex-start;171 justify-content: space-between;172 gap: 12px;173 padding: 24px 18px;174 }175 .info-left {176 display: flex;177 flex-direction: column;178 gap: 10px;179 max-width: 440px;180 }181 .title {182 font-size: 30px;183 color: #222;184 letter-spacing: 0.4px;185 }186 .price {187 font-size: 28px;188 color: #333;189 }190 .price-old {191 color: #888;192 text-decoration: line-through;193 margin-right: 12px;194 }195 .sale-badge {196 display: inline-block;197 background: #F6E95E;198 color: #111;199 padding: 6px 12px;200 font-size: 26px;201 border-radius: 4px;202 margin-right: 8px;203 }204 .bookmark {205 width: 40px;206 height: 40px;207 flex-shrink: 0;208 }209 210 /* Bottom navigation */211 .bottom-nav {212 position: absolute;213 left: 0;214 right: 0;215 bottom: 110px;216 height: 160px;217 border-top: 1px solid #D0D0D0;218 background: #fff;219 display: flex;220 align-items: center;221 justify-content: space-around;222 font-size: 32px;223 color: #444;224 text-transform: uppercase;225 }226 .bottom-item {227 position: relative;228 padding-top: 14px;229 }230 .bottom-item.active::after {231 content: "";232 position: absolute;233 left: 50%;234 transform: translateX(-50%);235 bottom: -10px;236 width: 40px;237 height: 4px;238 background: #111;239 border-radius: 2px;240 }241 242 /* Gesture bar */243 .gesture {244 position: absolute;245 left: 50%;246 transform: translateX(-50%);247 bottom: 42px;248 width: 220px;249 height: 12px;250 background: #BDBDBD;251 border-radius: 8px;252 }253</style>254</head>255<body>256<div id="render-target">257 258 <!-- Status bar -->259 <div class="status-bar">260 <div>8:46</div>261 <div class="status-right">262 <svg class="status-icon" viewBox="0 0 24 24">263 <circle cx="12" cy="12" r="10" fill="none" stroke="#888" stroke-width="2"></circle>264 <circle cx="12" cy="12" r="4" fill="#888"></circle>265 </svg>266 <svg class="status-icon" viewBox="0 0 24 24">267 <rect x="3" y="6" width="18" height="12" rx="2" fill="none" stroke="#888" stroke-width="2"></rect>268 <rect x="6" y="9" width="12" height="6" fill="#888"></rect>269 </svg>270 <svg class="status-icon" viewBox="0 0 24 24">271 <path d="M4 7h16M4 12h16M4 17h16" stroke="#888" stroke-width="2" fill="none" stroke-linecap="round"></path>272 </svg>273 <svg class="status-icon" viewBox="0 0 24 24">274 <path d="M20 11v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-6" stroke="#888" stroke-width="2" fill="none"></path>275 <path d="M14 7v4h-4V7l2-2 2 2z" fill="#888"></path>276 </svg>277 </div>278 </div>279 280 <!-- Toolbar -->281 <div class="toolbar">282 <svg class="icon-btn" viewBox="0 0 24 24">283 <path d="M4 4L20 20M20 4L4 20" stroke="#111" stroke-width="2" stroke-linecap="round"></path>284 </svg>285 <div class="toolbar-right">286 <!-- Split icon -->287 <svg class="icon-btn" viewBox="0 0 24 24">288 <rect x="3" y="4" width="8" height="16" fill="none" stroke="#111" stroke-width="2"></rect>289 <rect x="13" y="4" width="8" height="16" fill="none" stroke="#111" stroke-width="2"></rect>290 </svg>291 <!-- Grid icon -->292 <svg class="icon-btn" viewBox="0 0 24 24">293 <rect x="3" y="3" width="8" height="8" fill="none" stroke="#111" stroke-width="2"></rect>294 <rect x="13" y="3" width="8" height="8" fill="none" stroke="#111" stroke-width="2"></rect>295 <rect x="3" y="13" width="8" height="8" fill="none" stroke="#111" stroke-width="2"></rect>296 <rect x="13" y="13" width="8" height="8" fill="none" stroke="#111" stroke-width="2"></rect>297 </svg>298 </div>299 </div>300 301 <!-- Tabs -->302 <div class="tabs">303 <div class="active">Woman</div>304 <div>Man</div>305 <div>Kids</div>306 <div>Home</div>307 <div>Massimc</div>308 <div style="margin-left:auto; color:#333;">8 Results</div>309 </div>310 311 <!-- Search bar -->312 <div class="search-bar">313 <div>DOUBLE SIDED JACKETS</div>314 <svg class="icon-btn" viewBox="0 0 24 24">315 <path d="M4 4L20 20M20 4L4 20" stroke="#111" stroke-width="2" stroke-linecap="round"></path>316 </svg>317 </div>318 319 <!-- Filters -->320 <div class="filter-row">321 <div class="filter-btn">Sizes</div>322 <div class="filter-btn">Color</div>323 </div>324 325 <!-- Product grid -->326 <div class="grid">327 <!-- Card 1 -->328 <div class="product-card">329 <div class="product-img">330 [IMG: Model wearing brown double-sided shearling jacket outdoors]331 <div class="plus-chip">+</div>332 </div>333 <div class="product-info">334 <div class="info-left">335 <div class="title">DOUBLE SIDED SHORT JACKET</div>336 <div class="price">109.00 USD</div>337 </div>338 <svg class="bookmark" viewBox="0 0 24 24">339 <path d="M6 4h12v16l-6-4-6 4V4z" fill="none" stroke="#111" stroke-width="2"></path>340 </svg>341 </div>342 </div>343 344 <!-- Card 2 -->345 <div class="product-card">346 <div class="product-img">347 [IMG: Model wearing brown double-sided short jacket in studio]348 <div class="plus-chip">+</div>349 </div>350 <div class="product-info">351 <div class="info-left">352 <div class="title">DOUBLE SIDED SHORT JACKET</div>353 <div class="price">354 <span class="price-old">109.00 USD</span>355 <span class="sale-badge">-35%</span>356 <span class="sale-badge">69.99 USD</span>357 </div>358 </div>359 <svg class="bookmark" viewBox="0 0 24 24">360 <path d="M6 4h12v16l-6-4-6 4V4z" fill="none" stroke="#111" stroke-width="2"></path>361 </svg>362 </div>363 </div>364 365 <!-- Card 3 -->366 <div class="product-card">367 <div class="product-img">368 [IMG: Model wearing white shearling jacket with black trim]369 <div class="plus-chip">+</div>370 </div>371 <div class="product-info">372 <div class="info-left">373 <div class="title">DOUBLE SIDED SHORT JACKET</div>374 <div class="price">109.00 USD</div>375 </div>376 <svg class="bookmark" viewBox="0 0 24 24">377 <path d="M6 4h12v16l-6-4-6 4V4z" fill="none" stroke="#111" stroke-width="2"></path>378 </svg>379 </div>380 </div>381 382 <!-- Card 4 -->383 <div class="product-card">384 <div class="product-img">385 [IMG: Model wearing black double-sided jacket in studio]386 <div class="plus-chip">+</div>387 </div>388 <div class="product-info">389 <div class="info-left">390 <div class="title">DOUBLE SIDED SHORT JACKET</div>391 <div class="price">109.00 USD</div>392 </div>393 <svg class="bookmark" viewBox="0 0 24 24">394 <path d="M6 4h12v16l-6-4-6 4V4z" fill="none" stroke="#111" stroke-width="2"></path>395 </svg>396 </div>397 </div>398 </div>399 400 <!-- Bottom navigation -->401 <div class="bottom-nav">402 <div class="bottom-item active">Home</div>403 <div class="bottom-item">Menu</div>404 <div class="bottom-item">Account</div>405 <div class="bottom-item">Basket (0)</div>406 </div>407 408 <!-- Gesture bar -->409 <div class="gesture"></div>410</div>411</body>412</html>