GD-ML/AndroidCode

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 - Pants Listing</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Helvetica Neue", Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Status bar */18  .statusbar {19    height: 120px;20    background: #000;21    color: #fff;22    display: flex;23    align-items: center;24    padding: 0 40px;25    box-sizing: border-box;26  }27  .statusbar .time { font-weight: 600; letter-spacing: 1px; font-size: 34px; }28  .statusbar .status-icons { margin-left: auto; display: flex; gap: 26px; align-items: center; }29  .icon-white svg { width: 38px; height: 38px; stroke: #fff; fill: none; }30 31  /* Back chevron in status area */32  .back-wrap {33    position: absolute;34    top: 132px;35    left: 28px;36    width: 80px;37    height: 80px;38    display: flex;39    align-items: center;40    justify-content: center;41    z-index: 5;42  }43  .back-wrap svg { width: 40px; height: 40px; stroke: #111; fill: none; }44 45  /* Header */46  .header {47    background: #fff;48    border-bottom: 1px solid #e5e2df;49    height: 220px;50    display: flex;51    align-items: center;52    padding: 0 36px;53    box-sizing: border-box;54  }55  .header-left, .header-right {56    display: flex;57    align-items: center;58    gap: 36px;59    min-width: 220px;60  }61  .menu-block {62    display: flex;63    flex-direction: column;64    align-items: center;65    gap: 6px;66  }67  .menu-block .label { font-size: 24px; color: #6a6a6a; letter-spacing: 2px; }68  .header-center {69    flex: 1;70    text-align: center;71    line-height: 1.1;72  }73  .brand-logo {74    font-size: 44px;75    letter-spacing: 6px;76    color: #000;77    font-weight: 600;78  }79  .brand-sub {80    font-size: 26px;81    letter-spacing: 4px;82    color: #666;83    margin-top: 8px;84  }85  .header svg { stroke: #222; fill: none; }86 87  /* Sort and filter bar */88  .sortbar {89    height: 100px;90    background: #f6f3f0;91    border-top: 1px solid #e5e2df;92    border-bottom: 1px solid #e5e2df;93    display: flex;94    align-items: center;95    justify-content: center;96    color: #555;97    letter-spacing: 4px;98    font-size: 28px;99  }100 101  /* Product grid */102  .product-area {103    background: #f4efec;104    padding: 24px 24px 0 24px;105    box-sizing: border-box;106  }107  .grid {108    display: grid;109    grid-template-columns: 1fr 1fr;110    gap: 24px;111  }112  .product {113    background: #f4efec;114  }115  .prod-img {116    position: relative;117    height: 760px;118    background: #E0E0E0;119    border: 1px solid #BDBDBD;120    display: flex;121    justify-content: center;122    align-items: center;123    color: #757575;124    font-size: 32px;125    letter-spacing: 1px;126  }127  .prod-img .fav {128    position: absolute;129    top: 22px;130    right: 22px;131  }132  .fav svg { width: 46px; height: 46px; stroke: #333; fill: none; }133 134  .info {135    background: #fff;136    padding: 28px 30px 36px 30px;137    box-sizing: border-box;138    border-top: 1px solid #e5e2df;139  }140  .label {141    font-size: 26px;142    letter-spacing: 3px;143    color: #8a8a8a;144    text-transform: uppercase;145    margin-bottom: 12px;146  }147  .title {148    font-size: 34px;149    font-weight: 700;150    letter-spacing: 2px;151    color: #111;152    text-transform: uppercase;153    margin-bottom: 18px;154  }155  .price {156    font-size: 30px;157    letter-spacing: 2px;158    color: #111;159  }160 161  /* Bottom safe area */162  .bottom-bar {163    position: absolute;164    left: 0; right: 0; bottom: 0;165    height: 120px;166    background: #000;167    display: flex;168    align-items: center;169    justify-content: center;170  }171  .home-indicator {172    width: 200px;173    height: 10px;174    background: #eaeaea;175    border-radius: 6px;176  }177</style>178</head>179<body>180<div id="render-target">181 182  <!-- Status bar -->183  <div class="statusbar">184    <div class="time">10:53</div>185    <div class="status-icons">186      <span class="icon-white">187        <svg viewBox="0 0 24 24">188          <circle cx="12" cy="12" r="10" stroke-width="2"></circle>189        </svg>190      </span>191      <span class="icon-white">192        <svg viewBox="0 0 24 24">193          <circle cx="10" cy="10" r="7" stroke-width="2"></circle>194          <line x1="15" y1="15" x2="22" y2="22" stroke-width="2"></line>195        </svg>196      </span>197      <span class="icon-white">198        <svg viewBox="0 0 24 24">199          <circle cx="12" cy="12" r="2" stroke-width="2"></circle>200          <circle cx="20" cy="4" r="2" stroke-width="2"></circle>201          <circle cx="4" cy="20" r="2" stroke-width="2"></circle>202        </svg>203      </span>204      <span class="icon-white">205        <svg viewBox="0 0 24 24">206          <path d="M3 12h18" stroke-width="2"></path>207        </svg>208      </span>209      <span class="icon-white">210        <svg viewBox="0 0 24 24">211          <path d="M7 7h10v10H7z" stroke-width="2"></path>212        </svg>213      </span>214    </div>215  </div>216 217  <!-- Back chevron -->218  <div class="back-wrap">219    <svg viewBox="0 0 24 24">220      <path d="M15 5l-7 7 7 7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>221    </svg>222  </div>223 224  <!-- App header -->225  <div class="header">226    <div class="header-left">227      <div class="menu-block">228        <svg viewBox="0 0 24 24" width="48" height="48">229          <path d="M3 6h18M3 12h18M3 18h18" stroke-width="2" stroke-linecap="round"></path>230        </svg>231        <div class="label">MENU</div>232      </div>233      <svg viewBox="0 0 24 24" width="54" height="54">234        <circle cx="10" cy="10" r="6" stroke-width="2"></circle>235        <line x1="15" y1="15" x2="22" y2="22" stroke-width="2"></line>236      </svg>237    </div>238    <div class="header-center">239      <div class="brand-logo">VALENTINO</div>240      <div class="brand-sub">GARAVANI</div>241    </div>242    <div class="header-right">243      <svg viewBox="0 0 24 24" width="54" height="54">244        <path d="M12 17.3l6.18 3.7-1.64-7.03 5.46-4.23-7.19-.62L12 2 9.19 9.12l-7.19.62 5.46 4.23L5.82 21z" stroke-width="2" fill="none"></path>245      </svg>246      <svg viewBox="0 0 24 24" width="54" height="54">247        <path d="M6 7h12l-1 12H7L6 7z" stroke-width="2"></path>248        <path d="M9 7c0-2 6-2 6 0" stroke-width="2"></path>249      </svg>250    </div>251  </div>252 253  <!-- Sort and filter -->254  <div class="sortbar">SORT AND FILTER</div>255 256  <!-- Product grid -->257  <div class="product-area">258    <div class="grid">259      <!-- Product 1 -->260      <div class="product">261        <div class="prod-img">262          [IMG: White wide-leg pants]263          <div class="fav">264            <svg viewBox="0 0 24 24">265              <path d="M12 17.27L18.18 21 16.54 13.97 22 9.24 14.81 8.63 12 2 9.19 8.63 2 9.24 7.45 13.97 5.82 21z" stroke-width="2"></path>266            </svg>267          </div>268        </div>269        <div class="info">270          <div class="label">NEW ARRIVAL</div>271          <div class="title">CREPE COUTURE PANTS</div>272          <div class="price">$ 2,120.00</div>273        </div>274      </div>275 276      <!-- Product 2 -->277      <div class="product">278        <div class="prod-img">279          [IMG: Black straight-leg pants]280          <div class="fav">281            <svg viewBox="0 0 24 24">282              <path d="M12 17.27L18.18 21 16.54 13.97 22 9.24 14.81 8.63 12 2 9.19 8.63 2 9.24 7.45 13.97 5.82 21z" stroke-width="2"></path>283            </svg>284          </div>285        </div>286        <div class="info">287          <div class="label" style="visibility:hidden;">-</div>288          <div class="title">GRISAILLE PANTS</div>289          <div class="price">$ 1,940.00</div>290        </div>291      </div>292 293      <!-- Product 3 -->294      <div class="product">295        <div class="prod-img">296          [IMG: White denim pants]297          <div class="fav">298            <svg viewBox="0 0 24 24">299              <path d="M12 17.27L18.18 21 16.54 13.97 22 9.24 14.81 8.63 12 2 9.19 8.63 2 9.24 7.45 13.97 5.82 21z" stroke-width="2"></path>300            </svg>301          </div>302        </div>303        <div class="info">304          <div class="label">NEW ARRIVAL</div>305          <div class="title">DENIM PANTS</div>306          <div class="price">$ 1,400.00</div>307        </div>308      </div>309 310      <!-- Product 4 -->311      <div class="product">312        <div class="prod-img">313          [IMG: Blue denim pants]314          <div class="fav">315            <svg viewBox="0 0 24 24">316              <path d="M12 17.27L18.18 21 16.54 13.97 22 9.24 14.81 8.63 12 2 9.19 8.63 2 9.24 7.45 13.97 5.82 21z" stroke-width="2"></path>317            </svg>318          </div>319        </div>320        <div class="info">321          <div class="label">COMING SOON</div>322          <div class="title">DENIM PANTS</div>323          <div class="price">$ 1,340.00</div>324        </div>325      </div>326    </div>327  </div>328 329  <!-- Bottom safe area -->330  <div class="bottom-bar">331    <div class="home-indicator"></div>332  </div>333</div>334</body>335</html>