GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Nike Product Detail - 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 /* Top status bar */16 .status-bar {17 height: 90px;18 padding: 0 40px;19 display: flex;20 align-items: center;21 justify-content: space-between;22 color: #111;23 font-weight: 600;24 font-size: 34px;25 }26 .status-icons {27 display: flex;28 align-items: center;29 gap: 22px;30 }31 .status-dot {32 width: 16px; height: 16px; border-radius: 50%; background: #111;33 }34 .status-battery {35 width: 36px; height: 20px; border: 2px solid #111; border-radius: 4px; position: relative;36 }37 .status-battery::after {38 content: "";39 position: absolute;40 right: -8px; top: 6px;41 width: 6px; height: 8px; background: #111; border-radius: 2px;42 }43 .status-battery .level {44 width: 65%; height: 100%; background: #111;45 }46 47 /* Header row */48 .header {49 height: 120px;50 padding: 0 40px;51 display: flex;52 align-items: center;53 justify-content: space-between;54 }55 .title-area {56 display: flex;57 align-items: center;58 gap: 26px;59 }60 .page-title {61 font-size: 48px;62 font-weight: 700;63 color: #0f0f0f;64 letter-spacing: 0.2px;65 }66 .header-icons {67 display: flex;68 align-items: center;69 gap: 36px;70 }71 .icon-btn { width: 56px; height: 56px; }72 .cart-wrap { position: relative; }73 .badge {74 position: absolute;75 right: -6px; top: -6px;76 min-width: 42px;77 height: 42px;78 padding: 0 8px;79 background: #111;80 color: #fff;81 border-radius: 14px;82 display: flex; align-items: center; justify-content: center;83 font-size: 26px; font-weight: 700;84 border: 2px solid #fff;85 }86 87 /* Content */88 .content {89 padding: 0 40px;90 color: #1a1a1a;91 }92 .subtitle {93 margin-top: 8px;94 font-size: 34px;95 line-height: 48px;96 color: #222;97 }98 .bullets {99 margin-top: 24px;100 font-size: 34px;101 line-height: 54px;102 }103 .link {104 margin-top: 28px;105 font-size: 36px;106 color: #3b3b3b;107 font-weight: 600;108 }109 110 /* Pills and buttons */111 .pill {112 margin-top: 36px;113 height: 120px;114 border: 2px solid #E6E6E6;115 border-radius: 60px;116 display: flex;117 align-items: center;118 justify-content: space-between;119 padding: 0 44px;120 color: #111;121 background: #fafafa;122 font-size: 40px;123 font-weight: 700;124 }125 .pill .right {126 display: flex; align-items: center; gap: 18px;127 }128 .bag-btn {129 margin-top: 32px;130 height: 126px;131 border-radius: 64px;132 background: #0f0f0f;133 color: #fff;134 font-size: 44px;135 font-weight: 800;136 display: flex; align-items: center; justify-content: center;137 }138 .pill-light {139 margin-top: 24px;140 height: 120px;141 border: 2px solid #EAEAEA;142 border-radius: 60px;143 background: #fff;144 display: flex; align-items: center; justify-content: space-between;145 padding: 0 44px;146 font-size: 40px; font-weight: 700; color: #222;147 }148 149 /* Sections */150 .section {151 margin-top: 36px;152 border-top: 2px solid #eee;153 }154 .section-row {155 height: 120px;156 border-bottom: 2px solid #eee;157 display: flex;158 align-items: center;159 justify-content: space-between;160 padding: 0 4px;161 }162 .section-title {163 font-size: 44px;164 font-weight: 700;165 color: #111;166 }167 .caret { width: 42px; height: 42px; }168 .stars {169 display: flex;170 gap: 18px;171 margin-left: 14px;172 }173 174 .share {175 position: absolute;176 left: 50%;177 transform: translateX(-50%);178 bottom: 110px;179 width: 64px; height: 64px;180 }181 182 /* Utility */183 .muted { color: #666; }184</style>185</head>186<body>187<div id="render-target">188 189 <!-- Status Bar -->190 <div class="status-bar">191 <div>9:43</div>192 <div class="status-icons">193 <div class="status-dot"></div>194 <svg class="icon-btn" viewBox="0 0 24 24">195 <circle cx="12" cy="12" r="10" stroke="#111" stroke-width="2" fill="none"></circle>196 <circle cx="12" cy="12" r="4" fill="#111"></circle>197 </svg>198 <div class="status-battery">199 <div class="level"></div>200 </div>201 </div>202 </div>203 204 <!-- Header -->205 <div class="header">206 <div class="title-area">207 <!-- Back Arrow -->208 <svg class="icon-btn" viewBox="0 0 24 24">209 <path d="M15 18l-6-6 6-6" stroke="#111" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>210 </svg>211 <div class="page-title">Nike Air Max 97</div>212 </div>213 <div class="header-icons">214 <!-- Search -->215 <svg class="icon-btn" viewBox="0 0 24 24">216 <circle cx="11" cy="11" r="7" stroke="#111" stroke-width="2.2" fill="none"></circle>217 <line x1="16.5" y1="16.5" x2="21" y2="21" stroke="#111" stroke-width="2.2" stroke-linecap="round"></line>218 </svg>219 <!-- Cart/Bag -->220 <div class="cart-wrap">221 <svg class="icon-btn" viewBox="0 0 24 24">222 <path d="M7 8h10l-1 12H8L7 8z" stroke="#111" stroke-width="2" fill="none" stroke-linejoin="round"></path>223 <path d="M9 8a3 3 0 0 1 6 0" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"></path>224 </svg>225 <div class="badge">3</div>226 </div>227 </div>228 </div>229 230 <!-- Content -->231 <div class="content">232 <div class="subtitle">233 the running world and adding fresh colours and crisp details, it lets you ride in first‑class comfort.234 </div>235 236 <div class="bullets">237 • Shown: Black/Anthracite/Picante Red<br>238 • Style: 921826‑018<br>239 • Country/Region of Origin: Vietnam240 </div>241 242 <div class="link">View Product Details</div>243 244 <div class="pill">245 <div>Size UK 7</div>246 <div class="right">247 <svg class="caret" viewBox="0 0 24 24">248 <path d="M6 9l6 6 6-6" stroke="#111" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>249 </svg>250 </div>251 </div>252 253 <div class="bag-btn">Add to Bag</div>254 255 <div class="pill-light">256 <div>Favorited</div>257 <svg class="icon-btn" viewBox="0 0 24 24">258 <path d="M12 21s-7-4.5-7-9.5A4.5 4.5 0 0 1 9.5 7a4.5 4.5 0 0 1 2.5 1 4.5 4.5 0 0 1 2.5-1A4.5 4.5 0 0 1 19 11.5C19 16.5 12 21 12 21z" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>259 </svg>260 </div>261 262 <div class="section">263 <div class="section-row">264 <div class="section-title">Size & Fit</div>265 <svg class="caret" viewBox="0 0 24 24">266 <path d="M6 9l6 6 6-6" stroke="#333" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>267 </svg>268 </div>269 270 <div class="section-row">271 <div class="section-title" style="display:flex; align-items:center;">272 Reviews (150)273 <div class="stars">274 <!-- 4.5 stars -->275 <svg width="42" height="42" viewBox="0 0 24 24">276 <path d="M12 17.3l-5.4 3.2 1.4-6L3 9.8l6.2-.5L12 3l2.8 6.3 6.2.5-5 4.7 1.4 6z" fill="#111"></path>277 </svg>278 <svg width="42" height="42" viewBox="0 0 24 24">279 <path d="M12 17.3l-5.4 3.2 1.4-6L3 9.8l6.2-.5L12 3l2.8 6.3 6.2.5-5 4.7 1.4 6z" fill="#111"></path>280 </svg>281 <svg width="42" height="42" viewBox="0 0 24 24">282 <path d="M12 17.3l-5.4 3.2 1.4-6L3 9.8l6.2-.5L12 3l2.8 6.3 6.2.5-5 4.7 1.4 6z" fill="#111"></path>283 </svg>284 <svg width="42" height="42" viewBox="0 0 24 24">285 <path d="M12 17.3l-5.4 3.2 1.4-6L3 9.8l6.2-.5L12 3l2.8 6.3 6.2.5-5 4.7 1.4 6z" fill="#111"></path>286 </svg>287 <svg width="42" height="42" viewBox="0 0 24 24">288 <defs>289 <clipPath id="half">290 <rect x="0" y="0" width="12" height="24"></rect>291 </clipPath>292 </defs>293 <path d="M12 17.3l-5.4 3.2 1.4-6L3 9.8l6.2-.5L12 3l2.8 6.3 6.2.5-5 4.7 1.4 6z" fill="#111" clip-path="url(#half)"></path>294 <path d="M12 17.3l-5.4 3.2 1.4-6L3 9.8l6.2-.5L12 3l2.8 6.3 6.2.5-5 4.7 1.4 6z" fill="none" stroke="#111" stroke-width="1.6"></path>295 </svg>296 </div>297 </div>298 <svg class="caret" viewBox="0 0 24 24">299 <path d="M6 9l6 6 6-6" stroke="#333" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>300 </svg>301 </div>302 303 <div class="section-row">304 <div class="section-title">Product Information</div>305 <svg class="caret" viewBox="0 0 24 24">306 <path d="M6 9l6 6 6-6" stroke="#333" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>307 </svg>308 </div>309 </div>310 </div>311 312 <!-- Bottom Share Icon -->313 <svg class="share" viewBox="0 0 24 24">314 <circle cx="6" cy="12" r="2.7" fill="#111"></circle>315 <circle cx="18" cy="6" r="2.7" fill="#111"></circle>316 <circle cx="18" cy="18" r="2.7" fill="#111"></circle>317 <path d="M8.7 12L15.3 7.8M8.7 12l6.6 4.2" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"></path>318 </svg>319 320</div>321</body>322</html>