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 Results - Door Hinges</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #F3F4F6;15  }16 17  /* Status bar */18  .status-bar {19    height: 96px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    padding: 0 32px;24    color: #555;25    font-size: 28px;26    background: #FFFFFF;27  }28  .status-left { font-weight: 600; }29  .status-right { display: flex; gap: 18px; align-items: center; }30  .status-icon svg { width: 34px; height: 34px; fill: #555; }31 32  /* Header */33  .header {34    height: 140px;35    background: #FFFFFF;36    border-bottom: 1px solid #E6E6E6;37    display: flex;38    align-items: center;39    padding: 0 24px;40    gap: 20px;41  }42  .icon-btn {43    width: 60px;44    height: 60px;45    display: flex;46    align-items: center;47    justify-content: center;48  }49  .icon-btn svg { width: 36px; height: 36px; fill: #333; }50  .search-input {51    flex: 1;52    height: 88px;53    background: #F1F1F1;54    border: 1px solid #DDDDDD;55    border-radius: 44px;56    display: flex;57    align-items: center;58    padding: 0 20px;59    gap: 18px;60  }61  .search-field {62    flex: 1;63    color: #6B7280;64    font-size: 32px;65    white-space: nowrap;66    overflow: hidden;67    text-overflow: ellipsis;68  }69  .search-utilities { display: flex; gap: 18px; }70  .search-utilities .util { width: 48px; height: 48px; display:flex; align-items:center; justify-content:center; }71  .search-utilities svg { width: 34px; height: 34px; fill: #555; }72  .cart-btn { margin-left: 8px; }73 74  /* Sort / Filter bar */75  .sort-filter {76    height: 110px;77    background: #FFFFFF;78    display: flex;79    align-items: center;80    border-bottom: 1px solid #E6E6E6;81  }82  .sf-item {83    width: 540px;84    display: flex;85    align-items: center;86    justify-content: center;87    gap: 16px;88    color: #1F2937;89    font-size: 34px;90    font-weight: 600;91  }92  .sf-item svg { width: 36px; height: 36px; fill: #374151; }93  .sf-divider {94    position: absolute;95    left: 540px;96    width: 1px;97    height: 56px;98    background: #E5E7EB;99  }100  .badge {101    position: relative;102    display: inline-block;103  }104  .badge::after {105    content: "1";106    position: absolute;107    top: -12px;108    right: -14px;109    background: #EF4444;110    color: #fff;111    font-size: 22px;112    line-height: 22px;113    padding: 4px 8px;114    border-radius: 14px;115    border: 2px solid #FFFFFF;116  }117 118  /* Products grid */119  .products {120    position: relative;121    display: grid;122    grid-template-columns: 540px 540px;123    grid-auto-rows: auto;124    background: #FFFFFF;125  }126  .products .col { min-height: 820px; }127  .products .col.left { border-right: 1px solid #E6E6E6; }128  .product-card {129    padding: 24px;130  }131  .product-image {132    width: 492px;133    height: 436px;134    background: #E0E0E0;135    border: 1px solid #BDBDBD;136    display: flex;137    align-items: center;138    justify-content: center;139    color: #757575;140    font-size: 28px;141    position: relative;142    border-radius: 6px;143    margin-bottom: 22px;144  }145  .heart {146    position: absolute;147    top: 12px;148    right: 12px;149    width: 40px;150    height: 40px;151  }152  .title {153    font-size: 36px;154    color: #111827;155    margin-bottom: 14px;156    white-space: nowrap;157    overflow: hidden;158    text-overflow: ellipsis;159  }160  .price-row {161    display: flex;162    align-items: center;163    gap: 12px;164    margin-bottom: 14px;165  }166  .discount {167    display: flex;168    align-items: center;169    color: #10B981;170    font-size: 34px;171    font-weight: 700;172    gap: 8px;173  }174  .old-price {175    font-size: 34px;176    color: #9CA3AF;177    text-decoration: line-through;178  }179  .new-price {180    font-size: 40px;181    font-weight: 800;182    color: #111827;183  }184  .stock-warning {185    color: #C81D63;186    font-size: 34px;187    font-weight: 700;188    margin-bottom: 22px;189  }190  .delivery {191    color: #111827;192    font-size: 32px;193  }194 195  /* Large light area below content (as in screenshot) */196  .spacer {197    height: 1400px;198    background: #F3F4F6;199    border-top: 1px solid #E6E6E6;200  }201</style>202</head>203<body>204<div id="render-target">205 206  <!-- Status bar -->207  <div class="status-bar">208    <div class="status-left">8:42</div>209    <div class="status-right">210      <div class="status-icon">211        <svg viewBox="0 0 24 24"><path d="M2 12a10 10 0 1 0 20 0A10 10 0 0 0 2 12zm5 0a5 5 0 1 1 10 0 5 5 0 0 1-10 0z"/></svg>212      </div>213      <div class="status-icon">214        <svg viewBox="0 0 24 24"><path d="M3 18h18v2H3v-2zm2-5h14v2H5v-2zm2-5h10v2H7V8z"/></svg>215      </div>216      <div class="status-icon">217        <svg viewBox="0 0 24 24"><path d="M4 8l8-6 8 6v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8zm8-3.5L6.5 8H17.5L12 4.5z"/></svg>218      </div>219      <div class="status-icon">220        <svg viewBox="0 0 24 24"><path d="M12 5a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm7 12H5a2 2 0 0 0-2 2v1h18v-1a2 2 0 0 0-2-2z"/></svg>221      </div>222      <div class="status-icon">223        <svg viewBox="0 0 24 24"><path d="M17 7a5 5 0 1 1-10 0 5 5 0 0 1 10 0zM2 21h20v2H2z"/></svg>224      </div>225    </div>226  </div>227 228  <!-- Header with back, search box, cart -->229  <div class="header">230    <div class="icon-btn">231      <svg viewBox="0 0 24 24"><path d="M15.5 5.5L9 12l6.5 6.5-1.4 1.4L6.2 12l7.9-7.9 1.4 1.4z"/></svg>232    </div>233    <div class="search-input">234      <svg viewBox="0 0 24 24"><path d="M15.5 15.5 20 20l-1.5 1.5-4.5-4.5v-.8l-.3-.3a6 6 0 1 1 .8-.8l.3.3h.7zM10 15a5 5 0 1 0 0-10 5 5 0 0 0 0 10z"/></svg>235      <div class="search-field">door hinges 5 inch</div>236      <div class="search-utilities">237        <div class="util">238          <svg viewBox="0 0 24 24"><path d="M12 3a3 3 0 0 1 3 3v4a3 3 0 1 1-6 0V6a3 3 0 0 1 3-3zm-4 13h8v3H8v-3z"/></svg>239        </div>240        <div class="util">241          <svg viewBox="0 0 24 24"><path d="M7 7h3l2-2h4a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1zM12 9a4 4 0 1 0 0 8 4 4 0 0 0 0-8z"/></svg>242        </div>243      </div>244    </div>245    <div class="icon-btn cart-btn">246      <svg viewBox="0 0 24 24"><path d="M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM6 6h15l-2 8H8L6 6zm-2-2H1v2h2l3 10h12v-2H7.6L6.2 6z"/></svg>247    </div>248  </div>249 250  <!-- Sort / Filter row -->251  <div class="sort-filter">252    <div class="sf-item">253      <svg viewBox="0 0 24 24"><path d="M7 6h2v12H7V6zm8 0h2v12h-2V6zM4 10h6v2H4v-2zm10 0h6v2h-6v-2z"/></svg>254      <span>Sort</span>255    </div>256    <div class="sf-divider"></div>257    <div class="sf-item">258      <span class="badge">259        <svg viewBox="0 0 24 24"><path d="M4 7h12v2H4V7zm0 4h8v2H4v-2zm0 4h16v2H4v-2zM16 7h4v2h-4V7zm8 4"/></svg>260      </span>261      <span>Filter</span>262    </div>263  </div>264 265  <!-- Products grid -->266  <div class="products">267    <div class="col left">268      <div class="product-card">269        <div class="product-image">270          [IMG: Stainless steel door hinges collage]271          <svg class="heart" viewBox="0 0 24 24">272            <path d="M12 21s-6.5-4.3-8.5-7A5 5 0 0 1 12 6a5 5 0 0 1 8.5 8c-2 2.7-8.5 7-8.5 7z" fill="none" stroke="#C0C0C0" stroke-width="1.6"/>273          </svg>274        </div>275        <div class="title">BESTLINING Stainless St...</div>276        <div class="price-row">277          <div class="discount">278            <svg viewBox="0 0 24 24" width="24" height="24" style="fill:#10B981;"><path d="M12 15L6 9h12z"/></svg>279            33%280          </div>281          <div class="old-price">2,999</div>282          <div class="new-price">₹1,999</div>283        </div>284        <div class="stock-warning">Only few left</div>285        <div class="delivery">Free delivery</div>286      </div>287    </div>288    <div class="col right">289      <!-- right column intentionally empty to match screenshot's blank area -->290    </div>291  </div>292 293  <!-- Spacer to match long page height -->294  <div class="spacer"></div>295 296</div>297</body>298</html>