<!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