fix styling on some pages
This commit is contained in:
@@ -111,7 +111,7 @@ func (h *Handler) View(c *gin.Context) {
|
|||||||
|
|
||||||
record, err := h.service.DownloadFile(id)
|
record, err := h.service.DownloadFile(id)
|
||||||
if err != nil {
|
if err != nil {
|
||||||
c.HTML(http.StatusOK, "fileNotFound.html", nil)
|
c.HTML(http.StatusOK, "error.html", nil)
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
name := util.SafeFilename(record.Filename)
|
name := util.SafeFilename(record.Filename)
|
||||||
@@ -135,7 +135,7 @@ func (h *Handler) Download(c *gin.Context) {
|
|||||||
|
|
||||||
record, err := h.service.DownloadFile(id)
|
record, err := h.service.DownloadFile(id)
|
||||||
if err != nil {
|
if err != nil {
|
||||||
c.HTML(http.StatusOK, "fileNotFound.html", nil)
|
c.HTML(http.StatusOK, "error.html", nil)
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
name := util.SafeFilename(record.Filename)
|
name := util.SafeFilename(record.Filename)
|
||||||
@@ -151,7 +151,7 @@ func (h *Handler) Delete(c *gin.Context) {
|
|||||||
|
|
||||||
_, err := h.service.DeleteFileByDeletionID(id)
|
_, err := h.service.DeleteFileByDeletionID(id)
|
||||||
if err != nil {
|
if err != nil {
|
||||||
c.HTML(http.StatusOK, "fileNotFound.html", nil)
|
c.HTML(http.StatusOK, "error.html", nil)
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -50,7 +50,7 @@ func (h *Handler) FileView(c *gin.Context) {
|
|||||||
|
|
||||||
fileRecord, err := h.fileService.GetFileByViewID(id)
|
fileRecord, err := h.fileService.GetFileByViewID(id)
|
||||||
if err != nil {
|
if err != nil {
|
||||||
c.HTML(404, "fileNotFound.html", nil)
|
c.HTML(404, "error.html", nil)
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -6,105 +6,136 @@
|
|||||||
<title>Send.it - File Ready</title>
|
<title>Send.it - File Ready</title>
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
/* No-design brutalist style */
|
|
||||||
* {
|
* {
|
||||||
border-radius: 0 !important;
|
border-radius: 0 !important;
|
||||||
transition: none !important;
|
transition: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: sans-serif;
|
font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
color: #000;
|
color: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.box {
|
.box {
|
||||||
border: 2px solid #000;
|
border: 3px solid #000;
|
||||||
padding: 20px;
|
|
||||||
background: #fff;
|
background: #fff;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-text {
|
.input-text {
|
||||||
border: 1px solid #000;
|
border: 2px solid #000;
|
||||||
padding: 4px 8px;
|
padding: 6px 10px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
border: 2px solid #000;
|
border: 2px solid #000;
|
||||||
background: #eee;
|
background: #fff;
|
||||||
padding: 4px 12px;
|
padding: 6px 14px;
|
||||||
font-weight: bold;
|
font-weight: 900;
|
||||||
|
font-size: 12px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
|
||||||
|
box-shadow: 3px 3px 0px #000;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:hover {
|
button:hover {
|
||||||
background: #ccc;
|
background: #000;
|
||||||
|
color: #fff;
|
||||||
|
box-shadow: none;
|
||||||
|
transform: translate(2px, 2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
button:active {
|
button:active {
|
||||||
|
background: #ffff00;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-label {
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 900;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
background: #000;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="min-h-screen flex items-center justify-center p-4">
|
<body class="min-h-screen flex flex-col items-center justify-center p-4">
|
||||||
|
|
||||||
<div class="w-full max-w-[493px] flex flex-col items-center">
|
<div class="w-full max-w-[520px] flex flex-col items-center">
|
||||||
|
|
||||||
<img src="/static/logo.png" alt="Send.it logo" style="width:50%;" class="mb-2 border-black">
|
<!-- 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">
|
<div class="box">
|
||||||
|
<div class="p-5 space-y-4">
|
||||||
|
|
||||||
<header class="mb-6 border-b-2 border-black pb-2 text-center">
|
<!-- Status Banner -->
|
||||||
<h1 class="text-xl font-bold uppercase">FILE READY</h1>
|
<div class="border-2 border-black p-3" style="background:#00ff00;">
|
||||||
</header>
|
<span class="font-black text-sm uppercase">✓ File_Uploaded</span>
|
||||||
|
|
||||||
<div class="space-y-4">
|
|
||||||
|
|
||||||
<div class="bg-black text-white p-2 text-xs font-bold">
|
|
||||||
UPLOAD COMPLETE
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- <!– File info –>-->
|
<!-- Download Link -->
|
||||||
<!-- <div class="text-[10px] uppercase font-bold">-->
|
|
||||||
<!-- example_file.png (2.4 MB)-->
|
|
||||||
<!-- </div>-->
|
|
||||||
|
|
||||||
<!-- Download -->
|
|
||||||
<div>
|
<div>
|
||||||
<label class="text-[10px] font-bold block">DOWNLOAD LINK</label>
|
<div class="section-label mb-1">Download_Link:</div>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<input id="res-url" readonly class="input-text text-sm">
|
<input id="res-url" readonly class="input-text">
|
||||||
<button onclick="copy('res-url')" class="border-l-0">COPY</button>
|
<button onclick="copy('res-url')" class="border-l-0">COPY</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Delete -->
|
<!-- Delete Link -->
|
||||||
<div>
|
<div>
|
||||||
<label class="text-[10px] font-bold block">DELETION LINK (PRIVATE)</label>
|
<div class="section-label mb-1 text-red-600">Deletion_Link <span class="text-gray-400 normal-case">(private)</span>:</div>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<input id="res-del" readonly class="input-text text-sm text-red-600">
|
<input id="res-del" readonly class="input-text" style="color:#cc0000;">
|
||||||
<button onclick="copy('res-del')" class="border-l-0">COPY</button>
|
<button onclick="copy('res-del')" class="border-l-0">COPY</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Actions -->
|
<!-- Actions -->
|
||||||
<div class="pt-4 flex justify-between">
|
<div class="border-t-2 border-black pt-4">
|
||||||
<a href="/" class="text-xs underline">NEW UPLOAD</a>
|
<a href="/" class="nav-link">← New_Upload</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p class="mt-1 text-[10px] uppercase font-bold text-gray-400">
|
<!-- Footer -->
|
||||||
A service by Brammie15
|
<div class="w-full mt-3 flex justify-between items-center">
|
||||||
</p>
|
<span class="text-[10px] font-black uppercase text-gray-400">A_Service_By_Brammie15</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>
|
</div>
|
||||||
|
|
||||||
@@ -112,21 +143,17 @@
|
|||||||
function copy(id) {
|
function copy(id) {
|
||||||
const el = document.getElementById(id);
|
const el = document.getElementById(id);
|
||||||
el.select();
|
el.select();
|
||||||
el.setSelectionRange(0, 99999); // mobile support
|
el.setSelectionRange(0, 99999);
|
||||||
document.execCommand('copy');
|
document.execCommand('copy');
|
||||||
}
|
}
|
||||||
|
|
||||||
const downloadKey = "{{.DownloadID}}";
|
const downloadKey = "{{.DownloadID}}";
|
||||||
const deleteKey = "{{.DeleteID}}";
|
const deleteKey = "{{.DeleteID}}";
|
||||||
|
|
||||||
const base = window.location.origin;
|
const base = window.location.origin;
|
||||||
|
|
||||||
document.getElementById("res-url").value = `${base}/api/files/view/${downloadKey}`;
|
document.getElementById("res-url").value = `${base}/api/files/view/${downloadKey}`;
|
||||||
document.getElementById("res-del").value = `${base}/api/files/delete/${deleteKey}`;
|
document.getElementById("res-del").value = `${base}/api/files/delete/${deleteKey}`;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<a href="/admin" class="fixed bottom-1 right-1 text-[10px] underline">SUDO</a>
|
|
||||||
<a href="/static/TOS.txt" class="fixed bottom-1 left-1 text-[10px] underline">TOS</a>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -6,7 +6,6 @@
|
|||||||
<title>Nothing to see here</title>
|
<title>Nothing to see here</title>
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
* {
|
* {
|
||||||
border-radius: 0 !important;
|
border-radius: 0 !important;
|
||||||
@@ -14,48 +13,56 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: sans-serif;
|
font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
color: #000;
|
color: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.box {
|
.box {
|
||||||
border: 2px solid #000;
|
border: 3px solid #000;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button {
|
a.button {
|
||||||
border: 2px solid #000;
|
border: 2px solid #000;
|
||||||
background: #eee;
|
background: #fff;
|
||||||
padding: 4px 12px;
|
padding: 6px 14px;
|
||||||
font-weight: bold;
|
font-weight: 900;
|
||||||
|
font-size: 12px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
|
||||||
|
box-shadow: 3px 3px 0px #000;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button:hover {
|
a.button:hover {
|
||||||
background: #ccc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button:active {
|
|
||||||
background: #000;
|
background: #000;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
box-shadow: none;
|
||||||
|
transform: translate(2px, 2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
a.button:active {
|
||||||
|
background: #ffff00;
|
||||||
|
color: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
border-bottom: 2px solid #000;
|
border-bottom: 3px solid #000;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
padding-bottom: 4px;
|
padding-bottom: 4px;
|
||||||
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtitle {
|
.subtitle {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: bold;
|
font-weight: 900;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
@@ -63,14 +70,35 @@
|
|||||||
.text {
|
.text {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
font-weight: 700;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body class="min-h-screen flex items-center justify-center p-4">
|
<body class="min-h-screen flex items-center justify-center p-4">
|
||||||
|
|
||||||
<div class="w-full max-w-[493px] flex flex-col items-center">
|
<div class="w-full max-w-[493px] flex flex-col items-center">
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
<div class="box text-center">
|
<div class="box text-center">
|
||||||
|
|
||||||
<div class="title">
|
<div class="title">
|
||||||
@@ -93,6 +121,14 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="w-full mt-3 flex justify-between items-center">
|
||||||
|
<span class="text-[10px] font-black uppercase text-gray-400">A_Service_By_Brammie15</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>
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@@ -7,47 +7,65 @@
|
|||||||
<script src="https://cdn.tailwindcss.com"></script>
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
||||||
<style>
|
<style>
|
||||||
/* The "No-Design" Design */
|
|
||||||
* {
|
* {
|
||||||
border-radius: 0 !important;
|
border-radius: 0 !important;
|
||||||
transition: none !important;
|
transition: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: sans-serif;
|
font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
color: #000;
|
color: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.box {
|
.box {
|
||||||
border: 2px solid #000;
|
border: 3px solid #000;
|
||||||
padding: 20px;
|
|
||||||
background: #fff;
|
background: #fff;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-text {
|
.input-text {
|
||||||
border: 1px solid #000;
|
border: 2px solid #000;
|
||||||
padding: 4px 8px;
|
padding: 6px 10px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
width: 100%;
|
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 {
|
button {
|
||||||
border: 2px solid #000;
|
border: 2px solid #000;
|
||||||
background: #eee;
|
background: #fff;
|
||||||
padding: 4px 12px;
|
padding: 6px 14px;
|
||||||
font-weight: bold;
|
font-weight: 900;
|
||||||
|
font-size: 12px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
|
||||||
|
box-shadow: 3px 3px 0px #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:hover {
|
button:hover {
|
||||||
background: #ccc;
|
background: #000;
|
||||||
|
color: #fff;
|
||||||
|
box-shadow: none;
|
||||||
|
transform: translate(2px, 2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
button:active {
|
button:active {
|
||||||
background: #000;
|
background: #ffff00;
|
||||||
color: #fff;
|
color: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:disabled {
|
button:disabled {
|
||||||
@@ -55,66 +73,150 @@
|
|||||||
color: #999;
|
color: #999;
|
||||||
border-color: #ccc;
|
border-color: #ccc;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:disabled:hover {
|
||||||
|
transform: none;
|
||||||
|
background: #f0f0f0;
|
||||||
|
color: #999;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-cancel {
|
.btn-cancel {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
color: #cc0000;
|
color: #cc0000;
|
||||||
border-color: #cc0000;
|
border-color: #cc0000;
|
||||||
|
box-shadow: 3px 3px 0px #cc0000;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: 10px;
|
font-size: 11px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-cancel:hover {
|
.btn-cancel:hover {
|
||||||
background: #fee2e2;
|
background: #cc0000;
|
||||||
|
color: #fff;
|
||||||
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.drop-zone {
|
.drop-zone {
|
||||||
border: 2px dashed #000;
|
border: 3px dashed #000;
|
||||||
padding: 80px;
|
padding: 60px 40px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: #f9f9f9;
|
background: #f9f9f9;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.drop-zone.active {
|
.drop-zone.active {
|
||||||
background: #eee;
|
background: #ffff00;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
.burn-option {
|
.drop-zone:hover {
|
||||||
|
background: #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.burn-label {
|
||||||
color: #cc0000;
|
color: #cc0000;
|
||||||
font-weight: bold;
|
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-size: 12px;
|
||||||
|
font-weight: 900;
|
||||||
|
color: #fff;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body class="min-h-screen flex items-center justify-center p-4">
|
<body class="min-h-screen flex flex-col items-center justify-center p-4">
|
||||||
|
|
||||||
<!--<div class="w-full max-w-[493px] flex flex-col items-end">-->
|
<div class="w-full max-w-[520px] flex flex-col items-center">
|
||||||
<div class="w-full max-w-[493px] flex flex-col items-center">
|
|
||||||
<img src="/static/logo.png" alt="Send.it logo" style="width:50%;" class="mb-2 border-black">
|
<!-- 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">
|
<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">
|
<!-- Upload UI -->
|
||||||
<div id="drop-zone" class="drop-zone mb-4">
|
<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>
|
<input type="file" id="fileInput" class="hidden" multiple>
|
||||||
|
|
||||||
<div id="dz-content">
|
<div id="dz-content">
|
||||||
<span id="dz-text" class="text-sm">Click to select or drop file</span>
|
<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>
|
</div>
|
||||||
|
|
||||||
<div id="progress-container" class="hidden mt-3 border border-black h-4">
|
<!-- 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 id="progress-bar" class="h-full bg-black" style="width:0%"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex justify-between items-center mt-1">
|
<div class="flex justify-between items-center mt-1">
|
||||||
<div id="progress-text" class="text-[10px] font-bold hidden">0%</div>
|
<div id="progress-text" class="text-[10px] font-black hidden">0%</div>
|
||||||
<div id="stats-text" class="text-[10px] font-bold hidden uppercase">
|
<div id="stats-text" class="text-[10px] font-black hidden uppercase">
|
||||||
<span id="speed-text">0 KB/S</span>
|
<span id="speed-text">0 KB/S</span>
|
||||||
<span class="mx-1 opacity-30">|</span>
|
<span class="mx-1 opacity-30">|</span>
|
||||||
<span id="eta-text">--:--</span>
|
<span id="eta-text">--:--</span>
|
||||||
@@ -122,55 +224,69 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="space-y-4">
|
<!-- Config Row -->
|
||||||
<div class="flex items-center justify-between border-b border-black pb-2">
|
<div class="border-t-2 border-b-2 border-black py-3 space-y-3">
|
||||||
<label class="text-xs font-bold uppercase">Expire In:</label>
|
<div class="flex items-center justify-between">
|
||||||
<select id="duration" class="border border-black text-xs p-1">
|
<span class="section-label">Expire_In:</span>
|
||||||
<option value="1">1 Hour</option>
|
<select id="duration">
|
||||||
<option value="24">24 Hours</option>
|
<option value="1">1_Hour</option>
|
||||||
<option value="168">7 Days</option>
|
<option value="24">24_Hours</option>
|
||||||
<option value="730" selected>1 Month</option>
|
<option value="168">7_Days</option>
|
||||||
|
<option value="730" selected>1_Month</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex items-center gap-2">
|
<div class="flex items-center gap-3">
|
||||||
<input type="checkbox" id="once" class="w-4 h-4 border-black">
|
<input type="checkbox" id="once">
|
||||||
<label for="once" class="burn-option uppercase">Burn after</label>
|
<label for="once" class="burn-label">Burn_After_Download</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button id="uploadBtn" class="w-full" disabled>UPLOAD</button>
|
|
||||||
<button id="cancelBtn" class="btn-cancel hidden">CANCEL UPLOAD</button>
|
|
||||||
</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>
|
</div>
|
||||||
|
|
||||||
<div id="success-ui" class="hidden space-y-4">
|
<!-- Success UI -->
|
||||||
<div class="bg-black text-white p-2 text-xs font-bold">
|
<div id="success-ui" class="hidden p-5 space-y-4">
|
||||||
UPLOAD COMPLETE
|
<div class="border-2 border-black p-3" style="background:#00ff00;">
|
||||||
|
<span class="font-black text-sm uppercase">✓ Upload_Complete</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label class="text-[10px] font-bold block">DOWNLOAD LINK</label>
|
<div class="section-label mb-1">Download_Link:</div>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<input id="res-url" readonly class="input-text text-sm">
|
<input id="res-url" readonly class="input-text">
|
||||||
<button onclick="copy('res-url')" class="border-l-0">COPY</button>
|
<button onclick="copy('res-url')" class="border-l-0 whitespace-nowrap">COPY</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label class="text-[10px] font-bold block">DELETION LINK (PRIVATE)</label>
|
<div class="section-label mb-1 text-red-600">Deletion_Link <span class="text-gray-400">(private)</span>:</div>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<input id="res-del" readonly class="input-text text-sm text-red-600">
|
<input id="res-del" readonly class="input-text" style="color:#cc0000;">
|
||||||
<button onclick="copy('res-del')" class="border-l-0">COPY</button>
|
<button onclick="copy('res-del')" class="border-l-0 whitespace-nowrap">COPY</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="pt-4 flex justify-between">
|
<div class="border-t-2 border-black pt-3">
|
||||||
<button onclick="location.reload()" class="text-xs">NEW UPLOAD</button>
|
<button onclick="location.reload()" class="text-xs">← New_Upload</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p class="mt-1 text-[10px] uppercase font-bold text-gray-400">A service by Brammie15</p>
|
<!-- Footer -->
|
||||||
|
<div class="w-full mt-3 flex justify-between items-center">
|
||||||
|
<span class="text-[10px] font-black uppercase text-gray-400">A_Service_By_Brammie15</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>
|
</div>
|
||||||
|
|
||||||
@@ -189,7 +305,6 @@
|
|||||||
|
|
||||||
let currentXhr = null;
|
let currentXhr = null;
|
||||||
|
|
||||||
// Helper: Human Readable Size
|
|
||||||
function formatBytes(bytes, decimals = 2) {
|
function formatBytes(bytes, decimals = 2) {
|
||||||
if (bytes === 0) return '0 Bytes';
|
if (bytes === 0) return '0 Bytes';
|
||||||
const k = 1024;
|
const k = 1024;
|
||||||
@@ -199,7 +314,6 @@
|
|||||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
|
||||||
}
|
}
|
||||||
|
|
||||||
// Helper: Human Readable Time
|
|
||||||
function formatTime(seconds) {
|
function formatTime(seconds) {
|
||||||
if (!isFinite(seconds) || seconds < 0) return "--:--";
|
if (!isFinite(seconds) || seconds < 0) return "--:--";
|
||||||
const h = Math.floor(seconds / 3600);
|
const h = Math.floor(seconds / 3600);
|
||||||
@@ -223,7 +337,6 @@
|
|||||||
zone.ondrop = (e) => {
|
zone.ondrop = (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
zone.classList.remove('active');
|
zone.classList.remove('active');
|
||||||
|
|
||||||
if (e.dataTransfer.files.length) {
|
if (e.dataTransfer.files.length) {
|
||||||
input.files = e.dataTransfer.files;
|
input.files = e.dataTransfer.files;
|
||||||
input.dispatchEvent(new Event('change'));
|
input.dispatchEvent(new Event('change'));
|
||||||
@@ -242,17 +355,14 @@
|
|||||||
function showFiles(fileList) {
|
function showFiles(fileList) {
|
||||||
const files = Array.from(fileList || []);
|
const files = Array.from(fileList || []);
|
||||||
if (files.length === 0) return;
|
if (files.length === 0) return;
|
||||||
|
|
||||||
const total = files.reduce((acc, f) => acc + f.size, 0);
|
const total = files.reduce((acc, f) => acc + f.size, 0);
|
||||||
|
|
||||||
if (files.length === 1) {
|
if (files.length === 1) {
|
||||||
document.getElementById('dz-text').innerText =
|
document.getElementById('dz-text').innerText =
|
||||||
`${files[0].name} (${formatBytes(files[0].size)})`;
|
`${files[0].name} [${formatBytes(files[0].size)}]`;
|
||||||
return;
|
} else {
|
||||||
|
document.getElementById('dz-text').innerText =
|
||||||
|
`${files.length} FILES [${formatBytes(total)}] — will be zipped`;
|
||||||
}
|
}
|
||||||
|
|
||||||
document.getElementById('dz-text').innerText =
|
|
||||||
`${files.length} FILES (${formatBytes(total)}) — will be zipped`;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
uploadBtn.onclick = () => {
|
uploadBtn.onclick = () => {
|
||||||
@@ -285,7 +395,6 @@
|
|||||||
uploadBtn.disabled = true;
|
uploadBtn.disabled = true;
|
||||||
uploadBtn.innerText = "UPLOADING...";
|
uploadBtn.innerText = "UPLOADING...";
|
||||||
cancelBtn.classList.remove('hidden');
|
cancelBtn.classList.remove('hidden');
|
||||||
|
|
||||||
progressContainer.classList.remove("hidden");
|
progressContainer.classList.remove("hidden");
|
||||||
progressText.classList.remove("hidden");
|
progressText.classList.remove("hidden");
|
||||||
statsText.classList.remove("hidden");
|
statsText.classList.remove("hidden");
|
||||||
@@ -305,7 +414,6 @@
|
|||||||
const bytesPerSecond = e.loaded / elapsedSeconds;
|
const bytesPerSecond = e.loaded / elapsedSeconds;
|
||||||
const remainingBytes = e.total - e.loaded;
|
const remainingBytes = e.total - e.loaded;
|
||||||
const secondsRemaining = remainingBytes / bytesPerSecond;
|
const secondsRemaining = remainingBytes / bytesPerSecond;
|
||||||
|
|
||||||
speedText.innerText = formatBytes(bytesPerSecond) + "/S";
|
speedText.innerText = formatBytes(bytesPerSecond) + "/S";
|
||||||
etaText.innerText = formatTime(secondsRemaining);
|
etaText.innerText = formatTime(secondsRemaining);
|
||||||
}
|
}
|
||||||
@@ -317,9 +425,7 @@
|
|||||||
try {
|
try {
|
||||||
const data = JSON.parse(xhr.responseText);
|
const data = JSON.parse(xhr.responseText);
|
||||||
if (data.error) throw new Error(data.error);
|
if (data.error) throw new Error(data.error);
|
||||||
|
|
||||||
window.location.href = "/f/" + data.view_key;
|
window.location.href = "/f/" + data.view_key;
|
||||||
|
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error("Invalid response:", xhr.responseText);
|
console.error("Invalid response:", xhr.responseText);
|
||||||
alert("Server error");
|
alert("Server error");
|
||||||
@@ -339,30 +445,22 @@
|
|||||||
|
|
||||||
function handleUploadSingle(file) {
|
function handleUploadSingle(file) {
|
||||||
startUploadUI();
|
startUploadUI();
|
||||||
|
|
||||||
const fd = commonFormData();
|
const fd = commonFormData();
|
||||||
fd.append("file", file);
|
fd.append("file", file);
|
||||||
|
|
||||||
const xhr = new XMLHttpRequest();
|
const xhr = new XMLHttpRequest();
|
||||||
currentXhr = xhr;
|
currentXhr = xhr;
|
||||||
|
|
||||||
setupXHRHandlers(xhr);
|
setupXHRHandlers(xhr);
|
||||||
|
|
||||||
xhr.open("POST", "/api/files/upload");
|
xhr.open("POST", "/api/files/upload");
|
||||||
xhr.send(fd);
|
xhr.send(fd);
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleUploadMulti(fileList) {
|
function handleUploadMulti(fileList) {
|
||||||
startUploadUI();
|
startUploadUI();
|
||||||
|
|
||||||
const fd = commonFormData();
|
const fd = commonFormData();
|
||||||
Array.from(fileList).forEach(f => fd.append("files", f));
|
Array.from(fileList).forEach(f => fd.append("files", f));
|
||||||
|
|
||||||
const xhr = new XMLHttpRequest();
|
const xhr = new XMLHttpRequest();
|
||||||
currentXhr = xhr;
|
currentXhr = xhr;
|
||||||
|
|
||||||
setupXHRHandlers(xhr);
|
setupXHRHandlers(xhr);
|
||||||
|
|
||||||
xhr.open("POST", "/api/files/upload-multi");
|
xhr.open("POST", "/api/files/upload-multi");
|
||||||
xhr.send(fd);
|
xhr.send(fd);
|
||||||
}
|
}
|
||||||
@@ -373,8 +471,6 @@
|
|||||||
document.execCommand('copy');
|
document.execCommand('copy');
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<a href="/admin" class="fixed bottom-1 right-1 text-[10px] underline">SUDO</a>
|
|
||||||
<a href="/static/TOS.txt" class="fixed bottom-1 left-1 text-[10px] underline">TOS</a>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user