GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Kitchen & appliances UI</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#ffffff;11  }12  /* Top status bar */13  .status-bar {14    height:90px;15    padding:0 32px;16    display:flex; align-items:center; justify-content:space-between;17    color:#111; font-size:32px;18  }19  .status-icons { display:flex; gap:22px; align-items:center; color:#666; }20  /* Header */21  .header {22    display:flex; align-items:center;23    padding:12px 32px 8px 32px;24  }25  .back-btn {26    width:72px; height:72px; display:flex; align-items:center; justify-content:center;27    margin-right:8px;28  }29  .header-title {30    font-size:48px; font-weight:700; color:#111;31  }32  /* Filter chips */33  .chip-row {34    display:flex; gap:24px; padding:24px 32px 12px 32px;35  }36  .chip {37    padding:26px 34px;38    border:2px solid #dadada; border-radius:48px; color:#333; font-size:36px; background:#fff;39  }40  .chip.active {41    border-color:#111; font-weight:700;42  }43  .divider { height:6px; background:#eee; margin:16px 0; }44  /* Product grid */45  .products {46    display:grid; grid-template-columns: 1fr 1fr;47    column-gap:32px; row-gap:56px;48    padding:0 32px;49  }50  .product {51    position:relative;52  }53  .img {54    width:100%; height:480px;55    background:#E0E0E0; border:1px solid #BDBDBD;56    display:flex; align-items:center; justify-content:center;57    color:#757575; font-size:34px;58  }59  .name { margin-top:28px; font-weight:800; font-size:44px; letter-spacing:1px; color:#111; }60  .desc { margin-top:12px; font-size:36px; line-height:1.35; color:#444; }61  .price { margin-top:22px; font-size:64px; font-weight:800; color:#111; }62  .options { margin-top:18px; font-size:38px; color:#666; text-decoration:underline; }63  .cart-fab {64    position:absolute; left:50%; transform:translateX(-50%);65    bottom:-110px; width:150px; height:150px;66    background:#1E4FA3; border-radius:50%;67    display:flex; align-items:center; justify-content:center;68    box-shadow:0 8px 20px rgba(0,0,0,0.18);69  }70  .cart-fab svg { width:78px; height:78px; }71  /* Heart and top seller */72  .heart {73    position:absolute; right:12px; top:-10px;74    width:72px; height:72px; display:flex; align-items:center; justify-content:center;75  }76  .topseller {77    position:absolute; left:50%; transform:translateX(-50%);78    top:-40px; background:#e5383b; color:#fff; padding:16px 26px; border-radius:18px;79    font-size:36px; font-weight:700;80  }81  /* Bottom nav */82  .bottom-nav {83    position:absolute; left:0; bottom:0; width:100%; height:170px;84    border-top:1px solid #e3e3e3; background:#fff;85    display:flex; align-items:center; justify-content:space-around;86  }87  .nav-item { display:flex; flex-direction:column; align-items:center; gap:14px; color:#222; }88  .nav-item span { font-size:32px; }89</style>90</head>91<body>92<div id="render-target">93  <!-- Status Bar -->94  <div class="status-bar">95    <div>1:14</div>96    <div class="status-icons">97      <span>87°</span>98      <!-- simple icons -->99      <svg width="34" height="34" viewBox="0 0 24 24"><path d="M12 2a6 6 0 0 0-6 6c0 4.5 6 14 6 14s6-9.5 6-14a6 6 0 0 0-6-6zm0 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="#666"/></svg>100      <svg width="34" height="34" viewBox="0 0 24 24"><path d="M10 3h4v2h3a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h3V3zm-1 5h6v10H9V8z" fill="#666"/></svg>101    </div>102  </div>103 104  <!-- Header -->105  <div class="header">106    <div class="back-btn">107      <svg width="44" height="44" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>108    </div>109    <div class="header-title">Kitchen & appliances</div>110  </div>111 112  <!-- Filter chips -->113  <div class="chip-row">114    <div class="chip active">Best match</div>115    <div class="chip">Size</div>116    <div class="chip">Color</div>117    <div class="chip">Type</div>118  </div>119  <div class="divider"></div>120 121  <!-- Product grid -->122  <div class="products" style="margin-top:18px;">123    <!-- Product 1 -->124    <div class="product">125      <div class="img">[IMG: SUNNERSTA mini-kitchen]</div>126      <div class="name">SUNNERSTA</div>127      <div class="desc">Mini-kitchen, white, 44<br>1/8x22x54 3/4 "</div>128      <div class="price">$168<span style="font-size:40px;">.00</span></div>129 130      <div class="cart-fab" style="bottom:-160px;">131        <svg viewBox="0 0 24 24">132          <path d="M7 7h13l-2 8H9L7 7zm2 0V5a2 2 0 0 1 2-2h2" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>133          <circle cx="10" cy="19" r="1.8" fill="#fff"/>134          <circle cx="17" cy="19" r="1.8" fill="#fff"/>135          <path d="M19.5 4h-3" stroke="#fff" stroke-width="2" stroke-linecap="round"/>136          <path d="M20 11h-4" stroke="#fff" stroke-width="2" stroke-linecap="round"/>137          <path d="M13 4v4" stroke="#fff" stroke-width="2" stroke-linecap="round"/>138        </svg>139      </div>140    </div>141 142    <!-- Product 2 -->143    <div class="product">144      <div class="img">[IMG: RÅSHULT utility cart]</div>145      <div class="name">RÅSHULT</div>146      <div class="desc">Utility cart, white,<br>11x15x25 5/8 "</div>147      <div class="price">$27<span style="font-size:40px;">.99</span></div>148      <div class="options">+ Options</div>149 150      <div class="cart-fab" style="bottom:-160px;">151        <svg viewBox="0 0 24 24">152          <path d="M7 7h13l-2 8H9L7 7zm2 0V5a2 2 0 0 1 2-2h2" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>153          <circle cx="10" cy="19" r="1.8" fill="#fff"/>154          <circle cx="17" cy="19" r="1.8" fill="#fff"/>155          <path d="M19.5 4h-3" stroke="#fff" stroke-width="2" stroke-linecap="round"/>156          <path d="M20 11h-4" stroke="#fff" stroke-width="2" stroke-linecap="round"/>157          <path d="M13 4v4" stroke="#fff" stroke-width="2" stroke-linecap="round"/>158        </svg>159      </div>160    </div>161 162    <!-- Second row left -->163    <div class="product" style="margin-top:140px;">164      <div class="heart">165        <svg viewBox="0 0 24 24">166          <path d="M12 21s-8-5.6-8-11a5 5 0 0 1 9-2 5 5 0 0 1 9 2c0 5.4-8 11-8 11z" fill="none" stroke="#999" stroke-width="2"/>167        </svg>168      </div>169      <div class="img">[IMG: SEKTION/MAXIMERA cabinet]</div>170      <div class="name">SEKTION / MAXIMERA</div>171      <div class="desc">Base cabinet with drawer, white</div>172    </div>173 174    <!-- Second row right -->175    <div class="product" style="margin-top:140px; position:relative;">176      <div class="topseller">Top seller</div>177      <div class="heart" style="right:14px;">178        <svg viewBox="0 0 24 24">179          <path d="M12 21s-8-5.6-8-11a5 5 0 0 1 9-2 5 5 0 0 1 9 2c0 5.4-8 11-8 11z" fill="none" stroke="#999" stroke-width="2"/>180        </svg>181      </div>182      <div class="img">[IMG: VADHOLMA kitchen island]</div>183      <div class="name">VADHOLMA</div>184      <div class="desc">Kitchen island, brown/black</div>185    </div>186  </div>187 188  <!-- Bottom navigation -->189  <div class="bottom-nav">190    <div class="nav-item">191      <svg width="54" height="54" viewBox="0 0 24 24"><path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1v-9z" fill="none" stroke="#222" stroke-width="2"/></svg>192      <span>Home</span>193    </div>194    <div class="nav-item">195      <svg width="54" height="54" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" fill="none" stroke="#222" stroke-width="2"/><path d="M21 21l-4.6-4.6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/></svg>196      <span>Search</span>197    </div>198    <div class="nav-item">199      <svg width="54" height="54" viewBox="0 0 24 24"><path d="M4 20h4V8H4v12zm6 0h4V4h-4v16zm6 0h4v-10h-4v10z" fill="none" stroke="#222" stroke-width="2"/></svg>200      <span>Stats</span>201    </div>202    <div class="nav-item">203      <svg width="54" height="54" viewBox="0 0 24 24"><path d="M12 21s-8-5.6-8-11a5 5 0 0 1 9-2 5 5 0 0 1 9 2c0 5.4-8 11-8 11z" fill="none" stroke="#222" stroke-width="2"/></svg>204      <span>Favorites</span>205    </div>206    <div class="nav-item">207      <svg width="54" height="54" viewBox="0 0 24 24"><path d="M6 7h12l-1 12H7L6 7zm3 0V5a3 3 0 0 1 3-3h3" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>208      <span>Cart</span>209    </div>210  </div>211</div>212</body>213</html>