Kingsmai/lshcup.org
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
xiaomai
2025-10-05 13:31:19 +08:00
commit 0ede6d67b9
9 changed files with 4080 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

714
contact.html Normal file
View File

@@ -0,0 +1,714 @@
<!DOCTYPE html>
<html lang="zh" class="light">
<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
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
/>
<style>
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap");
body {
font-family: "Noto Sans SC", sans-serif;
}
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: all 0.6s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
.theme-transition {
transition: background-color 0.3s ease, color 0.3s ease;
}
/* 联系卡片样式 */
.contact-card {
transition: all 0.3s ease;
}
.contact-card:hover {
transform: translateY(-5px);
}
/* 表单样式 */
.form-input:focus {
border-color: #d97706;
box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.1);
}
/* 地图容器 */
.map-container {
background: linear-gradient(135deg, #fef3c7 0%, #fefce8 100%);
border-radius: 12px;
}
</style>
</head>
<body class="theme-transition bg-white text-gray-800">
<!-- 导航栏 -->
<header
class="fixed w-full bg-white/90 backdrop-blur-sm shadow-sm z-50 theme-transition"
>
<div
class="container mx-auto px-4 py-3 flex justify-between items-center"
>
<div class="flex items-center">
<div
class="w-10 h-10 rounded-full bg-amber-500 flex items-center justify-center text-white font-bold mr-2"
>
林
</div>
<div>
<h1 class="text-xl font-bold text-amber-600">林赛花杯</h1>
<p class="text-xs text-gray-500 -mt-1">写作比赛</p>
</div>
</div>
<nav class="hidden md:flex space-x-8">
<a
href="index.html"
class="font-medium text-gray-600 hover:text-amber-500 transition"
>首页</a
>
<a
href="about.html"
class="font-medium text-gray-600 hover:text-amber-500 transition"
>关于比赛</a
>
<a
href="awards.html"
class="font-medium text-gray-600 hover:text-amber-500 transition"
>奖项设置</a
>
<a
href="works.html"
class="font-medium text-gray-600 hover:text-amber-500 transition"
>优秀作品</a
>
<a
href="contact.html"
class="font-medium text-amber-600 border-b-2 border-amber-500 pb-1"
>联系咨询</a
>
</nav>
<div class="flex items-center space-x-4">
<!-- 主题切换 -->
<button
id="theme-toggle"
class="p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition"
>
<i class="fas fa-moon text-gray-600"></i>
</button>
<!-- 移动端菜单按钮 -->
<button
id="mobile-menu-toggle"
class="md:hidden p-2 rounded-lg bg-gray-100"
>
<i class="fas fa-bars text-gray-700"></i>
</button>
</div>
</div>
<!-- 移动端菜单 -->
<div
id="mobile-menu"
class="md:hidden bg-white shadow-lg py-4 px-6 hidden theme-transition"
>
<div class="flex flex-col space-y-4">
<a href="index.html" class="font-medium text-gray-600">首页</a>
<a href="about.html" class="font-medium text-gray-600">关于比赛</a>
<a href="awards.html" class="font-medium text-gray-600">奖项设置</a>
<a href="works.html" class="font-medium text-gray-600">优秀作品</a>
<a href="contact.html" class="font-medium text-amber-600">联系咨询</a>
</div>
</div>
</header>
<!-- 页面标题 -->
<section
class="pt-32 pb-16 bg-gradient-to-br from-amber-50 to-amber-100 theme-transition"
>
<div class="container mx-auto px-4">
<div class="max-w-3xl mx-auto text-center">
<h1 class="text-4xl font-bold text-amber-800 mb-4">联系咨询</h1>
<p class="text-lg text-gray-600">
如有任何关于林赛花杯写作比赛的疑问，欢迎通过以下方式联系我们
</p>
</div>
</div>
</section>
<!-- 联系信息 -->
<section class="py-16 bg-white theme-transition">
<div class="container mx-auto px-4">
<div class="max-w-5xl mx-auto">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- 主办单位 -->
<div
class="contact-card bg-amber-50 rounded-2xl p-6 text-center fade-in"
>
<div
class="w-16 h-16 rounded-full bg-amber-500 flex items-center justify-center text-white text-2xl mx-auto mb-4"
>
<i class="fas fa-landmark"></i>
</div>
<h3 class="text-xl font-bold text-amber-800 mb-4">主办单位</h3>
<div class="space-y-3 text-left">
<div class="flex items-start">
<i class="fas fa-building text-amber-600 mt-1 mr-3"></i>
<div>
<p class="font-medium">林赛花教育基金</p>
<p class="text-sm text-gray-600">隶属于妙妙机构</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-map-marker-alt text-amber-600 mt-1 mr-3"></i>
<div>
<p class="font-medium">地址</p>
<p class="text-sm text-gray-600">
马来西亚柔佛州新山市<br />教育路88号
</p>
</div>
</div>
</div>
</div>
<!-- 承办单位 -->
<div
class="contact-card bg-amber-50 rounded-2xl p-6 text-center fade-in"
>
<div
class="w-16 h-16 rounded-full bg-amber-500 flex items-center justify-center text-white text-2xl mx-auto mb-4"
>
<i class="fas fa-handshake"></i>
</div>
<h3 class="text-xl font-bold text-amber-800 mb-4">承办单位</h3>
<div class="space-y-3 text-left">
<div class="flex items-start">
<i class="fas fa-school text-amber-600 mt-1 mr-3"></i>
<div>
<p class="font-medium">柔佛州华校校友会联合会</p>
<p class="text-sm text-gray-600">(PPBP)</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-map-marker-alt text-amber-600 mt-1 mr-3"></i>
<div>
<p class="font-medium">地址</p>
<p class="text-sm text-gray-600">
马来西亚柔佛州峇株巴辖<br />华校路15号
</p>
</div>
</div>
</div>
</div>
<!-- 联系方式 -->
<div
class="contact-card bg-amber-50 rounded-2xl p-6 text-center fade-in"
>
<div
class="w-16 h-16 rounded-full bg-amber-500 flex items-center justify-center text-white text-2xl mx-auto mb-4"
>
<i class="fas fa-address-book"></i>
</div>
<h3 class="text-xl font-bold text-amber-800 mb-4">联系方式</h3>
<div class="space-y-3 text-left">
<div class="flex items-start">
<i class="fas fa-envelope text-amber-600 mt-1 mr-3"></i>
<div>
<p class="font-medium">电子邮箱</p>
<p class="text-sm text-gray-600">contact@linsaihua.org</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-phone text-amber-600 mt-1 mr-3"></i>
<div>
<p class="font-medium">联系电话</p>
<p class="text-sm text-gray-600">+60 7-123 4567</p>
</div>
</div>
<div class="flex items-start">
<i class="fab fa-whatsapp text-amber-600 mt-1 mr-3"></i>
<div>
<p class="font-medium">WhatsApp</p>
<p class="text-sm text-gray-600">+60 12-345 6789</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 咨询表单和地图 -->
<section class="py-16 bg-gray-50 theme-transition">
<div class="container mx-auto px-4">
<div class="max-w-5xl mx-auto">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
<!-- 咨询表单 -->
<div class="fade-in">
<h2 class="text-3xl font-bold text-amber-800 mb-4">咨询表单</h2>
<p class="text-gray-600 mb-8">
如有任何关于林赛花杯写作比赛的疑问，请填写以下表单，我们将尽快回复您。
</p>
<div class="bg-white rounded-2xl shadow-md p-8">
<form id="contact-form">
<div class="mb-6">
<label
for="name"
class="block text-gray-700 font-medium mb-2"
>姓名</label
>
<input
type="text"
id="name"
class="form-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none"
placeholder="请输入您的姓名"
/>
</div>
<div class="mb-6">
<label
for="school"
class="block text-gray-700 font-medium mb-2"
>学校</label
>
<input
type="text"
id="school"
class="form-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none"
placeholder="请输入您的学校名称"
/>
</div>
<div class="mb-6">
<label
for="email"
class="block text-gray-700 font-medium mb-2"
>电子邮箱</label
>
<input
type="email"
id="email"
class="form-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none"
placeholder="请输入您的电子邮箱"
/>
</div>
<div class="mb-6">
<label
for="category"
class="block text-gray-700 font-medium mb-2"
>咨询类别</label
>
<select
id="category"
class="form-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none"
>
<option value="">请选择咨询类别</option>
<option value="competition">比赛相关</option>
<option value="submission">作品提交</option>
<option value="award">奖项设置</option>
<option value="cooperation">合作事宜</option>
<option value="other">其他</option>
</select>
</div>
<div class="mb-6">
<label
for="message"
class="block text-gray-700 font-medium mb-2"
>咨询内容</label
>
<textarea
id="message"
rows="5"
class="form-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none"
placeholder="请输入您的咨询内容"
></textarea>
</div>
<div class="mb-6">
<div class="flex items-center">
<input type="checkbox" id="consent" class="mr-2" />
<label for="consent" class="text-gray-700 text-sm"
>我同意林赛花教育基金收集我的个人信息用于回复咨询</label
>
</div>
</div>
<button
type="button"
id="submit-btn"
class="w-full bg-amber-500 text-white py-3 rounded-lg font-medium hover:bg-amber-600 transition shadow-md"
>
提交咨询
</button>
<div id="form-message" class="mt-4 text-center hidden"></div>
</form>
</div>
</div>
<!-- 地图和重要信息 -->
<div class="fade-in">
<h2 class="text-3xl font-bold text-amber-800 mb-4">位置信息</h2>
<p class="text-gray-600 mb-8">
林赛花教育基金与柔佛州华校校友会联合会的位置信息
</p>
<!-- 地图占位 -->
<div
class="map-container h-64 rounded-xl mb-8 flex items-center justify-center"
>
<div class="text-center">
<i
class="fas fa-map-marked-alt text-amber-500 text-4xl mb-4"
></i>
<p class="text-amber-700 font-medium">
柔佛州华文教育机构分布图
</p>
<p class="text-amber-600 text-sm mt-2">地图加载中...</p>
</div>
</div>
<!-- 重要提醒 -->
<div class="bg-white rounded-2xl shadow-md p-6 mb-8">
<h3
class="text-xl font-bold text-amber-800 mb-4 flex items-center"
>
<i class="fas fa-exclamation-circle text-amber-500 mr-2"></i>
重要提醒
</h3>
<ul class="space-y-3 text-gray-600">
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>咨询回复时间：工作日1-3天内</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>比赛相关咨询请注明参赛组别（初中/高中）</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>紧急事宜建议通过电话或WhatsApp联系</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>由于生成式AI的兴起，本比赛暂不支持线上投稿</span>
</li>
</ul>
</div>
<!-- 办公时间 -->
<div class="bg-white rounded-2xl shadow-md p-6">
<h3
class="text-xl font-bold text-amber-800 mb-4 flex items-center"
>
<i class="fas fa-clock text-amber-500 mr-2"></i>
办公时间
</h3>
<div class="space-y-2 text-gray-600">
<div class="flex justify-between">
<span>周一至周五</span>
<span class="font-medium">9:00 - 17:00</span>
</div>
<div class="flex justify-between">
<span>周六</span>
<span class="font-medium">9:00 - 13:00</span>
</div>
<div class="flex justify-between">
<span>周日及公共假期</span>
<span class="font-medium">休息</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 常见问题 -->
<section class="py-16 bg-white theme-transition">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-center text-amber-800 mb-4">
常见问题
</h2>
<p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">
以下是一些关于林赛花杯写作比赛的常见问题解答
</p>
<div class="space-y-6">
<!-- 问题1 -->
<div class="bg-gray-50 rounded-xl p-6 fade-in">
<h3
class="text-xl font-bold text-amber-800 mb-3 flex items-center"
>
<i class="fas fa-question-circle text-amber-500 mr-2"></i>
如何参加林赛花杯写作比赛？
</h3>
<p class="text-gray-600">
参赛者需通过所在学校统一报名。每所学校设有负责老师收集作品并提交至柔佛州华校校友会联合会。个人投稿暂不接受。
</p>
</div>
<!-- 问题2 -->
<div class="bg-gray-50 rounded-xl p-6 fade-in">
<h3
class="text-xl font-bold text-amber-800 mb-3 flex items-center"
>
<i class="fas fa-question-circle text-amber-500 mr-2"></i>
比赛是否有报名费用？
</h3>
<p class="text-gray-600">
林赛花杯写作比赛完全免费，不收取任何报名费用。所有奖金及活动经费由林赛花教育基金提供。
</p>
</div>
<!-- 问题3 -->
<div class="bg-gray-50 rounded-xl p-6 fade-in">
<h3
class="text-xl font-bold text-amber-800 mb-3 flex items-center"
>
<i class="fas fa-question-circle text-amber-500 mr-2"></i>
作品提交有什么要求？
</h3>
<p class="text-gray-600">
作品需为原创，未在其他比赛中获奖或公开发表。初中组字数800-1200字，高中组字数1200-1500字。具体格式要求请参考每届比赛章程。
</p>
</div>
<!-- 问题4 -->
<div class="bg-gray-50 rounded-xl p-6 fade-in">
<h3
class="text-xl font-bold text-amber-800 mb-3 flex items-center"
>
<i class="fas fa-question-circle text-amber-500 mr-2"></i>
为什么暂不支持线上投稿？
</h3>
<p class="text-gray-600">
由于生成式AI技术的兴起，为确保比赛的公平性和作品的原创性，我们暂不接受线上投稿。所有作品需通过学校统一收集并提交纸质版。
</p>
</div>
<!-- 问题5 -->
<div class="bg-gray-50 rounded-xl p-6 fade-in">
<h3
class="text-xl font-bold text-amber-800 mb-3 flex items-center"
>
<i class="fas fa-question-circle text-amber-500 mr-2"></i>
如何获取比赛最新信息？
</h3>
<p class="text-gray-600">
比赛最新信息将通过各华文学校通知，同时也会在本网站更新。您也可以通过关注我们的社交媒体账号获取最新动态。
</p>
</div>
</div>
</div>
</div>
</section>
<!-- 统计数据 -->
<section class="py-16 bg-amber-500 text-white">
<div class="container mx-auto px-4">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
<div class="fade-in">
<div class="text-4xl font-bold mb-2">9</div>
<div class="text-amber-100">成功举办届数</div>
</div>
<div class="fade-in">
<div class="text-4xl font-bold mb-2">320+</div>
<div class="text-amber-100">累计参赛作品</div>
</div>
<div class="fade-in">
<div class="text-4xl font-bold mb-2">42</div>
<div class="text-amber-100">合作学校</div>
</div>
<div class="fade-in">
<div class="text-4xl font-bold mb-2">96</div>
<div class="text-amber-100">获奖学生</div>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="bg-gray-800 text-white pt-12 pb-6 theme-transition">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
<div>
<h3 class="text-xl font-bold mb-4 text-amber-400">
林赛花教育基金
</h3>
<p class="text-gray-300">
致力于推广华文教育与中华传统文化，培养青少年写作能力与人文素养。
</p>
</div>
<div>
<h3 class="text-lg font-semibold mb-4 text-amber-400">主办单位</h3>
<ul class="space-y-2 text-gray-300">
<li>妙妙机构</li>
<li>林赛花教育基金</li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4 text-amber-400">承办单位</h3>
<ul class="space-y-2 text-gray-300">
<li>柔佛州华校校友会联合会 (PPBP)</li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4 text-amber-400">联系信息</h3>
<ul class="space-y-2 text-gray-300">
<li>
<i class="fas fa-envelope mr-2"></i> contact@linsaihua.org
</li>
<li><i class="fas fa-phone mr-2"></i> +60 7-123 4567</li>
<li><i class="fas fa-map-marker-alt mr-2"></i> 马来西亚柔佛州</li>
</ul>
</div>
</div>
<div class="border-t border-gray-700 pt-6 text-center text-gray-400">
<p>
&copy; 2023 林赛花教育基金·林赛花杯官方网站 |
非官方展示站，仅供公益学习使用
</p>
</div>
</div>
</footer>
<script>
document.addEventListener("DOMContentLoaded", function () {
// 表单提交处理
const submitBtn = document.getElementById("submit-btn");
const formMessage = document.getElementById("form-message");
submitBtn.addEventListener("click", function () {
const name = document.getElementById("name").value;
const email = document.getElementById("email").value;
const consent = document.getElementById("consent").checked;
// 简单验证
if (!name || !email) {
showMessage("请填写必填字段", "error");
return;
}
if (!consent) {
showMessage("请同意个人信息收集条款", "error");
return;
}
// 模拟提交成功
showMessage("咨询提交成功！我们将在1-3个工作日内回复您。", "success");
// 清空表单
document.getElementById("contact-form").reset();
});
function showMessage(text, type) {
formMessage.textContent = text;
formMessage.className = "mt-4 text-center";
if (type === "success") {
formMessage.classList.add("text-green-600");
} else {
formMessage.classList.add("text-red-600");
}
formMessage.classList.remove("hidden");
// 3秒后隐藏消息
setTimeout(() => {
formMessage.classList.add("hidden");
}, 5000);
}
// 滚动动画
const fadeElements = document.querySelectorAll(".fade-in");
const fadeInOnScroll = function () {
fadeElements.forEach((element) => {
const elementTop = element.getBoundingClientRect().top;
const elementVisible = 150;
if (elementTop < window.innerHeight - elementVisible) {
element.classList.add("visible");
}
});
};
// 初始检查
fadeInOnScroll();
// 滚动时检查
window.addEventListener("scroll", fadeInOnScroll);
// 移动端菜单切换
const mobileMenuToggle = document.getElementById("mobile-menu-toggle");
const mobileMenu = document.getElementById("mobile-menu");
if (mobileMenuToggle) {
mobileMenuToggle.addEventListener("click", function () {
mobileMenu.classList.toggle("hidden");
const icon = this.querySelector("i");
if (mobileMenu.classList.contains("hidden")) {
icon.className = "fas fa-bars";
} else {
icon.className = "fas fa-times";
}
});
}
// 主题切换
const themeToggle = document.getElementById("theme-toggle");
const themeIcon = themeToggle.querySelector("i");
// 检查本地存储的主题设置
const currentTheme = localStorage.getItem("theme") || "light";
document.documentElement.className = currentTheme;
updateThemeIcon(currentTheme);
// 主题切换事件
themeToggle.addEventListener("click", function () {
const currentTheme = document.documentElement.classList.contains(
"dark"
)
? "dark"
: "light";
const newTheme = currentTheme === "light" ? "dark" : "light";
document.documentElement.className = newTheme;
localStorage.setItem("theme", newTheme);
updateThemeIcon(newTheme);
});
// 更新主题图标
function updateThemeIcon(theme) {
if (theme === "dark") {
themeIcon.className = "fas fa-sun";
} else {
themeIcon.className = "fas fa-moon";
}
}
});
</script>
</body>
</html>