Update live.html

itzfew · Feb 2, 2025 · ea1a2e9 · ea1a2e9
1 parent 616dd79
commit ea1a2e9
Showing 1 changed file with 85 additions and 23 deletions.
diff --git a/live.html b/live.html
@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Live Visitor Tracker</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
     <style>
         body {
             font-family: Arial, sans-serif;
@@ -50,13 +51,6 @@
             background-color: #45a049;
         }
 
-        .user {
-            margin-bottom: 10px;
-            padding: 5px;
-            background-color: #f0f0f0;
-            border-radius: 5px;
-        }
-
         #joinButton,
         #leaveButton {
             margin-top: 20px;
@@ -68,8 +62,52 @@
             margin-top: 20px;
         }
 
-        #activeUsers .user {
+        #activeUsers {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 20px;
+        }
+
+        .user {
+            display: flex;
+            align-items: center;
             background-color: #d9f9d9;
+            padding: 10px;
+            border-radius: 10px;
+            width: calc(50% - 10px);
+            box-sizing: border-box;
+        }
+
+        .user .profile-icon {
+            font-size: 30px;
+            color: #0073e6;
+            margin-right: 10px;
+            border-radius: 50%;
+            padding: 10px;
+            background-color: #e0f7fa;
+        }
+
+        .user .user-info {
+            flex: 1;
+        }
+
+        .user-name {
+            font-weight: bold;
+            margin-bottom: 5px;
+        }
+
+        .join-time {
+            color: gray;
+        }
+
+        #counter {
+            font-size: 16px;
+            font-weight: bold;
+        }
+
+        #userGreeting {
+            font-size: 18px;
+            margin-bottom: 20px;
         }
     </style>
 </head>
@@ -171,9 +209,9 @@ <h2>Active Users:</h2>
         function signupUser(name, email, password) {
             auth.createUserWithEmailAndPassword(email, password).then((userCredential) => {
                 userId = userCredential.user.uid;
-                userName = name;  // Saving the name correctly
-                userEmail = email; // Saving the email
-                saveUserDetails(name, email);  // Save name and email to Firebase
+                userName = name;
+                userEmail = email;
+                saveUserDetails(name, email);
                 showAppContent();
             }).catch((error) => {
                 alert(error.message);
@@ -193,8 +231,8 @@ <h2>Active Users:</h2>
         function getUserDetails() {
             firebase.database().ref('/userDetails/' + userId).once('value').then(snapshot => {
                 if (snapshot.exists()) {
-                    userName = snapshot.val().name;  // Retrieving the saved name
-                    userEmail = snapshot.val().email;  // Retrieving the saved email
+                    userName = snapshot.val().name;
+                    userEmail = snapshot.val().email;
                     showAppContent();
                 }
             });
@@ -203,7 +241,7 @@ <h2>Active Users:</h2>
         function saveUserDetails(name, email) {
             firebase.database().ref('/userDetails/' + userId).set({
                 name: name,
-                email: email,  // Save the email along with name
+                email: email,
             });
 
             // Create a user entry in the users node to track session status
@@ -233,34 +271,47 @@ <h2>Active Users:</h2>
         });
 
         function joinUser(userId) {
+            let joinTime = firebase.database.ServerValue.TIMESTAMP;
             let userStatus = {
                 state: 'online',
-                joinTime: firebase.database.ServerValue.TIMESTAMP,
-                lastActivity: firebase.database.ServerValue.TIMESTAMP,
+                joinTime: joinTime,
+                lastActivity: joinTime,
             };
 
             userRef = database.ref('/users/' + userId);
             userRef.update(userStatus).then(() => {
                 console.log("User joined: " + userId);
+                saveUserHistory(userId, 'join', joinTime);
                 startTimer(userId);
                 updateButtons(true);
             });
         }
 
         function leaveUser(userId) {
+            let leaveTime = firebase.database.ServerValue.TIMESTAMP;
             let userStatus = {
                 state: 'offline',
-                lastActivity: firebase.database.ServerValue.TIMESTAMP,
+                lastActivity: leaveTime,
             };
 
-            // Only update state and lastActivity, keep name and email intact
             userRef.update(userStatus).then(() => {
                 console.log("User left: " + userId);
+                saveUserHistory(userId, 'leave', leaveTime);
                 stopTimer();
                 updateButtons(false);
             });
         }
 
+        function saveUserHistory(userId, action, timestamp) {
+            const historyRef = database.ref('/usersHistory/' + userId + '/' + action);
+            historyRef.push({
+                name: userName,
+                email: userEmail,
+                timestamp: timestamp,
+                date: new Date().toLocaleDateString(),
+            });
+        }
+
         function updateButtons(isJoined) {
             if (isJoined) {
                 document.getElementById('joinButton').style.display = 'none';
@@ -284,14 +335,25 @@ <h2>Active Users:</h2>
             database.ref('/users').orderByChild('state').equalTo('online').on('value', snapshot => {
                 snapshot.forEach(childSnapshot => {
                     let userId = childSnapshot.key;
-                    // Fetch the name from userDetails node
+                    // Fetch the name and joining time from userDetails node
                     firebase.database().ref('/userDetails/' + userId).once('value').then(userSnapshot => {
-                        let userName = userSnapshot.val().name; // Retrieve user name
-                        if (!document.getElementById(userId)) {  // Ensure no duplicate entry
+                        let userName = userSnapshot.val().name;
+                        let joinTime = childSnapshot.val().joinTime;
+
+                        let joinTimeFormatted = new Date(joinTime).toLocaleTimeString();
+
+                        if (!document.getElementById(userId)) {
                             let userDiv = document.createElement('div');
                             userDiv.className = 'user';
-                            userDiv.id = userId; // Set userId as ID to avoid duplicates
-                            userDiv.innerText = `${userName}`;
+                            userDiv.id = userId;
+
+                            userDiv.innerHTML = `
+                                <div class="profile-icon"><i class="fas fa-user-circle"></i></div>
+                                <div class="user-info">
+                                    <div class="user-name">${userName}</div>
+                                    <div class="join-time">Joined at: ${joinTimeFormatted}</div>
+                                </div>
+                            `;
                             activeUsersContainer.appendChild(userDiv);
                         }
                     });