GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>All Shoes - Mock</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;12  }13 14  /* Top status bar */15  .status-bar {16    position: absolute; top: 0; left: 0; width: 100%; height: 120px;17    background: #000; color: #fff;18    display: flex; align-items: center; justify-content: space-between;19    padding: 0 40px; font-size: 42px;20    letter-spacing: 0.5px;21  }22  .status-icons { display: flex; align-items: center; gap: 24px; }23  .status-dot { width: 12px; height: 12px; background: #fff; border-radius: 50%; opacity: 0.9; }24  .battery { width: 36px; height: 22px; border: 3px solid #fff; border-radius: 4px; position: relative; }25  .battery::after { content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 10px; background: #fff; border-radius: 2px; }26  .battery .level { position: absolute; left: 3px; top: 3px; height: 14px; width: 24px; background: #fff; }27 28  /* App bar */29  .app-bar {30    position: absolute; top: 120px; left: 0; width: 100%; height: 160px;31    background: #fff; border-bottom: 1px solid #eee;32    display: flex; align-items: center;33    padding: 0 40px;34  }35  .title { font-size: 54px; font-weight: 600; color: #111; margin-left: 24px; }36  .actions { margin-left: auto; display: flex; gap: 40px; align-items: center; }37  .icon-btn svg { width: 56px; height: 56px; stroke: #111; fill: none; stroke-width: 4; }38 39  /* Promo section */40  .promo-section {41    position: absolute; top: 280px; left: 0; width: 100%;42    padding: 0 40px 20px 40px;43    display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px;44  }45  .promo-card { padding: 20px 0 0 0; }46  .promo-card .tag { font-size: 40px; color: #f05a37; font-weight: 700; margin-bottom: 10px; }47  .promo-card .name { font-size: 42px; color: #111; font-weight: 700; line-height: 1.25; }48  .promo-card .type { font-size: 36px; color: #9e9e9e; margin-top: 8px; }49  .promo-card .price { font-size: 40px; color: #111; margin-top: 26px; }50 51  /* Carousel dots */52  .carousel-dots {53    position: absolute; top: 640px; left: 40px; display: flex; gap: 26px; align-items: center;54  }55  .dot {56    width: 30px; height: 30px; border-radius: 50%;57    border: 2px solid #cfcfcf; background: #fff;58  }59  .dot.active { background: #cfcfcf; border-color: #cfcfcf; }60 61  /* Product grid */62  .products {63    position: absolute; top: 700px; left: 0; width: 100%;64    padding: 0 40px 0 40px;65    display: grid; grid-template-columns: 1fr 1fr; gap: 30px;66  }67  .product { background: #fff; }68  .image-wrap { position: relative; }69  .product-image {70    width: 100%; height: 430px;71    background: #E0E0E0; border: 1px solid #BDBDBD;72    display: flex; align-items: center; justify-content: center;73    color: #757575; font-size: 34px;74  }75  .heart {76    position: absolute; top: 20px; right: 20px;77    width: 90px; height: 90px; border-radius: 50%;78    background: #fff; border: 1px solid #e5e5e5;79    display: flex; align-items: center; justify-content: center;80    box-shadow: 0 2px 6px rgba(0,0,0,0.06);81  }82  .heart svg { width: 42px; height: 42px; stroke: #111; fill: none; stroke-width: 5; }83 84  .product-info { padding: 24px 0; }85  .product-title { font-size: 44px; color: #111; font-weight: 700; line-height: 1.25; }86  .product-sub { font-size: 36px; color: #9e9e9e; margin-top: 10px; }87  .product-price { font-size: 42px; color: #111; margin-top: 22px; }88  .mrp-label { font-size: 36px; color: #9e9e9e; margin-left: 10px; }89  .price-strike { font-size: 36px; color: #9e9e9e; text-decoration: line-through; margin-top: 12px; }90 91  /* Floating filter button */92  .filter-fab {93    position: absolute; right: 80px; bottom: 340px;94    width: 140px; height: 140px; border-radius: 70px;95    background: #fff; border: 1px solid #e6e6e6;96    box-shadow: 0 10px 24px rgba(0,0,0,0.18);97    display: flex; align-items: center; justify-content: center;98  }99  .filter-fab svg { width: 70px; height: 70px; stroke: #111; stroke-width: 8; fill: none; }100 101  /* Bottom titles bar */102  .bottom-title-bar {103    position: absolute; left: 0; bottom: 170px; width: 100%; height: 160px;104    background: #fff; border-top: 1px solid #eee;105    display: grid; grid-template-columns: 1fr 1fr; align-items: center; column-gap: 30px;106    padding: 0 40px; box-sizing: border-box;107  }108  .bottom-title { font-size: 46px; font-weight: 700; color: #111; }109 110  /* Gesture bar */111  .gesture {112    position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%);113    width: 300px; height: 16px; background: #111; border-radius: 8px; opacity: 0.85;114  }115 116  /* Simple icons */117  .back-icon svg { width: 56px; height: 56px; stroke: #111; stroke-width: 8; fill: none; }118  .bag svg { width: 56px; height: 56px; stroke: #111; stroke-width: 6; fill: none; }119</style>120</head>121<body>122<div id="render-target">123 124  <!-- Status bar -->125  <div class="status-bar">126    <div>2:57</div>127    <div class="status-icons">128      <div class="status-dot"></div>129      <div class="status-dot"></div>130      <div class="status-dot"></div>131      <div class="status-dot"></div>132      <div class="status-dot"></div>133      <div class="battery"><div class="level"></div></div>134    </div>135  </div>136 137  <!-- App bar -->138  <div class="app-bar">139    <div class="back-icon">140      <svg viewBox="0 0 24 24"><path d="M15 6 L9 12 L15 18" /></svg>141    </div>142    <div class="title">All Shoes</div>143    <div class="actions">144      <div class="icon-btn">145        <svg viewBox="0 0 24 24">146          <circle cx="10" cy="10" r="6"></circle>147          <path d="M14 14 L20 20"></path>148        </svg>149      </div>150      <div class="icon-btn bag">151        <svg viewBox="0 0 24 24">152          <path d="M4 8 H20 V20 H4 Z"></path>153          <path d="M8 8 C8 5.5 10 4 12 4 C14 4 16 5.5 16 8"></path>154        </svg>155      </div>156    </div>157  </div>158 159  <!-- Promo section -->160  <div class="promo-section">161    <div class="promo-card">162      <div class="tag">Member Access</div>163      <div class="name">Nike Air Force 1 '07 SE</div>164      <div class="type">Women's Shoes</div>165      <div class="price">MRP : ₹ 10 795.00</div>166    </div>167    <div class="promo-card">168      <div class="name">Nike Air Force 1 Low x UNDEFEATED</div>169      <div class="type">Men's Shoes</div>170      <div class="price">MRP : ₹ 13 995.00</div>171    </div>172  </div>173 174  <!-- Dots -->175  <div class="carousel-dots">176    <div class="dot active"></div>177    <div class="dot"></div>178  </div>179 180  <!-- Product grid -->181  <div class="products">182 183    <!-- Product 1 -->184    <div class="product">185      <div class="image-wrap">186        <div class="product-image">[IMG: Air Jordan 2 Low - Green/Orange Shoe]</div>187        <div class="heart">188          <svg viewBox="0 0 24 24"><path d="M12 20 C8 16 4 13 4 9 C4 7 6 5 8.5 5 C10 5 11.5 5.8 12 7 C12.5 5.8 14 5 15.5 5 C18 5 20 7 20 9 C20 13 16 16 12 20"></path></svg>189        </div>190      </div>191      <div class="product-info">192        <div class="product-title">Air Jordan 2 Retro Low Titan</div>193        <div class="product-sub">Shoes</div>194        <div class="product-price">₹ 19 277.00 <span class="mrp-label">MRP :</span></div>195        <div class="price-strike">₹ 20 295.00</div>196      </div>197    </div>198 199    <!-- Product 2 -->200    <div class="product">201      <div class="image-wrap">202        <div class="product-image">[IMG: AF1 '07 LV8 EMB - Grey Shoe]</div>203        <div class="heart">204          <svg viewBox="0 0 24 24"><path d="M12 20 C8 16 4 13 4 9 C4 7 6 5 8.5 5 C10 5 11.5 5.8 12 7 C12.5 5.8 14 5 15.5 5 C18 5 20 7 20 9 C20 13 16 16 12 20"></path></svg>205        </div>206      </div>207      <div class="product-info">208        <div class="product-title">Nike Air Force 1 '07 LV8 EMB</div>209        <div class="product-sub">Shoes</div>210        <div class="product-price">₹ 10 257.00 <span class="mrp-label">MRP :</span></div>211        <div class="price-strike">₹ 10 795.00</div>212      </div>213    </div>214 215    <!-- Product 3 -->216    <div class="product">217      <div class="image-wrap">218        <div class="product-image">[IMG: Nike Dunk Low - Light Grey Shoe]</div>219        <div class="heart">220          <svg viewBox="0 0 24 24"><path d="M12 20 C8 16 4 13 4 9 C4 7 6 5 8.5 5 C10 5 11.5 5.8 12 7 C12.5 5.8 14 5 15.5 5 C18 5 20 7 20 9 C20 13 16 16 12 20"></path></svg>221        </div>222      </div>223      <!-- Intentionally minimal info to mirror screenshot -->224    </div>225 226    <!-- Product 4 -->227    <div class="product">228      <div class="image-wrap">229        <div class="product-image">[IMG: Nike Air Force 1 Low Billie - White Textured Shoe]</div>230        <div class="heart">231          <svg viewBox="0 0 24 24"><path d="M12 20 C8 16 4 13 4 9 C4 7 6 5 8.5 5 C10 5 11.5 5.8 12 7 C12.5 5.8 14 5 15.5 5 C18 5 20 7 20 9 C20 13 16 16 12 20"></path></svg>232        </div>233      </div>234      <!-- Intentionally minimal info to mirror screenshot -->235    </div>236 237  </div>238 239  <!-- Floating Filter Button -->240  <div class="filter-fab">241    <svg viewBox="0 0 24 24">242      <path d="M4 6 H20"></path>243      <path d="M8 6 V11"></path>244      <path d="M4 12 H20"></path>245      <path d="M16 12 V17"></path>246    </svg>247  </div>248 249  <!-- Bottom titles bar -->250  <div class="bottom-title-bar">251    <div class="bottom-title">Nike Dunk Low</div>252    <div class="bottom-title">Nike Air Force 1 Low Billie</div>253  </div>254 255  <!-- Gesture bar -->256  <div class="gesture"></div>257 258</div>259</body>260</html>