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>Valentino - New Arrivals</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 /* Root render target */10 #render-target {11 position: relative;12 width: 1080px;13 height: 2400px;14 overflow: hidden;15 background: #ffffff;16 font-family: Arial, Helvetica, sans-serif;17 color: #111;18 }19 20 /* Status bar */21 .status-bar {22 position: absolute;23 top: 0;24 left: 0;25 width: 1080px;26 height: 120px;27 background: #000;28 color: #fff;29 display: flex;30 align-items: center;31 padding: 0 36px;32 box-sizing: border-box;33 font-size: 42px;34 letter-spacing: 1px;35 }36 .status-bar .time { font-weight: 600; }37 .status-bar .icons { margin-left: auto; display: flex; gap: 28px; align-items: center; }38 39 /* Promo bar */40 .promo-bar {41 position: absolute;42 top: 120px;43 left: 0;44 width: 1080px;45 height: 100px;46 background: #E6E5E4;47 display: flex;48 align-items: center;49 padding: 0 24px;50 box-sizing: border-box;51 border-bottom: 1px solid #d5d5d5;52 }53 .promo-bar .chevron {54 width: 48px; height: 48px; margin-right: 16px;55 }56 .promo-bar .promo-text {57 flex: 1;58 text-align: center;59 font-size: 34px;60 font-weight: 700;61 letter-spacing: 2px;62 }63 .promo-bar .close {64 width: 48px; height: 48px;65 }66 67 /* Main header */68 .header {69 position: absolute;70 top: 220px;71 left: 0;72 width: 1080px;73 background: #fff;74 border-bottom: 1px solid #e5e5e5;75 }76 .header-top {77 display: grid;78 grid-template-columns: 1fr 1fr 1fr;79 align-items: center;80 padding: 28px 32px;81 }82 .header-left, .header-right {83 display: flex;84 align-items: center;85 gap: 30px;86 }87 .header-center {88 text-align: center;89 line-height: 1.2;90 }91 .brand-logo {92 font-size: 40px;93 font-weight: 700;94 letter-spacing: 4px;95 }96 .brand-sub {97 font-size: 26px; letter-spacing: 6px; margin-top: 6px;98 }99 100 .icon-btn { width: 72px; height: 72px; display: inline-flex; justify-content: center; align-items: center; }101 .icon-label { font-size: 22px; letter-spacing: 2px; margin-left: 8px; color: #555; }102 103 .title {104 text-align: center;105 padding: 16px 0 24px;106 font-size: 44px;107 font-weight: 800;108 letter-spacing: 3px;109 }110 .subtitle {111 text-align: center;112 padding: 26px 0;113 font-size: 30px;114 letter-spacing: 3px;115 border-top: 1px solid #ededed;116 border-bottom: 1px solid #ededed;117 color: #444;118 }119 120 /* Grid */121 .grid-wrap {122 position: absolute;123 top: 470px;124 left: 0;125 right: 0;126 bottom: 90px;127 overflow: hidden;128 background: #fff;129 }130 .grid {131 display: grid;132 grid-template-columns: 1fr 1fr;133 column-gap: 1px;134 row-gap: 1px;135 background: #e9e9e9;136 }137 .card {138 background: #F5EFEC;139 position: relative;140 padding-bottom: 20px;141 min-height: 680px;142 }143 .fav-icon {144 position: absolute; top: 26px; right: 26px;145 width: 56px; height: 56px;146 }147 .img-box {148 width: 100%;149 height: 520px;150 background: #E0E0E0;151 border: 1px solid #BDBDBD;152 box-sizing: border-box;153 display: flex;154 justify-content: center;155 align-items: center;156 color: #757575;157 font-size: 30px;158 letter-spacing: 1px;159 }160 .card-body {161 background: #fff;162 padding: 30px 36px 36px;163 box-sizing: border-box;164 min-height: 270px;165 }166 .badge {167 font-size: 26px; letter-spacing: 2px; color: #666;168 margin-bottom: 10px;169 }170 .product-name {171 font-size: 34px;172 font-weight: 800;173 letter-spacing: 2px;174 line-height: 1.25;175 text-transform: uppercase;176 color: #111;177 margin: 6px 0 16px;178 }179 .price {180 font-size: 32px;181 letter-spacing: 2px;182 font-weight: 700;183 }184 185 /* Bottom gesture bar */186 .gesture {187 position: absolute;188 bottom: 24px;189 left: 50%;190 transform: translateX(-50%);191 width: 320px;192 height: 12px;193 background: #000;194 border-radius: 12px;195 opacity: 0.85;196 }197 198 /* Helpers for small text below icons in header-left only */199 .menu-wrap { display: flex; align-items: center; }200 .menu-wrap .icon-label { margin-left: 12px; }201 202 /* Simple reset for SVGs */203 svg { display: block; }204</style>205</head>206<body>207<div id="render-target">208 209 <!-- Status bar -->210 <div class="status-bar">211 <div class="time">10:51</div>212 <div class="icons">213 <!-- simple status dots -->214 <svg width="28" height="28"><circle cx="14" cy="14" r="10" fill="#fff"/></svg>215 <svg width="28" height="28"><circle cx="14" cy="14" r="10" fill="#fff"/></svg>216 <svg width="28" height="28"><circle cx="14" cy="14" r="10" fill="#fff"/></svg>217 <svg width="44" height="28">218 <rect x="4" y="6" width="32" height="16" rx="3" fill="#fff"/>219 </svg>220 </div>221 </div>222 223 <!-- Promo bar -->224 <div class="promo-bar">225 <!-- back/chevron left -->226 <svg class="chevron" viewBox="0 0 24 24">227 <polyline points="15,4 7,12 15,20" fill="none" stroke="#333" stroke-width="2"/>228 </svg>229 <div class="promo-text">VALENTINO GARAVANI VLOGO MOON | DISCOVER NOW</div>230 <!-- close -->231 <svg class="close" viewBox="0 0 24 24">232 <line x1="5" y1="5" x2="19" y2="19" stroke="#333" stroke-width="2"/>233 <line x1="19" y1="5" x2="5" y2="19" stroke="#333" stroke-width="2"/>234 </svg>235 </div>236 237 <!-- Header -->238 <div class="header">239 <div class="header-top">240 <div class="header-left">241 <div class="menu-wrap">242 <div class="icon-btn">243 <!-- hamburger -->244 <svg width="44" height="44" viewBox="0 0 24 24">245 <line x1="3" y1="6" x2="21" y2="6" stroke="#111" stroke-width="2"/>246 <line x1="3" y1="12" x2="21" y2="12" stroke="#111" stroke-width="2"/>247 <line x1="3" y1="18" x2="21" y2="18" stroke="#111" stroke-width="2"/>248 </svg>249 </div>250 <div class="icon-label">MENU</div>251 </div>252 <div class="icon-btn" title="Search">253 <!-- search -->254 <svg width="48" height="48" viewBox="0 0 24 24">255 <circle cx="10" cy="10" r="7" fill="none" stroke="#111" stroke-width="2"/>256 <line x1="15" y1="15" x2="21" y2="21" stroke="#111" stroke-width="2"/>257 </svg>258 </div>259 </div>260 <div class="header-center">261 <div class="brand-logo">VALENTINO</div>262 <div class="brand-sub">GARAVANI</div>263 </div>264 <div class="header-right" style="justify-content:flex-end;">265 <div class="icon-btn" title="Favorites">266 <!-- star outline -->267 <svg width="52" height="52" viewBox="0 0 24 24">268 <polygon points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,16.8 5.5,21 7.5,13.5 2,9 9,9" fill="none" stroke="#111" stroke-width="2"/>269 </svg>270 </div>271 <div class="icon-btn" title="Bag" style="position: relative;">272 <!-- bag -->273 <svg width="52" height="52" viewBox="0 0 24 24">274 <path d="M6 8h12l-1 12H7L6 8z" fill="none" stroke="#111" stroke-width="2"/>275 <path d="M9 8V6a3 3 0 0 1 6 0v2" fill="none" stroke="#111" stroke-width="2"/>276 </svg>277 <div style="position:absolute; top:6px; right:2px; width:26px; height:26px; background:#000; color:#fff; font-size:18px; border-radius:50%; display:flex; align-items:center; justify-content:center;">0</div>278 </div>279 </div>280 </div>281 282 <div class="title">NEW ARRIVALS(41)</div>283 <div class="subtitle">SORT AND FILTER</div>284 </div>285 286 <!-- Product grid -->287 <div class="grid-wrap">288 <div class="grid">289 290 <!-- Card 1 -->291 <div class="card">292 <div class="fav-icon">293 <svg viewBox="0 0 24 24">294 <polygon points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,16.8 5.5,21 7.5,13.5 2,9 9,9" fill="none" stroke="#111" stroke-width="2"/>295 </svg>296 </div>297 <div class="img-box">[IMG: White Hobo Bag with Chain]</div>298 <div class="card-body">299 <div class="badge">NEW ARRIVAL</div>300 <div class="product-name">SMALL VLOGO MOON HOBO BAG IN LEATHER WITH CHAIN</div>301 <div class="price">$ 2,740.00</div>302 </div>303 </div>304 305 <!-- Card 2 -->306 <div class="card">307 <div class="fav-icon">308 <svg viewBox="0 0 24 24">309 <polygon points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,16.8 5.5,21 7.5,13.5 2,9 9,9" fill="none" stroke="#111" stroke-width="2"/>310 </svg>311 </div>312 <div class="img-box">[IMG: Red Crepe Couture Short Dress]</div>313 <div class="card-body">314 <div class="badge">NEW ARRIVAL</div>315 <div class="product-name">CREPE COUTURE SHORT DRESS</div>316 <div class="price">$ 4,425.00</div>317 </div>318 </div>319 320 <!-- Card 3 -->321 <div class="card">322 <div class="fav-icon">323 <svg viewBox="0 0 24 24">324 <polygon points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,16.8 5.5,21 7.5,13.5 2,9 9,9" fill="none" stroke="#111" stroke-width="2"/>325 </svg>326 </div>327 <div class="img-box">[IMG: Black Loafers]</div>328 <div class="card-body">329 <div class="badge">NEW ARRIVAL</div>330 <div class="product-name">LEATHER LOAFERS WITH STUD DETAILS</div>331 <div class="price">$ 1,090.00</div>332 </div>333 </div>334 335 <!-- Card 4 -->336 <div class="card">337 <div class="fav-icon">338 <svg viewBox="0 0 24 24">339 <polygon points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,16.8 5.5,21 7.5,13.5 2,9 9,9" fill="none" stroke="#111" stroke-width="2"/>340 </svg>341 </div>342 <div class="img-box">[IMG: Gold Stud Earrings]</div>343 <div class="card-body">344 <div class="badge">NEW ARRIVAL</div>345 <div class="product-name">PAVÉ VLOGO GOLD-TONE STUD EARRINGS</div>346 <div class="price">$ 690.00</div>347 </div>348 </div>349 350 </div>351 </div>352 353 <!-- Bottom gesture bar -->354 <div class="gesture"></div>355 356</div>357</body>358</html>