SWEN-project/history.html at main · pk1495/SWEN-project · 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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PhotoID - History</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="nav">
        <a href="take_a_photo.html">← Back</a>
        <div class="logo">📸 PhotoID</div>
    </div>
    <div class="container">
        <h2 style="text-align: center; margin-bottom: 30px;">Photo History</h2>
        <div id="history-container">
            <!-- History items will be populated by JavaScript -->
        </div>
        <div style="text-align: center; margin-top: 30px;">
            <a href="take_a_photo.html" class="btn">Take New Photo</a>
            <button class="btn btn-secondary" onclick="clearHistory()">Clear History</button>
        </div>
    </div>

    <script>
        // Check if user is logged in
        if (!localStorage.getItem('currentUser')) {
            window.location.href = 'index.html';
        }

        function loadHistory() {
            const photoHistory = JSON.parse(localStorage.getItem('photoHistory') || '[]');
            const currentUser = localStorage.getItem('currentUser');
            const container = document.getElementById('history-container');

            // Filter history for current user
            const userHistory = photoHistory.filter(item => item.user === currentUser);

            if (userHistory.length === 0) {
                container.innerHTML = `
                    <div style="text-align: center; padding: 40px;">
                        <div style="font-size: 48px; margin-bottom: 20px;">📷</div>
                        <p style="font-size: 18px; color: #666;">No photos taken yet!</p>
                        <p style="font-size: 16px; color: #999;">Go take some photos to see your history here.</p>
                    </div>
                `;
                return;
            }

            container.innerHTML = userHistory.map(item => `
                <div class="history-item">
                    <img src="${item.image}" class="history-thumbnail" alt="Photo" onclick="showFullImage('${item.image}')">
                    <div style="flex: 1;">
                        <div style="font-size: 18px; margin-bottom: 5px; font-weight: bold;">${item.result.split('!')[0]}!</div>
                        <div style="font-size: 14px; color: #666; margin-bottom: 3px;">${item.result.split('!')[1] || ''}</div>
                        <div style="font-size: 12px; color: #999;">${item.date}</div>
                    </div>
                    <button class="btn-small" onclick="deleteHistoryItem(${item.id})">Delete</button>
                </div>
            `).join('');
        }

        function showFullImage(imageSrc) {
            // Create modal to show full image
            const modal = document.createElement('div');
            modal.style.cssText = `
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,0.8);
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 1000;
                cursor: pointer;
            `;

            const img = document.createElement('img');
            img.src = imageSrc;
            img.style.cssText = `
                max-width: 90%;
                max-height: 90%;
                border-radius: 10px;
                box-shadow: 0 4px 20px rgba(0,0,0,0.5);
            `;

            modal.appendChild(img);
            document.body.appendChild(modal);

            modal.onclick = () => {
                document.body.removeChild(modal);
            };
        }

        function deleteHistoryItem(id) {
            if (confirm('Are you sure you want to delete this photo?')) {
                let photoHistory = JSON.parse(localStorage.getItem('photoHistory') || '[]');
                photoHistory = photoHistory.filter(item => item.id !== id);
                localStorage.setItem('photoHistory', JSON.stringify(photoHistory));
                loadHistory();
            }
        }

        function clearHistory() {
            if (confirm('Are you sure you want to clear all your photo history? This cannot be undone.')) {
                const photoHistory = JSON.parse(localStorage.getItem('photoHistory') || '[]');
                const currentUser = localStorage.getItem('currentUser');
                const otherUsersHistory = photoHistory.filter(item => item.user !== currentUser);
                localStorage.setItem('photoHistory', JSON.stringify(otherUsersHistory));
                loadHistory();
            }
        }

        // Load history when page loads
        document.addEventListener('DOMContentLoaded', loadHistory);
    </script>
</body>
</html>