715 lines
27 KiB
HTML
715 lines
27 KiB
HTML
<!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>
|
||
© 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>
|