static/timeVisualizer.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

export function initTimeVisualizer(containerId) {
    const grid = document.createElement('div');
    grid.className = 'grid';
    document.getElementById(containerId).appendChild(grid);

    function updateTime() {
        grid.innerHTML = '';
        const now = new Date();
        const hours = now.getHours();
        const minutes = now.getMinutes();

        for (let i = 0; i < 24; i++) {
            const cell = document.createElement('div');
            cell.className = 'cell';
            
            if (i >= 20 || i < 4) cell.classList.add('sleep');
            if (i < hours) cell.classList.add('past');
            
            if (i === hours) {
                cell.classList.add('current');
                const fillPercentage = (minutes / 60) * 100;
                cell.style.setProperty('--fill', `${fillPercentage}%`);
                const line = document.createElement('div');
                line.className = 'timeline';
                line.style.left = `calc(${fillPercentage}% - 1px)`;
                cell.appendChild(line);
            }
            
            grid.appendChild(cell);
        }
    }

    updateTime();
    setInterval(updateTime, 60000);
}