687 lines
22 KiB
HTML
687 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
|
<title>Iroh File Sync</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
padding: 10px;
|
|
color: #333;
|
|
}
|
|
|
|
.container {
|
|
max-width: 420px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
border-radius: 20px;
|
|
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.header {
|
|
background: linear-gradient(45deg, #667eea, #764ba2);
|
|
color: white;
|
|
padding: 25px 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.status {
|
|
font-size: 14px;
|
|
opacity: 0.9;
|
|
background: rgba(255,255,255,0.1);
|
|
padding: 8px 15px;
|
|
border-radius: 20px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.content {
|
|
padding: 25px 20px;
|
|
}
|
|
|
|
.section {
|
|
margin-bottom: 30px;
|
|
background: #f8f9fa;
|
|
border-radius: 15px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.section h3 {
|
|
color: #333;
|
|
margin-bottom: 15px;
|
|
font-size: 18px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.input-group {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
input[type="text"] {
|
|
width: 100%;
|
|
padding: 15px;
|
|
border: 2px solid #e1e5e9;
|
|
border-radius: 12px;
|
|
font-size: 16px;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
input[type="text"]:focus {
|
|
outline: none;
|
|
border-color: #667eea;
|
|
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
|
}
|
|
|
|
.btn {
|
|
width: 100%;
|
|
padding: 15px;
|
|
background: linear-gradient(45deg, #667eea, #764ba2);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 12px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.btn:hover, .btn:active {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
|
|
}
|
|
|
|
.btn:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.btn.secondary {
|
|
background: linear-gradient(45deg, #6c757d, #5a6268);
|
|
}
|
|
|
|
.file-list {
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
border: 2px solid #e1e5e9;
|
|
border-radius: 12px;
|
|
background: white;
|
|
}
|
|
|
|
.file-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 15px;
|
|
border-bottom: 1px solid #e1e5e9;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.file-item:hover {
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
.file-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.file-icon {
|
|
width: 45px;
|
|
height: 45px;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 15px;
|
|
font-size: 20px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.file-icon.file {
|
|
background: linear-gradient(45deg, #e3f2fd, #bbdefb);
|
|
color: #1976d2;
|
|
}
|
|
|
|
.file-icon.folder {
|
|
background: linear-gradient(45deg, #fff3e0, #ffcc02);
|
|
color: #f57c00;
|
|
}
|
|
|
|
.file-info {
|
|
flex-grow: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.file-name {
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 5px;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.file-size {
|
|
font-size: 12px;
|
|
color: #666;
|
|
}
|
|
|
|
.file-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.btn-small {
|
|
padding: 8px 12px;
|
|
font-size: 12px;
|
|
border-radius: 8px;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.btn-download {
|
|
background: #28a745;
|
|
color: white;
|
|
}
|
|
|
|
.btn-download:hover {
|
|
background: #218838;
|
|
}
|
|
|
|
.message {
|
|
padding: 15px;
|
|
border-radius: 12px;
|
|
margin-bottom: 15px;
|
|
font-weight: 500;
|
|
animation: slideIn 0.3s ease;
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from { transform: translateY(-10px); opacity: 0; }
|
|
to { transform: translateY(0); opacity: 1; }
|
|
}
|
|
|
|
.message.success {
|
|
background: linear-gradient(45deg, #d4edda, #c3e6cb);
|
|
color: #155724;
|
|
border: 2px solid #a5d6a7;
|
|
}
|
|
|
|
.message.error {
|
|
background: linear-gradient(45deg, #f8d7da, #f1b0b7);
|
|
color: #721c24;
|
|
border: 2px solid #ef9a9a;
|
|
}
|
|
|
|
.loading {
|
|
text-align: center;
|
|
padding: 30px;
|
|
color: #666;
|
|
font-style: italic;
|
|
}
|
|
|
|
.upload-area {
|
|
border: 3px dashed #667eea;
|
|
border-radius: 15px;
|
|
padding: 40px 20px;
|
|
text-align: center;
|
|
background: linear-gradient(45deg, #f8f9ff, #f0f4ff);
|
|
margin-bottom: 20px;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
position: relative;
|
|
}
|
|
|
|
.upload-area:hover {
|
|
background: linear-gradient(45deg, #f0f4ff, #e6f3ff);
|
|
border-color: #5a67d8;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.upload-area.dragover {
|
|
background: linear-gradient(45deg, #e6f3ff, #dbeafe);
|
|
border-color: #3182ce;
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
.upload-icon {
|
|
font-size: 48px;
|
|
margin-bottom: 15px;
|
|
color: #667eea;
|
|
}
|
|
|
|
.upload-text {
|
|
font-size: 16px;
|
|
color: #4a5568;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.upload-hint {
|
|
font-size: 14px;
|
|
color: #718096;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.connection-status {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.status-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: #28a745;
|
|
}
|
|
|
|
.status-dot.disconnected {
|
|
background: #dc3545;
|
|
}
|
|
|
|
.ticket-display {
|
|
background: #f8f9fa;
|
|
border: 2px solid #e1e5e9;
|
|
border-radius: 12px;
|
|
padding: 15px;
|
|
margin-top: 15px;
|
|
font-family: monospace;
|
|
font-size: 14px;
|
|
word-break: break-all;
|
|
max-height: 120px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.stats {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 15px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.stat-item {
|
|
background: white;
|
|
padding: 15px;
|
|
border-radius: 12px;
|
|
text-align: center;
|
|
border: 2px solid #e1e5e9;
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: #667eea;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 12px;
|
|
color: #666;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.container {
|
|
margin: 0;
|
|
border-radius: 0;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.content {
|
|
padding: 20px 15px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>🔄 Iroh Sync</h1>
|
|
<div class="status" id="status">
|
|
<div class="connection-status">
|
|
<span class="status-dot disconnected" id="statusDot"></span>
|
|
<span id="statusText">Connecting...</span>
|
|
</div>
|
|
</div>
|
|
<div class="stats">
|
|
<div class="stat-item">
|
|
<div class="stat-number" id="fileCount">0</div>
|
|
<div class="stat-label">Files</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-number" id="peerCount">0</div>
|
|
<div class="stat-label">Peers</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<!-- Connection Section -->
|
|
<div class="section">
|
|
<h3>🎫 Share & Connect</h3>
|
|
<button class="btn" onclick="generateTicket()">📋 Generate Sharing Ticket</button>
|
|
<div class="ticket-display hidden" id="ticketDisplay"></div>
|
|
|
|
<div style="margin: 20px 0; text-align: center; color: #666;">or</div>
|
|
|
|
<div class="input-group">
|
|
<input type="text" id="ticketInput" placeholder="Paste ticket from another device...">
|
|
</div>
|
|
<button class="btn" onclick="connectToPeer()">🔗 Connect to Peer</button>
|
|
</div>
|
|
|
|
<!-- Upload Section -->
|
|
<div class="section">
|
|
<h3>📤 Upload Files</h3>
|
|
<div class="upload-area" onclick="document.getElementById('fileInput').click()"
|
|
ondrop="handleDrop(event)" ondragover="handleDragOver(event)" ondragleave="handleDragLeave(event)">
|
|
<div class="upload-icon">📁</div>
|
|
<div class="upload-text">Tap to select files</div>
|
|
<div class="upload-hint">or drag & drop here</div>
|
|
</div>
|
|
<input type="file" id="fileInput" style="display: none;" multiple onchange="handleFileSelect(event)">
|
|
<button class="btn" onclick="uploadSelectedFiles()" id="uploadBtn" disabled>📤 Upload Files</button>
|
|
</div>
|
|
|
|
<!-- Files Section -->
|
|
<div class="section">
|
|
<h3>📋 Synced Files</h3>
|
|
<div class="file-list" id="fileList">
|
|
<div class="loading">Loading files...</div>
|
|
</div>
|
|
<button class="btn secondary" onclick="refreshFiles()" style="margin-top: 15px;">🔄 Refresh</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let selectedFiles = [];
|
|
let connected = false;
|
|
let currentTicket = '';
|
|
|
|
// Initialize
|
|
window.onload = function() {
|
|
checkStatus();
|
|
refreshFiles();
|
|
setInterval(checkStatus, 3000); // Check status every 3 seconds
|
|
};
|
|
|
|
async function checkStatus() {
|
|
try {
|
|
const response = await fetch('/api/status');
|
|
const status = await response.json();
|
|
|
|
const isConnected = status.connected_peers > 0;
|
|
const statusDot = document.getElementById('statusDot');
|
|
const statusText = document.getElementById('statusText');
|
|
|
|
if (isConnected) {
|
|
statusDot.className = 'status-dot';
|
|
statusText.textContent = `Connected (${status.connected_peers} peer${status.connected_peers > 1 ? 's' : ''})`;
|
|
} else {
|
|
statusDot.className = 'status-dot disconnected';
|
|
statusText.textContent = 'Waiting for peers';
|
|
}
|
|
|
|
document.getElementById('fileCount').textContent = status.total_files;
|
|
document.getElementById('peerCount').textContent = status.connected_peers;
|
|
|
|
connected = isConnected;
|
|
} catch (error) {
|
|
document.getElementById('statusText').textContent = 'Connection Error';
|
|
console.error('Status check failed:', error);
|
|
}
|
|
}
|
|
|
|
async function generateTicket() {
|
|
try {
|
|
const response = await fetch('/api/ticket');
|
|
const ticket = await response.text();
|
|
currentTicket = ticket.replace(/"/g, ''); // Remove quotes
|
|
|
|
const ticketDisplay = document.getElementById('ticketDisplay');
|
|
ticketDisplay.textContent = currentTicket;
|
|
ticketDisplay.classList.remove('hidden');
|
|
|
|
// Copy to clipboard
|
|
if (navigator.clipboard) {
|
|
await navigator.clipboard.writeText(currentTicket);
|
|
showMessage('Ticket generated and copied to clipboard!', 'success');
|
|
} else {
|
|
showMessage('Ticket generated! Copy it manually.', 'success');
|
|
}
|
|
} catch (error) {
|
|
showMessage('Failed to generate ticket: ' + error.message, 'error');
|
|
}
|
|
}
|
|
|
|
async function connectToPeer() {
|
|
const ticket = document.getElementById('ticketInput').value.trim();
|
|
if (!ticket) {
|
|
showMessage('Please enter a ticket', 'error');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('/api/connect', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ ticket })
|
|
});
|
|
|
|
if (response.ok) {
|
|
showMessage('Connected successfully!', 'success');
|
|
document.getElementById('ticketInput').value = '';
|
|
setTimeout(() => {
|
|
checkStatus();
|
|
refreshFiles();
|
|
}, 1000);
|
|
} else {
|
|
showMessage('Connection failed - check the ticket', 'error');
|
|
}
|
|
} catch (error) {
|
|
showMessage('Connection error: ' + error.message, 'error');
|
|
}
|
|
}
|
|
|
|
function handleFileSelect(event) {
|
|
selectedFiles = Array.from(event.target.files);
|
|
updateUploadButton();
|
|
}
|
|
|
|
function handleDrop(event) {
|
|
event.preventDefault();
|
|
event.target.classList.remove('dragover');
|
|
selectedFiles = Array.from(event.dataTransfer.files);
|
|
updateUploadButton();
|
|
}
|
|
|
|
function handleDragOver(event) {
|
|
event.preventDefault();
|
|
event.currentTarget.classList.add('dragover');
|
|
}
|
|
|
|
function handleDragLeave(event) {
|
|
event.currentTarget.classList.remove('dragover');
|
|
}
|
|
|
|
function updateUploadButton() {
|
|
const btn = document.getElementById('uploadBtn');
|
|
if (selectedFiles.length > 0) {
|
|
btn.disabled = false;
|
|
btn.innerHTML = `📤 Upload ${selectedFiles.length} file${selectedFiles.length > 1 ? 's' : ''}`;
|
|
} else {
|
|
btn.disabled = true;
|
|
btn.innerHTML = '📤 Upload Files';
|
|
}
|
|
}
|
|
|
|
async function uploadSelectedFiles() {
|
|
if (selectedFiles.length === 0) return;
|
|
|
|
const btn = document.getElementById('uploadBtn');
|
|
const originalText = btn.innerHTML;
|
|
btn.disabled = true;
|
|
btn.innerHTML = '⏳ Uploading...';
|
|
|
|
let successCount = 0;
|
|
let failCount = 0;
|
|
|
|
for (let file of selectedFiles) {
|
|
try {
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
|
|
const response = await fetch('/api/upload', {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
|
|
if (response.ok) {
|
|
successCount++;
|
|
} else {
|
|
failCount++;
|
|
console.error('Upload failed for:', file.name);
|
|
}
|
|
} catch (error) {
|
|
failCount++;
|
|
console.error('Upload error for', file.name, ':', error);
|
|
}
|
|
}
|
|
|
|
if (successCount > 0) {
|
|
showMessage(`Successfully uploaded ${successCount} file${successCount > 1 ? 's' : ''}!`, 'success');
|
|
}
|
|
if (failCount > 0) {
|
|
showMessage(`Failed to upload ${failCount} file${failCount > 1 ? 's' : ''}`, 'error');
|
|
}
|
|
|
|
selectedFiles = [];
|
|
document.getElementById('fileInput').value = '';
|
|
updateUploadButton();
|
|
setTimeout(refreshFiles, 1000);
|
|
}
|
|
|
|
async function refreshFiles() {
|
|
const fileList = document.getElementById('fileList');
|
|
fileList.innerHTML = '<div class="loading">Loading files...</div>';
|
|
|
|
try {
|
|
const response = await fetch('/api/files');
|
|
const files = await response.json();
|
|
|
|
if (files.length === 0) {
|
|
fileList.innerHTML = '<div class="loading">No files yet - upload some!</div>';
|
|
return;
|
|
}
|
|
|
|
fileList.innerHTML = files.map(file => `
|
|
<div class="file-item">
|
|
<div class="file-icon ${file.is_directory ? 'folder' : 'file'}">
|
|
${file.is_directory ? '📁' : getFileIcon(file.name)}
|
|
</div>
|
|
<div class="file-info">
|
|
<div class="file-name">${file.name}</div>
|
|
<div class="file-size">
|
|
${file.is_directory ? 'Folder' : formatFileSize(file.size)}
|
|
</div>
|
|
</div>
|
|
${!file.is_directory ? `
|
|
<div class="file-actions">
|
|
<button class="btn-small btn-download" onclick="downloadFile('${file.path}', '${file.name}')">
|
|
💾
|
|
</button>
|
|
</div>
|
|
` : ''}
|
|
</div>
|
|
`).join('');
|
|
} catch (error) {
|
|
fileList.innerHTML = '<div class="loading">Error loading files</div>';
|
|
console.error('Failed to load files:', error);
|
|
}
|
|
}
|
|
|
|
function getFileIcon(filename) {
|
|
const ext = filename.split('.').pop().toLowerCase();
|
|
const iconMap = {
|
|
'jpg': '🖼️', 'jpeg': '🖼️', 'png': '🖼️', 'gif': '🖼️',
|
|
'mp4': '🎬', 'avi': '🎬', 'mov': '🎬',
|
|
'mp3': '🎵', 'wav': '🎵', 'flac': '🎵',
|
|
'pdf': '📕', 'doc': '📄', 'docx': '📄',
|
|
'txt': '📝', 'md': '📝',
|
|
'zip': '📦', 'rar': '📦', '7z': '📦'
|
|
};
|
|
return iconMap[ext] || '📄';
|
|
}
|
|
|
|
async function downloadFile(filePath, fileName) {
|
|
try {
|
|
const response = await fetch(`/api/download/${encodeURIComponent(filePath)}`);
|
|
if (!response.ok) throw new Error('Download failed');
|
|
|
|
const blob = await response.blob();
|
|
const url = window.URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = fileName;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
window.URL.revokeObjectURL(url);
|
|
document.body.removeChild(a);
|
|
|
|
showMessage(`Downloaded: ${fileName}`, 'success');
|
|
} catch (error) {
|
|
showMessage(`Download failed: ${fileName}`, 'error');
|
|
}
|
|
}
|
|
|
|
function formatFileSize(bytes) {
|
|
if (bytes === 0) return '0 B';
|
|
const k = 1024;
|
|
const sizes = ['B', 'KB', 'MB', 'GB'];
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
|
}
|
|
|
|
function showMessage(text, type) {
|
|
const existing = document.querySelector('.message');
|
|
if (existing) existing.remove();
|
|
|
|
const message = document.createElement('div');
|
|
message.className = `message ${type}`;
|
|
message.textContent = text;
|
|
|
|
const content = document.querySelector('.content');
|
|
content.insertBefore(message, content.firstChild);
|
|
|
|
setTimeout(() => message.remove(), 5000);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |