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 { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color:#222; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden; background: #fff;11  }12 13  /* Top app bar */14  .header {15    height: 160px;16    padding: 32px 48px 24px 48px;17    display: flex; align-items: flex-end; justify-content: space-between;18    border-bottom: 1px solid #eee;19  }20  .header-left { display: flex; align-items: center; gap: 24px; }21  .title { font-size: 44px; letter-spacing: 1px; font-weight: 700; }22  .header-actions { display: flex; align-items: center; gap: 28px; }23 24  /* Controls row */25  .controls {26    height: 120px;27    padding: 0 48px;28    display: flex; align-items: center; justify-content: space-between;29    border-bottom: 1px solid #eee;30  }31  .control-left, .control-right { font-size: 36px; font-weight: 700; letter-spacing: 0.5px; }32  .muted { color: #777; font-weight: 500; }33  .found {34    text-align: center; color: #777; font-size: 34px; margin: 28px 0 16px 0;35  }36 37  /* Product grid */38  .products {39    padding: 12px 48px 0 48px;40    display: grid; grid-template-columns: 1fr 1fr;41    column-gap: 48px; row-gap: 64px;42  }43  .card { }44  .img {45    width: 100%; height: 680px;46    background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;47    display: flex; align-items: center; justify-content: center; text-align: center;48    position: relative; font-size: 30px; padding: 18px; box-sizing: border-box;49  }50  .ribbon {51    position: absolute; top: 0; left: 0; right: 0;52    height: 80px; background: #2b2b2b; color: #fff;53    display: flex; align-items: center; justify-content: center;54    text-transform: uppercase; font-weight: 800; font-size: 28px; letter-spacing: 1px;55  }56  .badge {57    position: absolute; left: 24px; bottom: 24px;58    background: rgba(240,240,240,0.96); color: #444;59    padding: 18px 22px; font-weight: 700; font-size: 26px; letter-spacing: .5px;60    border-radius: 2px; border: 1px solid #d0d0d0;61  }62  .price-row {63    display: flex; align-items: center; justify-content: space-between;64    margin-top: 26px;65  }66  .price { font-size: 44px; font-weight: 800; letter-spacing: .3px; }67  .name {68    margin-top: 16px; font-size: 32px; line-height: 44px; color: #444;69  }70 71  /* Bottom handle */72  .handle {73    position: absolute; left: 50%; transform: translateX(-50%);74    bottom: 30px; width: 280px; height: 14px; background: #CFCFCF; border-radius: 10px;75  }76 77  /* Icon defaults */78  svg { display: block; }79  .icon-24 { width: 48px; height: 48px; }80  .icon-28 { width: 56px; height: 56px; }81  .chev { width: 40px; height: 40px; margin-left: 10px; }82  .control-left span { vertical-align: middle; }83</style>84</head>85<body>86<div id="render-target">87 88  <!-- Top App Bar -->89  <div class="header">90    <div class="header-left">91      <!-- Back Arrow -->92      <svg class="icon-28" viewBox="0 0 24 24" aria-hidden="true">93        <path d="M14 5L7 12l7 7" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>94      </svg>95      <div class="title">PARTY WEAR</div>96    </div>97    <div class="header-actions">98      <!-- Heart outline -->99      <svg class="icon-28" viewBox="0 0 24 24" aria-hidden="true">100        <path d="M12 21c-4.8-3.7-8-6.6-8-10.2C4 8.2 6 6.5 8.2 6.5c1.5 0 2.8.8 3.8 2 1-1.2 2.3-2 3.8-2C18 6.5 20 8.2 20 10.8c0 3.6-3.2 6.5-8 10.2z" fill="none" stroke="#111" stroke-width="1.8" stroke-linejoin="round"/>101      </svg>102      <!-- Search -->103      <svg class="icon-28" viewBox="0 0 24 24" aria-hidden="true">104        <circle cx="11" cy="11" r="7" fill="none" stroke="#111" stroke-width="2"/>105        <path d="M20 20l-3.5-3.5" stroke="#111" stroke-width="2" stroke-linecap="round"/>106      </svg>107    </div>108  </div>109 110  <!-- Controls Row -->111  <div class="controls">112    <div class="control-left">113      <span>RECOMMENDED</span>114      <svg class="chev" viewBox="0 0 24 24" aria-hidden="true">115        <path d="M6 9l6 6 6-6" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>116      </svg>117    </div>118    <div class="control-right">FILTER</div>119  </div>120 121  <!-- Items Found -->122  <div class="found">5690 items found</div>123 124  <!-- Product Grid -->125  <div class="products">126 127    <!-- Card 1 -->128    <div class="card">129      <div class="img">130        [IMG: Black ruffle top outfit at night]131        <div class="badge">MORE COLOURS</div>132      </div>133      <div class="price-row">134        <div class="price">£90.00</div>135        <svg class="icon-24" viewBox="0 0 24 24" aria-hidden="true">136          <path d="M12 21c-4.8-3.7-8-6.6-8-10.2C4 8.2 6 6.5 8.2 6.5c1.5 0 2.8.8 3.8 2 1-1.2 2.3-2 3.8-2C18 6.5 20 8.2 20 10.8c0 3.6-3.2 6.5-8 10.2z" fill="none" stroke="#111" stroke-width="1.8" stroke-linejoin="round"/>137        </svg>138      </div>139      <div class="name">ASOS LUXE Premium 3D velvet ruffle top in black</div>140    </div>141 142    <!-- Card 2 -->143    <div class="card">144      <div class="img">145        <div class="ribbon">SELLING FAST</div>146        [IMG: Slingback mid-heeled shoes on leather car seat]147        <div class="badge">MORE COLOURS</div>148      </div>149      <div class="price-row">150        <div class="price">£30.00</div>151        <svg class="icon-24" viewBox="0 0 24 24" aria-hidden="true">152          <path d="M12 21c-4.8-3.7-8-6.6-8-10.2C4 8.2 6 6.5 8.2 6.5c1.5 0 2.8.8 3.8 2 1-1.2 2.3-2 3.8-2C18 6.5 20 8.2 20 10.8c0 3.6-3.2 6.5-8 10.2z" fill="none" stroke="#111" stroke-width="1.8" stroke-linejoin="round"/>153        </svg>154      </div>155      <div class="name">ASOS DESIGN Strut slingback mid heeled shoes ...</div>156    </div>157 158    <!-- Card 3 -->159    <div class="card">160      <div class="img">161        [IMG: Blazer and bralet outfit at night by riverside]162      </div>163      <div class="price-row">164        <div class="price">£19.00</div>165        <svg class="icon-24" viewBox="0 0 24 24" aria-hidden="true">166          <path d="M12 21c-4.8-3.7-8-6.6-8-10.2C4 8.2 6 6.5 8.2 6.5c1.5 0 2.8.8 3.8 2 1-1.2 2.3-2 3.8-2C18 6.5 20 8.2 20 10.8c0 3.6-3.2 6.5-8 10.2z" fill="none" stroke="#111" stroke-width="1.8" stroke-linejoin="round"/>167        </svg>168      </div>169      <div class="name">ASOS DESIGN hotfix bralet in black</div>170    </div>171 172    <!-- Card 4 -->173    <div class="card">174      <div class="img">175        [IMG: Metallic maxi skirt in silver studio shot]176      </div>177      <div class="price-row">178        <div class="price">£48.00</div>179        <svg class="icon-24" viewBox="0 0 24 24" aria-hidden="true">180          <path d="M12 21c-4.8-3.7-8-6.6-8-10.2C4 8.2 6 6.5 8.2 6.5c1.5 0 2.8.8 3.8 2 1-1.2 2.3-2 3.8-2C18 6.5 20 8.2 20 10.8c0 3.6-3.2 6.5-8 10.2z" fill="none" stroke="#111" stroke-width="1.8" stroke-linejoin="round"/>181        </svg>182      </div>183      <div class="name">4th & Reckless metallic maxi skirt in silver</div>184    </div>185 186  </div>187 188  <!-- Bottom gesture handle -->189  <div class="handle"></div>190</div>191</body>192</html>