<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>安全通知组件</title>
<style>
:root {
--accent-900: #49a87d;
--accent-800: #1b945b;
--error-color: #d32f2f;
--check-svg: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24' fill='%23ffffff'%3E%3Cpath d='M400-314.46 250.46-464 296-509.54l104 104 264-264L709.54-624 400-314.46Z'/%3E%3C/svg%3E");
--error-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24' fill='%23ffffff'%3E%3Cpath d='M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z'/%3E%3C/svg%3E");
--notification-inset: 1rem;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
font-size: 14px;
}
*,
:after,
:before {
box-sizing: inherit;
margin: 0;
padding: 0;
}
body {
box-sizing: border-box;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f5f5f5;
padding: 1rem;
}
.notification {
color: rgba(0, 0, 0, 0.7);
position: fixed;
display: flex;
font-size: 0.9rem;
line-height: 1.4;
gap: 1rem;
top: 0;
right: 0;
margin: var(--notification-inset);
width: 18rem;
background-color: white;
box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.2);
border-radius: 0.3rem;
z-index: 1000;
padding: 1rem 0.8rem;
overflow: hidden;
transform: translateX(calc(100% + var(--notification-inset)));
animation: slideInOut 3s ease-in-out;
animation-fill-mode: forwards;
}
.notification::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 0.25rem;
background-color: var(--notification-color, var(--accent-900));
transform-origin: left;
animation: countdown 3s linear forwards;
}
.notification__text {
margin: 0.2rem 0 0;
font-size: 0.85rem;
}
.notification__header {
color: black;
margin: 0;
font-size: 1rem;
font-weight: 600;
}
.notification__action {
margin-left: auto;
align-self: flex-start;
}
.notification__icon {
border-radius: 50%;
display: block;
width: 2rem;
height: 2rem;
background-size: 1.5rem;
background-color: var(--notification-color, var(--accent-900));
background-image: var(--notification-icon, var(--check-svg));
background-repeat: no-repeat;
background-position: center;
flex-shrink: 0;
}
.button {
background: none;
border: none;
font: inherit;
color: currentColor;
cursor: pointer;
padding: 0.2rem;
line-height: 1;
}
@keyframes slideInOut {
0% {
transform: translateX(calc(100% + var(--notification-inset)));
}
10%, 80% {
transform: translateX(0);
}
100% {
transform: translateX(calc(100% + var(--notification-inset)));
}
}
@keyframes countdown {
0% {
transform: scaleX(1);
}
100% {
transform: scaleX(0);
}
}
.content {
max-width: 600px;
padding: 1.5rem;
background: white;
border-radius: 0.4rem;
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
text-align: center;
}
.content h1 {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.content p {
margin-bottom: 0.5rem;
font-size: 0.95rem;
}
</style>
</head>
<body>
<!-- 单一通知弹窗 -->
<div id="main-notification" class="notification" role="alert" aria-live="assertive" aria-atomic="true" style="display: none;">
<div class="notification__icon"></div>
<div class="notification__body">
<h2 class="notification__header">操作成功</h2>
<p class="notification__text">您的更改已保存</p>
</div>
<div class="notification__action">
<button class="button" aria-label="关闭通知" onclick="hideNotification()">
<span aria-hidden="true">✕</span>
</button>
</div>
</div>
<script>
// 显示通知函数
function showNotification(title, message, isError = false) {
const notification = document.getElementById('main-notification');
const header = notification.querySelector('.notification__header');
const text = notification.querySelector('.notification__text');
const icon = notification.querySelector('.notification__icon');
// 设置通知内容
header.textContent = title;
text.textContent = message;
// 设置样式
if (isError) {
notification.style.setProperty('--notification-color', 'var(--error-color)');
notification.style.setProperty('--notification-icon', 'var(--error-svg)');
} else {
notification.style.setProperty('--notification-color', 'var(--accent-900)');
notification.style.setProperty('--notification-icon', 'var(--check-svg)');
}
// 显示通知
notification.style.display = 'flex';
notification.style.animation = 'none';
notification.offsetHeight; // 触发重绘
notification.style.animation = 'slideInOut 3s ease-in-out';
// 3秒后自动隐藏
setTimeout(() => {
notification.style.display = 'none';
}, 3000);
}
// 隐藏通知
function hideNotification() {
const notification = document.getElementById('main-notification');
notification.style.display = 'none';
}
// 安全保护功能
function setupSecurityProtection() {
// 1. 禁用右键菜单
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
showNotification('安全提示', '右键菜单已禁用', true);
});
// 2. 禁用开发者工具快捷键
document.addEventListener('keydown', function(e) {
// 禁用 F12
if (e.key === 'F12' || e.keyCode === 123) {
e.preventDefault();
showNotification('安全提示', '开发者工具已禁用', true);
return false;
}
// 禁用 Ctrl+Shift+I (Chrome/Edge)
if (e.ctrlKey && e.shiftKey && e.key === 'I') {
e.preventDefault();
showNotification('安全提示', '开发者工具已禁用', true);
return false;
}
// 禁用 Ctrl+Shift+J (Chrome/Edge)
if (e.ctrlKey && e.shiftKey && e.key === 'J') {
e.preventDefault();
showNotification('安全提示', '开发者工具控制台已禁用', true);
return false;
}
// 禁用 Ctrl+Shift+C (Chrome/Edge)
if (e.ctrlKey && e.shiftKey && e.key === 'C') {
e.preventDefault();
showNotification('安全提示', '检查元素功能已禁用', true);
return false;
}
// 禁用 Ctrl+U (查看源代码)
if (e.ctrlKey && e.key === 'u') {
e.preventDefault();
showNotification('安全提示', '查看源代码功能已禁用', true);
return false;
}
});
// 3. 检测开发者工具是否打开
let devToolsOpen = false;
function checkDevTools() {
const widthThreshold = window.outerWidth - window.innerWidth > 100;
const heightThreshold = window.outerHeight - window.innerHeight > 100;
if ((widthThreshold || heightThreshold) && !devToolsOpen) {
devToolsOpen = true;
showNotification('安全警告', '检测到开发者工具已打开', true);
} else if (!widthThreshold && !heightThreshold) {
devToolsOpen = false;
}
}
setInterval(checkDevTools, 500);
}
// 页面加载完成后初始化
window.addEventListener('DOMContentLoaded', function() {
// 显示欢迎通知
showNotification('欢迎访问', '安全保护功能已启用');
// 设置安全保护
setupSecurityProtection();
});
</script>
</body>
</html>
index.html