brammie15/send-it
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix alot

Browse Source
This commit is contained in:
Bram
2026-02-26 18:52:42 +01:00
parent 89f4f855c8
commit 11e8160cf9
11 changed files with 505 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

217
templates/index.html
View File

@@ -3,19 +3,51 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GhostShare</title>
<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; }
* {
border-radius: 0 !important;
transition: none !important;
}
.box { border: 2px solid #000; padding: 20px; background: #fff; }
.input-text { border: 1px solid #000; padding: 4px 8px; background: #fff; width: 100%; }
body {
font-family: sans-serif;
background: #fff;
color: #000;
}
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; }
.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 {
@@ -26,83 +58,112 @@
}
/* 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; }
.btn-cancel {
background: #fff;
color: #cc0000;
border-color: #cc0000;
margin-top: 8px;
width: 100%;
font-size: 10px;
}
.drop-zone { border: 2px dashed #000; padding: 40px; text-align: center; background: #f9f9f9; cursor: pointer; }
.drop-zone.active { background: #eee; border-style: solid; }
.btn-cancel:hover {
background: #fee2e2;
}
.burn-option { color: #cc0000; font-weight: bold; font-size: 12px; }
.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-md 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 class="w-full max-w-[493px] flex flex-col items-end">
<div id="upload-ui">
<div id="drop-zone" class="drop-zone mb-4">
<input type="file" id="fileInput" class="hidden">
<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="dz-content">
<span id="dz-text" class="text-sm">Click to select or drop file</span>
<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 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 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 id="progress-text" class="text-xs mt-1 hidden">0%</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 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 id="success-ui" class="hidden space-y-4">
<div class="bg-black text-white p-2 text-xs font-bold">
UPLOAD COMPLETE
</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 first download</label>
<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>
<button id="uploadBtn" class="w-full" disabled>UPLOAD</button>
<button id="cancelBtn" class="btn-cancel hidden">CANCEL UPLOAD</button>
<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>
<div id="success-ui" class="hidden space-y-4">
<div class="bg-black text-white p-2 text-xs font-bold">
UPLOAD COMPLETE
</div>
<p class="mt-1 text-[10px] uppercase font-bold text-gray-400">A service by Brammie15</p>
<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>
<button id="deleteBtn" class="text-xs text-red-600">DELETE NOW</button>
</div>
</div>
</div>
<script>
@@ -115,20 +176,22 @@
zone.onclick = () => input.click();
zone.ondragover = (e) => { e.preventDefault(); zone.classList.add('active'); };
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) {
if (e.dataTransfer.files.length) {
input.files = e.dataTransfer.files;
showFile(e.dataTransfer.files[0]);
}
};
// Logic to enable/disable button based on file selection
input.onchange = () => {
if(input.files.length) {
if (input.files.length) {
showFile(input.files[0]);
uploadBtn.disabled = false;
} else {
@@ -138,16 +201,16 @@
function showFile(file) {
document.getElementById('dz-text').innerText =
file.name + " (" + Math.round(file.size/1024) + " KB)";
file.name + " (" + Math.round(file.size / 1024) + " KB)";
}
uploadBtn.onclick = () => {
if(input.files.length) handleUpload(input.files[0]);
if (input.files.length) handleUpload(input.files[0]);
};
cancelBtn.onclick = (e) => {
e.stopPropagation();
if(currentXhr) {
if (currentXhr) {
currentXhr.abort();
alert("Upload cancelled.");
location.reload();
@@ -190,17 +253,10 @@
document.getElementById('success-ui').classList.remove('hidden');
const dlUrl = window.location.origin + data.download_url;
const delUrl = `${window.location.origin}/api/file/${data.deletion_id}`;
const delUrl = `${window.location.origin}${data.delete_url}`;
document.getElementById('res-url').value = dlUrl;
document.getElementById('res-del').value = delUrl;
document.getElementById('deleteBtn').onclick = async () => {
if(confirm("Permanently delete?")) {
await fetch(`/api/file/${data.deletion_id}`, { method: 'DELETE' });
location.reload();
}
};
} catch (err) {
alert(err.message);
location.reload();
@@ -208,7 +264,7 @@
};
xhr.onerror = () => {
if(xhr.statusText !== "abort") {
if (xhr.statusText !== "abort") {
alert("Upload failed");
location.reload();
}
@@ -224,5 +280,6 @@
document.execCommand('copy');
}
</script>
<a href="/login" class="fixed bottom-1 right-1 text-[10px] underline">SUDO</a>
</body>
</html>