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>Nike Product UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14    border-radius: 0;15    box-shadow: none;16    color: #111;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 120px;26    background: #0c0c0c;27    color: #fff;28    display: flex;29    align-items: center;30    padding: 0 36px;31    box-sizing: border-box;32    letter-spacing: 0.5px;33  }34  .status-time { font-weight: 600; font-size: 38px; }35  .status-icons { margin-left: auto; display: flex; gap: 28px; align-items: center; }36  .status-dot {37    width: 32px; height: 32px; background: #fff; border-radius: 6px; opacity: 0.85;38  }39  .status-signal {40    width: 32px; height: 32px; border: 3px solid #fff; border-radius: 8px; opacity: 0.85;41  }42 43  /* App header */44  .app-header {45    position: absolute;46    top: 120px;47    left: 0;48    width: 1080px;49    height: 120px;50    display: flex;51    align-items: center;52    padding: 0 40px;53    box-sizing: border-box;54    background: #fff;55  }56  .back-btn {57    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;58  }59  .header-title {60    font-size: 48px;61    font-weight: 700;62    margin-left: 20px;63  }64  .header-actions { margin-left: auto; display: flex; gap: 34px; }65  .icon-btn {66    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;67  }68  .icon { width: 56px; height: 56px; }69 70  /* Content */71  .content {72    position: absolute;73    top: 240px;74    left: 0;75    width: 100%;76    box-sizing: border-box;77    padding: 0 40px 120px;78  }79  .price { font-size: 44px; font-weight: 700; margin-top: 20px; }80  .subtext { color: #666; font-size: 32px; margin-top: 14px; }81  .subtext.small { font-size: 30px; }82  .paragraph {83    font-size: 36px; line-height: 1.5; color: #333; margin-top: 40px;84  }85  .bullets { margin-top: 36px; }86  .bullets div { font-size: 36px; color: #111; margin: 16px 0; }87  .link {88    margin-top: 40px; color: #6b6b6b; font-size: 40px; font-weight: 600;89  }90 91  /* Pills / buttons */92  .pill {93    margin-top: 40px;94    height: 140px;95    border: 2px solid #e5e5e5;96    border-radius: 90px;97    display: flex;98    align-items: center;99    justify-content: space-between;100    padding: 0 42px;101    box-sizing: border-box;102    font-size: 40px;103    color: #111;104    background: #fff;105  }106  .caret {107    width: 44px; height: 44px;108  }109  .add-btn {110    margin-top: 40px;111    height: 160px;112    background: #111;113    color: #fff;114    border-radius: 100px;115    display: flex;116    align-items: center;117    justify-content: center;118    font-size: 48px;119    font-weight: 700;120  }121  .favorite-btn {122    margin-top: 28px;123    height: 140px;124    border: 2px solid #e5e5e5;125    border-radius: 100px;126    display: flex;127    align-items: center;128    justify-content: center;129    gap: 20px;130    font-size: 44px;131    color: #111;132    background: #fff;133  }134  .heart { width: 56px; height: 56px; }135 136  .section-title {137    margin-top: 60px;138    font-size: 52px;139    font-weight: 700;140    display: flex;141    align-items: center;142    justify-content: space-between;143  }144  .divider {145    height: 1px; background: #efefef; margin-top: 24px;146  }147 148  /* Simple image placeholder (none shown in this screen, kept for structure) */149  .img-ph {150    width: 100%; height: 0; padding-bottom: 56%; background: #E0E0E0;151    border: 1px solid #BDBDBD; color: #757575; display: flex; align-items: center; justify-content: center;152    margin-top: 20px;153  }154</style>155</head>156<body>157<div id="render-target">158 159  <!-- Status bar -->160  <div class="status-bar">161    <div class="status-time">11:35</div>162    <div class="status-icons">163      <div class="status-dot"></div>164      <div class="status-dot" style="border-radius:50%"></div>165      <div class="status-signal"></div>166    </div>167  </div>168 169  <!-- App header -->170  <div class="app-header">171    <div class="back-btn">172      <svg class="icon" viewBox="0 0 24 24">173        <path d="M15.5 4l-8 8 8 8" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>174      </svg>175    </div>176    <div class="header-title">Nike SB Force 58</div>177    <div class="header-actions">178      <div class="icon-btn">179        <svg class="icon" viewBox="0 0 24 24">180          <circle cx="11" cy="11" r="7.5" fill="none" stroke="#111" stroke-width="2"/>181          <path d="M20 20l-4.5-4.5" stroke="#111" stroke-width="2" stroke-linecap="round"/>182        </svg>183      </div>184      <div class="icon-btn">185        <svg class="icon" viewBox="0 0 24 24">186          <path d="M8 8V6a4 4 0 018 0v2h3v12H5V8h3z" fill="none" stroke="#111" stroke-width="2" stroke-linejoin="round"/>187          <path d="M9 8h6" stroke="#111" stroke-width="2"/>188        </svg>189      </div>190    </div>191  </div>192 193  <!-- Content -->194  <div class="content">195    <div class="price">MRP : ₹ 5 995.00</div>196    <div class="subtext">Incl. of taxes</div>197    <div class="subtext small">(Also includes all applicable duties)</div>198 199    <div class="paragraph">200      The latest and greatest innovation to hit the streets, the Nike SB Force 58 gives you the durability of a cupsole with the flexibility of a vulcanised shoe. Made from canvas and suede and finished with perforations, the whole look is infused with heritage basketball DNA.201    </div>202 203    <div class="bullets">204      <div>• Shown: Black/Black/White</div>205      <div>• Style: CZ2959-001</div>206      <div>• Country/Region of Origin: Vietnam</div>207    </div>208 209    <div class="link">View Product Details</div>210 211    <div class="pill">212      <div>Size UK 9</div>213      <svg class="caret" viewBox="0 0 24 24">214        <path d="M6 9l6 6 6-6" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>215      </svg>216    </div>217 218    <div class="add-btn">Add to Bag</div>219 220    <div class="favorite-btn">221      <div>Favorite</div>222      <svg class="heart" viewBox="0 0 24 24">223        <path d="M12 21s-7-4.5-7-10a4.5 4.5 0 018-3 4.5 4.5 0 018 3c0 5.5-7 10-7 10z" fill="none" stroke="#111" stroke-width="2" stroke-linejoin="round"/>224      </svg>225    </div>226 227    <div class="section-title">228      <div>Size & Fit</div>229      <svg class="caret" viewBox="0 0 24 24">230        <path d="M6 9l6 6 6-6" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>231      </svg>232    </div>233    <div class="divider"></div>234  </div>235 236</div>237</body>238</html>