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>Search - Sofa Gray Colour</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }9  #render-target {10    position: relative; overflow: hidden;11    width: 1080px; height: 2400px;12    background: linear-gradient(180deg, #91E1D7 0%, #CBE9EF 22%, #FFFFFF 22%);13  }14  .status-bar {15    height: 80px; padding: 18px 28px 0 28px; color: #1A1A1A; font-weight: 600; font-size: 34px;16    display: flex; align-items: center; justify-content: space-between;17  }18  .status-icons { display: flex; align-items: center; gap: 22px; color: #1a1a1a; opacity: 0.85; }19  .header {20    padding: 8px 24px 16px 24px;21  }22  .search-row { display: flex; align-items: center; gap: 18px; }23  .icon-btn {24    width: 68px; height: 68px; border-radius: 16px;25    display: flex; align-items: center; justify-content: center;26    color: #0a4; opacity: 0.9;27  }28  .search-box {29    flex: 1; background: #FFFFFF; height: 88px; border-radius: 22px;30    box-shadow: 0 4px 10px rgba(0,0,0,0.12);31    display: flex; align-items: center; padding: 0 24px; gap: 18px; color: #444;32    font-size: 36px;33  }34  .search-placeholder { color: #2d2d2d; font-weight: 600; }35  .pill-bar {36    background: #FFFFFF; border-top-left-radius: 18px; border-top-right-radius: 18px;37    border-bottom: 1px solid #e9eef2; border-top: 1px solid rgba(0,0,0,0.04);38  }39  .filters-row {40    height: 104px; display: flex; align-items: center; padding: 0 28px;41    gap: 24px; justify-content: space-between; color: #222;42  }43  .toggle {44    display: flex; align-items: center; gap: 14px; font-weight: 700; color: #FFA500;45  }46  .switch {47    width: 96px; height: 48px; background: #EDEDED; border-radius: 26px; position: relative;48    box-shadow: inset 0 0 0 1px #D6D6D6;49  }50  .switch::after {51    content: ""; position: absolute; top: 6px; left: 6px; width: 36px; height: 36px; border-radius: 50%;52    background: #FFFFFF; box-shadow: 0 1px 3px rgba(0,0,0,0.25);53  }54  .filter-btn { display: flex; align-items: center; gap: 12px; color: #1f6b7a; font-weight: 600; }55  .prime-note { padding: 10px 28px 18px 28px; background: #FFFFFF; }56  .prime-title { color: #1A96FF; font-weight: 800; font-size: 34px; }57  .prime-sub { color: #6b6f75; font-size: 28px; margin-top: 6px; }58  /* Product card */59  .product-card {60    margin: 20px 24px; background: #FFFFFF; border-radius: 22px; border: 1px solid #ECECEC;61    box-shadow: 0 2px 8px rgba(0,0,0,0.06);62  }63  .product-img {64    margin: 18px; height: 640px; border-radius: 16px; background: #E0E0E0; border: 1px solid #BDBDBD;65    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 38px; font-weight: 700; text-align: center;66  }67  .swatches { display: flex; align-items: center; gap: 18px; padding: 8px 28px 0 28px; }68  .dot { width: 64px; height: 64px; border-radius: 50%; border: 4px solid #D9D9D9; }69  .sw-more { font-weight: 700; color: #176B7A; }70  .title { padding: 12px 28px 0 28px; font-size: 40px; line-height: 50px; color: #1a1a1a; font-weight: 700; }71  .chip {72    margin: 10px 28px 0 28px; display: inline-block; padding: 6px 16px; border-radius: 10px;73    background: #F2F4F7; color: #41464b; font-weight: 700; font-size: 28px;74  }75  .rating { padding: 10px 28px 0 28px; display: flex; align-items: center; gap: 10px; font-size: 30px; color: #0a6; }76  .stars { display: inline-flex; gap: 4px; }77  .price-row {78    padding: 8px 28px 0 28px; display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;79    color: #111;80  }81  .price { font-size: 56px; font-weight: 800; }82  .mrp { color: #6b6f75; text-decoration: line-through; font-size: 30px; }83  .off { color: #2e7d32; font-size: 30px; font-weight: 700; }84  .delivery { padding: 12px 28px 24px 28px; color: #333; font-size: 30px; }85  .divider { height: 1px; background: #ECECEC; margin: 8px 0; }86  /* Bottom nav */87  .bottom-nav {88    position: absolute; left: 0; bottom: 0; width: 100%; height: 158px; background: #FFFFFF;89    border-top: 1px solid #E6E6E6; display: flex; align-items: center; justify-content: space-around;90  }91  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #0b8; font-weight: 700; font-size: 26px; }92  .nav-item.inactive { color: #6d757c; font-weight: 600; }93  .grabber {94    position: absolute; bottom: 158px; left: 50%; transform: translateX(-50%);95    width: 360px; height: 12px; border-radius: 6px; background: #D5D8DB;96  }97  /* Subtle helpers */98  .muted { color: #6b6f75; }99</style>100</head>101<body>102<div id="render-target">103  <!-- Status Bar -->104  <div class="status-bar">105    <div>10:37</div>106    <div class="status-icons">107      <span style="font-size:28px; opacity:.7;">ib</span>108      <svg width="38" height="26" viewBox="0 0 24 24" fill="#1a1a1a" xmlns="http://www.w3.org/2000/svg">109        <path d="M22 8v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8h20Zm-2-4H4L2 8h20l-2-4Z"/>110      </svg>111      <svg width="30" height="26" viewBox="0 0 24 24" fill="#1a1a1a" xmlns="http://www.w3.org/2000/svg">112        <path d="M12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2Zm7-6v-5a7 7 0 1 0-14 0v5l-2 2v1h18v-1l-2-2Z"/>113      </svg>114    </div>115  </div>116 117  <!-- Header with Search -->118  <div class="header">119    <div class="search-row">120      <div class="icon-btn">121        <svg width="44" height="44" viewBox="0 0 24 24" fill="#1f2d3d" xmlns="http://www.w3.org/2000/svg">122          <path d="M15.5 19.5 9 12l6.5-7.5" stroke="#1f2d3d" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>123        </svg>124      </div>125      <div class="search-box">126        <svg width="40" height="40" viewBox="0 0 24 24" fill="#4a5568" xmlns="http://www.w3.org/2000/svg">127          <path d="M10 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16Zm11 20-6-6" stroke="#4a5568" stroke-width="2" fill="none" stroke-linecap="round"/>128        </svg>129        <div class="search-placeholder">sofa gray colour</div>130        <div style="margin-left:auto; display:flex; align-items:center;">131          <svg width="44" height="44" viewBox="0 0 24 24" fill="#4a5568" xmlns="http://www.w3.org/2000/svg">132            <path d="M4 7V5h3l2-2h6l2 2h3v2h-3l-2-2H9L7 7H4Zm0 2h16v10H4V9Z"/>133          </svg>134        </div>135      </div>136    </div>137  </div>138 139  <!-- Filters / Prime -->140  <div class="pill-bar">141    <div class="filters-row">142      <div class="toggle">143        <span style="color:#FFAC1C; font-weight:800;">✓prime</span>144        <div class="switch"></div>145      </div>146      <div class="filter-btn">147        <span>Filters</span>148        <svg width="28" height="28" viewBox="0 0 24 24" fill="#1f6b7a" xmlns="http://www.w3.org/2000/svg">149          <path d="M7 10l5 5 5-5" stroke="#1f6b7a" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>150        </svg>151      </div>152    </div>153    <div class="prime-note">154      <div class="prime-title">✓prime</div>155      <div class="prime-sub">FREE Delivery by Amazon</div>156    </div>157  </div>158 159  <!-- Product Card 1 -->160  <div class="product-card">161    <div class="product-img">[IMG: Gray Sofa in Living Room]</div>162 163    <div class="swatches">164      <div class="dot" style="background:#C9C9C9;"></div>165      <div class="dot" style="background:#1D1D1D;"></div>166      <div class="dot" style="background:#3C2E35;"></div>167      <div class="dot" style="background:#2E4672;"></div>168      <div class="dot" style="background:#2F5748;"></div>169      <div class="dot" style="background:#1D6B63;"></div>170      <div class="sw-more">+2</div>171    </div>172 173    <div class=