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>Amazon Search - 1kg hammer</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: linear-gradient(180deg, #9fd9d2 0px, #a8e0d7 140px, #f3f4f6 140px, #f3f4f6 100%);12  }13 14  /* Status bar */15  .status-bar {16    height: 80px; padding: 0 28px; color: #0b1b24; font-size: 34px;17    display: flex; align-items: center; justify-content: space-between;18    opacity: 0.9;19  }20  .status-right { display: flex; align-items: center; gap: 20px; }21  .dot { width: 10px; height: 10px; background: #263238; border-radius: 50%; display: inline-block; opacity: .6; }22 23  /* Top search header */24  .top-row { display: flex; align-items: center; gap: 20px; padding: 10px 24px 14px 24px; }25  .back-btn {26    width: 72px; height: 72px; border-radius: 36px; display: flex; align-items: center; justify-content: center;27    background: transparent;28  }29  .search-box {30    flex: 1; height: 96px; border-radius: 20px; background: #ffffff; box-shadow: 0 6px 12px rgba(0,0,0,0.12);31    display: flex; align-items: center; padding: 0 24px; gap: 18px;32  }33  .search-placeholder { color: #222; font-size: 36px; flex: 1; }34  .scan-icon {35    width: 64px; height: 64px; border-radius: 16px; background: #eef2f5; display: flex; align-items: center; justify-content: center;36    border: 1px solid #cfd8dc;37  }38 39  /* Location row */40  .location-row {41    display: flex; align-items: center; gap: 16px; padding: 18px 28px; color: #263238; font-size: 32px;42    background: transparent;43  }44  .loc-text { color: #37474f; }45  .linkish { color: #0a74da; }46 47  /* Filter chips row */48  .chips {49    display: flex; align-items: center; gap: 16px; padding: 14px 24px; border-top: 1px solid #e0e0e0; background: #f6f7f8;50  }51  .chip, .chip-outline {52    padding: 18px 26px; border-radius: 36px; font-size: 30px;53  }54  .chip { background: #ffffff; border: 1px solid #e5e7eb; color: #374151; }55  .chip-outline { background: #f0f3f6; border: 1px solid #d5dbe0; color: #374151; }56  .prime-chip { display: flex; align-items: center; gap: 12px; padding-right: 18px; }57  .switch {58    width: 72px; height: 40px; background: #e6e6e6; border-radius: 20px; position: relative;59  }60  .switch::after {61    content: ""; width: 34px; height: 34px; background: #ffffff; border-radius: 50%; position: absolute; top: 3px; left: 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.2);62  }63 64  /* Cards list */65  .list { padding: 18px 20px 180px; display: flex; flex-direction: column; gap: 28px; }66  .card {67    background: #ffffff; border: 1px solid #e6eaee; border-radius: 18px; padding: 22px; display: grid; grid-template-columns: 300px 1fr; gap: 24px;68  }69  .img-ph {70    width: 100%; height: 240px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 12px;71    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px; text-align: center;72  }73  .sponsored { color: #6b7280; font-size: 26px; margin-bottom: 6px; }74  .title { font-size: 34px; color: #0f1419; line-height: 1.28; margin-bottom: 10px; }75  .badge { display: inline-block; font-size: 24px; padding: 6px 12px; border: 1px solid #cfd8dc; border-radius: 8px; color: #37474f; background: #f0f6f9; margin-bottom: 10px; }76  .rating { display: flex; align-items: center; gap: 8px; font-size: 28px; color: #111827; margin: 6px 0 12px; }77  .star { width: 26px; height: 26px; }78  .price-row { display: flex; align-items: baseline; gap: 14px; margin: 8px 0; }79  .price { font-size: 40px; color: #0f1111; font-weight: 700; }80  .mrp { color: #6b7280; text-decoration: line-through; font-size: 26px; }81  .prime-row { display: flex; align-items: center; gap: 10px; color: #0b74da; font-weight: 600; margin: 6px 0; }82  .delivery { color: #6b7280; font-size: 26px; }83 84  /* Bottom modal overlay */85  .overlay {86    position: absolute; inset: 0; background: rgba(0,0,0,0.35);87    display: flex; align-items: flex-end; padding: 0 24px 70px 24px;88  }89  .sheet {90    width: 100%; background: #ffffff; border-radius: 20px; box-shadow: 0 14px 40px rgba(0,0,0,0.35);91    padding: 36px 28px 32px;92  }93  .sheet h3 { margin: 0 0 28px 0; font-size: 44px; color: #111827; font-weight: 600; line-height: 1.25; }94  .cta { height: 110px; border-radius: 14px; border: 1px solid #d1c097; background: linear-gradient(#f7d57f, #e7c46f); color: #4a3422; font-size: 34px; font-weight: 600; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }95  .cta.secondary { background: #f1f3f5; color: #374151; border-color: #d8dde3; }96 97  /* Gesture bar */98  .home-indicator {99    position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);100    width: 320px; height: 10px; background: #c9ccd1; border-radius: 6px; opacity: .9;101  }102</style>103</head>104<body>105<div id="render-target">106  <!-- Status bar -->107  <div class="status-bar">108    <div>12:31</div>109    <div class="status-right">110      <span class="dot"></span>111      <span class="dot"></span>112      <span style="font-size:32px; opacity:.7;">✉️</span>113      <span style="opacity:.7;">•</span>114      <svg width="34" height="34" viewBox="0 0 24 24" fill="#263238"><path d="M12 2a9 9 0 1 0 .001 18.001A9 9 0 0 0 12 2zm1 4v6l5 3-.75 1.23L11 12V6h2z"/></svg>115      <div style="display:flex; align-items:center; gap:8px;">116        <svg width="42" height="26" viewBox="0 0 24 24" fill="#263238"><path d="M16 6H8a4 4 0 0 0-4 4v4h2v-4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v4h2v-4a4 4 0 0 0-4-4z"/><rect x="4" y="14" width="16" height="4" rx="2"/></svg>117        <span style="font-size:30px;">94%</span>118      </div>119    </div>120  </div>121 122  <!-- Search header -->123  <div class="top-row">124    <div class="back-btn">125      <svg width="46" height="46" viewBox="0 0 24 24" fill="#1f2937"><path d="M15.5 19 9 12l6.5-7 1.5 1.6L12.6 12l4.4 5.4-1.5 1.6z"/></svg>126    </div>127    <div class="search-box">128      <svg width="40" height="40" viewBox="0 0 24 24" fill="#6b7280"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>129      <div class="search-placeholder">1kg hammer</div>130      <div class="scan-icon">131        <svg width="36" height="36" viewBox="0 0 24 24" fill="#607d8b">132          <path d="M7 3H3v4h2V5h2V3zm14 4V3h-4v2h2v2h2zM5 17H3v4h4v-2H5v-2zm16 0h-2v2h-2v2h4v-4zM6 8h12v8H6z" />133        </svg>134      </div>135    </div>136  </div>137 138  <!-- Location row -->139  <div class="location-row">140    <svg width="34" height="34" viewBox="0 0 24 24" fill="#1f2937"><path d="M12 2C8.7 2 6 4.7 6 8c0 5 6 12 6 12s6-7 6-12c0-3.3-2.7-6-6-6zm0 8.5A2.5 2.5 0 1 1 12 5a2.5 2.5 0 0 1 0 5z"/></svg>141    <div class="loc-text">Delivering to Dehradun 248001 - <span class="linkish">Update location</span></div>142    <svg width="24" height="24" viewBox="0 0 24 24" fill="#374151" style="margin-left:6px;"><path d="M7 10l5 5 5-5z"/></svg>143  </div>144 145  <!-- Filter chips -->146  <div class="chips">147    <div class="chip prime-chip">148      <span style="color:#0a74da; font-weight:700;">prime</span>149      <div class="switch"></div>150    </div>151    <div class="chip">Claw Hammers</div>152    <div class="chip">Club Hammers</div>153    <div class="chip-outline" style="margin-left:auto; display:flex; align-items:center; gap:10px;">154      Filters155      <svg width="22" height="22" viewBox="0 0 24 24" fill="#374151"><path d="M7 10l5 5 5-5z"/></svg>156    </div>157  </div>158 159  <!-- Product list -->160  <div class="list">161    <div class="card">162      <div class="img-ph">[IMG: Black and orange hammer]</div>163      <div>164        <div class="sponsored">Sponsored</div>165        <div class="title">Groz Ball Pein Hammer with Overstrike Protection | Fibreglass Handle| Durable and Lightweigh...</div>166        <div class="badge">Industrial</div>167        <div class="rating">168          5.0169          <svg class="star" viewBox="0 0 24 24" fill="#f59e0b"><path d="M12 17.3l-6.2 3.7L7 14 2 9.5l6.9-1L12 2l3.1 6.5 6.9 1L17 14l1.2 7L12 17.3z"/></svg>170          <svg class="star" viewBox="0 0 24 24" fill="#f59e0b"><path d="M12 17.3l-6.2 3.7L7 14 2 9.5l6.9-1L12 2l3.1 6.5 6.9 1L17 14l1.2 7L12 17.3z"/></svg>171          <svg class="star" viewBox="0 0 24 24" fill="#f59e0b"><path d="M12 17.3l-6.2 3.7L7 14 2 9.5l6.9-1L12 2l3.1 6.5 6.9 1L17 14l1.2 7L12 17.3z"/></svg>172