GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Nike Product Page UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, 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: 120px;22 background: #0A0A0A;23 color: #fff;24 display: flex;25 align-items: center;26 padding: 0 40px;27 box-sizing: border-box;28 font-size: 38px;29 letter-spacing: 0.5px;30 }31 .status-spacer { flex: 1; }32 .status-icons { display: flex; align-items: center; gap: 28px; }33 .icon {34 width: 40px; height: 40px;35 display: inline-flex; align-items: center; justify-content: center;36 }37 .battery {38 width: 80px; height: 40px; border: 3px solid #fff; border-radius: 6px; position: relative; margin-left: 8px;39 }40 .battery::after { content: ""; position: absolute; right: -12px; top: 12px; width: 8px; height: 16px; background: #fff; border-radius: 2px; }41 .battery .level { position: absolute; left: 4px; top: 4px; bottom: 4px; width: 52%; background: #fff; }42 43 /* Page header */44 .page-header {45 position: absolute;46 top: 120px;47 left: 0;48 width: 1080px;49 height: 150px;50 display: flex;51 align-items: center;52 padding: 0 40px;53 box-sizing: border-box;54 color: #111;55 background: #fff;56 }57 .back-btn { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; margin-right: 20px; }58 .title { font-size: 58px; font-weight: 700; }59 .actions { margin-left: auto; display: flex; align-items: center; gap: 34px; }60 .bag { position: relative; }61 .bag .badge {62 position: absolute; top: -6px; right: -8px;63 background: #000; color: #fff; font-size: 28px; line-height: 32px;64 padding: 0 14px; border-radius: 20px; border: 2px solid #fff;65 }66 67 /* Content */68 .content {69 position: absolute;70 top: 270px;71 left: 0;72 width: 100%;73 padding: 0 40px;74 box-sizing: border-box;75 color: #1d1d1d;76 }77 .desc {78 font-size: 38px;79 line-height: 56px;80 margin-bottom: 30px;81 }82 .bullets {83 margin: 20px 0 30px 0;84 padding-left: 34px;85 font-size: 40px;86 line-height: 64px;87 }88 .link {89 font-size: 40px;90 color: #6b6b6b;91 margin: 10px 0 40px 2px;92 }93 94 /* Select & buttons */95 .pill {96 width: 100%;97 height: 140px;98 border: 2px solid #e4e4e4;99 border-radius: 100px;100 display: flex;101 align-items: center;102 justify-content: space-between;103 padding: 0 44px;104 box-sizing: border-box;105 font-size: 46px;106 color: #111;107 margin-bottom: 40px;108 background: #fff;109 }110 .caret {111 width: 36px; height: 36px; margin-left: 10px;112 }113 .cta {114 background: #0A0A0A;115 color: #fff;116 border: none;117 height: 160px;118 border-radius: 100px;119 font-size: 54px;120 font-weight: 700;121 display: flex; align-items: center; justify-content: center;122 margin-bottom: 36px;123 box-shadow: 0 8px 16px rgba(0,0,0,0.1);124 }125 .secondary {126 height: 140px;127 border-radius: 100px;128 border: 2px solid #e4e4e4;129 background: #fff;130 color: #111;131 font-size: 48px;132 display: flex; align-items: center; justify-content: center;133 gap: 24px;134 margin-bottom: 40px;135 }136 .heart {137 width: 50px; height: 50px;138 }139 140 /* Sections */141 .section-row {142 width: 100%;143 height: 120px;144 border-top: 1px solid #eee;145 display: flex;146 align-items: center;147 justify-content: space-between;148 box-sizing: border-box;149 padding: 0 12px 0 0;150 margin-top: 10px;151 }152 .section-title {153 font-size: 56px;154 padding-left: 0;155 color: #111;156 }157 .chevron-right { width: 36px; height: 36px; }158 159 .reviews {160 display: flex; align-items: center; gap: 18px; font-size: 56px;161 }162 .stars {163 margin-left: 12px;164 display: inline-flex;165 gap: 20px;166 }167 .star {168 width: 50px; height: 50px;169 }170 .half-star {171 width: 50px; height: 50px;172 }173 174 /* Share */175 .share {176 position: absolute;177 bottom: 100px;178 left: 50%;179 transform: translateX(-50%);180 width: 80px; height: 80px;181 color: #111;182 }183</style>184</head>185<body>186<div id="render-target">187 188 <!-- Status Bar -->189 <div class="status-bar">190 <div>9:42</div>191 <div class="status-spacer"></div>192 <div class="status-icons">193 <!-- small circle-minus icon -->194 <svg class="icon" viewBox="0 0 24 24" fill="#fff">195 <circle cx="12" cy="12" r="10" stroke="#fff" stroke-width="2" fill="none"></circle>196 <rect x="6" y="11" width="12" height="2" fill="#fff"></rect>197 </svg>198 <!-- wifi/connection icon -->199 <svg class="icon" viewBox="0 0 24 24" fill="#fff">200 <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>201 <path d="M5 12c4-3 10-3 14 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>202 <path d="M9 16c2-2 4-2 6 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>203 <circle cx="12" cy="19" r="1.6" fill="#fff"></circle>204 </svg>205 <!-- battery -->206 <div class="battery"><div class="level"></div></div>207 <div style="font-size:34px;">52%</div>208 </div>209 </div>210 211 <!-- Page Header -->212 <div class="page-header">213 <div class="back-btn">214 <svg viewBox="0 0 24 24" width="48" height="48">215 <path d="M15 5l-7 7 7 7" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>216 </svg>217 </div>218 <div class="title">Nike Air Max 97</div>219 <div class="actions">220 <!-- search -->221 <svg viewBox="0 0 24 24" width="54" height="54">222 <circle cx="11" cy="11" r="7" stroke="#111" stroke-width="2.5" fill="none"></circle>223 <path d="M20 20l-4.5-4.5" stroke="#111" stroke-width="2.5" stroke-linecap="round"></path>224 </svg>225 <!-- bag icon -->226 <div class="bag">227 <svg viewBox="0 0 24 24" width="58" height="58">228 <path d="M6 9h12l-1 11H7L6 9z" stroke="#111" stroke-width="2.2" fill="none"></path>229 <path d="M9 9V7a3 3 0 016 0v2" stroke="#111" stroke-width="2.2" fill="none" stroke-linecap="round"></path>230 </svg>231 <div class="badge">3</div>232 </div>233 </div>234 </div>235 236 <!-- Content -->237 <div class="content">238 <div class="desc">239 the running world and adding fresh colours and<br>240 crisp details, it lets you ride in first-class comfort.241 </div>242 243 <ul class="bullets">244 <li>Shown: Black/Anthracite/Picante Red</li>245 <li>Style: 921826-018</li>246 <li>Country/Region of Origin: Vietnam</li>247 </ul>248 249 <div class="link">View Product Details</div>250 251 <div class="pill">252 <div>Size UK 7</div>253 <svg class="caret" viewBox="0 0 24 24">254 <path d="M6 9l6 6 6-6" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>255 </svg>256 </div>257 258 <div class="cta">Add to Bag</div>259 260 <div class="secondary">261 <div>Favorite</div>262 <svg class="heart" viewBox="0 0 24 24">263 <path d="M12 20s-7-4.4-7-9.2C5 7 6.8 5.2 9 5.2c1.7 0 3 1 3 1s1.3-1 3-1c2.2 0 4 1.8 4 5.6C19 15.6 12 20 12 20z" stroke="#111" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>264 </svg>265 </div>266 267 <div class="section-row">268 <div class="section-title">Size & Fit</div>269 <svg class="chevron-right" viewBox="0 0 24 24">270 <path d="M9 6l6 6-6 6" stroke="#555" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>271 </svg>272 </div>273 274 <div class="section-row" style="border-top: none; margin-top: 20px;">275 <div class="reviews">276 <div>Reviews (150)</div>277 <div class="stars">278 <!-- 5 black stars to approximate rating -->279 <svg class="star" viewBox="0 0 24 24">280 <path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 7.3L12 18l-6.2 3.5 1.2-7.3-5-4.9 6.9-1z" fill="#111"></path>281 </svg>282 <svg class="star" viewBox="0 0 24 24">283 <path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 7.3L12 18l-6.2 3.5 1.2-7.3-5-4.9 6.9-1z" fill="#111"></path>284 </svg>285 <svg class="star" viewBox="0 0 24 24">286 <path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 7.3L12 18l-6.2 3.5 1.2-7.3-5-4.9 6.9-1z" fill="#111"></path>287 </svg>288 <svg class="star" viewBox="0 0 24 24">289 <path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 7.3L12 18l-6.2 3.5 1.2-7.3-5-4.9 6.9-1z" fill="#111"></path>290 </svg>291 <svg class="star" viewBox="0 0 24 24">292 <path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 7.3L12 18l-6.2 3.5 1.2-7.3-5-4.9 6.9-1z" fill="#111"></path>293 </svg>294 </div>295 </div>296 <svg class="chevron-right" viewBox="0 0 24 24">297 <path d="M9 6l6 6-6 6" stroke="#555" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>298 </svg>299 </div>300 301 <div class="section-row">302 <div class="section-title">Product Information</div>303 <svg class="chevron-right" viewBox="0 0 24 24">304 <path d="M9 6l6 6-6 6" stroke="#555" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>305 </svg>306 </div>307 </div>308 309 <!-- Share icon at bottom center -->310 <svg class="share" viewBox="0 0 24 24">311 <circle cx="6" cy="17" r="3" fill="none" stroke="#111" stroke-width="2"></circle>312 <circle cx="18" cy="7" r="3" fill="none" stroke="#111" stroke-width="2"></circle>313 <circle cx="18" cy="17" r="3" fill="none" stroke="#111" stroke-width="2"></circle>314 <path d="M8.7 15l6.6-6M8.7 19l6.6-2" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"></path>315 </svg>316 317</div>318</body>319</html>