GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Hardware Shack - Interior Emulsion</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background:#ffffff;10  }11  /* Top system/status bar */12  .status-bar {13    position:absolute; top:0; left:0; width:100%; height:90px;14    background:#3b0aa8; color:#fff; display:flex; align-items:center; padding:0 40px; box-sizing:border-box;15  }16  .status-time { font-size:38px; font-weight:600; margin-right:20px; }17  .status-icons { margin-left:auto; display:flex; gap:28px; align-items:center; }18  .dot { width:14px; height:14px; background:#fff; border-radius:50%; opacity:0.7; }19  /* App header */20  .app-header {21    position:absolute; top:90px; left:0; width:100%; height:150px;22    background:#3b0aa8; color:#fff; display:flex; align-items:center; padding:0 40px; box-sizing:border-box;23  }24  .hamburger { width:72px; height:72px; margin-right:20px; }25  .hamburger svg { width:100%; height:100%; }26  .brand {27    display:flex; align-items:center; gap:24px;28  }29  .brand-logo {30    width:120px; height:120px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:16px;31    display:flex; justify-content:center; align-items:center; color:#757575; font-size:24px;32  }33  .brand-name { font-size:54px; font-weight:700; letter-spacing:1px; }34  .cart-wrap { margin-left:auto; }35  .cart-btn {36    width:100px; height:100px; background:#f4c23a; border-radius:50%; display:flex; justify-content:center; align-items:center;37    box-shadow:0 4px 8px rgba(0,0,0,0.25);38  }39  /* Content area */40  .content {41    position:absolute; top:240px; left:0; right:0; bottom:0;42    background:#fff; padding:40px; box-sizing:border-box;43  }44  .breadcrumbs { color:#777; font-size:32px; margin-bottom:24px; }45  .page-title { font-size:48px; font-weight:700; color:#111; line-height:58px; }46  .filter-bar { display:flex; align-items:center; gap:18px; color:#333; font-weight:700; font-size:40px; margin:34px 0; }47  .filter-icon { width:48px; height:48px; }48  .sort-row { margin-bottom:28px; }49  .select-box {50    width:720px; height:84px; border:1px solid #ccc; border-radius:12px; display:flex; align-items:center; justify-content:space-between;51    padding:0 28px; font-size:36px; color:#333;52  }53  .chev { width:36px; height:36px; }54  /* Product grid */55  .grid { display:flex; flex-wrap:wrap; gap:36px; }56  .card { width:486px; }57  .img-box {58    position:relative; width:100%; height:510px; background:#E0E0E0; border:1px solid #BDBDBD;59    display:flex; justify-content:center; align-items:center; color:#757575; font-size:32px;60  }61  .badge {62    position:absolute; top:18px; left:18px; width:120px; height:120px; background:#000; color:#fff; border-radius:60px;63    display:flex; justify-content:center; align-items:center; font-size:38px; font-weight:700;64  }65  .category { color:#8a8a8a; font-size:28px; margin-top:22px; text-transform:uppercase; letter-spacing:1px; }66  .title { font-size:36px; color:#222; margin-top:8px; line-height:42px; }67  .price { font-size:40px; color:#000; margin:16px 0; }68  .price .strike { color:#999; text-decoration:line-through; margin-right:12px; }69  .btn {70    height:92px; background:#f0c34c; color:#333; font-weight:800; border:none; border-radius:12px; font-size:34px;71    padding:0 30px; display:flex; align-items:center; justify-content:center; box-shadow:0 3px 6px rgba(0,0,0,0.15);72  }73  .btn.secondary { background:#f7e7a6; }74  .rating { color:#d13b3b; font-size:44px; letter-spacing:6px; }75  /* Divider line mimicking page spacing */76  .spacer { height:30px; }77</style>78</head>79<body>80<div id="render-target">81 82  <!-- Status bar -->83  <div class="status-bar">84    <div class="status-time">12:51</div>85    <div class="status-icons">86      <div class="dot"></div>87      <div class="dot"></div>88      <div class="dot"></div>89      <div class="dot"></div>90    </div>91  </div>92 93  <!-- App header -->94  <div class="app-header">95    <div class="hamburger">96      <svg viewBox="0 0 100 100">97        <rect x="10" y="22" width="80" height="10" fill="#fff"/>98        <rect x="10" y="45" width="80" height="10" fill="#fff"/>99        <rect x="10" y="68" width="80" height="10" fill="#fff"/>100      </svg>101    </div>102    <div class="brand">103      <div class="brand-logo">[IMG: Hardware Shack Logo]</div>104      <div class="brand-name">HARDWARE SHACK</div>105    </div>106    <div class="cart-wrap">107      <div class="cart-btn">108        <svg width="60" height="60" viewBox="0 0 24 24">109          <path fill="#fff" d="M7 4h-2l-1 2v2h2l3 9h9l3-9h-14l-1-4zm3 16a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm8 0a2 2 0 1 0 .001 4 2 2 0 0 0-.001-4z"/>110        </svg>111      </div>112    </div>113  </div>114 115  <!-- Content -->116  <div class="content">117    <div class="breadcrumbs">HOME / SHOP /</div>118    <div class="page-title">SEARCH RESULTS FOR “INTERIOR EMULSION ”</div>119 120    <div class="filter-bar">121      <div class="filter-icon">122        <svg viewBox="0 0 24 24">123          <path fill="#333" d="M3 5h18v2l-7 7v4l-4 2v-6l-7-7z"/>124        </svg>125      </div>126      FILTER127    </div>128 129    <div class="sort-row">130      <div class="select-box">131        <span>Relevance</span>132        <svg class="chev" viewBox="0 0 24 24">133          <path fill="#555" d="M7 10l5 5 5-5z"/>134        </svg>135      </div>136    </div>137 138    <div class="grid">139      <!-- Card 1 -->140      <div class="card">141        <div class="img-box">142          <div class="badge">-11%</div>143          [IMG: Asian Paints TruCare Interior Wall Primer Bucket]144        </div>145        <div class="category">Primer and wall putty</div>146        <div class="title">Asian Paints Trucare Interior Wall Primer – Water Thinnable</div>147        <div class="price">₹258.00 – ₹3,060.00</div>148        <button class="btn secondary">SELECT OPTIONS</button>149      </div>150 151      <!-- Card 2 -->152      <div class="card">153        <div class="img-box">154          <div class="badge">-13%</div>155          [IMG: Asian Paints Apcolite Premium Emulsion White (20 litre)]156        </div>157        <div class="category">Apcolite</div>158        <div class="title">Asian Paints Apcolite Premium Emulsion White (20 litre)</div>159        <div class="rating">★★★★★</div>160        <div class="price"><span class="strike">₹10,578.00</span> ₹9,198.00</div>161        <button class="btn">ADD TO CART</button>162      </div>163 164      <!-- Card 3 (partial, bottom row) -->165      <div class="card">166        <div class="img-box">167          <div class="badge">-13%</div>168          [IMG: Apcolite Premium Emulsion Bucket]169        </div>170        <div class="category">Apcolite</div>171        <div class="title">Apcolite Premium Emulsion</div>172      </div>173 174      <!-- Card 4 (partial) -->175      <div class="card">176        <div class="img-box">177          <div class="badge">-13%</div>178          [IMG: Apcolite Premium Emulsion Bucket]179        </div>180        <div class="category">Apcolite</div>181        <div class="title">Apcolite Premium Emulsion</div>182      </div>183    </div>184 185  </div>186</div>187</body>188</html>