GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>PUMA Slides Grid</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #ffffff; color: #111;12  }13 14  /* Status bar */15  .status {16    position: absolute; top: 16px; left: 36px; right: 36px; height: 44px;17    display: flex; align-items: center; justify-content: space-between;18    font-weight: 600; font-size: 38px;19  }20  .status .dots { display: flex; gap: 26px; align-items: center; }21  .dot {22    width: 20px; height: 20px; background:#333; border-radius:50%;23    display:inline-block;24  }25 26  /* Top controls */27  .top-controls {28    position: absolute; top: 92px; left: 20px; right: 20px; height: 72px;29    display: flex; align-items: center; justify-content: space-between;30  }31  .back-btn {32    display: flex; align-items: center; gap: 10px; padding: 12px 16px;33  }34  .icon-btn {35    position: relative; width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center;36  }37  .badge {38    position: absolute; top: -6px; right: -2px;39    min-width: 36px; height: 36px; padding: 0 8px;40    background: #000; color:#fff; border-radius: 18px;41    font-size: 24px; line-height: 36px; text-align: center;42  }43 44  /* Section header */45  .section-header {46    position: absolute; top: 188px; left: 48px; right: 48px; height: 80px;47    display: flex; align-items: center; justify-content: space-between;48  }49  .section-title {50    font-size: 56px; font-weight: 800; letter-spacing: 0.5px;51  }52  .sort {53    display: flex; align-items: center; gap: 16px; font-size: 40px; font-weight: 700;54  }55 56  /* Grid */57  .grid {58    position: absolute; top: 280px; left: 48px; right: 48px; bottom: 180px;59  }60  .cards {61    display: grid;62    grid-template-columns: 1fr 1fr;63    column-gap: 30px; row-gap: 52px;64  }65  .card {66    position: relative; min-height: 780px;67  }68  .img-wrap {69    position: relative; width: 100%; height: 420px; background:#E0E0E0; border:1px solid #BDBDBD;70    display:flex; align-items:center; justify-content:center; color:#757575; font-size: 34px;71  }72  .label-new {73    position: absolute; top: -22px; left: 0;74    background:#0a0a0a; color:#fff; font-size: 30px; font-weight: 800;75    padding: 10px 18px;76  }77  .heart {78    position: absolute; top: -18px; right: 10px; width: 64px; height: 64px; display:flex; align-items:center; justify-content:center;79  }80  .colors {81    margin-top: 22px; font-size: 36px; color:#333; display:flex; align-items:center; gap: 10px;82  }83  .title {84    margin-top: 16px; font-size: 44px; font-weight: 800;85  }86  .price {87    margin-top: 12px; font-size: 44px; font-weight: 800;88  }89  .promo {90    margin-top: 18px; font-size: 34px; color:#8A2D13; line-height: 1.45; font-weight: 700;91  }92 93  /* Bottom nav */94  .bottom-nav {95    position: absolute; left: 0; right: 0; bottom: 0; height: 160px;96    border-top: 1px solid #ddd; background:#fff;97    display:flex; align-items:center; justify-content: space-around;98  }99  .tab {100    display:flex; flex-direction: column; align-items:center; justify-content:center; gap: 10px;101    color:#1a1a1a; font-size: 30px; font-weight: 700;102  }103  .tab .cart-badge {104    position: absolute; top: 8px; right: 24px; background:#b79254; color:#fff; width: 44px; height: 44px; border-radius:22px; font-size:26px; display:flex; align-items:center; justify-content:center;105  }106 107  /* Small helper icons */108  svg { display: block; }109</style>110</head>111<body>112<div id="render-target">113 114  <!-- Status bar -->115  <div class="status">116    <div>10:17</div>117    <div class="dots">118      <span class="dot"></span>119      <span class="dot"></span>120      <span class="dot"></span>121      <span class="dot"></span>122    </div>123  </div>124 125  <!-- Top controls -->126  <div class="top-controls">127    <div class="back-btn">128      <svg width="48" height="48" viewBox="0 0 24 24">129        <path d="M15 19L8 12l7-7" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>130      </svg>131    </div>132    <div style="display:flex; align-items:center; gap:30px;">133      <div class="icon-btn">134        <svg width="44" height="44" viewBox="0 0 24 24">135          <circle cx="11" cy="11" r="7" stroke="#111" stroke-width="2" fill="none"/>136          <path d="M21 21l-4.5-4.5" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>137        </svg>138      </div>139      <div class="icon-btn">140        <svg width="44" height="44" viewBox="0 0 24 24">141          <path d="M6 6h15l-2 10H7L6 6z" stroke="#111" stroke-width="2" fill="none" stroke-linejoin="round"/>142          <circle cx="9" cy="20" r="1.6" fill="#111"/>143          <circle cx="18" cy="20" r="1.6" fill="#111"/>144        </svg>145        <div class="badge">1</div>146      </div>147    </div>148  </div>149 150  <!-- Section header -->151  <div class="section-header">152    <div class="section-title">44 PRODUCTS</div>153    <div class="sort">154      SORT155      <svg width="36" height="36" viewBox="0 0 24 24">156        <path d="M7 7h10M7 12h7M7 17h4" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>157      </svg>158    </div>159  </div>160 161  <!-- Product grid -->162  <div class="grid">163    <div class="cards">164 165      <!-- Card 1 -->166      <div class="card">167        <div class="img-wrap">168          <div class="label-new">NEW</div>169          <div class="heart">170            <svg width="44" height="44" viewBox="0 0 24 24">171              <path d="M12 21s-7.5-4.6-9-8.7C1.9 8.4 4 6 6.8 6c1.7 0 3 .9 3.8 2.1C11.4 6.9 12.8 6 14.5 6c2.8 0 4.9 2.4 3.7 6.3C19.5 16.4 12 21 12 21z" stroke="#111" stroke-width="1.6" fill="none"/>172            </svg>173          </div>174          [IMG: Light green slide sandal]175        </div>176        <div class="colors">3 Colors177          <svg width="22" height="22" viewBox="0 0 24 24">178            <path d="M6 9l6 6 6-6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>179          </svg>180        </div>181        <div class="title">Shibui Cat Slides</div>182        <div class="price">$45.00</div>183        <div class="promo">184          TAKE 40% OFF CLOTHING WHEN YOU BUY ANY SHOES. EXCLUSIONS APPLY. PRICE REFLECTED IN CART.185        </div>186      </div>187 188      <!-- Card 2 -->189      <div class="card">190        <div class="img-wrap">191          <div class="label-new">NEW</div>192          <div class="heart">193            <svg width="44" height="44" viewBox="0 0 24 24">194              <path d="M12 21s-7.5-4.6-9-8.7C1.9 8.4 4 6 6.8 6c1.7 0 3 .9 3.8 2.1C11.4 6.9 12.8 6 14.5 6c2.8 0 4.9 2.4 3.7 6.3C19.5 16.4 12 21 12 21z" stroke="#111" stroke-width="1.6" fill="none"/>195            </svg>196          </div>197          [IMG: White & gray PUMA slide, top & sole]198        </div>199        <div class="colors">3 Colors200          <svg width="22" height="22" viewBox="0 0 24 24">201            <path d="M6 9l6 6 6-6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>202          </svg>203        </div>204        <div class="title">Softride Slides</div>205        <div class="price">$45.00</div>206        <div class="promo">207          TAKE 40% OFF CLOTHING WHEN YOU BUY ANY SHOES. EXCLUSIONS APPLY. PRICE REFLECTED IN CART.208        </div>209      </div>210 211      <!-- Card 3 -->212      <div class="card">213        <div class="img-wrap">214          <div class="label-new">NEW</div>215          <div class="heart">216            <svg width="44" height="44" viewBox="0 0 24 24">217              <path d="M12 21s-7.5-4.6-9-8.7C1.9 8.4 4 6 6.8 6c1.7 0 3 .9 3.8 2.1C11.4 6.9 12.8 6 14.5 6c2.8 0 4.9 2.4 3.7 6.3C19.5 16.4 12 21 12 21z" stroke="#111" stroke-width="1.6" fill="none"/>218            </svg>219          </div>220          [IMG: Olive/black PUMA slide with logo]221        </div>222        <div class="colors">5 Colors223          <svg width="22" height="22" viewBox="0 0 24 24">224            <path d="M6 9l6 6 6-6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>225          </svg>226        </div>227        <div class="title">Leadcat Slides</div>228        <div class="price">$35.00</div>229        <div class="promo">230          TAKE 40% OFF CLOTHING WHEN YOU BUY ANY SHOES. EXCLUSIONS APPLY. PRICE REFLECTED IN CART.231        </div>232      </div>233 234      <!-- Card 4 -->235      <div class="card">236        <div class="img-wrap">237          <div class="heart">238            <svg width="44" height="44" viewBox="0 0 24 24">239              <path d="M12 21s-7.5-4.6-9-8.7C1.9 8.4 4 6 6.8 6c1.7 0 3 .9 3.8 2.1C11.4 6.9 12.8 6 14.5 6c2.8 0 4.9 2.4 3.7 6.3C19.5 16.4 12 21 12 21z" stroke="#111" stroke-width="1.6" fill="none"/>240            </svg>241          </div>242          [IMG: Black molded slide sandal]243        </div>244        <div class="colors">3 Colors245          <svg width="22" height="22" viewBox="0 0 24 24">246            <path d="M6 9l6 6 6-6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>247          </svg>248        </div>249        <div class="title">Shibui Cat Slides</div>250        <div class="price">$45.00</div>251        <div class="promo">252          TAKE 40% OFF CLOTHING WHEN YOU BUY ANY SHOES. EXCLUSIONS APPLY. PRICE REFLECTED IN CART.253        </div>254      </div>255 256    </div>257  </div>258 259  <!-- Bottom navigation -->260  <div class="bottom-nav">261    <div class="tab">262      <svg width="48" height="48" viewBox="0 0 24 24">263        <path d="M3 11l9-7 9 7v9H3z" stroke="#111" stroke-width="2" fill="none" stroke-linejoin="round"/>264      </svg>265      <div>HOME</div>266    </div>267    <div class="tab">268      <svg width="48" height="48" viewBox="0 0 24 24">269        <path d="M4 4h16v6H4zM7 14h10v6H7z" stroke="#111" stroke-width="2" fill="none"/>270      </svg>271      <div>DROPS</div>272    </div>273    <div class="tab" style="color:#000;">274      <svg width="48" height="48" viewBox="0 0 24 24">275        <path d="M6 6h12M6 12h12M6 18h12" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>276      </svg>277      <div>SHOP</div>278    </div>279    <div class="tab" style="position:relative;">280      <svg width="48" height="48" viewBox="0 0 24 24">281        <path d="M6 6h15l-2 10H7L6 6z" stroke="#111" stroke-width="2" fill="none"/>282        <circle cx="9" cy="20" r="1.6" fill="#111"/>283        <circle cx="18" cy="20" r="1.6" fill="#111"/>284      </svg>285      <div>CART</div>286    </div>287    <div class="tab" style="position:relative;">288      <svg width="48" height="48" viewBox="0 0 24 24">289        <circle cx="12" cy="7" r="4" stroke="#111" stroke-width="2" fill="none"/>290        <path d="M4 21c0-4 4-6 8-6s8 2 8 6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>291      </svg>292      <div>ACCOUNT</div>293      <div class="cart-badge">2</div>294    </div>295  </div>296 297</div>298</body>299</html>