113 lines
3.2 KiB
JavaScript
113 lines
3.2 KiB
JavaScript
const contentContainer = document.getElementById('content');
|
|
|
|
const swapButton = document.getElementById('swap');
|
|
const ageElement = document.getElementById('age');
|
|
const points = document.getElementById('points');
|
|
|
|
const box = document.getElementById('box');
|
|
const boxPoints = document.querySelector('#points span');
|
|
|
|
let bonusPoints = Number(localStorage.getItem('points') ?? 0);
|
|
let currentTheme = localStorage.getItem('theme') ?? 'light';
|
|
|
|
const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms * 1000))
|
|
async function updateOpacity(block, show) {
|
|
if (!show) {
|
|
block.style.opacity = '0';
|
|
await wait(0.3);
|
|
block.style.display = 'none';
|
|
} else {
|
|
block.style.display = 'flex';
|
|
await wait(0.3);
|
|
block.style.opacity = '1';
|
|
}
|
|
|
|
block.classList.toggle('visible');
|
|
}
|
|
|
|
function toggleTheme() {
|
|
document.body.classList.toggle('dark');
|
|
currentTheme = currentTheme === 'light' ? 'dark' : 'light';
|
|
localStorage.setItem('theme', currentTheme);
|
|
}
|
|
|
|
function resetPoints() {
|
|
localStorage.removeItem('points');
|
|
bonusPoints = 0;
|
|
boxPoints.textContent = bonusPoints;
|
|
}
|
|
|
|
function swapContent() {
|
|
if (window.innerWidth < 768) {
|
|
contentContainer.style.flexDirection =
|
|
contentContainer.style.flexDirection === 'column-reverse' ? 'column' : 'column-reverse';
|
|
} else {
|
|
contentContainer.style.flexDirection =
|
|
contentContainer.style.flexDirection === 'row-reverse' ? 'row' : 'row-reverse';
|
|
}
|
|
}
|
|
|
|
// listeners
|
|
if (box) box.addEventListener('click', () => {
|
|
bonusPoints++;
|
|
localStorage.setItem('points', bonusPoints);
|
|
boxPoints.textContent = bonusPoints;
|
|
})
|
|
|
|
window.onload = async () => {
|
|
if (boxPoints) boxPoints.textContent = bonusPoints;
|
|
if (box) await updateOpacity(box, true);
|
|
}
|
|
|
|
// update theme
|
|
if (currentTheme === 'dark')
|
|
document.body.classList.add('dark');
|
|
|
|
// update age
|
|
if (ageElement) {
|
|
const difference = (Date.now() - 1182722400000) / (1000 * 60 * 60 * 24 * 365);
|
|
ageElement.innerText = difference.toFixed(4);
|
|
}
|
|
|
|
swapButton.addEventListener('click', swapContent);
|
|
|
|
const accordions = document.querySelectorAll('.accordion');
|
|
|
|
function closeOtherAccordions(accordion) {
|
|
accordions.forEach(acc => {
|
|
if (acc !== accordion)
|
|
acc.classList.remove('active');
|
|
});
|
|
}
|
|
|
|
function openAccordion(accordion) {
|
|
closeOtherAccordions(accordion);
|
|
accordion.classList.toggle('active');
|
|
}
|
|
|
|
accordions.forEach(accordion => {
|
|
accordion.addEventListener('click', () => openAccordion(accordion));
|
|
});
|
|
|
|
// Hide or show columns
|
|
const columns = document.querySelectorAll('#content > div');
|
|
|
|
function showColumn(event, column) {
|
|
// Check if the click was on actual column, not on its children
|
|
if (event.target !== column) return;
|
|
|
|
columns.forEach(col => {
|
|
if (col === column) return;
|
|
|
|
col.dataset.closed = 'true';
|
|
});
|
|
|
|
column.dataset.closed = column.dataset.closed === 'true' ? 'false' : 'true';
|
|
}
|
|
|
|
// Apply only to desktop
|
|
if (window.innerWidth > 768) {
|
|
columns.forEach(column => {
|
|
column.addEventListener('click', (event) => showColumn(event, column));
|
|
});
|
|
} |