<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Storage</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #ffccdd;
color: white;
transition: background-color 0.3s, color 0.3s;
}
body.dark-mode {
background-color: #333;
color: #ddd;
}
.container {
max-width: 800px;
margin: auto;
text-align: center;
background: rgba(0, 0, 0, 0.7);
padding: 20px;
border-radius: 10px;
transition: background 0.3s;
}
.container.dark-mode {
background: rgba(0, 0, 0, 0.9);
}
input[type="text"], input[type="password"], input[type="file"] {
margin: 10px 0;
padding: 10px;
width: 80%;
border: none;
border-radius: 5px;
}
button {
padding: 10px 20px;
cursor: pointer;
background-color: #ff88aa;
border: none;
border-radius: 5px;
color: white;
transition: background-color 0.3s;
}
button.dark-mode {
background-color: #555;
color: #fff;
}
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.gallery-item {
margin: 10px;
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
background-color: white;
width: 150px;
position: relative;
transition: background-color 0.3s, border-color 0.3s;
}
.gallery-item.dark-mode {
background-color: #222;
border-color: #444;
}
.folder {
background-color: #fff;
color: #000;
padding: 10px;
margin: 10px;
border-radius: 5px;
cursor: pointer;
}
.folder.dark-mode {
background-color: #444;
color: #fff;
}
.separator {
margin: 20px 0;
}
.error {
color: red;
margin-top: 10px;
}
.progress-bar {
width: 100%;
background-color: #f3f3f3;
border-radius: 5px;
margin: 10px 0;
height: 20px;
}
.progress {
height: 100%;
border-radius: 5px;
transition: width 0.3s;
}
.progress.low {
background-color: #f44336; /* Red for low progress */
}
.progress.medium {
background-color: #ff9800; /* Orange for medium progress */
}
.progress.high {
background-color: #4caf50; /* Green for high progress */
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<script>
let users = {};
let folders = {};
let uploadedFiles = {};
function validateUsername(username) {
return username.length >= 5;
}
function validatePassword(password) {
return password.length >= 8;
}
function showError(message) {
const errorMessage = document.getElementById('error-message');
if (errorMessage) {
errorMessage.textContent = message;
}
}
function createLoginPage() {
document.body.innerHTML = `
<div class="container">
<h1>Welcome to Document Storage</h1>
<p>Please log in to continue.</p>
<input type="text" id="username" placeholder="Username" aria-label="Username" required>
<input type="password" id="password" placeholder="Password" aria-label="Password" required>
<button id="login-button">Login</button>
<p id="error-message" class="error"></p>
<p>Don't have an account? <button id="register-button">Register</button></p>
</div>
`;
document.getElementById('login-button').addEventListener('click', handleLogin);
document.getElementById('register-button').addEventListener('click', createRegisterPage);
}
function handleLogin() {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
if (!validateUsername(username)) {
showError('Username must be at least 5 characters long.');
return;
}
if (!validatePassword(password)) {
showError('Password must be at least 8 characters long.');
return;
}
if (users[username] && users[username].password === password) {
localStorage.setItem('isLoggedIn', 'true');
localStorage.setItem('username', username);
createDocumentStoragePage();
} else {
showError('Invalid username or password.');
}
}
function createRegisterPage() {
document.body.innerHTML = `
<div class="container">
<h1>Register</h1>
<p>Create a new account.</p>
<input type="text" id="new-username" placeholder="Username" aria-label="Username" required>
<input type="password" id="new-password" placeholder="Password" aria-label="Password" required>
<button id="register-submit">Register</button>
<p id="register-message" class="error"></p>
<p>Already have an account? <button id="login-link">Login</button></p>
</div>
`;
document.getElementById('register-submit').addEventListener('click', handleRegister);
document.getElementById('login-link').addEventListener('click', createLoginPage);
}
function handleRegister() {
const newUsername = document.getElementById('new-username').value;
const newPassword = document.getElementById('new-password').value;
if (!validateUsername(newUsername)) {
showError('Username must be at least 5 characters long.');
return;
}
if (!validatePassword(newPassword)) {
showError('Password must be at least 8 characters long.');
return;
}
if (users[newUsername]) {
showError('Username already exists.');
} else {
users[newUsername] = { password: newPassword };
showError('Registration successful! Please log in.');
setTimeout(createLoginPage, 2000);
}
}
function createDocumentStoragePage() {
const container = document.createElement('div');
container.className = 'container';
container.innerHTML = `
<h1>Document Storage</h1>
<p>Welcome back, ${localStorage.getItem('username')}! You can upload your files below:</p>
<input type="text" id="search-input" placeholder="Search files..." aria-label="Search files">
<select id="filter-select" aria-label="Filter files">
<option value="all">Show All</option>
<option value="images">Images</option>
<option value="pdfs">PDFs</option>
</select>
<button id="create-folder-button">Create Folder</button>
<div id="gallery" class="gallery"></div>
<hr class="separator">
<button id="settings-button">Settings</button>
<button id="dark-mode-button">Toggle Dark Mode</button>
<button id="logout-button">Logout</button>
`;
document.body.innerHTML = ''; // Clear previous content
document.body.appendChild(container);
// Display folders
const gallery = document.getElementById('gallery');
for (const folder in folders) {
const folderDiv = createFolderElement(folder);
gallery.appendChild(folderDiv);
}
// Event listeners
document.getElementById('create-folder-button').addEventListener('click', createFolder);
document.getElementById('logout-button').addEventListener('click', logout);
document.getElementById('dark-mode-button').addEventListener('click', toggleDarkMode);
document.getElementById('filter-select').addEventListener('change', sortAndFilterFiles);
}
function createFolderElement(folderName) {
const folderDiv = document.createElement('div');
folderDiv.className = 'folder';
folderDiv.textContent = folderName;
folderDiv.addEventListener('click', () => viewFolder(folderName));
return folderDiv;
}
function createFolder() {
const folderName = prompt('Enter folder name:');
if (folderName) {
folders[folderName] = [];
const gallery = document.getElementById('gallery');
const folderDiv = createFolderElement(folderName);
gallery.appendChild(folderDiv);
}
}
function viewFolder(folderName) {
const container = document.createElement('div');
container.className = 'container';
container.innerHTML = `
<h1>${folderName}</h1>
<button id="back-button">Back</button>
<input type="file" id="file-input" multiple aria-label="Upload files">
<div id="folder-gallery" class="gallery"></div>
`;
document.body.innerHTML = ''; // Clear previous content
document.body.appendChild(container);
const folderGallery = document.getElementById('folder-gallery');
const backButton = document.getElementById('back-button');
backButton.addEventListener('click', createDocumentStoragePage);
document.getElementById('file-input').addEventListener('change', handleFileUpload(folderGallery));
}
function handleFileUpload(folderGallery) {
return (event) => {
const files = event.target.files;
for (let i = 0; i < files.length; i++) {
const file = files[i];
uploadedFiles[file.name] = file; // Save the file
const item = createFileItem(file);
folderGallery.appendChild(item);
uploadFile(file, item); // Start file upload with progress
}
sortAndFilterFiles();
};
}
function createFileItem(file) {
const item = document.createElement('div');
item.className = 'gallery-item';
item.innerHTML = `<p>${file.name}</p><button class="rename-button">Rename</button>
<div class="progress-bar">
<div class="progress"></div>
</div>`;
const progressBar = item.querySelector('.progress-bar');
progressBar.style.display = 'none'; // Hide progress bar initially
item.addEventListener('click', () => previewFile(file));
item.querySelector('.rename-button').addEventListener('click', (e) => {
e.stopPropagation(); // Prevent triggering preview
const newName = prompt('Enter new file name:', file.name);
if (newName) {
uploadedFiles[newName] = uploadedFiles[file.name];
delete uploadedFiles[file.name]; // Remove old name reference
file.name = newName; // Rename the file directly
item.querySelector('p').textContent = newName; // Update display
}
});
return item;
}
function uploadFile(file, item) {
const progressBar = item.querySelector('.progress-bar');
const progress = item.querySelector('.progress');
// Show the progress bar
progressBar.style.display = 'block';
// Simulate file upload with a timeout
let uploaded = 0;
const interval = setInterval(() => {
uploaded += Math.random() * 20; // Increment progress randomly
if (uploaded >= 100) {
uploaded = 100;
clearInterval(interval);
}
progress.style.width = `${uploaded}%`;
// Change progress color based on percentage
if (uploaded < 40) {
progress.className = 'progress low';
} else if (uploaded < 80) {
progress.className = 'progress medium';
} else {
progress.className = 'progress high';
}
}, 500);
}
function previewFile(file) {
const previewModal = document.getElementById('preview-modal');
const filePreview = document.getElementById('file-preview');
if (file.type.startsWith('image/')) {
const img = document.createElement('img');
img.src = URL.createObjectURL(file);
img.style.maxWidth = '100%';
filePreview.innerHTML = '';
filePreview.appendChild(img);
} else if (file.type === 'application/pdf') {
const pdfFrame = document.createElement('iframe');
pdfFrame.src = URL.createObjectURL(file);
pdfFrame.style.width = '100%';
pdfFrame.style.height = '500px';
filePreview.innerHTML = '';
filePreview.appendChild(pdfFrame);
} else {
filePreview.textContent = 'Preview not available for this file type.';
}
previewModal.classList.remove('hidden');
}
function closeModal() {
document.getElementById('preview-modal').classList.add('hidden');
}
function sortAndFilterFiles() {
const filterValue = document.getElementById('filter-select').value;
const folderGallery = document.getElementById('folder-gallery');
folderGallery.innerHTML = ''; // Clear existing items
let files = Object.values(uploadedFiles); // Get files from uploadedFiles
// Filter logic based on filterValue
if (filterValue === 'images') {
files = files.filter(file => file.type.startsWith('image/'));
} else if (filterValue === 'pdfs') {
files = files.filter(file => file.type === 'application/pdf');
}
files.forEach(file => {
const item = createFileItem(file);
folderGallery.appendChild(item);
});
}
function toggleDarkMode() {
document.body.classList.toggle('dark-mode');
const container = document.querySelector('.container');
if (container) {
container.classList.toggle('dark-mode');
}
const items = document.querySelectorAll('.gallery-item');
items.forEach(item => item.classList.toggle('dark-mode'));
const folders = document.querySelectorAll('.folder');
folders.forEach(folder => folder.classList.toggle('dark-mode'));
}
function logout() {
localStorage.removeItem('isLoggedIn');
localStorage.removeItem('username');
createLoginPage();
}
window.onload = function() {
const isLoggedIn = localStorage.getItem('isLoggedIn');
if (isLoggedIn) {
createDocumentStoragePage();
} else {
createLoginPage();
}
};
</script>
<!-- Modal for File Preview -->
<div id="preview-modal" class="modal hidden">
<div class="modal-content">
<span class="close" onclick="closeModal()">×</span>
<div id="file-preview"></div>
</div>
</div>
</body>
</html>
Write, Run & Share HTML code online using OneCompiler's HTML online Code editor for free. It's one of the robust, feature-rich online Code editor for HTML language, running on the latest version HTML5. Getting started with the OneCompiler's HTML compiler is simple and pretty fast. The editor shows sample boilerplate code when you choose language as HTML. You can also specify the stylesheet information in styles.css tab and scripts information in scripts.js tab and start coding.
HTML(Hyper Text Markup language) is the standard markup language for Web pages, was created by Berners-Lee in the year 1991. Almost every web page over internet might be using HTML.
<!DOCTYPE html><html> and ends with </html><h1> to <h6> where <h1> is the highest important heading and <h6> is the least important sub-heading.<p>..</p> tag.<a> tag.
<a href="https://onecompiler.com/html">HTML online compiler</a>
<img> tag, where src attribute consists of image name.<button>..</button> tag<ul> for unordered/bullet list and <ol> for ordered/number list, and the list items are defined in <li>.<a href="https://onecompiler.com/html">HTML online compiler</a>
CSS(cascading style sheets) describes how HTML elements will look on the web page like color, font-style, font-size, background color etc.
Below is a sample style sheet which displays heading in green and in Candara font with padding space of 25px.
body{
padding: 25px;
}
.title {
color: #228B22;
font-family: Candara;
}
<table> tag.<tr> tag<th> tag<td> tag<caption> tag<script> is the tag used to write scripts in HTML<script src="script.js"></script>