GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>PUMA X THUNDERCATS - Mock UI</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background:#ffffff;10 color:#111;11 }12 13 /* Status bar */14 .status-bar {15 height:80px; padding:0 28px; display:flex; align-items:center; justify-content:space-between;16 font-weight:600; font-size:34px; color:#222;17 }18 .top-icons { display:flex; gap:22px; align-items:center; }19 .icon { width:40px; height:40px; }20 21 /* Header */22 .header {23 position:relative; padding:16px 40px 10px 40px;24 }25 .back-btn { position:absolute; left:18px; top:22px; }26 .header-actions { position:absolute; right:26px; top:22px; display:flex; gap:26px; }27 .title { font-size:62px; font-weight:800; letter-spacing:1px; margin-top:36px; }28 .subrow {29 margin-top:24px; padding:0 2px;30 display:flex; align-items:center; justify-content:space-between;31 font-size:36px; font-weight:700;32 }33 .subrow .count { color:#111; }34 .subrow .sort { color:#111; }35 36 /* Product grid */37 .content { padding:0 40px; }38 .grid {39 display:grid; grid-template-columns: 1fr 1fr; column-gap:36px; row-gap:54px;40 margin-top:28px;41 }42 .card { }43 .img-wrap {44 position:relative; width:100%; height:360px; border:1px solid #BDBDBD; background:#E0E0E0;45 display:flex; align-items:center; justify-content:center; color:#757575; border-radius:16px;46 }47 .badge-new {48 position:absolute; left:16px; top:16px; background:#0d0d0d; color:#fff;49 font-size:30px; font-weight:800; padding:10px 18px; border-radius:8px;50 }51 .heart {52 position:absolute; right:16px; top:16px;53 width:48px; height:48px; background:#fff; border-radius:50%; box-shadow:0 1px 4px rgba(0,0,0,0.12);54 display:flex; align-items:center; justify-content:center;55 }56 .heart svg { width:30px; height:30px; }57 .meta {58 margin-top:22px; font-size:32px; color:#666; font-weight:600;59 }60 .prod-title {61 margin-top:10px; font-size:40px; font-weight:800; line-height:1.1;62 }63 .price {64 margin-top:18px; font-size:40px; font-weight:800;65 }66 .promo {67 margin-top:18px; font-size:34px; line-height:1.45; font-weight:800;68 color:#9B3A22;69 }70 71 /* Bottom nav */72 .bottom-bar {73 position:absolute; bottom:0; left:0; width:100%;74 border-top:1px solid #e5e5e5; background:#ffffff;75 height:170px; display:flex; align-items:center; justify-content:space-around;76 padding:12px 0;77 }78 .nav-item { width:150px; display:flex; flex-direction:column; align-items:center; gap:12px; }79 .nav-item .label { font-size:30px; font-weight:800; color:#222; }80 .nav-icon { width:64px; height:64px; }81 .badge {82 position:absolute; right:90px; bottom:124px; background:#d2c29b; color:#111;83 width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;84 font-weight:800; font-size:28px;85 box-shadow:0 2px 6px rgba(0,0,0,0.15);86 }87</style>88</head>89<body>90<div id="render-target">91 92 <!-- Status bar -->93 <div class="status-bar">94 <div>12:32</div>95 <div class="top-icons">96 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#777"/></svg>97 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#555"/></svg>98 <svg class="icon" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2" fill="#333"/></svg>99 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#999"/></svg>100 <svg class="icon" viewBox="0 0 24 24"><path d="M2 12h20M12 2v20" stroke="#333" stroke-width="2"/></svg>101 </div>102 </div>103 104 <!-- Header -->105 <div class="header">106 <div class="back-btn">107 <svg class="icon" viewBox="0 0 24 24">108 <path d="M15 18l-6-6 6-6" stroke="#000" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>109 </svg>110 </div>111 112 <div class="header-actions">113 <!-- Filter/sliders icon -->114 <svg class="icon" viewBox="0 0 24 24">115 <path d="M3 7h14" stroke="#000" stroke-width="2" stroke-linecap="round"/>116 <circle cx="19" cy="7" r="2" fill="none" stroke="#000" stroke-width="2"/>117 <path d="M3 12h8" stroke="#000" stroke-width="2" stroke-linecap="round"/>118 <circle cx="15" cy="12" r="2" fill="none" stroke="#000" stroke-width="2"/>119 <path d="M3 17h18" stroke="#000" stroke-width="2" stroke-linecap="round"/>120 <circle cx="7" cy="17" r="2" fill="none" stroke="#000" stroke-width="2"/>121 </svg>122 <!-- Search icon -->123 <svg class="icon" viewBox="0 0 24 24">124 <circle cx="11" cy="11" r="7" stroke="#000" stroke-width="2" fill="none"/>125 <path d="M20 20l-4-4" stroke="#000" stroke-width="2" stroke-linecap="round"/>126 </svg>127 </div>128 129 <div class="title">PUMA X THUNDERCATS</div>130 131 <div class="subrow">132 <div class="count">4 PRODUCTS</div>133 <div class="sort">SORT ↕</div>134 </div>135 </div>136 137 <div class="content">138 <div class="grid">139 <!-- Card 1 -->140 <div class="card">141 <div class="img-wrap">142 <div class="badge-new">NEW</div>143 <div class="heart">144 <svg viewBox="0 0 24 24">145 <path d="M12 21s-8-6-8-11a5 5 0 019 0 5 5 0 019 0c0 5-8 11-8 11" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>146 </svg>147 </div>148 [IMG: Cheetara RS-X Shoe]149 </div>150 <div class="meta">1 Color</div>151 <div class="prod-title">PUMA x THUNDERCATS RS-X T3CH Cheetara II...</div>152 <div class="price">$120.00</div>153 <div class="promo">154 TAKE 40% OFF CLOTHING WHEN YOU BUY ANY SHOES. EXCLUSIONS APPLY. PRICE REFLECTED IN CART.155 </div>156 </div>157 158 <!-- Card 2 -->159 <div class="card">160 <div class="img-wrap">161 <div class="badge-new">NEW</div>162 <div class="heart">163 <svg viewBox="0 0 24 24">164 <path d="M12 21s-8-6-8-11a5 5 0 019 0 5 5 0 019 0c0 5-8 11-8 11" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>165 </svg>166 </div>167 [IMG: Thundercats RS-X Shoe]168 </div>169 <div class="meta">1 Color</div>170 <div class="prod-title">PUMA x THUNDERCATS RS-X T3CH Thunderca...</div>171 <div class="price">$120.00</div>172 <div class="promo">173 TAKE 40% OFF CLOTHING WHEN YOU BUY ANY SHOES. EXCLUSIONS APPLY. PRICE REFLECTED IN CART.174 </div>175 </div>176 177 <!-- Card 3 -->178 <div class="card">179 <div class="img-wrap">180 <div class="badge-new">NEW</div>181 <div class="heart">182 <svg viewBox="0 0 24 24">183 <path d="M12 21s-8-6-8-11a5 5 0 019 0 5 5 0 019 0c0 5-8 11-8 11" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>184 </svg>185 </div>186 [IMG: Red/Blue RS-X Shoe]187 </div>188 <div class="meta">NEW</div>189 <div class="prod-title">PUMA x THUNDERCATS RS-X Sneaker</div>190 <div class="price">$120.00</div>191 </div>192 193 <!-- Card 4 -->194 <div class="card">195 <div class="img-wrap">196 <div class="badge-new">NEW</div>197 <div class="heart">198 <svg viewBox="0 0 24 24">199 <path d="M12 21s-8-6-8-11a5 5 0 019 0 5 5 0 019 0c0 5-8 11-8 11" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>200 </svg>201 </div>202 [IMG: Blue RS-X Shoe]203 </div>204 <div class="meta">NEW</div>205 <div class="prod-title">PUMA x THUNDERCATS RS-X Sneaker</div>206 <div class="price">$120.00</div>207 </div>208 </div>209 </div>210 211 <!-- Bottom navigation -->212 <div class="bottom-bar">213 <div class="nav-item">214 <svg class="nav-icon" viewBox="0 0 24 24">215 <path d="M3 11l9-8 9 8v9H3z" fill="none" stroke="#000" stroke-width="2"/>216 </svg>217 <div class="label">HOME</div>218 </div>219 <div class="nav-item">220 <svg class="nav-icon" viewBox="0 0 24 24">221 <path d="M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z" fill="none" stroke="#000" stroke-width="2"/>222 </svg>223 <div class="label">DROPS</div>224 </div>225 <div class="nav-item">226 <svg class="nav-icon" viewBox="0 0 24 24">227 <circle cx="11" cy="11" r="7" stroke="#000" stroke-width="2" fill="none"/>228 <path d="M20 20l-4-4" stroke="#000" stroke-width="2" stroke-linecap="round"/>229 </svg>230 <div class="label">SHOP</div>231 </div>232 <div class="nav-item">233 <svg class="nav-icon" viewBox="0 0 24 24">234 <path d="M3 6h3l2 12h10l2-9H7" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>235 </svg>236 <div class="label">CART</div>237 </div>238 <div class="nav-item">239 <svg class="nav-icon" viewBox="0 0 24 24">240 <circle cx="12" cy="7" r="4" fill="none" stroke="#000" stroke-width="2"/>241 <path d="M4 22c0-4 4-7 8-7s8 3 8 7" fill="none" stroke="#000" stroke-width="2"/>242 </svg>243 <div class="label">ACCOUNT</div>244 </div>245 </div>246 <div class="badge">1</div>247 248</div>249</body>250</html>