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>Shop - Mock</title>7<style>8  body { margin:0; padding:0; background:transparent; font-family: "Helvetica Neue", Arial, sans-serif; color:#111; }9  #render-target {10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#ffffff;12  }13 14  /* Header */15  .top-space { height:80px; } /* mimics OS status space */16  .header {17    padding: 24px 48px 12px 48px;18    position: relative;19  }20  .title {21    font-weight: 800;22    font-size: 60px;23    letter-spacing: 2px;24  }25  .profile-icon {26    position:absolute; right:48px; top:40px; width:64px; height:64px;27  }28 29  /* Search */30  .search-bar {31    margin: 24px 0 0 0;32    border-top:1px solid #efefef; border-bottom:1px solid #efefef;33    padding: 22px 48px;34  }35  .search-box {36    height:110px; border:1px solid #e6e6e6; background:#fafafa;37    display:flex; align-items:center; padding:0 30px; color:#9e9e9e;38  }39  .search-box span { margin-left:20px; font-size:40px; color:#b0b0b0; }40 41  /* Tabs */42  .tabs {43    display:flex; gap:48px; padding: 26px 48px 16px;44    align-items:flex-end;45  }46  .tab {47    font-weight:700; font-size:36px; letter-spacing:4px; color:#222;48  }49  .tab.active { position:relative; }50  .tab.active:after {51    content:""; position:absolute; left:0; right:0; bottom:-18px;52    height:8px; background:#000;53  }54 55  /* Ribbon */56  .ribbon {57    height:64px; background:#e6c0d4; color:#5c3c4e;58    display:flex; align-items:center; padding:0 32px; font-size:30px; letter-spacing:3px;59    text-transform:uppercase;60  }61 62  /* Hero banner placeholder */63  .hero {64    position:relative; height:560px; margin-top:0;65  }66  .hero .img {67    position:absolute; inset:0;68    background:#E0E0E0; border-top:1px solid #BDBDBD; border-bottom:1px solid #BDBDBD;69    display:flex; align-items:center; justify-content:center; color:#757575; font-size:36px;70  }71  .hero .arrow-btn {72    position:absolute; left:48px; top:340px; width:100px; height:100px;73    background:#ffffff; border:2px solid #111; display:flex; align-items:center; justify-content:center;74  }75  .hero .headline {76    position:absolute; left:48px; top:372px;77    background:#ffffff; padding:22px 28px; font-weight:800; font-size:40px; letter-spacing:4px;78    border:1px solid #e5e5e5;79  }80  .hero .subcopy {81    position:absolute; left:48px; top:460px;82    background:#ffffff; padding:18px 22px; font-size:32px; color:#333; border:1px solid #e5e5e5;83  }84 85  /* List sections */86  .list { margin-top:40px; }87  .row {88    height:140px; display:flex; align-items:center; justify-content:space-between;89    padding:0 48px; border-top:1px solid #efefef;90  }91  .row:last-child { border-bottom:1px solid #efefef; }92  .row .label {93    font-size:40px; font-weight:700; letter-spacing:4px;94  }95  .row .right {96    width:40px; height:40px;97  }98  .badge {99    display:inline-block; background:#000; color:#fff; font-size:28px; padding:8px 14px; margin-left:16px; letter-spacing:3px;100  }101 102  /* Bottom nav */103  .bottom-nav {104    position:absolute; left:0; right:0; bottom:60px; height:120px;105    display:flex; align-items:center; justify-content:space-around; padding:0 40px;106  }107  .nav-item { display:flex; flex-direction:column; align-items:center; color:#7d7d7d; font-size:26px; }108  .nav-item.active { color:#111; }109  .home-indicator {110    position:absolute; left:50%; transform:translateX(-50%);111    bottom:20px; width:360px; height:14px; background:#c8c8c8; border-radius:8px;112  }113  svg { display:block; }114</style>115</head>116<body>117<div id="render-target">118 119  <div class="top-space"></div>120 121  <div class="header">122    <div class="title">SHOP</div>123    <!-- Profile icon -->124    <svg class="profile-icon" viewBox="0 0 24 24">125      <circle cx="12" cy="8" r="4" fill="none" stroke="#000" stroke-width="2"></circle>126      <path d="M4 20c2.5-4 13.5-4 16 0" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round"></path>127    </svg>128 129    <div class="search-bar">130      <div class="search-box">131        <svg width="46" height="46" viewBox="0 0 24 24">132          <circle cx="11" cy="11" r="7" stroke="#111" stroke-width="2" fill="none"></circle>133          <path d="M16 16l5 5" stroke="#111" stroke-width="2" stroke-linecap="round"></path>134        </svg>135        <span>Find products...</span>136      </div>137    </div>138  </div>139 140  <div class="tabs">141    <div class="tab active">MEN</div>142    <div class="tab">WOMEN</div>143    <div class="tab">KIDS</div>144  </div>145 146  <div class="ribbon">• WEEK OF DEALS • 11/1 – 11/8 • WEEK OF DEALS • 11/1 – 11/8 • WEEK OF DEALS •</div>147 148  <div class="hero">149    <div class="img">[IMG: Red Running Shoe on Purple Carpet]</div>150 151    <div class="arrow-btn">152      <svg width="44" height="44" viewBox="0 0 24 24">153        <path d="M7 12h10M13 6l6 6-6 6" stroke="#000" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>154      </svg>155    </div>156    <div class="headline">UP TO 50% OFF ULTRABOOST</div>157    <div class="subcopy">Score on the best of Ultraboost through November 8.</div>158  </div>159 160  <div class="list">161    <div class="row">162      <div class="label">WEEK OF DEALS</div>163      <svg class="right" viewBox="0 0 24 24">164        <path d="M8 4l8 8-8 8" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>165      </svg>166    </div>167    <div class="row">168      <div class="label">SHOES</div>169      <svg class="right" viewBox="0 0 24 24">170        <path d="M8 4l8 8-8 8" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>171      </svg>172    </div>173    <div class="row">174      <div class="label">CLOTHING</div>175      <svg class="right" viewBox="0 0 24 24">176        <path d="M8 4l8 8-8 8" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>177      </svg>178    </div>179    <div class="row">180      <div class="label">ACCESSORIES</div>181      <svg class="right" viewBox="0 0 24 24">182        <path d="M8 4l8 8-8 8" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>183      </svg>184    </div>185    <div class="row">186      <div class="label">GIFTS</div>187      <svg class="right" viewBox="0 0 24 24">188        <path d="M8 4l8 8-8 8" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>189      </svg>190    </div>191    <div class="row">192      <div class="label">NEW & TRENDING</div>193      <svg class="right" viewBox="0 0 24 24">194        <path d="M8 4l8 8-8 8" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>195      </svg>196    </div>197    <div class="row">198      <div class="label">ONLY AT ADIDAS <span class="badge">EXCLUSIVE</span></div>199      <svg class="right" viewBox="0 0 24 24">200        <path d="M8 4l8 8-8 8" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>201      </svg>202    </div>203    <div class="row">204      <div class="label">SALE</div>205      <svg class="right" viewBox="0 0 24 24">206        <path d="M8 4l8 8-8 8" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>207      </svg>208    </div>209    <div class="row">210      <div class="label">SHOP BY SPORT</div>211      <svg class="right" viewBox="0 0 24 24">212        <path d="M8 4l8 8-8 8" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>213      </svg>214    </div>215  </div>216 217  <!-- Bottom navigation -->218  <div class="bottom-nav">219    <div class="nav-item">220      <svg width="48" height="48" viewBox="0 0 24 24">221        <path d="M8 15c0-4 4-6 4-10 3 2 5 6 3 10-1 3-7 3-7 0z" fill="none" stroke="#9e9e9e" stroke-width="2" stroke-linejoin="round"></path>222      </svg>223    </div>224    <div class="nav-item active">225      <svg width="48" height="48" viewBox="0 0 24 24">226        <circle cx="11" cy="11" r="7" stroke="#111" stroke-width="2" fill="none"></circle>227        <path d="M16 16l5 5" stroke="#111" stroke-width="2" stroke-linecap="round"></path>228      </svg>229    </div>230    <div class="nav-item">231      <svg width="48" height="48" viewBox="0 0 24 24">232        <path d="M12 21s-7-4.4-7-10a4 4 0 018 0 4 4 0 018 0c0 5.6-7 10-7 10z" fill="none" stroke="#b5b5b5" stroke-width="2" stroke-linejoin="round"></path>233      </svg>234    </div>235    <div class="nav-item">236      <svg width="48" height="48" viewBox="0 0 24 24">237        <path d="M6 7h14l-2 12H6L4 5h3" fill="none" stroke="#b5b5b5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>238      </svg>239    </div>240    <div class="nav-item">241      <svg width="48" height="48" viewBox="0 0 24 24">242        <circle cx="12" cy="12" r="8" fill="none" stroke="#b5b5b5" stroke-width="2"></circle>243        <path d="M12 4v8l5 3" stroke="#b5b5b5" stroke-width="2" fill="none" stroke-linecap="round"></path>244      </svg>245    </div>246  </div>247  <div class="home-indicator"></div>248 249</div>250</body>251</html>