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>Party Wear Listing</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #ffffff;20    border-radius: 28px;21    box-shadow: 0 12px 30px rgba(0,0,0,0.08);22  }23 24  /* Status bar */25  .status-bar {26    height: 90px;27    padding: 0 36px;28    display: flex;29    align-items: center;30    justify-content: space-between;31    color: #333;32    font-size: 34px;33    letter-spacing: 0.2px;34  }35  .sb-left, .sb-right, .sb-mid {36    display: flex;37    align-items: center;38    gap: 20px;39  }40  .sb-dot {41    width: 24px;42    height: 24px;43    background: #cfcfcf;44    border-radius: 50%;45  }46  .sb-dot.dark {47    background: #111;48  }49  .sb-dot.mid {50    background: #666;51  }52 53  /* Header */54  .header {55    height: 130px;56    padding: 0 36px;57    display: flex;58    align-items: center;59    justify-content: space-between;60    border-bottom: 1px solid #e6e6e6;61  }62  .header-left, .header-right {63    display: flex;64    align-items: center;65    gap: 36px;66  }67  .title {68    font-weight: 700;69    font-size: 44px;70    letter-spacing: 0.5px;71    color: #333;72  }73  .icon-btn {74    width: 54px;75    height: 54px;76    display: inline-flex;77    align-items: center;78    justify-content: center;79  }80  .icon {81    width: 44px;82    height: 44px;83    stroke: #222;84    fill: none;85    stroke-width: 2.5;86  }87 88  /* Content */89  .content {90    padding: 24px 36px 120px 36px;91  }92 93  .product-grid {94    display: flex;95    flex-wrap: wrap;96    gap: 48px;97  }98  .product-card {99    width: 468px;100  }101  .price-row {102    display: flex;103    align-items: center;104    justify-content: space-between;105    margin-top: 16px;106  }107  .price {108    font-size: 46px;109    font-weight: 800;110    color: #333;111  }112  .card-heart .icon {113    width: 40px;114    height: 40px;115  }116  .product-title {117    margin-top: 10px;118    font-size: 32px;119    line-height: 42px;120    color: #555;121    display: -webkit-box;122    -webkit-line-clamp: 2;123    -webkit-box-orient: vertical;124    overflow: hidden;125  }126  .image-box {127    width: 100%;128    height: 600px;129    margin-top: 28px;130    background: #E0E0E0;131    border: 1px solid #BDBDBD;132    display: flex;133    align-items: center;134    justify-content: center;135    color: #757575;136    font-size: 28px;137    text-align: center;138    border-radius: 6px;139  }140 141  /* Bottom home indicator */142  .home-indicator {143    position: absolute;144    left: 50%;145    bottom: 42px;146    transform: translateX(-50%);147    width: 420px;148    height: 18px;149    background: #bfbfbf;150    border-radius: 9px;151  }152</style>153</head>154<body>155<div id="render-target">156  <!-- Status bar -->157  <div class="status-bar">158    <div class="sb-left">159      <div>8:57</div>160      <div class="sb-dot"></div>161      <div class="sb-dot mid"></div>162      <div class="sb-dot dark"></div>163      <div class="sb-dot dark"></div>164      <div>oyo</div>165      <div class="sb-dot"></div>166    </div>167    <div class="sb-right">168      <svg class="icon" viewBox="0 0 24 24">169        <path d="M2 16h20M4 12h16M6 8h12M8 4h8" />170      </svg>171      <svg class="icon" viewBox="0 0 24 24">172        <rect x="2" y="3" width="20" height="18" rx="3" ry="3"></rect>173        <rect x="18" y="1" width="4" height="2" rx="1"></rect>174      </svg>175    </div>176  </div>177 178  <!-- Header -->179  <div class="header">180    <div class="header-left">181      <div class="icon-btn" aria-label="Back">182        <svg class="icon" viewBox="0 0 24 24">183          <path d="M15 5L8 12l7 7" />184        </svg>185      </div>186      <div class="title">PARTY WEAR</div>187    </div>188    <div class="header-right">189      <div class="icon-btn" aria-label="Wishlist">190        <svg class="icon" viewBox="0 0 24 24">191          <path d="M12 21c-4.5-3.5-8-7-8-11a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4-3.5 7.5-8 11z" />192        </svg>193      </div>194      <div class="icon-btn" aria-label="Search">195        <svg class="icon" viewBox="0 0 24 24">196          <circle cx="11" cy="11" r="7"></circle>197          <path d="M20 20l-4.5-4.5"></path>198        </svg>199      </div>200    </div>201  </div>202 203  <!-- Content -->204  <div class="content">205    <div class="product-grid">206      <!-- Card 1 -->207      <div class="product-card">208        <div class="price-row">209          <div class="price">£48.00</div>210          <div class="card-heart">211            <svg class="icon" viewBox="0 0 24 24">212              <path d="M12 21c-4.5-3.5-8-7-8-11a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4-3.5 7.5-8 11z" />213            </svg>214          </div>215        </div>216        <div class="product-title">Extro & Vert high waisted leather look trousers co‑ord set</div>217        <div class="image-box">[IMG: Full-length white off-shoulder dress on white background]</div>218      </div>219 220      <!-- Card 2 -->221      <div class="product-card">222        <div class="price-row">223          <div class="price">£72.00</div>224          <div class="card-heart">225            <svg class="icon" viewBox="0 0 24 24">226              <path d="M12 21c-4.5-3.5-8-7-8-11a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4-3.5 7.5-8 11z" />227            </svg>228          </div>229        </div>230        <div class="product-title">ASOS DESIGN diamante fringe mesh mini dress in black</div>231        <div class="image-box">[IMG: Full-length brown satin halter dress on studio background]</div>232      </div>233 234      <!-- Card 3 -->235      <div class="product-card">236        <div class="price-row">237          <div class="price">£38.00</div>238          <div class="card-heart">239            <svg class="icon" viewBox="0 0 24 24">240              <path d="M12 21c-4.5-3.5-8-7-8-11a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4-3.5 7.5-8 11z" />241            </svg>242          </div>243        </div>244        <div class="product-title">ASOS DESIGN coated metallic one shoulder ruched midi dress</div>245        <div class="image-box">[IMG: Studio shot of silver off-shoulder floor-length dress]</div>246      </div>247 248      <!-- Card 4 -->249      <div class="product-card">250        <div class="price-row">251          <div class="price">£55.00</div>252          <div class="card-heart">253            <svg class="icon" viewBox="0 0 24 24">254              <path d="M12 21c-4.5-3.5-8-7-8-11a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4-3.5 7.5-8 11z" />255            </svg>256          </div>257        </div>258        <div class="product-title">River Island halter satin midi dress in brown</div>259        <div class="image-box">[IMG: Full-length chocolate brown satin dress, studio shot]</div>260      </div>261 262      <!-- Card 5 -->263      <div class="product-card">264        <div class="price-row">265          <div class="price">£69.00</div>266          <div class="card-heart">267            <svg class="icon" viewBox="0 0 24 24">268              <path d="M12 21c-4.5-3.5-8-7-8-11a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4-3.5 7.5-8 11z" />269            </svg>270          </div>271        </div>272        <div class="product-title">Jaded Rose long sleeve sequin mini dress in olive</div>273        <div class="image-box">[IMG: Green sequin long-sleeve mini dress, studio shot]</div>274      </div>275 276      <!-- Card 6 -->277      <div class="product-card">278        <div class="price-row">279          <div class="price">£32.00</div>280          <div class="card-heart">281            <svg class="icon" viewBox="0 0 24 24">282              <path d="M12 21c-4.5-3.5-8-7-8-11a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4-3.5 7.5-8 11z" />283            </svg>284          </div>285        </div>286        <div class="product-title">ASOS DESIGN scoop velvet mini dress with pearl strap detail</div>287        <div class="image-box">[IMG: Dark green velvet mini dress with front cut-out]</div>288      </div>289    </div>290  </div>291 292  <div class="home-indicator"></div>293</div>294</body>295</html>