Skip to content

Commit 35a19bb

Browse files
CommandstoneCommandstone
authored
Create discordwebhook.html
1 parent 948751e commit 35a19bb

File tree

1 file changed

+335
-0
lines changed

1 file changed

+335
-0
lines changed

‎funny/discordwebhook.html‎

Lines changed: 335 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,335 @@
1+
<html lang="zh-CN"><head>
2+
<meta charset="UTF-8">
3+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
4+
<title>Discord Webhook 发送器</title>
5+
<script src="https://cdn.tailwindcss.com"></script>
6+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css" rel="stylesheet">
7+
<script>
8+
tailwind.config = {
9+
theme: {
10+
extend: {
11+
colors: {
12+
primary: {
13+
light: '#8EC5FC',
14+
DEFAULT: '#E0C3FC',
15+
dark: '#8EC5FC'
16+
},
17+
discord: {
18+
blue: '#5865F2',
19+
dark: '#2F3136',
20+
light: '#B9BBBE'
21+
}
22+
},
23+
fontFamily: {
24+
sans: ['Inter', 'system-ui', 'sans-serif']
25+
}
26+
}
27+
}
28+
}
29+
</script>
30+
<style type="text/tailwindcss">
31+
@layer utilities {
32+
.content-auto {
33+
content-visibility: auto;
34+
}
35+
.gradient-text {
36+
background-clip: text;
37+
-webkit-background-clip: text;
38+
color: transparent;
39+
background-image: linear-gradient(90deg, #8EC5FC, #E0C3FC);
40+
background-size: 200% auto;
41+
animation: gradientShift 4s ease infinite;
42+
}
43+
.gradient-border {
44+
position: relative;
45+
border: double 1px transparent;
46+
background-image: linear-gradient(#ffffff, #ffffff),
47+
linear-gradient(90deg, #8EC5FC, #E0C3FC);
48+
background-origin: border-box;
49+
background-clip: padding-box, border-box;
50+
}
51+
.btn-gradient {
52+
background-image: linear-gradient(90deg, #8EC5FC, #E0C3FC);
53+
transition: all 0.3s ease;
54+
}
55+
.btn-gradient:hover {
56+
background-image: linear-gradient(90deg, #74b0f5, #d0a8f8);
57+
transform: translateY(-2px);
58+
}
59+
.card-hover {
60+
transition: transform 0.3s ease, box-shadow 0.3s ease;
61+
}
62+
.card-hover:hover {
63+
transform: translateY(-3px);
64+
box-shadow: 0 10px 25px -5px rgba(142, 197, 252, 0.2), 0 8px 10px -6px rgba(142, 197, 252, 0.1);
65+
}
66+
}
67+
68+
@keyframes gradientShift {
69+
0% { background-position: 0% 50%; }
70+
50% { background-position: 100% 50%; }
71+
100% { background-position: 0% 50%; }
72+
}
73+
</style>
74+
</head>
75+
<body class="bg-gray-50 font-sans text-gray-800 min-h-screen flex flex-col">
76+
<div class="max-w-4xl mx-auto px-4 py-8 md:py-12 flex-grow">
77+
<header class="text-center mb-10">
78+
<div class="inline-flex items-center justify-center mb-4">
79+
<i class="fa fa-paper-plane text-primary-dark text-4xl mr-3 animate-pulse"></i>
80+
<h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold gradient-text">
81+
Discord Webhook 发送器
82+
</h1>
83+
</div>
84+
<p class="text-gray-600 max-w-2xl mx-auto">
85+
发送自定义文本到Discord频道，支持@everyone提及
86+
</p>
87+
</header>
88+
89+
<!-- 主要内容区 -->
90+
<main class="bg-white rounded-xl shadow-lg overflow-hidden card-hover mb-12">
91+
<div class="p-6 md:p-8">
92+
<!-- Webhook URL 输入 -->
93+
<div class="mb-8">
94+
<label for="webhookUrl" class="block text-sm font-medium text-gray-700 mb-2">
95+
Discord Webhook URL
96+
</label>
97+
<div class="relative">
98+
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
99+
<i class="fa fa-link text-gray-400"></i>
100+
</div>
101+
<input type="url" id="webhookUrl" placeholder="https://discord.com/api/webhooks/..." class="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-light focus:border-primary-light transition-all duration-300" required="">
102+
</div>
103+
<p class="mt-2 text-xs text-gray-500">
104+
从Discord服务器设置中获取的Webhook URL
105+
</p>
106+
</div>
107+
108+
109+
<div class="space-y-6 mb-8">
110+
<div>
111+
<label for="messageContent" class="block text-sm font-medium text-gray-700 mb-2">
112+
消息内容 <span class="text-primary-dark">(支持富文本)</span>
113+
</label>
114+
<textarea id="messageContent" rows="3" placeholder="输入消息内容，可使用@everyone等提及功能" class="block w-full px-3 py-3 gradient-border rounded-lg focus:ring-2 focus:ring-primary-light/30 transition-all duration-300" value="@everyone 紧急通知"></textarea>
115+
</div>
116+
117+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
118+
<div>
119+
<label for="errorType" class="block text-sm font-medium text-gray-700 mb-2">
120+
主题
121+
</label>
122+
<input type="text" id="errorType" placeholder="例如：测试" class="block w-full px-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-light focus:border-primary-light transition-all duration-300">
123+
</div>
124+
<div>
125+
<label for="errorTime" class="block text-sm font-medium text-gray-700 mb-2">
126+
发生时间
127+
</label>
128+
<input type="datetime-local" id="errorTime" class="block w-full px-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-light focus:border-primary-light transition-all duration-300">
129+
</div>
130+
</div>
131+
132+
<div>
133+
<label for="messageUsername" class="block text-sm font-medium text-gray-700 mb-2">
134+
发送者名称
135+
</label>
136+
<input type="text" id="messageUsername" placeholder="显示的发送者名称" class="block w-full px-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-light focus:border-primary-light transition-all duration-300" value="CST-Bot">
137+
</div>
138+
139+
<div>
140+
<label for="messageAvatar" class="block text-sm font-medium text-gray-700 mb-2">
141+
头像URL (可选)
142+
</label>
143+
<input type="url" id="messageAvatar" placeholder="发送者头像的图片URL" class="block w-full px-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-light focus:border-primary-light transition-all duration-300">
144+
</div>
145+
</div>
146+
147+
<!-- 发送按钮 - 渐变背景 -->
148+
<div class="flex flex-col sm:flex-row gap-4 justify-center mb-6">
149+
<button id="sendButton" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-lg shadow-sm text-gray-800
150+
btn-gradient focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-light
151+
w-full sm:w-auto">
152+
<i class="fa fa-paper-plane mr-2"></i>
153+
发送消息
154+
</button>
155+
<button id="clearButton" class="inline-flex items-center justify-center px-6 py-3 border border-gray-300 text-base font-medium rounded-lg shadow-sm text-gray-700 bg-white
156+
hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-light transition-all duration-300 w-full sm:w-auto">
157+
<i class="fa fa-eraser mr-2"></i>
158+
清空内容
159+
</button>
160+
</div>
161+
162+
<!-- 状态消息 -->
163+
<div id="statusMessage" class="hidden p-4 rounded-lg mb-4 transition-all duration-300"></div>
164+
</div>
165+
</main>
166+
167+
<!-- 示例区域 - 带渐变标题 -->
168+
<div class="bg-gray-50 border border-gray-200 rounded-xl p-6 card-hover">
169+
<h2 class="text-lg font-semibold mb-4 flex items-center gradient-text">
170+
<i class="fa fa-info-circle mr-2"></i>
171+
使用说明
172+
</h2>
173+
<div class="space-y-3 text-sm text-gray-600">
174+
<p>• 使用 <code class="bg-gray-200 px-1 py-0.5 rounded">@everyone</code> 或 <code class="bg-gray-200 px-1 py-0.5 rounded">@here</code> 提及所有人</p>
175+
<p>• 使用用户ID提及特定用户: <code class="bg-gray-200 px-1 py-0.5 rounded">&lt;@用户ID&gt;</code></p>
176+
<p>• 使用角色ID提及特定角色: <code class="bg-gray-200 px-1 py-0.5 rounded">&lt;@&amp;角色ID&gt;</code></p>
177+
<p>• 错误信息格式: <code class="bg-gray-200 px-1 py-0.5 rounded">服务器错误: [错误类型]，发生时间: [时间]</code></p>
178+
</div>
179+
</div>
180+
</div>
181+
182+
<!-- 页脚 - 带渐变的CST协会标识 -->
183+
<footer class="mt-auto py-6 border-t border-gray-200">
184+
<div class="max-w-4xl mx-auto px-4 text-center">
185+
<p class="text-lg font-bold gradient-text">
186+
CST协会 | 2025
187+
</p>
188+
<p class="text-sm text-gray-500 mt-2">CST-Discord消息通知系统</p>
189+
</div>
190+
</footer>
191+
192+
<script>
193+
// DOM元素
194+
const webhookUrlInput = document.getElementById('webhookUrl');
195+
const messageContentInput = document.getElementById('messageContent');
196+
const errorTypeInput = document.getElementById('errorType');
197+
const errorTimeInput = document.getElementById('errorTime');
198+
const messageUsernameInput = document.getElementById('messageUsername');
199+
const messageAvatarInput = document.getElementById('messageAvatar');
200+
const sendButton = document.getElementById('sendButton');
201+
const clearButton = document.getElementById('clearButton');
202+
const statusMessage = document.getElementById('statusMessage');
203+
204+
// 设置当前时间为默认时间
205+
document.addEventListener('DOMContentLoaded', () => {
206+
const now = new Date();
207+
// 调整到本地时间并格式化
208+
const localISOTime = new Date(now.getTime() - now.getTimezoneOffset() * 60000)
209+
.toISOString()
210+
.slice(0, 16);
211+
errorTimeInput.value = localISOTime;
212+
});
213+
214+
// 发送消息函数
215+
async function sendDiscordMessage() {
216+
// 验证Webhook URL
217+
const webhookUrl = webhookUrlInput.value.trim();
218+
if (!webhookUrl || !webhookUrl.startsWith('https://discord.com/api/webhooks/')) {
219+
showStatus('请输入有效的Discord Webhook URL', 'error');
220+
return;
221+
}
222+
223+
// 构建消息内容
224+
let content = messageContentInput.value.trim();
225+
226+
// 添加错误信息（如果提供）
227+
const errorType = errorTypeInput.value.trim();
228+
const errorTime = errorTimeInput.value.trim();
229+
230+
if (errorType || errorTime) {
231+
let errorMessage = "\n事件: ";
232+
errorMessage += errorType ? errorType : "未指定错误类型";
233+
errorMessage += errorTime ? `\n发生时间: ${formatDateTime(errorTime)}` : "";
234+
content += errorMessage;
235+
}
236+
237+
// 如果没有内容
238+
if (!content) {
239+
showStatus('请输入消息内容', 'error');
240+
return;
241+
}
242+
243+
// 构建发送数据
244+
const payload = {
245+
content: content,
246+
username: messageUsernameInput.value.trim() || undefined,
247+
avatar_url: messageAvatarInput.value.trim() || undefined
248+
};
249+
250+
try {
251+
// 禁用发送按钮
252+
sendButton.disabled = true;
253+
sendButton.innerHTML = '<i class="fa fa-circle-o-notch fa-spin mr-2"></i> 发送中...';
254+
255+
// 发送请求
256+
const response = await fetch(webhookUrl, {
257+
method: 'POST',
258+
headers: {
259+
'Content-Type': 'application/json',
260+
},
261+
body: JSON.stringify(payload),
262+
});
263+
264+
// 处理响应
265+
if (response.ok) {
266+
showStatus('消息发送成功！', 'success');
267+
// 清空部分字段
268+
messageContentInput.value = '';
269+
errorTypeInput.value = '';
270+
} else {
271+
const errorData = await response.json().catch(() => null);
272+
const errorMessage = errorData?.message || `发送失败 (状态码: ${response.status})`;
273+
showStatus(`发送失败: ${errorMessage}`, 'error');
274+
}
275+
} catch (error) {
276+
showStatus(`发送失败: ${error.message}`, 'error');
277+
} finally {
278+
// 恢复发送按钮
279+
sendButton.disabled = false;
280+
sendButton.innerHTML = '<i class="fa fa-paper-plane mr-2"></i> 发送消息';
281+
}
282+
}
283+
284+
// 显示状态消息
285+
function showStatus(message, type) {
286+
statusMessage.textContent = message;
287+
statusMessage.classList.remove('hidden', 'bg-green-100', 'text-green-800', 'bg-red-100', 'text-red-800', 'border', 'border-green-200', 'border-red-200');
288+
289+
if (type === 'success') {
290+
statusMessage.classList.add('bg-green-100', 'text-green-800', 'border', 'border-green-200');
291+
} else if (type === 'error') {
292+
statusMessage.classList.add('bg-red-100', 'text-red-800', 'border', 'border-red-200');
293+
}
294+
295+
// 5秒后自动隐藏
296+
setTimeout(() => {
297+
statusMessage.classList.add('hidden');
298+
}, 5000);
299+
}
300+
301+
// 清空内容
302+
function clearForm() {
303+
messageContentInput.value = '';
304+
errorTypeInput.value = '';
305+
// 保留URL、用户名和头像，方便重复发送
306+
statusMessage.classList.add('hidden');
307+
}
308+
309+
// 格式化日期时间
310+
function formatDateTime(dateTimeString) {
311+
if (!dateTimeString) return '';
312+
const date = new Date(dateTimeString);
313+
return date.toLocaleString('zh-CN', {
314+
year: 'numeric',
315+
month: '2-digit',
316+
day: '2-digit',
317+
hour: '2-digit',
318+
minute: '2-digit'
319+
});
320+
}
321+
322+
// 事件监听
323+
sendButton.addEventListener('click', sendDiscordMessage);
324+
clearButton.addEventListener('click', clearForm);
325+
326+
// 支持按Enter发送（按住Shift+Enter换行）
327+
messageContentInput.addEventListener('keydown', (e) => {
328+
if (e.key === 'Enter' && !e.shiftKey) {
329+
e.preventDefault();
330+
sendDiscordMessage();
331+
}
332+
});
333+
</script>
334+
335+
</body></html>

0 commit comments

Comments
 (0)