300 lines
9.1 KiB
HTML
300 lines
9.1 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>
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
|
<link rel="manifest" href="/static/manifest.json">
|
|
<script>
|
|
if ('serviceWorker' in navigator) {
|
|
navigator.serviceWorker.register('/static/sw.js');
|
|
}
|
|
</script>
|
|
<style>
|
|
* {
|
|
border-radius: 0 !important;
|
|
transition: none !important;
|
|
}
|
|
|
|
body {
|
|
font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
|
|
background: #fff;
|
|
color: #000;
|
|
}
|
|
|
|
.box {
|
|
border: 3px solid #000;
|
|
background: #fff;
|
|
width: 100%;
|
|
}
|
|
|
|
.input-text {
|
|
border: 2px solid #000;
|
|
padding: 6px 10px;
|
|
background: #fff;
|
|
width: 100%;
|
|
font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
select {
|
|
border: 2px solid #000;
|
|
padding: 5px 8px;
|
|
background: #fff;
|
|
font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
button {
|
|
border: 2px solid #000;
|
|
background: #fff;
|
|
padding: 6px 14px;
|
|
font-weight: 900;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
text-transform: uppercase;
|
|
font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
|
|
box-shadow: 3px 3px 0px #000;
|
|
}
|
|
|
|
button:hover {
|
|
background: #000;
|
|
color: #fff;
|
|
box-shadow: none;
|
|
transform: translate(2px, 2px);
|
|
}
|
|
|
|
button:active {
|
|
background: #ffff00;
|
|
color: #000;
|
|
}
|
|
|
|
button:disabled {
|
|
background: #f0f0f0;
|
|
color: #999;
|
|
border-color: #ccc;
|
|
cursor: not-allowed;
|
|
box-shadow: none;
|
|
}
|
|
|
|
button:disabled:hover {
|
|
transform: none;
|
|
background: #f0f0f0;
|
|
color: #999;
|
|
}
|
|
|
|
.btn-cancel {
|
|
background: #fff;
|
|
color: #cc0000;
|
|
border-color: #cc0000;
|
|
box-shadow: 3px 3px 0px #cc0000;
|
|
margin-top: 8px;
|
|
width: 100%;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.btn-cancel:hover {
|
|
background: #cc0000;
|
|
color: #fff;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.drop-zone {
|
|
border: 3px dashed #000;
|
|
padding: 60px 40px;
|
|
text-align: center;
|
|
background: #f9f9f9;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.drop-zone.active {
|
|
background: #ffff00;
|
|
border-style: solid;
|
|
}
|
|
|
|
.drop-zone:hover {
|
|
background: #f0f0f0;
|
|
}
|
|
|
|
.burn-label {
|
|
color: #cc0000;
|
|
font-weight: 900;
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.section-label {
|
|
font-size: 11px;
|
|
font-weight: 900;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.status-tag {
|
|
font-weight: 900;
|
|
font-size: 11px;
|
|
padding: 3px 8px;
|
|
border: 2px solid #000;
|
|
display: inline-block;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.status-success {
|
|
background: #00ff00;
|
|
color: #000;
|
|
}
|
|
|
|
.nav-link {
|
|
font-weight: 900;
|
|
text-decoration: underline;
|
|
text-transform: uppercase;
|
|
font-size: 11px;
|
|
font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
|
|
}
|
|
|
|
.nav-link:hover {
|
|
background: #000;
|
|
color: #fff;
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 2px solid #000;
|
|
appearance: none;
|
|
background: #fff;
|
|
cursor: pointer;
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
input[type="checkbox"]:checked {
|
|
background: #ff00ff;
|
|
}
|
|
|
|
input[type="checkbox"]:checked::after {
|
|
content: '✕';
|
|
position: absolute;
|
|
top: -2px;
|
|
left: 1px;
|
|
font-size: 12px;
|
|
font-weight: 900;
|
|
color: #fff;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen flex flex-col items-center justify-center p-4">
|
|
|
|
<div class="w-full max-w-[520px] flex flex-col items-center">
|
|
|
|
<!-- Header -->
|
|
<header class="w-full mb-0 border-b-8 border-black pb-3 flex justify-between items-end">
|
|
<div>
|
|
<img src="/static/logo.png" alt="Send.it logo" style="height:36px;" class="mb-1">
|
|
<h1 class="text-3xl font-black uppercase tracking-tighter leading-none">Send_It</h1>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Box -->
|
|
<div class="box">
|
|
|
|
<!-- Upload UI -->
|
|
<div id="upload-ui" class="p-5 space-y-4">
|
|
|
|
<!-- Drop Zone -->
|
|
<div id="drop-zone" class="drop-zone">
|
|
<input type="file" id="fileInput" class="hidden" multiple>
|
|
|
|
<div id="dz-content">
|
|
<div class="text-2xl mb-2">↓</div>
|
|
<span id="dz-text" class="section-label text-gray-500">Click to select or drop file(s)</span>
|
|
</div>
|
|
|
|
<!-- Progress Bar -->
|
|
<div id="progress-container" class="hidden mt-4 border-2 border-black h-5 bg-white">
|
|
<div id="progress-bar" class="h-full bg-black" style="width:0%"></div>
|
|
</div>
|
|
|
|
<div class="flex justify-between items-center mt-1">
|
|
<div id="progress-text" class="text-[10px] font-black hidden">0%</div>
|
|
<div id="stats-text" class="text-[10px] font-black hidden uppercase">
|
|
<span id="speed-text">0 KB/S</span>
|
|
<span class="mx-1 opacity-30">|</span>
|
|
<span id="eta-text">--:--</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Config Row -->
|
|
<div class="border-t-2 border-b-2 border-black py-3 space-y-3">
|
|
<div class="flex items-center justify-between">
|
|
<span class="section-label">Expire_In:</span>
|
|
<select id="duration">
|
|
<option value="1">1_Hour</option>
|
|
<option value="24">24_Hours</option>
|
|
<option value="168">7_Days</option>
|
|
<option value="730" selected>1_Month</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3">
|
|
<input type="checkbox" id="once">
|
|
<label for="once" class="burn-label">Burn_After_Download</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div>
|
|
<button id="uploadBtn" class="w-full py-3 text-sm" disabled>UPLOAD_FILE</button>
|
|
<button id="cancelBtn" class="btn-cancel hidden">✕ CANCEL_UPLOAD</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Success UI -->
|
|
<div id="success-ui" class="hidden p-5 space-y-4">
|
|
<div class="border-2 border-black p-3" style="background:#00ff00;">
|
|
<span class="font-black text-sm uppercase">✓ Upload_Complete</span>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="section-label mb-1">Download_Link:</div>
|
|
<div class="flex">
|
|
<input id="res-url" readonly class="input-text">
|
|
<button onclick="copy('res-url')" class="border-l-0 whitespace-nowrap">COPY</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="section-label mb-1 text-red-600">Deletion_Link <span class="text-gray-400">(private)</span>:</div>
|
|
<div class="flex">
|
|
<input id="res-del" readonly class="input-text" style="color:#cc0000;">
|
|
<button onclick="copy('res-del')" class="border-l-0 whitespace-nowrap">COPY</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-t-2 border-black pt-3">
|
|
<button onclick="location.reload()" class="text-xs">← New_Upload</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="w-full mt-3 flex justify-between items-center">
|
|
<span class="text-[10px] font-black text-gray-400">{{.MODT}}</span>
|
|
<div class="flex gap-4">
|
|
<a href="/static/TOS.txt" class="nav-link">TOS</a>
|
|
<a href="/admin" class="nav-link">SUDO</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<script src="/static/js/upload.js"></script>
|
|
</body>
|
|
</html> |