GD-ML/AndroidCode

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>Electronics Category UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #ffffff;12  }13 14  /* Top gradient status/header area */15  .status-bar {16    height: 190px;17    background: linear-gradient(90deg, #86e1e9, #b0f0cf);18    padding: 26px 36px 0 36px;19    color: #1b1b1b;20  }21  .status-row {22    display: flex; justify-content: space-between; align-items: center;23    font-weight: 600; font-size: 38px; color: #2b2b2b;24  }25  .status-icons { display: flex; gap: 28px; align-items: center; }26  .status-dot { width: 22px; height: 22px; background: #333; border-radius: 50%; opacity: .7; }27  .battery {28    width: 40px; height: 22px; border: 3px solid #333; border-radius: 4px; position: relative;29  }30  .battery::after { content: ""; position: absolute; right: -8px; top: 5px; width: 6px; height: 12px; background: #333; border-radius: 2px; }31  .battery .lvl { position: absolute; left: 3px; top: 3px; right: 3px; bottom: 3px; background: #66c26b; }32 33  .search-row {34    margin-top: 24px;35    display: flex; align-items: center; gap: 24px;36  }37  .back-btn {38    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;39    border-radius: 50%;40  }41  .search-box {42    flex: 1; height: 110px; background: #fff; border-radius: 24px;43    box-shadow: 0 6px 16px rgba(0,0,0,0.15);44    display: flex; align-items: center; padding: 0 36px; gap: 22px;45  }46  .search-placeholder {47    font-size: 40px; color: #6b6f75; flex: 1;48  }49  .scan-icon {50    width: 72px; height: 72px; border-radius: 18px; background: #f3f5f7;51    display: flex; justify-content: center; align-items: center; border: 1px solid #d7d9dc;52  }53 54  /* Main content */55  .content {56    position: absolute; left: 0; right: 0; top: 190px; bottom: 180px;57    overflow: hidden; /* screenshot view */58  }59  .section { padding: 24px 30px; }60 61  /* Image placeholder style */62  .img-ph {63    background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;64    display: flex; align-items: center; justify-content: center; text-align: center;65  }66 67  .hero {68    height: 620px; border-radius: 18px;69    font-size: 40px; font-weight: 600;70  }71  .dots { display: flex; justify-content: center; gap: 18px; padding: 20px 0; }72  .dot {73    width: 22px; height: 22px; border-radius: 50%; background: #d9d9d9;74  }75  .dot.active { background: #9c9c9c; }76 77  .ad-banner { height: 140px; border-radius: 12px; font-size: 34px; }78 79  .divider { height: 14px; background: #f0f2f5; margin: 16px -30px; }80 81  .categories { display: grid; grid-template-columns: repeat(6, 1fr); gap: 28px; padding-top: 16px; }82  .cat {83    text-align: center;84  }85  .cat .circle {86    width: 160px; height: 160px; border-radius: 50%;87    margin: 0 auto 18px auto;88    background: #E0E0E0; border: 1px solid #BDBDBD;89    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px; padding: 10px;90  }91  .cat label {92    font-size: 32px; color: #1c1f23;93  }94 95  .header-text {96    font-size: 58px; font-weight: 800; color: #1c1f23; line-height: 1.1;97    padding: 10px 30px 0 30px;98  }99 100  .cards-row {101    display: flex; gap: 24px; padding: 24px 30px 0 30px;102  }103  .mini-card { width: 320px; height: 180px; border-radius: 10px; font-size: 26px; }104 105  /* Bottom navigation */106  .bottom-nav {107    position: absolute; left: 0; right: 0; bottom: 0; height: 180px;108    background: #ffffff; border-top: 1px solid #e5e7eb;109    display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; text-align: center;110  }111  .nav-item { color: #222; }112  .nav-item.active { color: #10b4b5; }113  .nav-icon { display: block; margin: 0 auto 10px auto; }114  .nav-label { font-size: 30px; }115 116  .active-underline {117    position: absolute; left: 0; bottom: 0; height: 6px; width: 20%;118    background: #10b4b5; border-radius: 3px;119  }120 121  /* Gesture bar mimic */122  .gesture-bar {123    position: absolute; bottom: 190px; left: 50%; transform: translateX(-50%);124    width: 380px; height: 12px; border-radius: 10px; background: #cfcfcf;125    opacity: .9;126  }127 128  /* Simple SVG defaults */129  svg { width: 54px; height: 54px; }130</style>131</head>132<body>133<div id="render-target">134  <!-- Top gradient status bar and search -->135  <div class="status-bar">136    <div class="status-row">137      <div>9:38</div>138      <div class="status-icons">139        <div class="status-dot"></div>140        <div class="battery"><div class="lvl"></div></div>141      </div>142    </div>143    <div class="search-row">144      <div class="back-btn">145        <svg viewBox="0 0 24 24">146          <path d="M14 6 L8 12 L14 18" fill="none" stroke="#1b1b1b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>147        </svg>148      </div>149      <div class="search-box">150        <svg viewBox="0 0 24 24">151          <circle cx="10" cy="10" r="6" fill="none" stroke="#7a7f86" stroke-width="2"></circle>152          <path d="M15 15 L21 21" stroke="#7a7f86" stroke-width="2" stroke-linecap="round"></path>153        </svg>154        <div class="search-placeholder">Search in Electronics</div>155        <div class="scan-icon">156          <svg viewBox="0 0 24 24">157            <path d="M3 8 V5 H8 M21 8 V5 H16 M3 16 V19 H8 M21 16 V19 H16" stroke="#7a7f86" stroke-width="2" fill="none" stroke-linecap="round"></path>158          </svg>159        </div>160      </div>161    </div>162  </div>163 164  <!-- Scrollable content area (as seen in screenshot) -->165  <div class="content">166    <div class="section">167      <div class="img-ph hero">[IMG: boAt earbuds promotional banner]</div>168      <div class="dots">169        <div class="dot"></div><div class="dot"></div><div class="dot active"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>170      </div>171    </div>172 173    <div class="section">174      <div class="img-ph ad-banner">[IMG: SBI Card - 10% Instant Discount Ad]</div>175    </div>176 177    <div class="divider"></div>178 179    <div class="section">180      <div class="categories">181        <div class="cat">182          <div class="circle">[IMG: Laptop]</div>183          <label>Laptops</label>184        </div>185        <div class="cat">186          <div class="circle">[IMG: Smartwatch]</div>187          <label>Smartwatch</label>188        </div>189        <div class="cat">190          <div class="circle">[IMG: Headphones]</div>191          <label>Headphones</label>192        </div>193        <div class="cat">194          <div class="circle">[IMG: Monitor & Peripherals]</div>195          <label>Peripherals</label>196        </div>197        <div class="cat">198          <div class="circle">[IMG: Tablet]</div>199          <label>Tablets</label>200        </div>201        <div class="cat">202          <div class="circle">[IMG: Gaming Laptop]</div>203          <label>Gaming Laptops</label>204        </div>205        <div class="cat">206          <div class="circle">[IMG: Camera]</div>207          <label>Cameras & Accessories</label>208        </div>209        <div class="cat">210          <div class="circle">[IMG: Keyboard & Mouse]</div>211          <label>Computer Accessories</label>212        </div>213        <div class="cat">214          <div class="circle">[IMG: Soundbar]</div>215          <label>Home Audio</label>216        </div>217        <div class="cat">218          <div class="circle">[IMG: Misc gadgets]</div>219          <label>Explore more</label>220        </div>221      </div>222    </div>223 224    <div class="divider"></div>225 226    <div class="header-text">Electronics survey: Your opinion matters</div>227 228    <div class="cards-row">229      <div class="img-ph mini-card">[IMG: Laptop preference survey card]</div>230      <div class="img-ph mini-card">[IMG: Shopping experience survey card]</div>231      <div class="img-ph mini-card">[IMG: Feedback card]</div>232    </div>233  </div>234 235  <!-- Gesture bar -->236  <div class="gesture-bar"></div>237 238  <!-- Bottom navigation -->239  <div class="bottom-nav">240    <div class="active-underline"></div>241    <div class="nav-item active">242      <svg class="nav-icon" viewBox="0 0 24 24">243        <path d="M3 11 L12 3 L21 11 V21 H14 V15 H10 V21 H3 Z" fill="none" stroke="#10b4b5" stroke-width="2" stroke-linejoin="round"></path>244      </svg>245      <div class="nav-label">Home</div>246    </div>247    <div class="nav-item">248      <svg class="nav-icon" viewBox="0 0 24 24">249        <circle cx="12" cy="8" r="4" fill="none" stroke="#222" stroke-width="2"></circle>250        <path d="M4 21 C4 15 20 15 20 21" stroke="#222" stroke-width="2" fill="none"></path>251      </svg>252      <div class="nav-label">You</div>253    </div>254    <div class="nav-item">255      <svg class="nav-icon" viewBox="0 0 24 24">256        <path d="M7 4 H17 V10 H7 Z M4 13 H14 V20 H4 Z M16 13 H20 V20 H16 Z" fill="none" stroke="#222" stroke-width="2"></path>257      </svg>258      <div class="nav-label">More</div>259    </div>260    <div class="nav-item">261      <svg class="nav-icon" viewBox="0 0 24 24">262        <path d="M6 6 H21 L19 14 H8 L6 6 Z" fill="none" stroke="#222" stroke-width="2"></path>263        <circle cx="9" cy="19" r="2" fill="none" stroke="#222" stroke-width="2"></circle>264        <circle cx="17" cy="19" r="2" fill="none" stroke="#222" stroke-width="2"></circle>265      </svg>266      <div class="nav-label">Cart</div>267    </div>268    <div class="nav-item">269      <svg class="nav-icon" viewBox="0 0 2