GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Shoes Category 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;9 position:relative; overflow:hidden;10 background:#ffffff;11 }12 /* Status bar */13 .status-bar {14 position:absolute; top:0; left:0; right:0;15 height:90px; padding:0 32px;16 display:flex; align-items:center; justify-content:space-between;17 color:#111; font-weight:600; font-size:36px;18 }19 .status-left { display:flex; align-items:center; gap:24px; }20 .status-right { display:flex; align-items:center; gap:24px; }21 .dot {22 width:22px; height:22px; background:#222; border-radius:50%;23 opacity:0.75;24 }25 /* App bar */26 .app-bar {27 position:absolute; top:90px; left:0; right:0;28 height:120px; display:flex; align-items:center;29 padding:0 32px; border-bottom:1px solid #eee;30 background:#fff; color:#111;31 }32 .app-title {33 position:absolute; left:0; right:0; text-align:center;34 font-size:46px; font-weight:800; letter-spacing:1px;35 }36 .back-btn {37 width:72px; height:72px; display:flex; align-items:center; justify-content:center;38 }39 .icon { width:44px; height:44px; }40 /* Banner image placeholder */41 .banner {42 position:absolute; top:210px; left:0; right:0;43 height:520px; background:#E0E0E0; border:1px solid #BDBDBD;44 display:flex; align-items:center; justify-content:center;45 color:#757575; font-size:34px;46 }47 /* List */48 .list {49 position:absolute; top:730px; left:0; right:0; bottom:220px;50 overflow:auto; /* in case content extends */51 }52 .item {53 height:140px; display:flex; align-items:center; justify-content:space-between;54 padding:0 48px; border-bottom:1px solid #ECECEC; background:#fff;55 }56 .item .label {57 font-size:44px; font-weight:800; letter-spacing:0.5px; color:#111;58 }59 .chev {60 width:38px; height:38px;61 }62 /* Bottom nav */63 .bottom-nav {64 position:absolute; bottom:0; left:0; right:0;65 height:220px; border-top:1px solid #E6E6E6; background:#fff;66 display:flex; align-items:center; justify-content:space-around;67 }68 .tab {69 width:20%; height:100%;70 display:flex; flex-direction:column; align-items:center; justify-content:center;71 color:#7a7a7a; font-size:32px; font-weight:700;72 }73 .tab .icon { width:64px; height:64px; margin-bottom:14px; }74 .tab.active { color:#111; }75 .badge {76 position:absolute; right:36px; bottom:150px;77 width:66px; height:66px; background:#c7b28e; color:#fff;78 border-radius:50%; display:flex; align-items:center; justify-content:center;79 font-weight:800; font-size:34px;80 }81</style>82</head>83<body>84<div id="render-target">85 86 <!-- Status Bar -->87 <div class="status-bar">88 <div class="status-left">89 <div>12:35</div>90 <div class="dot"></div>91 <div class="dot"></div>92 <div class="dot"></div>93 <div class="dot"></div>94 </div>95 <div class="status-right">96 <!-- WiFi icon -->97 <svg class="icon" viewBox="0 0 24 24">98 <path d="M12 18.5c.9 0 1.7.7 1.7 1.5s-.8 1.5-1.7 1.5-1.7-.7-1.7-1.5.8-1.5 1.7-1.5z" fill="#111"/>99 <path d="M3 10c5-4.5 13-4.5 18 0l-2 2c-4.4-3.9-9.6-3.9-14 0L3 10z" fill="#111"/>100 <path d="M6 13c3.7-3 8.3-3 12 0l-2 2c-2.6-2.1-5.4-2.1-8 0l-2-2z" fill="#111"/>101 </svg>102 <!-- Battery icon -->103 <svg class="icon" viewBox="0 0 24 24">104 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="#111"/>105 <rect x="21" y="9" width="2" height="6" fill="#111"/>106 <rect x="4" y="8" width="14" height="8" fill="#fff"/>107 <rect x="4" y="8" width="10" height="8" fill="#111"/>108 </svg>109 </div>110 </div>111 112 <!-- App Bar -->113 <div class="app-bar">114 <div class="back-btn">115 <svg class="icon" viewBox="0 0 24 24">116 <path d="M15.5 4l-8 8 8 8" stroke="#111" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>117 </svg>118 </div>119 <div class="app-title">SHOES</div>120 </div>121 122 <!-- Banner Placeholder -->123 <div class="banner">[IMG: Tote bag and white sneaker on stool]</div>124 125 <!-- List Items -->126 <div class="list">127 <div class="item">128 <div class="label">ALL SHOES</div>129 <svg class="chev" viewBox="0 0 24 24">130 <path d="M8 4l8 8-8 8" stroke="#111" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>131 </svg>132 </div>133 134 <div class="item">135 <div class="label">CLASSICS</div>136 <svg class="chev" viewBox="0 0 24 24">137 <path d="M8 4l8 8-8 8" stroke="#111" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>138 </svg>139 </div>140 141 <div class="item">142 <div class="label">SUEDE</div>143 <svg class="chev" viewBox="0 0 24 24">144 <path d="M8 4l8 8-8 8" stroke="#111" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>145 </svg>146 </div>147 148 <div class="item">149 <div class="label">RS COLLECTION</div>150 <svg class="chev" viewBox="0 0 24 24">151 <path d="M8 4l8 8-8 8" stroke="#111" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>152 </svg>153 </div>154 155 <div class="item">156 <div class="label">RIDER PACK</div>157 <svg class="chev" viewBox="0 0 24 24">158 <path d="M8 4l8 8-8 8" stroke="#111" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>159 </svg>160 </div>161 162 <div class="item">163 <div class="label">SLIPSTREAM</div>164 <svg class="chev" viewBox="0 0 24 24">165 <path d="M8 4l8 8-8 8" stroke="#111" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>166 </svg>167 </div>168 169 <div class="item">170 <div class="label">LIFESTYLE</div>171 <svg class="chev" viewBox="0 0 24 24">172 <path d="M8 4l8 8-8 8" stroke="#111" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>173 </svg>174 </div>175 176 <div class="item">177 <div class="label">TRAINING + GYM</div>178 <svg class="chev" viewBox="0 0 24 24">179 <path d="M8 4l8 8-8 8" stroke="#111" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>180 </svg>181 </div>182 </div>183 184 <!-- Bottom Navigation -->185 <div class="bottom-nav">186 <div class="tab">187 <!-- Home icon -->188 <svg class="icon" viewBox="0 0 24 24">189 <path d="M3 10l9-7 9 7v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V10z" fill="#7a7a7a"/>190 <path d="M9 22v-7h6v7" fill="#fff"/>191 </svg>192 <div>HOME</div>193 </div>194 195 <div class="tab">196 <!-- Calendar icon -->197 <svg class="icon" viewBox="0 0 24 24">198 <rect x="3" y="5" width="18" height="16" rx="2" ry="2" fill="#7a7a7a"/>199 <rect x="5" y="9" width="14" height="10" fill="#fff"/>200 <rect x="6" y="3" width="4" height="4" fill="#7a7a7a"/>201 <rect x="14" y="3" width="4" height="4" fill="#7a7a7a"/>202 </svg>203 <div>DROPS</div>204 </div>205 206 <div class="tab active">207 <!-- Search icon -->208 <svg class="icon" viewBox="0 0 24 24">209 <circle cx="10" cy="10" r="7" stroke="#111" stroke-width="3.5" fill="none"/>210 <path d="M16 16l6 6" stroke="#111" stroke-width="3.5" stroke-linecap="round"/>211 </svg>212 <div>SHOP</div>213 </div>214 215 <div class="tab">216 <!-- Cart icon -->217 <svg class="icon" viewBox="0 0 24 24">218 <path d="M3 5h3l2 10h9l2-7H8" stroke="#7a7a7a" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>219 <circle cx="9" cy="20" r="2" fill="#7a7a7a"/>220 <circle cx="18" cy="20" r="2" fill="#7a7a7a"/>221 </svg>222 <div>CART</div>223 </div>224 225 <div class="tab" style="position:relative;">226 <!-- Account icon -->227 <svg class="icon" viewBox="0 0 24 24">228 <circle cx="12" cy="8" r="4" fill="#7a7a7a"/>229 <path d="M4 22c0-4.4 3.6-8 8-8s8 3.6 8 8" fill="#7a7a7a"/>230 </svg>231 <div>ACCOUNT</div>232 </div>233 <div class="badge">1</div>234 </div>235 236</div>237</body>238</html>