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>Shop UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 .header {18 padding: 80px 64px 40px 64px;19 display: flex;20 align-items: center;21 justify-content: space-between;22 }23 .title {24 font-size: 52px;25 font-weight: 800;26 letter-spacing: 2px;27 color: #111;28 }29 .icon-btn {30 width: 72px;31 height: 72px;32 }33 .search-row {34 padding: 24px 64px 24px 64px;35 border-bottom: 1px solid #ededed;36 display: flex;37 align-items: center;38 gap: 24px;39 }40 .search-placeholder {41 font-size: 36px;42 color: #9e9e9e;43 }44 45 .tabs {46 display: flex;47 gap: 48px;48 padding: 32px 64px 16px 64px;49 font-size: 32px;50 font-weight: 700;51 letter-spacing: 3px;52 color: #222;53 }54 .tabs .tab { color: #222; }55 .tabs .active { color: #111; }56 .tabs-underline {57 height: 8px;58 width: 140px;59 background: #111;60 margin-left: 64px;61 }62 63 .promo {64 padding: 220px 64px 80px 64px;65 }66 .promo h3 {67 margin: 0 0 24px 0;68 font-size: 36px;69 font-weight: 800;70 letter-spacing: 6px;71 color: #222;72 }73 .promo p {74 margin: 0;75 font-size: 34px;76 color: #666;77 }78 79 .section {80 border-top: 1px solid #f0f0f0;81 padding: 120px 64px 120px 64px;82 }83 .section h2 {84 margin: 0;85 font-size: 60px;86 font-weight: 800;87 letter-spacing: 4px;88 color: #222;89 }90 91 .shop-by {92 border-top: 1px solid #f0f0f0;93 padding: 64px;94 }95 .shop-by .label {96 font-size: 32px;97 font-weight: 800;98 letter-spacing: 3px;99 color: #222;100 margin-bottom: 32px;101 }102 .chip-row {103 display: flex;104 gap: 24px;105 }106 .chip {107 background: #000;108 color: #fff;109 padding: 36px 40px;110 border-radius: 4px;111 font-size: 34px;112 font-weight: 800;113 letter-spacing: 3px;114 min-width: 320px;115 text-align: center;116 }117 118 .bottom-nav {119 position: absolute;120 left: 0;121 right: 0;122 bottom: 88px;123 height: 160px;124 display: flex;125 align-items: center;126 justify-content: space-around;127 border-top: 1px solid #eeeeee;128 background: #ffffff;129 padding: 0 24px;130 }131 .nav-icon {132 position: relative;133 width: 72px;134 height: 72px;135 }136 .badge {137 position: absolute;138 right: -6px;139 bottom: -10px;140 background: #e0e0e0;141 color: #111;142 font-size: 28px;143 font-weight: 800;144 width: 44px;145 height: 44px;146 border-radius: 8px;147 display: flex;148 align-items: center;149 justify-content: center;150 border: 1px solid #cfcfcf;151 }152 153 /* Generic image placeholder style (not used heavily here) */154 .img-ph {155 background: #E0E0E0;156 border: 1px solid #BDBDBD;157 color: #757575;158 display: flex;159 align-items: center;160 justify-content: center;161 }162</style>163</head>164<body>165<div id="render-target">166 167 <!-- Header -->168 <div class="header">169 <div class="title">SHOP</div>170 <svg class="icon-btn" viewBox="0 0 24 24">171 <circle cx="12" cy="8" r="4" fill="none" stroke="#111" stroke-width="2"></circle>172 <path d="M4 22c0-4.4 3.6-8 8-8s8 3.6 8 8" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round"></path>173 </svg>174 </div>175 176 <!-- Search -->177 <div class="search-row">178 <svg width="56" height="56" viewBox="0 0 24 24">179 <circle cx="11" cy="11" r="7" fill="none" stroke="#111" stroke-width="2"></circle>180 <path d="M20 20l-4-4" stroke="#111" stroke-width="2" stroke-linecap="round"></path>181 </svg>182 <div class="search-placeholder">Find products...</div>183 </div>184 185 <!-- Tabs -->186 <div class="tabs">187 <div class="tab active">WOMEN</div>188 <div class="tab">MEN</div>189 <div class="tab">KIDS</div>190 </div>191 <div class="tabs-underline"></div>192 193 <!-- Promo -->194 <div class="promo">195 <h3>SCORE UP TO 60% OFF</h3>196 <p>Save big on warm weather styles.</p>197 </div>198 199 <!-- Sections -->200 <div class="section">201 <h2>SHOES</h2>202 </div>203 <div class="section">204 <h2>CLOTHING</h2>205 </div>206 <div class="section">207 <h2>ACCESSORIES</h2>208 </div>209 210 <!-- Shop By -->211 <div class="shop-by">212 <div class="label">SHOP BY</div>213 <div class="chip-row">214 <div class="chip">BACK TO SCHOOL</div>215 <div class="chip">NEW & TRENDING</div>216 <div class="chip">ONLY AT OUR STORE</div>217 </div>218 </div>219 220 <!-- Bottom Navigation -->221 <div class="bottom-nav">222 <!-- Flame -->223 <svg class="nav-icon" viewBox="0 0 24 24">224 <path d="M12 2c2 4-1 4 2 7 1.5 1.5 2 3.3 2 5 0 3.3-2.7 6-6 6s-6-2.7-6-6c0-3.6 2.7-5.5 5-7.5 1.5-1.3 2-2.5 3-4.5z" fill="none" stroke="#cfcfcf" stroke-width="2" stroke-linejoin="round"></path>225 </svg>226 227 <!-- Search -->228 <svg class="nav-icon" viewBox="0 0 24 24">229 <circle cx="11" cy="11" r="6" fill="none" stroke="#cfcfcf" stroke-width="2"></circle>230 <path d="M20 20l-3.5-3.5" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"></path>231 </svg>232 233 <!-- Heart with badge -->234 <div style="position: relative;">235 <svg class="nav-icon" viewBox="0 0 24 24">236 <path d="M12 20s-7-4.6-7-9.4C5 8 6.9 6 9.2 6c1.4 0 2.5.7 3.2 1.7C13.1 6.7 14.2 6 15.6 6 17.9 6 19.8 8 19 10.6 19 15.4 12 20 12 20z" fill="none" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>237 </svg>238 <div class="badge">1</div>239 </div>240 241 <!-- Bag with badge -->242 <div style="position: relative;">243 <svg class="nav-icon" viewBox="0 0 24 24">244 <path d="M6 9h12l-1 11H7L6 9z" fill="none" stroke="#cfcfcf" stroke-width="2"></path>245 <path d="M9 9V7a3 3 0 016 0v2" fill="none" stroke="#cfcfcf" stroke-width="2"></path>246 </svg>247 <div class="badge">4</div>248 </div>249 250 <!-- Target -->251 <svg class="nav-icon" viewBox="0 0 24 24">252 <circle cx="12" cy="12" r="8" fill="none" stroke="#cfcfcf" stroke-width="2"></circle>253 <circle cx="12" cy="12" r="4" fill="none" stroke="#cfcfcf" stroke-width="2"></circle>254 <circle cx="12" cy="12" r="1.5" fill="#cfcfcf"></circle>255 </svg>256 </div>257 258</div>259</body>260</html>