<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image to ICO Converter</title>
<style>
  body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin-top: 50px;
  }
  #fileInput {
    margin-bottom: 20px;
  }
</style>
</head>
<body>
  <h1>Image to ICO Converter</h1>
  <input type="file" id="fileInput" accept="image/*">
  <br>
  <button id="convertButton"><span>Convert to ICO</span></button>
  <br><br>
  <a id="downloadLink" style="display: none;" download="icon.ico">Download ICO</a>

  <script src="icojs.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const fileInput = document.getElementById('fileInput');
      const convertButton = document.getElementById('convertButton');
      const downloadLink = document.getElementById('downloadLink');

      convertButton.addEventListener('click', function() {
        if (fileInput.files.length > 0) {
          const file = fileInput.files[0];

          // Check if file is an image
          if (file.type.startsWith('image/')) {
            const reader = new FileReader();

            reader.onload = function(e) {
              const img = new Image();
              img.onload = function() {
                // Create a canvas to draw the image
                const canvas = document.createElement('canvas');
                canvas.width = img.width;
                canvas.height = img.height;
                const ctx = canvas.getContext('2d');
                ctx.drawImage(img, 0, 0, img.width, img.height);

                // Convert canvas to ICO format
                const ico = new ICO();
                ico.add(canvas.toDataURL('image/png')); // Add PNG image data

                // Generate ICO file blob
                const icoBlob = ico.build();

                // Update download link
                const url = URL.createObjectURL(icoBlob);
                downloadLink.href = url;
                downloadLink.style.display = 'inline-block';
              };
              img.src = e.target.result;
            };

            reader.readAsDataURL(file);
          } else {
            alert('Please upload an image file.');
          }
        } else {
          alert('Please select a file to convert.');
        }
      });
    });
  </script>
</body>
</html>
