init
This commit is contained in:
79
templates/admin.html
Normal file
79
templates/admin.html
Normal file
@@ -0,0 +1,79 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>GhostShare | Admin</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
* { border-radius: 0 !important; }
|
||||
body { font-family: sans-serif; background: #fff; color: #000; padding: 20px; }
|
||||
.box { border: 2px solid #000; background: #fff; }
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
th { background: #000; color: #fff; text-align: left; padding: 8px; font-size: 12px; text-transform: uppercase; }
|
||||
td { border-bottom: 1px solid #000; padding: 8px; font-size: 13px; }
|
||||
tr:hover { background: #f9f9f9; }
|
||||
.status-tag { font-weight: bold; font-size: 10px; padding: 2px 4px; border: 1px solid #000; }
|
||||
.status-deleted { background: #ffcccc; text-decoration: line-through; }
|
||||
.status-active { background: #ccffcc; }
|
||||
button { border: 1px solid #000; background: #eee; padding: 2px 8px; cursor: pointer; font-size: 11px; font-weight: bold; }
|
||||
button:hover { background: #000; color: #fff; }
|
||||
.nav-link { font-weight: bold; text-decoration: underline; margin-bottom: 20px; display: inline-block; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<header class="mb-8 border-b-4 border-black pb-2 flex justify-between items-end">
|
||||
<h1 class="text-3xl font-black uppercase tracking-tighter">System Console</h1>
|
||||
<a href="/" class="nav-link text-xs">← BACK TO UPLOADER</a>
|
||||
</header>
|
||||
|
||||
<div class="box overflow-x-auto">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Filename</th>
|
||||
<th>Created</th>
|
||||
<th>Expires</th>
|
||||
<th>Hits</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{range .Files}}
|
||||
<tr>
|
||||
<td class="font-mono">{{.Filename}}</td>
|
||||
<td>{{.CreatedAt.Format "Jan 02, 15:04"}}</td>
|
||||
<td>{{.ExpiresAt.Format "Jan 02, 15:04"}}</td>
|
||||
<td>{{.DownloadCount}} {{if .DeleteAfterDownload}}(1-SHOT){{end}}</td>
|
||||
<td>
|
||||
{{if .Deleted}}
|
||||
<span class="status-tag status-deleted">REMOVED</span>
|
||||
{{else}}
|
||||
<span class="status-tag status-active">LIVE</span>
|
||||
{{end}}
|
||||
</td>
|
||||
<td>
|
||||
{{if not .Deleted}}
|
||||
<form action="/admin/delete/{{.ID}}" method="POST" onsubmit="return confirm('Kill this file?')">
|
||||
<button type="submit">TERMINATE</button>
|
||||
</form>
|
||||
{{else}}
|
||||
-
|
||||
{{end}}
|
||||
</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<footer class="mt-4 text-[10px] text-gray-500 uppercase font-bold">
|
||||
Total Records: {{len .Files}} | Database: SQLite
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
67
templates/download.html
Normal file
67
templates/download.html
Normal file
@@ -0,0 +1,67 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Uploaded | GhostShare</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
* { 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; }
|
||||
.input-text { border: 1px solid #000; padding: 4px 8px; background: #f9f9f9; width: 100%; font-size: 12px; }
|
||||
label { font-size: 10px; font-weight: bold; display: block; margin-bottom: 2px; color: #666; }
|
||||
.section { margin-bottom: 16px; }
|
||||
button { border: 1px solid #000; background: #eee; padding: 2px 8px; font-size: 10px; margin-top: 4px; }
|
||||
button:hover { background: #ddd; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="min-h-screen flex items-center justify-center p-4">
|
||||
|
||||
<div class="w-full max-w-lg box">
|
||||
<h2 class="text-lg font-bold uppercase mb-4 border-b-2 border-black pb-2">Upload Successful</h2>
|
||||
|
||||
<div class="section">
|
||||
<label>DOWNLOAD PAGE (SHARE THIS)</label>
|
||||
<input id="pageLink" readonly class="input-text">
|
||||
<button onclick="copy('pageLink')">COPY</button>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<label>DIRECT LINK</label>
|
||||
<input id="directLink" readonly class="input-text">
|
||||
<button onclick="copy('directLink')">COPY</button>
|
||||
</div>
|
||||
|
||||
<div class="section border-t border-black pt-4">
|
||||
<label style="color: #cc0000;">DELETION LINK (KEEP PRIVATE)</label>
|
||||
<input id="deleteLink" readonly class="input-text" style="color: #cc0000; border-color: #cc0000;">
|
||||
<button onclick="copy('deleteLink')">COPY DELETION URL</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<a href="/" class="text-xs underline font-bold">← UPLOAD ANOTHER</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const params = new URLSearchParams(location.search);
|
||||
const id = params.get("id");
|
||||
const delId = params.get("del"); // Assuming you pass delId in query string
|
||||
|
||||
const page = `${location.origin}/d/${id}`;
|
||||
const direct = `${location.origin}/f/${id}`;
|
||||
const del = `${location.origin}/api/file/${delId}`;
|
||||
|
||||
document.getElementById("pageLink").value = page;
|
||||
document.getElementById("directLink").value = direct;
|
||||
document.getElementById("deleteLink").value = delId ? del : "Contact Admin";
|
||||
|
||||
function copy(id) {
|
||||
const el = document.getElementById(id);
|
||||
el.select();
|
||||
document.execCommand('copy');
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
228
templates/index.html
Normal file
228
templates/index.html
Normal file
@@ -0,0 +1,228 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>GhostShare</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; }
|
||||
.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: 40px; 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 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 first download</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>
|
||||
<button id="deleteBtn" class="text-xs text-red-600">DELETE NOW</button>
|
||||
</div>
|
||||
</div>
|
||||
</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]);
|
||||
}
|
||||
};
|
||||
|
||||
// Logic to enable/disable button based on file selection
|
||||
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}/api/file/${data.deletion_id}`;
|
||||
|
||||
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();
|
||||
}
|
||||
};
|
||||
|
||||
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>
|
||||
</body>
|
||||
</html>
|
||||
40
templates/success.html
Normal file
40
templates/success.html
Normal file
@@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Uploaded</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h2>File uploaded</h2>
|
||||
|
||||
<p>
|
||||
Download page:<br>
|
||||
<input id="pageLink" readonly size="60">
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Direct download:<br>
|
||||
<input id="directLink" readonly size="60">
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Delete link:<br>
|
||||
<input id="deleteLink" readonly size="60">
|
||||
</p>
|
||||
|
||||
<script>
|
||||
const params = new URLSearchParams(location.search)
|
||||
const id = params.get("id")
|
||||
|
||||
const page = `${location.origin}/d/${id}`
|
||||
const direct = `${location.origin}/f/${id}`
|
||||
|
||||
document.getElementById("pageLink").value = page
|
||||
document.getElementById("directLink").value = direct
|
||||
|
||||
// deletionID requires backend change to return it
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user