GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Nike All Shoes - Grid</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width:1080px; height:2400px;11 position:relative; overflow:hidden;12 background:#ffffff; color:#111;13 }14 15 /* Status bar */16 .status-bar {17 height:120px; background:#000; color:#fff;18 display:flex; align-items:center; justify-content:space-between;19 padding:0 32px; font-size:34px; letter-spacing:0.5px;20 }21 .status-icons { display:flex; gap:22px; align-items:center; }22 .dot { width:10px; height:10px; background:#fff; border-radius:50%; opacity:0.8; }23 .pill-signal { width:34px; height:28px; border:3px solid #fff; border-radius:6px; position:relative; }24 .battery { width:44px; height:24px; border:3px solid #fff; border-radius:4px; position:relative; }25 .battery::after { content:""; position:absolute; right:-8px; top:6px; width:6px; height:12px; background:#fff; border-radius:2px; }26 27 /* Top bar */28 .topbar {29 height:150px; display:flex; align-items:center;30 padding:0 32px; border-bottom:1px solid #eee; background:#fff;31 }32 .icon-btn { width:96px; height:96px; display:flex; align-items:center; justify-content:center; background:transparent; border:none; }33 .title { font-size:48px; font-weight:700; margin-left:8px; }34 .actions { margin-left:auto; display:flex; gap:18px; }35 .icon { width:54px; height:54px; }36 37 /* Tabs */38 .tabs {39 display:flex; gap:48px; align-items:flex-end;40 padding:0 32px; height:110px; background:#fff;41 border-bottom:1px solid #e9e9e9;42 }43 .tab { font-size:38px; color:#7b7b7b; padding-bottom:24px; }44 .tab.active { color:#111; border-bottom:6px solid #111; padding-bottom:18px; }45 46 /* Grid */47 .grid {48 padding:18px 24px 180px 24px;49 display:flex; flex-wrap:wrap; gap:24px;50 background:#fff;51 }52 .card { width:calc(50% - 12px); }53 .img-wrap {54 position:relative; background:#fafafa; border:1px solid #e0e0e0; height:420px;55 display:flex; align-items:center; justify-content:center; color:#757575; font-size:32px;56 }57 .fav {58 position:absolute; top:18px; right:18px;59 width:84px; height:84px; background:#fff; border-radius:50%;60 display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,0.08);61 }62 .card .meta { padding:22px 8px 12px 8px; }63 .badge { color:#ff6a00; font-weight:700; font-size:32px; margin-bottom:6px; }64 .title-md { font-size:38px; font-weight:700; line-height:1.2; }65 .sub { color:#8a8a8a; font-size:32px; margin:8px 0 18px; }66 .price { font-size:34px; font-weight:600; margin-bottom:18px; }67 68 /* Color dots */69 .swatches { display:flex; gap:18px; align-items:center; padding:0 8px 24px; }70 .dot-swatch {71 width:26px; height:26px; border-radius:50%; border:2px solid #cfcfcf; background:#fff;72 }73 .dot-swatch.dark { background:#111; border-color:#111; }74 .dot-swatch.grey { background:#d9d9d9; }75 .dot-swatch.pastel { background:#eaeaea; }76 77 /* Floating filter button */78 .fab {79 position:absolute; right:40px; bottom:230px;80 width:140px; height:140px; background:#fff; border-radius:50%;81 box-shadow:0 10px 24px rgba(0,0,0,0.18);82 display:flex; align-items:center; justify-content:center;83 }84 85 /* Bottom navigation / home indicator area */86 .bottom-safe {87 position:absolute; left:0; right:0; bottom:0; height:120px; background:#000;88 display:flex; align-items:center; justify-content:center;89 }90 .home-pill { width:280px; height:14px; background:#cfcfcf; border-radius:8px; opacity:0.9; }91 92 /* Utility */93 .muted { color:#8a8a8a; }94</style>95</head>96<body>97<div id="render-target">98 99 <!-- Status bar -->100 <div class="status-bar">101 <div>9:15</div>102 <div class="status-icons">103 <div class="dot"></div>104 <div class="dot"></div>105 <div class="dot"></div>106 <div class="dot"></div>107 <div class="pill-signal"></div>108 <div class="battery"></div>109 </div>110 </div>111 112 <!-- Top app bar -->113 <div class="topbar">114 <button class="icon-btn" aria-label="Back">115 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">116 <path d="M15 18l-6-6 6-6"/>117 </svg>118 </button>119 <div class="title">All Shoes</div>120 <div class="actions">121 <div class="icon-btn" aria-label="Search">122 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2.4" stroke-linecap="round">123 <circle cx="11" cy="11" r="7"></circle>124 <path d="M20 20l-3.5-3.5"></path>125 </svg>126 </div>127 <div class="icon-btn" aria-label="Bag">128 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">129 <rect x="5" y="7" width="14" height="13" rx="2"></rect>130 <path d="M9 7a3 3 0 0 1 6 0"></path>131 </svg>132 </div>133 </div>134 </div>135 136 <!-- Tabs -->137 <div class="tabs">138 <div class="tab active">All</div>139 <div class="tab">Lifestyle</div>140 <div class="tab">Running</div>141 <div class="tab">Basketball</div>142 <div class="tab">Football</div>143 </div>144 145 <!-- Product grid -->146 <div class="grid">147 <!-- Card 1 -->148 <div class="card">149 <div class="img-wrap">150 [IMG: White sneaker with mint swoosh]151 <div class="fav">152 <svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="#111" stroke-width="2">153 <path d="M12 21s-6-4.35-6-9a3.5 3.5 0 0 1 7-1 3.5 3.5 0 0 1 7 1c0 4.65-6 9-6 9z"/>154 </svg>155 </div>156 </div>157 <div class="meta">158 <div class="badge">Just In</div>159 <div class="title-md">Nike Air Force 1 '07</div>160 <div class="sub">Women's Shoe</div>161 <div class="price">MRP : ₹ 8 195.00</div>162 </div>163 <div class="swatches">164 <span class="dot-swatch"></span>165 <span class="dot-swatch"></span>166 <span class="dot-swatch"></span>167 <span class="dot-swatch"></span>168 <span class="dot-swatch dark"></span>169 <span class="muted">+1</span>170 </div>171 </div>172 173 <!-- Card 2 -->174 <div class="card">175 <div class="img-wrap">176 [IMG: Air Force 1 Shadow pastel]177 <div class="fav">178 <svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="#111" stroke-width="2">179 <path d="M12 21s-6-4.35-6-9a3.5 3.5 0 0 1 7-1 3.5 3.5 0 0 1 7 1c0 4.65-6 9-6 9z"/>180 </svg>181 </div>182 </div>183 <div class="meta">184 <div class="title-md">Nike Air Force 1 Shadow</div>185 <div class="sub">Women's Shoes</div>186 <div class="price">MRP : ₹ 8 995.00</div>187 </div>188 <div class="swatches">189 <span class="dot-swatch pastel"></span>190 <span class="dot-swatch pastel"></span>191 <span class="dot-swatch pastel"></span>192 </div>193 </div>194 195 <!-- Card 3 -->196 <div class="card">197 <div class="img-wrap">198 [IMG: White Air Force 1]199 <div class="fav">200 <svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="#111" stroke-width="2">201 <path d="M12 21s-6-4.35-6-9a3.5 3.5 0 0 1 7-1 3.5 3.5 0 0 1 7 1c0 4.65-6 9-6 9z"/>202 </svg>203 </div>204 </div>205 <div class="meta">206 <div class="badge">Best Seller</div>207 <div class="title-md">Nike Air Force 1 '07 FlyEase</div>208 <div class="sub">Women's Shoes</div>209 <div class="price">MRP : ₹ 9 695.00</div>210 </div>211 </div>212 213 <!-- Card 4 -->214 <div class="card">215 <div class="img-wrap">216 [IMG: Nike Gamma Force, gold swoosh]217 <div class="fav">218 <svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="#111" stroke-width="2">219 <path d="M12 21s-6-4.35-6-9a3.5 3.5 0 0 1 7-1 3.5 3.5 0 0 1 7 1c0 4.65-6 9-6 9z"/>220 </svg>221 </div>222 </div>223 <div class="meta">224 <div class="badge">Just In</div>225 <div class="title-md">Nike Gamma Force</div>226 <div class="sub">Women's Shoes</div>227 <div class="price">MRP : ₹ 8 495.00</div>228 </div>229 <div class="swatches">230 <span class="dot-swatch grey"></span>231 <span class="dot-swatch pastel"></span>232 <span class="dot-swatch pastel"></span>233 </div>234 </div>235 </div>236 237 <!-- Floating filter action -->238 <div class="fab" aria-label="Filter">239 <svg viewBox="0 0 24 24" width="56" height="56" fill="none" stroke="#111" stroke-width="2.6" stroke-linecap="round">240 <path d="M4 7h16M8 12h8M10 17h4"/>241 <path d="M9 7v4M15 12v5"/>242 </svg>243 </div>244 245 <!-- Bottom home indicator area -->246 <div class="bottom-safe">247 <div class="home-pill"></div>248 </div>249 250</div>251</body>252</html>