338 lines
17 KiB
HTML
338 lines
17 KiB
HTML
{{template "base.html" .}}
|
|
|
|
{{define "title"}}Compartir — Inicio{{end}}
|
|
|
|
{{define "content"}}
|
|
<div class="max-w-3xl mx-auto space-y-8">
|
|
<!-- Hero / Header -->
|
|
<div class="text-center space-y-2">
|
|
<h1 class="text-3xl sm:text-4xl font-extrabold tracking-tight text-white">
|
|
Pasa archivos y texto <span class="text-brand-500">al instante</span>
|
|
</h1>
|
|
<p class="text-slate-400 text-sm sm:text-base max-w-xl mx-auto">
|
|
Olvídate de abrir WhatsApp para pasarte fotos, PDFs o notas entre tu PC y tu teléfono. Sube y escanea el QR o copia el enlace.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Mode Selector Tabs -->
|
|
<div class="flex items-center justify-center p-1 bg-slate-900 border border-slate-800 rounded-2xl max-w-md mx-auto">
|
|
<button id="tabFilesBtn" onclick="switchTab('files')" class="flex-1 py-2 px-4 rounded-xl text-sm font-semibold transition flex items-center justify-center gap-2 bg-slate-800 text-white shadow">
|
|
<i class="fa-solid fa-cloud-arrow-up text-brand-500"></i>
|
|
<span>Archivos / Fotos</span>
|
|
</button>
|
|
<button id="tabTextBtn" onclick="switchTab('text')" class="flex-1 py-2 px-4 rounded-xl text-sm font-semibold transition flex items-center justify-center gap-2 text-slate-400 hover:text-white">
|
|
<i class="fa-solid fa-code text-indigo-400"></i>
|
|
<span>Texto / Código</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Tab 1: File Upload -->
|
|
<div id="tabFiles" class="space-y-4">
|
|
<div id="dropZone" class="relative group border-2 border-dashed border-slate-700 hover:border-brand-500/80 bg-slate-900/50 hover:bg-slate-900/90 rounded-3xl p-8 sm:p-12 text-center transition-all duration-200 cursor-pointer">
|
|
<input type="file" id="fileInput" class="hidden" multiple>
|
|
|
|
<div class="space-y-4">
|
|
<div class="w-16 h-16 mx-auto rounded-2xl bg-brand-500/10 border border-brand-500/20 text-brand-400 flex items-center justify-center text-2xl group-hover:scale-110 transition duration-200">
|
|
<i class="fa-solid fa-arrow-up-from-bracket"></i>
|
|
</div>
|
|
<div class="space-y-1">
|
|
<p class="text-base sm:text-lg font-semibold text-white">
|
|
Arrastra tus archivos aquí o <span class="text-brand-400 underline decoration-brand-500/30">haz clic para explorar</span>
|
|
</p>
|
|
<p class="text-xs text-slate-400">
|
|
Imágenes, videos, audios, PDFs, ZIPs o cualquier archivo. También puedes <kbd class="px-2 py-0.5 rounded bg-slate-800 border border-slate-700 text-slate-300 font-mono text-[11px]">Ctrl+V</kbd> para pegar capturas directamente.
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center justify-center gap-4 pt-2 text-xs text-slate-500">
|
|
<span class="flex items-center gap-1.5"><i class="fa-solid fa-shield text-emerald-400"></i> Encriptación TLS</span>
|
|
{{if .Session.IsGuest}}
|
|
<span class="flex items-center gap-1.5"><i class="fa-regular fa-clock text-amber-400"></i> Borrado automático en 24h</span>
|
|
{{else}}
|
|
<span class="flex items-center gap-1.5"><i class="fa-solid fa-database text-emerald-400"></i> Guardado permanente</span>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Uploading overlay / progress -->
|
|
<div id="uploadProgress" class="hidden absolute inset-0 bg-slate-950/90 backdrop-blur-sm rounded-3xl flex flex-col items-center justify-center p-6 space-y-4">
|
|
<div class="w-12 h-12 border-4 border-slate-700 border-t-brand-500 rounded-full animate-spin"></div>
|
|
<div class="text-center space-y-1">
|
|
<p id="progressText" class="text-sm font-semibold text-white">Subiendo archivo...</p>
|
|
<div class="w-64 bg-slate-800 rounded-full h-2 overflow-hidden">
|
|
<div id="progressBar" class="bg-brand-500 h-2 rounded-full w-0 transition-all duration-150"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab 2: Text / Code Share -->
|
|
<div id="tabText" class="hidden space-y-4">
|
|
<form id="textForm" onsubmit="handleShareText(event)" class="bg-slate-900 border border-slate-800 rounded-3xl p-6 space-y-4 shadow-xl">
|
|
<div class="space-y-1">
|
|
<label for="textTitle" class="block text-xs font-semibold text-slate-300">Título o descripción (opcional)</label>
|
|
<input type="text" id="textTitle" placeholder="Ej: Notas de reunión, comando curl, contraseña temporal..." class="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5 text-sm text-slate-100 placeholder-slate-500 focus:outline-none focus:border-indigo-500 transition">
|
|
</div>
|
|
|
|
<div class="space-y-1">
|
|
<label for="textContent" class="block text-xs font-semibold text-slate-300">Contenido (Texto, Código, Enlaces, Markdown)</label>
|
|
<textarea id="textContent" rows="8" required placeholder="Escribe o pega aquí tu texto o código para compartirlo..." class="w-full bg-slate-950 border border-slate-800 rounded-xl p-4 text-sm font-mono text-slate-100 placeholder-slate-500 focus:outline-none focus:border-indigo-500 transition custom-scrollbar"></textarea>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between pt-2">
|
|
<span class="text-xs text-slate-500">
|
|
{{if .Session.IsGuest}}⏰ Caducará a las 24 horas{{else}}🔒 Se guardará de forma permanente{{end}}
|
|
</span>
|
|
<button type="submit" id="submitTextBtn" class="px-6 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white font-semibold text-sm transition flex items-center gap-2 shadow-lg shadow-indigo-600/20">
|
|
<i class="fa-solid fa-paper-plane"></i>
|
|
<span>Compartir Texto</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Success Result Card (Hidden initially) -->
|
|
<div id="resultCard" class="hidden bg-slate-900 border border-slate-800 rounded-3xl p-6 sm:p-8 space-y-6 shadow-2xl animate-fade-in">
|
|
<div class="flex items-center justify-between border-b border-slate-800 pb-4">
|
|
<div class="flex items-center gap-3">
|
|
<span class="w-10 h-10 rounded-xl bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 flex items-center justify-center text-lg">
|
|
<i class="fa-solid fa-check"></i>
|
|
</span>
|
|
<div>
|
|
<h3 id="resultTitle" class="text-base font-bold text-white">¡Listo para compartir!</h3>
|
|
<p id="resultSubtitle" class="text-xs text-slate-400">Escanea el QR o copia el enlace</p>
|
|
</div>
|
|
</div>
|
|
<button onclick="resetUpload()" class="text-xs text-slate-400 hover:text-white px-3 py-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 transition">
|
|
<i class="fa-solid fa-plus mr-1"></i> Subir otro
|
|
</button>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-center">
|
|
<!-- QR Code Section -->
|
|
<div class="bg-slate-950 p-6 rounded-2xl border border-slate-800 flex flex-col items-center justify-center space-y-3">
|
|
<div class="p-2 bg-white rounded-xl shadow-lg">
|
|
<img id="qrImage" src="" alt="Código QR para escanear" class="w-44 h-44 object-contain">
|
|
</div>
|
|
<p class="text-xs text-slate-400 text-center flex items-center gap-1.5">
|
|
<i class="fa-solid fa-mobile-screen text-brand-400"></i>
|
|
<span>Apunta con la cámara de tu móvil para abrir</span>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Link & Actions Section -->
|
|
<div class="space-y-4">
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-semibold text-slate-400">Enlace directo para compartir</label>
|
|
<div class="flex items-center gap-2">
|
|
<input type="text" id="shareUrlInput" readonly class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2.5 text-sm font-mono text-slate-200 select-all focus:outline-none">
|
|
<button onclick="copyShareUrl()" id="copyBtn" class="px-4 py-2.5 rounded-xl bg-brand-600 hover:bg-brand-500 text-slate-950 font-bold text-sm transition flex items-center gap-1.5 shrink-0 shadow-lg shadow-brand-500/20">
|
|
<i class="fa-regular fa-copy"></i>
|
|
<span id="copyBtnText">Copiar</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-2">
|
|
<a id="openViewerBtn" href="#" target="_blank" class="flex-1 py-2.5 px-4 rounded-xl bg-slate-800 hover:bg-slate-700 border border-slate-700 text-white font-semibold text-sm transition text-center flex items-center justify-center gap-2">
|
|
<i class="fa-solid fa-eye text-brand-400"></i>
|
|
<span>Abrir Visor</span>
|
|
</a>
|
|
<a id="directDownloadBtn" href="#" class="py-2.5 px-4 rounded-xl bg-slate-800 hover:bg-slate-700 border border-slate-700 text-slate-300 font-semibold text-sm transition flex items-center justify-center gap-2" title="Descarga directa">
|
|
<i class="fa-solid fa-download"></i>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Expiration notice -->
|
|
<div id="retentionNotice" class="p-3 rounded-xl text-xs flex items-center gap-2">
|
|
<!-- Dynamic notice text inserted via JS -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
|
|
{{define "scripts"}}
|
|
<script>
|
|
const dropZone = document.getElementById('dropZone');
|
|
const fileInput = document.getElementById('fileInput');
|
|
const uploadProgress = document.getElementById('uploadProgress');
|
|
const progressBar = document.getElementById('progressBar');
|
|
const progressText = document.getElementById('progressText');
|
|
const resultCard = document.getElementById('resultCard');
|
|
|
|
function switchTab(tab) {
|
|
if (tab === 'files') {
|
|
document.getElementById('tabFiles').classList.remove('hidden');
|
|
document.getElementById('tabText').classList.add('hidden');
|
|
document.getElementById('tabFilesBtn').className = "flex-1 py-2 px-4 rounded-xl text-sm font-semibold transition flex items-center justify-center gap-2 bg-slate-800 text-white shadow";
|
|
document.getElementById('tabTextBtn').className = "flex-1 py-2 px-4 rounded-xl text-sm font-semibold transition flex items-center justify-center gap-2 text-slate-400 hover:text-white";
|
|
} else {
|
|
document.getElementById('tabFiles').classList.add('hidden');
|
|
document.getElementById('tabText').classList.remove('hidden');
|
|
document.getElementById('tabTextBtn').className = "flex-1 py-2 px-4 rounded-xl text-sm font-semibold transition flex items-center justify-center gap-2 bg-slate-800 text-white shadow";
|
|
document.getElementById('tabFilesBtn').className = "flex-1 py-2 px-4 rounded-xl text-sm font-semibold transition flex items-center justify-center gap-2 text-slate-400 hover:text-white";
|
|
}
|
|
}
|
|
|
|
dropZone.addEventListener('click', () => fileInput.click());
|
|
|
|
dropZone.addEventListener('dragover', (e) => {
|
|
e.preventDefault();
|
|
dropZone.classList.add('border-brand-500', 'bg-slate-900/90');
|
|
});
|
|
|
|
dropZone.addEventListener('dragleave', () => {
|
|
dropZone.classList.remove('border-brand-500', 'bg-slate-900/90');
|
|
});
|
|
|
|
dropZone.addEventListener('drop', (e) => {
|
|
e.preventDefault();
|
|
dropZone.classList.remove('border-brand-500', 'bg-slate-900/90');
|
|
if (e.dataTransfer.files.length > 0) {
|
|
uploadFile(e.dataTransfer.files[0]);
|
|
}
|
|
});
|
|
|
|
fileInput.addEventListener('change', () => {
|
|
if (fileInput.files.length > 0) {
|
|
uploadFile(fileInput.files[0]);
|
|
}
|
|
});
|
|
|
|
// Handle Ctrl+V paste anywhere on window
|
|
window.addEventListener('paste', (e) => {
|
|
// If active element is a textarea or text input, let default paste happen
|
|
if (document.activeElement.tagName === 'TEXTAREA' || document.activeElement.tagName === 'INPUT') {
|
|
return;
|
|
}
|
|
|
|
const items = (e.clipboardData || e.originalEvent.clipboardData).items;
|
|
for (let item of items) {
|
|
if (item.kind === 'file') {
|
|
const file = item.getAsFile();
|
|
if (file) {
|
|
uploadFile(file);
|
|
break;
|
|
}
|
|
} else if (item.kind === 'string' && item.type === 'text/plain') {
|
|
item.getAsString((text) => {
|
|
switchTab('text');
|
|
document.getElementById('textContent').value = text;
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
function uploadFile(file) {
|
|
uploadProgress.classList.remove('hidden');
|
|
progressBar.style.width = '0%';
|
|
progressText.innerText = `Subiendo ${file.name}...`;
|
|
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
|
|
const xhr = new XMLHttpRequest();
|
|
xhr.open('POST', '/api/upload', true);
|
|
|
|
xhr.upload.onprogress = (e) => {
|
|
if (e.lengthComputable) {
|
|
const percent = Math.round((e.loaded / e.total) * 100);
|
|
progressBar.style.width = percent + '%';
|
|
progressText.innerText = `Subiendo ${file.name} (${percent}%)...`;
|
|
}
|
|
};
|
|
|
|
xhr.onload = () => {
|
|
uploadProgress.classList.add('hidden');
|
|
if (xhr.status === 200) {
|
|
const res = JSON.parse(xhr.responseText);
|
|
showResult(res);
|
|
} else {
|
|
alert('Error al subir el archivo: ' + xhr.responseText);
|
|
}
|
|
};
|
|
|
|
xhr.onerror = () => {
|
|
uploadProgress.classList.add('hidden');
|
|
alert('Error de red al subir el archivo.');
|
|
};
|
|
|
|
xhr.send(formData);
|
|
}
|
|
|
|
async function handleShareText(e) {
|
|
e.preventDefault();
|
|
const title = document.getElementById('textTitle').value;
|
|
const text = document.getElementById('textContent').value;
|
|
const btn = document.getElementById('submitTextBtn');
|
|
|
|
btn.disabled = true;
|
|
btn.innerHTML = `<i class="fa-solid fa-circle-notch animate-spin"></i> Compartiendo...`;
|
|
|
|
try {
|
|
const resp = await fetch('/api/share-text', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ title, text })
|
|
});
|
|
const data = await resp.json();
|
|
if (resp.ok) {
|
|
showResult(data);
|
|
} else {
|
|
alert('Error al compartir texto: ' + (data.error || 'Desconocido'));
|
|
}
|
|
} catch (err) {
|
|
alert('Error de red: ' + err.message);
|
|
} finally {
|
|
btn.disabled = false;
|
|
btn.innerHTML = `<i class="fa-solid fa-paper-plane"></i> <span>Compartir Texto</span>`;
|
|
}
|
|
}
|
|
|
|
function showResult(data) {
|
|
document.getElementById('tabFiles').classList.add('hidden');
|
|
document.getElementById('tabText').classList.add('hidden');
|
|
resultCard.classList.remove('hidden');
|
|
|
|
document.getElementById('resultTitle').innerText = data.title || 'Contenido compartido';
|
|
document.getElementById('shareUrlInput').value = data.viewer_url;
|
|
document.getElementById('qrImage').src = `/qr/${data.id}`;
|
|
document.getElementById('openViewerBtn').href = data.viewer_url;
|
|
document.getElementById('directDownloadBtn').href = data.download_url;
|
|
|
|
const notice = document.getElementById('retentionNotice');
|
|
if (data.is_guest) {
|
|
notice.className = "p-3 rounded-xl text-xs flex items-center gap-2 bg-amber-500/10 border border-amber-500/20 text-amber-300";
|
|
notice.innerHTML = `<i class="fa-regular fa-clock text-amber-400"></i> <span><strong>Sesión Invitado:</strong> Este contenido se eliminará automáticamente en 24 horas (${data.expires_in || '24h'}).</span>`;
|
|
} else {
|
|
notice.className = "p-3 rounded-xl text-xs flex items-center gap-2 bg-emerald-500/10 border border-emerald-500/20 text-emerald-300";
|
|
notice.innerHTML = `<i class="fa-solid fa-shield text-emerald-400"></i> <span><strong>Cuenta registrada:</strong> Almacenamiento permanente. Puedes gestionarlo desde Mis Archivos.</span>`;
|
|
}
|
|
|
|
resultCard.scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
|
|
function resetUpload() {
|
|
resultCard.classList.add('hidden');
|
|
fileInput.value = '';
|
|
document.getElementById('textContent').value = '';
|
|
document.getElementById('textTitle').value = '';
|
|
switchTab('files');
|
|
}
|
|
|
|
function copyShareUrl() {
|
|
const input = document.getElementById('shareUrlInput');
|
|
input.select();
|
|
navigator.clipboard.writeText(input.value).then(() => {
|
|
const btnText = document.getElementById('copyBtnText');
|
|
btnText.innerText = '¡Copiado!';
|
|
setTimeout(() => {
|
|
btnText.innerText = 'Copiar';
|
|
}, 2500);
|
|
});
|
|
}
|
|
</script>
|
|
{{end}}
|