GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Black Sneakers UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: 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 height: 88px;18 background: #000000;19 color: #ffffff;20 display: flex;21 align-items: center;22 padding: 0 32px;23 font-weight: 600;24 }25 .status-left { flex: 1; font-size: 36px; }26 .status-right { display: flex; gap: 28px; align-items: center; }27 .status-icon {28 width: 32px; height: 32px;29 display: inline-flex; align-items: center; justify-content: center;30 color: #fff;31 }32 33 /* Header */34 .header {35 height: 140px;36 display: flex;37 align-items: center;38 padding: 0 36px;39 border-bottom: 1px solid #eee;40 background: #fff;41 }42 .header-left, .header-right { display: flex; align-items: center; }43 .header-title {44 font-size: 48px;45 font-weight: 700;46 margin-left: 24px;47 flex: 1;48 }49 .icon-btn {50 width: 72px; height: 72px;51 display: inline-flex; align-items: center; justify-content: center;52 border-radius: 36px;53 background: #f5f5f5;54 margin-left: 18px;55 }56 57 /* Filter summary row */58 .summary-row {59 display: grid;60 grid-template-columns: 1fr 1fr;61 padding: 24px 36px 8px 36px;62 gap: 24px;63 color: #111;64 }65 .summary-block {66 background: #fff;67 }68 .summary-title {69 font-size: 38px;70 font-weight: 700;71 margin-bottom: 6px;72 }73 .summary-sub {74 font-size: 34px;75 color: #8c8c8c;76 }77 .summary-price {78 font-size: 38px;79 font-weight: 700;80 margin-top: 20px;81 }82 .dot-row {83 display: flex; gap: 22px; margin-top: 18px;84 }85 .dot {86 width: 28px; height: 28px; border-radius: 50%; border: 2px solid #cfcfcf;87 }88 89 /* Product grid */90 .grid {91 display: grid;92 grid-template-columns: 1fr 1fr;93 gap: 28px;94 padding: 20px 36px 140px 36px;95 }96 .card {97 background: #fafafa;98 border-radius: 18px;99 overflow: hidden;100 }101 .img-wrap {102 position: relative;103 height: 360px;104 background: #E0E0E0;105 border-bottom: 1px solid #d6d6d6;106 display: flex; align-items: center; justify-content: center;107 color: #757575; font-size: 28px; font-weight: 600;108 }109 .fav-btn {110 position: absolute;111 right: 20px; top: 20px;112 width: 84px; height: 84px;113 background: #fff; border-radius: 42px;114 display: flex; align-items: center; justify-content: center;115 box-shadow: 0 2px 6px rgba(0,0,0,0.1);116 }117 .card-body {118 padding: 24px;119 }120 .badge {121 color: #e35d3b;122 font-weight: 700;123 font-size: 34px;124 margin-bottom: 8px;125 }126 .title {127 font-size: 40px;128 font-weight: 700;129 margin-bottom: 10px;130 }131 .subtitle {132 font-size: 34px;133 color: #777;134 margin-bottom: 16px;135 }136 .price {137 font-size: 40px;138 font-weight: 700;139 margin-top: 6px;140 }141 .colors { display: flex; gap: 18px; margin-top: 22px; }142 .c-dot { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #bfbfbf; }143 .c-black { background: #171717; }144 .c-gray { background: #888; }145 .c-white { background: #fff; }146 .c-gold { background: #c9a243; }147 148 /* Floating filter button */149 .floating {150 position: absolute;151 right: 36px;152 bottom: 220px;153 width: 160px;154 height: 160px;155 border-radius: 80px;156 background: #fff;157 box-shadow: 0 12px 30px rgba(0,0,0,0.15);158 display: flex; align-items: center; justify-content: center;159 }160 161 /* Bottom home indicator */162 .home-indicator {163 position: absolute;164 bottom: 40px;165 left: 50%;166 transform: translateX(-50%);167 width: 320px;168 height: 16px;169 background: #000;170 border-radius: 8px;171 opacity: 0.18;172 }173</style>174</head>175<body>176<div id="render-target">177 178 <!-- Status Bar -->179 <div class="status-bar">180 <div class="status-left">1:24</div>181 <div class="status-right">182 <div class="status-icon">⌁</div>183 <div class="status-icon">✉</div>184 <div class="status-icon">!</div>185 <svg width="38" height="24" viewBox="0 0 38 24">186 <rect x="2" y="4" width="28" height="16" rx="3" stroke="#fff" fill="none" stroke-width="3"></rect>187 <rect x="30" y="9" width="6" height="6" rx="1" fill="#fff"></rect>188 </svg>189 <span style="font-size:30px; font-weight:700;">100%</span>190 </div>191 </div>192 193 <!-- Header -->194 <div class="header">195 <div class="header-left">196 <svg width="48" height="48" viewBox="0 0 24 24">197 <path d="M15 18l-6-6 6-6" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>198 </svg>199 <div class="header-title">Black sneakers</div>200 </div>201 <div class="header-right">202 <div class="icon-btn">203 <svg width="34" height="34" viewBox="0 0 24 24">204 <circle cx="11" cy="11" r="7" stroke="#111" stroke-width="2" fill="none"></circle>205 <path d="M20 20l-4.5-4.5" stroke="#111" stroke-width="2" stroke-linecap="round"></path>206 </svg>207 </div>208 <div class="icon-btn">209 <svg width="34" height="34" viewBox="0 0 24 24">210 <path d="M6 7h12l-1 12H7L6 7z" stroke="#111" stroke-width="2" fill="none"></path>211 <path d="M8 7V5a4 4 0 0 1 8 0v2" stroke="#111" stroke-width="2" fill="none"></path>212 </svg>213 </div>214 </div>215 </div>216 217 <!-- Summary / filter info -->218 <div class="summary-row">219 <div class="summary-block">220 <div class="summary-title">Nature</div>221 <div class="summary-sub">Women's Shoes</div>222 <div class="summary-price">$70</div>223 <div class="dot-row">224 <div class="dot"></div>225 <div class="dot"></div>226 </div>227 </div>228 <div class="summary-block" style="text-align:right;">229 <div class="summary-title" style="color:#b7b7b7;">Men's Shoes</div>230 <div class="summary-sub" style="color:#b7b7b7;"> </div>231 <div class="summary-price">$210</div>232 </div>233 </div>234 235 <!-- Products Grid -->236 <div class="grid">237 <!-- Card 1 -->238 <div class="card">239 <div class="img-wrap">240 [IMG: Black Nike Air Force 1]241 <div class="fav-btn">242 <svg width="42" height="42" viewBox="0 0 24 24">243 <path d="M12 21s-7-4.7-7-10a4.5 4.5 0 0 1 8-2.9A4.5 4.5 0 0 1 19 11c0 5.3-7 10-7 10z" fill="none" stroke="#111" stroke-width="2"></path>244 </svg>245 </div>246 </div>247 <div class="card-body">248 <div class="badge">Best Seller</div>249 <div class="title">Nike Air Force 1 '07</div>250 <div class="subtitle">Women's Shoes</div>251 <div class="price">$115</div>252 </div>253 </div>254 255 <!-- Card 2 -->256 <div class="card">257 <div class="img-wrap">258 [IMG: Black Nike Air Max LTD 3]259 <div class="fav-btn">260 <svg width="42" height="42" viewBox="0 0 24 24">261 <path d="M12 21s-7-4.7-7-10a4.5 4.5 0 0 1 8-2.9A4.5 4.5 0 0 1 19 11c0 5.3-7 10-7 10z" fill="none" stroke="#111" stroke-width="2"></path>262 </svg>263 </div>264 </div>265 <div class="card-body">266 <div class="title">Nike Air Max LTD 3</div>267 <div class="subtitle">Men's Shoes</div>268 <div class="price">$130</div>269 <div class="colors">270 <div class="c-dot c-black"></div>271 <div class="c-dot c-gray"></div>272 <div class="c-dot c-white"></div>273 </div>274 </div>275 </div>276 277 <!-- Card 3 -->278 <div class="card">279 <div class="img-wrap" style="height: 360px;">280 [IMG: White/Gold Nike Air Max Excee]281 <div class="fav-btn">282 <svg width="42" height="42" viewBox="0 0 24 24">283 <path d="M12 21s-7-4.7-7-10a4.5 4.5 0 0 1 8-2.9A4.5 4.5 0 0 1 19 11c0 5.3-7 10-7 10z" fill="none" stroke="#111" stroke-width="2"></path>284 </svg>285 </div>286 </div>287 <div class="card-body">288 <div class="title">Nike Air Max Excee</div>289 <div class="subtitle">Women's Shoes</div>290 <div class="price">$95</div>291 </div>292 </div>293 294 <!-- Card 4 -->295 <div class="card">296 <div class="img-wrap" style="height: 360px;">297 [IMG: Black Nike Revolution 6]298 <div class="fav-btn">299 <svg width="42" height="42" viewBox="0 0 24 24">300 <path d="M12 21s-7-4.7-7-10a4.5 4.5 0 0 1 8-2.9A4.5 4.5 0 0 1 19 11c0 5.3-7 10-7 10z" fill="none" stroke="#111" stroke-width="2"></path>301 </svg>302 </div>303 </div>304 <div class="card-body">305 <div class="title">Nike Revolution 6</div>306 <div class="subtitle">Men's Road Running Shoes</div>307 <div class="price">$</div>308 </div>309 </div>310 </div>311 312 <!-- Floating Filter Button -->313 <div class="floating">314 <svg width="80" height="80" viewBox="0 0 24 24">315 <path d="M4 6h16M7 12h10M10 18h6" stroke="#111" stroke-width="2.5" stroke-linecap="round"></path>316 </svg>317 </div>318 319 <!-- Bottom Home Indicator -->320 <div class="home-indicator"></div>321</div>322</body>323</html>