GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Adidas Shop Mock</title>6<style>7  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #ffffff;14    color:#111;15  }16  .status-bar{17    height: 88px;18    display:flex;19    align-items:center;20    justify-content: space-between;21    padding: 0 36px;22    color:#111;23    font-weight:600;24    letter-spacing: 1px;25    font-size:38px;26  }27  .status-icons{28    display:flex; gap:24px; align-items:center;29  }30  .header{31    padding: 16px 36px 8px 36px;32  }33  .header-row{34    display:flex; align-items:center; justify-content: space-between;35  }36  .title{37    font-size:68px; font-weight:800; letter-spacing:2px;38  }39  .profile{40    width:70px; height:70px; border-radius:50%; border:3px solid #000; display:flex; align-items:center; justify-content:center;41  }42  .search-wrap{43    margin-top:26px;44    height:110px;45    background:#f4f4f4;46    border:1px solid #e0e0e0;47    border-radius:56px;48    display:flex; align-items:center;49    padding:0 32px;50    color:#9e9e9e;51    font-size:40px;52  }53  .search-wrap svg{ margin-right:18px;}54  .tabs{55    display:flex; gap:64px;56    padding: 22px 36px 0 36px;57    font-size:36px; letter-spacing:4px; font-weight:700;58  }59  .tab{ padding-bottom:18px; color:#222;}60  .tab.active{ border-bottom:8px solid #000; }61  .banner{62    margin-top:18px;63    background:#000;64    color:#fff;65    padding: 40px 36px 48px 36px;66  }67  .banner h3{ margin:0; font-size:46px; letter-spacing:1px;}68  .banner p{ margin:18px 0 36px 0; font-size:34px; line-height:1.4; color:#e6e6e6; max-width:940px; }69  .btn-outline{70    display:inline-block;71    border:3px solid #fff;72    color:#fff;73    padding:22px 40px;74    border-radius:6px;75    font-weight:800;76    letter-spacing:6px;77    font-size:34px;78  }79  .spacer{80    height: 520px; /* white space as seen in screenshot */81  }82  .list{83    margin-top:12px;84    border-top:1px solid #eee;85  }86  .list-item{87    display:flex; align-items:center; justify-content: space-between;88    padding:46px 36px;89    border-bottom:1px solid #eee;90    font-size:44px; letter-spacing:5px; font-weight:800;91  }92  .pill{93    font-size:28px; letter-spacing:4px; font-weight:800;94    padding:8px 18px; border-radius:6px; background:#000; color:#fff; margin-left:18px;95  }96  /* bottom app nav */97  .bottom-nav{98    position:absolute;99    left:0; right:0; bottom:0;100    height:150px;101    background:#000;102    display:flex; align-items:center; justify-content: space-around;103    padding:0 24px;104  }105  .nav-icon{106    display:flex; flex-direction:column; align-items:center; color:#d8d8d8; font-size:24px;107  }108  .gesture-bar{109    position:absolute;110    left:50%; transform:translateX(-50%);111    bottom:156px;112    width:440px; height:12px; border-radius:8px; background:#cfcfcf;113    opacity:0.9;114  }115</style>116</head>117<body>118<div id="render-target">119 120  <!-- Status bar -->121  <div class="status-bar">122    <div>12:08</div>123    <div class="status-icons">124      <!-- tiny icons to mimic Android status -->125      <svg width="34" height="34" viewBox="0 0 24 24">126        <circle cx="12" cy="12" r="10" fill="#777"/>127      </svg>128      <svg width="34" height="34" viewBox="0 0 24 24">129        <rect x="3" y="5" width="18" height="14" fill="#777"/>130      </svg>131      <svg width="34" height="34" viewBox="0 0 24 24">132        <rect x="4" y="6" width="16" height="12" fill="none" stroke="#777" stroke-width="2"/>133        <rect x="8" y="9" width="8" height="6" fill="#777"/>134      </svg>135    </div>136  </div>137 138  <!-- Header with title and search -->139  <div class="header">140    <div class="header-row">141      <div class="title">SHOP</div>142      <div class="profile">143        <!-- simple user icon -->144        <svg width="44" height="44" viewBox="0 0 24 24">145          <circle cx="12" cy="8" r="4" stroke="#000" stroke-width="2" fill="none"/>146          <path d="M4 20c2-4 14-4 16 0" stroke="#000" stroke-width="2" fill="none"/>147        </svg>148      </div>149    </div>150 151    <div class="search-wrap">152      <svg width="46" height="46" viewBox="0 0 24 24">153        <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2" fill="none"/>154        <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#777" stroke-width="2"/>155      </svg>156      <span>Find products...</span>157    </div>158  </div>159 160  <!-- Tabs -->161  <div class="tabs">162    <div class="tab active">MEN</div>163    <div class="tab">WOMEN</div>164    <div class="tab">KIDS</div>165  </div>166 167  <!-- Banner -->168  <div class="banner">169    <h3>Your personal shop</h3>170    <p>Act fast! Explore a selection of products available for members only. Log in and shop your favorites.</p>171    <div class="btn-outline">LOGIN</div>172  </div>173 174  <div class="spacer"></div>175 176  <!-- List of categories -->177  <div class="list">178    <div class="list-item">MEMBERS FIRST ACCESS</div>179    <div class="list-item">SHOES</div>180    <div class="list-item">CLOTHING</div>181    <div class="list-item">ACCESSORIES</div>182    <div class="list-item">NEW &amp; TRENDING</div>183    <div class="list-item">184      <span>ONLY AT ADIDAS</span>185      <span class="pill">EXCLUSIVE</span>186    </div>187    <div class="list-item">SALE</div>188  </div>189 190  <!-- Gesture bar (system) -->191  <div class="gesture-bar"></div>192 193  <!-- Bottom navigation bar -->194  <div class="bottom-nav">195    <div class="nav-icon">196      <svg width="64" height="64" viewBox="0 0 24 24">197        <path d="M5 21l7-18 7 18" stroke="#d8d8d8" stroke-width="2" fill="none"/>198      </svg>199    </div>200    <div class="nav-icon">201      <svg width="64" height="64" viewBox="0 0 24 24">202        <circle cx="11" cy="11" r="7" stroke="#d8d8d8" stroke-width="2" fill="none"/>203        <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#d8d8d8" stroke-width="2"/>204      </svg>205    </div>206    <div class="nav-icon">207      <svg width="64" height="64" viewBox="0 0 24 24">208        <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="#d8d8d8" stroke-width="2"/>209      </svg>210    </div>211    <div class="nav-icon">212      <svg width="64" height="64" viewBox="0 0 24 24">213        <path d="M6 6h15l-2 10H7L6 6z" stroke="#d8d8d8" stroke-width="2" fill="none"/>214        <circle cx="9" cy="20" r="1.8" fill="#d8d8d8"/>215        <circle cx="17" cy="20" r="1.8" fill="#d8d8d8"/>216      </svg>217    </div>218    <div class="nav-icon">219      <svg width="64" height="64" viewBox="0 0 24 24">220        <circle cx="12" cy="12" r="9" stroke="#d8d8d8" stroke-width="2" fill="none"/>221        <path d="M12 7v6l4 2" stroke="#d8d8d8" stroke-width="2" fill="none"/>222      </svg>223    </div>224  </div>225 226</div>227</body>228</html>