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>LED Light Bulbs - UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color: #111; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Status bar (mock) */18  .status-bar {19    height: 80px;20    padding: 0 36px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #222;25    font-weight: 600;26    font-size: 34px;27  }28  .status-icons {29    display: flex; gap: 24px; align-items: center;30  }31  .dot { width: 16px; height: 16px; background:#555; border-radius:50%; display:inline-block; }32 33  /* Header */34  .header {35    height: 120px;36    display: flex;37    align-items: center;38    position: relative;39    padding: 0 36px;40  }41  .header .title {42    margin: 0 auto;43    font-weight: 700;44    font-size: 48px;45  }46  .back-btn {47    position: absolute;48    left: 24px;49    top: 50%;50    transform: translateY(-50%);51    width: 72px; height: 72px;52    display: flex; align-items: center; justify-content: center;53    cursor: default;54  }55 56  /* Filter Pills */57  .filters {58    padding: 12px 24px 0 24px;59  }60  .pill-row {61    display: flex; gap: 24px; align-items: center;62    overflow: hidden;63    padding: 12px 0;64  }65  .pill {66    padding: 22px 36px;67    border-radius: 40px;68    background: #F1F1F1;69    font-weight: 700;70    font-size: 36px;71    color: #111;72    border: 0;73  }74  .pill.selected {75    background: #FFF;76    border: 4px solid #111;77  }78  .divider {79    height: 4px;80    background: #E7E7E7;81    margin-top: 12px;82    margin-left: 24px;83    margin-right: 24px;84    position: relative;85  }86  .divider::before {87    content: "";88    position: absolute;89    left: 24px;90    top: -2px;91    height: 4px; width: 180px;92    background: #111;93  }94 95  /* Results header */96  .results-head {97    display: flex;98    align-items: center;99    justify-content: space-between;100    padding: 28px 36px;101  }102  .results-head .count {103    font-size: 40px; color: #666;104  }105  .view-toggle {106    display: flex; align-items: center; gap: 0;107    border: 3px solid #BDBDBD;108    border-radius: 16px;109    overflow: hidden;110  }111  .view-btn {112    width: 120px; height: 84px;113    display: flex; align-items: center; justify-content: center;114    background: #FFF;115  }116  .view-btn + .view-btn { border-left: 3px solid #BDBDBD; }117 118  /* Product image */119  .product-visual {120    width: 100%;121    padding: 0 60px;122    box-sizing: border-box;123  }124  .img-placeholder {125    width: 960px;126    height: 920px;127    background: #E0E0E0;128    border: 1px solid #BDBDBD;129    border-radius: 16px;130    margin: 20px auto 10px auto;131    display: flex; align-items: center; justify-content: center;132    color: #757575; font-size: 36px; letter-spacing: .3px;133  }134 135  /* Floating heart */136  .fav-fab {137    position: absolute;138    right: 48px;139    top: 1140px;140    width: 120px; height: 120px;141    background: #ffffff;142    border: 3px solid #D9D9D9;143    border-radius: 60px;144    display: flex; align-items: center; justify-content: center;145    box-shadow: 0 2px 8px rgba(0,0,0,0.05);146  }147 148  /* Product details */149  .product-info {150    padding: 24px 60px 0 60px;151  }152  .product-name {153    font-size: 54px; font-weight: 800; margin: 0 0 12px 0;154  }155  .product-desc {156    font-size: 40px; line-height: 54px; color: #444; margin: 0 0 28px 0;157  }158  .price-row {159    display: flex; align-items: center; gap: 24px;160    margin: 8px 0 28px 0;161  }162  .price {163    font-size: 56px; font-weight: 800;164  }165  .energy-badge {166    width: 180px; height: 100px; background: #E0E0E0; border: 1px solid #BDBDBD;167    display: flex; align-items: center; justify-content: center; color: #555; font-weight: 700;168  }169  .info-link {170    font-size: 36px; color: #6E6E6E; text-decoration: underline; margin-top: 12px;171  }172 173  /* Floating Add to Cart */174  .cart-fab {175    position: absolute;176    right: 36px;177    bottom: 240px;178    width: 140px; height: 140px;179    background: #0058A3;180    border-radius: 70px;181    display: flex; align-items: center; justify-content: center;182    box-shadow: 0 8px 18px rgba(0,0,0,0.18);183  }184 185  /* Bottom nav */186  .bottom-nav {187    position: absolute; bottom: 0; left: 0; right: 0;188    height: 160px; border-top: 1px solid #EEE; background: #FFF;189    display: flex; align-items: center; justify-content: space-around;190    padding-bottom: 12px;191  }192  .nav-item {193    display: flex; flex-direction: column; align-items: center; gap: 8px;194    color: #777; font-size: 26px;195  }196 197  /* Gesture bar */198  .gesture {199    position: absolute;200    bottom: 176px;201    left: 50%;202    transform: translateX(-50%);203    width: 340px; height: 14px; background: #BDBDBD; border-radius: 8px;204    opacity: .8;205  }206</style>207</head>208<body>209<div id="render-target">210 211  <!-- Mock status bar -->212  <div class="status-bar">213    <div>10:28</div>214    <div class="status-icons">215      <svg width="36" height="36" viewBox="0 0 24 24"><circle cx="10" cy="10" r="4" stroke="#222" stroke-width="2" fill="none"/><line x1="14" y1="14" x2="22" y2="22" stroke="#222" stroke-width="2"/></svg>216      <span class="dot"></span>217      <svg width="36" height="36" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="12" rx="2" stroke="#222" stroke-width="2" fill="none"/><rect x="7" y="8" width="10" height="4" fill="#222"/></svg>218      <svg width="36" height="36" viewBox="0 0 24 24"><path d="M3 18h18" stroke="#222" stroke-width="2" stroke-linecap="round"/></svg>219    </div>220  </div>221 222  <!-- Header -->223  <div class="header">224    <div class="back-btn">225      <svg width="56" height="56" viewBox="0 0 24 24">226        <polyline points="15,4 7,12 15,20" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>227      </svg>228    </div>229    <div class="title">"led light bulbs"</div>230  </div>231 232  <!-- Filters -->233  <div class="filters">234    <div class="pill-row">235      <div class="pill selected">Best match</div>236      <div class="pill">Colour</div>237      <div class="pill">Type</div>238      <div class="pill">Category</div>239    </div>240    <div class="divider"></div>241  </div>242 243  <!-- Results header -->244  <div class="results-head">245    <div class="count">Showing 84 products</div>246    <div class="view-toggle">247      <div class="view-btn">248        <svg width="52" height="52" viewBox="0 0 24 24">249          <rect x="3" y="3" width="7" height="7" stroke="#111" stroke-width="2" fill="none"/>250          <rect x="14" y="3" width="7" height="7" stroke="#111" stroke-width="2" fill="none"/>251          <rect x="3" y="14" width="7" height="7" stroke="#111" stroke-width="2" fill="none"/>252          <rect x="14" y="14" width="7" height="7" stroke="#111" stroke-width="2" fill="none"/>253        </svg>254      </div>255      <div class="view-btn">256        <svg width="52" height="52" viewBox="0 0 24 24">257          <rect x="4" y="4" width="16" height="16" stroke="#111" stroke-width="2" fill="none"/>258        </svg>259      </div>260    </div>261  </div>262 263  <!-- Product visual -->264  <div class="product-visual">265    <div class="img-placeholder">[IMG: Large LED bulb photo]</div>266  </div>267 268  <!-- Floating favorite -->269  <div class="fav-fab">270    <svg width="64" height="64" viewBox="0 0 24 24">271      <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.41 4.42 3 7.5 3 9.24 3 10.91 3.81 12 5.08 13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.41 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" fill="none" stroke="#666" stroke-width="2"/>272    </svg>273  </div>274 275  <!-- Product details -->276  <div class="product-info">277    <h1 class="product-name">SOLHETTA</h1>278    <p class="product-desc">LED bulb E27 1521 lumen, dimmable/globe<br>opal white</p>279 280    <div class="price-row">281      <div class="price">£7.50</div>282      <div class="energy-badge">[Energy Label: C]</div>283    </div>284 285    <div class="info-link">Product information sheet</div>286  </div>287 288  <!-- Floating Add to Cart -->289  <div class="cart-fab" aria-label="Add to bag">290    <svg width="72" height="72" viewBox="0 0 24 24">291      <path d="M6 7h12l-1.5 12H7.5L6 7z" fill="none" stroke="#FFF" stroke-width="2"/>292      <path d="M9 7a3 3 0 0 1 6 0" fill="none" stroke="#FFF" stroke-width="2"/>293      <line x1="12" y1="11" x2="12" y2="17" stroke="#FFF" stroke-width="2"/>294      <line x1="9" y1="14" x2="15" y2="14" stroke="#FFF" stroke-width="2"/>295    </svg>296  </div>297 298  <!-- Gesture bar -->299  <div class="gesture"></div>300 301  <!-- Bottom navigation -->302  <div class="bottom-nav">303    <div class="nav-item">304      <svg width="56" height="56" viewBox="0 0 24 24"><path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2h-4v-6H9v6H5a2 2 0 0 1-2-2v-9z" fill="none" stroke="#777" stroke-width="2"/></svg>305    </div>306    <div class="nav-item">307      <svg width="56" height="56" viewBox="0 0 24 24"><circle cx="10" cy="10" r="6" stroke="#777" stroke-width="2" fill="none"/><line x1="14" y1="14" x2="22" y2="22" stroke="#777" stroke-width="2"/></svg>308    </div>309    <div class="nav-item">310      <svg width="56" height="56" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="4" fill="#777"/><rect x="3" y="10" width="18" height="4" fill="#777"/><rect x="3" y="16" width="18" height="4" fill="#777"/></svg>311    </div>312    <div class="nav-item">313      <svg width="56" height="56" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.41 4.42 3 7.5 3 9.24 3 10.91 3.81 12 5.08 13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.41 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" fill="none" stroke="#777" stroke-width="2"/></svg>314    </div>315    <div class="nav-item">316      <svg width="56" height="56" viewBox="0 0 24 24">317        <path d="M6 7h12l-1.5 12H7.5L6 7z" fill="none" stroke="#777" stroke-width="2"/>318        <path d="M9 7a3 3 0 0 1 6 0" fill="none" stroke="#777" stroke-width="2"/>319      </svg>320    </div>321  </div>322 323</div>324</body>325</html>