GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Nike SB Force 58 - Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #FFFFFF;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 110px;22    background: #000;23    color: #fff;24    display: flex;25    align-items: center;26    padding: 0 32px;27    box-sizing: border-box;28    font-size: 38px;29  }30  .status-left { flex: 1; }31  .status-right { display: flex; gap: 28px; align-items: center; }32  .dot { width: 18px; height: 18px; background: #fff; border-radius: 50%; opacity: 0.9; }33  .wifi {34    width: 36px; height: 36px;35  }36 37  /* Header */38  .app-bar {39    position: absolute;40    top: 110px;41    left: 0;42    width: 1080px;43    height: 120px;44    background: #fff;45    display: flex;46    align-items: center;47    padding: 0 32px;48    box-sizing: border-box;49    border-bottom: 1px solid #eee;50  }51  .back-btn, .icon-btn {52    width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; cursor: default;53  }54  .title {55    font-size: 54px;56    font-weight: 600;57    color: #111;58    margin-left: 10px;59  }60  .spacer { flex: 1; }61  .icon {62    width: 56px; height: 56px;63  }64 65  /* Hero image area */66  .hero {67    position: absolute;68    top: 230px;69    left: 0;70    width: 1080px;71    height: 980px;72    background: #F7F7F7;73    display: flex;74    align-items: center;75    justify-content: center;76    box-sizing: border-box;77    border-bottom: 1px solid #eee;78  }79  .hero .image {80    width: 980px;81    height: 540px;82    background: #E0E0E0;83    border: 1px solid #BDBDBD;84    color: #757575;85    display: flex;86    align-items: center;87    justify-content: center;88    font-size: 40px;89  }90  .slider {91    position: absolute;92    bottom: 90px;93    left: 140px;94    width: 800px;95    height: 10px;96    background: #e6e6e6;97    border-radius: 5px;98  }99  .slider::after {100    content: "";101    position: absolute;102    left: 120px;103    top: -3px;104    width: 260px;105    height: 16px;106    background: #bdbdbd;107    border-radius: 8px;108  }109 110  /* Thumbnails row */111  .thumbs {112    position: absolute;113    top: 1210px;114    left: 0;115    width: 1080px;116    padding: 40px 40px 0;117    box-sizing: border-box;118    display: flex;119    gap: 30px;120  }121  .thumb {122    width: 320px;123    height: 240px;124    background: #E0E0E0;125    border: 1px solid #BDBDBD;126    display: flex;127    align-items: center;128    justify-content: center;129    color: #757575;130    font-size: 32px;131    position: relative;132  }133  .thumb.out::after {134    content: "Out of Stock";135    position: absolute;136    bottom: -70px;137    left: 0;138    width: 100%;139    text-align: center;140    color: #8c8c8c;141    font-size: 42px;142  }143 144  /* Product info */145  .info {146    position: absolute;147    bottom: 170px;148    left: 40px;149    right: 40px;150    height: 360px;151    border-top: 0;152  }153  .subtitle {154    font-size: 44px;155    color: #343434;156    margin-bottom: 16px;157  }158  .product-name {159    font-size: 84px;160    font-weight: 700;161    letter-spacing: 1px;162    color: #111;163  }164 165  /* Home indicator */166  .home-indicator {167    position: absolute;168    bottom: 40px;169    left: 50%;170    transform: translateX(-50%);171    width: 480px;172    height: 16px;173    background: #111;174    border-radius: 8px;175    opacity: 0.85;176  }177</style>178</head>179<body>180<div id="render-target">181  <!-- Status Bar -->182  <div class="status-bar">183    <div class="status-left">11:34</div>184    <div class="status-right">185      <!-- simple "G" to mimic icon -->186      <div style="color:#fff;font-weight:700;">G</div>187      <div class="dot"></div>188      <div class="dot" style="border-radius:4px;"></div>189      <svg class="wifi" viewBox="0 0 24 24" fill="#fff">190        <path d="M12 18.5c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5-1.5-.7-1.5-1.5.7-1.5 1.5-1.5zm-5-3.6c3.2-3.2 6.8-3.2 10 0l1.1-1.1c-3.9-3.9-9.3-3.9-13.2 0L7 14.9zm-3.1-3.2C7.9 8.6 16.1 8.6 20.1 11.7l1.1-1.1C16.7 6 7.3 6 2 10.6l1.9 1.1z"/>191      </svg>192    </div>193  </div>194 195  <!-- Header / App Bar -->196  <div class="app-bar">197    <div class="back-btn">198      <svg class="icon" viewBox="0 0 24 24" fill="#000">199        <path d="M15.5 19L8.5 12l7-7-1.4-1.4L5.7 12l8.4 8.4 1.4-1.4z"/>200      </svg>201    </div>202    <div class="title">Nike SB Force 58</div>203    <div class="spacer"></div>204    <div class="icon-btn">205      <svg class="icon" viewBox="0 0 24 24" fill="#000">206        <path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 10.9.9l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 1114 9.5 4.5 4.5 0 019.5 14z"/>207      </svg>208    </div>209    <div class="icon-btn">210      <svg class="icon" viewBox="0 0 24 24" fill="#000">211        <path d="M7 7h14l-2 12H7L5 5H2V3h3a2 2 0 012 2l.5 2zM9 21a2 2 0 100-4 2 2 0 000 4zm8 0a2 2 0 100-4 2 2 0 000 4z"/>212      </svg>213    </div>214  </div>215 216  <!-- Hero section with main product image -->217  <div class="hero">218    <div class="image">[IMG: Black Nike SB Force 58 Shoe]</div>219    <div class="slider"></div>220  </div>221 222  <!-- Thumbnails -->223  <div class="thumbs">224    <div class="thumb out">[IMG: Nike SB Force 58 - Blue/Black]</div>225    <div class="thumb out">[IMG: Nike SB Force 58 - Grey/Green]</div>226    <div class="thumb">[IMG: Nike SB Force 58 - Black/White]</div>227  </div>228 229  <!-- Product information -->230  <div class="info">231    <div class="subtitle">Skate Shoe</div>232    <div class="product-name">Nike SB Force 58</div>233  </div>234 235  <!-- Home indicator -->236  <div class="home-indicator"></div>237</div>238</body>239</html>