Add splash page and improve user registration views.
This commit is contained in:
224
static/js/auth-animations.js
Normal file
224
static/js/auth-animations.js
Normal file
@@ -0,0 +1,224 @@
|
||||
// Authentication Page Animations and Interactions
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Add loading state to submit button
|
||||
const form = document.querySelector('.auth-form');
|
||||
const submitBtn = document.querySelector('.btn-primary');
|
||||
|
||||
if (form && submitBtn) {
|
||||
form.addEventListener('submit', function(e) {
|
||||
// Check if form is valid
|
||||
if (form.checkValidity()) {
|
||||
submitBtn.classList.add('loading');
|
||||
submitBtn.disabled = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Animate form fields on focus
|
||||
const formInputs = document.querySelectorAll('.form-control');
|
||||
formInputs.forEach(input => {
|
||||
input.addEventListener('focus', function() {
|
||||
this.parentElement.classList.add('focused');
|
||||
});
|
||||
|
||||
input.addEventListener('blur', function() {
|
||||
if (!this.value) {
|
||||
this.parentElement.classList.remove('focused');
|
||||
}
|
||||
});
|
||||
|
||||
// Check if input has value on load (for browser autofill)
|
||||
if (input.value) {
|
||||
input.parentElement.classList.add('focused');
|
||||
}
|
||||
});
|
||||
|
||||
// Company code formatting
|
||||
const companyCodeInput = document.querySelector('#company_code');
|
||||
if (companyCodeInput) {
|
||||
companyCodeInput.addEventListener('input', function(e) {
|
||||
// Convert to uppercase and remove non-alphanumeric characters
|
||||
let value = e.target.value.toUpperCase().replace(/[^A-Z0-9-]/g, '');
|
||||
|
||||
// Add dashes every 4 characters
|
||||
if (value.length > 4 && !value.includes('-')) {
|
||||
value = value.match(/.{1,4}/g).join('-');
|
||||
}
|
||||
|
||||
e.target.value = value;
|
||||
});
|
||||
}
|
||||
|
||||
// Smooth scroll to alert messages
|
||||
const alerts = document.querySelectorAll('.alert');
|
||||
if (alerts.length > 0) {
|
||||
alerts[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}
|
||||
|
||||
// Add ripple effect to buttons
|
||||
const buttons = document.querySelectorAll('.btn-primary, .btn-outline-primary');
|
||||
buttons.forEach(button => {
|
||||
button.addEventListener('click', function(e) {
|
||||
const ripple = document.createElement('span');
|
||||
const rect = this.getBoundingClientRect();
|
||||
const size = Math.max(rect.width, rect.height);
|
||||
const x = e.clientX - rect.left - size / 2;
|
||||
const y = e.clientY - rect.top - size / 2;
|
||||
|
||||
ripple.style.width = ripple.style.height = size + 'px';
|
||||
ripple.style.left = x + 'px';
|
||||
ripple.style.top = y + 'px';
|
||||
ripple.classList.add('ripple');
|
||||
|
||||
// Remove any existing ripples
|
||||
const existingRipple = this.querySelector('.ripple');
|
||||
if (existingRipple) {
|
||||
existingRipple.remove();
|
||||
}
|
||||
|
||||
this.appendChild(ripple);
|
||||
|
||||
setTimeout(() => ripple.remove(), 600);
|
||||
});
|
||||
});
|
||||
|
||||
// Animate registration options
|
||||
const registrationOptions = document.querySelector('.registration-options');
|
||||
if (registrationOptions) {
|
||||
registrationOptions.style.opacity = '0';
|
||||
registrationOptions.style.transform = 'translateY(20px)';
|
||||
|
||||
setTimeout(() => {
|
||||
registrationOptions.style.transition = 'all 0.6s ease';
|
||||
registrationOptions.style.opacity = '1';
|
||||
registrationOptions.style.transform = 'translateY(0)';
|
||||
}, 300);
|
||||
}
|
||||
|
||||
// Password visibility toggle
|
||||
const passwordInputs = document.querySelectorAll('input[type="password"]');
|
||||
passwordInputs.forEach(input => {
|
||||
const wrapper = input.parentElement;
|
||||
const toggleBtn = document.createElement('button');
|
||||
toggleBtn.type = 'button';
|
||||
toggleBtn.className = 'password-toggle';
|
||||
toggleBtn.innerHTML = '👁️';
|
||||
toggleBtn.style.cssText = `
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 1.2rem;
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.3s ease;
|
||||
`;
|
||||
|
||||
toggleBtn.addEventListener('click', function() {
|
||||
if (input.type === 'password') {
|
||||
input.type = 'text';
|
||||
this.innerHTML = '🙈';
|
||||
} else {
|
||||
input.type = 'password';
|
||||
this.innerHTML = '👁️';
|
||||
}
|
||||
});
|
||||
|
||||
toggleBtn.addEventListener('mouseenter', function() {
|
||||
this.style.opacity = '1';
|
||||
});
|
||||
|
||||
toggleBtn.addEventListener('mouseleave', function() {
|
||||
this.style.opacity = '0.6';
|
||||
});
|
||||
|
||||
wrapper.style.position = 'relative';
|
||||
wrapper.appendChild(toggleBtn);
|
||||
});
|
||||
|
||||
// Form validation feedback
|
||||
const requiredInputs = document.querySelectorAll('.form-control[required]');
|
||||
requiredInputs.forEach(input => {
|
||||
input.addEventListener('blur', function() {
|
||||
if (this.value.trim() === '') {
|
||||
this.classList.add('invalid');
|
||||
this.classList.remove('valid');
|
||||
} else {
|
||||
this.classList.add('valid');
|
||||
this.classList.remove('invalid');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Email validation
|
||||
const emailInput = document.querySelector('input[type="email"]');
|
||||
if (emailInput) {
|
||||
emailInput.addEventListener('blur', function() {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (this.value && !emailRegex.test(this.value)) {
|
||||
this.classList.add('invalid');
|
||||
this.classList.remove('valid');
|
||||
|
||||
// Add error message if not exists
|
||||
if (!this.parentElement.querySelector('.error-message')) {
|
||||
const errorMsg = document.createElement('small');
|
||||
errorMsg.className = 'error-message';
|
||||
errorMsg.style.color = '#dc3545';
|
||||
errorMsg.textContent = 'Please enter a valid email address';
|
||||
this.parentElement.appendChild(errorMsg);
|
||||
}
|
||||
} else if (this.value) {
|
||||
// Remove error message if exists
|
||||
const errorMsg = this.parentElement.querySelector('.error-message');
|
||||
if (errorMsg) {
|
||||
errorMsg.remove();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Animate auth container on load
|
||||
const authContainer = document.querySelector('.auth-container');
|
||||
if (authContainer) {
|
||||
authContainer.style.opacity = '0';
|
||||
authContainer.style.transform = 'scale(0.95)';
|
||||
|
||||
setTimeout(() => {
|
||||
authContainer.style.transition = 'all 0.5s ease';
|
||||
authContainer.style.opacity = '1';
|
||||
authContainer.style.transform = 'scale(1)';
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
|
||||
// Add CSS for valid/invalid states
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
.form-control.valid {
|
||||
border-color: #28a745 !important;
|
||||
}
|
||||
|
||||
.form-control.invalid {
|
||||
border-color: #dc3545 !important;
|
||||
}
|
||||
|
||||
.ripple {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
transform: scale(0);
|
||||
animation: ripple-animation 0.6s ease-out;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes ripple-animation {
|
||||
to {
|
||||
transform: scale(4);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
221
static/js/password-strength.js
Normal file
221
static/js/password-strength.js
Normal file
@@ -0,0 +1,221 @@
|
||||
// Password Strength Indicator
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Password strength rules
|
||||
const passwordRules = {
|
||||
minLength: 8,
|
||||
requireUppercase: true,
|
||||
requireLowercase: true,
|
||||
requireNumbers: true,
|
||||
requireSpecialChars: true,
|
||||
specialChars: '!@#$%^&*()_+-=[]{}|;:,.<>?'
|
||||
};
|
||||
|
||||
// Function to check password strength
|
||||
function checkPasswordStrength(password) {
|
||||
let strength = 0;
|
||||
const feedback = [];
|
||||
|
||||
// Check minimum length
|
||||
if (password.length >= passwordRules.minLength) {
|
||||
strength += 20;
|
||||
} else {
|
||||
feedback.push(`At least ${passwordRules.minLength} characters`);
|
||||
}
|
||||
|
||||
// Check for uppercase letters
|
||||
if (passwordRules.requireUppercase && /[A-Z]/.test(password)) {
|
||||
strength += 20;
|
||||
} else if (passwordRules.requireUppercase) {
|
||||
feedback.push('One uppercase letter');
|
||||
}
|
||||
|
||||
// Check for lowercase letters
|
||||
if (passwordRules.requireLowercase && /[a-z]/.test(password)) {
|
||||
strength += 20;
|
||||
} else if (passwordRules.requireLowercase) {
|
||||
feedback.push('One lowercase letter');
|
||||
}
|
||||
|
||||
// Check for numbers
|
||||
if (passwordRules.requireNumbers && /\d/.test(password)) {
|
||||
strength += 20;
|
||||
} else if (passwordRules.requireNumbers) {
|
||||
feedback.push('One number');
|
||||
}
|
||||
|
||||
// Check for special characters
|
||||
const specialCharRegex = new RegExp(`[${passwordRules.specialChars.replace(/[\[\]\\]/g, '\\$&')}]`);
|
||||
if (passwordRules.requireSpecialChars && specialCharRegex.test(password)) {
|
||||
strength += 20;
|
||||
} else if (passwordRules.requireSpecialChars) {
|
||||
feedback.push('One special character');
|
||||
}
|
||||
|
||||
// Bonus points for length
|
||||
if (password.length >= 12) {
|
||||
strength = Math.min(100, strength + 10);
|
||||
}
|
||||
if (password.length >= 16) {
|
||||
strength = Math.min(100, strength + 10);
|
||||
}
|
||||
|
||||
return {
|
||||
score: strength,
|
||||
feedback: feedback,
|
||||
isValid: strength >= 100
|
||||
};
|
||||
}
|
||||
|
||||
// Function to update the strength indicator UI
|
||||
function updateStrengthIndicator(input, result) {
|
||||
let container = input.parentElement.querySelector('.password-strength-container');
|
||||
|
||||
// Create container if it doesn't exist
|
||||
if (!container) {
|
||||
container = document.createElement('div');
|
||||
container.className = 'password-strength-container';
|
||||
|
||||
const indicator = document.createElement('div');
|
||||
indicator.className = 'password-strength-indicator';
|
||||
|
||||
const bar = document.createElement('div');
|
||||
bar.className = 'password-strength-bar';
|
||||
|
||||
const text = document.createElement('div');
|
||||
text.className = 'password-strength-text';
|
||||
|
||||
const requirements = document.createElement('ul');
|
||||
requirements.className = 'password-requirements';
|
||||
|
||||
indicator.appendChild(bar);
|
||||
container.appendChild(indicator);
|
||||
container.appendChild(text);
|
||||
container.appendChild(requirements);
|
||||
|
||||
input.parentElement.appendChild(container);
|
||||
}
|
||||
|
||||
const bar = container.querySelector('.password-strength-bar');
|
||||
const text = container.querySelector('.password-strength-text');
|
||||
const requirements = container.querySelector('.password-requirements');
|
||||
|
||||
// Update bar width and color
|
||||
bar.style.width = result.score + '%';
|
||||
|
||||
// Remove all strength classes
|
||||
bar.className = 'password-strength-bar';
|
||||
|
||||
// Add appropriate class based on score
|
||||
if (result.score < 40) {
|
||||
bar.classList.add('strength-weak');
|
||||
text.textContent = 'Weak';
|
||||
text.className = 'password-strength-text text-weak';
|
||||
} else if (result.score < 70) {
|
||||
bar.classList.add('strength-fair');
|
||||
text.textContent = 'Fair';
|
||||
text.className = 'password-strength-text text-fair';
|
||||
} else if (result.score < 100) {
|
||||
bar.classList.add('strength-good');
|
||||
text.textContent = 'Good';
|
||||
text.className = 'password-strength-text text-good';
|
||||
} else {
|
||||
bar.classList.add('strength-strong');
|
||||
text.textContent = 'Strong';
|
||||
text.className = 'password-strength-text text-strong';
|
||||
}
|
||||
|
||||
// Update requirements list
|
||||
requirements.innerHTML = '';
|
||||
if (result.feedback.length > 0) {
|
||||
requirements.innerHTML = '<li>' + result.feedback.join('</li><li>') + '</li>';
|
||||
}
|
||||
}
|
||||
|
||||
// Function to check if passwords match
|
||||
function checkPasswordMatch(password, confirmPassword) {
|
||||
const confirmInput = document.querySelector(confirmPassword);
|
||||
if (!confirmInput) return;
|
||||
|
||||
let matchIndicator = confirmInput.parentElement.querySelector('.password-match-indicator');
|
||||
|
||||
if (!matchIndicator) {
|
||||
matchIndicator = document.createElement('div');
|
||||
matchIndicator.className = 'password-match-indicator';
|
||||
confirmInput.parentElement.appendChild(matchIndicator);
|
||||
}
|
||||
|
||||
if (confirmInput.value === '') {
|
||||
matchIndicator.textContent = '';
|
||||
matchIndicator.className = 'password-match-indicator';
|
||||
} else if (password === confirmInput.value) {
|
||||
matchIndicator.textContent = '✓ Passwords match';
|
||||
matchIndicator.className = 'password-match-indicator match';
|
||||
} else {
|
||||
matchIndicator.textContent = '✗ Passwords do not match';
|
||||
matchIndicator.className = 'password-match-indicator no-match';
|
||||
}
|
||||
}
|
||||
|
||||
// Attach to all password inputs
|
||||
const passwordInputs = document.querySelectorAll('input[type="password"][name="password"], input[type="password"][name="new_password"]');
|
||||
|
||||
passwordInputs.forEach(input => {
|
||||
// Show initial requirements when focused
|
||||
input.addEventListener('focus', function() {
|
||||
if (this.value === '') {
|
||||
const result = checkPasswordStrength('');
|
||||
updateStrengthIndicator(this, result);
|
||||
}
|
||||
});
|
||||
|
||||
// Check strength on input
|
||||
input.addEventListener('input', function() {
|
||||
const result = checkPasswordStrength(this.value);
|
||||
updateStrengthIndicator(this, result);
|
||||
|
||||
// Check password match if there's a confirm field
|
||||
const formElement = this.closest('form');
|
||||
const confirmField = formElement.querySelector('input[name="confirm_password"], input[name="confirm_new_password"]');
|
||||
if (confirmField && confirmField.value) {
|
||||
checkPasswordMatch(this.value, '#' + confirmField.id);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Attach to confirm password inputs
|
||||
const confirmInputs = document.querySelectorAll('input[name="confirm_password"], input[name="confirm_new_password"]');
|
||||
|
||||
confirmInputs.forEach(input => {
|
||||
input.addEventListener('input', function() {
|
||||
const formElement = this.closest('form');
|
||||
const passwordField = formElement.querySelector('input[name="password"], input[name="new_password"]');
|
||||
if (passwordField) {
|
||||
checkPasswordMatch(passwordField.value, '#' + this.id);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Prevent form submission if password is not strong enough
|
||||
const forms = document.querySelectorAll('form');
|
||||
forms.forEach(form => {
|
||||
form.addEventListener('submit', function(e) {
|
||||
const passwordField = this.querySelector('input[name="password"], input[name="new_password"]');
|
||||
if (passwordField && passwordField.value) {
|
||||
const result = checkPasswordStrength(passwordField.value);
|
||||
if (!result.isValid) {
|
||||
e.preventDefault();
|
||||
alert('Please ensure your password meets all the requirements.');
|
||||
return false;
|
||||
}
|
||||
|
||||
// Check password match
|
||||
const confirmField = this.querySelector('input[name="confirm_password"], input[name="confirm_new_password"]');
|
||||
if (confirmField && confirmField.value !== passwordField.value) {
|
||||
e.preventDefault();
|
||||
alert('Passwords do not match.');
|
||||
return false;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
125
static/js/splash.js
Normal file
125
static/js/splash.js
Normal file
@@ -0,0 +1,125 @@
|
||||
// Splash Page Interactive Elements
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Observer options for animations
|
||||
const observerOptions = {
|
||||
threshold: 0.5,
|
||||
rootMargin: '0px'
|
||||
};
|
||||
|
||||
// Parallax effect for hero section
|
||||
const hero = document.querySelector('.splash-hero');
|
||||
if (hero) {
|
||||
window.addEventListener('scroll', () => {
|
||||
const scrolled = window.pageYOffset;
|
||||
const parallaxSpeed = 0.5;
|
||||
hero.style.transform = `translateY(${scrolled * parallaxSpeed}px)`;
|
||||
});
|
||||
}
|
||||
|
||||
// Add hover effects to feature cards
|
||||
const featureCards = document.querySelectorAll('.feature-card');
|
||||
featureCards.forEach(card => {
|
||||
card.addEventListener('mouseenter', function() {
|
||||
this.style.transform = 'translateY(-10px) scale(1.02)';
|
||||
});
|
||||
|
||||
card.addEventListener('mouseleave', function() {
|
||||
this.style.transform = 'translateY(0) scale(1)';
|
||||
});
|
||||
});
|
||||
|
||||
// Smooth scroll for anchor links
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Add stagger animation to feature cards
|
||||
const featureObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach((entry, index) => {
|
||||
if (entry.isIntersecting) {
|
||||
setTimeout(() => {
|
||||
entry.target.style.opacity = '1';
|
||||
entry.target.style.transform = 'translateY(0)';
|
||||
}, index * 100);
|
||||
featureObserver.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
featureCards.forEach(card => {
|
||||
card.style.opacity = '0';
|
||||
card.style.transform = 'translateY(20px)';
|
||||
card.style.transition = 'all 0.6s ease';
|
||||
featureObserver.observe(card);
|
||||
});
|
||||
|
||||
// Testimonial cards animation
|
||||
const testimonialCards = document.querySelectorAll('.testimonial-card');
|
||||
const testimonialObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach((entry, index) => {
|
||||
if (entry.isIntersecting) {
|
||||
setTimeout(() => {
|
||||
entry.target.style.opacity = '1';
|
||||
entry.target.style.transform = 'translateX(0)';
|
||||
}, index * 150);
|
||||
testimonialObserver.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
testimonialCards.forEach((card, index) => {
|
||||
card.style.opacity = '0';
|
||||
card.style.transform = index % 2 === 0 ? 'translateX(-30px)' : 'translateX(30px)';
|
||||
card.style.transition = 'all 0.8s ease';
|
||||
testimonialObserver.observe(card);
|
||||
});
|
||||
|
||||
// Pricing cards hover effect
|
||||
const pricingCards = document.querySelectorAll('.pricing-card');
|
||||
pricingCards.forEach(card => {
|
||||
card.addEventListener('mouseenter', function() {
|
||||
if (!this.classList.contains('featured')) {
|
||||
this.style.transform = 'translateY(-10px)';
|
||||
this.style.boxShadow = '0 15px 40px rgba(0,0,0,0.12)';
|
||||
}
|
||||
});
|
||||
|
||||
card.addEventListener('mouseleave', function() {
|
||||
if (!this.classList.contains('featured')) {
|
||||
this.style.transform = 'translateY(0)';
|
||||
this.style.boxShadow = '0 5px 20px rgba(0,0,0,0.08)';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Add ripple effect to buttons
|
||||
const buttons = document.querySelectorAll('.btn-primary, .btn-secondary, .btn-pricing');
|
||||
buttons.forEach(button => {
|
||||
button.addEventListener('click', function(e) {
|
||||
const ripple = document.createElement('span');
|
||||
const rect = this.getBoundingClientRect();
|
||||
const size = Math.max(rect.width, rect.height);
|
||||
const x = e.clientX - rect.left - size / 2;
|
||||
const y = e.clientY - rect.top - size / 2;
|
||||
|
||||
ripple.style.width = ripple.style.height = size + 'px';
|
||||
ripple.style.left = x + 'px';
|
||||
ripple.style.top = y + 'px';
|
||||
ripple.classList.add('ripple');
|
||||
|
||||
this.appendChild(ripple);
|
||||
|
||||
setTimeout(() => ripple.remove(), 600);
|
||||
});
|
||||
});
|
||||
});
|
||||
54
static/js/user-dropdown.js
Normal file
54
static/js/user-dropdown.js
Normal file
@@ -0,0 +1,54 @@
|
||||
// User dropdown context menu functionality
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const userDropdownToggle = document.getElementById('user-dropdown-toggle');
|
||||
const userDropdownModal = document.getElementById('user-dropdown-modal');
|
||||
|
||||
// Toggle dropdown context menu
|
||||
if (userDropdownToggle && userDropdownModal) {
|
||||
userDropdownToggle.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
// Toggle active class
|
||||
const isActive = userDropdownModal.classList.contains('active');
|
||||
userDropdownModal.classList.toggle('active');
|
||||
|
||||
// Position the dropdown relative to the toggle button
|
||||
if (!isActive) {
|
||||
const toggleRect = userDropdownToggle.getBoundingClientRect();
|
||||
const sidebarHeader = userDropdownToggle.closest('.sidebar-header');
|
||||
const sidebarHeaderRect = sidebarHeader.getBoundingClientRect();
|
||||
|
||||
// Position relative to sidebar header
|
||||
userDropdownModal.style.position = 'absolute';
|
||||
userDropdownModal.style.top = (toggleRect.bottom - sidebarHeaderRect.top + 5) + 'px';
|
||||
userDropdownModal.style.right = '10px';
|
||||
userDropdownModal.style.left = 'auto';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Close dropdown when clicking outside
|
||||
document.addEventListener('click', function(e) {
|
||||
if (userDropdownModal && !userDropdownModal.contains(e.target) && !userDropdownToggle.contains(e.target)) {
|
||||
userDropdownModal.classList.remove('active');
|
||||
}
|
||||
});
|
||||
|
||||
// Close dropdown when pressing Escape
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape' && userDropdownModal && userDropdownModal.classList.contains('active')) {
|
||||
userDropdownModal.classList.remove('active');
|
||||
}
|
||||
});
|
||||
|
||||
// Close dropdown when clicking on menu items
|
||||
if (userDropdownModal) {
|
||||
const menuLinks = userDropdownModal.querySelectorAll('a');
|
||||
menuLinks.forEach(link => {
|
||||
link.addEventListener('click', function() {
|
||||
userDropdownModal.classList.remove('active');
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user