GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Nike All Shoes - Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #111; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden; background: #ffffff;11 }12 13 /* Status bar */14 .status-bar {15 position: absolute; top: 0; left: 0; right: 0;16 height: 110px; background: #000; color: #fff;17 display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 40px;18 }19 .status-icons {20 position: absolute; right: 24px; top: 0; height: 110px; display: flex; align-items: center; gap: 20px;21 }22 .status-dot { width: 14px; height: 14px; background: #fff; border-radius: 50%; opacity: .9; }23 .tri { width: 44px; height: 34px; border: 5px solid #fff; border-top-color: transparent; border-left-color: transparent; transform: rotate(45deg); border-radius: 6px; opacity: .95; }24 .battery {25 width: 54px; height: 28px; border: 4px solid #fff; border-radius: 6px; position: relative;26 }27 .battery:after { content: ""; position: absolute; right: -10px; top: 6px; width: 6px; height: 16px; background: #fff; border-radius: 2px; }28 29 /* Header */30 .app-bar {31 position: absolute; top: 110px; left: 0; right: 0; height: 140px; background: #fff;32 display: flex; align-items: center; padding: 0 32px; border-bottom: 1px solid #e9e9e9;33 }34 .app-title { font-size: 44px; font-weight: 700; margin-left: 24px; }35 .app-actions { margin-left: auto; display: flex; align-items: center; gap: 36px; }36 .icon-btn { width: 80px; height: 80px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; }37 .icon { width: 44px; height: 44px; }38 39 /* Scroll area */40 .content {41 position: absolute; top: 250px; left: 0; right: 0; bottom: 120px; overflow-y: auto;42 -webkit-overflow-scrolling: touch;43 }44 45 /* Grid */46 .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; padding: 36px; }47 48 .brief {49 padding: 10px 6px 10px 6px;50 }51 .brief .title { font-size: 40px; font-weight: 700; }52 .brief .subtitle { font-size: 32px; color: #777; margin-top: 8px; }53 .brief .price { font-size: 36px; font-weight: 700; margin-top: 22px; }54 .swatches { display: flex; align-items: center; gap: 16px; margin-top: 18px; }55 .swatch {56 width: 28px; height: 28px; border-radius: 50%; border: 2px solid #d0d0d0; box-shadow: inset 0 0 0 2px rgba(0,0,0,0.02);57 }58 .divider { height: 16px; background: #f2f2f2; grid-column: 1 / -1; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }59 60 /* Product card with image */61 .card {62 background: #fff;63 }64 .img-wrap {65 position: relative; width: 100%; height: 420px; background: #E0E0E0; border: 1px solid #BDBDBD;66 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 36px;67 }68 .fav {69 position: absolute; right: 20px; top: 20px; width: 92px; height: 92px;70 background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.12); border: 1px solid #eee;71 }72 .meta { padding: 18px 6px; }73 .badge { color: #e34b2e; font-weight: 700; font-size: 32px; margin-bottom: 8px; }74 .name { font-size: 38px; font-weight: 700; line-height: 1.2; }75 .cat { color: #777; font-size: 32px; margin-top: 6px; }76 .price-row { font-size: 36px; font-weight: 700; margin-top: 16px; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }77 .strike { color: #9d9d9d; text-decoration: line-through; font-weight: 600; }78 79 /* Floating filter button */80 .fab {81 position: absolute; right: 36px; bottom: 210px; width: 140px; height: 140px; background: #fff;82 border-radius: 50%; display: flex; align-items: center; justify-content: center;83 box-shadow: 0 8px 24px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.12);84 border: 1px solid #eee;85 }86 87 /* Bottom safe area */88 .bottom-bar {89 position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: #000;90 }91 .home-pill {92 position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);93 width: 340px; height: 12px; background: #fff; opacity: .9; border-radius: 12px;94 }95 96 /* Helper colors for swatches */97 .c-white { background: #fff; }98 .c-beige { background: #e8ddd3; }99 .c-black { background: #000; border-color: #000; }100 .c-pink { background: #e9a5d6; }101 .c-green { background: #0e7c54; }102 .c-grey { background: #cfcfcf; }103</style>104</head>105<body>106<div id="render-target">107 108 <!-- Status bar -->109 <div class="status-bar">110 2:54111 <div class="status-icons">112 <div class="status-dot"></div>113 <div class="status-dot"></div>114 <div class="status-dot"></div>115 <div class="status-dot"></div>116 <div class="status-dot"></div>117 <div class="tri"></div>118 <div class="battery"></div>119 </div>120 </div>121 122 <!-- App bar -->123 <div class="app-bar">124 <div class="icon-btn" aria-label="Back">125 <svg class="icon" viewBox="0 0 24 24">126 <path d="M15.5 19.5L8 12l7.5-7.5" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>127 </svg>128 </div>129 <div class="app-title">All Shoes</div>130 <div class="app-actions">131 <div class="icon-btn" aria-label="Search">132 <svg class="icon" viewBox="0 0 24 24">133 <circle cx="11" cy="11" r="7" fill="none" stroke="#111" stroke-width="2"/>134 <path d="M20 20l-3.5-3.5" stroke="#111" stroke-width="2" stroke-linecap="round"/>135 </svg>136 </div>137 <div class="icon-btn" aria-label="Bag">138 <svg class="icon" viewBox="0 0 24 24">139 <path d="M6 7h12l-1 12H7L6 7z" fill="none" stroke="#111" stroke-width="2"/>140 <path d="M9 7a3 3 0 0 1 6 0" fill="none" stroke="#111" stroke-width="2"/>141 </svg>142 </div>143 </div>144 </div>145 146 <!-- Scrollable content -->147 <div class="content">148 <div class="grid">149 150 <!-- Brief cards row -->151 <div class="brief">152 <div class="title">Nike InfinityRN 4</div>153 <div class="subtitle">Women's Road Running Shoes</div>154 <div class="price">MRP : ₹ 14 995.00</div>155 <div class="swatches">156 <div class="swatch c-white"></div>157 <div class="swatch c-beige"></div>158 <div class="swatch c-black"></div>159 <div class="swatch c-pink"></div>160 <div class="swatch c-green"></div>161 <div style="color:#777; font-size:30px; margin-left:8px;">+1</div>162 </div>163 </div>164 165 <div class="brief">166 <div class="title">Nike Metcon 9</div>167 <div class="subtitle">Women's Workout Shoes</div>168 <div class="price">MRP : ₹ 12 795.00</div>169 <div class="swatches">170 <div class="swatch c-beige"></div>171 <div class="swatch c-black"></div>172 <div class="swatch c-green"></div>173 </div>174 </div>175 176 <div class="divider"></div>177 178 <!-- Image card row -->179 <div class="card">180 <div class="img-wrap">181 [IMG: White Sneaker]182 <div class="fav" title="Favorite">183 <svg viewBox="0 0 24 24" width="44" height="44">184 <path d="M12 21s-6.5-4.3-8.7-7.1C1.6 11.8 3 8.6 5.8 8c1.8-.4 3.1.6 4.2 2 1.1-1.4 2.4-2.4 4.2-2 2.8.6 4.2 3.8 2.5 5.9C18.5 16.7 12 21 12 21z" fill="none" stroke="#111" stroke-width="2" stroke-linejoin="round"/>185 </svg>186 </div>187 </div>188 <div class="meta">189 <div class="badge">Best Seller</div>190 <div class="name">Nike Air Force 1 '07 Next Nature</div>191 <div class="cat">Women's Shoes</div>192 <div class="price-row">193 <div>₹ 7 787.00</div>194 <div style="color:#777;">MRP :</div>195 <div class="strike">₹ 8 195.00</div>196 </div>197 </div>198 </div>199 200 <div class="card">201 <div class="img-wrap">202 [IMG: White Sneaker]203 <div class="fav" title="Favorite">204 <svg viewBox="0 0 24 24" width="44" height="44">205 <path d="M12 21s-6.5-4.3-8.7-7.1C1.6 11.8 3 8.6 5.8 8c1.8-.4 3.1.6 4.2 2 1.1-1.4 2.4-2.4 4.2-2 2.8.6 4.2 3.8 2.5 5.9C18.5 16.7 12 21 12 21z" fill="none" stroke="#111" stroke-width="2" stroke-linejoin="round"/>206 </svg>207 </div>208 </div>209 <div class="meta">210 <div class="badge">Best Seller</div>211 <div class="name">Nike Air Force 1 '07 EasyOn</div>212 <div class="cat">Women's Shoes</div>213 <div class="price-row">MRP : ₹ 9 695.00</div>214 <div class="swatches" style="margin-top:10px;">215 <div class="swatch c-grey"></div>216 <div class="swatch c-white"></div>217 </div>218 </div>219 </div>220 221 <!-- Next row with images -->222 <div class="card">223 <div class="img-wrap">224 [IMG: Teal Running Shoe]225 <div class="fav" title="Favorite">226 <svg viewBox="0 0 24 24" width="44" height="44">227 <path d="M12 21s-6.5-4.3-8.7-7.1C1.6 11.8 3 8.6 5.8 8c1.8-.4 3.1.6 4.2 2 1.1-1.4 2.4-2.4 4.2-2 2.8.6 4.2 3.8 2.5 5.9C18.5 16.7 12 21 12 21z" fill="none" stroke="#111" stroke-width="2" stroke-linejoin="round"/>228 </svg>229 </div>230 </div>231 </div>232 233 <div class="card">234 <div class="img-wrap">235 [IMG: Black/White Dunk Low]236 <div class="fav" title="Favorite">237 <svg viewBox="0 0 24 24" width="44" height="44">238 <path d="M12 21s-6.5-4.3-8.7-7.1C1.6 11.8 3 8.6 5.8 8c1.8-.4 3.1.6 4.2 2 1.1-1.4 2.4-2.4 4.2-2 2.8.6 4.2 3.8 2.5 5.9C18.5 16.7 12 21 12 21z" fill="none" stroke="#111" stroke-width="2" stroke-linejoin="round"/>239 </svg>240 </div>241 </div>242 </div>243 244 </div>245 </div>246 247 <!-- Floating filter button -->248 <div class="fab" title="Filter">249 <svg viewBox="0 0 24 24" width="60" height="60">250 <path d="M4 7h10M4 17h6" stroke="#111" stroke-width="2" stroke-linecap="round"/>251 <circle cx="16" cy="7" r="3" fill="none" stroke="#111" stroke-width="2"/>252 <circle cx="12" cy="17" r="3" fill="none" stroke="#111" stroke-width="2"/>253 </svg>254 </div>255 256 <!-- Bottom safe area / gesture bar -->257 <div class="bottom-bar">258 <div class="home-pill"></div>259 </div>260 261</div>262</body>263</html>