GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Women • RDY • Running • Shoes</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    color: #111;16  }17 18  /* Top app bar */19  .appbar {20    position: relative;21    height: 160px;22    padding: 24px 36px 0 36px;23    box-sizing: border-box;24    border-bottom: 1px solid #eee;25  }26  .appbar .title {27    text-align: center;28    font-weight: 700;29    letter-spacing: 6px;30    text-transform: uppercase;31    font-size: 34px;32    margin-top: 28px;33  }34  .appbar .results {35    text-align: center;36    color: #666;37    font-size: 24px;38    margin-top: 10px;39  }40  .icon-btn {41    position: absolute;42    top: 58px;43    width: 72px;44    height: 72px;45    display: flex;46    justify-content: center;47    align-items: center;48    cursor: default;49  }50  .icon-left { left: 24px; }51  .icon-right { right: 24px; }52 53  /* Filter row */54  .filters {55    display: flex;56    align-items: center;57    gap: 24px;58    padding: 24px 36px;59    border-bottom: 1px solid #eee;60  }61  .filter-icon {62    position: relative;63    width: 92px;64    height: 64px;65    border: 1px solid #ddd;66    border-radius: 8px;67    display: flex;68    justify-content: center;69    align-items: center;70  }71  .filter-badge {72    position: absolute;73    left: -12px;74    top: -12px;75    background: #000;76    color: #fff;77    font-size: 26px;78    width: 48px;79    height: 48px;80    border-radius: 8px;81    display: flex;82    justify-content: center;83    align-items: center;84    font-weight: 700;85  }86  .chip {87    padding: 16px 28px;88    font-size: 26px;89    border-radius: 8px;90    border: 2px solid #000;91    background: #fff;92    font-weight: 700;93    letter-spacing: 2px;94  }95  .chip.disabled {96    border-color: #d9d9d9;97    color: #b5b5b5;98    background: #f5f5f5;99    font-weight: 600;100  }101 102  /* Promo section */103  .promo {104    padding: 60px 36px 24px 36px;105  }106  .promo h2 {107    margin: 0;108    font-size: 36px;109    letter-spacing: 6px;110    text-transform: uppercase;111    font-weight: 800;112  }113  .promo p {114    margin: 22px 0 0 0;115    color: #555;116    font-size: 28px;117  }118 119  /* Product grid */120  .grid {121    display: flex;122    gap: 0;123    padding: 0;124  }125  .card {126    width: 540px;127    border-right: 1px solid #e7e7e7;128  }129  .card:last-child { border-right: 0; }130  .card .img {131    position: relative;132    width: 540px;133    height: 520px;134    background: #E0E0E0;135    border: 1px solid #BDBDBD;136    display: flex;137    justify-content: center;138    align-items: center;139    color: #757575;140    font-size: 28px;141  }142  .heart {143    position: absolute;144    right: 24px;145    top: 24px;146    width: 64px;147    height: 64px;148    display: flex;149    align-items: center;150    justify-content: center;151  }152  .card .meta {153    background: #edf1f3;154    padding: 22px 24px;155    display: flex;156    align-items: center;157    gap: 16px;158  }159  .tag {160    background: #000;161    color: #fff;162    font-size: 22px;163    padding: 10px 14px;164    border-radius: 8px;165    font-weight: 700;166  }167  .tag.light {168    background: #fff;169    color: #111;170    border: 1px solid #d8d8d8;171    font-weight: 700;172    letter-spacing: 4px;173  }174  .price {175    margin-left: auto;176    font-size: 28px;177    color: #111;178    font-weight: 700;179  }180  .price .sale {181    color: #e74c3c;182    margin-right: 12px;183  }184  .price .old {185    color: #777;186    text-decoration: line-through;187    font-weight: 600;188  }189  .card .content {190    padding: 24px;191    border-bottom: 1px solid #e7e7e7;192  }193  .card .title {194    font-size: 32px;195    font-weight: 800;196    line-height: 1.3;197    margin-bottom: 12px;198  }199  .card .sub {200    font-size: 26px;201    color: #666;202  }203 204  /* Bottom navigation */205  .bottom-nav {206    position: absolute;207    left: 0;208    right: 0;209    bottom: 0;210    height: 160px;211    border-top: 1px solid #eee;212    background: #fafafa;213    display: flex;214    align-items: center;215    justify-content: space-around;216  }217  .nav-item {218    position: relative;219    width: 140px;220    height: 100px;221    display: flex;222    align-items: center;223    justify-content: center;224    color: #9aa0a6;225  }226  .badge {227    position: absolute;228    bottom: 8px;229    right: 32px;230    background: #cfcfcf;231    color: #111;232    font-size: 24px;233    width: 48px;234    height: 36px;235    border-radius: 6px;236    display: flex;237    align-items: center;238    justify-content: center;239    font-weight: 700;240  }241</style>242</head>243<body>244<div id="render-target">245 246  <!-- Top bar with back and search -->247  <div class="appbar">248    <div class="icon-btn icon-left">249      <svg width="40" height="40" viewBox="0 0 24 24">250        <path d="M15 6l-6 6 6 6" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>251      </svg>252    </div>253    <div class="icon-btn icon-right">254      <svg width="44" height="44" viewBox="0 0 24 24">255        <circle cx="11" cy="11" r="7" fill="none" stroke="#111" stroke-width="2"/>256        <path d="M20 20l-4-4" stroke="#111" stroke-width="2" stroke-linecap="round"/>257      </svg>258    </div>259    <div class="title">Women • RDY • Running • Shoes</div>260    <div class="results">2 RESULTS</div>261  </div>262 263  <!-- Filters -->264  <div class="filters">265    <div class="filter-icon">266      <div class="filter-badge">1</div>267      <svg width="36" height="36" viewBox="0 0 24 24">268        <path d="M4 7h12M4 12h8M4 17h10" stroke="#111" stroke-width="2" stroke-linecap="round"/>269      </svg>270    </div>271    <div class="chip">RDY</div>272    <div class="chip disabled">BOOST</div>273    <div class="chip disabled">REPETITOR</div>274  </div>275 276  <!-- Promo / Info section -->277  <div class="promo">278    <h2>Adidas Training Plans</h2>279    <p>Discover our new plans that adapt to your level.</p>280  </div>281 282  <!-- Product grid -->283  <div class="grid">284    <!-- Card 1 -->285    <div class="card">286      <div class="img">287        [IMG: Running Shoe on Grey Background]288        <div class="heart">289          <svg width="52" height="52" viewBox="0 0 24 24">290            <path d="M12 21s-7-4.35-9-8.5C1.5 9 3.5 7 6 7c2 0 3 1.2 3 1.2S10 7 12 7s3 .2 3 .2S16 7 18 7c2.5 0 4.5 2 3 5.5C19 16.65 12 21 12 21z" fill="none" stroke="#111" stroke-width="2" stroke-linejoin="round"/>291          </svg>292        </div>293      </div>294      <div class="meta">295        <div class="tag">AR</div>296        <div class="tag light">NEW</div>297        <div class="price">$140.00</div>298      </div>299      <div class="content">300        <div class="title">Adistar COLD.RDY Running Shoes</div>301        <div class="sub">Women's Performance</div>302      </div>303    </div>304 305    <!-- Card 2 -->306    <div class="card">307      <div class="img">308        [IMG: Black Running Shoe on Grey Background]309        <div class="heart">310          <svg width="52" height="52" viewBox="0 0 24 24">311            <path d="M12 21s-7-4.35-9-8.5C1.5 9 3.5 7 6 7c2 0 3 1.2 3 1.2S10 7 12 7s3 .2 3 .2S16 7 18 7c2.5 0 4.5 2 3 5.5C19 16.65 12 21 12 21z" fill="none" stroke="#111" stroke-width="2" stroke-linejoin="round"/>312          </svg>313        </div>314      </div>315      <div class="meta">316        <div class="tag">AR</div>317        <div class="price"><span class="sale">$98.00</span><span class="old">$140.00</span></div>318      </div>319      <div class="content">320        <div class="title">Pureboost 22 HEAT.RDY Running Shoes</div>321        <div class="sub">Women's Performance</div>322      </div>323    </div>324  </div>325 326  <!-- Bottom navigation -->327  <div class="bottom-nav">328    <div class="nav-item">329      <svg width="44" height="44" viewBox="0 0 24 24">330        <path d="M6 20c0-5 6-8 6-16 2 6 6 9 6 16" fill="none" stroke="#9aa0a6" stroke-width="2" stroke-linecap="round"/>331      </svg>332    </div>333    <div class="nav-item">334      <svg width="44" height="44" viewBox="0 0 24 24">335        <circle cx="11" cy="11" r="7" fill="none" stroke="#9aa0a6" stroke-width="2"/>336        <path d="M20 20l-4-4" stroke="#9aa0a6" stroke-width="2" stroke-linecap="round"/>337      </svg>338    </div>339    <div class="nav-item">340      <svg width="44" height="44" viewBox="0 0 24 24">341        <path d="M12 21s-7-4.35-9-8.5C1.5 9 3.5 7 6 7c2 0 3 1.2 3 1.2S10 7 12 7s3 .2 3 .2S16 7 18 7c2.5 0 4.5 2 3 5.5C19 16.65 12 21 12 21z" fill="none" stroke="#9aa0a6" stroke-width="2"/>342      </svg>343      <div class="badge">1</div>344    </div>345    <div class="nav-item">346      <svg width="44" height="44" viewBox="0 0 24 24">347        <rect x="6" y="8" width="12" height="12" rx="2" fill="none" stroke="#9aa0a6" stroke-width="2"/>348        <path d="M9 8V6h6v2" stroke="#9aa0a6" stroke-width="2"/>349      </svg>350      <div class="badge">7</div>351    </div>352    <div class="nav-item">353      <svg width="44" height="44" viewBox="0 0 24 24">354        <circle cx="12" cy="12" r="8" fill="none" stroke="#9aa0a6" stroke-width="2"/>355        <path d="M12 4v8l6 4" stroke="#9aa0a6" stroke-width="2" stroke-linecap="round"/>356      </svg>357    </div>358  </div>359 360</div>361</body>362</html>