GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Category Overlay UI</title>6<style>7 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8 #render-target {9 width:1080px; height:2400px;10 position:relative; overflow:hidden;11 background:#000000;12 border-radius:0;13 }14 15 /* Status bar */16 .status-bar {17 position:absolute; top:0; left:0; right:0;18 height:110px; color:#fff;19 display:flex; align-items:center; justify-content:space-between;20 padding:0 36px; font-weight:600; font-size:38px;21 }22 .status-left { display:flex; gap:24px; align-items:center; }23 .status-right { display:flex; gap:26px; align-items:center; }24 .icon {25 width:44px; height:44px;26 display:inline-flex; align-items:center; justify-content:center;27 }28 .icon svg { width:100%; height:100%; fill:#fff; }29 30 /* Background content (behind modal) */31 .bg-content {32 position:absolute; top:140px; left:40px; right:40px; bottom:140px;33 padding:20px;34 }35 .card-row {36 display:flex; gap:26px;37 }38 .card {39 width:480px; height:420px;40 background:#121212; border-radius:24px;41 box-shadow:0 0 0 1px #222 inset;42 padding:20px;43 }44 .img-ph {45 width:100%; height:320px;46 background:#E0E0E0; border:1px solid #BDBDBD;47 display:flex; align-items:center; justify-content:center;48 color:#757575; font-size:32px; border-radius:20px;49 }50 .card-title {51 margin-top:16px; color:#fff; font-size:34px; font-weight:600;52 }53 54 /* Modal sheet */55 .sheet {56 position:absolute;57 left:84px; right:84px;58 top:190px; bottom:160px;59 background:#262626;60 border-radius:18px;61 box-shadow:0 18px 40px rgba(0,0,0,0.6);62 color:#fff;63 display:flex; flex-direction:column;64 }65 .sheet-header {66 position:relative; padding:30px 30px 18px 30px;67 text-align:center; font-size:56px; font-weight:700;68 }69 .back-btn {70 position:absolute; left:24px; top:24px;71 width:70px; height:70px; display:flex; align-items:center; justify-content:center;72 }73 .divider { height:1px; background:#3a3a3a; margin:0 0 8px 0; }74 75 .list {76 overflow:auto; flex:1;77 padding:6px 20px 0 20px;78 }79 .item {80 display:flex; align-items:center; gap:26px;81 padding:26px 10px 26px 10px;82 color:#fff; font-size:42px; line-height:1.2;83 }84 .item .label { flex:1; }85 .item.bold .label { font-weight:700; }86 .radio {87 width:48px; height:48px; border-radius:50%;88 border:4px solid #ffffff; box-sizing:border-box;89 }90 .item + .divider { margin-top:12px; }91 92 .sheet-footer {93 padding:18px 30px 26px 30px;94 border-top:1px solid #3a3a3a;95 }96 .cta {97 width:100%; height:120px; border-radius:60px;98 background:#6EA0FF; color:#0b0b0b;99 display:flex; align-items:center; justify-content:center;100 font-size:42px; font-weight:800; color:#ffffff;101 }102 103 /* Bottom nav and gesture */104 .bottom-nav {105 position:absolute; left:0; right:0; bottom:80px; height:120px;106 background:#0a0a0a; border-top:1px solid #1f1f1f;107 display:flex; align-items:center; padding:0 40px; color:#9ea3ab;108 gap:40px;109 }110 .nav-item { display:flex; align-items:center; gap:14px; font-size:34px; }111 .gesture {112 position:absolute; left:50%; transform:translateX(-50%);113 bottom:22px; width:320px; height:12px; border-radius:12px; background:#ffffff20;114 }115</style>116</head>117<body>118<div id="render-target">119 120 <!-- Status bar -->121 <div class="status-bar">122 <div class="status-left">123 <div>1:36</div>124 <div class="icon">125 <!-- magnify/search -->126 <svg viewBox="0 0 24 24">127 <path d="M10 2a8 8 0 1 0 5.3 14.1l5.2 5.2 1.5-1.5-5.2-5.2A8 8 0 0 0 10 2zm0 2a6 6 0 1 1 0 12A6 6 0 0 1 10 4z"/>128 </svg>129 </div>130 <div class="icon">131 <!-- bell -->132 <svg viewBox="0 0 24 24">133 <path d="M12 2a4 4 0 0 0-4 4v2c-2 1-3 3-3 5v3h18v-3c0-2-1-4-3-5V6a4 4 0 0 0-4-4h-4zM9 19a3 3 0 0 0 6 0H9z"/>134 </svg>135 </div>136 <div class="icon">137 <!-- dot -->138 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/></svg>139 </div>140 </div>141 <div class="status-right">142 <div class="icon">143 <!-- do not disturb -->144 <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20A10 10 0 0 0 12 2zm-6 9h12v2H6z"/></svg>145 </div>146 <div class="icon">147 <!-- wifi -->148 <svg viewBox="0 0 24 24">149 <path d="M12 18l2 2-2 2-2-2 2-2zm-6-6a10 10 0 0 1 12 0l-1.5 1.5a8 8 0 0 0-9 0L6 12zm-3-3a14 14 0 0 1 18 0l-1.6 1.6a12 12 0 0 0-14.8 0L3 9z"/>150 </svg>151 </div>152 <div style="font-size:34px; font-weight:700;">100%</div>153 <div class="icon">154 <!-- battery -->155 <svg viewBox="0 0 24 24">156 <path d="M2 8h16v8H2V8zm18 3h2v2h-2v-2z"/>157 </svg>158 </div>159 </div>160 </div>161 162 <!-- Background product cards (partially visible under sheet) -->163 <div class="bg-content">164 <div class="card-row">165 <div class="card">166 <div class="img-ph">[IMG: Tool Kit Photo]</div>167 <div class="card-title">Toolkit Set</div>168 </div>169 <div class="card">170 <div class="img-ph">[IMG: Socket Set Photo]</div>171 <div class="card-title">Socket Organizer</div>172 </div>173 </div>174 </div>175 176 <!-- Category sheet -->177 <div class="sheet">178 <div class="sheet-header">179 <div class="back-btn">180 <svg viewBox="0 0 24 24">181 <path d="M15 18l-6-6 6-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>182 </svg>183 </div>184 Category185 </div>186 <div class="divider"></div>187 188 <div class="list">189 <div class="item bold">190 <div class="radio"></div>191 <div class="label">All Categories</div>192 </div>193 <div class="divider"></div>194 195 <div class="item bold">196 <div class="radio"></div>197 <div class="label">Home & Garden</div>198 </div>199 <div class="divider"></div>200 201 <div class="item bold">202 <div class="radio"></div>203 <div class="label">Tools & Workshop Equipment</div>204 </div>205 <div class="divider"></div>206 207 <div class="item bold">208 <div class="radio"></div>209 <div class="label">Hand Tools</div>210 </div>211 <div class="divider"></div>212 213 <div class="item">214 <div class="radio"></div>215 <div class="label">Screwdrivers & Nutdrivers</div>216 </div>217 <div class="divider"></div>218 219 <div class="item">220 <div class="radio"></div>221 <div class="label">Hand Tool Sets</div>222 </div>223 <div class="divider"></div>224 225 <div class="item">226 <div class="radio"></div>227 <div class="label">Wrenches</div>228 </div>229 <div class="divider"></div>230 231 <div class="item">232 <div class="radio"></div>233 <div class="label">Other Hand Tools</div>234 </div>235 <div class="divider"></div>236 237 <div class="item">238 <div class="radio"></div>239 <div class="label">Pliers</div>240 </div>241 <div class="divider"></div>242 243 <div class="item">244 <div class="radio"></div>245 <div class="label">Chisels</div>246 </div>247 <div class="divider"></div>248 249 <div class="item">250 <div class="radio"></div>251 <div class="label">Multi-Tools</div>252 </div>253 <div class="divider"></div>254 255 <div class="item">256 <div class="radio"></div>257 <div class="label">Hammers & Mallets</div>258 </div>259 <div class="divider"></div>260 261 <div class="item">262 <div class="radio"></div>263 <div class="label">Knives & Blades</div>264 </div>265 </div>266 267 <div class="sheet-footer">268 <div class="cta">Show 13,000+ results</div>269 </div>270 </div>271 272 <!-- Bottom navigation and gesture -->273 <div class="bottom-nav">274 <div class="nav-item">275 <svg class="icon" viewBox="0 0 24 24">276 <path d="M12 3l9 7v10h-6v-6H9v6H3V10l9-7z" fill="#9ea3ab"/>277 </svg>278 <div>Home</div>279 </div>280 </div>281 <div class="gesture"></div>282 283</div>284</body>285</html>