285 lines
8.6 KiB
HTML
285 lines
8.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Send.it</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
/* The "No-Design" Design */
|
|
* {
|
|
border-radius: 0 !important;
|
|
transition: none !important;
|
|
}
|
|
|
|
body {
|
|
font-family: sans-serif;
|
|
background: #fff;
|
|
color: #000;
|
|
}
|
|
|
|
.box {
|
|
border: 2px solid #000;
|
|
padding: 20px;
|
|
background: #fff;
|
|
width: 100%;
|
|
}
|
|
|
|
.input-text {
|
|
border: 1px solid #000;
|
|
padding: 4px 8px;
|
|
background: #fff;
|
|
width: 100%;
|
|
}
|
|
|
|
button {
|
|
border: 2px solid #000;
|
|
background: #eee;
|
|
padding: 4px 12px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:hover {
|
|
background: #ccc;
|
|
}
|
|
|
|
button:active {
|
|
background: #000;
|
|
color: #fff;
|
|
}
|
|
|
|
/* Disabled State */
|
|
button:disabled {
|
|
background: #f0f0f0;
|
|
color: #999;
|
|
border-color: #ccc;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* New Cancel Style */
|
|
.btn-cancel {
|
|
background: #fff;
|
|
color: #cc0000;
|
|
border-color: #cc0000;
|
|
margin-top: 8px;
|
|
width: 100%;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.btn-cancel:hover {
|
|
background: #fee2e2;
|
|
}
|
|
|
|
.drop-zone {
|
|
border: 2px dashed #000;
|
|
padding: 80px;
|
|
text-align: center;
|
|
background: #f9f9f9;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.drop-zone.active {
|
|
background: #eee;
|
|
border-style: solid;
|
|
}
|
|
|
|
.burn-option {
|
|
color: #cc0000;
|
|
font-weight: bold;
|
|
font-size: 12px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen flex items-center justify-center p-4">
|
|
|
|
<div class="w-full max-w-[493px] flex flex-col items-end">
|
|
|
|
<div class="box">
|
|
<header class="mb-6 border-b-2 border-black pb-2 text-center">
|
|
<h1 class="text-xl font-bold uppercase">Send it</h1>
|
|
</header>
|
|
|
|
<div id="upload-ui">
|
|
<div id="drop-zone" class="drop-zone mb-4">
|
|
<input type="file" id="fileInput" class="hidden">
|
|
|
|
<div id="dz-content">
|
|
<span id="dz-text" class="text-sm">Click to select or drop file</span>
|
|
</div>
|
|
|
|
<div id="progress-container" class="hidden mt-3 border border-black h-4">
|
|
<div id="progress-bar" class="h-full bg-black" style="width:0%"></div>
|
|
</div>
|
|
|
|
<div id="progress-text" class="text-xs mt-1 hidden">0%</div>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<div class="flex items-center justify-between border-b border-black pb-2">
|
|
<label class="text-xs font-bold uppercase">Expire In:</label>
|
|
<select id="duration" class="border border-black text-xs p-1">
|
|
<option value="1">1 Hour</option>
|
|
<option value="24" selected>24 Hours</option>
|
|
<option value="168">7 Days</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<input type="checkbox" id="once" class="w-4 h-4 border-black">
|
|
<label for="once" class="burn-option uppercase">Burn after</label>
|
|
</div>
|
|
|
|
<button id="uploadBtn" class="w-full" disabled>UPLOAD</button>
|
|
<button id="cancelBtn" class="btn-cancel hidden">CANCEL UPLOAD</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="success-ui" class="hidden space-y-4">
|
|
<div class="bg-black text-white p-2 text-xs font-bold">
|
|
UPLOAD COMPLETE
|
|
</div>
|
|
|
|
<div>
|
|
<label class="text-[10px] font-bold block">DOWNLOAD LINK</label>
|
|
<div class="flex">
|
|
<input id="res-url" readonly class="input-text text-sm">
|
|
<button onclick="copy('res-url')" class="border-l-0">COPY</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="text-[10px] font-bold block">DELETION LINK (PRIVATE)</label>
|
|
<div class="flex">
|
|
<input id="res-del" readonly class="input-text text-sm text-red-600">
|
|
<button onclick="copy('res-del')" class="border-l-0">COPY</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pt-4 flex justify-between">
|
|
<button onclick="location.reload()" class="text-xs">NEW UPLOAD</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="mt-1 text-[10px] uppercase font-bold text-gray-400">A service by Brammie15</p>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
const zone = document.getElementById('drop-zone');
|
|
const input = document.getElementById('fileInput');
|
|
const uploadBtn = document.getElementById('uploadBtn');
|
|
const cancelBtn = document.getElementById('cancelBtn');
|
|
|
|
let currentXhr = null;
|
|
|
|
zone.onclick = () => input.click();
|
|
|
|
zone.ondragover = (e) => {
|
|
e.preventDefault();
|
|
zone.classList.add('active');
|
|
};
|
|
zone.ondragleave = () => zone.classList.remove('active');
|
|
zone.ondrop = (e) => {
|
|
e.preventDefault();
|
|
zone.classList.remove('active');
|
|
if (e.dataTransfer.files.length) {
|
|
input.files = e.dataTransfer.files;
|
|
showFile(e.dataTransfer.files[0]);
|
|
}
|
|
};
|
|
|
|
input.onchange = () => {
|
|
if (input.files.length) {
|
|
showFile(input.files[0]);
|
|
uploadBtn.disabled = false;
|
|
} else {
|
|
uploadBtn.disabled = true;
|
|
}
|
|
};
|
|
|
|
function showFile(file) {
|
|
document.getElementById('dz-text').innerText =
|
|
file.name + " (" + Math.round(file.size / 1024) + " KB)";
|
|
}
|
|
|
|
uploadBtn.onclick = () => {
|
|
if (input.files.length) handleUpload(input.files[0]);
|
|
};
|
|
|
|
cancelBtn.onclick = (e) => {
|
|
e.stopPropagation();
|
|
if (currentXhr) {
|
|
currentXhr.abort();
|
|
alert("Upload cancelled.");
|
|
location.reload();
|
|
}
|
|
};
|
|
|
|
function handleUpload(file) {
|
|
uploadBtn.disabled = true;
|
|
uploadBtn.innerText = "UPLOADING...";
|
|
cancelBtn.classList.remove('hidden');
|
|
|
|
const progressContainer = document.getElementById("progress-container");
|
|
const progressBar = document.getElementById("progress-bar");
|
|
const progressText = document.getElementById("progress-text");
|
|
|
|
progressContainer.classList.remove("hidden");
|
|
progressText.classList.remove("hidden");
|
|
|
|
const fd = new FormData();
|
|
fd.append("file", file);
|
|
fd.append("once", document.getElementById("once").checked ? "true" : "false");
|
|
|
|
const xhr = new XMLHttpRequest();
|
|
currentXhr = xhr;
|
|
|
|
xhr.upload.onprogress = (e) => {
|
|
if (e.lengthComputable) {
|
|
const percent = Math.round((e.loaded / e.total) * 100);
|
|
progressBar.style.width = percent + "%";
|
|
progressText.innerText = percent + "%";
|
|
}
|
|
};
|
|
|
|
xhr.onload = () => {
|
|
try {
|
|
const data = JSON.parse(xhr.responseText);
|
|
if (data.error) throw new Error(data.error);
|
|
|
|
document.getElementById('upload-ui').classList.add('hidden');
|
|
document.getElementById('success-ui').classList.remove('hidden');
|
|
|
|
const dlUrl = window.location.origin + data.download_url;
|
|
const delUrl = `${window.location.origin}${data.delete_url}`;
|
|
|
|
document.getElementById('res-url').value = dlUrl;
|
|
document.getElementById('res-del').value = delUrl;
|
|
} catch (err) {
|
|
alert(err.message);
|
|
location.reload();
|
|
}
|
|
};
|
|
|
|
xhr.onerror = () => {
|
|
if (xhr.statusText !== "abort") {
|
|
alert("Upload failed");
|
|
location.reload();
|
|
}
|
|
};
|
|
|
|
xhr.open("POST", "/api/upload");
|
|
xhr.send(fd);
|
|
}
|
|
|
|
function copy(id) {
|
|
const el = document.getElementById(id);
|
|
el.select();
|
|
document.execCommand('copy');
|
|
}
|
|
</script>
|
|
<a href="/login" class="fixed bottom-1 right-1 text-[10px] underline">SUDO</a>
|
|
</body>
|
|
</html> |