346 lines
19 KiB
HTML
346 lines
19 KiB
HTML
{% extends "base.html" %}
|
||
{% block title %}智联青云 - 首页{% endblock %}
|
||
{% block content %}
|
||
<div class="space-y-20 pb-16">
|
||
<!-- 高级 Hero Section -->
|
||
<div class="relative overflow-hidden rounded-[2.5rem] bg-slate-950 text-white shadow-2xl animated-border p-1">
|
||
<div class="absolute inset-0 bg-grid-pattern-dark opacity-40"></div>
|
||
<div class="absolute -top-40 -right-40 w-96 h-96 bg-blue-500/30 rounded-full blur-[100px]"></div>
|
||
<div class="absolute -bottom-40 -left-40 w-96 h-96 bg-purple-500/30 rounded-full blur-[100px]"></div>
|
||
|
||
<div class="relative glass-panel-dark rounded-[2.4rem] px-6 py-24 sm:py-32 lg:px-16 text-center flex flex-col items-center">
|
||
<canvas id="hero-particles" class="absolute inset-0 w-full h-full pointer-events-auto" style="z-index:0;border-radius:inherit"></canvas>
|
||
<!-- 内容层，z-index 高于 canvas -->
|
||
<div class="relative flex flex-col items-center w-full" style="z-index:1">
|
||
<!-- Badge -->
|
||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 backdrop-blur-md mb-8 hover-card-up">
|
||
<span class="flex h-2 w-2 relative">
|
||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
|
||
<span class="relative inline-flex rounded-full h-2 w-2 bg-blue-500"></span>
|
||
</span>
|
||
<span class="text-sm font-medium text-blue-100">汇九智，步青云</span>
|
||
</div>
|
||
|
||
<h1 class="text-5xl font-extrabold tracking-tight sm:text-6xl lg:text-7xl mb-6">
|
||
<span class="block text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-indigo-400 to-purple-400 text-gradient-glow">
|
||
智联青云
|
||
</span>
|
||
<span class="block text-2xl sm:text-3xl text-slate-300 font-light mt-3">汇九智，步青云</span>
|
||
</h1>
|
||
|
||
<p class="mt-4 max-w-2xl mx-auto text-xl text-slate-300 leading-relaxed font-light">
|
||
打破空间限制，重塑考试体验。集成智能防作弊、自动阅卷与沉浸式备考社区的现代化教育解决方案。
|
||
</p>
|
||
|
||
<div class="mt-12 flex flex-col sm:flex-row items-center justify-center gap-5">
|
||
<a href="/contests" class="w-full sm:w-auto inline-flex justify-center items-center px-8 py-4 border border-transparent text-lg font-medium rounded-2xl text-slate-900 bg-white hover:bg-slate-50 transition-all-300 hover:scale-105 hover-glow shadow-[0_0_20px_rgba(255,255,255,0.2)]">
|
||
浏览全部杯赛
|
||
<svg class="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
|
||
</a>
|
||
{% if not user %}
|
||
<a href="/register" class="w-full sm:w-auto inline-flex justify-center items-center px-8 py-4 border border-white/20 text-lg font-medium rounded-2xl text-white bg-white/5 hover:bg-white/10 backdrop-blur-md transition-all-300 hover:scale-105 hover:border-white/40">
|
||
免费注册账号
|
||
</a>
|
||
{% elif user.role == 'student' %}
|
||
<a href="/apply-teacher" class="w-full sm:w-auto inline-flex justify-center items-center px-8 py-4 border border-white/20 text-lg font-medium rounded-2xl text-white bg-white/5 hover:bg-white/10 backdrop-blur-md transition-all-300 hover:scale-105 hover:border-white/40">
|
||
👨🏫 申请成为教师
|
||
</a>
|
||
{% elif user.role == 'teacher' %}
|
||
<a href="/contests" class="w-full sm:w-auto inline-flex justify-center items-center px-8 py-4 border border-white/20 text-lg font-medium rounded-2xl text-white bg-white/5 hover:bg-white/10 backdrop-blur-md transition-all-300 hover:scale-105 hover:border-white/40">
|
||
👨🏫 进入教师后台
|
||
</a>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<!-- 底部装饰数据 -->
|
||
<div class="mt-16 pt-8 border-t border-white/10 grid grid-cols-2 gap-8 max-w-2xl w-full">
|
||
<div class="text-center">
|
||
<div class="relative inline-block">
|
||
<div class="absolute inset-0 bg-blue-400/20 rounded-full blur-xl animate-pulse"></div>
|
||
<div id="stat-online" class="relative text-3xl font-bold text-white mb-1" data-target="{{ online_count }}">0</div>
|
||
</div>
|
||
<div class="text-sm text-slate-400">实时在线</div>
|
||
</div>
|
||
<div class="text-center">
|
||
<div class="relative inline-block">
|
||
<div class="absolute inset-0 bg-purple-400/20 rounded-full blur-xl animate-pulse"></div>
|
||
<div id="stat-contests" class="relative text-3xl font-bold text-white mb-1" data-target="{{ contest_count }}">0</div>
|
||
</div>
|
||
<div class="text-sm text-slate-400">杯赛总数</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- /内容层 -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bento Box 功能区 -->
|
||
<div class="py-12">
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-sm font-bold tracking-wider text-primary uppercase mb-3">核心优势</h2>
|
||
<h3 class="text-3xl md:text-4xl font-extrabold text-slate-900">重新定义考试标准</h3>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 auto-rows-[320px]">
|
||
<!-- Bento Item 1: 大格 -->
|
||
<div class="md:col-span-2 group relative overflow-hidden bg-white rounded-3xl p-8 hover-card-up border border-slate-100/50 shadow-lg">
|
||
<div class="absolute top-0 right-0 w-64 h-64 bg-gradient-to-br from-blue-100 to-transparent rounded-bl-full opacity-50 group-hover:scale-110 transition-transform duration-700"></div>
|
||
<div class="relative z-10 h-full flex flex-col justify-between">
|
||
<div>
|
||
<div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-cyan-400 text-white rounded-2xl flex items-center justify-center mb-6 shadow-md shadow-blue-500/30">
|
||
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
|
||
</div>
|
||
<h3 class="text-2xl font-bold text-slate-900 mb-4">全矩阵杯赛专栏</h3>
|
||
<p class="text-slate-500 leading-relaxed text-lg max-w-md">汇聚各类大型模拟考与学科竞赛。提供一键报名、成绩预测、历年真题库及专家解析，为您打造最硬核的升学备考阵地。</p>
|
||
</div>
|
||
<a href="/contests" class="inline-flex items-center text-primary font-semibold hover:text-blue-700 mt-4">
|
||
探索赛事 <svg class="ml-2 w-5 h-5 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bento Item 2: 竖格 -->
|
||
<div class="group relative overflow-hidden bg-slate-900 rounded-3xl p-8 hover-card-up shadow-xl border border-slate-800">
|
||
<div class="absolute inset-0 bg-grid-pattern-dark opacity-20"></div>
|
||
<div class="absolute bottom-0 right-0 w-32 h-32 bg-purple-500/20 blur-2xl rounded-full"></div>
|
||
<div class="relative z-10 h-full flex flex-col justify-between">
|
||
<div>
|
||
<div class="w-14 h-14 bg-white/10 backdrop-blur-md text-white rounded-2xl flex items-center justify-center mb-6 border border-white/10">
|
||
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-white mb-3">极致防作弊监控</h3>
|
||
<p class="text-slate-400 leading-relaxed">切屏检测、人脸核验与实时录屏，打造无懈可击的在线考场。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bento Item 3: 小格 -->
|
||
<div class="group relative overflow-hidden bg-gradient-to-br from-green-50 to-emerald-50 rounded-3xl p-8 hover-card-up border border-green-100 shadow-sm">
|
||
<div class="relative z-10">
|
||
<div class="w-12 h-12 bg-white text-green-500 rounded-xl flex items-center justify-center mb-5 shadow-sm">
|
||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-slate-900 mb-2">秒级智能判卷</h3>
|
||
<p class="text-slate-600">客观题自动批改，主观题支持教师流水线协同阅卷，效率提升300%。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bento Item 4: 小格 -->
|
||
<div class="group relative overflow-hidden bg-white rounded-3xl p-8 hover-card-up border border-slate-100/50 shadow-sm md:col-span-2">
|
||
<div class="absolute right-0 top-1/2 -translate-y-1/2 opacity-10 group-hover:opacity-20 transition-opacity">
|
||
<svg class="w-48 h-48 text-primary" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM11 19.93C7.05 19.43 4 16.05 4 12C4 7.95 7.05 4.57 11 4.07V19.93ZM13 4.07C16.95 4.57 20 7.95 20 12C20 16.05 16.95 19.43 13 19.93V4.07Z"/></svg>
|
||
</div>
|
||
<div class="relative z-10 flex flex-col justify-center h-full">
|
||
<div class="w-12 h-12 bg-purple-100 text-purple-600 rounded-xl flex items-center justify-center mb-5">
|
||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"/></svg>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-slate-900 mb-2">高活跃沉浸式社区</h3>
|
||
<p class="text-slate-600 max-w-md">与数万名同龄人探讨难题，获取名师独家冲刺资料。支持 Markdown 与公式渲染，交流毫无障碍。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Stats -->
|
||
<div class="bg-white rounded-3xl p-10 shadow-soft border border-slate-100 bg-[url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23f1f5f9\' fill-opacity=\'1\' fill-rule=\'evenodd\'%3E%3Ccircle cx=\'3\' cy=\'3\' r=\'3\'/%3E%3Cg%3E%3C/g%3E%3C/svg%3E')]">
|
||
<h2 class="text-2xl font-bold text-center text-slate-800 mb-8">平台数据一览</h2>
|
||
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 text-center divide-y sm:divide-y-0 sm:divide-x divide-slate-100 max-w-2xl mx-auto">
|
||
<div class="pt-6 sm:pt-0">
|
||
<div class="relative inline-block">
|
||
<div class="absolute inset-0 bg-blue-400/10 rounded-full blur-xl animate-pulse"></div>
|
||
<div id="stat-online2" class="relative text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-cyan-500 mb-3 drop-shadow-sm" data-target="{{ online_count }}">0</div>
|
||
</div>
|
||
<div class="text-slate-500 font-medium tracking-wide">实时在线</div>
|
||
</div>
|
||
<div class="pt-6 sm:pt-0">
|
||
<div class="relative inline-block">
|
||
<div class="absolute inset-0 bg-green-400/10 rounded-full blur-xl animate-pulse"></div>
|
||
<div id="stat-contests2" class="relative text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-green-500 to-emerald-500 mb-3 drop-shadow-sm" data-target="{{ contest_count }}">0</div>
|
||
</div>
|
||
<div class="text-slate-500 font-medium tracking-wide">杯赛总数</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|
||
|
||
{% block scripts %}
|
||
<script>
|
||
// ===== Hero 粒子系统 =====
|
||
(function() {
|
||
const canvas = document.getElementById('hero-particles');
|
||
if (!canvas) return;
|
||
const ctx = canvas.getContext('2d');
|
||
const container = canvas.parentElement;
|
||
|
||
// 颜色池（蓝/紫/青）
|
||
const COLORS = [
|
||
[96, 165, 250], // blue-400
|
||
[129, 140, 248], // indigo-400
|
||
[192, 132, 252], // purple-400
|
||
[34, 211, 238], // cyan-400
|
||
[99, 102, 241], // indigo-500
|
||
];
|
||
const PARTICLE_COUNT = 120;
|
||
const CONNECT_DIST = 120;
|
||
const MOUSE_DIST = 150;
|
||
|
||
let W, H, particles = [], explosions = [];
|
||
let mouse = { x: -9999, y: -9999, active: false };
|
||
|
||
function resize() {
|
||
W = canvas.width = container.offsetWidth;
|
||
H = canvas.height = container.offsetHeight;
|
||
}
|
||
resize();
|
||
const ro = new ResizeObserver(resize);
|
||
ro.observe(container);
|
||
|
||
function randColor() { return COLORS[Math.floor(Math.random() * COLORS.length)]; }
|
||
|
||
// 初始化粒子
|
||
for (let i = 0; i < PARTICLE_COUNT; i++) {
|
||
particles.push({
|
||
x: Math.random() * W,
|
||
y: Math.random() * H,
|
||
vx: (Math.random() - 0.5) * 0.6,
|
||
vy: (Math.random() - 0.5) * 0.6,
|
||
r: Math.random() * 2 + 1,
|
||
color: randColor(),
|
||
alpha: Math.random() * 0.5 + 0.3,
|
||
});
|
||
}
|
||
|
||
// 鼠标事件
|
||
canvas.addEventListener('mousemove', e => {
|
||
const rect = canvas.getBoundingClientRect();
|
||
mouse.x = e.clientX - rect.left;
|
||
mouse.y = e.clientY - rect.top;
|
||
mouse.active = true;
|
||
});
|
||
canvas.addEventListener('mouseleave', () => { mouse.active = false; });
|
||
|
||
// 点击爆炸
|
||
canvas.addEventListener('click', e => {
|
||
const rect = canvas.getBoundingClientRect();
|
||
const cx = e.clientX - rect.left;
|
||
const cy = e.clientY - rect.top;
|
||
const count = 30 + Math.floor(Math.random() * 10);
|
||
for (let i = 0; i < count; i++) {
|
||
const angle = Math.random() * Math.PI * 2;
|
||
const speed = Math.random() * 4 + 2;
|
||
const c = randColor();
|
||
explosions.push({
|
||
x: cx, y: cy,
|
||
vx: Math.cos(angle) * speed,
|
||
vy: Math.sin(angle) * speed,
|
||
r: Math.random() * 2.5 + 1,
|
||
color: [Math.min(c[0] + 80, 255), Math.min(c[1] + 80, 255), Math.min(c[2] + 80, 255)],
|
||
alpha: 1,
|
||
decay: Math.random() * 0.015 + 0.015,
|
||
});
|
||
}
|
||
});
|
||
|
||
function draw() {
|
||
ctx.clearRect(0, 0, W, H);
|
||
|
||
// 更新 & 绘制常驻粒子
|
||
for (let i = 0; i < particles.length; i++) {
|
||
const p = particles[i];
|
||
p.x += p.vx; p.y += p.vy;
|
||
if (p.x < 0 || p.x > W) p.vx *= -1;
|
||
if (p.y < 0 || p.y > H) p.vy *= -1;
|
||
|
||
// 鼠标吸引
|
||
if (mouse.active) {
|
||
const dx = mouse.x - p.x, dy = mouse.y - p.y;
|
||
const dist = Math.sqrt(dx * dx + dy * dy);
|
||
if (dist < MOUSE_DIST && dist > 0) {
|
||
const force = (MOUSE_DIST - dist) / MOUSE_DIST * 0.015;
|
||
p.vx += dx / dist * force;
|
||
p.vy += dy / dist * force;
|
||
}
|
||
// 鼠标连线
|
||
if (dist < MOUSE_DIST) {
|
||
const a = (1 - dist / MOUSE_DIST) * 0.4;
|
||
ctx.beginPath();
|
||
ctx.moveTo(p.x, p.y);
|
||
ctx.lineTo(mouse.x, mouse.y);
|
||
ctx.strokeStyle = 'rgba(' + p.color[0] + ',' + p.color[1] + ',' + p.color[2] + ',' + a + ')';
|
||
ctx.lineWidth = 0.6;
|
||
ctx.stroke();
|
||
}
|
||
}
|
||
|
||
// 限速
|
||
const spd = Math.sqrt(p.vx * p.vx + p.vy * p.vy);
|
||
if (spd > 1.5) { p.vx *= 1.5 / spd; p.vy *= 1.5 / spd; }
|
||
|
||
// 粒子间连线
|
||
for (let j = i + 1; j < particles.length; j++) {
|
||
const q = particles[j];
|
||
const dx = p.x - q.x, dy = p.y - q.y;
|
||
const dist = Math.sqrt(dx * dx + dy * dy);
|
||
if (dist < CONNECT_DIST) {
|
||
const a = (1 - dist / CONNECT_DIST) * 0.15;
|
||
ctx.beginPath();
|
||
ctx.moveTo(p.x, p.y);
|
||
ctx.lineTo(q.x, q.y);
|
||
ctx.strokeStyle = 'rgba(' + p.color[0] + ',' + p.color[1] + ',' + p.color[2] + ',' + a + ')';
|
||
ctx.lineWidth = 0.5;
|
||
ctx.stroke();
|
||
}
|
||
}
|
||
|
||
// 绘制粒子（发光）
|
||
ctx.save();
|
||
ctx.shadowBlur = 8;
|
||
ctx.shadowColor = 'rgba(' + p.color[0] + ',' + p.color[1] + ',' + p.color[2] + ',0.6)';
|
||
ctx.beginPath();
|
||
ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
|
||
ctx.fillStyle = 'rgba(' + p.color[0] + ',' + p.color[1] + ',' + p.color[2] + ',' + p.alpha + ')';
|
||
ctx.fill();
|
||
ctx.restore();
|
||
}
|
||
|
||
// 更新 & 绘制爆炸粒子
|
||
for (let i = explosions.length - 1; i >= 0; i--) {
|
||
const e = explosions[i];
|
||
e.x += e.vx; e.y += e.vy;
|
||
e.vx *= 0.97; e.vy *= 0.97;
|
||
e.alpha -= e.decay;
|
||
if (e.alpha <= 0) { explosions.splice(i, 1); continue; }
|
||
ctx.save();
|
||
ctx.shadowBlur = 12;
|
||
ctx.shadowColor = 'rgba(' + e.color[0] + ',' + e.color[1] + ',' + e.color[2] + ',0.8)';
|
||
ctx.beginPath();
|
||
ctx.arc(e.x, e.y, e.r, 0, Math.PI * 2);
|
||
ctx.fillStyle = 'rgba(' + e.color[0] + ',' + e.color[1] + ',' + e.color[2] + ',' + e.alpha + ')';
|
||
ctx.fill();
|
||
ctx.restore();
|
||
}
|
||
|
||
requestAnimationFrame(draw);
|
||
}
|
||
requestAnimationFrame(draw);
|
||
})();
|
||
|
||
// countUp 动画
|
||
function countUp(el, target, duration) {
|
||
if (target === 0) { el.textContent = '0'; return; }
|
||
let start = 0;
|
||
const step = Math.max(1, Math.floor(target / (duration / 16)));
|
||
const timer = setInterval(() => {
|
||
start += step;
|
||
if (start >= target) { start = target; clearInterval(timer); }
|
||
el.textContent = start.toLocaleString();
|
||
}, 16);
|
||
}
|
||
|
||
// 启动所有 countUp 元素
|
||
document.querySelectorAll('[data-target]').forEach(el => {
|
||
const target = parseInt(el.dataset.target) || 0;
|
||
countUp(el, target, 1500);
|
||
});
|
||
</script>
|
||
{% endblock %} |