871e66a13a
This commit introduces a new mobile-first sponsor list and restructures the event landing pages. Key changes include: - A new responsive sponsor list page built with Vue.js and Tailwind CSS, optimized for SEO and on-site viewing. - The main event index page is now a QR code display for easy access to the mobile list. - The original landing page is refactored with Tailwind CSS and moved to a new `/landing` directory. - Umami analytics script is integrated across all pages for usage tracking.
254 lines
10 KiB
HTML
254 lines
10 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
<title>永平捷兔会30周年庆大跑晚宴</title>
|
||
|
||
<!-- 使用 @tailwindcss/browser CDN（你已提供） -->
|
||
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
||
|
||
<style>
|
||
/* 装饰性 SVG 图案与剪影仍用少量自定义样式 */
|
||
.bg-pattern {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 0;
|
||
opacity: 0.03;
|
||
background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23d4af37' fill-rule='evenodd'/%3E%3C/svg%3E");
|
||
background-repeat: repeat;
|
||
}
|
||
|
||
.runner-silhouette {
|
||
position: fixed;
|
||
bottom: 0;
|
||
width: 220px;
|
||
height: 220px;
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
opacity: 0.18;
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.runner-left {
|
||
left: 5%;
|
||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M20,70 C30,50 40,30 50,20 C60,30 70,50 80,70' stroke='%23d4af37' stroke-width='3' fill='none'/><circle cx='20' cy='70' r='5' fill='%23d4af37'/><circle cx='80' cy='70' r='5' fill='%23d4af37'/></svg>");
|
||
}
|
||
.runner-right {
|
||
right: 5%;
|
||
transform: scaleX(-1);
|
||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M20,70 C30,50 40,30 50,20 C60,30 70,50 80,70' stroke='%23d4af37' stroke-width='3' fill='none'/><circle cx='20' cy='70' r='5' fill='%23d4af37'/><circle cx='80' cy='70' r='5' fill='%23d4af37'/></svg>");
|
||
}
|
||
|
||
/* Anniversary 横线装饰与 ribbon 仍需伪元素 —— 这里用 minimal CSS */
|
||
.anniversary {
|
||
position: relative;
|
||
--gold: #d4af37;
|
||
}
|
||
.anniversary::before,
|
||
.anniversary::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 50%;
|
||
width: 200px;
|
||
height: 3px;
|
||
background: linear-gradient(
|
||
90deg,
|
||
transparent,
|
||
var(--gold),
|
||
transparent
|
||
);
|
||
transform: translateY(-50%);
|
||
}
|
||
.anniversary::before {
|
||
left: -220px;
|
||
}
|
||
.anniversary::after {
|
||
right: -220px;
|
||
}
|
||
|
||
.ribbon {
|
||
position: absolute;
|
||
width: 150px;
|
||
height: 150px;
|
||
background: #d4af37;
|
||
transform: rotate(45deg);
|
||
top: -75px;
|
||
right: -75px;
|
||
z-index: 20;
|
||
}
|
||
|
||
@media (max-width: 1200px) {
|
||
.anniversary::before,
|
||
.anniversary::after {
|
||
width: 150px;
|
||
left: -170px;
|
||
right: -170px;
|
||
}
|
||
}
|
||
@media (max-width: 768px) {
|
||
.anniversary::before,
|
||
.anniversary::after {
|
||
width: 100px;
|
||
left: -120px;
|
||
right: -120px;
|
||
}
|
||
}
|
||
@media (max-width: 480px) {
|
||
.anniversary::before,
|
||
.anniversary::after {
|
||
width: 60px;
|
||
left: -70px;
|
||
right: -70px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body
|
||
class="min-h-screen text-gray-100 relative overflow-x-hidden"
|
||
style="
|
||
background: linear-gradient(
|
||
135deg,
|
||
#0c0c0c 0%,
|
||
#1a1a2e 50%,
|
||
#1e0b0b 100%
|
||
);
|
||
font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
|
||
"
|
||
>
|
||
<!-- 背景图案与剪影 -->
|
||
<div class="bg-pattern" aria-hidden="true"></div>
|
||
<div class="runner-silhouette runner-left" aria-hidden="true"></div>
|
||
<div class="runner-silhouette runner-right" aria-hidden="true"></div>
|
||
|
||
<div class="max-w-7xl mx-auto px-6 py-10 relative z-10">
|
||
<header class="text-center mb-8">
|
||
<h1
|
||
class="inline-block text-[#d4af37] text-4xl md:text-6xl font-extrabold tracking-widest drop-shadow-lg"
|
||
>
|
||
永平捷兔会
|
||
</h1>
|
||
<p
|
||
class="mt-3 text-lg md:text-xl text-gray-200 font-light tracking-wider"
|
||
>
|
||
三十载奔跑，荣耀同行
|
||
</p>
|
||
|
||
<div class="mt-8 inline-block anniversary">
|
||
<div
|
||
class="text-[#d4af37] font-extrabold text-[4rem] md:text-[8rem] leading-none transform-gpu"
|
||
style="text-shadow: 0 0 20px rgba(212, 175, 55, 0.7)"
|
||
>
|
||
30
|
||
</div>
|
||
</div>
|
||
|
||
<h2
|
||
class="mt-6 text-2xl md:text-4xl text-gray-100 font-medium drop-shadow"
|
||
>
|
||
周年庆大跑晚宴
|
||
</h2>
|
||
</header>
|
||
|
||
<main class="flex flex-col items-center">
|
||
<section
|
||
class="w-full text-center max-w-3xl bg-white/5 backdrop-blur-sm border border-[rgba(212,175,55,0.15)] rounded-2xl p-6 md:p-10 mb-10"
|
||
>
|
||
<h3 class="text-2xl md:text-3xl font-semibold text-gray-100 mb-4">
|
||
欢迎莅临30周年庆典
|
||
</h3>
|
||
<p class="text-gray-300 leading-relaxed text-base md:text-lg">
|
||
三十载风雨同舟，感恩每一位捷兔会员的陪伴与支持。今晚，让我们共同庆祝这个荣耀时刻，回顾辉煌历程，展望美好未来！
|
||
</p>
|
||
</section>
|
||
|
||
<section class="w-full grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
<article
|
||
class="relative bg-white/5 border border-[rgba(212,175,55,0.18)] rounded-2xl p-6 md:p-8 text-center transition-transform transform hover:-translate-y-2 hover:shadow-2xl overflow-hidden backdrop-blur-sm"
|
||
>
|
||
<div class="ribbon hidden md:block" aria-hidden="true"></div>
|
||
<div class="text-4xl mb-4">🏃♂️</div>
|
||
<h3 class="text-2xl font-semibold mb-3">活动流程</h3>
|
||
<p class="text-gray-300 mb-6">
|
||
查看大跑活动路线、时间安排及晚宴流程，不错过每一个精彩环节。
|
||
</p>
|
||
<a
|
||
href="./eventSchedule"
|
||
class="inline-block border-2 border-[#d4af37] text-[#d4af37] rounded-full px-6 py-2 text-lg font-medium hover:bg-[rgba(212,175,55,0.06)] transition"
|
||
>查看流程</a
|
||
>
|
||
</article>
|
||
|
||
<article
|
||
class="bg-white/5 border border-[rgba(212,175,55,0.18)] rounded-2xl p-6 md:p-8 text-center transition-transform transform hover:-translate-y-2 hover:shadow-2xl backdrop-blur-sm"
|
||
>
|
||
<div class="text-4xl mb-4">💎</div>
|
||
<h3 class="text-2xl font-semibold mb-3">赞助商列表</h3>
|
||
<p class="text-gray-300 mb-6">
|
||
感谢所有赞助商对本次活动的大力支持，让我们共同见证他们的品牌魅力。
|
||
</p>
|
||
<a
|
||
href="./sponsorList"
|
||
class="inline-block border-2 border-[#d4af37] text-[#d4af37] rounded-full px-6 py-2 text-lg font-medium hover:bg-[rgba(212,175,55,0.06)] transition"
|
||
>查看赞助商</a
|
||
>
|
||
</article>
|
||
|
||
<article
|
||
class="bg-white/5 border border-[rgba(212,175,55,0.18)] rounded-2xl p-6 md:p-8 text-center transition-transform transform hover:-translate-y-2 hover:shadow-2xl backdrop-blur-sm"
|
||
>
|
||
<div class="text-4xl mb-4">🏆</div>
|
||
<h3 class="text-2xl font-semibold mb-3">荣誉殿堂</h3>
|
||
<p class="text-gray-300 mb-6">
|
||
回顾捷兔会30年辉煌历程，见证会员们的荣耀时刻与珍贵回忆。
|
||
</p>
|
||
<a
|
||
href="./hallOfFame"
|
||
class="inline-block border-2 border-[#d4af37] text-[#d4af37] rounded-full px-6 py-2 text-lg font-medium hover:bg-[rgba(212,175,55,0.06)] transition"
|
||
>进入殿堂</a
|
||
>
|
||
</article>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="mt-12 text-center text-gray-400 text-sm">
|
||
© 2023 永平捷兔会 30周年庆典. 保留所有权利.
|
||
</footer>
|
||
</div>
|
||
|
||
<script>
|
||
// 轻量的页面加载与交互效果
|
||
document.addEventListener("DOMContentLoaded", () => {
|
||
const root = document.querySelector(".max-w-7xl");
|
||
if (root) {
|
||
root.style.opacity = 0;
|
||
root.style.transition = "opacity 1s ease";
|
||
setTimeout(() => (root.style.opacity = 1), 200);
|
||
}
|
||
|
||
// 点击按钮的反馈并导航
|
||
document.querySelectorAll("a").forEach((a) => {
|
||
a.addEventListener("click", (e) => {
|
||
const href = a.getAttribute("href");
|
||
if (!href || href.startsWith("http")) return; // 保持正常外链行为
|
||
e.preventDefault();
|
||
a.style.transform = "scale(0.96)";
|
||
setTimeout(() => (window.location.href = href), 220);
|
||
});
|
||
});
|
||
|
||
// Anniversary 脉冲（用 transform）
|
||
const ann = document.querySelector(".anniversary > div");
|
||
if (ann) {
|
||
setInterval(() => {
|
||
ann.style.transform = "scale(1.05)";
|
||
setTimeout(() => (ann.style.transform = "scale(1)"), 500);
|
||
}, 3000);
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|