-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathkeyword.html
More file actions
140 lines (112 loc) · 4.1 KB
/
keyword.html
File metadata and controls
140 lines (112 loc) · 4.1 KB
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
134
135
136
137
138
139
140
<!-- Tailwind CSS排版改進 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Keyword Stats</title>
<!-- Tailwind CDN -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-900 text-gray-100 min-h-screen p-6">
<div class="max-w-5xl mx-auto space-y-8">
<h1 class="text-3xl font-bold text-center">📊 Keyword Stats</h1>
<!-- Top 10 -->
<div class="bg-gray-800 rounded-2xl shadow-lg p-6">
<h2 class="text-xl font-semibold text-red-400 mb-4">🔥 Top 10 關鍵字</h2>
<ul id="top10" class="space-y-2"></ul>
</div>
<!-- All keywords -->
<div class="bg-gray-800 rounded-2xl shadow-lg p-6">
<h2 class="text-xl font-semibold text-blue-400 mb-4">全部關鍵字</h2>
<ul id="all" class="space-y-1 max-h-[400px] overflow-y-auto pr-2"></ul>
</div>
</div>
<script>
const top10El = document.getElementById('top10');
const allEl = document.getElementById('all');
const evt = new EventSource('http://192.168.0.102:3332/status/keyword');
evt.onmessage = (event) => {
const msg = JSON.parse(event.data);
console.log('Received Data Raw message:', event);
console.log('Received message:', msg);
if (msg.type === 'top10') {
top10El.innerHTML = '';
msg.data.forEach((item, index) => {
const li = document.createElement('li');
li.className =
"flex justify-between items-center bg-gray-700/60 rounded-lg px-4 py-2 text-red-300 font-semibold";
li.innerHTML = `
<span class="truncate">${index + 1}. ${item.message}</span>
<div class="flex items-center gap-2 ml-4">
<span class="text-red-400">${item.count}</span>
<button
class="copy-btn px-2 py-1 text-xs bg-red-500/80 hover:bg-red-500 text-white rounded"
data-text="${item.message}"
>
複製
</button>
</div>
`;
top10El.appendChild(li);
});
}
if (msg.type === 'all') {
allEl.innerHTML = '';
msg.data.forEach(item => {
const li = document.createElement('li');
li.className =
"flex justify-between items-center bg-gray-700/40 rounded-md px-3 py-1 text-sm";
li.innerHTML = `
<span class="truncate">${item.message}</span>
<div class="flex items-center gap-2 ml-4">
<span class="text-gray-300">${item.count}</span>
<button
class="copy-btn px-2 py-1 text-xs bg-gray-600 hover:bg-gray-500 text-white rounded"
data-text="${item.message}"
>
複製
</button>
</div>
`;
allEl.appendChild(li);
});
}
};
function copyText(text) {
if (navigator.clipboard) {
navigator.clipboard.writeText(text).catch(() => fallbackCopy(text));
} else {
fallbackCopy(text);
}
}
function fallbackCopy(text) {
const textarea = document.createElement("textarea");
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
try {
document.execCommand("copy");
console.log("已複製 (fallback)");
} catch (err) {
console.error("複製失敗:", err);
}
document.body.removeChild(textarea);
}
document.addEventListener("click", async (e) => {
if (e.target.classList.contains("copy-btn")) {
const text = e.target.dataset.text;
try {
await navigator.clipboard.writeText(text);
e.target.textContent = "已複製";
setTimeout(() => (e.target.textContent = "複製"), 1000);
} catch (err) {
e.target.textContent = "失敗 Fallback";
console.warn("Clipboard API failed, using fallback:", err);
setTimeout(() => (e.target.textContent = "複製"), 1000);
fallbackCopy(text);
}
}
});
</script>
</body>
</html>