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>Chunky chelse...</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #ffffff;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 120px;24 background: #D7D7D7;25 color: #ffffff;26 font-weight: 600;27 }28 .status-bar .time {29 position: absolute;30 left: 36px;31 top: 36px;32 font-size: 36px;33 letter-spacing: 1px;34 }35 .status-icons {36 position: absolute;37 left: 220px;38 top: 44px;39 display: flex;40 gap: 22px;41 align-items: center;42 }43 .status-icons .dot { width: 12px; height: 12px; background: #fff; border-radius: 50%; opacity: 0.9; }44 .status-right {45 position: absolute;46 right: 36px;47 top: 36px;48 display: flex;49 align-items: center;50 gap: 24px;51 }52 /* Simple status icons */53 .icon { display: inline-block; }54 .wifi, .battery { width: 40px; height: 36px; }55 .wifi path, .battery rect, .battery path { fill: none; stroke: #fff; stroke-width: 6; }56 57 /* Header */58 .header {59 position: absolute;60 top: 120px;61 left: 0;62 width: 1080px;63 height: 160px;64 background: #fff;65 border-bottom: 1px solid #eee;66 }67 .header-inner {68 position: absolute;69 left: 28px;70 right: 28px;71 top: 24px;72 display: flex;73 align-items: center;74 justify-content: space-between;75 }76 .left-actions { display: flex; align-items: center; gap: 28px; }77 .menu {78 position: relative;79 width: 64px; height: 64px;80 }81 .menu svg path { stroke: #000; stroke-width: 8; }82 .menu .red-dot {83 position: absolute; width: 18px; height: 18px; background: #E53935; border-radius: 50%;84 right: -4px; top: 2px;85 }86 .title {87 font-size: 48px;88 font-weight: 700;89 color: #111;90 letter-spacing: 0.5px;91 }92 .right-actions { display: flex; align-items: center; gap: 36px; }93 .hdr-icon { width: 56px; height: 56px; }94 .hdr-icon path, .hdr-icon circle, .hdr-icon rect { stroke: #111; fill: none; stroke-width: 6; }95 96 .bag {97 position: relative;98 width: 60px; height: 60px;99 }100 .bag svg path, .bag svg rect { stroke: #111; fill: none; stroke-width: 6; }101 .bag .badge {102 position: absolute;103 right: -6px;104 top: -6px;105 background: #fff;106 color: #111;107 border: 2px solid #111;108 width: 36px; height: 36px; border-radius: 8px;109 font-size: 24px; display: flex; align-items: center; justify-content: center;110 }111 112 /* Filter bar */113 .filter-bar {114 position: absolute;115 top: 280px;116 left: 0;117 width: 1080px;118 height: 120px;119 background: #fff;120 border-bottom: 1px solid #eee;121 display: flex;122 align-items: center;123 justify-content: space-between;124 padding: 0 32px;125 }126 .filter-left, .filter-right { display: flex; align-items: center; gap: 18px; }127 .filter-text {128 font-weight: 700;129 font-size: 36px;130 letter-spacing: 0.5px;131 color: #222;132 }133 .chev {134 width: 28px; height: 28px;135 }136 .sort-icon { width: 54px; height: 54px; }137 .sort-icon path { stroke: #111; stroke-width: 6; fill: none; }138 139 /* Sub tabs and grid controls */140 .subbar {141 position: absolute;142 top: 400px;143 left: 0;144 width: 1080px;145 height: 110px;146 padding: 0 32px;147 display: flex;148 align-items: center;149 justify-content: space-between;150 color: #222;151 }152 .tabs { display: flex; align-items: center; gap: 24px; font-size: 34px; }153 .tab { color: #777; }154 .tab.active { color: #E53935; border-bottom: 4px solid #E53935; padding-bottom: 6px; }155 .items-info { font-size: 32px; color: #555; }156 .view-toggle { display: flex; align-items: center; gap: 18px; }157 .square, .grid4 { width: 46px; height: 46px; }158 .square rect { stroke: #777; fill: none; stroke-width: 6; }159 .grid4 rect { stroke: #E53935; fill: none; stroke-width: 6; }160 161 /* Product grid */162 .product-area {163 position: absolute;164 top: 510px;165 left: 0;166 right: 0;167 bottom: 160px;168 padding: 24px 24px 120px 24px;169 overflow: hidden;170 }171 .grid {172 display: flex;173 flex-wrap: wrap;174 gap: 24px;175 }176 .card {177 width: calc(50% - 12px);178 background: #fff;179 }180 .image-box {181 position: relative;182 width: 100%;183 height: 560px;184 background: #FAFAFA;185 border: 1px solid #ECECEC;186 display: flex;187 align-items: center;188 justify-content: center;189 }190 .image-placeholder {191 width: 86%;192 height: 86%;193 background: #E0E0E0;194 border: 1px solid #BDBDBD;195 display: flex;196 align-items: center;197 justify-content: center;198 color: #757575;199 font-size: 28px;200 text-align: center;201 }202 .fav-icon {203 position: absolute;204 right: 24px;205 bottom: 24px;206 width: 64px; height: 64px;207 }208 .fav-icon path { stroke: #111; fill: none; stroke-width: 6; }209 .card-title {210 margin-top: 22px;211 font-size: 36px;212 color: #222;213 }214 .price {215 margin-top: 12px;216 font-size: 34px;217 font-weight: 700;218 color: #111;219 }220 .colors {221 margin-top: 16px;222 display: flex; gap: 16px;223 }224 .dot {225 width: 20px; height: 20px; border-radius: 50%;226 border: 1px solid #aaa;227 }228 .dot.black { background: #111; }229 .dot.grey { background: #757575; }230 231 /* Bottom bar */232 .bottom-safe {233 position: absolute;234 left: 0;235 bottom: 0;236 width: 1080px;237 height: 160px;238 background: #000;239 }240 .home-pill {241 position: absolute;242 left: 50%;243 top: 54%;244 transform: translate(-50%, -50%);245 width: 320px;246 height: 16px;247 background: #fff;248 border-radius: 12px;249 opacity: 0.85;250 }251</style>252</head>253<body>254<div id="render-target">255 <!-- Status bar -->256 <div class="status-bar">257 <div class="time">4:22</div>258 <div class="status-icons">259 <div class="dot"></div>260 <div class="dot"></div>261 <div class="dot"></div>262 <div class="dot"></div>263 <div class="dot"></div>264 <div class="dot" style="opacity:0.5;"></div>265 </div>266 <div class="status-right">267 <svg class="wifi" viewBox="0 0 64 48">268 <path d="M8,16 C24,-2 40,-2 56,16"></path>269 <path d="M16,24 C28,12 36,12 48,24"></path>270 <path d="M24,32 C30,26 34,26 40,32"></path>271 <circle cx="32" cy="38" r="3" fill="#fff"></circle>272 </svg>273 <svg class="battery" viewBox="0 0 70 40">274 <rect x="4" y="6" width="56" height="28" rx="4"></rect>275 <rect x="62" y="14" width="6" height="12" rx="2"></rect>276 <rect x="8" y="10" width="36" height="20" fill="#fff" stroke="none"></rect>277 </svg>278 </div>279 </div>280 281 <!-- Header -->282 <div class="header">283 <div class="header-inner">284 <div class="left-actions">285 <div class="menu">286 <svg class="hdr-icon" viewBox="0 0 64 64">287 <path d="M8,16 L56,16"></path>288 <path d="M8,32 L56,32"></path>289 <path d="M8,48 L40,48"></path>290 </svg>291 <div class="red-dot"></div>292 </div>293 </div>294 295 <div class="title">Chunky chelse...</div>296 297 <div class="right-actions">298 <!-- Search -->299 <svg class="hdr-icon" viewBox="0 0 64 64">300 <circle cx="28" cy="28" r="16"></circle>301 <path d="M40,40 L56,56"></path>302 </svg>303 <!-- User -->304 <svg class="hdr-icon" viewBox="0 0 64 64">305 <circle cx="32" cy="22" r="12"></circle>306 <path d="M12,54 C16,40 48,40 52,54"></path>307 </svg>308 <!-- Heart -->309 <svg class="hdr-icon" viewBox="0 0 64 64">310 <path d="M32,54 C12,40 8,28 16,20 C22,14 30,16 32,22 C34,16 42,14 48,20 C56,28 52,40 32,54"></path>311 </svg>312 <!-- Bag with badge -->313 <div class="bag">314 <svg viewBox="0 0 64 64" class="hdr-icon">315 <path d="M20,24 L44,24"></path>316 <rect x="12" y="24" width="40" height="32" rx="6"></rect>317 <path d="M24,24 C24,12 40,12 40,24"></path>318 </svg>319 <div class="badge">7</div>320 </div>321 </div>322 </div>323 </div>324 325 <!-- Filter bar -->326 <div class="filter-bar">327 <div class="filter-left">328 <div class="filter-text">DEPARTMENT</div>329 <svg class="chev" viewBox="0 0 24 24">330 <path d="M4,8 L12,16 L20,8" stroke="#111" stroke-width="3" fill="none"></path>331 </svg>332 </div>333 <div class="filter-right">334 <div class="filter-text">FILTER & SORT</div>335 <svg class="sort-icon" viewBox="0 0 64 64">336 <path d="M12,16 L52,16"></path>337 <circle cx="22" cy="16" r="6"></circle>338 <path d="M12,32 L52,32"></path>339 <circle cx="42" cy="32" r="6"></circle>340 <path d="M12,48 L52,48"></path>341 <circle cx="30" cy="48" r="6"></circle>342 </svg>343 </div>344 </div>345 346 <!-- Subbar -->347 <div class="subbar">348 <div class="tabs">349 <div class="tab">Model</div>350 <div class="tab active">Product</div>351 </div>352 <div class="view-toggle">353 <div class="items-info">18 Items</div>354 <svg class="square" viewBox="0 0 48 48">355 <rect x="6" y="6" width="36" height="36" rx="4"></rect>356 </svg>357 <svg class="grid4" viewBox="0 0 48 48">358 <rect x="6" y="6" width="14" height="14" rx="3"></rect>359 <rect x="28" y="6" width="14" height="14" rx="3"></rect>360 <rect x="6" y="28" width="14" height="14" rx="3"></rect>361 <rect x="28" y="28" width="14" height="14" rx="3"></rect>362 </svg>363 </div>364 </div>365 366 <!-- Product Grid -->367 <div class="product-area">368 <div class="grid">369 370 <!-- Card 1 -->371 <div class="card">372 <div class="image-box">373 <div class="image-placeholder">[IMG: Chunky Chelsea Boot - Black]</div>374 <svg class="fav-icon" viewBox="0 0 64 64">375 <path d="M32,54 C12,40 8,28 16,20 C22,14 30,16 32,22 C34,16 42,14 48,20 C56,28 52,40 32,54"></path>376 </svg>377 </div>378 <div class="card-title">Chunky Chelsea Boots</div>379 <div class="price">$54.99</div>380 <div class="colors">381 <div class="dot black"></div>382 <div class="dot grey"></div>383 </div>384 </div>385 386 <!-- Card 2 -->387 <div class="card">388 <div class="image-box">389 <div class="image-placeholder">[IMG: Chunky Chelsea Boot - Tall Black]</div>390 <svg class="fav-icon" viewBox="0 0 64 64">391 <path d="M32,54 C12,40 8,28 16,20 C22,14 30,16 32,22 C34,16 42,14 48,20 C56,28 52,40 32,54"></path>392 </svg>393 </div>394 <div class="card-title">Chunky Chelsea Boots</div>395 <div class="price">$49.99</div>396 <div class="colors">397 <div class="dot black"></div>398 </div>399 </div>400 401 <!-- Card 3 -->402 <div class="card">403 <div class="image-box">404 <div class="image-placeholder">[IMG: Pair of Black Chelsea Boots]</div>405 <svg class="fav-icon" viewBox="0 0 64 64">406 <path d="M32,54 C12,40 8,28 16,20 C22,14 30,16 32,22 C34,16 42,14 48,20 C56,28 52,40 32,54"></path>407 </svg>408 </div>409 <div class="card-title">Chunky Chelsea Boots</div>410 <div class="price">$—</div>411 <div class="colors">412 <div class="dot black"></div>413 </div>414 </div>415 416 <!-- Card 4 -->417 <div class="card">418 <div class="image-box">419 <div class="image-placeholder">[IMG: Chunky Chelsea Boot - Beige]</div>420 <svg class="fav-icon" viewBox="0 0 64 64">421 <path d="M32,54 C12,40 8,28 16,20 C22,14 30,16 32,22 C34,16 42,14 48,20 C56,28 52,40 32,54"></path>422 </svg>423 </div>424 <div class="card-title">Chunky Chelsea Boots</div>425 <div class="price">$—</div>426 <div class="colors">427 <div class="dot grey"></div>428 </div>429 </div>430 431 </div>432 </div>433 434 <!-- Bottom safe area -->435 <div class="bottom-safe">436 <div class="home-pill"></div>437 </div>438</div>439</body>440</html>