690 lines
31 KiB
HTML
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> |