GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Shoes Categories</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Helvetica, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #FFFFFF;14  }15 16  /* Status bar (simulated) */17  .statusbar {18    height: 110px;19    position: relative;20    padding: 24px 40px;21    color: #6e6e6e;22    font-size: 36px;23    line-height: 1;24  }25  .statusbar .time { position: absolute; left: 40px; top: 32px; }26  .statusbar .icons { position: absolute; right: 40px; top: 26px; display: flex; gap: 26px; align-items: center; }27  .statusbar svg { opacity: 0.7; }28 29  /* Header */30  .appbar {31    position: relative;32    height: 180px;33  }34  .back-btn {35    position: absolute;36    left: 48px;37    top: 54px;38    width: 64px;39    height: 64px;40  }41  .title {42    position: absolute;43    left: 0;44    right: 0;45    top: 50px;46    text-align: center;47    font-weight: 800;48    font-size: 64px;49    letter-spacing: 6px;50    color: #111;51  }52 53  /* List */54  .list { margin-top: 20px; }55  .item {56    display: flex;57    align-items: center;58    padding: 46px 60px;59    border-top: 1px solid #EEE;60  }61  .item:first-child { border-top: none; }62  .thumb {63    width: 220px;64    height: 220px;65    background: #E0E0E0;66    border: 1px solid #BDBDBD;67    display: flex;68    align-items: center;69    justify-content: center;70    color: #757575;71    font-size: 28px;72    text-align: center;73  }74  .label {75    margin-left: 40px;76    font-size: 42px;77    font-weight: 700;78    letter-spacing: 6px;79    color: #222;80    text-transform: uppercase;81  }82 83  /* Bottom home indicator (simulated) */84  .home-indicator {85    position: absolute;86    left: 0;87    right: 0;88    bottom: 0;89    height: 150px;90    background: #000;91  }92  .home-indicator .pill {93    position: absolute;94    left: 50%;95    top: 52px;96    width: 360px;97    height: 16px;98    margin-left: -180px;99    background: #CFCFCF;100    border-radius: 10px;101  }102</style>103</head>104<body>105<div id="render-target">106 107  <!-- Simulated status bar -->108  <div class="statusbar">109    <div class="time">3:17</div>110    <div class="icons">111      <!-- Cellular bars -->112      <svg width="44" height="44" viewBox="0 0 24 24">113        <rect x="2" y="14" width="2" height="8" fill="#6e6e6e"></rect>114        <rect x="6" y="10" width="2" height="12" fill="#6e6e6e"></rect>115        <rect x="10" y="6" width="2" height="16" fill="#6e6e6e"></rect>116        <rect x="14" y="2" width="2" height="20" fill="#6e6e6e"></rect>117      </svg>118      <!-- WiFi -->119      <svg width="44" height="44" viewBox="0 0 24 24">120        <path d="M2 8c5-4 15-4 20 0" stroke="#6e6e6e" stroke-width="2" fill="none" stroke-linecap="round"></path>121        <path d="M5 12c3-3 11-3 14 0" stroke="#6e6e6e" stroke-width="2" fill="none" stroke-linecap="round"></path>122        <path d="M8 16c2-2 6-2 8 0" stroke="#6e6e6e" stroke-width="2" fill="none" stroke-linecap="round"></path>123        <circle cx="12" cy="19" r="1.5" fill="#6e6e6e"></circle>124      </svg>125      <!-- Battery -->126      <svg width="50" height="44" viewBox="0 0 28 16">127        <rect x="1" y="3" width="22" height="10" rx="2" ry="2" stroke="#6e6e6e" stroke-width="2" fill="none"></rect>128        <rect x="24" y="6" width="3" height="4" fill="#6e6e6e"></rect>129        <rect x="3" y="5" width="16" height="6" fill="#6e6e6e"></rect>130      </svg>131    </div>132  </div>133 134  <!-- Header -->135  <div class="appbar">136    <div class="back-btn">137      <svg viewBox="0 0 24 24">138        <path d="M15 18l-6-6 6-6" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>139      </svg>140    </div>141    <div class="title">SHOES</div>142  </div>143 144  <!-- Category list -->145  <div class="list">146    <div class="item">147      <div class="thumb">[IMG: White Women's Shoe]</div>148      <div class="label">All Women's Shoes</div>149    </div>150    <div class="item">151      <div class="thumb">[IMG: Beige Sneakers]</div>152      <div class="label">Sneakers</div>153    </div>154    <div class="item">155      <div class="thumb">[IMG: Black Running Shoe]</div>156      <div class="label">Running</div>157    </div>158    <div class="item">159      <div class="thumb">[IMG: Black Slides]</div>160      <div class="label">Sandals &amp; Slides</div>161    </div>162    <div class="item">163      <div class="thumb">[IMG: Olive Gym Shoe]</div>164      <div class="label">Workout &amp; Gym</div>165    </div>166    <div class="item">167      <div class="thumb">[IMG: Trail Hiking Shoe]</div>168      <div class="label">Hiking</div>169    </div>170    <div class="item">171      <div class="thumb">[IMG: Outdoor Shoe]</div>172      <div class="label">Outdoor</div>173    </div>174    <div class="item">175      <div class="thumb">[IMG: Neon Soccer Cleat]</div>176      <div class="label">Soccer</div>177    </div>178  </div>179 180  <!-- Bottom home indicator -->181  <div class="home-indicator">182    <div class="pill"></div>183  </div>184 185</div>186</body>187</html>