<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h2{
display: flex;
justify-content: center;
align-items: center;
}
#main_table {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#main_table td, #main_table th {
border: 1px solid #ddd;
padding: 8px;
}
#main_table tr:nth-child(even){background-color: #f2f2f2;}
#main_table tr:hover {background-color: #ddd;}
#main_table th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<h2>Live Face Attendance</h2>
<table id ="main_table" style="width:100%">
<tr>
<th>Name</th>
<th>Time</th>
</tr>
</table>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.2.2/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/8.2.2/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.2/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.2/firebase-database.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
//paste your configrations here
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
var d = new Date();
var datestring = d.getFullYear()+"-"+
("0"+(d.getMonth()+1)).slice(-2)+ "-"+
("0" + d.getDate()).slice(-2) ;
var refR = firebase.database().ref().child(datestring);
refR.on("child_added",snap=>{
var name = snap.child("Name").val();
var time = snap.child("Time").val();
//console.log(name);
var table = document.getElementById("main_table");
var row = table.insertRow(-1);
var cell1 = row.insertCell(-1);
var cell2 = row.insertCell(-1);
cell1.innerHTML = name;
cell2.innerHTML = time;
});
</script>
</body>
</html>
