GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mens Shoes NMD Stretch - UI Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; }7  #render-target {8    width: 1440px;9    height: 3120px;10    position: relative;11    overflow: hidden;12    background: #FFFFFF;13    font-family: Arial, Helvetica, sans-serif;14    color: #111;15  }16 17  /* Top system/status bar */18  .system-bar {19    height: 100px;20    padding: 0 40px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    font-size: 36px;25    color: #333;26  }27  .system-right {28    display: flex;29    align-items: center;30    gap: 28px;31  }32  .dot {33    width: 20px; height: 20px; border-radius: 50%; background: #111; display: inline-block;34  }35 36  /* Header controls */37  .header-controls {38    height: 120px;39    padding: 0 36px;40    display: flex;41    align-items: center;42    justify-content: space-between;43  }44  .icon-btn {45    width: 84px; height: 84px; display: flex; align-items: center; justify-content: center;46    border-radius: 12px;47  }48  .page-title {49    text-align: center;50    font-weight: 700;51    letter-spacing: 4px;52    font-size: 48px;53    margin-top: 10px;54  }55  .result-count {56    text-align: center;57    color: #666;58    font-size: 34px;59    margin: 16px 0 20px 0;60  }61 62  /* Filters */63  .filter-row {64    display: flex;65    align-items: center;66    gap: 24px;67    padding: 0 40px;68    margin-top: 8px;69  }70  .filter-icon {71    position: relative;72    width: 120px;73    height: 88px;74    border-radius: 10px;75  }76  .filter-icon .box {77    width: 120px;78    height: 88px;79    border: 2px solid #111;80    border-radius: 10px;81    position: absolute;82    left: 0; top: 0;83  }84  .filter-icon .lines {85    position: absolute; left: 20px; top: 18px;86  }87  .filter-icon .lines div {88    width: 72px; height: 8px; background: #111; margin: 10px 0;89  }90  .filter-badge {91    position: absolute;92    left: -18px; top: -18px;93    background: #000; color: #fff;94    width: 52px; height: 52px; border-radius: 12px;95    display: flex; align-items: center; justify-content: center;96    font-size: 28px; font-weight: 700;97  }98  .chip {99    border: 2px solid #111;100    border-radius: 8px;101    padding: 18px 36px;102    font-size: 32px;103    letter-spacing: 1px;104  }105 106  /* Product card */107  .card {108    width: 1280px;109    margin: 36px auto 0 auto;110    background: #F4F6F8;111    border-radius: 6px;112    overflow: hidden;113    position: relative;114  }115  .card-img {116    height: 650px;117    background: #E0E0E0;118    border: 1px solid #BDBDBD;119    display: flex; align-items: center; justify-content: center;120    color: #757575;121    font-size: 36px;122  }123  .heart-fav {124    position: absolute;125    top: 40px; right: 60px;126    width: 72px; height: 72px;127  }128  .ar-badge {129    position: absolute;130    left: 30px; top: 650px;131    width: 74px; height: 74px;132    background: #000; color: #fff;133    border-radius: 8px;134    font-weight: 700; font-size: 28px;135    display: flex; align-items: center; justify-content: center;136  }137  .meta-row {138    display: flex;139    align-items: center;140    gap: 24px;141    padding: 24px 30px;142  }143  .pill {144    display: inline-block;145    border: 2px solid #111;146    color: #111;147    padding: 10px 22px;148    border-radius: 10px;149    font-size: 28px;150    letter-spacing: 2px;151  }152  .price-pill {153    display: inline-block;154    padding: 16px 22px;155    background: #fff;156    border: 2px solid #ddd;157    font-size: 34px;158    border-radius: 10px;159  }160  .card-body {161    padding: 0 30px 34px 30px;162  }163  .title-row {164    display: flex;165    align-items: center;166    justify-content: space-between;167    margin-top: 8px;168  }169  .product-title {170    font-size: 44px;171    font-weight: 700;172  }173  .assist {174    display: flex; align-items: center; gap: 16px; color: #333; font-size: 30px;175  }176  .dot-blue { width: 18px; height: 18px; border-radius: 50%; background: #4D86F5; display: inline-block; }177  .dot-red { width: 18px; height: 18px; border-radius: 50%; background: #F55C4D; display: inline-block; }178  .dot-yellow { width: 18px; height: 18px; border-radius: 50%; background: #FDBB2D; display: inline-block; }179  .subtitle {180    color: #666;181    font-size: 32px;182    margin-top: 6px;183  }184 185  /* Bottom nav bar */186  .nav-bottom {187    position: absolute;188    bottom: 0; left: 0;189    width: 100%;190    height: 160px;191    border-top: 1px solid #e6e6e6;192    display: flex;193    align-items: center;194    justify-content: space-around;195    padding: 0 40px;196    background: #fff;197  }198  .nav-item {199    width: 140px; height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #777;200    gap: 10px;201  }202  .badge {203    position: absolute;204    background: #CFCFCF;205    color: #333;206    font-weight: 700;207    font-size: 26px;208    width: 44px; height: 44px; border-radius: 8px;209    display: flex; align-items: center; justify-content: center;210    right: -8px; bottom: -10px;211  }212</style>213</head>214<body>215<div id="render-target">216 217  <!-- System bar -->218  <div class="system-bar">219    <div class="left-sys">2:22</div>220    <div class="system-right">221      <span class="dot"></span>222      <svg width="34" height="34" viewBox="0 0 24 24"><path d="M12 2c-2.8 0-5 2.2-5 5v3h2V7c0-1.7 1.3-3 3-3s3 1.3 3 3v3h2V7c0-2.8-2.2-5-5-5z" fill="#111"/></svg>223      <svg width="42" height="42" viewBox="0 0 24 24"><rect x="2" y="7" width="18" height="10" rx="2" ry="2" fill="#111"/><rect x="20" y="9" width="2" height="6" fill="#111"/></svg>224    </div>225  </div>226 227  <!-- Header controls -->228  <div class="header-controls">229    <div class="icon-btn">230      <svg width="48" height="48" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>231    </div>232    <div class="icon-btn">233      <svg width="48" height="48" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#111" stroke-width="2" fill="none"/><line x1="16" y1="16" x2="22" y2="22" stroke="#111" stroke-width="2" stroke-linecap="round"/></svg>234    </div>235  </div>236 237  <div class="page-title">MENS SHOES • NMD • STRETCH</div>238  <div class="result-count">1 RESULT</div>239 240  <!-- Filters -->241  <div class="filter-row">242    <div class="filter-icon">243      <div class="box"></div>244      <div class="filter-badge">2</div>245      <div class="lines">246        <div></div>247        <div style="width:58px;"></div>248        <div style="width:46px;"></div>249      </div>250    </div>251    <div class="chip">NMD</div>252    <div class="chip">STRETCH</div>253  </div>254 255  <!-- Product Card -->256  <div class="card">257    <div class="card-img">[IMG: Black Adidas NMD_R1 Shoe]</div>258 259    <div class="heart-fav">260      <svg width="72" height="72" viewBox="0 0 24 24">261        <path d="M12 21s-6.5-4.1-9.3-7.1C1.4 12.5 2 9.7 4.4 8.5c2.1-1.1 4.3.2 5.6 1.8 1.3-1.6 3.5-2.9 5.6-1.8 2.4 1.2 3 4 1.7 5.4C18.5 16.9 12 21 12 21z" fill="none" stroke="#111" stroke-width="2" stroke-linejoin="round"/>262      </svg>263    </div>264 265    <div class="ar-badge">AR</div>266 267    <div class="meta-row">268      <span class="pill">NEW</span>269      <span class="price-pill">$150.00</span>270    </div>271 272    <div class="card-body">273      <div class="title-row">274        <div class="product-title">NMD_R1 Shoes</div>275        <div class="assist">276          <span>+37</span>277          <span class="dot-blue"></span>278          <span class="dot-red"></span>279          <span class="dot-yellow"></span>280        </div>281      </div>282      <div class="subtitle">Men's Originals</div>283    </div>284  </div>285 286  <!-- Bottom navigation bar -->287  <div class="nav-bottom">288    <div class="nav-item">289      <svg width="56" height="56" viewBox="0 0 24 24"><path d="M6 3l3 4-3 4h4l3 4-2-8h4L12 3H6z" fill="#B5B5B5"/></svg>290    </div>291    <div class="nav-item">292      <svg width="56" height="56" viewBox="0 0 24 24">293        <rect x="4" y="5" width="16" height="2" fill="#B5B5B5"/>294        <rect x="4" y="10" width="10" height="2" fill="#B5B5B5"/>295        <circle cx="18" cy="11" r="2" fill="#B5B5B5"/>296      </svg>297    </div>298    <div class="nav-item">299      <svg width="56" height="56" viewBox="0 0 24 24">300        <path d="M12 21s-6-3.8-8.6-6.6C2 12.3 2.6 9.8 5 8.6c1.9-.9 3.8.2 5 1.7 1.2-1.5 3.1-2.7 5-1.7 2.4 1.2 3 3.8 1.6 5.2C18 17.2 12 21 12 21z" fill="#B5B5B5"/>301      </svg>302    </div>303    <div class="nav-item" style="position: relative;">304      <svg width="56" height="56" viewBox="0 0 24 24">305        <path d="M6 7h12l-2 11H8L6 7z" fill="none" stroke="#B5B5B5" stroke-width="2"/>306        <circle cx="9" cy="20" r="2" fill="#B5B5B5"/>307        <circle cx="16" cy="20" r="2" fill="#B5B5B5"/>308      </svg>309      <div class="badge">2</div>310    </div>311    <div class="nav-item">312      <svg width="56" height="56" viewBox="0 0 24 24">313        <circle cx="12" cy="8" r="4" fill="#B5B5B5"/>314        <path d="M4 21c0-4 4-7 8-7s8 3 8 7" fill="none" stroke="#B5B5B5" stroke-width="2"/>315      </svg>316    </div>317  </div>318 319</div>320</body>321</html>