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>Women Running Shoes</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #ffffff; font-family: Arial, Helvetica, sans-serif; color: #222;12 }13 14 /* Status bar */15 .status-bar {16 height: 120px; background: #1aa5a9; color: #fff; display: flex; align-items: center;17 padding: 0 36px; box-sizing: border-box; font-size: 40px; letter-spacing: 0.5px;18 }19 .status-bar .icons { margin-left: 24px; display: flex; align-items: center; gap: 28px; }20 .status-icon { width: 34px; height: 34px; display: inline-block; border: 3px solid rgba(255,255,255,0.85); border-radius: 6px; }21 .status-dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; display: inline-block; }22 .battery { width: 48px; height: 28px; border: 3px solid #fff; border-radius: 6px; position: relative; }23 .battery::after { content: ""; position: absolute; right: -12px; top: 8px; width: 6px; height: 12px; background: #fff; border-radius: 2px; }24 .battery .level { position: absolute; right: 2px; top: 2px; bottom: 2px; left: 12px; background: #fff; border-radius: 4px; }25 26 /* App bar */27 .app-bar {28 height: 140px; background: #ffffff; display: flex; align-items: center; justify-content: space-between;29 padding: 0 36px; box-sizing: border-box; border-bottom: 1px solid #e6e6e6; box-shadow: 0 2px 6px rgba(0,0,0,0.06);30 }31 .app-left { display: flex; align-items: center; gap: 24px; }32 .title { font-size: 48px; font-weight: 700; letter-spacing: 0.5px; }33 .app-actions { display: flex; align-items: center; gap: 36px; }34 .icon-btn { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }35 .icon { width: 52px; height: 52px; }36 37 /* Filters bar */38 .filters-bar {39 height: 120px; display: grid; grid-template-columns: repeat(4, 1fr);40 border-bottom: 1px solid #e6e6e6; background: #fff;41 }42 .filter-item {43 display: flex; align-items: center; justify-content: center; gap: 16px;44 font-size: 36px; color: #616161; position: relative;45 }46 .filter-item + .filter-item { border-left: 1px solid #eee; }47 .badge {48 background: #1aa5a9; color: #fff; font-weight: 700; border-radius: 20px; padding: 6px 16px; font-size: 32px;49 }50 51 /* Chips row */52 .chips-row {53 background: #f4f4f4; padding: 24px 24px 32px; box-sizing: border-box;54 display: flex; gap: 24px; overflow: hidden;55 border-bottom: 1px solid #e6e6e6;56 }57 .chip {58 background: #fff; border: 1px solid #e0e0e0; border-radius: 18px;59 padding: 24px 36px; font-size: 36px; color: #555; box-shadow: 0 4px 10px rgba(0,0,0,0.12);60 }61 62 /* Product grid */63 .products {64 padding: 12px 12px 140px; box-sizing: border-box;65 display: flex; flex-wrap: wrap;66 }67 .card {68 width: 516px; margin: 12px; background: #fff; border-right: 1px solid #eee; padding-bottom: 24px;69 }70 .image-wrap { position: relative; }71 .placeholder-img {72 width: 100%; height: 420px; background: #E0E0E0; border: 1px solid #BDBDBD;73 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 34px;74 }75 .fav {76 position: absolute; top: 20px; right: 20px; width: 76px; height: 76px; border-radius: 50%;77 background: #fff; border: 1px solid #e6e6e6; display: flex; align-items: center; justify-content: center;78 box-shadow: 0 4px 10px rgba(0,0,0,0.12);79 }80 .content { padding: 20px 20px 0; }81 .name {82 font-size: 36px; color: #333; margin-bottom: 12px;83 }84 .price-row { display: flex; align-items: baseline; gap: 16px; margin: 8px 0; }85 .price { font-size: 44px; font-weight: 700; }86 .strike { font-size: 36px; color: #9e9e9e; text-decoration: line-through; }87 .off { font-size: 36px; color: #1ea1ff; margin-top: 6px; }88 .stars { display: flex; gap: 6px; margin: 10px 0; }89 .ship {90 display: inline-block; margin-top: 18px; padding: 12px 22px; border-radius: 10px;91 border: 2px solid #e7b27f; color: #c67a2c; font-size: 34px; background: #fff;92 }93 94 /* Bottom gesture bar */95 .bottom-bar {96 position: absolute; bottom: 0; left: 0; right: 0; height: 110px; background: #000;97 }98 .home-pill {99 width: 380px; height: 16px; border-radius: 10px; background: #d8d8d8;100 position: absolute; left: 50%; transform: translateX(-50%); bottom: 34px;101 }102</style>103</head>104<body>105<div id="render-target">106 107 <!-- Teal status bar -->108 <div class="status-bar">109 10:41110 <div class="icons">111 <span class="status-icon"></span>112 <span class="status-dot"></span>113 <span class="status-dot"></span>114 <span class="status-dot"></span>115 <div class="battery"><div class="level"></div></div>116 </div>117 </div>118 119 <!-- App Bar -->120 <div class="app-bar">121 <div class="app-left">122 <div class="icon-btn">123 <svg class="icon" viewBox="0 0 24 24">124 <path d="M15 18l-6-6 6-6" stroke="#1aa5a9" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>125 </svg>126 </div>127 <div class="title">WOMEN RUNNING SHOES</div>128 </div>129 <div class="app-actions">130 <div class="icon-btn">131 <svg class="icon" viewBox="0 0 24 24">132 <circle cx="11" cy="11" r="7" stroke="#1aa5a9" stroke-width="2" fill="none"/>133 <path d="M20 20l-4-4" stroke="#1aa5a9" stroke-width="2" fill="none" stroke-linecap="round"/>134 </svg>135 </div>136 <div class="icon-btn">137 <svg class="icon" viewBox="0 0 24 24">138 <path d="M6 6h15l-2 10H7L6 6z" stroke="#1aa5a9" stroke-width="2" fill="none" stroke-linejoin="round"/>139 <circle cx="9" cy="20" r="2" fill="#1aa5a9"/>140 <circle cx="17" cy="20" r="2" fill="#1aa5a9"/>141 </svg>142 </div>143 </div>144 </div>145 146 <!-- Filters bar -->147 <div class="filters-bar">148 <div class="filter-item">149 <span>Category</span>150 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round"/></svg>151 </div>152 <div class="filter-item">153 <span class="badge">2</span><span>Filter</span>154 </div>155 <div class="filter-item">156 <span>₹</span>157 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M7 10h10M7 6h10M7 14h10M14 18l-3-4" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/></svg>158 <span>Price</span>159 </div>160 <div class="filter-item">161 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M7 4h10M7 10h7M7 16h4" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/></svg>162 <span>Sort</span>163 </div>164 </div>165 166 <!-- Chips -->167 <div class="chips-row">168 <div class="chip">Sports Shoes</div>169 <div class="chip">Sports Shoes</div>170 <div class="chip">Puma</div>171 </div>172 173 <!-- Products Grid -->174 <div class="products">175 <!-- Card 1 -->176 <div class="card">177 <div class="image-wrap">178 <div class="placeholder-img">[IMG: Grey & Pink Running Shoe]</div>179 <div class="fav">180 <svg width="36" height="36" viewBox="0 0 24 24">181 <path d="M12 21s-7-4.35-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.65-7 9-7 9z" fill="none" stroke="#999" stroke-width="2"/>182 </svg>183 </div>184 </div>185 <div class="content">186 <div class="name">Columbus Selena Women's Sports...</div>187 <div class="price-row">188 <div class="price">₹1,499</div>189 <div class="strike">₹2,199</div>190 </div>191 <div class="off">31% off</div>192 <span class="ship">Free shipping</span>193 </div>194 </div>195 196 <!-- Card 2 -->197 <div class="card">198 <div class="image-wrap">199 <div class="placeholder-img">[IMG: Navy Slip-on Running Shoe]</div>200 <div class="fav">201 <svg width="36" height="36" viewBox="0 0 24 24">202 <path d="M12 21s-7-4.35-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.65-7 9-7 9z" fill="none" stroke="#999" stroke-width="2"/>203 </svg>204 </div>205 </div>206 <div class="content">207 <div class="name">Columbus Spade Women's Sports...</div>208 <div class="price-row">209 <div class="price">₹859</div>210 <div class="strike">₹1,299</div>211 </div>212 <div class="off">33% off</div>213 <div class="stars">214 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M12 2l3 7 8 1-6 5 2 7-7-4-7 4 2-7-6-5 8-1z" fill="#f9a825"/></svg>215 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M12 2l3 7 8 1-6 5 2 7-7-4-7 4 2-7-6-5 8-1z" fill="#f9a825"/></svg>216 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M12 2l3 7 8 1-6 5 2 7-7-4-7 4 2-7-6-5 8-1z" fill="#f9a825"/></svg>217 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M12 2l3 7 8 1-6 5 2 7-7-4-7 4 2-7-6-5 8-1z" fill="#f9a825"/></svg>218 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M12 2l3 7 8 1-6 5 2 7-7-4-7 4 2-7-6-5 8-1z" fill="#f9a825"/></svg>219 </div>220 <span class="ship">Free shipping</span>221 </div>222 </div>223 224 <!-- Card 3 -->225 <div class="card">226 <div class="image-wrap">227 <div class="placeholder-img">[IMG: Mauve Slip-on Running Shoe]</div>228 <div class="fav">229 <svg width="36" height="36" viewBox="0 0 24 24">230 <path d="M12 21s-7-4.35-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.65-7 9-7 9z" fill="none" stroke="#999" stroke-width="2"/>231 </svg>232 </div>233 </div>234 <div class="content">235 <div class="name">Columbus Women's Slip-on Sports...</div>236 <div class="price-row">237 <div class="price">₹999</div>238 <div class="strike">₹1,499</div>239 </div>240 <div class="off">25% off</div>241 <span class="ship">Free shipping</span>242 </div>243 </div>244 245 <!-- Card 4 -->246 <div class="card">247 <div class="image-wrap">248 <div class="placeholder-img">[IMG: Purple Lace-up Running Shoe]</div>249 <div class="fav">250 <svg width="36" height="36" viewBox="0 0 24 24">251 <path d="M12 21s-7-4.35-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.65-7 9-7 9z" fill="none" stroke="#999" stroke-width="2"/>252 </svg>253 </div>254 </div>255 <div class="content">256 <div class="name">Columbus Women's Mesh Running...</div>257 <div class="price-row">258 <div class="price">₹1,299</div>259 <div class="strike">₹1,899</div>260 </div>261 <div class="off">32% off</div>262 <span class="ship">Free shipping</span>263 </div>264 </div>265 </div>266 267 <!-- Bottom gesture bar -->268 <div class="bottom-bar">269 <div class="home-pill"></div>270 </div>271 272</div>273</body>274</html>