GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Jordan Retro 6 G NRG - List</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13  }14 15  /* Status bar */16  .status-bar {17    height: 120px;18    background: #000;19    color: #fff;20    display: flex;21    align-items: center;22    padding: 0 32px;23    font-weight: 600;24    font-size: 34px;25    justify-content: space-between;26  }27  .status-left { display: flex; align-items: center; gap: 18px; }28  .status-right { display: flex; align-items: center; gap: 22px; }29  .sb-icon {30    width: 34px; height: 34px; border-radius: 6px;31    background: rgba(255,255,255,0.25);32  }33 34  /* App bar */35  .app-bar {36    height: 150px;37    display: flex;38    align-items: center;39    padding: 0 28px;40    border-bottom: 1px solid #eee;41    background: #fff;42  }43  .app-title {44    font-size: 50px;45    font-weight: 700;46    color: #111;47    margin-left: 18px;48  }49  .app-actions {50    margin-left: auto;51    display: flex;52    gap: 28px;53  }54  .icon-btn {55    width: 72px; height: 72px;56    display: flex; align-items: center; justify-content: center;57    border-radius: 50%;58    color: #111;59  }60  .icon-btn svg { width: 48px; height: 48px; }61 62  /* Grid */63  .content {64    position: absolute;65    top: 270px; /* below status + app bar */66    left: 0; right: 0; bottom: 0;67    overflow: hidden;68  }69  .grid {70    display: grid;71    grid-template-columns: 1fr 1fr;72    column-gap: 28px;73    row-gap: 24px;74    padding: 24px;75  }76  .card {77    padding: 0;78  }79  .img-wrap {80    position: relative;81    width: 100%;82    height: 500px;83    background: #F4F4F4;84    border: 1px solid #D0D0D0;85    display: flex;86    align-items: center;87    justify-content: center;88    color: #777;89    font-size: 32px;90    text-align: center;91  }92  .fav {93    position: absolute;94    top: 18px; right: 18px;95    width: 86px; height: 86px;96    background: #fff;97    border: 1px solid #DADADA;98    border-radius: 50%;99    display: flex; align-items: center; justify-content: center;100    box-shadow: 0 2px 6px rgba(0,0,0,0.05);101  }102  .fav svg { width: 44px; height: 44px; }103  .title {104    margin-top: 26px;105    font-size: 46px;106    font-weight: 700;107    color: #111;108  }109  .subtitle {110    margin-top: 10px;111    font-size: 34px;112    color: #7a7a7a;113  }114  .price {115    margin-top: 26px;116    font-size: 40px;117    color: #111;118    letter-spacing: 0.5px;119  }120 121  /* Floating filter button */122  .fab {123    position: absolute;124    right: 40px;125    bottom: 220px;126    width: 140px;127    height: 140px;128    background: #fff;129    border-radius: 50%;130    box-shadow: 0 10px 30px rgba(0,0,0,0.18);131    display: flex;132    align-items: center;133    justify-content: center;134  }135  .fab svg { width: 72px; height: 72px; stroke: #111; }136 137  /* Gesture bar */138  .gesture-bar {139    position: absolute;140    bottom: 28px;141    left: 50%;142    transform: translateX(-50%);143    width: 500px;144    height: 10px;145    background: #C9C9C9;146    border-radius: 8px;147  }148</style>149</head>150<body>151<div id="render-target">152 153  <!-- Status bar -->154  <div class="status-bar">155    <div class="status-left">156      <div>10:34</div>157      <div class="sb-icon"></div>158      <div class="sb-icon" style="width:36px;"></div>159      <div class="sb-icon" style="width:36px;"></div>160    </div>161    <div class="status-right">162      <!-- simple wifi / battery placeholders -->163      <svg width="44" height="34" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">164        <path d="M2 8c5-5 15-5 20 0"></path>165        <path d="M5 11c3-3 11-3 14 0"></path>166        <path d="M8 14c2-2 6-2 8 0"></path>167        <circle cx="12" cy="18" r="1.5" fill="#fff"></circle>168      </svg>169      <svg width="44" height="34" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">170        <rect x="3" y="7" width="15" height="10" rx="2"></rect>171        <path d="M21 10v4"></path>172      </svg>173    </div>174  </div>175 176  <!-- App bar -->177  <div class="app-bar">178    <!-- Back -->179    <div class="icon-btn" aria-label="Back">180      <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">181        <path d="M15 18l-6-6 6-6"></path>182      </svg>183    </div>184    <div class="app-title">Jordan Retro 6 G NRG</div>185    <div class="app-actions">186      <div class="icon-btn" aria-label="Search">187        <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">188          <circle cx="11" cy="11" r="7"></circle>189          <path d="M21 21l-4.2-4.2"></path>190        </svg>191      </div>192      <div class="icon-btn" aria-label="Bag">193        <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">194          <path d="M6 8h12l-1 12H7L6 8z"></path>195          <path d="M9 8a3 3 0 0 1 6 0"></path>196        </svg>197      </div>198    </div>199  </div>200 201  <!-- Content -->202  <div class="content">203    <div class="grid">204      <!-- Card 1 -->205      <div class="card">206        <div class="img-wrap">207          <div>[IMG: Light Purple Jordan Shoe]</div>208          <div class="fav" title="Save">209            <svg viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="1.8">210              <path d="M12 21s-7-4.6-9.5-8.1C.4 10 .9 6.9 3.4 5.5c1.9-1 4.2-.4 5.6 1 1.4-1.4 3.7-2 5.6-1 2.5 1.3 3 4.5.9 7.4C19 16.4 12 21 12 21z"></path>211            </svg>212          </div>213        </div>214        <div class="title">Jordan Retro 6 G NRG</div>215        <div class="subtitle">Men's Golf Shoes</div>216        <div class="price">MRP : ₹ 19 695.00</div>217      </div>218 219      <!-- Card 2 -->220      <div class="card">221        <div class="img-wrap">222          <div>[IMG: Black Jordan Shoe]</div>223          <div class="fav" title="Save">224            <svg viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="1.8">225              <path d="M12 21s-7-4.6-9.5-8.1C.4 10 .9 6.9 3.4 5.5c1.9-1 4.2-.4 5.6 1 1.4-1.4 3.7-2 5.6-1 2.5 1.3 3 4.5.9 7.4C19 16.4 12 21 12 21z"></path>226            </svg>227          </div>228        </div>229        <div class="title">Jordan Retro 6 G NRG</div>230        <div class="subtitle">Men's Golf Shoes</div>231        <div class="price">MRP : ₹ 19 695.00</div>232      </div>233    </div>234  </div>235 236  <!-- Floating Filter Button -->237  <div class="fab" title="Filter">238    <svg viewBox="0 0 24 24" fill="none" stroke-width="2">239      <path d="M4 7h10" stroke="#111" stroke-linecap="round"></path>240      <circle cx="17" cy="7" r="2.2" fill="#111"></circle>241      <path d="M4 12h7" stroke="#111" stroke-linecap="round"></path>242      <circle cx="14" cy="12" r="2.2" fill="#111"></circle>243      <path d="M4 17h14" stroke="#111" stroke-linecap="round"></path>244      <circle cx="7" cy="17" r="2.2" fill="#111"></circle>245    </svg>246  </div>247 248  <!-- Gesture bar -->249  <div class="gesture-bar"></div>250</div>251</body>252</html>