GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Categories UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #0f1317;13 color: #e6e9ed;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 color: #d9dde2;24 }25 .status-left, .status-right {26 display: flex; align-items: center; gap: 22px;27 }28 .status-time { font-size: 34px; font-weight: 600; letter-spacing: 0.5px; }29 .dot-icon {30 width: 20px; height: 20px; background: #bfc5cc; border-radius: 50%;31 }32 .wifi-icon svg, .battery-icon svg { display: block; }33 .wifi-icon svg { width: 44px; height: 30px; }34 .battery-icon svg { width: 44px; height: 30px; }35 36 /* Search bar */37 .search-wrap { padding: 16px 36px 8px 36px; }38 .search-bar {39 height: 120px;40 background: #272c33;41 border-radius: 20px;42 display: flex;43 align-items: center;44 padding: 0 28px;45 border: 1px solid #3a4048;46 gap: 26px;47 }48 .search-input {49 font-size: 36px;50 color: #b8bec6;51 flex: 1;52 }53 .scan-btn {54 width: 72px; height: 72px;55 border-radius: 16px;56 background: #2f353d;57 border: 1px solid #3a4048;58 display: flex; align-items: center; justify-content: center;59 }60 61 /* Tabs */62 .tabs {63 display: flex;64 justify-content: space-between;65 padding: 10px 36px 0 36px;66 align-items: flex-end;67 }68 .tab {69 font-size: 36px; color: #aab1b9;70 }71 .tab.active { color: #dfe5eb; font-weight: 600; }72 .underline {73 height: 4px;74 background: #1e6cff;75 width: 360px;76 margin: 16px 0 8px 36px;77 border-radius: 2px;78 }79 80 /* Category list */81 .list {82 margin-top: 10px;83 }84 .item {85 display: flex;86 align-items: center;87 padding: 22px 36px;88 background: #12161b;89 border-top: 1px solid #1b2026;90 }91 .thumb {92 width: 160px; height: 110px;93 background: #E0E0E0;94 border: 1px solid #BDBDBD;95 border-radius: 8px;96 display: flex; justify-content: center; align-items: center;97 color: #757575; font-size: 26px; text-align: center; padding: 8px;98 margin-right: 26px;99 }100 .title {101 font-size: 40px;102 flex: 1;103 color: #e9edf2;104 }105 .chevron {106 width: 44px; height: 44px;107 display: flex; align-items: center; justify-content: center;108 }109 .chevron svg { width: 28px; height: 28px; }110 111 /* Bottom navigation */112 .bottom-nav {113 position: absolute;114 bottom: 0;115 left: 0;116 right: 0;117 height: 170px;118 background: #14181d;119 border-top: 1px solid #1d2228;120 display: flex;121 align-items: center;122 justify-content: space-around;123 padding-top: 14px;124 }125 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #aab1b9; }126 .nav-item.active { color: #1e6cff; }127 .nav-icon { width: 60px; height: 60px; }128 .nav-label { font-size: 28px; }129 130</style>131</head>132<body>133<div id="render-target">134 135 <!-- Status bar -->136 <div class="status-bar">137 <div class="status-left">138 <div class="status-time">11:29</div>139 <div class="dot-icon"></div>140 <div class="dot-icon"></div>141 <div class="dot-icon"></div>142 <div class="dot-icon"></div>143 </div>144 <div class="status-right">145 <div class="wifi-icon">146 <svg viewBox="0 0 24 24" fill="#e6e9ed">147 <path d="M12 18c.9 0 1.7.7 1.7 1.6S12.9 21 12 21s-1.7-.7-1.7-1.6S11.1 18 12 18zm-6-6a12 12 0 0 1 12 0l-1.7 1.7a9.6 9.6 0 0 0-8.6 0L6 12zm-3-3a18 18 0 0 1 18 0l-1.7 1.7a15.6 15.6 0 0 0-14.6 0L3 9z"/>148 </svg>149 </div>150 <div class="battery-icon">151 <svg viewBox="0 0 26 24" fill="none">152 <rect x="2" y="6" width="18" height="12" rx="2" stroke="#e6e9ed" stroke-width="2"/>153 <rect x="4" y="8" width="12" height="8" fill="#e6e9ed"/>154 <rect x="21" y="9" width="3" height="6" rx="1" fill="#e6e9ed"/>155 </svg>156 </div>157 </div>158 </div>159 160 <!-- Search bar -->161 <div class="search-wrap">162 <div class="search-bar">163 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">164 <circle cx="11" cy="11" r="7" stroke="#b8bec6" stroke-width="2"></circle>165 <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#b8bec6" stroke-width="2" stroke-linecap="round"></line>166 </svg>167 <div class="search-input">What are you looking for?</div>168 <div class="scan-btn">169 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">170 <path d="M3 8V5a2 2 0 0 1 2-2h3M21 8V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3M21 16v3a2 2 0 0 1-2 2h-3" stroke="#c3c9d0" stroke-width="2" stroke-linecap="round"/>171 <rect x="8" y="8" width="8" height="8" rx="2" stroke="#c3c9d0" stroke-width="2"/>172 </svg>173 </div>174 </div>175 </div>176 177 <!-- Tabs -->178 <div class="tabs">179 <div class="tab active">Categories</div>180 <div class="tab">For you</div>181 </div>182 <div class="underline"></div>183 184 <!-- Category list -->185 <div class="list">186 187 <div class="item">188 <div class="thumb">[IMG: Computers & tablets]</div>189 <div class="title">Computers & tablets</div>190 <div class="chevron">191 <svg viewBox="0 0 24 24" fill="none">192 <path d="M9 6l6 6-6 6" stroke="#c3c9d0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>193 </svg>194 </div>195 </div>196 197 <div class="item">198 <div class="thumb">[IMG: Telephony phones]</div>199 <div class="title">Telephony</div>200 <div class="chevron">201 <svg viewBox="0 0 24 24" fill="none">202 <path d="M9 6l6 6-6 6" stroke="#c3c9d0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>203 </svg>204 </div>205 </div>206 207 <div class="item">208 <div class="thumb">[IMG: Image & sound]</div>209 <div class="title">Image & sound</div>210 <div class="chevron">211 <svg viewBox="0 0 24 24" fill="none">212 <path d="M9 6l6 6-6 6" stroke="#c3c9d0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>213 </svg>214 </div>215 </div>216 217 <div class="item">218 <div class="thumb">[IMG: Gaming consoles]</div>219 <div class="title">Gaming</div>220 <div class="chevron">221 <svg viewBox="0 0 24 24" fill="none">222 <path d="M9 6l6 6-6 6" stroke="#c3c9d0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>223 </svg>224 </div>225 </div>226 227 <div class="item">228 <div class="thumb">[IMG: Home office setup]</div>229 <div class="title">Working from home & business</div>230 <div class="chevron">231 <svg viewBox="0 0 24 24" fill="none">232 <path d="M9 6l6 6-6 6" stroke="#c3c9d0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>233 </svg>234 </div>235 </div>236 237 <div class="item">238 <div class="thumb">[IMG: Household & living]</div>239 <div class="title">Household & living</div>240 <div class="chevron">241 <svg viewBox="0 0 24 24" fill="none">242 <path d="M9 6l6 6-6 6" stroke="#c3c9d0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>243 </svg>244 </div>245 </div>246 247 <div class="item">248 <div class="thumb">[IMG: Kitchen appliances]</div>249 <div class="title">Kitchen</div>250 <div class="chevron">251 <svg viewBox="0 0 24 24" fill="none">252 <path d="M9 6l6 6-6 6" stroke="#c3c9d0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>253 </svg>254 </div>255 </div>256 257 <div class="item">258 <div class="thumb">[IMG: Sports & care]</div>259 <div class="title">Sports & care</div>260 <div class="chevron">261 <svg viewBox="0 0 24 24" fill="none">262 <path d="M9 6l6 6-6 6" stroke="#c3c9d0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>263 </svg>264 </div>265 </div>266 267 <div class="item">268 <div class="thumb">[IMG: Photo & video gear]</div>269 <div class="title">Photo & video</div>270 <div class="chevron">271 <svg viewBox="0 0 24 24" fill="none">272 <path d="M9 6l6 6-6 6" stroke="#c3c9d0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>273 </svg>274 </div>275 </div>276 277 <div class="item">278 <div class="thumb">[IMG: Deals & brands banners]</div>279 <div class="title">Deals & brands</div>280 <div class="chevron">281 <svg viewBox="0 0 24 24" fill="none">282 <path d="M9 6l6 6-6 6" stroke="#c3c9d0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>283 </svg>284 </div>285 </div>286 287 </div>288 289 <!-- Bottom navigation -->290 <div class="bottom-nav">291 <div class="nav-item">292 <div class="nav-icon">293 <svg viewBox="0 0 24 24" fill="none">294 <path d="M3 11l9-7 9 7v9a2 2 0 0 1-2 2h-5v-6H10v6H5a2 2 0 0 1-2-2v-9z" stroke="#aab1b9" stroke-width="2" stroke-linejoin="round"/>295 </svg>296 </div>297 <div class="nav-label">start</div>298 </div>299 300 <div class="nav-item active">301 <div class="nav-icon">302 <svg viewBox="0 0 24 24" fill="none">303 <circle cx="11" cy="11" r="7" stroke="#1e6cff" stroke-width="2"></circle>304 <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#1e6cff" stroke-width="2" stroke-linecap="round"></line>305 </svg>306 </div>307 <div class="nav-label">search</div>308 </div>309 310 <div class="nav-item">311 <div class="nav-icon">312 <svg viewBox="0 0 24 24" fill="none">313 <path d="M3 12l2-6h14l2 6-3 8H6l-3-8z" stroke="#aab1b9" stroke-width="2" stroke-linejoin="round"/>314 <path d="M9 12v8M15 12v8" stroke="#aab1b9" stroke-width="2"/>315 </svg>316 </div>317 <div class="nav-label">stores</div>318 </div>319 320 <div class="nav-item">321 <div class="nav-icon">322 <svg viewBox="0 0 24 24" fill="none">323 <path d="M6 6h15l-2 12H7L6 6z" stroke="#aab1b9" stroke-width="2"/>324 <circle cx="9" cy="20" r="2" fill="#aab1b9"/>325 <circle cx="18" cy="20" r="2" fill="#aab1b9"/>326 </svg>327 </div>328 <div class="nav-label">cart</div>329 </div>330 331 <div class="nav-item">332 <div class="nav-icon">333 <svg viewBox="0 0 24 24" fill="none">334 <circle cx="12" cy="8" r="4" stroke="#aab1b9" stroke-width="2"/>335 <path d="M4 21a8 8 0 0 1 16 0" stroke="#aab1b9" stroke-width="2" stroke-linecap="round"/>336 </svg>337 </div>338 <div class="nav-label">profile</div>339 </div>340 </div>341 342</div>343</body>344</html>