-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathabsen.html
133 lines (102 loc) · 4.61 KB
/
absen.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>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.26/webcam.min.js" ></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
<style>
#map { height: 180px; }
</style>
</head>
<body>
<div id="kamera"></div>
<input type="hidden" id="lat">
<input type="hidden" id="lng">
<div id="map"></div>
<div class="text-center">
<a href="#" id="tombol_masuk" class="btn btn-block btn-primary" onclick="proses_masuk()">Absen Masuk</a>
<a href="#" id="tombol_pulang" class="btn btn-block btn-warning" onclick="proses_pulang()">Absen Pulang</a>
</div>
<audio id="notifikasi_in">
<source src="audio/absen_masuk.mp3" type="audio/mpeg">
</audio>
<audio id="notifikasi_out">
<source src="audio/absen_pulang.mp3" type="audio/mpeg">
</audio>
<nav class="navbar navbar-dark bg-info navbar-expand fixed-bottom d-md-none d-lg-none d-xl-none">
<ul class="navbar-nav nav-justified w-100">
<li class="nav-item">
<a href="home.html" class="nav-link">
<svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-house" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M2 13.5V7h1v6.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V7h1v6.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5zm11-11V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
<path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"/>
</svg>
</a>
</li>
<li class="nav-item">
<a href="absen.html" class="nav-link">
<svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 24 24" fill="yellow"><title>camera-iris</title><path d="M13.73,15L9.83,21.76C10.53,21.91 11.25,22 12,22C14.4,22 16.6,21.15 18.32,19.75L14.66,13.4M2.46,15C3.38,17.92 5.61,20.26 8.45,21.34L12.12,15M8.54,12L4.64,5.25C3,7 2,9.39 2,12C2,12.68 2.07,13.35 2.2,14H9.69M21.8,10H14.31L14.6,10.5L19.36,18.75C21,16.97 22,14.6 22,12C22,11.31 21.93,10.64 21.8,10M21.54,9C20.62,6.07 18.39,3.74 15.55,2.66L11.88,9M9.4,10.5L14.17,2.24C13.47,2.09 12.75,2 12,2C9.6,2 7.4,2.84 5.68,4.25L9.34,10.6L9.4,10.5Z" /></svg>
</a>
</li>
<li class="nav-item">
<a href="profil.html" class="nav-link">
<svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-person" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0zM8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm6 5c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
</svg>
</a>
</li>
</ul>
</nav>
<script>
var notifikasi_in = document.getElementById("notifikasi_in");
var notifikasi_out = document.getElementById("notifikasi_out");
function proses_masuk(){
notifikasi_in.play();
}
function proses_pulang(){
notifikasi_out.play();
}
//Menampilkan Kamera
Webcam.set({
width: 600,
height: 240,
dest_width: 640,
dest_height: 480,
image_format: 'jpeg',
jpeg_quality: 90,
force_flash: false
});
Webcam.attach( '#kamera' );
//Akhir menampilkan kamera
//Mendapatkan lokasi terkini
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(lokasi_sukses, lokasi_gagal);
}
var lat = document.getElementById("lat");
var lng = document.getElementById("lng");
function lokasi_sukses(lokasi){
lat.value = lokasi.coords.latitude;
lng.value = lokasi.coords.longitude;
var map = L.map('map').setView([lokasi.coords.latitude, lokasi.coords.longitude], 16);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
var marker = L.marker([lokasi.coords.latitude, lokasi.coords.longitude]).addTo(map);
//RADIUS KANTOR
var lat_kantor = lokasi.coords.latitude;
var lng_kantor = lokasi.coords.longitude;
var circle = L.circle([lat_kantor, lng_kantor], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 50
}).addTo(map);
}
function lokasi_gagal(){
}
</script>
</body>
</html>