spitkov/sxbin
2
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update templates/index.html

Browse Source
This commit is contained in:
cgcristi 2024-09-08 13:13:50 +02:00
parent 9944b80270
commit a04d2d1b3c
1 changed files with 189 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

368
templates/index.html
View File

@ -1,179 +1,189 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>placeholder</title> <title>placeholder</title>
<style> <style>
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
background-color: #121212; background-color: #121212;
color: #e0e0e0; color: #e0e0e0;
margin: 0; margin: 0;
padding: 0; padding: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100vh; height: 100vh;
} }
.container { .container {
background: #1e1e1e; background: #1e1e1e;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
padding: 20px; padding: 20px;
width: 400px; width: 400px;
text-align: center; text-align: center;
} }
h1 { h1 {
margin-bottom: 20px; margin-bottom: 20px;
color: #f5f5f5; color: #f5f5f5;
} }
.upload-options { .upload-options {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-bottom: 20px; margin-bottom: 20px;
} }
.upload-options button { .upload-options button {
background-color: #007bff; background-color: #007bff;
color: #fff; color: #fff;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
padding: 10px 20px; padding: 10px 20px;
margin: 0 10px; margin: 0 10px;
cursor: pointer; cursor: pointer;
} }
.upload-options button.active { .upload-options button.active {
background-color: #0056b3; background-color: #0056b3;
} }
.upload-form { .upload-form {
display: none; display: none;
} }
.upload-form.active { .upload-form.active {
display: block; display: block;
} }
textarea, input[type="file"], input[type="text"] { textarea, input[type="file"], input[type="text"] {
width: calc(100% - 20px); width: calc(100% - 20px);
margin-top: 10px; margin-top: 10px;
padding: 10px; padding: 10px;
border-radius: 4px; border-radius: 4px;
border: 1px solid #333; border: 1px solid #333;
box-sizing: border-box; box-sizing: border-box;
background-color: #2e2e2e; background-color: #2e2e2e;
color: #e0e0e0; color: #e0e0e0;
} }
button[type="button"] { button[type="button"] {
background-color: #28a745; background-color: #28a745;
color: #fff; color: #fff;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
padding: 10px 20px; padding: 10px 20px;
margin-top: 10px; margin-top: 10px;
cursor: pointer; cursor: pointer;
} }
.result { .result {
margin-top: 20px; margin-top: 20px;
color: #f5f5f5; color: #f5f5f5;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<h1>placeholder</h1> <h1>placeholder</h1>
<div class="upload-options"> <div class="upload-options">
<button id="textUploadBtn" onclick="showForm('text')">Upload Text</button> <button id="textUploadBtn" onclick="showForm('text')">Upload Text</button>
<button id="fileUploadBtn" onclick="showForm('file')">Upload File</button> <button id="fileUploadBtn" onclick="showForm('file')">Upload File</button>
<button id="urlShortenerBtn" onclick="showForm('url')">Shorten URL</button> <button id="urlShortenerBtn" onclick="showForm('url')">Shorten URL</button>
</div> </div>
<div id="uploadFormContainer"> <div id="uploadFormContainer">
<div id="textForm" class="upload-form"> <div id="textForm" class="upload-form">
<h2>Upload Text</h2> <h2>Upload Text</h2>
<form> <form>
<textarea name="content" rows="4" placeholder="Enter text here..."></textarea> <textarea name="content" rows="4" placeholder="Enter text here..."></textarea>
<button type="button" onclick="uploadText()">Upload Text</button> <button type="button" onclick="uploadText()">Upload Text</button>
</form> </form>
<div id="textResult" class="result"></div> <div id="textResult" class="result"></div>
</div> </div>
<div id="fileForm" class="upload-form"> <div id="fileForm" class="upload-form">
<h2>Upload File</h2> <h2>Upload File</h2>
<form enctype="multipart/form-data"> <form enctype="multipart/form-data">
<input type="file" name="file" /> <input type="file" name="file" />
<button type="button" onclick="uploadFile()">Upload File</button> <button type="button" onclick="uploadFile()">Upload File</button>
</form> </form>
<div id="fileResult" class="result"></div> <div id="fileResult" class="result"></div>
</div> </div>
<div id="urlForm" class="upload-form"> <div id="urlForm" class="upload-form">
<h2>Shorten URL</h2> <h2>Shorten URL</h2>
<form> <form>
<input type="text" name="url" placeholder="Enter URL here..." /> <input type="text" name="url" placeholder="Enter URL here..." />
<button type="button" onclick="shortenUrl()">Shorten URL</button> <button type="button" onclick="shortenUrl()">Shorten URL</button>
</form> </form>
<div id="urlResult" class="result"></div> <div id="urlResult" class="result"></div>
</div> </div>
</div> </div>
</div> </div>
<script> <script>
function showForm(type) { function showForm(type) {
document.getElementById('textForm').classList.remove('active'); document.getElementById('textForm').classList.remove('active');
document.getElementById('fileForm').classList.remove('active'); document.getElementById('fileForm').classList.remove('active');
document.getElementById('urlForm').classList.remove('active'); document.getElementById('urlForm').classList.remove('active');
document.getElementById('textUploadBtn').classList.remove('active'); document.getElementById('textUploadBtn').classList.remove('active');
document.getElementById('fileUploadBtn').classList.remove('active'); document.getElementById('fileUploadBtn').classList.remove('active');
document.getElementById('urlShortenerBtn').classList.remove('active'); document.getElementById('urlShortenerBtn').classList.remove('active');
if (type === 'text') { if (type === 'text') {
document.getElementById('textForm').classList.add('active'); document.getElementById('textForm').classList.add('active');
document.getElementById('textUploadBtn').classList.add('active'); document.getElementById('textUploadBtn').classList.add('active');
} else if (type === 'file') { } else if (type === 'file') {
document.getElementById('fileForm').classList.add('active'); document.getElementById('fileForm').classList.add('active');
document.getElementById('fileUploadBtn').classList.add('active'); document.getElementById('fileUploadBtn').classList.add('active');
} else if (type === 'url') { } else if (type === 'url') {
document.getElementById('urlForm').classList.add('active'); document.getElementById('urlForm').classList.add('active');
document.getElementById('urlShortenerBtn').classList.add('active'); document.getElementById('urlShortenerBtn').classList.add('active');
} }
} }
function uploadText() { function uploadText() {
const form = document.querySelector('#textForm form'); const form = document.querySelector('#textForm form');
const formData = new FormData(form); const formData = new FormData(form);
fetch('/upload/pastebin', { fetch('/upload/pastebin', {
method: 'POST', method: 'POST',
body: formData body: formData
}) })
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
document.getElementById('textResult').innerHTML = `Text uploaded! <a href="/${data.vanity}">View Link</a>`; document.getElementById('textResult').innerHTML = `Text uploaded! <a href="/${data.vanity}">View Link</a>`;
}); });
} }
function uploadFile() { function uploadFile() {
const form = document.querySelector('#fileForm form'); const form = document.querySelector('#fileForm form');
const formData = new FormData(form); const formData = new FormData(form);
fetch('/upload/file', { fetch('/upload/file', {
method: 'POST', method: 'POST',
body: formData body: formData
}) })
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
document.getElementById('fileResult').innerHTML = `File uploaded! <a href="/${data.vanity}">Download Link</a>`; document.getElementById('fileResult').innerHTML = `File uploaded! <a href="/${data.vanity}">Download Link</a>`;
}); });
} }
function shortenUrl() { function shortenUrl() {
const form = document.querySelector('#urlForm form'); const form = document.querySelector('#urlForm form');
const formData = new FormData(form); const formData = new FormData(form);
fetch('/shorten', { fetch('/shorten', {
method: 'POST', method: 'POST',
body: formData body: formData
}) })
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
document.getElementById('urlResult').innerHTML = `URL shortened! <a href="/${data.vanity}">View Link</a>`; document.getElementById('urlResult').innerHTML = `URL shortened! <a href="/${data.vanity}">View Link</a>`;
}); });
} }
</script> </script>
</body> </body>
</html>
<footer class="footer">
<div class="container">
<p class="footer-text">Source code available on:
<a href="https://github.com/realcgcristi/order" target="_blank">GitHub</a> |
<a href="https://git.spitkov.hu/cgcristi/order" target="_blank">Spitkov</a>
</p>
</div>
</footer>
</html>