GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Shoes - Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #000; /* app dark background */13    color: #fff;14  }15 16  /* Header */17  .header {18    height: 160px;19    padding: 24px 28px 0 28px;20    box-sizing: border-box;21    display: flex;22    align-items: center;23    gap: 24px;24  }25  .back-btn {26    width: 88px; height: 88px; display: flex; align-items: center; justify-content: center;27  }28  .title {29    font-size: 64px;30    font-weight: 700;31    flex: 1;32  }33  .header-icons {34    display: flex; gap: 26px;35  }36  .circle-icon {37    width: 96px; height: 96px; border-radius: 48px; background: #1a1a1a;38    display: flex; align-items: center; justify-content: center;39    border: 2px solid #222;40  }41 42  /* Category tabs */43  .tabs {44    display: flex;45    overflow: hidden;46    padding: 0 20px;47    gap: 22px;48  }49  .tab {50    width: 240px;51    height: 120px;52    background: #0d0d0d;53    border-radius: 14px;54    border: 1px solid #1f1f1f;55    position: relative;56    color: #dfeff0;57    display: flex; align-items: center; justify-content: center;58    text-align: center;59    font-size: 36px; line-height: 40px;60  }61  .tab::before {62    content: "";63    position: absolute;64    top: 0; left: 0; right: 0;65    height: 22px;66    background: #bfeeed;67    border-top-left-radius: 14px; border-top-right-radius: 14px;68  }69 70  /* Big banner */71  .banner {72    margin: 26px 28px 0 28px;73    height: 740px;74    border-radius: 22px;75    background: #2a91a1;76    position: relative;77    overflow: hidden;78  }79  .banner .img-area {80    position: absolute;81    top: 0; left: 0; right: 0; height: 500px;82    background: #E0E0E0;83    border-bottom: 1px solid #BDBDBD;84    display: flex; align-items: center; justify-content: center;85    color: #555; font-size: 40px; font-weight: 600;86  }87  .banner .callout {88    position: absolute; left: 0; right: 0; bottom: 0;89    height: 300px;90    background: #1f5e74;91    padding: 36px;92    box-sizing: border-box;93  }94  .banner .callout .headline {95    font-size: 64px; font-weight: 800; margin-bottom: 16px;96  }97  .banner .callout .sub {98    font-size: 38px; color: #d7edf3; opacity: 0.95;99  }100  .banner .callout .cta {101    margin-top: 28px; font-size: 48px; font-weight: 700;102    color: #e7f6ff;103  }104 105  /* Section heading */106  .section-title {107    font-size: 56px;108    font-weight: 800;109    margin: 34px 28px 14px 28px;110  }111 112  /* Horizontal cards */113  .card-row {114    display: flex;115    gap: 26px;116    padding: 0 28px;117    overflow: hidden;118  }119  .card {120    width: 246px;121    background: #0d0d0d;122    border: 1px solid #1f1f1f;123    border-radius: 18px;124    overflow: hidden;125  }126  .card .thumb {127    width: 100%;128    height: 200px;129    background: #E0E0E0;130    border-bottom: 1px solid #BDBDBD;131    display: flex; align-items: center; justify-content: center;132    color: #666; font-size: 28px; text-align: center; padding: 10px; box-sizing: border-box;133  }134  .card .label {135    padding: 18px;136    font-size: 36px;137    line-height: 44px;138    color: #f3f3f3;139    text-align: center;140    min-height: 140px;141    display: flex; align-items: center; justify-content: center;142  }143 144  /* Bottom nav */145  .bottom-nav {146    position: absolute; left: 0; right: 0; bottom: 0;147    height: 180px; background: #0b0b0b; border-top: 1px solid #1f1f1f;148    display: flex; align-items: center; justify-content: space-around;149  }150  .bn-item {151    width: 180px; height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center;152    color: #cfcfcf; font-size: 30px; gap: 10px;153  }154  .bn-item.active { color: #5aa6ff; }155  .bn-icon {156    width: 86px; height: 86px; border-radius: 43px; background: #121212; border: 2px solid #1f1f1f;157    display: flex; align-items: center; justify-content: center;158  }159  .bn-item.active .bn-icon { background: #133557; border-color: #2c62a8; }160</style>161</head>162<body>163<div id="render-target">164 165  <!-- Header -->166  <div class="header">167    <div class="back-btn">168      <svg width="60" height="60" viewBox="0 0 24 24" fill="#fff"><path d="M15.5 4.5 7 12l8.5 7.5-1.8 2L3.5 12l10.2-9.5z"/></svg>169    </div>170    <div class="title">Shoes</div>171    <div class="header-icons">172      <div class="circle-icon">173        <!-- search -->174        <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff"><path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.7.7l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/></svg>175      </div>176      <div class="circle-icon">177        <!-- camera -->178        <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff"><path d="M20 5h-3.2l-1.2-2H8.4L7.2 5H4a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm-8 13a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"/></svg>179      </div>180      <div class="circle-icon">181        <!-- cart -->182        <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff"><path d="M7 6h14l-2 9H8L6 2H2v2h2l3 13h12v2H8a2 2 0 1 0 0 4 2 2 0 0 0 0-4h10a2 2 0 1 0 0 4 2 2 0 0 0 0-4h2l3-13H7z"/></svg>183      </div>184    </div>185  </div>186 187  <!-- Category tabs -->188  <div class="tabs">189    <div class="tab">Women's Boots</div>190    <div class="tab">Women's Sneakers</div>191    <div class="tab">Women's Flats</div>192    <div class="tab">Women's Heels</div>193  </div>194 195  <!-- Banner -->196  <div class="banner">197    <div class="img-area">[IMG: Converse, Yellow Nike, Blue Vans Shoes]</div>198    <div class="callout">199      <div class="headline">Step up your shoe game</div>200      <div class="sub">Shop top brands and all shoe styles.</div>201      <div class="cta">Shop men's shoes</div>202    </div>203  </div>204 205  <!-- Section -->206  <div class="section-title">Shop Men's Shoes</div>207 208  <div class="card-row">209    <div class="card">210      <div class="thumb">[IMG: Brown Men's Boots]</div>211      <div class="label">Men's Boots</div>212    </div>213    <div class="card">214      <div class="thumb">[IMG: Red/White Sneakers]</div>215      <div class="label">Sneakers for Men</div>216    </div>217    <div class="card">218      <div class="thumb">[IMG: Navy Casual Shoe]</div>219      <div class="label">Men's Casual Shoes</div>220    </div>221    <div class="card">222      <div class="thumb">[IMG: Black Dress Shoe]</div>223      <div class="label">Men's Dress Shoes</div>224    </div>225  </div>226 227  <div class="section-title">Shop by Category</div>228 229  <!-- Bottom Navigation -->230  <div class="bottom-nav">231    <div class="bn-item">232      <div class="bn-icon">233        <svg width="44" height="44" viewBox="0 0 24 24" fill="#cfcfcf"><path d="M12 3 2 11h2v9h6v-6h4v6h6v-9h2z"/></svg>234      </div>235      <div>Home</div>236    </div>237    <div class="bn-item">238      <div class="bn-icon">239        <svg width="44" height="44" viewBox="0 0 24 24" fill="#cfcfcf"><path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4.4 0-8 2.2-8 5v3h16v-3c0-2.8-3.6-5-8-5z"/></svg>240      </div>241      <div>My eBay</div>242    </div>243    <div class="bn-item active">244      <div class="bn-icon">245        <svg width="44" height="44" viewBox="0 0 24 24" fill="#5aa6ff"><path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.7.7l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/></svg>246      </div>247      <div>Search</div>248    </div>249    <div class="bn-item">250      <div class="bn-icon">251        <svg width="44" height="44" viewBox="0 0 24 24" fill="#cfcfcf"><path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2zm6-6V9a6 6 0 1 0-12 0v7L4 18v2h16v-2z"/></svg>252      </div>253      <div>Inbox</div>254    </div>255    <div class="bn-item">256      <div class="bn-icon">257        <svg width="44" height="44" viewBox="0 0 24 24" fill="#cfcfcf"><path d="M20.5 7.5 12 2 3.5 7.5V22h17zM12 5.3l5.5 3.6V20H6.5V8.9z"/></svg>258      </div>259      <div>Selling</div>260    </div>261  </div>262 263</div>264</body>265</html>