Files

690 lines
31 KiB
HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>考试加油 | 网站暂停运营通知</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- 配置Tailwind自定义颜色和字体 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#4F46E5',
secondary: '#EC4899',
accent: '#10B981',
warning: '#F59E0B',
danger: '#EF4444',
neutral: '#6B7280',
'neutral-light': '#F3F4F6',
'neutral-dark': '#1F2937'
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
},
}
}
</script>
<!-- 自定义工具类 -->
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.text-shadow {
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.text-gradient {
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
.card-hover {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.15);
}
.blessing-card {
@apply bg-white rounded-2xl shadow-lg p-6 overflow-hidden transition-all duration-300 hover:shadow-xl relative;
}
.corner-egg {
@apply absolute top-4 right-4 z-10;
}
}
</style>
<style>
/* 动画效果 */
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes toastIn {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes toastOut {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(-20px); }
}
.float {
animation: float 3s ease-in-out infinite;
}
.pulse {
animation: pulse 2s ease-in-out infinite;
}
.fade-in {
animation: fadeIn 0.5s ease-out forwards;
}
.toast-animation-in {
animation: toastIn 0.3s ease-out forwards;
}
.toast-animation-out {
animation: toastOut 0.3s ease-in forwards;
}
/* 粒子背景效果 */
.particle {
position: absolute;
border-radius: 50%;
opacity: 0.5;
pointer-events: none;
}
/* 祝福彩蛋效果 */
.blessing-egg {
cursor: pointer;
position: relative;
overflow: hidden;
}
.blessing-egg::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
background: rgba(255, 255, 255, 0.6);
opacity: 0;
border-radius: 100%;
transform: scale(1, 1) translate(-50%);
transform-origin: 50% 50%;
}
.blessing-egg:active::after {
animation: ripple 0.6s ease-out;
}
@keyframes ripple {
0% {
transform: scale(0, 0);
opacity: 0.7;
}
100% {
transform: scale(25, 25);
opacity: 0;
}
}
/* 单独祝福卡片装饰 */
.blessing-badge {
position: absolute;
top: -10px;
right: 20px;
background: linear-gradient(45deg, var(--tw-gradient-from) 0%, var(--tw-gradient-to) 100%);
--tw-gradient-from: theme('colors.primary');
--tw-gradient-to: theme('colors.secondary');
color: white;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
box-shadow: 0 4px 10px rgba(79, 70, 229, 0.2);
z-index: 1;
}
/* 修复卡片重叠问题 */
.card-container {
perspective: 1000px;
}
/* 优化滚动体验 */
html {
scroll-behavior: smooth;
}
</style>
</head>
<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen font-sans text-neutral-dark">
<!-- 粒子背景容器 -->
<div id="particles-container" class="fixed inset-0 z-0 overflow-hidden"></div>
<div class="container mx-auto px-4 py-12 relative z-10">
<!-- 标题区域 -->
<header class="text-center mb-16 fade-in">
<h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold mb-4 bg-gradient-to-r from-primary to-secondary text-gradient">
考试加油!网站公告
</h1>
<p class="text-xl text-neutral max-w-2xl mx-auto mb-8">
为所有考生送上最真挚的祝福,同时告知网站运营情况
</p>
<div class="flex justify-center space-x-4">
<div class="text-4xl text-primary float">
<i class="fa fa-book"></i>
</div>
<div class="text-4xl text-secondary float" style="animation-delay: 0.2s">
<i class="fa fa-graduation-cap"></i>
</div>
<div class="text-4xl text-accent float" style="animation-delay: 0.4s">
<i class="fa fa-info-circle"></i>
</div>
</div>
</header>
<!-- 主要内容区域 -->
<main class="grid grid-cols-1 lg:grid-cols-2 gap-8 max-w-6xl mx-auto">
<!-- 考试祝福板块 -->
<section class="bg-white rounded-2xl shadow-xl overflow-hidden card-hover fade-in" style="animation-delay: 0.2s; min-height: 800px; position: relative;">
<!-- 右上角彩蛋 -->
<div class="corner-egg">
<div class="blessing-egg bg-white rounded-full p-3 shadow-lg transform rotate-12 hover:rotate-0 transition-transform duration-500" onclick="showBlessing()">
<i class="fa fa-star text-2xl text-accent"></i>
</div>
</div>
<div class="bg-gradient-to-r from-primary/90 to-secondary/90 p-6 text-white">
<h2 class="text-2xl font-bold flex items-center">
<i class="fa fa-heart mr-3 pulse"></i>考试祝福
</h2>
</div>
<div class="p-6">
<div class="mb-6">
<h3 class="text-xl font-semibold text-primary mb-3">亲爱的同学们:</h3>
<p class="mb-4">
当会考的铃声即将响起,当期末考试的脚步越来越近,当中考的战鼓已经擂响,相信你们都已在知识的海洋中扬帆起航,准备迎接这场重要的检验。考试,不仅是对你们所学知识的测试,更是对意志、心态和抗压能力的挑战。
</p>
<p class="mb-4">
七年级的你们,正处在初中旅程的起点,这次期末考是对你们一学期努力的总结;八年级的你们,站在承上启下的关键节点,每一份坚持都在为未来夯实基础;九年级的你们,即将迎来人生的第一个重要转折,中考的舞台正等待你们绽放光芒。
</p>
<p class="mb-4">
请记住,每一个挑灯夜读的夜晚,每一次认真演算的坚持,每一回虚心请教的执着,都在为你们的成功铺路。不要害怕挑战,不要畏惧压力,因为这些都是成长的勋章。
</p>
<p>
保持平和的心态,合理安排时间,以最佳的状态迎接考试。相信自己的能力,坚信付出终有回报。愿你们在考场上文思如泉涌,笔下生花,取得理想的成绩!
</p>
<p>
谢谢,祝我们每个人都有美好的未来,终。
</p>
</div>
<!-- 年级祝福卡片 -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
<!-- 七年级 -->
<div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded card-hover">
<h4 class="font-bold text-blue-700 mb-2">七年级同学</h4>
<p class="text-sm text-neutral">
作为初中学习的开端,这次考试是你们展现学习成果的舞台。保持好奇心,认真对待每一道题,为初中生活开一个好头!
</p>
</div>
<!-- 八年级 -->
<div class="bg-purple-50 border-l-4 border-purple-500 p-4 rounded card-hover">
<h4 class="font-bold text-purple-700 mb-2">八年级同学</h4>
<p class="text-sm text-neutral">
八年级是初中学习的关键期,知识难度逐步提升。愿你们在这次考试中巩固所学,发现不足,为九年级的冲刺做好准备!
</p>
</div>
<!-- 九年级 -->
<div class="bg-red-50 border-l-4 border-red-500 p-4 rounded card-hover">
<h4 class="font-bold text-red-700 mb-2">九年级同学</h4>
<p class="text-sm text-neutral">
中考的号角已经吹响,这是你们人生中的重要里程碑。放下包袱,轻装上阵,相信三年的积累会让你们在考场上从容应对,考入理想的高中!
</p>
</div>
</div>
<!-- 考试小贴士 -->
<div class="bg-neutral-light p-5 rounded-xl mb-8 relative overflow-hidden">
<div class="absolute top-0 right-0 bg-primary/10 p-2 rounded-bl-lg">
<i class="fa fa-lightbulb-o text-primary"></i>
</div>
<h3 class="text-lg font-semibold text-primary mb-3 flex items-center">
考试小贴士
</h3>
<ul class="space-y-2 text-neutral">
<li class="flex items-start">
<i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>考前认真复习,重点知识了然于胸,但不必熬夜突击</span>
</li>
<li class="flex items-start">
<i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>考试时先易后难,遇到难题不要慌张,先跳过做会的题</span>
</li>
<li class="flex items-start">
<i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>认真审题,理解题意后再作答,避免因粗心丢分</span>
</li>
<li class="flex items-start">
<i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>保持卷面整洁,书写规范,给阅卷老师留下好印象</span>
</li>
<li class="flex items-start">
<i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>考完一科忘一科,不要和同学对答案!集中精力准备下一科</span>
</li>
</ul>
</div>
<!-- 祝福toast -->
<div id="blessing-toast" class="fixed top-6 right-6 bg-white rounded-lg shadow-xl p-4 max-w-sm w-full transform translate-y-[-20px] opacity-0 z-50 pointer-events-none flex items-start">
<div class="text-2xl text-accent mr-3 mt-1">🎉</div>
<div>
<h3 class="font-bold text-neutral-dark mb-1" id="toast-title">特别祝福</h3>
<p class="text-neutral" id="toast-message">愿你的考试如顺水行舟,一路畅通无阻,取得优异成绩!</p>
</div>
</div>
</div>
</section>
<!-- 网站停止运营板块 -->
<section class="bg-white rounded-2xl shadow-xl overflow-hidden card-hover fade-in" style="animation-delay: 0.4s; min-height: 800px;">
<div class="bg-gradient-to-r from-neutral-dark to-neutral p-6 text-white">
<h2 class="text-2xl font-bold flex items-center">
<i class="fa fa-exclamation-triangle mr-3 pulse"></i>网站暂停运营通知
</h2>
</div>
<div class="p-6">
<div class="mb-6">
<h3 class="text-xl font-semibold text-neutral-dark mb-3">尊敬的用户:</h3>
<p class="mb-4">
非常抱歉地通知您,由于银河锋锐软件开发工作室的内网节点1(server-node-local-1)出现硬件故障,导致我们的网站暂时无法正常运营。由此给您带来的不便,我们深表歉意。
</p>
<!-- 问题详情卡片 -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
<!-- 节点服务器故障 -->
<div class="bg-red-50 border-l-4 border-red-500 p-4 rounded">
<h4 class="font-bold text-red-700 mb-2 flex items-center">
<i class="fa fa-server mr-2"></i>节点服务器故障
</h4>
<p class="text-sm text-neutral">
内网节点1的硬件出现故障,表现为 BIOS 引导错误,正在尝试修复,目前导致SSL证书验证机制失效,网站安全连接无法建立,目前已无法正常访问。影响工作室功能涉及:我的世界服务器、工作室全部网站服务(Nginx),工作室 SQL 数据服务器,工作室邮箱,工作室 自动 决策(测试、内置SMANAGE)FRPC(IP记录),攻击拒绝防护
</p>
</div>
<!-- SQL服务器断连 -->
<div class="bg-orange-50 border-l-4 border-orange-500 p-4 rounded">
<h4 class="font-bold text-orange-700 mb-2 flex items-center">
<i class="fa fa-database mr-2"></i>SQL服务器断连
</h4>
<p class="text-sm text-neutral">
由于主服务器故障,SQL数据库服务器无法正常连接,导致用户数据暂时无法读取和写入。并且不位于node1的邮件服务器由于无法连接SQL服务器也无法使用,所有工作室企业邮箱(*@gvsds.*)均无法使用
</p>
</div>
</div>
<p class="mb-4">
我们的技术团队正在全力排查故障原因并进行抢修。由于硬件故障的具体原因尚在检测中,目前无法确定确切的修复时间。我们将持续跟进维修进度,并第一时间通过网站和其他渠道告知大家。
</p>
<!-- 网站组网图 -->
<div class="mb-6 p-4 bg-neutral-light rounded-xl">
<h4 class="font-bold text-neutral-dark mb-3 flex items-center">
<i class="fa fa-sitemap mr-2 text-primary"></i>网站组网示意图
</h4>
<div class="relative">
<iframe id="embed_dom" name="embed_dom" frameborder="0"
style="display:block; margin: 0 auto; width: 100%; height: 275px;"
src="https://www.processon.com/embed/6853ef252a55e75afea32822?cid=6853ef252a55e75afea32823"></iframe>
</div>
</div>
<p>
在此期间,您如有任何问题或需要帮助,请通过以下方式联系我们的客服团队,我们将竭诚为您服务:
</p>
</div>
<!-- 联系方式 -->
<div class="space-y-4 mb-6">
<div class="flex items-center p-3 bg-blue-50 rounded-lg">
<div class="bg-blue-100 p-2 rounded-full mr-3">
<i class="fa fa-envelope text-blue-500"></i>
</div>
<span>邮箱:support@gvsds.com(不可用)</span>
</div>
<div class="flex items-center p-3 bg-blue-50 rounded-lg">
<div class="bg-blue-100 p-2 rounded-full mr-3">
<i class="fa fa-envelope text-blue-500"></i>
</div>
<span>邮箱:wyt18222152539wyt@163.com</span>
</div>
<div class="flex items-center p-3 bg-green-50 rounded-lg">
<div class="bg-green-100 p-2 rounded-full mr-3">
<i class="fa fa-phone text-green-500"></i>
</div>
<span>电话:182-2215-2539</span>
</div>
</div>
<!-- 维修状态 -->
<div class="bg-red-50 p-4 rounded-xl">
<h4 class="font-bold text-red-700 mb-2 flex items-center">
<i class="fa fa-cog mr-2 fa-spin text-warning"></i>维修状态
</h4>
<p class="text-neutral">
已确定为 BIOS 错误,不排除短路可能。由于故障的复杂性,暂时无法提供具体的修复时间节点,但我们会全力以赴,争取尽快恢复服务。
</p>
</div>
</div>
</section>
</main>
<!-- 单独祝福区域 -->
<section class="mt-16 max-w-6xl mx-auto fade-in card-container" style="animation-delay: 0.6s">
<h2 class="text-2xl font-bold text-center mb-8 bg-gradient-to-r from-primary to-accent text-gradient">
特别祝福
</h2>
<p class="text-center text-neutral mb-12">
笑死怎么我写个祝福跟下遗嘱或者说致悼词一样,哈哈。
</p>
<!--div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="blessing-card group">
<div class="blessing-badge bg-gradient-to-r from-secondary to-accent mt-10">必胜!</div>
<div class="text-3xl text-primary mb-4 group-hover:text-primary/80 transition-colors">
<i class="fa fa-user"></i>
</div>
<h3 class="font-bold text-lg mb-2">陈同学</h3>
<p class="text-neutral">
药到口中方觉苦,人走茶凉方觉寒。努力这么长时间,不就为此刻吗?加油!你一直都很优秀,祝愿你能考上你所期待的学校,找到自己的价值。<s>谢谢你曾经出现在这里</s><!--唉,我真的很抱歉,所有的话不知道重复多少次了,但是我想说的话依旧,也许,我还爱着你?但愿这份秘密没有别人能够知道,回来陪陪我吧?考完试后,我还能坚持下去吗?--
</p>
</div>
<div class="blessing-card group">
<div class="blessing-badge bg-gradient-to-r from-accent to-warning mt-10">努力!</div>
<div class="text-3xl text-secondary mb-4 group-hover:text-secondary/80 transition-colors">
<i class="fa fa-user"></i>
</div>
<h3 class="font-bold text-lg mb-2">刘同学</h3>
<p class="text-neutral">
七年级从十班一步一步向上爬所有人都有目共睹,不必多想,你是你自己的骄傲,即使你有时看似浮夸,但实际上你仍然是个心地善良的人,祝愿你能取得一个理想的成绩。
</p>
</div>
<div class="blessing-card group">
<div class="blessing-badge bg-gradient-to-r from-accent to-warning mt-10">努力!</div>
<div class="text-3xl text-accent mb-4 group-hover:text-accent/80 transition-colors">
<i class="fa fa-user"></i>
</div>
<h3 class="font-bold text-lg mb-2">王同学</h3>
<p class="text-neutral">
往事如流水,追忆已晚矣。此时此刻,过去的事情该先放放了,你有能力完成这场考试并且拿到最好的成绩,如果不包括情感影响,这是你对自己最客观的评估,你知道你该做什么,你只是不愿意面对,未来总会好起来的。
</p>
</div>
<div class="blessing-card group">
<div class="blessing-badge bg-gradient-to-r from-warning to-primary mt-10">坚持!</div>
<div class="text-3xl text-warning mb-4 group-hover:text-warning/80 transition-colors">
<i class="fa fa-user"></i>
</div>
<h3 class="font-bold text-lg mb-2">Microhard_1724同学</h3>
<p class="text-neutral">
你与工作室的参与十分的少,我们对于你的了解很少,不过我知道你是一个很优秀的人,中考的重要性仅次于高考和或者,同意,祝愿你能够一举夺魁。
</p>
</div>
<div class="blessing-card group">
<div class="blessing-badge bg-gradient-to-r from-secondary to-accent mt-10">必胜!</div>
<div class="text-3xl text-accent mb-4 group-hover:text-accent/80 transition-colors">
<i class="fa fa-user"></i>
</div>
<h3 class="font-bold text-lg mb-2">悠然自得 同学</h3>
<p class="text-neutral">
你与工作室项目参与十分多,你与站长也十分熟识,就我所知你是一个很优秀的人,考个好成绩,对你来说不难,望你能在本次期末考试中取得好成绩,也希望你能在未来的学习中取得好成绩。
</p>
</div>
<div class="blessing-card group">
<div class="blessing-badge bg-gradient-to-r from-secondary to-accent mt-10">必胜!</div>
<div class="text-3xl text-secondary mb-4 group-hover:text-secondary/80 transition-colors">
<i class="fa fa-user"></i>
</div>
<h3 class="font-bold text-lg mb-2">MicGan 同学</h3>
<p class="text-neutral">
虽然你似乎有点被迫害妄想症,与工作室项目参与也比较少,而且似乎在编程方面略有掉队,让我仍然相信你的能力,考试,同时也是一场心态的比拼。保持自信,你一定能在考场上脱颖而出,取得理想成绩!
</p>
</div>
<div class="blessing-card group">
<div class="blessing-badge bg-gradient-to-r from-secondary to-accent mt-10">必胜!</div>
<div class="text-3xl text-warning mb-4 group-hover:text-warning/80 transition-colors">
<i class="fa fa-user"></i>
</div>
<h3 class="font-bold text-lg mb-2">张同学</h3>
<p class="text-neutral">
每一次考试都是一次成长的机会,无论结果如何,你的努力都值得肯定。祝你在这次考试中有所收获,为未来的学习打下坚实基础!
</p>
</div>
<div class="blessing-card group">
<div class="blessing-badge bg-gradient-to-r from-secondary to-accent mt-10">必胜!</div>
<div class="text-3xl text-primary mb-4 group-hover:text-primary/80 transition-colors">
<i class="fa fa-user"></i>
</div>
<h3 class="font-bold text-lg mb-2">system-windows</h3>
<p class="text-neutral">
一开始我知道MicGan工作室有你这个人但是我并没有跟你打过招呼,直至现在我也并不怎么了解你,但是我能够知道你同样是一个很有志向和能力的人,即便你不这么想,愿君能在本次和以后的考试中取得你所向往的成绩。
</p>
</div>
</div-->
<p class="text-center text-neutral mt-12">
祝愿工作室所有成员,无论在职、停止、辞退,无论活跃或者沉默,感谢有你们的支持和陪伴,感谢你们能够出现在这里,总之,预祝所有考生考试顺利!
<p>
</section>
<!-- 页脚 -->
<footer class="mt-16 text-center text-neutral text-sm fade-in" style="animation-delay: 0.8s">
<p>银河锋锐软件开发工作室 © 2025</p>
<p class="mt-2">祝所有考生考试顺利,网站维修进度将及时更新</p>
</footer>
</div>
<script>
// 创建粒子背景
function createParticles() {
const container = document.getElementById('particles-container');
const particleCount = 60;
for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.classList.add('particle');
// 随机大小和颜色
const size = Math.random() * 12 + 3;
particle.style.width = `${size}px`;
particle.style.height = `${size}px`;
// 随机颜色
const colors = ['rgba(79, 70, 229, 0.3)', 'rgba(236, 72, 153, 0.3)', 'rgba(16, 185, 129, 0.3)', 'rgba(245, 158, 11, 0.3)'];
particle.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
// 随机位置
particle.style.left = `${Math.random() * 100}%`;
particle.style.top = `${Math.random() * 100}%`;
// 随机动画延迟和持续时间
const delay = Math.random() * 5;
const duration = Math.random() * 20 + 10;
particle.style.animation = `float ${duration}s ease-in-out ${delay}s infinite`;
container.appendChild(particle);
}
}
// 祝福数据
const blessings = [
"愿你的笔尖流淌智慧,考出理想的成绩,为自己的努力交上一份满意的答卷!",
"沉着冷静,思路清晰,你积累的知识会在考场上发光发热,助你超常发挥!",
"所有的努力都不会白费,你挥洒的汗水终将化作成功的喜悦,考试加油!",
"考试只是人生中的一小步,保持平常心,展现真实的自己,你已经很棒了!",
"愿你的名字闪耀在光荣榜上,每一道题都成为你成功的阶梯,勇往直前!",
"自信是成功的第一秘诀,相信自己的能力,你就是考场上最亮的星!",
"放松心情,认真审题,每一次思考都是对知识的升华,胜利一定属于你!",
"每一道题都是一次机会,抓住机会,展现才华,创造属于自己的奇迹!",
"心有多大,舞台就有多大,勇敢地在试卷上展现自己的实力吧!",
"付出终有回报,信心绝对重要,考试了,别忘面带微笑,你是最棒的!",
"愿你在考场上文思泉涌,笔下生花,每一道题都迎刃而解,取得优异成绩!",
"考试是检验知识的标尺,更是展示能力的舞台,相信自己,你能行!",
"保持良好的心态,合理安排时间,你积累的知识会让你在考场上从容应对!",
"愿所有的努力都不被辜负,所有的付出都有收获,考试顺利,梦想成真!",
"带上自信的笑容,装满努力的成果,走进考场,你就是胜利者!"
];
// 显示祝福toast
function showBlessing() {
const toast = document.getElementById('blessing-toast');
const message = document.getElementById('toast-message');
// 随机选择一条祝福
const randomIndex = Math.floor(Math.random() * blessings.length);
message.textContent = blessings[randomIndex];
// 显示toast
toast.classList.remove('translate-y-[-20px]', 'opacity-0');
toast.classList.add('toast-animation-in');
// 3秒后隐藏toast
setTimeout(() => {
hideBlessing();
}, 3000);
}
// 隐藏祝福toast
function hideBlessing() {
const toast = document.getElementById('blessing-toast');
toast.classList.remove('toast-animation-in');
toast.classList.add('toast-animation-out');
setTimeout(() => {
toast.classList.add('translate-y-[-20px]', 'opacity-0');
toast.classList.remove('toast-animation-out');
}, 300);
}
// 页面加载完成后执行
window.addEventListener('DOMContentLoaded', () => {
createParticles();
// 页面加载后自动显示一次祝福
setTimeout(showBlessing, 1000);
// 添加淡入动画
const fadeElements = document.querySelectorAll('.fade-in');
fadeElements.forEach((el, index) => {
el.style.opacity = '0';
el.style.animation = `fadeIn 0.5s ease-out ${0.1 * index}s forwards`;
});
// 修复卡片重叠问题
const cards = document.querySelectorAll('.blessing-card');
cards.forEach((card, index) => {
// 为卡片添加不同的z-index,防止重叠
card.style.zIndex = `${cards.length - index}`;
});
});
function addWatermark() {
// 创建水印容器元素
const watermarkContainer = document.createElement('div');
watermarkContainer.className = 'watermark-container';
// 设置水印容器的样式
watermarkContainer.style.pointerEvents = 'none';
watermarkContainer.style.position = 'fixed';
watermarkContainer.style.top = '0';
watermarkContainer.style.left = '0';
watermarkContainer.style.width = '100%';
watermarkContainer.style.height = '100%';
watermarkContainer.style.overflow = 'hidden';
watermarkContainer.style.zIndex = '-100';
// 水印文本和样式参数
const text = '银河锋锐软件开发工作室';
const textColor = '#e8efff';//rgba(0, 0, 0, 0.1)
const fontSize = 16;
const width = 200;
const height = 80;
const angle = -20; // 倾斜角度
// 创建单个水印元素
function createWatermark() {
const watermark = document.createElement('div');
watermark.textContent = text;
watermark.style.position = 'absolute';
watermark.style.width = `${width}px`;
watermark.style.height = `${height}px`;
watermark.style.display = 'flex';
watermark.style.alignItems = 'center';
watermark.style.justifyContent = 'center';
watermark.style.fontSize = `${fontSize}px`;
watermark.style.color = textColor;
watermark.style.transform = `rotate(${angle}deg)`;
watermark.style.transformOrigin = 'center';
watermark.style.userSelect = 'none';
return watermark;
}
// 计算需要的水印数量和位置
const clientWidth = document.documentElement.clientWidth;
const clientHeight = document.documentElement.clientHeight;
// 计算水平和垂直方向需要的水印数量
const hCount = Math.ceil(clientWidth / (width * 0.7)); // 0.7是为了让水印有重叠
const vCount = Math.ceil(clientHeight / (height * 0.7));
// 创建并添加所有水印
for (let i = 0; i < vCount; i++) {
for (let j = 0; j < hCount; j++) {
const watermark = createWatermark();
// 设置位置,加入随机偏移让水印看起来更自然
watermark.style.left = `${j * width * 0.7}px`;
watermark.style.top = `${i * height * 0.7}px`;
watermarkContainer.appendChild(watermark);
}
}
// 添加到页面
document.body.appendChild(watermarkContainer);
// 监听窗口大小变化,动态调整水印
window.addEventListener('resize', () => {
document.body.removeChild(watermarkContainer);
addWatermark();
});
}
// 页面加载完成后添加水印
window.addEventListener('load', addWatermark);
</script>
</body>
</html>