GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>PUMA Shop - Slides</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: #ffffff;11 }12 13 /* Status bar */14 .status-bar {15 position: absolute; top: 18px; left: 32px; right: 32px; height: 40px;16 display: flex; align-items: center; justify-content: space-between;17 font-weight: 600; color: #222; font-size: 30px;18 }19 .status-right { display: flex; align-items: center; gap: 18px; }20 .dot { width: 18px; height: 18px; background: #444; border-radius: 50%; opacity: 0.7; }21 .icon-small { width: 28px; height: 28px; }22 .wifi::before { content: ""; display: block; width: 28px; height: 18px; border: 3px solid #333; border-top-left-radius: 50px; border-top-right-radius: 50px; border-bottom: none; }23 .battery {24 width: 34px; height: 22px; border: 3px solid #333; position: relative; border-radius: 4px;25 }26 .battery::after { content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 10px; background: #333; border-radius: 2px; }27 28 /* App header */29 .app-header {30 position: absolute; top: 84px; left: 20px; right: 20px; height: 72px;31 display: flex; align-items: center; justify-content: space-between;32 }33 .header-left { display: flex; align-items: center; gap: 16px; }34 .header-right { display: flex; align-items: center; gap: 28px; }35 .icon-btn { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; }36 .icon-svg { width: 40px; height: 40px; }37 .badge {38 position: relative;39 }40 .badge .count {41 position: absolute; top: -10px; right: -8px;42 background: #000; color: #fff; font-size: 22px; font-weight: 700;43 width: 34px; height: 34px; border-radius: 17px; display: flex; align-items: center; justify-content: center;44 }45 46 /* Title and sort bar */47 .title-sort {48 position: absolute; top: 190px; left: 40px; right: 40px;49 display: flex; align-items: baseline; justify-content: space-between;50 }51 .title-sort .title { font-size: 44px; font-weight: 800; letter-spacing: 1px; color: #111; }52 .sort { display: flex; align-items: center; gap: 12px; font-size: 34px; font-weight: 700; color: #111; }53 .sort-icon { width: 26px; height: 36px; border-left: 4px solid #111; border-right: 4px solid #111; position: relative; }54 .sort-icon::before, .sort-icon::after {55 content: ""; position: absolute; left: 50%; transform: translateX(-50%);56 width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent;57 }58 .sort-icon::before { top: -8px; border-bottom: 12px solid #111; }59 .sort-icon::after { bottom: -8px; border-top: 12px solid #111; }60 61 /* Product grid */62 .content {63 position: absolute; top: 270px; left: 32px; right: 32px; bottom: 140px; overflow: auto; padding-bottom: 40px;64 }65 .grid {66 display: grid; grid-template-columns: 1fr 1fr; gap: 34px 34px;67 }68 .card {69 background: #fff; border-radius: 8px; padding-bottom: 12px;70 }71 .img-wrap {72 position: relative; width: 100%; height: 420px; border-radius: 8px; overflow: hidden;73 background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px; font-weight: 600;74 }75 .tag-new {76 position: absolute; top: 14px; left: 14px; background: #111; color: #fff; font-size: 24px; font-weight: 800;77 padding: 10px 16px; border-radius: 8px;78 }79 .fav {80 position: absolute; top: 14px; right: 14px; width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,0.9);81 display: flex; align-items: center; justify-content: center; border: 1px solid #ddd;82 }83 .heart { width: 30px; height: 30px; border: 3px solid #000; border-top-left-radius: 18px; border-top-right-radius: 18px; border-bottom: none; position: relative; transform: rotate(-45deg); }84 .heart::after {85 content: ""; position: absolute; width: 30px; height: 30px; border: 3px solid #000; border-top-left-radius: 18px; border-top-right-radius: 18px; border-bottom: none; left: 16px; top: 14px; transform: rotate(90deg);86 }87 88 .meta { margin-top: 18px; display: flex; align-items: center; gap: 12px; color: #333; font-size: 28px; font-weight: 600; }89 .chev-down {90 width: 20px; height: 20px; border-left: 4px solid #000; border-bottom: 4px solid #000; transform: rotate(-45deg); margin-left: 6px;91 }92 .name { margin-top: 12px; font-size: 36px; font-weight: 800; color: #111; }93 .price { margin-top: 10px; font-size: 34px; font-weight: 800; color: #111; }94 .promo {95 margin-top: 16px; font-size: 28px; line-height: 42px; color: #8B3A1A; font-weight: 700;96 }97 98 /* Bottom nav */99 .bottom-nav {100 position: absolute; left: 0; right: 0; bottom: 0; height: 120px; border-top: 1px solid #e4e4e4; background: #fff;101 display: flex; justify-content: space-around; align-items: center;102 }103 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #7a7a7a; font-size: 26px; font-weight: 700; }104 .nav-item .nav-icon { width: 54px; height: 54px; }105 .nav-item.active { color: #111; }106 .nav-item.active .nav-icon { filter: none; }107 .nav-badge {108 position: absolute; right: 38px; bottom: 86px;109 width: 40px; height: 40px; background: #C9A16B; color: #fff; font-weight: 800; font-size: 22px;110 border-radius: 20px; display: flex; align-items: center; justify-content: center;111 }112</style>113</head>114<body>115<div id="render-target">116 117 <!-- Status bar -->118 <div class="status-bar">119 <div>10:15</div>120 <div class="status-right">121 <div class="dot"></div>122 <div class="dot"></div>123 <div class="dot"></div>124 <div class="dot"></div>125 <div class="wifi"></div>126 <div class="battery"></div>127 </div>128 </div>129 130 <!-- App header with back, bag and search -->131 <div class="app-header">132 <div class="header-left">133 <div class="icon-btn">134 <svg class="icon-svg" viewBox="0 0 24 24">135 <path d="M15 19L8 12l7-7" stroke="#000" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>136 </svg>137 </div>138 </div>139 <div class="header-right">140 <div class="icon-btn badge">141 <svg class="icon-svg" viewBox="0 0 24 24">142 <path d="M6 7h12l-1 12H7L6 7z" stroke="#000" stroke-width="2.4" fill="none"/>143 <path d="M9 7V5a3 3 0 013-3 3 3 0 013 3v2" stroke="#000" stroke-width="2.4" fill="none"/>144 </svg>145 <div class="count">1</div>146 </div>147 <div class="icon-btn">148 <svg class="icon-svg" viewBox="0 0 24 24">149 <circle cx="10" cy="10" r="7" stroke="#000" stroke-width="2.6" fill="none"/>150 <path d="M15 15l6 6" stroke="#000" stroke-width="2.6" fill="none" stroke-linecap="round"/>151 </svg>152 </div>153 </div>154 </div>155 156 <!-- Title and sort -->157 <div class="title-sort">158 <div class="title">44 PRODUCTS</div>159 <div class="sort">160 <div>SORT</div>161 <div class="sort-icon"></div>162 </div>163 </div>164 165 <!-- Content grid -->166 <div class="content">167 <div class="grid">168 169 <!-- Card 1 -->170 <div class="card">171 <div class="img-wrap">172 <div class="tag-new">NEW</div>173 <div class="fav"><div class="heart"></div></div>174 [IMG: Beige Shibui Cat Slide]175 </div>176 <div class="meta">177 <div>3 Colors</div>178 <div class="chev-down"></div>179 </div>180 <div class="name">Shibui Cat Slides</div>181 <div class="price">$45.00</div>182 <div class="promo">183 TAKE 40% OFF CLOTHING WHEN YOU BUY ANY SHOES. EXCLUSIONS APPLY. PRICE REFLECTED IN CART.184 </div>185 </div>186 187 <!-- Card 2 -->188 <div class="card">189 <div class="img-wrap">190 <div class="tag-new">NEW</div>191 <div class="fav"><div class="heart"></div></div>192 [IMG: Two-tone Softride Slide]193 </div>194 <div class="meta">195 <div>3 Colors</div>196 <div class="chev-down"></div>197 </div>198 <div class="name">Softride Slides</div>199 <div class="price">$45.00</div>200 <div class="promo">201 TAKE 40% OFF CLOTHING WHEN YOU BUY ANY SHOES. EXCLUSIONS APPLY. PRICE REFLECTED IN CART.202 </div>203 </div>204 205 <!-- Card 3 -->206 <div class="card">207 <div class="img-wrap">208 <div class="tag-new">NEW</div>209 <div class="fav"><div class="heart"></div></div>210 [IMG: Green Strap Puma Slide]211 </div>212 <div class="meta">213 <div>5 Colors</div>214 <div class="chev-down"></div>215 </div>216 <div class="name">Leadcat Slides</div>217 <div class="price">$45.00</div>218 </div>219 220 <!-- Card 4 -->221 <div class="card">222 <div class="img-wrap">223 <div class="fav"><div class="heart"></div></div>224 [IMG: Black Shibui Foam Slide]225 </div>226 <div class="meta">227 <div>3 Colors</div>228 <div class="chev-down"></div>229 </div>230 <div class="name">Shibui Cat Slides</div>231 <div class="price">$45.00</div>232 </div>233 234 </div>235 </div>236 237 <!-- Bottom nav -->238 <div class="bottom-nav">239 <div class="nav-item">240 <svg class="nav-icon" viewBox="0 0 24 24">241 <path d="M3 11l9-8 9 8v9H3z" stroke="#7a7a7a" stroke-width="2.4" fill="none" />242 </svg>243 <div>HOME</div>244 </div>245 <div class="nav-item">246 <svg class="nav-icon" viewBox="0 0 24 24">247 <path d="M4 20v-8l8-4 8 4v8" stroke="#7a7a7a" stroke-width="2.4" fill="none"/>248 <circle cx="12" cy="12" r="2" fill="#7a7a7a"/>249 </svg>250 <div>DROPS</div>251 </div>252 <div class="nav-item active">253 <svg class="nav-icon" viewBox="0 0 24 24">254 <rect x="3" y="4" width="18" height="16" rx="2" ry="2" stroke="#000" stroke-width="2.4" fill="none"/>255 <path d="M7 8h10M7 12h10M7 16h10" stroke="#000" stroke-width="2.4"/>256 </svg>257 <div>SHOP</div>258 </div>259 <div class="nav-item">260 <svg class="nav-icon" viewBox="0 0 24 24">261 <path d="M6 7h12l-1 12H7L6 7z" stroke="#7a7a7a" stroke-width="2.4" fill="none"/>262 <path d="M9 7V5a3 3 0 013-3 3 3 0 013 3v2" stroke="#7a7a7a" stroke-width="2.4" fill="none"/>263 </svg>264 <div>CART</div>265 </div>266 <div class="nav-item">267 <svg class="nav-icon" viewBox="0 0 24 24">268 <circle cx="12" cy="8" r="4" stroke="#7a7a7a" stroke-width="2.4" fill="none"/>269 <path d="M4 21c2-4 6-5 8-5s6 1 8 5" stroke="#7a7a7a" stroke-width="2.4" fill="none"/>270 </svg>271 <div>ACCOUNT</div>272 </div>273 <div class="nav-badge">2</div>274 </div>275 276</div>277</body>278</html>