GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Kitchen & appliances UI</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width:1080px; height:2400px;10    position:relative; overflow:hidden;11    background:#ffffff;12  }13 14  /* Status bar */15  .status-bar{16    height:90px; padding:0 28px;17    display:flex; align-items:center; justify-content:space-between;18    color:#222; font-size:32px; letter-spacing:1px;19  }20  .status-right{ display:flex; align-items:center; gap:22px; color:#222; }21  .icon{22    width:38px; height:38px; display:inline-block;23  }24  /* Hero image */25  .hero{26    width:100%; height:520px;27    background:#E0E0E0; border-top:1px solid #BDBDBD; border-bottom:1px solid #BDBDBD;28    display:flex; align-items:center; justify-content:center; color:#666;29    font-size:36px;30  }31 32  /* Back button */33  .back-btn{34    position:absolute; top:128px; left:38px;35    width:112px; height:112px; background:#fff; border-radius:56px;36    display:flex; align-items:center; justify-content:center;37    box-shadow:0 4px 16px rgba(0,0,0,0.15); border:1px solid #eee;38  }39  .back-btn svg{ width:46px; height:46px; }40 41  /* Title */42  .title{43    padding:40px 42px 20px 42px;44    font-size:64px; font-weight:800; color:#111;45  }46 47  /* Category row */48  .cards{49    padding:0 42px;50    display:grid; grid-template-columns: 1fr 1fr; gap:34px;51  }52  .card{53    background:#fff; border:1px solid #e6e6e6; border-radius:6px; overflow:hidden;54  }55  .card .img{56    height:360px; background:#E0E0E0; border-bottom:1px solid #BDBDBD;57    display:flex; align-items:center; justify-content:center; color:#757575; font-size:30px;58  }59  .card .caption{60    padding:28px; font-size:42px; color:#222;61  }62 63  /* Filter pills */64  .filters{ padding:30px 42px 14px 42px; display:flex; gap:26px; overflow:hidden; }65  .pill{66    padding:26px 40px; border-radius:60px; background:#f3f3f3; color:#222; font-size:36px; border:1px solid #e2e2e2;67  }68  .pill.selected{69    background:#fff; border:3px solid #111; font-weight:700;70  }71 72  .underline-wrap{ padding:0 42px; }73  .underline{74    height:4px; background:#e9e9e9; position:relative;75  }76  .underline .indicator{77    position:absolute; left:0; top:0; height:4px; width:170px; background:#111;78  }79 80  /* Availability panel */81  .availability{82    margin-top:34px; background:#f6f6f6; border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5;83    padding:34px 42px;84    display:flex; align-items:center; justify-content:space-between;85  }86  .avail-left{87    display:flex; align-items:center; gap:22px;88  }89  .small-icons{ display:flex; align-items:center; gap:16px; }90  .avail-text .big{ font-size:48px; font-weight:800; color:#1a1a1a; }91  .avail-text .sub{ font-size:32px; color:#666; margin-top:8px; }92  .toggle{93    width:290px; height:150px; background:#0c0c0c; border-radius:80px;94    display:flex; align-items:center; justify-content:center;95  }96  .toggle svg{ width:64px; height:64px; fill:#fff; }97 98  .products-count{99    padding:40px 42px; font-size:40px; color:#222;100  }101 102  /* Bottom nav */103  .bottom-nav{104    position:absolute; left:0; right:0; bottom:54px;105    height:132px; border-top:1px solid #e9e9e9; background:#ffffff;106    display:flex; align-items:center; justify-content:space-around;107  }108  .nav-item{ display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; color:#8a8a8a; font-size:26px; }109  .nav-item.active{ color:#111; }110  .nav-item svg{ width:60px; height:60px; }111 112  /* Gesture bar */113  .gesture{114    position:absolute; bottom:16px; left:50%; transform:translateX(-50%);115    width:420px; height:10px; background:#111; opacity:.85; border-radius:6px;116  }117</style>118</head>119<body>120<div id="render-target">121 122  <!-- Status bar -->123  <div class="status-bar">124    <div>1:14</div>125    <div class="status-right">126      <span>87°</span>127      <!-- simple icons -->128      <svg class="icon" viewBox="0 0 24 24">129        <path fill="#222" d="M2 10l10-7 10 7v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-9z" opacity=".15"/>130        <path fill="#222" d="M3 10l9-6 9 6v8h-3v-6H6v6H3v-8z"/>131      </svg>132      <svg class="icon" viewBox="0 0 24 24">133        <rect x="1" y="6" width="20" height="12" rx="2" ry="2" fill="none" stroke="#222" stroke-width="2"/>134        <rect x="3" y="8" width="12" height="8" fill="#222"/>135        <rect x="22" y="10" width="2" height="8" fill="#222"/>136      </svg>137    </div>138  </div>139 140  <!-- Hero image placeholder -->141  <div class="hero">[IMG: White kitchen hero]</div>142 143  <!-- Back button -->144  <div class="back-btn">145    <svg viewBox="0 0 24 24">146      <path d="M15 4L7 12l8 8" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>147    </svg>148  </div>149 150  <!-- Title -->151  <div class="title">Kitchen & appliances</div>152 153  <!-- Category cards -->154  <div class="cards">155    <div class="card">156      <div class="img">[IMG: Bright white kitchen system]</div>157      <div class="caption">Kitchen systems</div>158    </div>159    <div class="card">160      <div class="img">[IMG: Matte gray kitchen cabinets]</div>161      <div class="caption">Kitchen cabinets</div>162    </div>163    <div class="card">164      <div class="img">[IMG: Wood countertop close-up]</div>165      <div class="caption">Kitchen accessories</div>166    </div>167  </div>168 169  <!-- Filter pills -->170  <div class="filters">171    <div class="pill selected">Best match</div>172    <div class="pill">Size</div>173    <div class="pill">Color</div>174    <div class="pill">Type</div>175  </div>176  <div class="underline-wrap">177    <div class="underline"><div class="indicator"></div></div>178  </div>179 180  <!-- Availability section -->181  <div class="availability">182    <div class="avail-left">183      <div class="small-icons">184        <!-- store icon -->185        <svg width="56" height="56" viewBox="0 0 24 24">186          <path d="M3 9l2-4h14l2 4v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9z" fill="#222" opacity=".1"/>187          <path d="M4 9h16v9a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9zm2-4h12l2 4H4l2-4zM9 19v-5h6v5" fill="none" stroke="#222" stroke-width="2" stroke-linejoin="round"/>188        </svg>189        <!-- truck icon -->190        <svg width="56" height="56" viewBox="0 0 24 24">191          <path d="M1 6h12v9H1zM13 10h5l3 3v2h-8z" fill="none" stroke="#222" stroke-width="2"/>192          <circle cx="6" cy="18" r="2" fill="#222"/>193          <circle cx="18" cy="18" r="2" fill="#222"/>194        </svg>195      </div>196      <div class="avail-text">197        <div class="big">Show availability</div>198        <div class="sub">Select store or Zip code to see what’s in stock.</div>199      </div>200    </div>201    <div class="toggle">202      <!-- gear icon -->203      <svg viewBox="0 0 24 24">204        <path d="M12 8.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7zm8 3.5l2 1-2 1a7.7 7.7 0 0 1-.8 1.9l1.1 1.9-2.2 1.3-1.1-1.8a7.7 7.7 0 0 1-2 .8l-.5 2.1h-2.6l-.5-2.1a7.7 7.7 0 0 1-2-.8l-1.1 1.8-2.2-1.3 1.1-1.9a7.7 7.7 0 0 1-.8-1.9l-2-1 2-1c.1-.7.4-1.3.8-1.9L3.8 8.2 6 6.9 7.1 8.7c.6-.3 1.3-.6 2-.8l.5-2.1h2.6l.5 2.1c.7.2 1.3.4 2 .8l1.1-1.8 2.2 1.3-1.1 1.9c.4.6.7 1.2.8 1.9z" fill="#fff"/>205      </svg>206    </div>207  </div>208 209  <div class="products-count">Showing 11743 products</div>210 211  <!-- Bottom navigation -->212  <div class="bottom-nav">213    <div class="nav-item active">214      <svg viewBox="0 0 24 24">215        <path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1v-9z" fill="#111"/>216      </svg>217    </div>218    <div class="nav-item">219      <svg viewBox="0 0 24 24">220        <circle cx="11" cy="11" r="7" fill="none" stroke="#8a8a8a" stroke-width="2"/>221        <path d="M20 20l-4-4" stroke="#8a8a8a" stroke-width="2" stroke-linecap="round"/>222      </svg>223    </div>224    <div class="nav-item">225      <svg viewBox="0 0 24 24">226        <rect x="3" y="3" width="7" height="7" fill="#8a8a8a"/>227        <rect x="14" y="3" width="7" height="7" fill="#8a8a8a" opacity=".7"/>228        <rect x="3" y="14" width="7" height="7" fill="#8a8a8a" opacity=".7"/>229        <rect x="14" y="14" width="7" height="7" fill="#8a8a8a"/>230      </svg>231    </div>232    <div class="nav-item">233      <svg viewBox="0 0 24 24">234        <path d="M12 21s7-4.4 7-10a4 4 0 0 0-7-2.6A4 4 0 0 0 5 11c0 5.6 7 10 7 10z" fill="#8a8a8a"/>235      </svg>236    </div>237    <div class="nav-item">238      <svg viewBox="0 0 24 24">239        <path d="M7 6h14l-2 9H9L7 6z" fill="none" stroke="#8a8a8a" stroke-width="2"/>240        <circle cx="10" cy="19" r="1.6" fill="#8a8a8a"/>241        <circle cx="18" cy="19" r="1.6" fill="#8a8a8a"/>242      </svg>243    </div>244  </div>245 246  <div class="gesture"></div>247 248</div>249</body>250</html>