SecureTimePro/index.html at main · harshareddy832/SecureTimePro · 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
{% extends "base.html" %}
{% block content %}
<div class="card">
    <div style="text-align: center; margin-bottom: 30px;">
        <h2>🕐 SecureTime Pro Dashboard</h2>
        <p style="color: #666;">Simple, reliable employee time tracking</p>
        <div id="status"></div>
    </div>

    <div class="grid">
        <div style="background: rgba(102,126,234,0.1); padding: 30px; border-radius: 16px; text-align: center;">
            <div style="font-size: 48px; margin-bottom: 15px;">🕐</div>
            <h3>Time Clock</h3>
            <p style="color: #666; margin-bottom: 20px;">Quick & secure clock in/out</p>
            <a href="/timeclock" class="btn">Use Time Clock</a>
        </div>

        <div style="background: rgba(40,167,69,0.1); padding: 30px; border-radius: 16px; text-align: center;">
            <div style="font-size: 48px; margin-bottom: 15px;">👥</div>
            <h3>Employees</h3>
            <p style="color: #666; margin-bottom: 20px;">Manage employee database</p>
            <a href="/employees" class="btn">View Employees</a>
        </div>

        <div style="background: rgba(118,75,162,0.1); padding: 30px; border-radius: 16px; text-align: center;">
            <div style="font-size: 48px; margin-bottom: 15px;">📊</div>
            <h3>Reports</h3>
            <p style="color: #666; margin-bottom: 20px;">Time tracking reports</p>
            <a href="/reports" class="btn">View Reports</a>
        </div>
    </div>

    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 30px;">
        <div style="text-align: center; padding: 20px; background: rgba(255,255,255,0.1); border-radius: 12px;">
            <div style="font-size: 36px; font-weight: 700; color: white;" id="total-employees">-</div>
            <div style="color: rgba(255,255,255,0.8); font-size: 14px;">Total Employees</div>
        </div>
        <div style="text-align: center; padding: 20px; background: rgba(255,255,255,0.1); border-radius: 12px;">
            <div style="font-size: 36px; font-weight: 700; color: white;" id="clocked-in">-</div>
            <div style="color: rgba(255,255,255,0.8); font-size: 14px;">Clocked In Today</div>
        </div>
        <div style="text-align: center; padding: 20px; background: rgba(255,255,255,0.1); border-radius: 12px;">
            <div style="font-size: 36px; font-weight: 700; color: white;" id="total-photos">-</div>
            <div style="color: rgba(255,255,255,0.8); font-size: 14px;">Training Photos</div>
        </div>
    </div>
</div>

<script>
function updateStatus() {
    fetch('/api/status').then(r => r.json()).then(data => {
        const status = document.getElementById('status');
        if (data.loaded) {
            status.innerHTML = '<div style="color: #28a745;">✅ ' + data.message + '</div>';
        } else {
            status.innerHTML = '<div style="color: #ffc107;">⏳ ' + data.message + '</div>';
        }
    });
}

function updateStats() {
    fetch('/api/stats').then(r => r.json()).then(data => {
        document.getElementById('total-employees').textContent = data.total_people || 0;
        document.getElementById('clocked-in').textContent = data.clocked_in_today || 0;
        document.getElementById('total-photos').textContent = data.total_images || 0;
    });
}

setInterval(updateStatus, 2000);
setInterval(updateStats, 5000);
updateStatus();
updateStats();
</script>
{% endblock %}