GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Adidas NMD Listing - Mock</title>5<style>6 body { margin:0; padding:0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width:1440px; height:3120px;9 position:relative; overflow:hidden;10 background:#ffffff;11 color:#111;12 }13 /* Top status bar */14 .status-bar {15 height:120px; padding:0 40px;16 display:flex; align-items:center; justify-content:space-between;17 color:#111; font-size:40px; letter-spacing:1px;18 }19 .status-right { display:flex; align-items:center; gap:28px; color:#555; }20 .dot { width:18px; height:18px; background:#111; border-radius:50%; display:inline-block; }21 /* Simple icons */22 .icon {23 width:64px; height:64px; display:inline-flex; align-items:center; justify-content:center;24 }25 .icon svg { width:56px; height:56px; }26 /* Nav bar with back + search */27 .nav-bar {28 height:120px; padding:0 32px; display:flex; align-items:center; justify-content:space-between;29 }30 .title-wrap { text-align:center; padding:10px 0 0 0; }31 .title { font-size:52px; font-weight:700; letter-spacing:3px; }32 .subtitle { font-size:34px; color:#6b6b6b; margin-top:8px; }33 /* Chips / filters */34 .filters {35 display:flex; align-items:center; gap:24px;36 padding:24px 40px 30px 40px;37 }38 .filter-icon {39 position:relative; width:100px; height:76px; border:2px solid #000; border-radius:12px;40 display:flex; align-items:center; justify-content:center;41 }42 .filter-icon::before, .filter-icon::after {43 content:""; position:absolute; width:52px; height:4px; background:#000; left:50%; transform:translateX(-50%);44 }45 .filter-icon::before { top:22px; }46 .filter-icon::after { bottom:22px; }47 .filter-badge {48 position:absolute; top:-16px; left:-16px; background:#000; color:#fff; width:48px; height:48px;49 border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:700;50 }51 .chip {52 padding:18px 36px; border:2px solid #d0d0d0; border-radius:14px; font-size:36px; color:#666; }53 .chip.selected { background:#000; color:#fff; border-color:#000; }54 /* Grid */55 .grid {56 display:grid; grid-template-columns: 1fr 1fr; gap:40px;57 padding:10px 40px 0 40px;58 }59 .card {60 background:#f7f7f7; border:1px solid #e6e6e6; border-radius:8px;61 padding:28px; position:relative; min-height:980px;62 }63 .img {64 width:100%; height:420px; background:#E0E0E0; border:1px solid #BDBDBD;65 border-radius:6px; display:flex; align-items:center; justify-content:center; color:#757575; font-size:38px;66 }67 .heart {68 position:absolute; top:34px; right:34px; width:72px; height:72px; display:flex; align-items:center; justify-content:center;69 background:#ffffffd9; border-radius:50%;70 box-shadow:0 1px 2px rgba(0,0,0,0.1);71 }72 .heart svg { width:44px; height:44px; }73 .label {74 display:inline-block; margin-top:28px; padding:16px 24px; font-size:28px; letter-spacing:3px;75 border-radius:8px;76 }77 .label.white { background:#fff; border:2px solid #000; color:#111; }78 .label.black { background:#111; color:#fff; }79 .price-row { margin-top:22px; display:flex; align-items:center; gap:24px; }80 .new-price { color:#e53935; font-size:44px; font-weight:700; }81 .old-price { color:#888; font-size:40px; text-decoration:line-through; }82 .name { font-size:46px; font-weight:700; margin-top:24px; }83 .category { font-size:36px; color:#555; margin-top:10px; }84 .colors { font-size:34px; color:#333; margin-top:12px; }85 .swatch { display:inline-block; width:12px; height:12px; border-radius:50%; margin-left:10px; }86 .sw1 { background:#1e88e5; } .sw2 { background:#ffb300; } .sw3 { background:#ef5350; }87 /* Bottom nav */88 .bottom-nav {89 position:absolute; left:0; right:0; bottom:120px; height:120px; border-top:1px solid #e9e9e9;90 display:flex; align-items:center; justify-content:space-around; background:#fff;91 }92 .bottom-item { display:flex; flex-direction:column; align-items:center; gap:6px; color:#666; font-size:28px; }93 .home-bar {94 position:absolute; left:50%; bottom:36px; transform:translateX(-50%);95 width:540px; height:16px; background:#cfcfcf; border-radius:10px;96 }97</style>98</head>99<body>100<div id="render-target">101 102 <!-- Status Bar -->103 <div class="status-bar">104 <div>2:20</div>105 <div class="status-right">106 <span class="dot"></span>107 <span>◢</span>108 <span>▮▮</span>109 </div>110 </div>111 112 <!-- Nav -->113 <div class="nav-bar">114 <div class="icon" aria-label="Back">115 <svg viewBox="0 0 24 24"><path d="M15.5 19L8.5 12l7-7" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>116 </div>117 <div class="icon" aria-label="Search">118 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="7" fill="none" stroke="#111" stroke-width="2"/><path d="M15 15l6 6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/></svg>119 </div>120 </div>121 122 <!-- Title -->123 <div class="title-wrap">124 <div class="title">MENS SHOES • NMD</div>125 <div class="subtitle">100 RESULTS</div>126 </div>127 128 <!-- Filters -->129 <div class="filters">130 <div class="filter-icon">131 <div class="filter-badge">1</div>132 </div>133 <div class="chip selected">NMD</div>134 <div class="chip">BOOST</div>135 <div class="chip">GORE-TEX</div>136 </div>137 138 <!-- Product Grid -->139 <div class="grid">140 141 <!-- Card 1 -->142 <div class="card">143 <div class="heart">144 <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.6-9.3-8.3C.8 9.8 2.3 6 6 6c2 0 3.2 1.2 4 2.3C10.8 7.2 12 6 14 6c3.7 0 5.2 3.8 3.3 6.7C19 16.4 12 21 12 21z" fill="none" stroke="#111" stroke-width="1.8"/></svg>145 </div>146 <div class="img">[IMG: White NMD_R1 Shoe]</div>147 <div class="label white">EARLY ACCESS BLACK FRIDAY</div>148 <div class="price-row">149 <div class="new-price">$90.00</div>150 <div class="old-price">$150.00</div>151 </div>152 <div class="name">NMD_R1 Shoes</div>153 <div class="category">Originals</div>154 <div class="colors">+37155 <span class="swatch sw1"></span>156 <span class="swatch sw2"></span>157 <span class="swatch sw3"></span>158 </div>159 </div>160 161 <!-- Card 2 -->162 <div class="card">163 <div class="heart">164 <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.6-9.3-8.3C.8 9.8 2.3 6 6 6c2 0 3.2 1.2 4 2.3C10.8 7.2 12 6 14 6c3.7 0 5.2 3.8 3.3 6.7C19 16.4 12 21 12 21z" fill="none" stroke="#111" stroke-width="1.8"/></svg>165 </div>166 <div class="img">[IMG: Black NMD_R1 Shoe]</div>167 <div class="label black">MEMBERS' PRICE</div>168 <div class="price-row">169 <div class="new-price">$120.00</div>170 <div class="old-price">$150.00</div>171 </div>172 <div class="name">NMD_R1 Shoes</div>173 <div class="category">Men's Originals</div>174 <div class="colors">+37175 <span class="swatch sw1"></span>176 <span class="swatch sw2"></span>177 <span class="swatch sw3"></span>178 </div>179 </div>180 181 <!-- Card 3 -->182 <div class="card">183 <div class="heart">184 <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.6-9.3-8.3C.8 9.8 2.3 6 6 6c2 0 3.2 1.2 4 2.3C10.8 7.2 12 6 14 6c3.7 0 5.2 3.8 3.3 6.7C19 16.4 12 21 12 21z" fill="none" stroke="#111" stroke-width="1.8"/></svg>185 </div>186 <div class="img">[IMG: NMD_R1.V2 White/Red Shoe]</div>187 <div class="label white">EARLY ACCESS BLACK FRIDAY</div>188 <div class="price-row">189 <div class="new-price">$68.00</div>190 <div class="old-price">$150.00</div>191 </div>192 <div class="name">NMD_R1.V2 Shoes</div>193 <div class="category">Men's Originals</div>194 <div class="colors">+6195 <span class="swatch sw1"></span>196 <span class="swatch sw2"></span>197 <span class="swatch sw3"></span>198 </div>199 </div>200 201 <!-- Card 4 -->202 <div class="card">203 <div class="heart">204 <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.6-9.3-8.3C.8 9.8 2.3 6 6 6c2 0 3.2 1.2 4 2.3C10.8 7.2 12 6 14 6c3.7 0 5.2 3.8 3.3 6.7C19 16.4 12 21 12 21z" fill="none" stroke="#111" stroke-width="1.8"/></svg>205 </div>206 <div class="img">[IMG: Olive NMD_R1 Shoe]</div>207 <div class="label black">MEMBERS' PRICE</div>208 <div class="price-row">209 <div class="new-price">$120.00</div>210 <div class="old-price">$150.00</div>211 </div>212 <div class="name">NMD_R1 Shoes</div>213 <div class="category">Men's Originals</div>214 <div class="colors">+38215 <span class="swatch sw1"></span>216 <span class="swatch sw2"></span>217 <span class="swatch sw3"></span>218 </div>219 </div>220 221 <!-- Additional placeholders to fill vertical space (not visible in screenshot but keep structure) -->222 <div class="card">223 <div class="heart">224 <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.6-9.3-8.3C.8 9.8 2.3 6 6 6c2 0 3.2 1.2 4 2.3C10.8 7.2 12 6 14 6c3.7 0 5.2 3.8 3.3 6.7C19 16.4 12 21 12 21z" fill="none" stroke="#111" stroke-width="1.8"/></svg>225 </div>226 <div class="img">[IMG: NMD Sneaker]</div>227 <div class="label white">EARLY ACCESS</div>228 <div class="price-row">229 <div class="new-price">$99.00</div>230 <div class="old-price">$150.00</div>231 </div>232 <div class="name">NMD_R1 Shoes</div>233 <div class="category">Men's Originals</div>234 <div class="colors">+24235 <span class="swatch sw1"></span>236 <span class="swatch sw2"></span>237 <span class="swatch sw3"></span>238 </div>239 </div>240 241 <div class="card">242 <div class="heart">243 <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.6-9.3-8.3C.8 9.8 2.3 6 6 6c2 0 3.2 1.2 4 2.3C10.8 7.2 12 6 14 6c3.7 0 5.2 3.8 3.3 6.7C19 16.4 12 21 12 21z" fill="none" stroke="#111" stroke-width="1.8"/></svg>244 </div>245 <div class="img">[IMG: Black NMD Sneaker]</div>246 <div class="label black">MEMBERS' PRICE</div>247 <div class="price-row">248 <div class="new-price">$120.00</div>249 <div class="old-price">$150.00</div>250 </div>251 <div class="name">NMD_R1 Shoes</div>252 <div class="category">Originals</div>253 <div class="colors">+12254 <span class="swatch sw1"></span>255 <span class="swatch sw2"></span>256 <span class="swatch sw3"></span>257 </div>258 </div>259 260 </div>261 262 <!-- Bottom Navigation -->263 <div class="bottom-nav">264 <div class="bottom-item">265 <svg class="icon" viewBox="0 0 24 24"><path d="M3 12l9-8 9 8v8h-6v-5H9v5H3z" fill="none" stroke="#666" stroke-width="1.8"/></svg>266 </div>267 <div class="bottom-item">268 <svg class="icon" viewBox="0 0 24 24"><circle cx="10" cy="10" r="7" fill="none" stroke="#666" stroke-width="1.8"/><path d="M15 15l6 6" stroke="#666" stroke-width="1.8" fill="none" stroke-linecap="round"/></svg>269 </div>270 <div class="bottom-item">271 <svg class="icon" viewBox="0 0 24 24"><path d="M12 21s-7-4.6-9.3-8.3C.8 9.8 2.3 6 6 6c2 0 3.2 1.2 4 2.3C10.8 7.2 12 6 14 6c3.7 0 5.2 3.8 3.3 6.7C19 16.4 12 21 12 21z" fill="none" stroke="#666" stroke-width="1.8"/></svg>272 </div>273 <div class="bottom-item">274 <svg class="icon" viewBox="0 0 24 24"><path d="M6 6h12l-1.5 12h-9L6 6zM9 6V4h6v2" fill="none" stroke="#666" stroke-width="1.8"/></svg>275 </div>276 </div>277 <div class="home-bar"></div>278 279</div>280</body>281</html>