school-management-system/index.script at main · errorcodegh/school-management-system · GitHub

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

        // CLOCK SCRIPT
        function updateClock() {
            const now = new Date();
            document.getElementById("clock").innerText = now.toLocaleTimeString();
        }
        setInterval(updateClock, 1000);
        updateClock();

        // BLUR PAGE BY DEFAULT
        document.getElementById("pageContent").classList.add("blurred");

        // SHOW LOGIN POPUP
        function openLogin() {
            document.getElementById("welcomePopup").style.display = "none";
            document.getElementById("loginPopup").style.display = "flex";
        }

        // CLOSE LOGIN (UNBLUR PAGE)
        function closeLogin() {
            document.getElementById("loginPopup").style.display = "none";
            document.getElementById("pageContent").classList.remove("blurred");
        }
    </script>


    <script>
const ctx = document.getElementById('schoolChart');

new Chart(ctx, {
    type: 'bar',
    data: {
        labels: [
            'Students',
            'Teachers',
            'Admins',
            'Dismissed',
            'Admissions'
        ],
        datasets: [{
            label: 'Records',
            data: [1200, 85, 12, 30, 220],
            borderWidth: 1,
            backgroundColor: [
                'rgba(0, 45, 114, 0.8)',
                'rgba(0, 110, 180, 0.8)',
                'rgba(20, 140, 200, 0.8)',
                'rgba(200, 50, 50, 0.8)',
                'rgba(0, 180, 120, 0.8)'
            ]
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            y: {
                beginAtZero: true,
                ticks: { color: '#333' }
            },
            x: {
                ticks: { color: '#333' }
            }
        },
        plugins: {
            legend: { display: false },
            tooltip: {
                backgroundColor: '#002d72',
                titleColor: '#fff',
                bodyColor: '#fff'
            }
        }
    }
});
</script>


<script>
const counters = document.querySelectorAll('.counter');
const speed = 150; // smaller = faster

counters.forEach(counter => {
    const updateCount = () => {
        const target = +counter.getAttribute('data-target');
        const current = +counter.innerText;
        const increment = target / speed;

        if (current < target) {
            counter.innerText = Math.ceil(current + increment);
            requestAnimationFrame(updateCount);
        } else {
            counter.innerText = target;
        }
    };

    updateCount();
});