<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>share</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f4f4f4;
      color: #222;
      text-align: center;
      padding: 40px;
    }

    input[type="text"], input[type="file"] {
      width: 80%;
      max-width: 700px;
      padding: 12px;
      font-size: 16px;
      border-radius: 5px;
      border: 1px solid #ccc;
      margin: 10px 0;
      background: #fff;
      color: #222;
    }

    button {
      padding: 12px 24px;
      font-size: 16px;
      cursor: pointer;
      border: none;
      background: #444;
      color: white;
      border-radius: 5px;
      margin: 10px;
      transition: background 0.3s ease;
    }

    button:hover {
      background: #666;
    }

    #status, #files, #seedOutput {
      margin-top: 20px;
      word-wrap: break-word;
    }

    a.file-link {
      display: block;
      margin: 8px auto;
      color: #0066cc;
      font-weight: bold;
      text-decoration: none;
    }

    video, audio {
      margin-top: 20px;
      width: 100%;
      max-width: 800px;
    }

    h2 {
      margin-top: 50px;
      color: #333;
    }

    code {
      background: #eee;
      padding: 4px 6px;
      border-radius: 4px;
      display: inline-block;
      color: #d32f2f;
    }

    .section {
      margin-bottom: 60px;
      background: #fff;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
  </style>
</head>
<body>

  <h1>Share Files</h1>

  <!-- DOWNLOAD SECTION -->
  <div class="section">
    <h2>📥 Download from Magnet URI</h2>
    <input type="text" id="magnetInput" placeholder="Paste full magnet URI here..." />
    <br>
    <button onclick="loadTorrent()">Start Streaming</button>
    <div id="status">Waiting for input...</div>
    <div id="files"></div>
  </div>

  <!-- SEED SECTION -->
  <div class="section">
    <h2>📤 Upload & Seed Files</h2>
    <input type="file" id="fileInput" multiple>
    <div id="seedOutput">No files selected.</div>
  </div>

  <!-- WebTorrent -->
  <script src="https://cdn.jsdelivr.net/npm/webtorrent@latest/webtorrent.min.js"></script>

  <script>
    const client = new WebTorrent()

    // --- DOWNLOAD ---
    function loadTorrent() {
      const magnetURI = document.getElementById('magnetInput').value.trim()
      const status = document.getElementById('status')
      const filesDiv = document.getElementById('files')
      filesDiv.innerHTML = ''

      if (!magnetURI.startsWith('magnet:?')) {
        status.innerHTML = '❌ Please enter a valid magnet URI starting with <code>magnet:?</code>'
        return
      }

      status.innerHTML = '⏳ Adding torrent...'

      client.add(magnetURI, function (torrent) {
        status.innerHTML = `✅ Torrent loaded: <strong>${torrent.name}</strong><br>Peers: ${torrent.numPeers}`

        torrent.files.forEach(file => {
          const fileType = file.name.split('.').pop().toLowerCase()
          const container = document.createElement('div')
          const title = document.createElement('p')
          title.textContent = `📄 ${file.name} (${(file.length / 1024 / 1024).toFixed(2)} MB)`
          container.appendChild(title)

          if (['mp4', 'webm', 'mp3', 'ogg'].includes(fileType)) {
            file.appendTo(container, { autoplay: false, controls: true })
          } else {
            const link = document.createElement('a')
            link.href = '#'
            link.className = 'file-link'
            link.textContent = '⬇️ Download'
            link.addEventListener('click', () => {
              file.getBlob((err, blob) => {
                const url = URL.createObjectURL(blob)
                const a = document.createElement('a')
                a.href = url
                a.download = file.name
                a.click()
              })
            })
            container.appendChild(link)
          }

          filesDiv.appendChild(container)
        })

        torrent.on('download', () => {
          const progress = (torrent.progress * 100).toFixed(2)
          status.innerHTML = `📥 Downloading: ${progress}% | Peers: ${torrent.numPeers}`
        })

        torrent.on('done', () => {
          status.innerHTML += '<br>✅ Download complete!'
        })
      })
    }

    // --- SEEDING ---
    const fileInput = document.getElementById('fileInput')
    const seedOutput = document.getElementById('seedOutput')

    fileInput.addEventListener('change', () => {
      const files = Array.from(fileInput.files)

      if (files.length === 0) {
        seedOutput.innerHTML = 'No files selected.'
        return
      }

      seedOutput.innerHTML = '⏳ Starting seeding...'

      client.seed(files, {
        announce: ['wss://tracker.openwebtorrent.com']
      }, function (torrent) {
        seedOutput.innerHTML = `
          <strong>✅ Seeding started!</strong><br>
          Magnet URI:<br><code>${torrent.magnetURI}</code><br>
          <span id="seedStatus">Seeding...</span>
        `

        torrent.on('upload', () => {
          const statusText = `📤 Seeding | Uploaded: ${(torrent.uploaded / 1024 / 1024).toFixed(2)} MB | Peers: ${torrent.numPeers}`
          document.getElementById('seedStatus').innerText = statusText
        })

        torrent.on('noPeers', () => {
          document.getElementById('seedStatus').innerText = '📭 No peers connected.'
        })
      })
    })
  </script>

</body>
</html>
/* Add your styles here */

// Add your code here