GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Toys Categories UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #FFFFFF; color: #222; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;13  }14 15  /* Status bar */16  .status-bar {17    height: 96px;18    display: flex; align-items: center;19    padding: 0 36px; color: #3A3A3A; font-weight: 600; font-size: 34px;20  }21  .status-icons { margin-left: 24px; display: flex; gap: 22px; align-items: center; }22  .status-icons svg { width: 32px; height: 32px; fill: #3A3A3A; opacity: 0.9; }23 24  /* Header / Logo */25  .header {26    position: relative;27    padding: 18px 48px 24px;28  }29  .logo {30    text-align: center; font-weight: 800; font-size: 82px; letter-spacing: 1px;31  }32  .logo .y1 { color: #5E8BE5; }33  .logo .a  { color: #F2B63F; }34  .logo .l  { color: #6CC17A; }35  .logo .a2 { color: #5E8BE5; }36  .logo .t  { color: #6CC17A; }37  .logo .o  { color: #9B67E6; }38  .logo .y2 { color: #5E8BE5; }39  .logo .s  { color: #9B67E6; }40 41  .notify {42    position: absolute; right: 48px; top: 10px;43    width: 116px; height: 116px; border-radius: 32px;44    background: #6F56E9; display: flex; align-items: center; justify-content: center;45    box-shadow: 0 8px 20px rgba(111,86,233,0.35);46  }47  .notify svg { width: 52px; height: 52px; fill: #FFFFFF; }48 49  /* Search */50  .search {51    margin: 10px 48px 32px;52    height: 120px; border-radius: 60px; background: #FFFFFF;53    border: 1px solid #E6E6E6;54    box-shadow: 0 8px 18px rgba(0,0,0,0.05);55    display: flex; align-items: center; padding: 0 36px; gap: 26px;56  }57  .search svg { width: 48px; height: 48px; fill: #7987A1; }58  .search input {59    border: none; outline: none; flex: 1;60    font-size: 42px; color: #77819B;61    background: transparent;62  }63 64  /* Grid */65  .grid {66    display: grid;67    grid-template-columns: 1fr 1fr;68    gap: 40px;69    padding: 0 48px;70  }71  .card {72    position: relative;73    border-radius: 48px;74    overflow: hidden;75  }76  .card .image {77    position: relative;78    height: 420px;79    border-radius: 48px;80    overflow: hidden;81  }82  .placeholder {83    width: 100%; height: 100%;84    background: #E0E0E0; border: 1px solid #BDBDBD;85    display: flex; align-items: center; justify-content: center; text-align: center;86    color: #757575; font-size: 34px; padding: 0 30px;87  }88  .caption {89    position: absolute; left: 0; right: 0; bottom: 0;90    background: #97B7D4; color: #FFFFFF;91    height: 120px; display: flex; align-items: center; justify-content: center;92    font-size: 42px; font-weight: 800;93  }94 95  /* Bottom navigation */96  .bottom-bar {97    position: absolute; left: 0; right: 0; bottom: 0;98    height: 250px; background: #7D63E6; border-top-left-radius: 60px; border-top-right-radius: 60px;99    box-shadow: 0 -10px 30px rgba(0,0,0,0.1);100    padding: 24px 30px 34px;101    display: flex; align-items: flex-end; justify-content: space-around;102  }103  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 16px; }104  .nav-item svg { width: 56px; height: 56px; fill: #FFFFFF; opacity: 0.95; }105  .nav-item span { font-size: 36px; color: #FFFFFF; opacity: 0.95; font-weight: 600; }106  .nav-item.active svg { fill: #FFD54F; }107  .nav-item.active span { color: #FFD54F; }108 109  /* Floating action button */110  .fab-wrap {111    position: absolute; left: 50%; bottom: 210px; transform: translateX(-50%);112    width: 180px; height: 180px; border-radius: 50%;113    background: #FFFFFF; box-shadow: 0 10px 24px rgba(0,0,0,0.18);114    display: flex; align-items: center; justify-content: center;115  }116  .fab {117    width: 150px; height: 150px; border-radius: 50%;118    background: #FFD54F; display: flex; align-items: center; justify-content: center;119    box-shadow: 0 14px 24px rgba(255,213,79,0.55);120  }121  .fab svg { width: 72px; height: 72px; fill: #7D63E6; }122 123  /* Home indicator */124  .home-indicator {125    position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);126    width: 360px; height: 14px; background: #000; opacity: 0.12; border-radius: 8px;127  }128</style>129</head>130<body>131<div id="render-target">132  <!-- Status bar -->133  <div class="status-bar">134    <div>12:31</div>135    <div class="status-icons">136      <!-- Mail -->137      <svg viewBox="0 0 24 24"><path d="M3 5h18v14H3V5zm2 2v10h14V7l-7 4-7-4z"/></svg>138      <!-- Message -->139      <svg viewBox="0 0 24 24"><path d="M4 3h16v14H7l-3 4V3z"/></svg>140      <!-- Refresh -->141      <svg viewBox="0 0 24 24"><path d="M12 6V3l4 4-4 4V8c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5h2c0 3.9-3.1 7-7 7s-7-3.1-7-7 3.1-7 7-7z"/></svg>142      <!-- Dot -->143      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/></svg>144    </div>145    <div style="margin-left:auto; display:flex; gap:22px; align-items:center;">146      <!-- WiFi -->147      <svg viewBox="0 0 24 24"><path d="M2 8c5.5-5.3 14.5-5.3 20 0l-2 2c-4.5-4.3-11.5-4.3-16 0L2 8zm4 4c3.3-3.1 8.7-3.1 12 0l-2 2c-2.6-2.5-6.4-2.5-9 0l-1-1-0-1zm4 4l2 2 2-2c-1.1-1.1-2.9-1.1-4 0z"/></svg>148      <!-- Battery -->149      <svg viewBox="0 0 26 24"><path d="M21 7h2v10h-2V7zM3 6h16v12H3V6zm2 2v8h12V8H5z"/></svg>150    </div>151  </div>152 153  <!-- Header -->154  <div class="header">155    <div class="logo" aria-label="yalatoys logo">156      <span class="y1">y</span><span class="a">a</span><span class="l">l</span><span class="a2">a</span><span class="t">t</span><span class="o">o</span><span class="y2">y</span><span class="s">s</span>157    </div>158    <div class="notify" aria-label="Notifications">159      <svg viewBox="0 0 24 24"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6V9c0-3.3-2.7-6-6-6S6 5.7 6 9v7l-2 2v1h16v-1l-2-2z"/></svg>160    </div>161  </div>162 163  <!-- Search bar -->164  <div class="search">165    <svg viewBox="0 0 24 24"><path d="M10 2a8 8 0 105.3 14.1l4.3 4.3 1.4-1.4-4.3-4.3A8 8 0 0010 2zm0 2a6 6 0 110 12 6 6 0 010-12z"/></svg>166    <input type="text" placeholder="What are you looking for?" />167  </div>168 169  <!-- Categories grid -->170  <div class="grid">171    <!-- Boys -->172    <div class="card">173      <div class="image">174        <div class="placeholder">[IMG: Kids with yellow skateboard and star-shaped toy]</div>175        <div class="caption">Boys</div>176      </div>177    </div>178    <!-- Girls -->179    <div class="card">180      <div class="image">181        <div class="placeholder">[IMG: Kid holding green foam toy]</div>182        <div class="caption">Girls</div>183      </div>184    </div>185    <!-- Toys for all -->186    <div class="card">187      <div class="image">188        <div class="placeholder">[IMG: Kids building colorful blocks]</div>189        <div class="caption">Toys for all</div>190      </div>191    </div>192    <!-- Toddler -->193    <div class="card">194      <div class="image">195        <div class="placeholder">[IMG: Toddler playing with small toy]</div>196        <div class="caption">Toddler</div>197      </div>198    </div>199    <!-- Outdoor -->200    <div class="card">201      <div class="image">202        <div class="placeholder">[IMG: Backyard trampoline]</div>203        <div class="caption">Outdoor</div>204      </div>205    </div>206    <!-- Action Figures -->207    <div class="card">208      <div class="image">209        <div class="placeholder">[IMG: Spider-Man action figure]</div>210        <div class="caption">Action Figures</div>211      </div>212    </div>213  </div>214 215  <!-- Floating action button -->216  <div class="fab-wrap">217    <div class="fab" aria-label="Categories">218      <svg viewBox="0 0 24 24">219        <path d="M3 3h7v7H3V3zm11 0h7v7h-7V3zM3 14h7v7H3v-7zm11 0h7v7h-7v-7z"/>220      </svg>221    </div>222  </div>223 224  <!-- Bottom navigation -->225  <div class="bottom-bar">226    <div class="nav-item">227      <svg viewBox="0 0 24 24"><path d="M12 3l9 8v10h-6v-6H9v6H3V11l9-8z"/></svg>228      <span>Home</span>229    </div>230    <div class="nav-item">231      <svg viewBox="0 0 24 24"><path d="M12 2l7 7-7 13L5 9l7-7zm0 3.4L7.6 9 12 17.7 16.4 9 12 5.4z"/></svg>232      <span>Offers</span>233    </div>234    <div class="nav-item active">235      <svg viewBox="0 0 24 24"><path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"/></svg>236      <span>Category</span>237    </div>238    <div class="nav-item">239      <svg viewBox="0 0 24 24"><path d="M7 6h14l-2 10H7L5 4H2V2h3l2 4zm2 12a2 2 0 104 0H9z"/></svg>240      <span>Cart</span>241    </div>242    <div class="nav-item">243      <svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-5 0-9 3-9 6v2h18v-2c0-3-4-6-9-6z"/></svg>244      <span>Account</span>245    </div>246  </div>247 248  <div class="home-indicator"></div>249</div>250</body>251</html>