-
Notifications
You must be signed in to change notification settings - Fork 0
/
Attandance.html
133 lines (121 loc) · 3.91 KB
/
Attandance.html
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
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HostelPro</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
/* Add a border with gradient background to the whole page */
background: linear-gradient(45deg, #687c94, #ffffff, #687c94);
border: 5px solid #333;
box-sizing: border-box;
}
/* Styles for the menu button */
.menu-toggle {
position: fixed;
top: 20px;
left: 10px;
background-color: transparent;
border: none;
font-size: 24px;
cursor: pointer;
z-index: 1;
}
/* Styles for the sidebar menu */
.sidebar {
position: fixed;
top: 80px;
left: -250px;
width: 250px;
height: 100vh;
padding: 15px;
background-color: #f8f9fa;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
transition: left 0.3s ease;
}
.sidebar.active {
left: 0;
}
.navbar-nav {
list-style: none;
padding: 0;
margin: 0;
}
.nav-item {
margin-bottom: 10px;
}
.nav-link {
display: block;
text-decoration: none;
color: #333;
font-size: 18px;
padding: 8px 15px;
border-radius: 5px;
transition: background-color 0.2s ease;
}
.nav-link:hover {
background-color: #dcdcdc;
}
/* Add styles for the active link */
.nav-item.active .nav-link {
color: #ff8c00;
font-weight: bold;
background-color: #e9ecef;
}
</style>
</head>
<body>
<button class="menu-toggle" id="menu-button">☰ Menu</button>
<nav class="sidebar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="airoom.html">Ai Roommate Booking</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Network.html">Students Network</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Attandance.html">Attandance</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Leave.html">Leave</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Navigation.html">Indoor Navigation</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="Laundry.html">Laundry</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Chatbot.html">Chatbot</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Mess.html">Mess</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Complaints.html">Complaints</a>
</li>
</ul>
</nav>
<div>
<video id="videoElement" width="640" height="480" autoplay></video>
</div>
<script>
// Access the webcam feed and display it in the video element
navigator.mediaDevices.getUserMedia({ video: true })
.then(function (stream) {
var videoElement = document.getElementById('videoElement');
videoElement.srcObject = stream;
})
.catch(function (err) {
console.log('Error accessing webcam:', err);
});
</script>
</body>
</html>