GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>All Shoes - UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff;13 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;14 color: #111;15 }16 17 /* Status bar */18 .status-bar {19 height: 120px;20 background: #000;21 color: #fff;22 display: flex;23 align-items: center;24 padding: 0 36px;25 box-sizing: border-box;26 font-weight: 600;27 letter-spacing: 0.3px;28 }29 .status-left { font-size: 40px; }30 .status-center { flex: 1; display: flex; justify-content: center; align-items: center; gap: 26px; }31 .status-dot { width: 20px; height: 20px; background: #fff; border-radius: 50%; opacity: 0.85; }32 .status-right { display: flex; align-items: center; gap: 22px; }33 .wifi {34 width: 42px; height: 30px; position: relative;35 }36 .wifi:before, .wifi:after {37 content: ""; position: absolute; left: 0; right: 0; border: 3px solid #fff; border-radius: 50%;38 }39 .wifi:before { top: 0; bottom: 0; opacity: 0.6; }40 .wifi:after { top: 8px; bottom: 8px; opacity: 1; }41 .battery {42 width: 48px; height: 28px; border: 4px solid #fff; border-radius: 6px; position: relative;43 }44 .battery:after {45 content: ""; position: absolute; right: -10px; top: 8px; width: 8px; height: 12px; background: #fff; border-radius: 2px;46 }47 48 /* App bar */49 .app-bar {50 height: 160px;51 display: flex;52 align-items: center;53 padding: 0 36px;54 box-sizing: border-box;55 border-bottom: 1px solid #eee;56 background: #fff;57 }58 .icon-btn { width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; }59 .app-title {60 flex: 1;61 text-align: left;62 font-size: 54px;63 font-weight: 700;64 padding-left: 12px;65 }66 .actions { display: flex; gap: 20px; }67 68 /* Carousel dots */69 .carousel-dots {70 height: 80px;71 display: flex; align-items: center; justify-content: center;72 }73 .dot { width: 24px; height: 24px; border: 2px solid #cfcfcf; border-radius: 50%; margin: 0 12px; }74 75 /* Product grid */76 .grid {77 padding: 32px;78 box-sizing: border-box;79 display: flex; flex-wrap: wrap; gap: 32px;80 }81 .card {82 width: calc((100% - 32px)/2);83 background: #fff;84 border-radius: 8px;85 overflow: hidden;86 }87 .img {88 position: relative;89 width: 100%; height: 300px;90 background: #E0E0E0;91 border: 1px solid #BDBDBD;92 display: flex; align-items: center; justify-content: center;93 color: #757575; font-size: 30px;94 }95 .fav {96 position: absolute; right: 20px; top: 20px;97 width: 72px; height: 72px; border-radius: 36px;98 background: rgba(255,255,255,0.95);99 display: flex; align-items: center; justify-content: center;100 border: 1px solid #e0e0e0;101 }102 .text { padding: 28px; box-sizing: border-box; }103 .name { font-size: 40px; font-weight: 700; margin-bottom: 10px; }104 .desc { font-size: 30px; color: #777; line-height: 1.3; }105 .price { font-size: 34px; font-weight: 700; margin-top: 26px; }106 .badge {107 font-size: 28px; color: #d94c2b; font-weight: 700; margin-bottom: 6px;108 }109 110 /* Color dots row */111 .color-row { display: flex; align-items: center; gap: 18px; margin-top: 22px; }112 .swatch {113 width: 28px; height: 28px; border-radius: 50%;114 border: 2px solid #ccc;115 }116 .swatch.lg { width: 32px; height: 32px; }117 .more { font-size: 28px; color: #777; margin-left: 6px; }118 119 /* Floating filter button */120 .fab {121 position: absolute; right: 36px; bottom: 190px;122 width: 132px; height: 132px; border-radius: 50%;123 background: #fff; border: none;124 box-shadow: 0 10px 24px rgba(0,0,0,0.2);125 display: flex; align-items: center; justify-content: center;126 }127 128 /* Home indicator */129 .home-indicator {130 position: absolute; bottom: 40px; left: 50%;131 transform: translateX(-50%);132 width: 260px; height: 12px; background: #000; border-radius: 8px; opacity: 0.95;133 }134</style>135</head>136<body>137<div id="render-target">138 139 <!-- Status Bar -->140 <div class="status-bar">141 <div class="status-left">2:54</div>142 <div class="status-center">143 <div class="status-dot"></div>144 <div class="status-dot"></div>145 <div class="status-dot"></div>146 <div class="status-dot"></div>147 <div class="status-dot" style="opacity:0.5;"></div>148 </div>149 <div class="status-right">150 <div class="wifi"></div>151 <div class="battery"></div>152 </div>153 </div>154 155 <!-- App Bar -->156 <div class="app-bar">157 <button class="icon-btn" aria-label="Back">158 <svg width="48" height="48" viewBox="0 0 24 24">159 <path d="M14 5 L7 12 L14 19" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>160 </svg>161 </button>162 <div class="app-title">All Shoes</div>163 <div class="actions">164 <button class="icon-btn" aria-label="Search">165 <svg width="48" height="48" viewBox="0 0 24 24">166 <circle cx="10" cy="10" r="6.5" stroke="#111" stroke-width="2.2" fill="none"/>167 <path d="M15.5 15.5 L21 21" stroke="#111" stroke-width="2.2" stroke-linecap="round"/>168 </svg>169 </button>170 <button class="icon-btn" aria-label="Bag">171 <svg width="48" height="48" viewBox="0 0 24 24">172 <path d="M6 8 H18 L17 21 H7 L6 8 Z" stroke="#111" stroke-width="2" fill="none" stroke-linejoin="round"/>173 <path d="M9 8 C9 5.5 10.5 4 12 4 C13.5 4 15 5.5 15 8" stroke="#111" stroke-width="2" fill="none"/>174 </svg>175 </button>176 </div>177 </div>178 179 <!-- Carousel dots -->180 <div class="carousel-dots">181 <div class="dot"></div>182 <div class="dot"></div>183 </div>184 185 <!-- Product Grid -->186 <div class="grid">187 <!-- Card 1 -->188 <div class="card">189 <div class="img">190 [IMG: Aqua Nike Road Running Shoe]191 <div class="fav">192 <svg width="36" height="36" viewBox="0 0 24 24">193 <path d="M12 20 C10 18 4 14 4 9.5 C4 7 6 5 8.5 5 C10 5 11.2 5.8 12 7 C12.8 5.8 14 5 15.5 5 C18 5 20 7 20 9.5 C20 14 14 18 12 20 Z"194 stroke="#111" stroke-width="2" fill="none" stroke-linejoin="round"/>195 </svg>196 </div>197 </div>198 <div class="text">199 <div class="name">Nike Pegasus 40</div>200 <div class="desc">Women's Road Running Shoes</div>201 <div class="price">MRP : ₹ 11 895.00</div>202 <div class="color-row">203 <div class="swatch lg" style="background:#1f7a42;"></div>204 <div class="swatch lg" style="background:#e4d7bf;"></div>205 <div class="swatch lg" style="background:#efefef;"></div>206 <div class="swatch lg" style="background:#fff;"></div>207 <div class="more">+4</div>208 </div>209 </div>210 </div>211 212 <!-- Card 2 -->213 <div class="card">214 <div class="img">215 [IMG: Black & White Nike Dunk Low Shoe]216 <div class="fav">217 <svg width="36" height="36" viewBox="0 0 24 24">218 <path d="M12 20 C10 18 4 14 4 9.5 C4 7 6 5 8.5 5 C10 5 11.2 5.8 12 7 C12.8 5.8 14 5 15.5 5 C18 5 20 7 20 9.5 C20 14 14 18 12 20 Z"219 stroke="#111" stroke-width="2" fill="none" stroke-linejoin="round"/>220 </svg>221 </div>222 </div>223 <div class="text">224 <div class="badge">Just In</div>225 <div class="name">Nike Dunk Low Twist</div>226 <div class="desc">Women's Shoes</div>227 <div class="price">MRP : ₹ 9 695.00</div>228 </div>229 </div>230 231 <!-- Card 3 -->232 <div class="card">233 <div class="img">234 [IMG: Aqua Nike Invincible Road Running Shoe]235 <div class="fav">236 <svg width="36" height="36" viewBox="0 0 24 24">237 <path d="M12 20 C10 18 4 14 4 9.5 C4 7 6 5 8.5 5 C10 5 11.2 5.8 12 7 C12.8 5.8 14 5 15.5 5 C18 5 20 7 20 9.5 C20 14 14 18 12 20 Z"238 stroke="#111" stroke-width="2" fill="none" stroke-linejoin="round"/>239 </svg>240 </div>241 </div>242 <div class="text">243 <div class="name">Nike Invincible 3</div>244 <div class="desc">Women's Road Running Shoes</div>245 <div class="price">MRP : ₹ 16 995.00</div>246 <div class="color-row">247 <div class="swatch lg" style="background:#1f7a42;"></div>248 <div class="swatch lg" style="background:#efefef;"></div>249 <div class="swatch lg" style="background:#111;"></div>250 <div class="swatch lg" style="background:#f5f5f5;"></div>251 <div class="swatch lg" style="background:#e6b6e8;"></div>252 <div class="more">+2</div>253 </div>254 </div>255 </div>256 257 <!-- Card 4 -->258 <div class="card">259 <div class="img">260 [IMG: Beige Nike Dunk Low LX NBHD Shoe]261 <div class="fav">262 <svg width="36" height="36" viewBox="0 0 24 24">263 <path d="M12 20 C10 18 4 14 4 9.5 C4 7 6 5 8.5 5 C10 5 11.2 5.8 12 7 C12.8 5.8 14 5 15.5 5 C18 5 20 7 20 9.5 C20 14 14 18 12 20 Z"264 stroke="#111" stroke-width="2" fill="none" stroke-linejoin="round"/>265 </svg>266 </div>267 </div>268 <div class="text">269 <div class="name">Nike Dunk Low LX NBHD</div>270 <div class="desc">Women's Shoes</div>271 <div class="price">MRP : ₹ 10 795.00</div>272 </div>273 </div>274 </div>275 276 <!-- Floating filter FAB -->277 <button class="fab" aria-label="Filter & Sort">278 <svg width="56" height="56" viewBox="0 0 24 24">279 <path d="M4 6 H18" stroke="#111" stroke-width="2.2" stroke-linecap="round"/>280 <circle cx="8" cy="6" r="1.5" fill="#111"/>281 <path d="M4 12 H18" stroke="#111" stroke-width="2.2" stroke-linecap="round"/>282 <circle cx="14" cy="12" r="1.5" fill="#111"/>283 <path d="M4 18 H18" stroke="#111" stroke-width="2.2" stroke-linecap="round"/>284 <circle cx="11" cy="18" r="1.5" fill="#111"/>285 </svg>286 </button>287 288 <!-- Home indicator -->289 <div class="home-indicator"></div>290</div>291</body>292</html>