-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
116 lines (105 loc) · 6.02 KB
/
index.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
<html>
<head>
<title>🔔 Jothon Doorbell</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="container">
<div id="alert">Click anywhere to allow sound play</div>
<h2 id="current-time">現在時間：
<span>00:00</span>
</h2>
<h1 id="last-message">上一次門鈴：
<span></span>
</h1>
<div id="description">
<div style="padding: 1rem;">系統每秒會查詢 ronnywang 的 <a href="https://g0v-slack-archive.g0v.ronny.tw/" target="_blank">g0v slack archive</a> API 來檢查是否有包含「開門」的新訊息（預設監控 #Jothon）。當偵測到這類訊息時，會觸發視覺閃爍效果、馬力歐金幣音效，並在瀏覽器發送通知。</div>
<div style="text-align: right; padding: 1rem; padding-top: 0;">
<a href="https://github.com/g0v/jothon-doorbell" target="_blank"><svg height="32" aria-hidden="true" viewBox="0 0 24 24" version="1.1" width="32" data-view-component="true" class="octicon octicon-mark-github v-align-middle">
<path d="M12.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z"></path>
</svg></a>
</div>
</div>
</div>
</body>
<script>
const currentTime = document.querySelector("#current-time span");
const lastMessage = document.querySelector("#last-message span");
const audio = new Audio('Mario Coin.wav');
// Get channel from URL parameter, default to Jothon channel
const urlParams = new URLSearchParams(window.location.search);
const channel = urlParams.get('channel') || 'C0385B90D';
// Update time
currentTime.textContent = new Date().toLocaleTimeString();
setInterval(() => {
currentTime.textContent = new Date().toLocaleTimeString();
}, 100);
document.querySelector("#alert").addEventListener("click", () => {
document.querySelector("#alert").style.display = "none";
});
// Add notification request
let notificationPermission = false;
document.querySelector("#alert").addEventListener("click", async () => {
document.querySelector("#alert").style.display = "none";
// Request notification permission
if ("Notification" in window) {
const permission = await Notification.requestPermission();
notificationPermission = permission === "granted";
}
});
// Add visibility change handling
document.addEventListener('visibilitychange', function() {
if (document.hidden) {
// Tab is hidden
document.title = "🔔 Jothon Doorbell (Background)";
} else {
// Tab is visible
document.title = "🔔 Jothon Doorbell";
}
});
// Fetch messages
async function checkNewMessages() {
try {
const response = await fetch(`https://g0v-slack-archive.g0v.ronny.tw/index/getmessage?channel=${channel}`);
const data = await response.json();
if (data.messages && data.messages.length > 0) {
const message = data.messages[0].text;
if (message.includes("開門")) {
if (lastMessage.dataset.lastTime !== data.messages[0].ts && data.messages[0].ts > (Date.now() / 1000) - 10) {
const time = new Date(data.messages[0].ts * 1000).toLocaleTimeString();
lastMessage.textContent = `${message} @ ${time}`;
lastMessage.dataset.lastTime = data.messages[0].ts;
document.body.classList.add("blink");
setTimeout(() => {
document.body.classList.remove("blink");
}, 10000);
audio.play().catch(e => console.log('Audio play failed:', e));
// Send notification
if (notificationPermission) {
new Notification("門鈴響了！", {
body: `${message} @ ${time}`,
icon: "/favicon.ico" // Add your favicon path here
});
}
// Change title to alert user if tab is not active
if (document.hidden) {
document.title = "🚨 門鈴響了！";
// Reset title when tab becomes active again
const resetTitle = function() {
document.title = "Jothon Doorbell";
document.removeEventListener('visibilitychange', resetTitle);
};
document.addEventListener('visibilitychange', resetTitle);
}
}
}
}
} catch (error) {
console.error('Error fetching messages:', error);
}
}
// Check for new messages every second
setInterval(checkNewMessages, 1000);
</script>
</html>