Untitled Page

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Kumpulan Stiker Lucu 🐻💖</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #ffeef5;
      text-align: center;
      padding: 20px;
    }
    h1 {
      color: #ff4d88;
    }
    .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
    }
    .sticker {
      background: white;
      padding: 10px;
      border-radius: 15px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      width: 150px;
    }
    img {
      width: 100%;
      border-radius: 10px;
    }
    button {
      margin-top: 10px;
      padding: 8px;
      border: none;
      border-radius: 8px;
      background: #ff4d88;
      color: white;
      cursor: pointer;
    }
    button:hover {
      background: #e6005c;
    }
  </style>
</head>
<body>

<h1>🐻 Kumpulan Stiker Lucu 💖</h1>

<div class="container">

  <div class="sticker">
    <img src="https://i.imgur.com/1.jpg" alt="Sticker 1">
    <button onclick="downloadImage('https://i.imgur.com/1.jpg')">Download</button>
  </div>

  <div class="sticker">
    <img src="https://i.imgur.com/2.jpg" alt="Sticker 2">
    <button onclick="downloadImage('https://i.imgur.com/2.jpg')">Download</button>
  </div>

  <div class="sticker">
    <img src="https://i.imgur.com/3.jpg" alt="Sticker 3">
    <button onclick="downloadImage('https://i.imgur.com/3.jpg')">Download</button>
  </div>

</div>

<script>
function downloadImage(url) {
  fetch(url)
    .then(res => res.blob())
    .then(blob => {
      const a = document.createElement('a');
      a.href = URL.createObjectURL(blob);
      a.download = "sticker.png";
      a.click();
    })
    .catch(() => alert("Gagal download 😭"));
}
</script>

</body>
</html>