GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>All Shoes - Grid</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #ffffff; color: #111;13  }14  /* Top bars */15  .status-bar {16    height: 110px; background: #000; color: #fff;17    display: flex; align-items: center; padding: 0 36px; font-weight: 600;18    font-size: 42px; letter-spacing: 1px;19  }20  .status-icons { margin-left: 24px; display: flex; gap: 20px; align-items: center; }21  .dot { width: 16px; height: 16px; background: #fff; border-radius: 50%; opacity: 0.7; }22  .notch-icons { margin-left: auto; display: flex; gap: 28px; }23  .top-appbar {24    height: 160px; background: #fff; border-bottom: 1px solid #eee;25    display: flex; align-items: center; padding: 0 36px;26  }27  .app-title {28    font-size: 54px; font-weight: 700; margin: 0 24px;29  }30  .spacer { flex: 1; }31  /* Icons */32  .icon-btn { width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center; }33  .icon { width: 56px; height: 56px; }34  /* Content grid */35  .content { height: calc(2400px - 110px - 160px); overflow: hidden; }36  .grid {37    display: grid; grid-template-columns: 1fr 1fr; gap: 36px;38    padding: 28px 36px 0 36px;39  }40  .card {41    background: #fff;42  }43  .img {44    width: 100%; height: 320px; background: #E0E0E0;45    border: 1px solid #BDBDBD; border-radius: 8px;46    color: #757575; display: flex; align-items: center; justify-content: center;47    font-size: 32px;48    position: relative;49  }50  .fav {51    position: absolute; top: 16px; right: 16px;52    width: 84px; height: 84px; background: #fff; border-radius: 50%;53    box-shadow: 0 4px 10px rgba(0,0,0,0.12);54    display: flex; align-items: center; justify-content: center;55  }56  .meta { padding: 22px 0 8px 0; }57  .title { font-size: 44px; font-weight: 700; margin-bottom: 8px; }58  .subtitle { font-size: 34px; color: #777; margin-bottom: 22px; }59  .price { font-size: 40px; font-weight: 700; margin-bottom: 18px; }60  .swatches { display: flex; gap: 18px; padding-bottom: 26px; }61  .sw { width: 26px; height: 26px; border-radius: 50%; border: 3px solid #bbb; }62  .sw.fill { border: 3px solid #fff; box-shadow: 0 0 0 3px #ddd inset; }63  .green { background: #0f8a44; }64  .black { background: #222; }65  .empty { background: #fff; }66  /* Floating filter button */67  .fab {68    position: absolute; right: 48px; bottom: 220px;69    width: 140px; height: 140px; background: #fff; border-radius: 50%;70    box-shadow: 0 12px 30px rgba(0,0,0,0.18);71    display: flex; align-items: center; justify-content: center;72  }73  /* Bottom gesture area */74  .bottom-bar {75    position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: #000;76    display: flex; align-items: center; justify-content: center;77  }78  .handle { width: 320px; height: 12px; background: #fff; border-radius: 8px; opacity: 0.9; }79</style>80</head>81<body>82<div id="render-target">83  <!-- Status bar -->84  <div class="status-bar">85    2:5686    <div class="status-icons">87      <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>88      <div class="dot" style="opacity:.4;"></div>89    </div>90    <div class="notch-icons">91      <div class="dot" style="width:26px;height:26px;"></div>92      <div class="dot" style="width:26px;height:26px;"></div>93    </div>94  </div>95 96  <!-- App bar -->97  <div class="top-appbar">98    <div class="icon-btn" aria-label="Back">99      <svg class="icon" viewBox="0 0 24 24">100        <path d="M15 4L7 12l8 8" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>101      </svg>102    </div>103    <div class="app-title">All Shoes</div>104    <div class="spacer"></div>105    <div class="icon-btn" aria-label="Search">106      <svg class="icon" viewBox="0 0 24 24">107        <circle cx="10" cy="10" r="6" fill="none" stroke="#111" stroke-width="2"/>108        <path d="M14.5 14.5L20 20" stroke="#111" stroke-width="2" stroke-linecap="round"/>109      </svg>110    </div>111    <div class="icon-btn" aria-label="Bag">112      <svg class="icon" viewBox="0 0 24 24">113        <path d="M6 8h12l-1 12H7L6 8z" fill="none" stroke="#111" stroke-width="2"/>114        <path d="M9 8V6a3 3 0 0 1 6 0v2" fill="none" stroke="#111" stroke-width="2"/>115      </svg>116    </div>117  </div>118 119  <!-- Content -->120  <div class="content">121    <div class="grid">122      <!-- Row 1 -->123      <div class="card">124        <div class="img">[IMG: Women's Shoe]</div>125        <div class="meta">126          <div class="title">Nike Motiva</div>127          <div class="subtitle">Women's Walking Shoes</div>128          <div class="price">MRP : ₹ 9 695.00</div>129          <div class="swatches">130            <div class="sw fill green"></div>131            <div class="sw fill black"></div>132          </div>133        </div>134      </div>135      <div class="card">136        <div class="img">[IMG: Women's Shoe]</div>137        <div class="meta">138          <div class="title">Nike Metcon 9 AMP</div>139          <div class="subtitle">Women's Workout Shoes</div>140          <div class="price">MRP : ₹ 12 795.00</div>141        </div>142      </div>143 144      <!-- Row 2 -->145      <div class="card">146        <div class="img">147          [IMG: Women's Shoe]148          <div class="fav" aria-label="Wishlist">149            <svg class="icon" viewBox="0 0 24 24">150              <path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.5-7 10-7 10z" fill="none" stroke="#111" stroke-width="2"/>151            </svg>152          </div>153        </div>154        <div class="meta">155          <div class="title">Nike Cortez</div>156          <div class="subtitle">Women's Shoes</div>157          <div class="price">MRP : ₹ 7 495.00</div>158          <div class="swatches">159            <div class="sw empty"></div>160            <div class="sw empty"></div>161          </div>162        </div>163      </div>164      <div class="card">165        <div class="img">166          [IMG: Women's Shoe]167          <div class="fav" aria-label="Wishlist">168            <svg class="icon" viewBox="0 0 24 24">169              <path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.5-7 10-7 10z" fill="none" stroke="#111" stroke-width="2"/>170            </svg>171          </div>172        </div>173        <div class="meta">174          <div class="title">Nike Air Max 1 '87 Premium</div>175          <div class="subtitle">Women's Shoes</div>176          <div class="price">MRP : ₹ 14 995.00</div>177        </div>178      </div>179 180      <!-- Row 3 -->181      <div class="card">182        <div class="img">183          [IMG: Women's Shoe]184          <div class="fav" aria-label="Wishlist">185            <svg class="icon" viewBox="0 0 24 24">186              <path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.5-7 10-7 10z" fill="none" stroke="#111" stroke-width="2"/>187            </svg>188          </div>189        </div>190        <div class="meta">191          <div class="title">Nike Dunk Low</div>192          <div class="subtitle">Women's Shoes</div>193          <div class="price">MRP : ₹ 8 295.00</div>194        </div>195      </div>196      <div class="card">197        <div class="img">198          [IMG: Women's Shoe]199          <div class="fav" aria-label="Wishlist">200            <svg class="icon" viewBox="0 0 24 24">201              <path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.5-7 10-7 10z" fill="none" stroke="#111" stroke-width="2"/>202            </svg>203          </div>204        </div>205        <div class="meta">206          <div class="title">Nike Air Max 1</div>207          <div class="subtitle">Women's Shoes</div>208          <div class="price">MRP : ₹ 12 995.00</div>209        </div>210      </div>211    </div>212  </div>213 214  <!-- Floating filter FAB -->215  <div class="fab" aria-label="Filter">216    <svg class="icon" viewBox="0 0 24 24">217      <path d="M5 7h14M9 12h10M13 17h6" stroke="#111" stroke-width="2" stroke-linecap="round" fill="none"/>218      <circle cx="9" cy="7" r="2" fill="#111"/>219      <circle cx="13" cy="12" r="2" fill="#111"/>220    </svg>221  </div>222 223  <!-- Bottom gesture bar -->224  <div class="bottom-bar"><div class="handle"></div></div>225</div>226</body>227</html>