OFS FUTSAL
Championship Center
// Add enhanced input focus effects
const inputs = document.querySelectorAll('.form-control');
inputs.forEach(input => {
input.addEventListener('focus', function() {
this.parentElement.classList.add('input-focused');
});
input.addEventListener('blur', function() {
this.parentElement.classList.remove('input-focused');
});
});
// Add CSS for enhanced focus effects
const focusStyle = document.createElement('style');
focusStyle.textContent = `
.input-focused .input-group-text {
border-color: var(--accent-color);
background: rgba(59, 130, 246, 0.05);
color: var(--accent-color);
}
/* Subtle pulse animation for focus */
.form-control:focus {
animation: pulseBorder 2s infinite;
}
@keyframes pulseBorder {
0%, 100% { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }
50% { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); }
}
`;
document.head.appendChild(focusStyle);
// Smooth animation for form elements
document.addEventListener('DOMContentLoaded', function() {
const formGroups = document.querySelectorAll('.form-group');
formGroups.forEach((group, index) => {
group.style.animation = `fadeInUp 0.5s ease-out ${index * 0.1}s both`;
});
});
// Add CSS for animations
const animationStyle = document.createElement('style');
animationStyle.textContent = `
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.form-group {
opacity: 0;
animation-fill-mode: both;
}
`;
document.head.appendChild(animationStyle);
