GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Sneakers Listing UI</title>5<style>6 body { margin:0; padding:0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background:#ffffff;10 }11 12 /* Status bar */13 .status-bar {14 height:82px; padding:0 32px; display:flex; align-items:center; justify-content:space-between;15 color:#222; font-weight:600; font-size:34px;16 }17 .status-right { display:flex; align-items:center; gap:24px; font-size:30px; color:#666; }18 .status-dot { width:18px; height:18px; border-radius:50%; background:#666; display:inline-block; }19 .battery { display:flex; align-items:center; gap:10px; font-size:28px; color:#111; }20 .battery svg { width:44px; height:24px; }21 22 /* Toolbar */23 .toolbar {24 height:120px; border-bottom:1px solid #eee; display:flex; align-items:center; padding:0 24px;25 }26 .toolbar .title {27 flex:1; text-align:center; font-size:40px; letter-spacing:1px; font-weight:700; color:#111;28 }29 .icon-btn { width:72px; height:72px; display:flex; align-items:center; justify-content:center; }30 .icon-btn svg { width:44px; height:44px; }31 32 .subhead { text-align:center; font-size:30px; color:#666; margin:14px 0 24px; }33 34 /* Filters */35 .filters {36 display:flex; align-items:center; gap:18px; padding:0 24px 24px;37 border-bottom:1px solid #eee;38 }39 .filter-icon {40 width:76px; height:76px; border:1px solid #ddd; border-radius:16px; display:flex; align-items:center; justify-content:center;41 }42 .chip {43 padding:16px 28px; border:2px solid #ddd; border-radius:14px; color:#666; font-weight:700; letter-spacing:0.5px; font-size:28px;44 background:#f7f7f7;45 }46 47 /* Grid of products */48 .grid {49 display:grid; grid-template-columns:1fr 1fr; gap:24px;50 padding:24px;51 }52 .card {53 background:#fff; border:1px solid #e6e6e6; border-radius:14px; overflow:hidden;54 position:relative;55 }56 .img {57 height:330px; background:#E0E0E0; border-bottom:1px solid #BDBDBD;58 display:flex; align-items:center; justify-content:center; color:#757575; font-size:28px;59 }60 .heart {61 position:absolute; right:26px; top:22px; width:60px; height:60px; display:flex; align-items:center; justify-content:center;62 background:rgba(255,255,255,0.9); border-radius:30px; border:1px solid #ddd;63 }64 .heart svg { width:34px; height:34px; }65 66 .content { padding:24px; }67 .tag-row { display:flex; align-items:center; gap:14px; margin-bottom:14px; }68 .ar-badge {69 width:48px; height:48px; border-radius:12px; background:#111; color:#fff; font-size:22px; display:flex; align-items:center; justify-content:center;70 }71 .label {72 font-size:26px; letter-spacing:1px; font-weight:800; padding:10px 16px; border-radius:10px;73 }74 .label.black { background:#000; color:#fff; }75 .label.white { background:#fff; color:#000; border:2px solid #000; }76 .price-row { display:flex; align-items:center; gap:18px; margin:8px 0 10px; }77 .price { font-size:32px; font-weight:800; color:#111; }78 .price.sale { color:#e53935; }79 .strike { font-size:28px; color:#777; text-decoration:line-through; }80 .name { font-size:34px; font-weight:800; color:#111; margin:8px 0; }81 .category { font-size:28px; color:#555; margin-bottom:16px; }82 .colors { display:flex; align-items:center; gap:10px; color:#444; font-size:26px; }83 .dot { width:18px; height:18px; border-radius:50%; }84 .dot.c1 { background:#ff6f00; }85 .dot.c2 { background:#1976d2; }86 .dot.c3 { background:#43a047; }87 88 /* Bottom nav */89 .bottom-nav {90 position:absolute; left:0; right:0; bottom:70px; height:120px; border-top:1px solid #eaeaea;91 display:flex; align-items:center; justify-content:space-around; background:#fff;92 }93 .nav-item { width:110px; height:110px; display:flex; align-items:center; justify-content:center; color:#777; }94 .nav-item svg { width:58px; height:58px; }95 .home-indicator {96 position:absolute; left:50%; transform:translateX(-50%);97 bottom:22px; width:360px; height:12px; background:#c7c7c7; border-radius:6px;98 }99</style>100</head>101<body>102<div id="render-target">103 104 <!-- Status Bar -->105 <div class="status-bar">106 <div>5:41</div>107 <div class="status-right">108 <span class="status-dot"></span>109 <span class="status-dot"></span>110 <span class="status-dot"></span>111 <div class="battery">112 <svg viewBox="0 0 24 24">113 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#333" stroke-width="2"></rect>114 <rect x="4" y="8" width="14" height="8" fill="#4caf50"></rect>115 <rect x="20" y="9" width="2" height="6" fill="#333"></rect>116 </svg>117 <span>100%</span>118 </div>119 </div>120 </div>121 122 <!-- Toolbar -->123 <div class="toolbar">124 <div class="icon-btn">125 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">126 <path d="M15 18l-6-6 6-6"></path>127 </svg>128 </div>129 <div class="title">42-SIZE BLACK SNEAKERS</div>130 <div class="icon-btn">131 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">132 <circle cx="11" cy="11" r="7"></circle>133 <path d="M21 21l-4.3-4.3"></path>134 </svg>135 </div>136 </div>137 138 <div class="subhead">1431 RESULTS</div>139 140 <!-- Filters -->141 <div class="filters">142 <div class="filter-icon">143 <svg viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round">144 <path d="M4 7h16"></path>145 <circle cx="8" cy="7" r="2" fill="#333"></circle>146 <path d="M4 12h16"></path>147 <circle cx="14" cy="12" r="2" fill="#333"></circle>148 <path d="M4 17h16"></path>149 <circle cx="10" cy="17" r="2" fill="#333"></circle>150 </svg>151 </div>152 <div class="chip">MEN</div>153 <div class="chip">WOMEN</div>154 <div class="chip">KIDS</div>155 <div class="chip">UNISEX</div>156 </div>157 158 <!-- Product Grid -->159 <div class="grid">160 161 <!-- Card 1 -->162 <div class="card">163 <div class="img">[IMG: Black Samba OG Shoe]</div>164 <div class="heart">165 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">166 <path d="M12 21s-6.5-4.3-9-8.2C1.3 10.1 3 7 6.3 7c2 0 3.2 1.2 3.7 2.1.5-.9 1.7-2.1 3.7-2.1C17 7 18.7 10.1 21 12.8c-2.5 3.9-9 8.2-9 8.2z"></path>167 </svg>168 </div>169 <div class="content">170 <div class="tag-row">171 <div class="ar-badge">AR</div>172 <div class="label white">BEST SELLER</div>173 </div>174 <div class="price-row">175 <div class="price">$100.00</div>176 </div>177 <div class="name">Samba OG Shoes</div>178 <div class="category">Women's Originals</div>179 <div class="colors"><span>+9</span><span class="dot c1"></span><span class="dot c2"></span><span class="dot c3"></span></div>180 </div>181 </div>182 183 <!-- Card 2 -->184 <div class="card">185 <div class="img">[IMG: Black X_PLRBOOST Shoe]</div>186 <div class="heart">187 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">188 <path d="M12 21s-6.5-4.3-9-8.2C1.3 10.1 3 7 6.3 7c2 0 3.2 1.2 3.7 2.1.5-.9 1.7-2.1 3.7-2.1C17 7 18.7 10.1 21 12.8c-2.5 3.9-9 8.2-9 8.2z"></path>189 </svg>190 </div>191 <div class="content">192 <div class="tag-row">193 <div class="ar-badge">AR</div>194 <div class="label black">MEMBERS' PRICE</div>195 </div>196 <div class="price-row">197 <div class="price sale">$48.00</div>198 <div class="strike">$160.00</div>199 </div>200 <div class="name">X_PLRBOOST Shoes</div>201 <div class="category">Men's Sportswear</div>202 <div class="colors"><span>+17</span><span class="dot c1"></span><span class="dot c2"></span><span class="dot c3"></span></div>203 </div>204 </div>205 206 <!-- Card 3 -->207 <div class="card">208 <div class="img">[IMG: Black Samba OG Shoe]</div>209 <div class="heart">210 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">211 <path d="M12 21s-6.5-4.3-9-8.2C1.3 10.1 3 7 6.3 7c2 0 3.2 1.2 3.7 2.1.5-.9 1.7-2.1 3.7-2.1C17 7 18.7 10.1 21 12.8c-2.5 3.9-9 8.2-9 8.2z"></path>212 </svg>213 </div>214 <div class="content">215 <div class="tag-row">216 <div class="ar-badge">AR</div>217 <div class="label white">BEST SELLER</div>218 </div>219 <div class="price-row">220 <div class="price">$100.00</div>221 </div>222 <div class="name">Samba OG Shoes</div>223 <div class="category">Originals</div>224 <div class="colors"><span>+9</span><span class="dot c1"></span><span class="dot c2"></span><span class="dot c3"></span></div>225 </div>226 </div>227 228 <!-- Card 4 -->229 <div class="card">230 <div class="img">[IMG: Black Swift Run 1.0 Shoe]</div>231 <div class="heart">232 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">233 <path d="M12 21s-6.5-4.3-9-8.2C1.3 10.1 3 7 6.3 7c2 0 3.2 1.2 3.7 2.1.5-.9 1.7-2.1 3.7-2.1C17 7 18.7 10.1 21 12.8c-2.5 3.9-9 8.2-9 8.2z"></path>234 </svg>235 </div>236 <div class="content">237 <div class="tag-row">238 <div class="ar-badge">AR</div>239 <div class="label black">EARLY ACCESS BLACK FRIDAY</div>240 </div>241 <div class="price-row">242 <div class="price sale">$54.00</div>243 <div class="strike">$90.00</div>244 </div>245 <div class="name">Swift Run 1.0 Shoes</div>246 <div class="category">Men's Sportswear</div>247 <div class="colors"><span>+5</span><span class="dot c1"></span><span class="dot c2"></span><span class="dot c3"></span></div>248 </div>249 </div>250 251 </div>252 253 <!-- Bottom Navigation -->254 <div class="bottom-nav">255 <div class="nav-item">256 <!-- Fire icon -->257 <svg viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">258 <path d="M12 3c2 2 3 3.5 3 6 0 2-1 3.5-3 4-2-0.5-3-2-3-4 0-2.5 1-4 3-6z"></path>259 <path d="M6 14c0 3.5 2.7 6 6 6s6-2.5 6-6"></path>260 </svg>261 </div>262 <div class="nav-item">263 <!-- Search -->264 <svg viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2">265 <circle cx="11" cy="11" r="7"></circle>266 <path d="M21 21l-4.3-4.3"></path>267 </svg>268 </div>269 <div class="nav-item">270 <!-- Heart -->271 <svg viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2">272 <path d="M12 21s-6.5-4.3-9-8.2C1.3 10.1 3 7 6.3 7c2 0 3.2 1.2 3.7 2.1.5-.9 1.7-2.1 3.7-2.1C17 7 18.7 10.1 21 12.8c-2.5 3.9-9 8.2-9 8.2z"></path>273 </svg>274 </div>275 <div class="nav-item">276 <!-- Bag -->277 <svg viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">278 <path d="M6 8h12l-1 12H7L6 8z"></path>279 <path d="M9 8V6a3 3 0 0 1 6 0v2"></path>280 </svg>281 </div>282 <div class="nav-item">283 <!-- Order/receipt -->284 <svg viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">285 <rect x="5" y="3" width="14" height="18" rx="2"></rect>286 <path d="M8 8h8M8 12h8M8 16h6"></path>287 </svg>288 </div>289 </div>290 <div class="home-indicator"></div>291 292</div>293</body>294</html>