GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>PUMA Select - Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7 #render-target {8 position: relative;9 width: 1080px;10 height: 2400px;11 overflow: hidden;12 background: #ffffff;13 color: #111;14 }15 16 /* Status bar */17 .status-bar {18 height: 90px;19 padding: 0 36px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 font-size: 38px;24 color: #222;25 }26 .status-left {27 display: flex;28 align-items: center;29 gap: 22px;30 letter-spacing: 1px;31 }32 .status-dots span {33 width: 16px; height: 16px; border-radius: 50%; background: #222; display: inline-block; margin-right: 14px;34 }35 .status-right { display: flex; align-items: center; gap: 26px; }36 .icon-small { width: 42px; height: 42px; }37 38 /* App bar */39 .app-bar {40 height: 110px;41 display: flex;42 align-items: center;43 justify-content: center;44 position: relative;45 border-bottom: 1px solid #e9e9e9;46 }47 .back-btn {48 position: absolute; left: 24px; top: 50%; transform: translateY(-50%);49 width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;50 }51 .app-title {52 font-weight: 700;53 letter-spacing: 3px;54 font-size: 46px;55 }56 57 /* Hero banner */58 .hero {59 width: 100%;60 height: 540px;61 background: linear-gradient(180deg, #1f2431 0%, #0f1422 100%);62 position: relative;63 overflow: hidden;64 }65 .hero-image {66 position: absolute; inset: 0;67 background: #E0E0E0;68 border-top: 1px solid #BDBDBD;69 border-bottom: 1px solid #BDBDBD;70 display: flex; align-items: center; justify-content: center;71 color: #555; font-size: 40px;72 }73 74 /* List styles */75 .list {76 background: #fff;77 }78 .list-item {79 padding: 40px 40px;80 border-bottom: 1px solid #ECECEC;81 display: flex;82 align-items: center;83 justify-content: space-between;84 min-height: 130px;85 }86 .list-item .label {87 font-size: 48px;88 font-weight: 800;89 letter-spacing: 1px;90 }91 .chevron {92 width: 44px; height: 44px;93 stroke: #111; stroke-width: 12; fill: none; stroke-linecap: round; stroke-linejoin: round;94 }95 96 /* Bottom navigation */97 .bottom-nav {98 position: absolute; left: 0; right: 0; bottom: 0;99 height: 220px;100 background: #ffffff;101 border-top: 1px solid #e6e6e6;102 display: flex; align-items: center; justify-content: space-around;103 padding-bottom: 28px;104 }105 .nav-item {106 width: 160px;107 display: flex; flex-direction: column; align-items: center; gap: 10px;108 color: #7a7a7a;109 font-size: 34px;110 }111 .nav-item.active { color: #111; font-weight: 700; }112 .nav-icon { width: 76px; height: 76px; }113 .badge {114 position: absolute;115 right: 24px; bottom: 160px;116 width: 64px; height: 64px; background: #D7C2A0; color: #111; border-radius: 50%;117 display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 34px;118 border: 2px solid #c6b08f;119 }120 121 /* Gesture bar */122 .gesture {123 position: absolute; left: 50%; transform: translateX(-50%);124 bottom: 10px; width: 380px; height: 10px; background: #000; border-radius: 10px; opacity: 0.65;125 }126</style>127</head>128<body>129<div id="render-target">130 131 <!-- Status Bar -->132 <div class="status-bar">133 <div class="status-left">134 <div style="font-weight:600;">12:33</div>135 <div class="status-dots">136 <span></span><span></span><span></span>137 </div>138 </div>139 <div class="status-right">140 <!-- Wi-Fi -->141 <svg class="icon-small" viewBox="0 0 24 24">142 <path d="M2 9c5-5 15-5 20 0" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/>143 <path d="M6 13c3-3 9-3 12 0" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/>144 <circle cx="12" cy="18" r="2" fill="#222"/>145 </svg>146 <!-- Battery -->147 <svg class="icon-small" viewBox="0 0 36 24">148 <rect x="1" y="5" width="28" height="14" rx="3" ry="3" fill="none" stroke="#222" stroke-width="2"/>149 <rect x="4" y="8" width="20" height="8" fill="#222"/>150 <rect x="30" y="9" width="4" height="6" fill="#222"/>151 </svg>152 </div>153 </div>154 155 <!-- App Bar -->156 <div class="app-bar">157 <div class="back-btn">158 <svg width="52" height="52" viewBox="0 0 24 24">159 <path d="M15 18L9 12l6-6" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>160 </svg>161 </div>162 <div class="app-title">SELECT</div>163 </div>164 165 <!-- Hero Banner -->166 <div class="hero">167 <div class="hero-image">[IMG: Outdoor fashion banner - jackets at dusk]</div>168 </div>169 170 <!-- List -->171 <div class="list">172 <div class="list-item">173 <div class="label">ALL SELECT</div>174 <svg class="chevron" viewBox="0 0 24 24"><path d="M8 4l8 8-8 8"/></svg>175 </div>176 177 <div class="list-item">178 <div class="label">PUMA X THUNDERCATS</div>179 <svg class="chevron" viewBox="0 0 24 24"><path d="M8 4l8 8-8 8"/></svg>180 </div>181 182 <div class="list-item">183 <div class="label">PUMA X KOCHÉ</div>184 <svg class="chevron" viewBox="0 0 24 24"><path d="M8 4l8 8-8 8"/></svg>185 </div>186 187 <div class="list-item">188 <div class="label">PUMA X PERKS AND MINI</div>189 <svg class="chevron" viewBox="0 0 24 24"><path d="M8 4l8 8-8 8"/></svg>190 </div>191 192 <div class="list-item">193 <div class="label">PUMA X UPTOWN B.T.W.</div>194 <svg class="chevron" viewBox="0 0 24 24"><path d="M8 4l8 8-8 8"/></svg>195 </div>196 197 <div class="list-item">198 <div class="label">PUMA X LIBERTY</div>199 <svg class="chevron" viewBox="0 0 24 24"><path d="M8 4l8 8-8 8"/></svg>200 </div>201 202 <div class="list-item">203 <div class="label">PUMA X RHUIGI</div>204 <svg class="chevron" viewBox="0 0 24 24"><path d="M8 4l8 8-8 8"/></svg>205 </div>206 207 <div class="list-item" style="border-bottom:none;">208 <div class="label">PUMA X AMI</div>209 <svg class="chevron" viewBox="0 0 24 24"><path d="M8 4l8 8-8 8"/></svg>210 </div>211 </div>212 213 <!-- Bottom Navigation -->214 <div class="bottom-nav">215 <div class="nav-item">216 <svg class="nav-icon" viewBox="0 0 24 24">217 <path d="M3 11l9-7 9 7v8a2 2 0 0 1-2 2h-4v-6H9v6H5a2 2 0 0 1-2-2z" fill="none" stroke="#7a7a7a" stroke-width="2" stroke-linejoin="round"/>218 </svg>219 <div>HOME</div>220 </div>221 <div class="nav-item">222 <svg class="nav-icon" viewBox="0 0 24 24">223 <rect x="4" y="3" width="16" height="18" rx="2" fill="none" stroke="#7a7a7a" stroke-width="2"/>224 <line x1="4" y1="8" x2="20" y2="8" stroke="#7a7a7a" stroke-width="2"/>225 </svg>226 <div>DROPS</div>227 </div>228 <div class="nav-item active">229 <svg class="nav-icon" viewBox="0 0 24 24">230 <circle cx="11" cy="11" r="7" fill="none" stroke="#111" stroke-width="2"/>231 <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#111" stroke-width="2" stroke-linecap="round"/>232 </svg>233 <div>SHOP</div>234 </div>235 <div class="nav-item">236 <svg class="nav-icon" viewBox="0 0 24 24">237 <path d="M6 6h15l-2 10H7L6 6z" fill="none" stroke="#7a7a7a" stroke-width="2" stroke-linejoin="round"/>238 <circle cx="9" cy="20" r="1.7" fill="#7a7a7a"/>239 <circle cx="18" cy="20" r="1.7" fill="#7a7a7a"/>240 </svg>241 <div>CART</div>242 </div>243 <div class="nav-item">244 <svg class="nav-icon" viewBox="0 0 24 24">245 <circle cx="12" cy="8" r="4" fill="none" stroke="#7a7a7a" stroke-width="2"/>246 <path d="M4 20c2-4 14-4 16 0" fill="none" stroke="#7a7a7a" stroke-width="2" stroke-linecap="round"/>247 </svg>248 <div>ACCOUNT</div>249 </div>250 </div>251 252 <!-- Small badge near bottom-right (notification) -->253 <div class="badge">1</div>254 255 <!-- Gesture bar -->256 <div class="gesture"></div>257</div>258</body>259</html>