GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Yoga Pants - Results</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 /* Status bar */18 .status-bar {19 height: 90px;20 padding: 0 32px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #333;25 font-weight: 600;26 font-size: 38px;27 }28 .status-right {29 display: flex;30 align-items: center;31 gap: 18px;32 color: #333;33 font-size: 32px;34 }35 36 /* Top controls */37 .top-controls {38 height: 84px;39 padding: 0 32px;40 display: flex;41 align-items: center;42 justify-content: space-between;43 }44 .icon-btn {45 width: 60px;46 height: 60px;47 display: inline-flex;48 align-items: center;49 justify-content: center;50 cursor: default;51 }52 .right-icons {53 display: flex;54 gap: 28px;55 }56 .square-icon {57 width: 42px;58 height: 42px;59 border: 3px solid #111;60 }61 .grid-icon {62 width: 46px;63 height: 46px;64 display: grid;65 grid-template-columns: repeat(2, 1fr);66 gap: 6px;67 }68 .grid-icon span {69 border: 3px solid #111;70 }71 72 /* Tabs */73 .tabs {74 display: flex;75 gap: 38px;76 padding: 8px 32px 0 32px;77 font-size: 36px;78 letter-spacing: 0.5px;79 align-items: flex-end;80 }81 .tab {82 color: #1a1a1a;83 padding-bottom: 16px;84 }85 .tab.active {86 font-weight: 800;87 border-bottom: 6px solid #111;88 }89 90 /* Search bar */91 .search-row {92 padding: 18px 32px 0 32px;93 }94 .search-box {95 height: 96px;96 border: 2px solid #cfcfcf;97 border-radius: 6px;98 display: flex;99 align-items: center;100 padding: 0 22px;101 justify-content: space-between;102 color: #111;103 font-size: 36px;104 }105 .search-text {106 opacity: 0.9;107 }108 109 /* Filters */110 .filters {111 display: flex;112 gap: 20px;113 padding: 18px 32px 8px 32px;114 }115 .filter-btn {116 padding: 18px 28px;117 border: 2px solid #bdbdbd;118 border-radius: 8px;119 font-size: 34px;120 letter-spacing: 1px;121 color: #222;122 background: #fff;123 }124 125 /* Divider */126 .divider {127 height: 2px;128 background: #efefef;129 margin: 8px 0;130 }131 132 /* Product grid */133 .grid {134 display: grid;135 grid-template-columns: 1fr 1fr;136 gap: 0;137 }138 .card {139 border-right: 1px solid #e9e9e9;140 border-bottom: 1px solid #e9e9e9;141 padding-bottom: 8px;142 }143 .card:nth-child(2n) { border-right: none; }144 .product-img {145 width: 100%;146 height: 820px;147 background: #E0E0E0;148 border: 1px solid #BDBDBD;149 display: flex;150 align-items: center;151 justify-content: center;152 color: #757575;153 font-size: 34px;154 position: relative;155 }156 .plus-overlay {157 position: absolute;158 bottom: 18px;159 left: 50%;160 transform: translateX(-50%);161 width: 64px;162 height: 64px;163 background: #ffffff;164 border-radius: 50%;165 border: 2px solid #d0d0d0;166 display: flex;167 align-items: center;168 justify-content: center;169 }170 .card-info {171 padding: 22px 24px 26px 24px;172 }173 .product-title {174 font-size: 34px;175 color: #222;176 line-height: 1.3;177 max-height: 88px;178 overflow: hidden;179 }180 .price {181 margin-top: 10px;182 font-size: 34px;183 color: #444;184 }185 186 /* Section header */187 .section {188 padding: 24px 32px 0 32px;189 }190 .section-head {191 display: flex;192 align-items: center;193 justify-content: space-between;194 }195 .section-title {196 font-size: 40px;197 font-weight: 700;198 letter-spacing: 1px;199 }200 .see-more {201 font-size: 34px;202 color: #555;203 }204 .subnote {205 margin-top: 10px;206 font-size: 32px;207 color: #777;208 }209 210 /* Thumbnails row */211 .thumb-row {212 display: grid;213 grid-template-columns: repeat(3, 1fr);214 gap: 16px;215 padding: 16px 0 24px 0;216 }217 .thumb {218 height: 330px;219 background: #E0E0E0;220 border: 1px solid #BDBDBD;221 display: flex;222 align-items: center;223 justify-content: center;224 color: #757575;225 font-size: 30px;226 }227 228 /* Bottom navigation */229 .bottom-bar {230 position: absolute;231 left: 0;232 right: 0;233 bottom: 0;234 height: 160px;235 border-top: 1px solid #ececec;236 background: #fff;237 display: flex;238 align-items: center;239 justify-content: space-around;240 font-size: 34px;241 }242 .nav-item {243 display: flex;244 flex-direction: column;245 align-items: center;246 gap: 12px;247 color: #222;248 }249 .nav-item .underline {250 width: 64px;251 height: 6px;252 background: #111;253 border-radius: 3px;254 }255 .home-indicator {256 position: absolute;257 bottom: 24px;258 left: 50%;259 transform: translateX(-50%);260 width: 360px;261 height: 12px;262 background: #c8c8c8;263 border-radius: 8px;264 opacity: 0.9;265 }266 267 /* Simple svg icon styling */268 svg { display: block; }269 270</style>271</head>272<body>273<div id="render-target">274 275 <!-- Status bar -->276 <div class="status-bar">277 <div>11:04</div>278 <div class="status-right">279 <span>◦</span>280 <span>▮▮▮</span>281 <span>100%</span>282 </div>283 </div>284 285 <!-- Top controls -->286 <div class="top-controls">287 <div class="icon-btn" aria-label="Close">288 <svg width="40" height="40" viewBox="0 0 24 24">289 <path d="M4 4 L20 20 M20 4 L4 20" stroke="#111" stroke-width="2.5" stroke-linecap="round"/>290 </svg>291 </div>292 <div class="right-icons">293 <div class="square-icon"></div>294 <div class="grid-icon" aria-hidden="true">295 <span></span><span></span><span></span><span></span>296 </div>297 </div>298 </div>299 300 <!-- Tabs -->301 <div class="tabs">302 <div class="tab active">WOMAN</div>303 <div class="tab">MAN</div>304 <div class="tab">KIDS</div>305 <div class="tab">HOME</div>306 <div class="tab">MASSIMC</div>307 <div class="tab">2 RESULTS</div>308 </div>309 310 <!-- Search -->311 <div class="search-row">312 <div class="search-box">313 <div class="search-text">YOGA PANTS</div>314 <svg width="42" height="42" viewBox="0 0 24 24">315 <path d="M5 5 L19 19 M19 5 L5 19" stroke="#111" stroke-width="2.5" stroke-linecap="round"/>316 </svg>317 </div>318 </div>319 320 <!-- Filters -->321 <div class="filters">322 <button class="filter-btn">SIZES</button>323 <button class="filter-btn">COLOR</button>324 </div>325 326 <div class="divider"></div>327 328 <!-- Product grid -->329 <div class="grid">330 <!-- Card 1 -->331 <div class="card">332 <div class="product-img">333 [IMG: Model wearing black hoodie and wide-leg jogger pants]334 <div class="plus-overlay" aria-hidden="true">335 <svg width="28" height="28" viewBox="0 0 24 24">336 <path d="M12 5 L12 19 M5 12 L19 12" stroke="#888" stroke-width="2.5" stroke-linecap="round"/>337 </svg>338 </div>339 </div>340 <div class="card-info">341 <div class="product-title">STEVEN MEISEL WIDE LEG JOG...</div>342 <div class="price">69.90 USD</div>343 </div>344 </div>345 346 <!-- Card 2 -->347 <div class="card">348 <div class="product-img">349 [IMG: Metallic silver pants with matching top]350 <div class="plus-overlay" aria-hidden="true">351 <svg width="28" height="28" viewBox="0 0 24 24">352 <path d="M12 5 L12 19 M5 12 L19 12" stroke="#888" stroke-width="2.5" stroke-linecap="round"/>353 </svg>354 </div>355 </div>356 <div class="card-info">357 <div class="product-title">METALLIC LEATHER PANTS STE...</div>358 <div class="price">229.00 USD</div>359 </div>360 </div>361 </div>362 363 <!-- Section: In Man -->364 <div class="section">365 <div class="section-head">366 <div class="section-title">IN MAN</div>367 <div class="see-more">SEE MORE</div>368 </div>369 <div class="subnote">2 RESULTS</div>370 371 <div class="thumb-row">372 <div class="thumb">[IMG: Black wide-leg pants thumbnail]</div>373 <div class="thumb">[IMG: Silver pants thumbnail]</div>374 <div class="thumb" style="background:#fafafa;color:#bbb;border-color:#eee;"> </div>375 </div>376 </div>377 378 <!-- Bottom navigation -->379 <div class="bottom-bar">380 <div class="nav-item">381 <div>HOME</div>382 <div class="underline"></div>383 </div>384 <div class="nav-item">385 <div>MENU</div>386 </div>387 <div class="nav-item">388 <div>ACCOUNT</div>389 </div>390 <div class="nav-item">391 <div>BASKET (0)</div>392 </div>393 </div>394 395 <div class="home-indicator"></div>396</div>397</body>398</html>