GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Sports Shoes Listing</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    background: #000; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;11  }12  .statusbar {13    position: absolute; top: 0; left: 0; height: 96px; width: 100%;14    background: #000; color: #fff; font-size: 34px; line-height: 96px; padding: 0 40px;15    box-sizing: border-box;16  }17  .statusbar .right { float: right; display: flex; align-items: center; gap: 22px; }18  .topbar {19    position: absolute; top: 96px; left: 0; height: 164px; width: 100%;20    background: #2c2c2c; border-bottom: 1px solid #3d3d3d;21    display: flex; align-items: center; justify-content: space-between;22    padding: 0 36px; box-sizing: border-box;23  }24  .topbar .left { display: flex; align-items: center; gap: 28px; }25  .topbar .title {26    font-size: 44px; color: #e9e9e9; letter-spacing: 1px; font-weight: 700;27  }28  .topbar .actions { display: flex; align-items: center; gap: 36px; }29  .sortbar {30    position: absolute; top: 260px; left: 0; height: 120px; width: 100%;31    background: #2c2c2c; border-bottom: 1px solid #3d3d3d;32    display: flex; align-items: center; justify-content: space-between;33    padding: 0 40px; box-sizing: border-box;34  }35  .sortbar .label { font-size: 36px; font-weight: 800; color: #e6e6e6; display: flex; align-items: center; gap: 14px; }36  .found {37    position: absolute; top: 380px; left: 0; width: 100%; height: 80px;38    display: flex; align-items: center; justify-content: center;39    color: #cfcfcf; font-size: 32px;40  }41  .grid {42    position: absolute; top: 460px; left: 0; width: 100%; bottom: 60px;43    padding: 36px; box-sizing: border-box;44    display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: 44px 44px;45  }46  .card { background: transparent; }47  .img {48    width: 100%; height: 620px; background: #E0E0E0; border: 1px solid #BDBDBD;49    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 34px; position: relative;50  }51  .badge {52    position: absolute; bottom: 18px; left: 18px;53    background: #ffffff; color: #202020; font-size: 28px; font-weight: 800;54    padding: 12px 18px;55  }56  .ribbon {57    position: absolute; top: 16px; left: 16px;58    background: #fff; color: #ff6b86; font-size: 28px; font-weight: 800;59    padding: 10px 16px;60  }61  .tag-top {62    position: absolute; top: 0; left: 0; right: 0; height: 70px;63    background: #f1f1f1; color: #202020; font-weight: 900; font-size: 28px;64    display: flex; align-items: center; justify-content: center;65  }66  .price-row {67    margin-top: 24px; display: flex; align-items: baseline; justify-content: space-between;68  }69  .price { font-size: 44px; font-weight: 800; }70  .old { font-size: 32px; color: #c9c9c9; text-decoration: line-through; }71  .sale { font-size: 44px; font-weight: 900; color: #ff4e75; }72  .name { margin-top: 12px; font-size: 30px; line-height: 40px; color: #eaeaea; }73  .heart-btn svg { width: 44px; height: 44px; stroke: #fff; fill: none; stroke-width: 2.5; }74  /* bottom gesture bar */75  .gesture {76    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);77    width: 420px; height: 14px; background: #d9d9d9; border-radius: 14px; opacity: 0.9;78  }79  /* helper small icons */80  .icon { width: 48px; height: 48px; }81  .search-icon { stroke: #fff; stroke-width: 2.5; fill: none; }82  .back-icon { fill: none; stroke: #fff; stroke-width: 3; }83  .chev-down { width: 28px; height: 28px; stroke: #e6e6e6; stroke-width: 3; fill: none; }84</style>85</head>86<body>87<div id="render-target">88  <!-- Status bar -->89  <div class="statusbar">90    <span>10:51</span>91    <div class="right">92      <!-- simplified status icons -->93      <svg class="icon" viewBox="0 0 24 24">94        <circle cx="12" cy="12" r="9" fill="none" stroke="#fff" stroke-width="2"/>95        <text x="7" y="16" font-size="10" fill="#fff">i</text>96      </svg>97      <svg class="icon" viewBox="0 0 24 24">98        <rect x="3" y="5" width="16" height="14" rx="2" fill="none" stroke="#fff" stroke-width="2"/>99        <rect x="19" y="9" width="2.5" height="6" fill="#fff"/>100      </svg>101      <svg class="icon" viewBox="0 0 24 24">102        <circle cx="10" cy="10" r="7" fill="none" stroke="#fff" stroke-width="2"/>103        <line x1="15" y1="15" x2="21" y2="21" stroke="#fff" stroke-width="2"/>104      </svg>105      <span style="font-size:30px;">90%</span>106    </div>107  </div>108 109  <!-- Top toolbar -->110  <div class="topbar">111    <div class="left">112      <svg class="icon back-icon" viewBox="0 0 24 24">113        <polyline points="15,4 7,12 15,20" />114      </svg>115      <div class="title">"SPORTS SHOES"</div>116    </div>117    <div class="actions">118      <svg class="icon" viewBox="0 0 24 24">119        <path d="M12 21c4-3.6 8-6.4 8-10.2a5.3 5.3 0 0 0-9.3-3.6L12 8l1.3-1.8a5.3 5.3 0 0 0-9.3 3.6C4 14.6 8 17.4 12 21z" fill="none" stroke="#fff" stroke-width="2"/>120      </svg>121      <svg class="icon search-icon" viewBox="0 0 24 24">122        <circle cx="11" cy="11" r="7"/>123        <line x1="17" y1="17" x2="22" y2="22"/>124      </svg>125    </div>126  </div>127 128  <!-- Sort/filter bar -->129  <div class="sortbar">130    <div class="label">131      <span>RECOMMENDED</span>132      <svg class="chev-down" viewBox="0 0 24 24">133        <polyline points="6,9 12,15 18,9" />134      </svg>135    </div>136    <div class="label">FILTER</div>137  </div>138 139  <div class="found">91 items found</div>140 141  <!-- Grid of products -->142  <div class="grid">143    <!-- Card 1 -->144    <div class="card">145      <div class="img">146        [IMG: Black running shoe on per