📄 Source: script.js
// script.js - Funcționalități interactive
// Sistem de teme
document.addEventListener('DOMContentLoaded', function() {
// Încărcare temă salvată
const savedTheme = localStorage.getItem('math-sequence-theme');
if (savedTheme) {
document.documentElement.setAttribute('data-theme', savedTheme);
} else {
document.documentElement.setAttribute('data-theme', 'light');
}
// Butoane schimbare temă
const themeBtns = document.querySelectorAll('.theme-btn');
themeBtns.forEach(btn => {
btn.addEventListener('click', function() {
const theme = this.getAttribute('data-theme');
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('math-sequence-theme', theme);
});
});
});
// Funcție pentru expand/collapse secvențe
function toggleSequence(button) {
const card = button.closest('.sequence-card');
const contentDiv = card.querySelector('.sequence-values');
const originalText = contentDiv.innerHTML;
// Verificăm dacă este deja expandat
if (button.textContent === '📋 Afișează toate') {
// Pentru a afișa toate, trebuie să recurgem la reîncărcarea datelor originale
// Sau pur și simplu eliminăm limitarea de afișare
// Deoarece datele sunt deja încărcate complet în PHP, putem doar să modificăm stilul
const allValues = contentDiv.getAttribute('data-full') || originalText;
if (!contentDiv.getAttribute('data-full')) {
contentDiv.setAttribute('data-full', originalText);
}
contentDiv.style.maxHeight = 'none';
button.textContent = '📖 Arată mai puțin';
} else {
contentDiv.style.maxHeight = '150px';
button.textContent = '📋 Afișează toate';
}
}
// Adăugare efect de fade-in pentru carduri
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
observer.unobserve(entry.target);
}
});
}, observerOptions);
document.querySelectorAll('.sequence-card').forEach(card => {
card.style.opacity = '0';
card.style.transform = 'translateY(20px)';
card.style.transition = 'all 0.5s ease';
observer.observe(card);
});
// Validare formular în timp real
const numberInput = document.getElementById('number');
if (numberInput) {
numberInput.addEventListener('input', function(e) {
// Doar feedback vizual, nu validare strictă
const value = this.value;
const isValid = /^[0-9+\-*\/\(\)\.eEpiπ\s]+$/.test(value);
if (value && !isValid) {
this.style.borderColor = '#ef4444';
} else {
this.style.borderColor = 'var(--input-border)';
}
});
}
// Animație pentru bara de statistici
function animateValue(element, start, end, duration) {
if (!element) return;
const range = end - start;
const increment = range / (duration / 16);
let current = start;
const timer = setInterval(() => {
current += increment;
if (current >= end) {
current = end;
clearInterval(timer);
}
element.textContent = Math.round(current);
}, 16);
}
// Dacă există elemente noi încărcate, animăm
const totalElementsSpan = document.getElementById('totalElements');
if (totalElementsSpan && totalElementsSpan.textContent !== '0') {
const finalValue = parseInt(totalElementsSpan.textContent);
totalElementsSpan.textContent = '0';
animateValue(totalElementsSpan, 0, finalValue, 800);
}
// Efect de tipărire pentru secvențe (decorativ)
function addTypingEffect() {
const sequences = document.querySelectorAll('.sequence-values');
sequences.forEach(seq => {
const text = seq.innerHTML;
if (text && !seq.classList.contains('typed')) {
seq.classList.add('typed');
// Optional: poți adăuga un efect de cursor
}
});
}
setTimeout(addTypingEffect, 500);
// Salvare preferințe utilizator în localStorage
function saveUserPreference() {
const lastNumber = document.getElementById('number')?.value;
if (lastNumber) {
localStorage.setItem('last-number', lastNumber);
}
}
window.addEventListener('beforeunload', saveUserPreference);
// Încărcare ultimul număr folosit
const lastNumber = localStorage.getItem('last-number');
if (lastNumber && document.getElementById('number') && !document.getElementById('number').value) {
document.getElementById('number').value = lastNumber;
}
← Back