263 lines
13 KiB
HTML
263 lines
13 KiB
HTML
<!--
|
|
~ This file is part of ImageFrame.
|
|
~
|
|
~ Copyright (C) 2025. LoohpJames <jamesloohp@gmail.com>
|
|
~ Copyright (C) 2025. Contributors
|
|
~
|
|
~ This program is free software: you can redistribute it and/or modify
|
|
~ it under the terms of the GNU General Public License as published by
|
|
~ the Free Software Foundation, either version 3 of the License, or
|
|
~ (at your option) any later version.
|
|
~
|
|
~ This program is distributed in the hope that it will be useful,
|
|
~ but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
~ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
~ GNU General Public License for more details.
|
|
~
|
|
~ You should have received a copy of the GNU General Public License
|
|
~ along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
-->
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ImageFrame Upload</title>
|
|
<link href="https://fonts.cdnfonts.com/css/minecraftia" rel="stylesheet">
|
|
<link rel="icon" type="image/x-icon" href="imageframe.png">
|
|
<style>
|
|
* {
|
|
font-family: 'Minecraftia', sans-serif;
|
|
}
|
|
body {
|
|
display: block;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 90vh;
|
|
min-height: 90vh;
|
|
text-align: center;
|
|
background-image: url("background.webp");
|
|
}
|
|
.title {
|
|
color: white;
|
|
margin-bottom: 0;
|
|
margin-top: 30px;
|
|
}
|
|
.expire {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
color: #AAAAAA;
|
|
}
|
|
.name {
|
|
color: #FFFF55;
|
|
}
|
|
.container {
|
|
margin: 30px auto 30px auto;
|
|
height: 80%;
|
|
text-align: center;
|
|
background: #D2BF82;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
aspect-ratio: 1;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.drop-zone {
|
|
width: 100%;
|
|
height: calc(100% - 45px);
|
|
background: #A25430;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
margin-bottom: 12px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
color: white;
|
|
box-shadow: inset 0 0 3px black;
|
|
}
|
|
.drop-zone img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
display: none;
|
|
position: absolute;
|
|
object-fit: cover;
|
|
}
|
|
button {
|
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMQAAAAPCAAAAACe4j/AAAAEuElEQVRIx1WWS5Ibuw5EtddrdRRJJE4iSKrb4c2/AUuy30iK+jEBHCTwAICMCgAKiGhKVQUwKzJHQo4mQGBy7AIvk1E2AQKhFt6bUGD1gILy0DkD4dmzACkGyzCScgFgQmLZr4LpQpC56QB2wgSYE8i1fd6xd1yPHIAKwAs14Undx2LIHK0X6vdFbzTa6CNBLQE8Y5rapn7oAl3KSDKC6cLfL6sLnIVG7ffnyUgvQ6rwLjUZdIVqWz0iEXXCZ+TJsV8feUdoPHDk+a/IeAbq0ldLT59jtHweHwmKS6gFSUYCqKcVsPami1pEnqolkCMBiAS87FXTICp03geYUr8TV8un3KuyC0BfTUzihOCdwjUya1bkT9VWe+AaFOoJzHdtERXRe/eulyEDhC6pjYwr+JQuIDU9/0wQBnJEAkd+9i6IRTJrV7YWnGfwLA6ESphkBoCu88M0YH1CTTOiRUpDdwpGkkP5yL9phhwn+QVxDarAXq513y9bLKgxBGR/CjDyMl4ECd6lO82CaMLbEHGHp1R8ePDERj392ssaCOigNjJ+dXXl6OLUFfVx6dA1BFJLlHpkUHPam095C3QJLIjn6OLIOB3xe0JS85Zd+govg1/z/UhtG3RdVW98yxNp5I0Vtf/U+6y/dJ/yHtSK4q7G9ARscC3/Df/kXTwiT3d6ovjEISLJIVEvBwWeCXlALZTbpy85xqWuf3sNiBBUmYjI+BqN6aNQqDWpipSYf3W1nOV/WALoykjIiCPreSn97UigsjZdPA5s3AmCDIxaVO0Fa1fV/qkaiijPPz/bEeRyLSBDI8K8j37TO8aH7vmOqUUQ1DboYhvqd+FlFGEo+2T75MbLGnjvPeu7Pl521Ap14dcR3h7p75qv4xieqnNDoyCPLt/yKkf5gOUXl+6S3d9Syq/982fz+fhpsm28C5EhJcxsWWQke6KoPMA7tqm7kKcrn6FLhWcoqCNCxDPyQ8wEKR73nIlEX8GpARSJX7/rzeNtWPD/Dl2IwtOYMwV7osGsHYJanzeU7KqIZVCTcrT0IEbyD4d1e1dkBtW2qLhLXK7a1ogDqsjI1DR4PY7nHEqfF9tn8HUJL+eQ/lGOXdwI1++57CqgmDaReM9CZYLAk4D4ymqti4KZI9Htz9OnrcuOhCQEqJfXaxHPAFG/l/ee1GFJPXmPryYUiUGPutnRGXkagmnjHk5RNpm7xxiclm6CjJEQ4+MD4xPmuT9Ef4b3YT3B51a7d4Np76PF0cavuC+SoaH6PlilipEakoJBJETWT3k7Hf+1REPj2fIx95t5ct6u9S5v3KM2fv2Ve29ax9yC98zT2IZot61MHyYtdPF92nguZ29xfcVxSu9Nj5Gl8G3wcVoW8n1Q/f6BHFEAyy5R2aRIdYH8XfV4453vHKcnqarXPD6mdrD0rlVV5xBPF2xuJM5Oo0SdaaqGMjJva7ii6bYv74IzPMo5pGebpu72ghypwTR+WWDuhQOkFijGyAzF3GXh11lEH0hkPINZivpTqLEtVm2j1hVcn/S0//q0es5dbyxOErxKivQ+bHotvzcT3/XztPf20XqG6fJZMePT2X6ts+nlm9LoSYHMiHuJjGXniB7v2fo/5qT4nuxYg6AAAAAASUVORK5CYII=);
|
|
border-color: #AAA #565656 #565656 #AAA;
|
|
padding: 7px 20px;
|
|
font-size: 15px;
|
|
cursor: pointer;
|
|
text-shadow: 3px 3px #4C4C4C;
|
|
outline: 2px solid #000;
|
|
color: white;
|
|
}
|
|
button:hover:enabled {
|
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMQAAAAPCAMAAACMV5AuAAAAVFBMVEVtd7ZteLZverdwerdwe7hxfLhyfbl0frl1f7p2gLt4grx6hLx7hb18hr5+iL+AisCBi8GCjMGEjsKGkMOHkcSIksSKk8WLlMWLlcaMlcaNlsePmMdwBHmVAAAEjElEQVRIx1WW27YbKw5F3Ul2GYTWFAJX+pyd///PfgDsTg0/mSqQ1k08AEAeDkAA7kXyDAeyu2QCWREgCGSvAAbIE/D9U2m8Ji4Drw0CEhP7EMiqBFxmDMBEkHvd5AziDsjoCKQXddUl1nuZgMZrf0PMdj1kgNY+Ay+CJPg8kj1rR3X/GS9kxaoJVFaB6QkxIX5TBX65mpAZGQH3HaoCFMj6/GxuYgDyTsyup1hfxwxVN+F08ANGANyf8jqAPaBpranJvhxV+VV08JGPVScmcL8W4EIuAFWFHMZrUkUfNC3WtIsEaFogMWJRl839MES61w1cjMUsI1fb7GKaoENMOdFNykzXPz2mlwekkXjV4ioO9b15rZWZd4AaCL9cxdSutl8buIOUkd8JTgAy01IKoFoFPhAZr65SbDHgxFIGKi5IpLaKdlafAHxaVWDt2SSZ24LQhEx6aLGyj7RtELDLiA7EiD72ehBiQJo5oPq1nOQMYGAIYoY2AwIrImaA+25P8vZRa0KgqrjnQIaACiom/1G9Sla3GUHVLl/mMl/mxeUPGT0T5seAeeAQtF9WV2F7cX4niJ4DYmBd12oh7jymyRkBuq6M81mQuExHVv313beo9VH3ojfM2zZ8AkTG8X7EeDs6OZw+mrY7E5l/gqQJmZx+YySQAi1/dqQZy0as4FL1d7nrcfd1kjWTX1ZIYESTUCnuPZE7+anrqcxlz3diUX2HowHCf15S3AvxrnhRxeMwtQACGYGKZ7wGjNl7vH73MHdP8s/vSXM0FiRqMnPowfbjRsfe6n7nZ/FGIyfgF6+A/t1XTrcWB3Q42AxkMOfMfuJotRPgqGqFMfB8KO6eN+BEpO8F2eLZ18YO0GUdmEDcXMcNey+XuOfvP5P35guSVxAzWRYUpIoSuZiJrJ/p4zPouw0pwX+6XwpIcyNWEcJ/uf5Svuyx+ncTfhmotEhIBPe/8f961F/jI5aQfSs3WFOwChnZZxPk+HQjZu/WBuDFVwobZnoLISBOdkmNLFPE9iadiImsgTcdTDKA8dj1qBT518Xcg6+6L0Yl/nqCLeH+b46InkCSETTBzEQBRoPEwS9lKVUkpEx426M3oIMHYQLhK/B6jHvgXw6if4+YM4mlJdWDpLw4MhHgjwBZgIt+ZJdAVENOEkiv6mY4yy5nFPjnQmGfGVy0IqP+cmbsWF7Se/rT+5ZBzHPdKfajHW2ouWldPJaoTDJ3GUYTNMV/IyaiPYqQuX0VPXK+ra3Mc8c5Wlkp4D/e5S5htjXU3HnPPJsBXraRM/rSpOMX99zMoVradRl9AMxJdVPIYgf8Rhu0DvLM739A5rmjJ51QcW9SFXjcvR85oYOhSKTsd65pqdKWIV59ZO/7kKTDJLbvYw9XVRIyTXKJdfm4rOjE18yT8IHM/euZa0Z0fLvBSIh7h925QLoXR80WNfnqOHHP7Qk5aj+dTLX4E3hhIkafoGd15/IDT/lPTVSVr233dy6OkJtiLm0yBu+byeE2Yc59pVrDdKyPjxgD4h6r6vcFwpYNHMxVBaE2ApmfyTTjf5jQnWRymG7iAAAAAElFTkSuQmCC);
|
|
border-color: #BDC6FF #59639A #59639A #BDC6FF;
|
|
}
|
|
button:disabled {
|
|
cursor: not-allowed;
|
|
filter: brightness(0.5);
|
|
}
|
|
.closed-container {
|
|
text-align: center;
|
|
height: 100%;
|
|
align-content: center;
|
|
}
|
|
.closed-icon {
|
|
width: 120px;
|
|
}
|
|
.success-title {
|
|
color: #55FF55;
|
|
margin: 10px;
|
|
}
|
|
.error-title {
|
|
color: #FF5555;
|
|
margin: 10px;
|
|
}
|
|
@media screen and (max-width: 700px) {
|
|
.container {
|
|
aspect-ratio: unset;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h2 class="title">ImageFrame Upload<label id="titlePlayer"></label></h2>
|
|
<p class="expire" id="expire">This link expires in ...</p>
|
|
<div class="container" id="container">
|
|
<div class="drop-zone" id="dropZone">
|
|
Drop image here or click to select
|
|
<img id="imagePreview" alt="Image Preview" src="">
|
|
</div>
|
|
<input type="file" id="fileInput" accept="image/png, image/jpeg, image/gif" hidden>
|
|
<button id="uploadBtn" disabled>Upload</button>
|
|
</div>
|
|
|
|
<script>
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const user = urlParams.get('user');
|
|
const uploadId = urlParams.get('id');
|
|
const player = urlParams.get('player');
|
|
const expire = urlParams.get('expire');
|
|
|
|
function showExpired() {
|
|
const forPlayer = player ? ` for <span class="name">${player}</span>` : "";
|
|
document.body.innerHTML = `
|
|
<div class="closed-container">
|
|
<img src="imageframe.png" alt="ImageFrame" class="closed-icon">
|
|
<h2 class="error-title">This link${forPlayer} had expired!<br>Please create a new one in-game.</h2>
|
|
</div>
|
|
`;
|
|
}
|
|
function showError() {
|
|
const forPlayer = player ? ` for <span class="name">${player}</span>` : "";
|
|
document.body.innerHTML = `
|
|
<div class="closed-container">
|
|
<img src="imageframe.png" alt="ImageFrame" class="closed-icon">
|
|
<h2 class="error-title">There is an error while uploading${forPlayer}.<br>Please create a new one in-game.</h2>
|
|
</div>
|
|
`;
|
|
}
|
|
function showSuccess() {
|
|
const forPlayer = player ? ` for <span class="name">${player}</span>` : "";
|
|
document.body.innerHTML = `
|
|
<div class="closed-container">
|
|
<img src="imageframe.png" alt="ImageFrame" class="closed-icon">
|
|
<h1 class="success-title">Upload successful${forPlayer}!<br>Please continue in-game!</h1>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
if (player) {
|
|
document.getElementById('titlePlayer').innerHTML = ` for <span class="name">${player}</span>`;
|
|
}
|
|
if (expire) {
|
|
const element = document.getElementById('expire');
|
|
const taskId = setInterval(() => {
|
|
const now = Date.now();
|
|
const diff = Math.floor((expire - now) / 1000);
|
|
if (diff < 0) {
|
|
clearInterval(taskId);
|
|
showExpired();
|
|
return;
|
|
}
|
|
const minutes = Math.floor(diff / 60);
|
|
const seconds = (diff % 60).toString().padStart(2, '0');
|
|
element.innerHTML = minutes > 0 ? `This link expires in ${minutes}m ${seconds}s` : `This link expires in ${seconds}s`;
|
|
}, 500);
|
|
}
|
|
|
|
const dropZone = document.getElementById("dropZone");
|
|
const fileInput = document.getElementById("fileInput");
|
|
const uploadBtn = document.getElementById("uploadBtn");
|
|
const imagePreview = document.getElementById("imagePreview");
|
|
let selectedFile = null;
|
|
|
|
dropZone.addEventListener("click", () => fileInput.click());
|
|
fileInput.addEventListener("change", handleFileSelect);
|
|
dropZone.addEventListener("dragover", (e) => {
|
|
e.preventDefault();
|
|
dropZone.classList.add("highlight");
|
|
});
|
|
dropZone.addEventListener("dragleave", () => dropZone.classList.remove("highlight"));
|
|
dropZone.addEventListener("drop", (e) => {
|
|
e.preventDefault();
|
|
dropZone.classList.remove("highlight");
|
|
if (e.dataTransfer.files.length) {
|
|
handleFileSelect({ target: { files: e.dataTransfer.files } });
|
|
}
|
|
});
|
|
|
|
function handleFileSelect(event) {
|
|
const file = event.target.files[0];
|
|
if (file && ["image/png", "image/jpeg", "image/gif", "image/webp"].includes(file.type)) {
|
|
selectedFile = file;
|
|
uploadBtn.disabled = false;
|
|
|
|
const reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
imagePreview.src = e.target.result;
|
|
imagePreview.style.display = "block";
|
|
};
|
|
reader.readAsDataURL(file);
|
|
} else {
|
|
alert("Only PNG, JPG, and GIF files are allowed.");
|
|
fileInput.value = "";
|
|
selectedFile = null;
|
|
uploadBtn.disabled = true;
|
|
imagePreview.style.display = "none";
|
|
}
|
|
}
|
|
|
|
uploadBtn.addEventListener("click", () => {
|
|
if (!selectedFile) return;
|
|
const formData = new FormData();
|
|
formData.append("image", selectedFile);
|
|
|
|
fetch(`/upload?user=${user}&id=${uploadId}`, {
|
|
method: "POST",
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.hasOwnProperty("error")) {
|
|
showError();
|
|
console.log("Upload failed: " + data.error);
|
|
} else {
|
|
showSuccess();
|
|
console.log("Upload successful: " + data.message);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
showError();
|
|
console.log("Upload failed: " + error);
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|