test

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>notateo beta</title> <link rel="icon" type="image/x-icon" href="notateo.png">  <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Nunito:wght@700&display=swap" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"> <script src="https://cdn.tailwindcss.com"></script> <style> /* Basic styles */ body { font-family: 'Roboto', sans-serif; background-color: #0f0f0f; color: #f1f1f1; margin: 0; overflow-x: hidden; display: flex; } /* Full-page background video with blur */ .background-video { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; filter: blur(120px); opacity: 0.5; z-index: 0; } /* Sidebar styling for desktop */ .sidebar { width: 260px; height: 100vh; padding: 20px; background: rgba(28, 28, 30, 0.5); backdrop-filter: blur(15px); color: #ffffff; display: flex; flex-direction: column; gap: 1rem; position: relative; z-index: 2; transition: transform 0.3s ease; } /* Mobile sidebar styling */ @media (max-width: 768px) { .sidebar { position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding: 40px 20px; transform: translateX(-100%); transition: transform 0.3s ease; background: #1c1c1e; /* Solid background to cover entire screen */ z-index: 1000; /* Higher z-index to overlay all content */ } .sidebar.show { transform: translateX(0); } } /* Mobile toggle button */ .menu-toggle { position: fixed; top: 20px; left: 20px; z-index: 1001; /* Slightly higher than sidebar to be clickable */ font-size: 1.5rem; color: #f1f1f1; cursor: pointer; display: none; /* background: rgba(0, 0, 0, 0.5); */ border-radius: 50%; padding: 10px; } /* Display toggle button only on mobile */ @media (max-width: 768px) { .menu-toggle { display: block; } } /* Custom font for the "notateo.pl" header */ .sidebar h2 { font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 1.5rem; margin-bottom: 20px; text-align: center; width: 100%; } .sidebar-section { margin-top: 10px; } .sidebar-section-title { font-size: 0.8rem; font-weight: 600; color: #888; text-transform: uppercase; margin-bottom: 10px; } /* Sidebar menu item */ .menu-item { display: flex; align-items: center; padding: 8px; border-radius: 8px; gap: 10px; font-weight: 500; font-size: 0.95rem; color: #f1f1f1; transition: background 0.2s; cursor: pointer; } .menu-item:hover { background: rgba(255, 255, 255, 0.1); } .menu-icon { font-size: 1rem; width: 20px; text-align: center; } /* Beta label */ .beta-label { background: rgba(50, 55, 57, 0.6); color: #375da3; font-size: 0.8rem; padding: 2px 8px; border-radius: 14px; margin-left: auto; font-weight: 600; } /* Main content styling */ .content { flex: 1; padding: 50px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; z-index: 2; } .header { font-size: 1.5rem; font-weight: 700; text-align: center; margin-bottom: 10px; } .description { font-size: 1rem; color: #b1b1b1; text-align: center; margin-bottom: 20px; max-width: 80%; } /* Blur Overlay Box */ .blur-box { background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(15px); border-radius: 12px; padding: 20px 30px; max-width: 60%; text-align: center; color: #ffffff; font-size: 1rem; margin-bottom: 20px; z-index: 2; } /* Custom Upload Button with ripple effect */ .upload-btn { position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; padding: 10px 15px; border-radius: 8px; border: none; background: rgba(16, 132, 252, 0.1); color: #375da3; cursor: pointer; transition: background 0.3s ease; font-weight: 600; margin-top: 10px; } .upload-btn:hover { background: rgba(16, 76, 132, 0.2); } /* Ripple Effect */ .ripple { position: absolute; border-radius: 50%; background-color: rgba(16, 76, 132, 0.3); transform: scale(0); animation: ripple-animation 0.6s linear; pointer-events: none; } /* Keyframes for ripple expansion */ @keyframes ripple-animation { to { transform: scale(4); opacity: 0; } } /* File List Styling */ .file-list { list-style: none; padding: 0; margin-top: 20px; } .file-item { display: flex; align-items: center; justify-content: space-between; padding: 10px; background-color: rgba(255, 255, 255, 0.1); border-radius: 8px; margin-top: 10px; } .file-item span { color: #ffffff; font-size: 0.9rem; } .remove-file-btn { background: none; border: none; color: #ff5555; font-size: 1rem; cursor: pointer; } </style> </head> <body>  <video class="background-video" autoplay loop muted playsinline> <source src="wave.mp4" type="video/mp4"> Your browser does not support the video tag. </video>  <div class="menu-toggle" onclick="toggleMenu()"> <i class="fas fa-bars"></i> </div>  <div class="sidebar" id="sidebar"> <h2>notateo.pl</h2> <div class="sidebar-section"> <div class="sidebar-section-title">Pliki</div> <div class="menu-item"> <i class="fas fa-upload menu-icon"></i> Wgraj pliki </div> <div class="menu-item"> <i class="fas fa-clock menu-icon"></i> Ostatnie pliki </div> </div> <div class="sidebar-section"> <div class="sidebar-section-title">Notatki</div> <div class="menu-item"> <i class="fas fa-list menu-icon"></i> Notatki </div> <div class="menu-item"> <i class="fas fa-clock menu-icon"></i> Ostatnie notatki <span class="beta-label">Beta</span> </div> </div> <div class="sidebar-section"> <div class="sidebar-section-title">Beta</div> <div class="menu-item"> <i class="fas fa-wave-square menu-icon"></i> Test </div> <div class="menu-item"> <i class="fas fa-clipboard-check menu-icon"></i> Test </div> </div> </div>  <div class="content"> <div class="header">Załącz plik</div> <div class="description"> Załącz swoje pliki w tym oto miejscu! Notateo to miejsce na Twoje pliki! </div> <div class="blur-box">  <form id="fileUploadForm" action="upload.php" method="post" enctype="multipart/form-data"> <input id="fileInput" type="file" name="fileToUpload[]" multiple required style="display: none;"> <label for="fileInput" class="upload-btn" onclick="createRipple(event)"> <i class="fas fa-paperclip"></i> Dodaj plik </label> <button type="submit" name="upload" class="upload-btn" onclick="createRipple(event)"> <i class="fas fa-upload"></i> Wyślij pliki </button> </form>  <ul class="file-list" id="fileList"></ul> </div> </div> <script> const fileInput = document.getElementById('fileInput'); const fileList = document.getElementById('fileList'); const sidebar = document.getElementById('sidebar'); let selectedFiles = []; // Clear selected files on page load to prevent "unsaved changes" prompt window.onload = () => { fileInput.value = ''; selectedFiles = []; }; fileInput.addEventListener('change', handleFileSelection); function handleFileSelection(event) { selectedFiles = Array.from(event.target.files); displayFiles(); } function displayFiles() { fileList.innerHTML = ''; selectedFiles.forEach((file, index) => { const listItem = document.createElement('li'); listItem.classList.add('file-item'); const fileName = document.createElement('span'); fileName.textContent = file.name; const removeButton = document.createElement('button'); removeButton.classList.add('remove-file-btn'); removeButton.innerHTML = '×'; removeButton.onclick = () => removeFile(index); listItem.appendChild(fileName); listItem.appendChild(removeButton); fileList.appendChild(listItem); }); } function removeFile(index) { selectedFiles.splice(index, 1); const dataTransfer = new DataTransfer(); selectedFiles.forEach(file => dataTransfer.items.add(file)); fileInput.files = dataTransfer.files; displayFiles(); } // Ripple effect function function createRipple(event) { const button = event.currentTarget; const ripple = document.createElement('span'); ripple.classList.add('ripple'); const rect = button.getBoundingClientRect(); const rippleSize = Math.max(rect.width, rect.height); ripple.style.width = ripple.style.height = `${rippleSize}px`; ripple.style.left = `${event.clientX - rect.left - rippleSize / 2}px`; ripple.style.top = `${event.clientY - rect.top - rippleSize / 2}px`; button.appendChild(ripple); ripple.addEventListener('animationend', () => ripple.remove()); } // Toggle sidebar menu for mobile function toggleMenu() { sidebar.classList.toggle('show'); } </script> </body> </html>