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

big html design update

Browse Source
This commit is contained in:
realcgcristi 2024-09-10 18:07:10 +03:00
parent 7c641df41e
commit ac6e773bfc
2 changed files with 699 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
data.db

879
templates/index.html
View File

@ -3,238 +3,739 @@
<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>aCloud - File Sharing Service</title> <title>aCloud - Seamless File & Text Sharing</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style> <style>
:root {
--primary-color: #4a90e2;
--secondary-color: #50c878;
--background-color: #121212;
--text-color: #ffffff;
--accent-color: #ff6b6b;
--container-bg: #1e1e1e;
--input-bg: #2a2a2a;
--input-focus: #3a3a3a;
}
body.default-dark {
--primary-color: #4a90e2;
--secondary-color: #50c878;
--background-color: #121212;
--text-color: #ffffff;
--accent-color: #ff6b6b;
--container-bg: #1e1e1e;
--input-bg: #2a2a2a;
--input-focus: #3a3a3a;
}
body.default-light {
--primary-color: #4a90e2;
--secondary-color: #50c878;
--background-color: #f0f0f0;
--text-color: #333333;
--accent-color: #ff6b6b;
--container-bg: #ffffff;
--input-bg: #e0e0e0;
--input-focus: #d0d0d0;
}
body.pink-dark {
--primary-color: #ff69b4;
--secondary-color: #ffc0cb;
--background-color: #4a0e1c;
--text-color: #ffffff;
--accent-color: #db7093;
--container-bg: #69142c;
--input-bg: #8b1a3a;
--input-focus: #ad2148;
}
body.pink-light {
--primary-color: #ff69b4;
--secondary-color: #ffc0cb;
--background-color: #ffe4e1;
--text-color: #4a0e1c;
--accent-color: #db7093;
--container-bg: #fff0f5;
--input-bg: #ffd1dc;
--input-focus: #ffb6c1;
}
body.red-dark {
--primary-color: #ff0000;
--secondary-color: #ff6347;
--background-color: #8b0000;
--text-color: #ffffff;
--accent-color: #dc143c;
--container-bg: #b22222;
--input-bg: #cd5c5c;
--input-focus: #ff4500;
}
body.red-light {
--primary-color: #ff0000;
--secondary-color: #ff6347;
--background-color: #fff5f5;
--text-color: #8b0000;
--accent-color: #dc143c;
--container-bg: #ffebeb;
--input-bg: #ffd5d5;
--input-focus: #ffbfbf;
}
body.black-dark {
--primary-color: #ffffff;
--secondary-color: #808080;
--background-color: #000000;
--text-color: #ffffff;
--accent-color: #c0c0c0;
--container-bg: #1a1a1a;
--input-bg: #2c2c2c;
--input-focus: #3d3d3d;
}
body.black-light {
--primary-color: #000000;
--secondary-color: #404040;
--background-color: #f0f0f0;
--text-color: #000000;
--accent-color: #808080;
--container-bg: #ffffff;
--input-bg: #e0e0e0;
--input-focus: #d0d0d0;
}
body.gray-dark {
--primary-color: #a9a9a9;
--secondary-color: #d3d3d3;
--background-color: #696969;
--text-color: #f5f5f5;
--accent-color: #dcdcdc;
--container-bg: #808080;
--input-bg: #a0a0a0;
--input-focus: #b8b8b8;
}
body.gray-light {
--primary-color: #696969;
--secondary-color: #a9a9a9;
--background-color: #f5f5f5;
--text-color: #333333;
--accent-color: #808080;
--container-bg: #ffffff;
--input-bg: #e0e0e0;
--input-focus: #d0d0d0;
}
body.blue-dark {
--primary-color: #1e90ff;
--secondary-color: #87cefa;
--background-color: #00008b;
--text-color: #f0f8ff;
--accent-color: #4169e1;
--container-bg: #4682b4;
--input-bg: #6495ed;
--input-focus: #00bfff;
}
body.blue-light {
--primary-color: #1e90ff;
--secondary-color: #87cefa;
--background-color: #f0f8ff;
--text-color: #00008b;
--accent-color: #4169e1;
--container-bg: #e6f2ff;
--input-bg: #cce6ff;
--input-focus: #b3d9ff;
}
body.green-dark {
--primary-color: #32cd32;
--secondary-color: #90ee90;
--background-color: #006400;
--text-color: #f0fff0;
--accent-color: #00fa9a;
--container-bg: #228b22;
--input-bg: #3cb371;
--input-focus: #00ff7f;
}
body.green-light {
--primary-color: #32cd32;
--secondary-color: #90ee90;
--background-color: #f0fff0;
--text-color: #006400;
--accent-color: #00fa9a;
--container-bg: #e6ffe6;
--input-bg: #ccffcc;
--input-focus: #b3ffb3;
}
body.purple-dark {
--primary-color: #8a2be2;
--secondary-color: #dda0dd;
--background-color: #4b0082;
--text-color: #e6e6fa;
--accent-color: #9370db;
--container-bg: #663399;
--input-bg: #9932cc;
--input-focus: #ba55d3;
}
body.purple-light {
--primary-color: #8a2be2;
--secondary-color: #dda0dd;
--background-color: #f8f0ff;
--text-color: #4b0082;
--accent-color: #9370db;
--container-bg: #f0e6ff;
--input-bg: #e6ccff;
--input-focus: #d9b3ff;
}
body.orange-dark {
--primary-color: #ffa500;
--secondary-color: #ffd700;
--background-color: #ff8c00;
--text-color: #fffaf0;
--accent-color: #ff4500;
--container-bg: #ff7f50;
--input-bg: #ffa07a;
--input-focus: #ffb347;
}
body.orange-light {
--primary-color: #ffa500;
--secondary-color: #ffd700;
--background-color: #fffaf0;
--text-color: #ff8c00;
--accent-color: #ff4500;
--container-bg: #fff5e6;
--input-bg: #ffebcc;
--input-focus: #ffe0b3;
}
body.teal-dark {
--primary-color: #008080;
--secondary-color: #20b2aa;
--background-color: #005353;
--text-color: #e0ffff;
--accent-color: #40e0d0;
--container-bg: #008b8b;
--input-bg: #48d1cc;
--input-focus: #00ced1;
}
body.teal-light {
--primary-color: #008080;
--secondary-color: #20b2aa;
--background-color: #e0ffff;
--text-color: #005353;
--accent-color: #40e0d0;
--container-bg: #f0ffff;
--input-bg: #e0ffff;
--input-focus: #d0ffff;
}
body.yellow-dark {
--primary-color: #ffd700;
--secondary-color: #ffff00;
--background-color: #8b8000;
--text-color: #fffacd;
--accent-color: #daa520;
--container-bg: #b8860b;
--input-bg: #f0e68c;
--input-focus: #eee8aa;
}
body.yellow-light {
--primary-color: #ffd700;
--secondary-color: #ffff00;
--background-color: #fffacd;
--text-color: #8b8000;
--accent-color: #daa520;
--container-bg: #fff8dc;
--input-bg: #fffacd;
--input-focus: #fff5e6;
}
body.brown-dark {
--primary-color: #8b4513;
--secondary-color: #d2691e;
--background-color: #3e2723;
--text-color: #deb887;
--accent-color: #cd853f;
--container-bg: #5d4037;
--input-bg: #795548;
--input-focus: #8d6e63;
}
body.brown-light {
--primary-color: #8b4513;
--secondary-color: #d2691e;
--background-color: #f5e6d3;
--text-color: #3e2723;
--accent-color: #cd853f;
--container-bg: #fff5e6;
--input-bg: #ffe4b5;
--input-focus: #ffdab9;
}
body.solarized-dark {
--primary-color: #b58900;
--secondary-color: #859900;
--background-color: #002b36;
--text-color: #839496;
--accent-color: #cb4b16;
--container-bg: #073642;
--input-bg: #094352;
--input-focus: #0b5365;
}
body { body {
font-family: Arial, sans-serif; font-family: 'Poppins', sans-serif;
line-height: 1.6;
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: var(--background-color);
color: var(--text-color);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 100vh; min-height: 100vh;
background-color: #1a1a1a; line-height: 1.6;
color: #f0f0f0; transition: all 0.3s ease;
} }
.container { .container {
flex: 1; flex: 1;
max-width: 1200px;
width: 95%;
margin: 1rem auto;
padding: 1rem;
background-color: var(--container-bg);
border-radius: 20px;
box-shadow: 0 0 30px rgba(74, 144, 226, 0.1);
}
.header {
display: flex; display: flex;
flex-direction: column; justify-content: space-between;
align-items: center; align-items: center;
justify-content: center; margin-bottom: 1rem;
padding: 20px;
} }
nav {
margin-bottom: 20px; .logo {
font-size: 2.5rem;
font-weight: 700;
color: var(--primary-color);
text-shadow: 0 0 10px var(--primary-color);
} }
nav a {
color: #4CAF50; .auth-buttons {
text-decoration: none; display: flex;
margin: 0 10px; gap: 0.5rem;
align-items: center;
} }
.upload-options {
margin-bottom: 20px; .btn {
} padding: 0.5rem 1rem;
.upload-options button {
background-color: #4CAF50;
border: none; border: none;
color: white; border-radius: 25px;
padding: 10px 20px; font-weight: 600;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer; cursor: pointer;
border-radius: 4px; transition: all 0.3s ease;
font-size: 0.9rem;
text-transform: uppercase;
} }
.btn-primary {
background-color: var(--primary-color);
color: var(--background-color);
}
.btn-secondary {
background-color: var(--secondary-color);
color: var(--background-color);
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}
.hero {
text-align: center;
margin-bottom: 2rem;
}
.hero h1 {
font-size: 3rem;
margin-bottom: 0.5rem;
color: var(--primary-color);
text-shadow: 0 0 20px var(--primary-color);
}
.hero p {
font-size: 1.2rem;
color: var(--text-color);
max-width: 600px;
margin: 0 auto;
}
.upload-section {
background-color: var(--input-bg);
padding: 1.5rem;
border-radius: 15px;
margin-bottom: 1.5rem;
}
.upload-options {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.upload-form { .upload-form {
display: none; display: none;
background-color: #2a2a2a;
padding: 20px;
border-radius: 8px;
max-width: 400px;
width: 100%;
} }
.upload-form.active { .upload-form.active {
display: block; display: block;
animation: fadeIn 0.3s ease-in-out;
} }
.upload-form input[type="text"],
.upload-form input[type="file"], @keyframes fadeIn {
.upload-form textarea { from { opacity: 0; }
width: 100%; to { opacity: 1; }
padding: 10px;
margin: 10px 0;
border-radius: 4px;
border: 1px solid #4CAF50;
background-color: #333;
color: #f0f0f0;
} }
.upload-form button {
background-color: #4CAF50; .form-group {
color: white; margin-bottom: 1rem;
padding: 10px 20px; }
border: none;
border-radius: 4px; .form-group label {
display: block;
margin-bottom: 0.4rem;
font-weight: 600;
font-size: 0.9rem;
color: var(--accent-color);
}
.form-group input[type="text"],
.form-group textarea {
width: calc(100% - 20px);
padding: 0.7rem;
border: 2px solid var(--input-focus);
border-radius: 10px;
font-size: 0.9rem;
background-color: var(--input-bg);
color: var(--text-color);
transition: all 0.3s ease;
}
.form-group input[type="text"]:focus,
.form-group textarea:focus {
border-color: var(--primary-color);
outline: none;
box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
}
.file-input-container {
background-color: var(--container-bg);
padding: 1rem;
border-radius: 10px;
margin-bottom: 1rem;
}
.file-input-wrapper {
position: relative;
overflow: hidden;
display: inline-block;
cursor: pointer; cursor: pointer;
} }
.result {
margin-top: 10px; .file-input-wrapper input[type="file"] {
color: #4CAF50; position: absolute;
left: 0;
top: 0;
opacity: 0;
cursor: pointer;
} }
.footer {
text-align: center; .file-input-wrapper .btn {
padding: 10px;
background-color: #2a2a2a;
color: #f0f0f0;
}
.typewriter-container {
font-family: monospace;
white-space: pre-wrap;
overflow: hidden;
font-size: 1.2em;
margin-bottom: 20px;
}
.cursor {
display: inline-block; display: inline-block;
width: 10px; padding: 0.6rem 1.2rem;
height: 20px; background-color: var(--accent-color);
background-color: #4CAF50; color: var(--background-color);
animation: blink 0.7s infinite; border-radius: 25px;
font-weight: 600;
transition: all 0.3s ease;
} }
@keyframes blink {
0% { opacity: 0; } .file-input-wrapper:hover .btn {
50% { opacity: 1; } background-color: #ff8c8c;
100% { opacity: 0; } }
.file-name {
margin-left: 10px;
font-size: 0.9rem;
color: var(--accent-color);
}
.result {
margin-top: 1rem;
padding: 0.8rem;
background-color: var(--secondary-color);
color: var(--background-color);
border-radius: 10px;
text-align: center;
font-size: 0.9rem;
font-weight: 600;
}
footer {
background-color: var(--container-bg);
color: var(--text-color);
text-align: center;
padding: 1rem;
margin-top: 1rem;
font-size: 0.9rem;
border-radius: 0 0 20px 20px;
}
footer a {
color: var(--accent-color);
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
footer a:hover {
color: var(--primary-color);
text-shadow: 0 0 10px var(--primary-color);
}
.settings-icon {
cursor: pointer;
font-size: 1.5rem;
color: var(--primary-color);
transition: all 0.3s ease;
}
.settings-icon:hover {
color: var(--accent-color);
}
@media (max-width: 768px) {
.container {
width: 95%;
padding: 0.5rem;
}
.hero h1 {
font-size: 2rem;
}
.hero p {
font-size: 1rem;
}
.upload-options {
flex-direction: column;
}
.btn {
width: 100%;
}
}
.settings-dropdown {
display: none;
position: absolute;
right: 20px;
top: 60px;
background-color: var(--container-bg);
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
z-index: 1000;
}
.settings-dropdown.show {
display: flex;
}
.theme-column {
width: 50%;
}
.theme-option {
padding: 10px 20px;
cursor: pointer;
transition: all 0.3s ease;
}
.theme-option:hover {
background-color: var(--input-bg);
}
.theme-category {
font-weight: bold;
padding: 10px 20px;
background-color: var(--input-bg);
color: var(--accent-color);
} }
</style> </style>
</head> </head>
<body> <body class="default">
<div class="container"> <div class="container">
<nav> <header class="header">
<a href="{{ url_for('login') }}">Login</a> <div class="logo">aCloud</div>
<a href="{{ url_for('register') }}">Register</a> <div class="auth-buttons">
</nav> <button class="btn btn-primary">Login</button>
<button class="btn btn-secondary">Register</button>
<i class="fas fa-cog settings-icon" id="settingsIcon"></i>
</div>
</header>
<div class="typewriter-container"> <div class="settings-dropdown" id="settingsDropdown">
<span id="typewriter-text"></span><span id="cursor" class="cursor"></span> <div class="theme-column">
<div class="theme-category">Dark Themes</div>
<div class="theme-option" onclick="changeTheme('default-dark')">Default Dark</div>
<div class="theme-option" onclick="changeTheme('pink-dark')">Pink Dark</div>
<div class="theme-option" onclick="changeTheme('black-dark')">Black Dark</div>
<div class="theme-option" onclick="changeTheme('gray-dark')">Gray Dark</div>
<div class="theme-option" onclick="changeTheme('blue-dark')">Blue Dark</div>
<div class="theme-option" onclick="changeTheme('green-dark')">Green Dark</div>
<div class="theme-option" onclick="changeTheme('purple-dark')">Purple Dark</div>
<div class="theme-option" onclick="changeTheme('yellow-dark')">Yellow Dark</div>
<div class="theme-option" onclick="changeTheme('brown-dark')">Brown Dark</div>
<div class="theme-option" onclick="changeTheme('solarized-dark')">Solarized Dark</div>
</div>
<div class="theme-column">
<div class="theme-category">Light Themes</div>
<div class="theme-option" onclick="changeTheme('default-light')">Default Light</div>
<div class="theme-option" onclick="changeTheme('pink-light')">Pink Light</div>
<div class="theme-option" onclick="changeTheme('red-light')">Red Light</div>
<div class="theme-option" onclick="changeTheme('black-light')">Black Light</div>
<div class="theme-option" onclick="changeTheme('gray-light')">Gray Light</div>
<div class="theme-option" onclick="changeTheme('blue-light')">Blue Light</div>
<div class="theme-option" onclick="changeTheme('green-light')">Green Light</div>
<div class="theme-option" onclick="changeTheme('purple-light')">Purple Light</div>
<div class="theme-option" onclick="changeTheme('orange-light')">Orange Light</div>
<div class="theme-option" onclick="changeTheme('teal-light')">Teal Light</div>
<div class="theme-option" onclick="changeTheme('brown-light')">Brown Light</div>
</div>
</div> </div>
<script>
function toggleSettingsDropdown() {
const dropdown = document.getElementById('settingsDropdown');
dropdown.classList.toggle('show');
}
function changeTheme(theme) {
document.body.className = theme;
localStorage.setItem('theme', theme);
toggleSettingsDropdown();
}
document.addEventListener('DOMContentLoaded', function() {
const settingsIcon = document.getElementById('settingsIcon');
settingsIcon.addEventListener('click', toggleSettingsDropdown);
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
document.body.className = savedTheme;
} else {
document.body.className = 'default-dark';
}
document.addEventListener('click', function(event) {
const dropdown = document.getElementById('settingsDropdown');
const settingsIcon = document.getElementById('settingsIcon');
if (!dropdown.contains(event.target) && event.target !== settingsIcon) {
dropdown.classList.remove('show');
}
});
});
</script>
<section class="hero">
<h1>Effortless File & Text Sharing</h1>
<p>Experience the simplicity of seamless, secure, and swift file sharing with aCloud.</p>
</section>
<section class="upload-section">
<div class="upload-options"> <div class="upload-options">
<button onclick="showForm('text')">Upload Text</button> <button class="btn btn-primary" onclick="showForm('text')">Share Text</button>
<button onclick="showForm('file')">Upload File</button> <button class="btn btn-primary" onclick="showForm('file')">Upload File</button>
<button onclick="showForm('folder')">Upload Folder</button> <button class="btn btn-primary" onclick="showForm('folder')">Upload Folder</button>
<button onclick="showForm('url')">Shorten URL</button> <button class="btn btn-primary" onclick="showForm('url')">Shorten URL</button>
</div> </div>
<div id="uploadFormContainer">
<div id="textForm" class="upload-form"> <div id="textForm" class="upload-form">
<h2>Upload Text</h2> <h2>Share Your Text</h2>
<form> <div class="form-group">
<textarea name="content" rows="4" placeholder="Enter text here..."></textarea> <label for="textContent">Enter your text:</label>
<button type="button" onclick="uploadText()">Upload Text</button> <textarea id="textContent" rows="4" placeholder="Type your message here..."></textarea>
</form> </div>
<button class="btn btn-secondary" onclick="uploadText()">Share Now</button>
<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 Your File</h2>
<form enctype="multipart/form-data"> <div class="file-input-container">
<input type="file" name="file" /> <div class="form-group">
<button type="button" onclick="uploadFile()">Upload File</button> <label for="fileInput">Choose your file:</label>
</form> <div class="file-input-wrapper">
<input type="file" id="fileInput" onchange="updateFileName(this, 'fileInputLabel')">
<span class="btn">Select File</span>
</div>
<span id="fileInputLabel" class="file-name">No file selected</span>
</div>
</div>
<button class="btn btn-secondary" onclick="uploadFile()">Upload Now</button>
<div id="fileResult" class="result"></div> <div id="fileResult" class="result"></div>
</div> </div>
<div id="folderForm" class="upload-form"> <div id="folderForm" class="upload-form">
<h2>Upload Folder</h2> <h2>Upload Your Folder</h2>
<form enctype="multipart/form-data"> <div class="file-input-container">
<input type="file" name="file" webkitdirectory directory /> <div class="form-group">
<button type="button" onclick="uploadFolder()">Upload Folder</button> <label for="folderInput">Choose your folder:</label>
</form> <div class="file-input-wrapper">
<input type="file" id="folderInput" webkitdirectory directory multiple onchange="updateFileName(this, 'folderInputLabel')">
<span class="btn">Select Folder</span>
</div>
<span id="folderInputLabel" class="file-name">No folder selected</span>
</div>
</div>
<button class="btn btn-secondary" onclick="uploadFolder()">Upload Now</button>
<div id="folderResult" class="result"></div> <div id="folderResult" class="result"></div>
</div> </div>
<div id="urlForm" class="upload-form"> <div id="urlForm" class="upload-form">
<h2>Shorten URL</h2> <h2>Shorten Your URL</h2>
<form> <div class="form-group">
<input type="text" name="url" placeholder="Enter URL here..." /> <label for="urlInput">Enter your long URL:</label>
<button type="button" onclick="shortenUrl()">Shorten URL</button> <input type="text" id="urlInput" placeholder="https://example.com/very/long/url">
</form> </div>
<button class="btn btn-secondary" onclick="shortenUrl()">Shorten Now</button>
<div id="urlResult" class="result"></div> <div id="urlResult" class="result"></div>
</div> </div>
</div> </section>
</div> </div>
<footer class="footer"> <footer>
<p>Source code available on: <p>aCloud - Simplifying File Sharing |
<a href="https://github.com/realcgcristi/order" target="_blank">GitHub (not up-to-date)</a> | <a href="https://github.com/realcgcristi/order" target="_blank">GitHub</a> |
<a href="https://git.spitkov.hu/cgcristi/aCloud" target="_blank">Spitkov's Git (main)</a> <a href="https://git.spitkov.hu/cgcristi/aCloud" target="_blank">Spitkov's Git</a>
</p> </p>
</footer> </footer>
<script> <script>
document.addEventListener("DOMContentLoaded", function() {
const message1 = "Welcome to aCloud.";
const message2 = "\n A simple toolbox for file uploading,\n URL shortening and pastebin.";
const typewriterTextElement = document.getElementById('typewriter-text');
const cursorElement = document.getElementById('cursor');
const typingSpeed = 70;
function typeMessage(message, callback) {
let index = 0;
function typeCharacter() {
if (index < message.length) {
if (message[index] === '\n') {
typewriterTextElement.innerHTML += '<br>';
} else {
typewriterTextElement.innerHTML += message[index];
}
index++;
updateCursorPosition();
setTimeout(typeCharacter, typingSpeed);
} else if (callback) {
setTimeout(callback, typingSpeed);
}
}
typeCharacter();
}
function updateCursorPosition() {
const textRect = typewriterTextElement.getBoundingClientRect();
cursorElement.style.left = (textRect.width + textRect.left - cursorElement.offsetWidth) + 'px';
}
typeMessage(message1, function() {
typeMessage(message2);
});
});;
document.getElementById('uploadForm').onsubmit = function(e) {
e.preventDefault();
var formData = new FormData(this);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload/file', true);
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
var percentComplete = (e.loaded / e.total) * 100;
document.getElementById('progressBar').style.display = 'block';
document.getElementById('progressBar').value = percentComplete;
}
};
xhr.onload = function() {
if (xhr.status === 200) {
alert('Upload complete!');
document.getElementById('progressBar').style.display = 'none';
} else {
alert('Upload failed.');
}
};
xhr.send(formData);
};
function showForm(type) { function showForm(type) {
document.querySelectorAll('.upload-form').forEach(form => { document.querySelectorAll('.upload-form').forEach(form => {
form.classList.remove('active'); form.classList.remove('active');
@ -242,8 +743,21 @@
document.getElementById(type + 'Form').classList.add('active'); document.getElementById(type + 'Form').classList.add('active');
} }
function updateFileName(input, labelId) {
const label = document.getElementById(labelId);
if (input.files.length > 0) {
if (input.files.length === 1) {
label.textContent = input.files[0].name;
} else {
label.textContent = `${input.files.length} files selected`;
}
} else {
label.textContent = input.getAttribute('webkitdirectory') !== null ? 'No folder selected' : 'No file selected';
}
}
function uploadText() { function uploadText() {
const content = document.querySelector('#textForm textarea').value; const content = document.getElementById('textContent').value;
fetch('/upload/pastebin', { fetch('/upload/pastebin', {
method: 'POST', method: 'POST',
headers: { headers: {
@ -253,25 +767,25 @@
}) })
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
document.getElementById('textResult').innerHTML = `Text uploaded. Access it <a href="/${data.vanity}">here</a>.`; document.getElementById('textResult').innerHTML = `Text shared successfully! Access it <a href="/${data.vanity}">here</a>.`;
}); });
} }
function uploadFile() { function uploadFile() {
const formData = new FormData(); const formData = new FormData();
formData.append('file', document.querySelector('#fileForm input[type="file"]').files[0]); formData.append('file', document.getElementById('fileInput').files[0]);
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. Download it <a href="/download/${data.vanity}">here</a>.`; document.getElementById('fileResult').innerHTML = `File uploaded successfully! Download it <a href="/download/${data.vanity}">here</a>.`;
}); });
} }
function uploadFolder() { function uploadFolder() {
const files = document.querySelector('#folderForm input[type="file"]').files; const files = document.getElementById('folderInput').files;
if (files.length === 0) { if (files.length === 0) {
alert('Please select a folder.'); alert('Please select a folder.');
return; return;
@ -293,7 +807,7 @@
} }
function shortenUrl() { function shortenUrl() {
const url = document.querySelector('#urlForm input[name="url"]').value; const url = document.getElementById('urlInput').value;
fetch('/shorten', { fetch('/shorten', {
method: 'POST', method: 'POST',
headers: { headers: {
@ -306,7 +820,6 @@
document.getElementById('urlResult').innerHTML = `URL shortened. Access it <a href="/${data.vanity}">here</a>.`; document.getElementById('urlResult').innerHTML = `URL shortened. Access it <a href="/${data.vanity}">here</a>.`;
}); });
} }
</script> </script>
</body> </body>
</html> </html>