Файловый менеджер

Файловый менеджер - Редактировать - /home/gqdcvggs/academ.my/signup.html

Назад
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Academ - Teacher Registration</title> <link rel="icon" href="logo.ico"> <script src="https://cdn.tailwindcss.com"></script> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script> <style> @font-face { font-family: 'SF Pro Display'; src: url('https://fonts.cdnfonts.com/css/sf-pro-display'); } body { font-family: 'SF Pro Display', -apple-system, sans-serif; background: #000; color: #fff; -webkit-font-smoothing: antialiased; } .hero-gradient { background: linear-gradient(180deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 50%, rgba(0, 0, 0, 0) 100% ); min-height: 100vh; } .primary-button { background: rgb(99, 102, 241); transition: all 0.3s ease; white-space: nowrap; } .primary-button:hover { filter: brightness(110%); transform: translateY(-2px); box-shadow: 0 10px 40px -10px rgba(99, 102, 241, 0.5); } .secondary-button { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; white-space: nowrap; } .secondary-button:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); } .text-gradient { background: linear-gradient(to right, rgb(99, 102, 241), rgb(139, 92, 246)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .glass-panel { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.05); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); } .form-input { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; } .form-input:focus { background: rgba(255, 255, 255, 0.08); border-color: rgb(99, 102, 241); box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2); } .menu-mobile { transform: translateX(-100%); transition: transform 0.3s ease-in-out; background: rgba(0, 0, 0, 0.95); backdrop-filter: blur(10px); } .menu-mobile.open { transform: translateX(0); } .header-glass { background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .map-container { border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.5rem; overflow: hidden; } </style> </head> <body> <div class="hero-gradient"> <header id="header" class="fixed w-full z-50 transition-all duration-300"> <nav class="container mx-auto px-6 py-4"> <div class="flex justify-between items-center"> <a href="/" class="flex items-center"> <img src="logo.webp" alt="Academ Logo" class="w-10 h-10"> </a> <div class="hidden md:flex space-x-8"> <a href="/search" class="text-gray-300 hover:text-white transition duration-300">Find a Tutor</a> <a href="/signup" class="text-gray-300 hover:text-white transition duration-300">Become a Tutor</a> </div> <button id="menuButton" class="md:hidden focus:outline-none"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path> </svg> </button> </div> </nav> </header> <div id="mobileMenu" class="menu-mobile fixed top-0 left-0 w-full h-full z-40 flex flex-col justify-center items-start pl-12 md:hidden"> <a href="/search" class="text-2xl text-gray-300 hover:text-white transition duration-300 mb-6">Find a Tutor</a> <a href="/signup" class="text-2xl text-gray-300 hover:text-white transition duration-300">Become a Tutor</a> </div> <main class="pt-24 pb-12 px-4"> <div class="container mx-auto max-w-4xl"> <h1 class="text-4xl md:text-5xl font-bold mb-8 text-center"> Teacher <span class="text-gradient">Registration</span> </h1> <div class="glass-panel rounded-2xl p-8 mb-12"> <div class="grid md:grid-cols-3 gap-6 mb-8"> <div class="text-center p-4"> <div class="w-12 h-12 bg-indigo-500 bg-opacity-20 rounded-xl flex items-center justify-center mx-auto mb-4"> <svg class="w-6 h-6 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path> </svg> </div> <h3 class="text-lg font-semibold mb-2">Free Account</h3> <p class="text-gray-400 text-sm">Access to personalized dashboard and teaching tools</p> </div> <div class="text-center p-4"> <div class="w-12 h-12 bg-indigo-500 bg-opacity-20 rounded-xl flex items-center justify-center mx-auto mb-4"> <svg class="w-6 h-6 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path> </svg> </div> <h3 class="text-lg font-semibold mb-2">Quick Verification</h3> <p class="text-gray-400 text-sm">24-48h processing time for your documents</p> </div> <div class="text-center p-4"> <div class="w-12 h-12 bg-indigo-500 bg-opacity-20 rounded-xl flex items-center justify-center mx-auto mb-4"> <svg class="w-6 h-6 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path> </svg> </div> <h3 class="text-lg font-semibold mb-2">Secure Payments</h3> <p class="text-gray-400 text-sm">Get paid securely for your teaching sessions</p> </div> </div> <div class="text-center mb-8"> <p class="text-gray-300 text-sm">You'll have free access to an Academ account where you can get paid, personalize your account and much more!</p> </div> <form id="teacherForm" action="signup-system.php" method="post" enctype="multipart/form-data" class="space-y-8"> <!-- Identifiants --> <div class="grid md:grid-cols-2 gap-6"> <div class="space-y-2"> <label class="block text-sm font-medium">Email</label> <input type="email" name="email" required class="w-full form-input px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-20 transition-all duration-200"> </div> <div class="space-y-2"> <label class="block text-sm font-medium">Password</label> <div class="relative"> <input type="password" name="password" required class="w-full form-input px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-20 transition-all duration-200"> <div id="passwordRequirements" class="hidden absolute z-10 mt-2 w-full p-4 bg-gray-800 rounded-lg border border-gray-700"> <ul class="space-y-1 text-sm text-gray-400"> <li class="flex items-center gap-2"> <span class="w-1.5 h-1.5 bg-gray-500 rounded-full"></span> At least 8 characters </li> <li class="flex items-center gap-2"> <span class="w-1.5 h-1.5 bg-gray-500 rounded-full"></span> One uppercase letter </li> <li class="flex items-center gap-2"> <span class="w-1.5 h-1.5 bg-gray-500 rounded-full"></span> One number </li> </ul> </div> </div> </div> </div> <!-- Informations personnelles --> <div class="grid md:grid-cols-2 gap-6"> <div class="space-y-2"> <label class="block text-sm font-medium">Last Name</label> <input type="text" name="lastName" required class="w-full form-input px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-20 transition-all duration-200"> </div> <div class="space-y-2"> <label class="block text-sm font-medium">First Name</label> <input type="text" name="firstName" required class="w-full form-input px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-20 transition-all duration-200"> </div> </div> <!-- Date de naissance --> <div class="space-y-2"> <label class="block text-sm font-medium">Date of Birth</label> <div class="grid grid-cols-3 gap-4"> <input type="text" name="birthDay" placeholder="DD" maxlength="2" required class="form-input px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-20 transition-all duration-200 text-center"> <input type="text" name="birthMonth" placeholder="MM" maxlength="2" required class="form-input px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-20 transition-all duration-200 text-center"> <input type="text" name="birthYear" placeholder="YYYY" maxlength="4" required class="form-input px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-20 transition-all duration-200 text-center"> </div> </div> <!-- Matière enseignée --> <div class="space-y-2"> <label class="block text-sm font-medium">Subject Taught</label> <select name="subject" required class="w-full form-select px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-20 transition-all duration-200"> <option value="">Select a subject</option> <option value="math">Mathematics</option> <option value="english">English</option> <option value="science">Science</option> <option value="language">Language Course</option> <option value="technology">Technology</option> </select> </div> <!-- Adresses --> <div class="space-y-6"> <div class="space-y-2"> <label class="block text-sm font-medium">Your Address</label> <input type="text" name="userAddress" required class="w-full form-input px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-20 transition-all duration-200"> </div> <div class="space-y-2"> <label class="block text-sm font-medium">School Address</label> <input type="text" name="schoolAddress" required class="w-full form-input px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-20 transition-all duration-200"> <div id="map" class="h-64 mt-2 rounded-lg overflow-hidden border border-gray-700"></div> </div> </div> <!-- Documents --> <div class="space-y-6"> <div> <div class="flex items-center justify-between mb-2"> <label class="block text-sm font-medium">ID Front Card</label> <button type="button" class="text-sm text-indigo-400 hover:text-indigo-300 transition-colors duration-200"> What should be visible? </button> </div> <div class="space-y-4"> <div class="flex items-center justify-center w-full"> <label class="w-full flex flex-col items-center px-4 py-6 rounded-lg border-2 border-dashed border-gray-700 hover:border-indigo-500 transition-colors duration-200 cursor-pointer bg-gray-800"> <svg class="w-8 h-8 text-gray-500 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path> </svg> <span class="text-sm text-gray-500">Click to upload or drag and drop</span> <input type="file" name="idFront" accept="image/" required class="hidden"> </label> </div> <div class="text-xs text-gray-400">This information is required for governmental verification purposes.</div> </div> </div> <div> <div class="flex items-center justify-between mb-2"> <label class="block text-sm font-medium">ID Back Card</label> <button type="button" class="text-sm text-indigo-400 hover:text-indigo-300 transition-colors duration-200"> What should be visible? </button> </div> <div class="space-y-4"> <div class="flex items-center justify-center w-full"> <label class="w-full flex flex-col items-center px-4 py-6 rounded-lg border-2 border-dashed border-gray-700 hover:border-indigo-500 transition-colors duration-200 cursor-pointer bg-gray-800"> <svg class="w-8 h-8 text-gray-500 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path> </svg> <span class="text-sm text-gray-500">Click to upload or drag and drop</span> <input type="file" name="idBack" accept="image/" required class="hidden"> </label> </div> <div class="text-xs text-gray-400">This information is required for governmental verification purposes.</div> </div> </div> <div> <div class="flex items-center justify-between mb-2"> <label class="block text-sm font-medium">Diploma <span class="text-gray-500">(Legally binding)</span></label> </div> <div class="space-y-4"> <div class="flex items-center justify-center w-full"> <label class="w-full flex flex-col items-center px-4 py-6 rounded-lg border-2 border-dashed border-gray-700 hover:border-indigo-500 transition-colors duration-200 cursor-pointer bg-gray-800"> <svg class="w-8 h-8 text-gray-500 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path> </svg> <span class="text-sm text-gray-500">Click to upload or drag and drop</span> <input type="file" name="diploma" accept="image/,.pdf" required class="hidden"> </label> </div> <div class="text-xs text-gray-400">We accept PDF files and images of your diploma</div> </div> </div> </div> <!-- Documents Explanation Panel --> <div class="bg-gray-800 bg-opacity-50 rounded-xl p-6 space-y-4"> <h2 class="text-xl font-semibold">Document Requirements</h2> <div class="grid md:grid-cols-2 gap-6"> <div> <h3 class="font-medium mb-3">ID Card Front should show:</h3> <ul class="space-y-2 text-gray-300 text-sm"> <li class="flex items-center"> <span class="w-1.5 h-1.5 bg-indigo-500 rounded-full mr-2"></span> Your full name </li> <li class="flex items-center"> <span class="w-1.5 h-1.5 bg-indigo-500 rounded-full mr-2"></span> Your photograph </li> <li class="flex items-center"> <span class="w-1.5 h-1.5 bg-indigo-500 rounded-full mr-2"></span> Date of birth </li> </ul> </div> <div> <h3 class="font-medium mb-3">ID Card Back should show:</h3> <ul class="space-y-2 text-gray-300 text-sm"> <li class="flex items-center"> <span class="w-1.5 h-1.5 bg-indigo-500 rounded-full mr-2"></span> Address (if applicable) </li> <li class="flex items-center"> <span class="w-1.5 h-1.5 bg-indigo-500 rounded-full mr-2"></span> Card expiration date </li> <li class="flex items-center"> <span class="w-1.5 h-1.5 bg-indigo-500 rounded-full mr-2"></span> Additional security features </li> </ul> </div> </div> </div> <!-- Submit Button --> <div class="pt-6"> <button type="submit" id="submitBtn" disabled class="w-full bg-indigo-500 text-white px-6 py-4 rounded-xl font-medium hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transform transition-all duration-200 hover:scale-[1.02] disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 disabled:hover:bg-indigo-500"> Complete Registration </button> <p class="text-center text-sm text-gray-400 mt-4"> By clicking "Complete Registration", you agree to our Terms of Service and Privacy Policy </p> </div> </form> </div> </div> </main> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Éléments du DOM const form = document.getElementById('teacherForm'); const passwordInput = document.querySelector('input[name="password"]'); const passwordRequirements = document.getElementById('passwordRequirements'); const submitBtn = document.getElementById('submitBtn'); const menuButton = document.getElementById('menuButton'); const mobileMenu = document.getElementById('mobileMenu'); const header = document.getElementById('header'); const schoolAddressInput = document.querySelector('input[name="schoolAddress"]'); let map, marker; // Configuration de la carte initMap(); // Gestion du menu mobile initMobileMenu(); // Gestion du header au scroll initHeaderScroll(); // Gestion des uploads de fichiers initFileUploads(); // Validation du mot de passe initPasswordValidation(); // Validation de la date de naissance initDateValidation(); // Gestion du formulaire initFormValidation(); // Fonctions d'initialisation function initMap() { map = L.map('map').setView([48.8566, 2.3522], 13); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); // Recherche d'adresse avec debounce const debounceSearch = debounce((address) => { if (address.length > 3) { searchAddress(address); } }, 500); schoolAddressInput.addEventListener('input', (e) => { debounceSearch(e.target.value); }); } function initMobileMenu() { menuButton.addEventListener('click', () => { mobileMenu.classList.toggle('open'); document.body.classList.toggle('overflow-hidden'); menuButton.setAttribute('aria-expanded', menuButton.getAttribute('aria-expanded') === 'false' ? 'true' : 'false' ); }); // Fermer le menu au clic sur un lien mobileMenu.querySelectorAll('a').forEach(link => { link.addEventListener('click', closeMobileMenu); }); // Fermer le menu au redimensionnement window.addEventListener('resize', () => { if (window.innerWidth >= 768) { closeMobileMenu(); } }); } function initHeaderScroll() { const headerObserver = new IntersectionObserver( ([entry]) => { header.classList.toggle('header-glass', !entry.isIntersecting); }, { threshold: 0 } ); headerObserver.observe(document.querySelector('.hero-gradient')); } function initFileUploads() { const fileInputs = document.querySelectorAll('input[type="file"]'); fileInputs.forEach(input => { const dropZone = input.closest('label'); // Drag & Drop events dropZone.addEventListener('dragover', (e) => { e.preventDefault(); dropZone.classList.add('border-indigo-500', 'bg-gray-700'); }); dropZone.addEventListener('dragleave', (e) => { e.preventDefault(); dropZone.classList.remove('border-indigo-500', 'bg-gray-700'); }); dropZone.addEventListener('drop', (e) => { e.preventDefault(); dropZone.classList.remove('border-indigo-500', 'bg-gray-700'); const files = e.dataTransfer.files; if (files.length) { input.files = files; updateFileLabel(input); } }); // Input change event input.addEventListener('change', () => { updateFileLabel(input); }); }); } function initPasswordValidation() { const requirements = { length: { regex: /.{8,}/, element: document.getElementById('lengthReq') }, uppercase: { regex: /[A-Z]/, element: document.getElementById('uppercaseReq') }, lowercase: { regex: /[a-z]/, element: document.getElementById('lowercaseReq') }, number: { regex: /[0-9]/, element: document.getElementById('numberReq') }, special: { regex: /[!@#$%^&(),.?":{}\|<>]/, element: document.getElementById('specialReq') } }; passwordInput.addEventListener('input', () => { const password = passwordInput.value; let allRequirementsMet = true; Object.entries(requirements).forEach(([key, requirement]) => { const isMet = requirement.regex.test(password); updateRequirementStatus(requirement.element, isMet); if (!isMet) allRequirementsMet = false; }); submitBtn.disabled = !allRequirementsMet; }); // Afficher/masquer les exigences passwordInput.addEventListener('focus', () => { passwordRequirements.classList.remove('hidden'); }); passwordInput.addEventListener('blur', (e) => { if (!e.relatedTarget?.closest('#passwordRequirements')) { passwordRequirements.classList.add('hidden'); } }); } function initDateValidation() { const dayInput = document.querySelector('input[name="birthDay"]'); const monthInput = document.querySelector('input[name="birthMonth"]'); const yearInput = document.querySelector('input[name="birthYear"]'); [dayInput, monthInput, yearInput].forEach(input => { input.addEventListener('input', (e) => { let value = e.target.value.replace(/\D/g, ''); if (input === dayInput) { value = Math.min(Math.max(1, parseInt(value) \|\| 1), 31).toString(); } else if (input === monthInput) { value = Math.min(Math.max(1, parseInt(value) \|\| 1), 12).toString(); } else if (input === yearInput) { const currentYear = new Date().getFullYear(); value = Math.min(Math.max(1900, parseInt(value) \|\| 1900), currentYear).toString(); } input.value = value; validateAge(); }); }); } function initFormValidation() { form.addEventListener('submit', async (e) => { e.preventDefault(); if (await validateForm()) { showLoadingState(); // Simulation d'envoi setTimeout(() => { form.submit(); }, 1500); } }); } // Fonctions utilitaires function debounce(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } function searchAddress(address) { fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(address)}`) .then(response => response.json()) .then(data => { if (data.length > 0) { const lat = parseFloat(data[0].lat); const lon = parseFloat(data[0].lon); updateMap(lat, lon); } }) .catch(error => { console.error('Erreur de géocodage:', error); showError('Unable to find this address'); }); } function updateMap(lat, lon) { map.setView([lat, lon], 15); if (marker) { marker.setLatLng([lat, lon]); } else { marker = L.marker([lat, lon]).addTo(map); } } function updateFileLabel(input) { const fileName = input.files[0]?.name; const label = input.closest('label').querySelector('span'); label.textContent = fileName \|\| 'Click to upload or drag and drop'; } function updateRequirementStatus(element, isMet) { element.classList.toggle('text-green-500', isMet); element.classList.toggle('text-red-500', !isMet); const dot = element.querySelector('span'); if (dot) { dot.classList.toggle('bg-green-500', isMet); dot.classList.toggle('bg-red-500', !isMet); } } function validateAge() { const day = parseInt(document.querySelector('input[name="birthDay"]').value); const month = parseInt(document.querySelector('input[name="birthMonth"]').value); const year = parseInt(document.querySelector('input[name="birthYear"]').value); if (day && month && year) { const birthDate = new Date(year, month - 1, day); const age = calculateAge(birthDate); return age >= 18; } return false; } function calculateAge(birthDate) { const today = new Date(); let age = today.getFullYear() - birthDate.getFullYear(); const monthDiff = today.getMonth() - birthDate.getMonth(); if (monthDiff < 0 \|\| (monthDiff === 0 && today.getDate() < birthDate.getDate())) { age--; } return age; } async function validateForm() { const validations = [ { condition: validateAge(), message: 'You must be at least 18 years old' }, { condition: marker !== undefined, message: 'Please enter a valid school address' }, { condition: validateFiles(), message: 'Please upload all required documents' } ]; for (const validation of validations) { if (!validation.condition) { showError(validation.message); return false; } } return true; } function validateFiles() { const fileInputs = document.querySelectorAll('input[type="file"]'); return Array.from(fileInputs).every(input => input.files.length > 0); } function showLoadingState() { submitBtn.disabled = true; submitBtn.innerHTML = ` <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> </svg> Processing... `; } function showError(message) { const errorDiv = document.createElement('div'); errorDiv.className = 'fixed top-4 right-4 bg-red-500 text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-0 opacity-100 transition-all duration-300 z-50'; errorDiv.textContent = message; document.body.appendChild(errorDiv); setTimeout(() => { errorDiv.classList.add('translate-y-[-1rem]', 'opacity-0'); setTimeout(() => errorDiv.remove(), 300); }, 3000); } function closeMobileMenu() { mobileMenu.classList.remove('open'); document.body.classList.remove('overflow-hidden'); menuButton.setAttribute('aria-expanded', 'false'); } }); </script> </body> </html>

| ver. 1.6 | Github | . | PHP 8.1.33 | Генерация страницы: 0 | proxy | phpinfo | Настройка