2025-04-01 10:36:26 +08:00
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
2025-04-01 11:39:14 +08:00
|
|
|
const cardContainer = document.querySelector('.card-container');
|
|
|
|
const flipBtn = document.getElementById('flip-btn');
|
|
|
|
const colorOptions = document.querySelectorAll('.color-option');
|
2025-04-01 10:36:26 +08:00
|
|
|
|
2025-04-01 11:39:14 +08:00
|
|
|
// Set initial primary color
|
|
|
|
document.documentElement.style.setProperty('--primary-color', '#1a237e');
|
2025-04-01 10:36:26 +08:00
|
|
|
|
2025-04-01 11:39:14 +08:00
|
|
|
// Flip card functionality
|
|
|
|
flipBtn.addEventListener('click', function() {
|
|
|
|
cardContainer.classList.toggle('flipped');
|
2025-04-01 10:36:26 +08:00
|
|
|
});
|
|
|
|
|
2025-04-01 11:39:14 +08:00
|
|
|
// Color change functionality
|
|
|
|
colorOptions.forEach(option => {
|
|
|
|
option.addEventListener('click', function() {
|
|
|
|
const color = this.getAttribute('data-color');
|
|
|
|
document.documentElement.style.setProperty('--primary-color', color);
|
|
|
|
});
|
2025-04-01 10:36:26 +08:00
|
|
|
});
|
|
|
|
|
2025-04-01 11:39:14 +08:00
|
|
|
// Double click to flip card
|
|
|
|
cardContainer.addEventListener('dblclick', function() {
|
|
|
|
this.classList.toggle('flipped');
|
2025-04-01 10:36:26 +08:00
|
|
|
});
|
|
|
|
});
|