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>Chelsea Boots List</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15    font-family: Arial, Helvetica, sans-serif;16    color: #111;17  }18 19  /* Status bar */20  .status-bar {21    height: 120px;22    background: #BDBDBD;23    display: flex;24    align-items: center;25    padding: 0 40px;26    box-sizing: border-box;27    color: #fff;28    font-size: 36px;29    justify-content: space-between;30  }31  .status-icons {32    display: flex;33    align-items: center;34    gap: 24px;35  }36  .status-dot {37    width: 20px; height: 20px; border-radius: 50%; background: #fff; opacity: 0.9;38  }39 40  /* App bar */41  .app-bar {42    height: 180px;43    background: #fff;44    display: flex;45    align-items: center;46    padding: 0 40px;47    box-sizing: border-box;48    border-bottom: 1px solid #eee;49  }50  .app-left, .app-right {51    display: flex;52    align-items: center;53    gap: 40px;54  }55  .app-left { width: 180px; }56  .app-title {57    flex: 1;58    text-align: center;59    font-size: 56px;60    font-weight: 700;61    letter-spacing: 0.2px;62  }63  .icon {64    width: 56px; height: 56px;65  }66  .icon svg { width: 100%; height: 100%; }67 68  /* Content grid */69  .content {70    padding: 36px;71    box-sizing: border-box;72  }73  .grid {74    display: grid;75    grid-template-columns: 1fr 1fr;76    gap: 36px;77  }78  .card {79    display: flex;80    flex-direction: column;81  }82  .img-wrap {83    position: relative;84    background: #FAFAFA;85    border: 1px solid #EEE;86  }87  .img-box {88    width: 100%;89    height: 540px;90    background: #E0E0E0;91    border: 1px solid #BDBDBD;92    display: flex;93    align-items: center;94    justify-content: center;95    color: #757575;96    font-size: 34px;97  }98  .fav {99    position: absolute;100    right: 28px;101    bottom: 28px;102    width: 70px; height: 70px;103  }104  .card-title {105    margin-top: 26px;106    font-size: 42px;107    font-weight: 600;108  }109  .price {110    margin-top: 12px;111    font-size: 40px;112  }113  .swatches {114    margin-top: 20px;115    display: flex;116    gap: 18px;117  }118  .dot {119    width: 24px; height: 24px; border-radius: 50%;120    border: 1px solid #ccc;121  }122  .dot.black { background: #1a1a1a; }123  .dot.gray { background: #6f6f6f; }124  .dot.khaki { background: #9B9682; }125  .dot.brown { background: #3d2f2c; }126 127  /* Bottom gesture bar indicator */128  .bottom-indicator {129    position: absolute;130    left: 50%;131    transform: translateX(-50%);132    bottom: 22px;133    width: 360px;134    height: 14px;135    background: #111;136    border-radius: 7px;137    opacity: 0.9;138  }139</style>140</head>141<body>142<div id="render-target">143 144  <!-- Status bar -->145  <div class="status-bar">146    <div>2:54</div>147    <div class="status-icons">148      <div class="status-dot"></div>149      <div class="status-dot"></div>150      <div class="status-dot"></div>151      <div class="status-dot"></div>152      <div style="display:flex; align-items:center; gap:14px;">153        <svg width="38" height="38" viewBox="0 0 24 24">154          <rect x="2" y="7" width="18" height="10" rx="2" fill="#fff"></rect>155          <rect x="20" y="10" width="2" height="4" fill="#fff"></rect>156        </svg>157        <span>100%</span>158      </div>159    </div>160  </div>161 162  <!-- App bar -->163  <div class="app-bar">164    <div class="app-left">165      <div class="icon">166        <svg viewBox="0 0 24 24">167          <path d="M3 6h18M3 12h18M3 18h18" stroke="#111" stroke-width="2.4" stroke-linecap="round" fill="none"></path>168        </svg>169      </div>170    </div>171    <div class="app-title">Chalsea boots</div>172    <div class="app-right">173      <div class="icon">174        <svg viewBox="0 0 24 24">175          <circle cx="11" cy="11" r="7" stroke="#111" stroke-width="2.2" fill="none"></circle>176          <path d="M20 20l-4-4" stroke="#111" stroke-width="2.2" stroke-linecap="round" fill="none"></path>177        </svg>178      </div>179      <div class="icon">180        <svg viewBox="0 0 24 24">181          <circle cx="12" cy="7" r="4" stroke="#111" stroke-width="2" fill="none"></circle>182          <path d="M4 20c0-4.2 4-7 8-7s8 2.8 8 7" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"></path>183        </svg>184      </div>185      <div class="icon">186        <svg viewBox="0 0 24 24">187          <path d="M6 9h12v10H6z" stroke="#111" stroke-width="2" fill="none"></path>188          <path d="M8 9c0-2.2 2-4 4-4s4 1.8 4 4" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"></path>189        </svg>190      </div>191      <div class="icon">192        <svg viewBox="0 0 24 24">193          <rect x="6" y="8" width="12" height="12" rx="2" stroke="#111" stroke-width="2" fill="none"></rect>194          <path d="M8 8c0-2 2-3 4-3s4 1 4 3" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"></path>195        </svg>196      </div>197    </div>198  </div>199 200  <!-- Content -->201  <div class="content">202    <div class="grid">203 204      <!-- Card 1 -->205      <div class="card">206        <div class="img-wrap">207          <div class="img-box">[IMG: Chunky Black Chelsea Boot]</div>208          <div class="fav">209            <svg viewBox="0 0 24 24">210              <path d="M12 21c-4.6-3.4-8-6.3-8-10.1C4 8 6 6 8.5 6c1.6 0 3 .8 3.5 2.1C12.5 6.8 13.9 6 15.5 6 18 6 20 8 20 10.9c0 3.8-3.4 6.7-8 10.1z" stroke="#111" stroke-width="2" fill="none" stroke-linejoin="round"></path>211            </svg>212          </div>213        </div>214        <div class="card-title">Chunky Chelsea Boots</div>215        <div class="price">$54.99</div>216        <div class="swatches">217          <div class="dot black"></div>218          <div class="dot gray"></div>219        </div>220      </div>221 222      <!-- Card 2 -->223      <div class="card">224        <div class="img-wrap">225          <div class="img-box">[IMG: Chunky Black Chelsea Boot]</div>226          <div class="fav">227            <svg viewBox="0 0 24 24">228              <path d="M12 21c-4.6-3.4-8-6.3-8-10.1C4 8 6 6 8.5 6c1.6 0 3 .8 3.5 2.1C12.5 6.8 13.9 6 15.5 6 18 6 20 8 20 10.9c0 3.8-3.4 6.7-8 10.1z" stroke="#111" stroke-width="2" fill="none" stroke-linejoin="round"></path>229            </svg>230          </div>231        </div>232        <div class="card-title">Chunky Chelsea Boots</div>233        <div class="price">$49.99</div>234        <div class="swatches">235          <div class="dot black"></div>236          <div class="dot gray"></div>237          <div class="dot khaki"></div>238        </div>239      </div>240 241      <!-- Card 3 -->242      <div class="card">243        <div class="img-wrap">244          <div class="img-box">[IMG: Suede Chelsea Boots]</div>245          <div class="fav">246            <svg viewBox="0 0 24 24">247              <path d="M12 21c-4.6-3.4-8-6.3-8-10.1C4 8 6 6 8.5 6c1.6 0 3 .8 3.5 2.1C12.5 6.8 13.9 6 15.5 6 18 6 20 8 20 10.9c0 3.8-3.4 6.7-8 10.1z" stroke="#111" stroke-width="2" fill="none" stroke-linejoin="round"></path>248            </svg>249          </div>250        </div>251        <div class="card-title">Chelsea Boots</div>252        <div class="price">$67.99</div>253        <div class="swatches">254          <div class="dot black"></div>255          <div class="dot brown"></div>256          <div class="dot gray"></div>257        </div>258      </div>259 260      <!-- Card 4 -->261      <div class="card">262        <div class="img-wrap">263          <div class="img-box">[IMG: Leather Chelsea Boots]</div>264          <div class="fav">265            <svg viewBox="0 0 24 24">266              <path d="M12 21c-4.6-3.4-8-6.3-8-10.1C4 8 6 6 8.5 6c1.6 0 3 .8 3.5 2.1C12.5 6.8 13.9 6 15.5 6 18 6 20 8 20 10.9c0 3.8-3.4 6.7-8 10.1z" stroke="#111" stroke-width="2" fill="none" stroke-linejoin="round"></path>267            </svg>268          </div>269        </div>270        <div class="card-title">Chelsea Boots</div>271        <div class="price">$39.99</div>272        <div class="swatches">273          <div class="dot black"></div>274        </div>275      </div>276 277    </div>278  </div>279 280  <div class="bottom-indicator"></div>281</div>282</body>283</html>