GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile Shop 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; color:#111;10 }11 12 /* Status bar */13 .status-bar {14 height:70px; padding:0 36px; display:flex; align-items:center; justify-content:space-between;15 font-size:30px; color:#333;16 }17 .status-left { display:flex; gap:22px; align-items:center; }18 .status-right { display:flex; gap:24px; align-items:center; }19 20 /* Header actions */21 .top-actions {22 height:90px; display:flex; align-items:center; justify-content:space-between;23 padding:0 30px;24 }25 .icon-btn { width:64px; height:64px; display:flex; align-items:center; justify-content:center; border-radius:16px; }26 .badge {27 position:absolute; right:-6px; top:-6px; background:#111; color:#fff; width:40px; height:40px; border-radius:20px;28 display:flex; align-items:center; justify-content:center; font-size:24px;29 }30 31 /* Page title and sort */32 .page-title-row {33 padding:0 30px; display:flex; align-items:center; justify-content:space-between; margin-top:6px;34 }35 .page-title { font-size:42px; font-weight:700; letter-spacing:0.5px; }36 .sort { font-size:36px; color:#222; display:flex; align-items:center; gap:12px; }37 38 /* Filter chips */39 .chips { display:flex; gap:20px; padding:24px 30px 18px; }40 .chip {41 padding:18px 28px; border:1px solid #d8d8d8; border-radius:60px; font-size:34px; color:#222; background:#fff;42 box-shadow:0 1px 0 rgba(0,0,0,0.02);43 }44 45 /* Grid */46 .grid {47 display:grid; grid-template-columns:1fr 1fr; gap:30px; padding:0 30px; margin-top:18px;48 }49 .card {50 width:100%; border-radius:8px;51 }52 .card-image {53 position:relative; width:100%; height:360px; background:#E0E0E0; border:1px solid #BDBDBD;54 display:flex; align-items:center; justify-content:center; color:#757575; font-size:28px;55 }56 .new-tag {57 position:absolute; left:18px; top:18px; background:#111; color:#fff; font-size:28px; font-weight:700;58 padding:10px 18px; border-radius:6px;59 }60 .heart {61 position:absolute; right:18px; top:18px; width:50px; height:50px; display:flex; align-items:center; justify-content:center;62 border-radius:50%;63 }64 65 .color-count { font-size:32px; color:#666; margin-top:22px; }66 .title {67 font-size:40px; font-weight:800; line-height:1.15; margin-top:18px; color:#111;68 }69 .price { font-size:40px; font-weight:800; margin-top:24px; }70 .promo {71 color:#B14B2A; font-size:34px; line-height:1.35; margin-top:18px; text-transform:uppercase;72 }73 74 /* Bottom nav */75 .bottom-nav {76 position:absolute; bottom:0; left:0; right:0; height:140px; border-top:1px solid #e6e6e6;77 background:#fff; display:flex; align-items:center; justify-content:space-around;78 }79 .nav-item { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:#777; font-size:28px; }80 .nav-item.active { color:#111; font-weight:700; }81 .nav-icon { width:64px; height:64px; display:flex; align-items:center; justify-content:center; }82 .nav-badge {83 position:absolute; right:30px; bottom:92px; width:44px; height:44px; background:#c9b384; color:#111;84 border-radius:22px; display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:700;85 }86</style>87</head>88<body>89<div id="render-target">90 91 <!-- Status bar -->92 <div class="status-bar">93 <div class="status-left">94 <div>12:38</div>95 <div>• • •</div>96 </div>97 <div class="status-right">98 <div>◔</div>99 <div>▮▮</div>100 </div>101 </div>102 103 <!-- Top actions -->104 <div class="top-actions">105 <div class="icon-btn" style="position:relative;">106 <!-- Back arrow -->107 <svg width="42" height="42" viewBox="0 0 24 24">108 <path d="M15 5l-7 7 7 7" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>109 </svg>110 </div>111 112 <div style="display:flex; align-items:center; gap:26px;">113 <div class="icon-btn" style="position:relative;">114 <!-- Filter/tune icon -->115 <svg width="42" height="42" viewBox="0 0 24 24">116 <path d="M5 7h14M9 7v6M5 17h14M15 17v-6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>117 </svg>118 <div class="badge">1</div>119 </div>120 <div class="icon-btn">121 <!-- Search -->122 <svg width="42" height="42" viewBox="0 0 24 24">123 <circle cx="11" cy="11" r="6" stroke="#111" stroke-width="2" fill="none"/>124 <path d="M20 20l-4-4" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>125 </svg>126 </div>127 </div>128 </div>129 130 <!-- Title + Sort -->131 <div class="page-title-row">132 <div class="page-title">34 PRODUCTS</div>133 <div class="sort">SORT134 <svg width="30" height="30" viewBox="0 0 24 24">135 <path d="M7 7l5-5 5 5M7 17l5 5 5-5" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>136 </svg>137 </div>138 </div>139 140 <!-- Chips -->141 <div class="chips">142 <div class="chip">ALL</div>143 <div class="chip">SOCCER</div>144 <div class="chip">BASKETBALL</div>145 <div class="chip">MOTORSPORT</div>146 </div>147 148 <!-- Product grid -->149 <div class="grid">150 151 <!-- Card 1 -->152 <div class="card">153 <div class="card-image">154 <div class="new-tag">NEW</div>155 <div class="heart">156 <svg width="42" height="42" viewBox="0 0 24 24">157 <path d="M12 21s-7-4.6-7-10a4.5 4.5 0 0 1 8-2.7A4.5 4.5 0 0 1 19 11c0 5.4-7 10-7 10z" stroke="#111" stroke-width="2" fill="none"/>158 </svg>159 </div>160 [IMG: White/Red Men's Soccer Cleats]161 </div>162 <div class="color-count">1 Color</div>163 <div class="title">FUTURE ULTIMATE FG/AG Men's Soccer Cleats</div>164 <div class="price">$220.00</div>165 <div class="promo">166 TAKE 40% OFF CLOTHING WHEN YOU BUY ANY SHOES. EXCLUSIONS APPLY. PRICE REFLECTED IN CART.167 </div>168 </div>169 170 <!-- Card 2 -->171 <div class="card">172 <div class="card-image">173 <div class="new-tag">NEW</div>174 <div class="heart">175 <svg width="42" height="42" viewBox="0 0 24 24">176 <path d="M12 21s-7-4.6-7-10a4.5 4.5 0 0 1 8-2.7A4.5 4.5 0 0 1 19 11c0 5.4-7 10-7 10z" stroke="#111" stroke-width="2" fill="none"/>177 </svg>178 </div>179 [IMG: White Mid Plexus Men's Sneakers]180 </div>181 <div class="color-count">1 Color</div>182 <div class="title">PUMA x KOCHÉ Mid Plexus Men's Sneakers</div>183 <div class="price">$180.00</div>184 <div class="promo">185 TAKE 40% OFF CLOTHING WHEN YOU BUY ANY SHOES. EXCLUSIONS APPLY. PRICE REFLECTED IN CART.186 </div>187 </div>188 189 <!-- Card 3 -->190 <div class="card">191 <div class="card-image">192 <div class="new-tag">NEW</div>193 <div class="heart">194 <svg width="42" height="42" viewBox="0 0 24 24">195 <path d="M12 21s-7-4.6-7-10a4.5 4.5 0 0 1 8-2.7A4.5 4.5 0 0 1 19 11c0 5.4-7 10-7 10z" stroke="#111" stroke-width="2" fill="none"/>196 </svg>197 </div>198 [IMG: Scuderia Ferrari Sneaker]199 </div>200 <div class="color-count">1 Color</div>201 <div class="title">Scuderia Ferrari Men's Sneakers</div>202 <div class="price">$—</div>203 <div class="promo">204 TAKE 40% OFF CLOTHING WHEN YOU BUY ANY SHOES. EXCLUSIONS APPLY. PRICE REFLECTED IN CART.205 </div>206 </div>207 208 <!-- Card 4 -->209 <div class="card">210 <div class="card-image">211 <div class="new-tag">NEW</div>212 <div class="heart">213 <svg width="42" height="42" viewBox="0 0 24 24">214 <path d="M12 21s-7-4.6-7-10a4.5 4.5 0 0 1 8-2.7A4.5 4.5 0 0 1 19 11c0 5.4-7 10-7 10z" stroke="#111" stroke-width="2" fill="none"/>215 </svg>216 </div>217 [IMG: Orange High-Top Sneaker]218 </div>219 <div class="color-count">1 Color</div>220 <div class="title">Suede Mid Men's Sneakers</div>221 <div class="price">$—</div>222 <div class="promo">223 TAKE 40% OFF CLOTHING WHEN YOU BUY ANY SHOES. EXCLUSIONS APPLY. PRICE REFLECTED IN CART.224 </div>225 </div>226 227 </div>228 229 <!-- Bottom navigation -->230 <div class="bottom-nav">231 <div class="nav-item">232 <div class="nav-icon">233 <!-- Home icon -->234 <svg width="42" height="42" viewBox="0 0 24 24">235 <path d="M4 10l8-6 8 6v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z" stroke="#777" stroke-width="2" fill="none" stroke-linejoin="round"/>236 </svg>237 </div>238 <div>HOME</div>239 </div>240 <div class="nav-item">241 <div class="nav-icon">242 <!-- Calendar / drops -->243 <svg width="42" height="42" viewBox="0 0 24 24">244 <rect x="3" y="5" width="18" height="16" rx="2" stroke="#777" stroke-width="2" fill="none"/>245 <path d="M16 3v4M8 3v4M3 10h18" stroke="#777" stroke-width="2"/>246 </svg>247 </div>248 <div>DROPS</div>249 </div>250 <div class="nav-item active">251 <div class="nav-icon">252 <!-- Search -->253 <svg width="42" height="42" viewBox="0 0 24 24">254 <circle cx="11" cy="11" r="6" stroke="#111" stroke-width="2" fill="none"/>255 <path d="M20 20l-4-4" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>256 </svg>257 </div>258 <div>SHOP</div>259 </div>260 <div class="nav-item">261 <div class="nav-icon">262 <!-- Cart -->263 <svg width="42" height="42" viewBox="0 0 24 24">264 <path d="M3 5h3l2 12h10l3-8H7" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>265 <circle cx="9" cy="20" r="1.8" fill="#777"/>266 <circle cx="18" cy="20" r="1.8" fill="#777"/>267 </svg>268 </div>269 <div>CART</div>270 </div>271 <div class="nav-item" style="position:relative;">272 <div class="nav-icon">273 <!-- Account -->274 <svg width="42" height="42" viewBox="0 0 24 24">275 <circle cx="12" cy="8" r="4" stroke="#777" stroke-width="2" fill="none"/>276 <path d="M4 21c2-4 6-6 8-6s6 2 8 6" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>277 </svg>278 </div>279 <div>ACCOUNT</div>280 <div class="nav-badge">1</div>281 </div>282 </div>283 284</div>285</body>286</html>