initial commit
This commit is contained in:
xiaomai
104
PROMPT.md
Normal file
104
PROMPT.md
Normal file
@@ -0,0 +1,104 @@
|
|||||||
|
# 项目背景说明（非常重要，用于防止信息不对称）
|
||||||
|
|
||||||
|
本项目名为「林赛花教育基金·林赛花杯官方网站」，旨在为马来西亚柔佛州一项真实存在的华文写作比赛建立一个独立展示网站。
|
||||||
|
该比赛由「妙妙机构」旗下的「林赛花教育基金」主办，柔佛州华校校友会联合会（PPBP）承办，面向独中及国中学生，提倡中文写作与中华传统美德。
|
||||||
|
由于防火长城的限制，部分中文AI模型可能检索不到外网资料，因此请完全依据此说明创建内容。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# 目标与风格要求
|
||||||
|
|
||||||
|
请为这个网站生成一个「**简约、现代、教育公益风格**」的纯 HTML 网站原型（可以是多文件结构）。
|
||||||
|
整个网站主要用于：
|
||||||
|
1. 介绍「林赛花教育基金」及「林赛花杯写作比赛」；
|
||||||
|
2. 展示历年比赛的新闻、获奖作品与照片；
|
||||||
|
3. 提供最新一届比赛的报名或资讯通道；
|
||||||
|
4. 包含一个投稿 / 联系表单（静态展示即可，不需功能）；
|
||||||
|
5. 提供奖项与主办方介绍页面。
|
||||||
|
|
||||||
|
输出请为纯 HTML + CSS + 少量 JS 的结构化网站（例如 index.html、about.html、awards.html、works.html、contact.html 等）。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# 网站结构建议
|
||||||
|
|
||||||
|
**文件结构（建议）**
|
||||||
|
```
|
||||||
|
|
||||||
|
/lin-sai-hwa-cup/
|
||||||
|
│
|
||||||
|
├── index.html # 首页（比赛简介 + 最新公告）
|
||||||
|
├── about.html # 基金与比赛背景
|
||||||
|
├── awards.html # 奖项设置与历年获奖名单
|
||||||
|
├── works.html # 往届优秀作品展示（列表 + 单页）
|
||||||
|
├── contact.html # 联系与投稿通道
|
||||||
|
├── assets/
|
||||||
|
│ ├── style.css # 全站样式（极简、柔和色系）
|
||||||
|
│ ├── script.js # 少量交互逻辑（菜单、滚动、切换）
|
||||||
|
│ └── images/ # 占位图或样例照片
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
**首页 index.html**
|
||||||
|
- 导航栏（LOGO、菜单）
|
||||||
|
- Hero 横幅：「林赛花杯写作比赛」 + 简短口号「以文字传递温情」
|
||||||
|
- 三个主要入口卡片：「比赛介绍」「历届作品」「我要投稿」
|
||||||
|
- 页脚含社交 / 主办方信息。
|
||||||
|
|
||||||
|
**about.html**
|
||||||
|
- 林赛花教育基金介绍（公益性质、妙妙机构支持）
|
||||||
|
- 比赛宗旨与历年举办情况简述。
|
||||||
|
- 组织单位 Logo（可用占位图表示）。
|
||||||
|
|
||||||
|
**awards.html**
|
||||||
|
- 奖项列表：初中组 / 高中组，历届总奖金信息。
|
||||||
|
- 表格展示历届获奖学校与学生。
|
||||||
|
- 简约卡片式布局。
|
||||||
|
|
||||||
|
**works.html**
|
||||||
|
- 按年份分区的往届优秀作品展示。
|
||||||
|
- 每篇作品用简短摘要和“阅读全文”按钮（链接到单页或弹出层）。
|
||||||
|
- 使用柔和背景色，阅读体验良好。
|
||||||
|
|
||||||
|
**contact.html**
|
||||||
|
- 投稿或咨询表单（静态展示）
|
||||||
|
- 姓名 / 学校 / 邮箱 / 消息
|
||||||
|
- 联系方式说明（含 PPBP 官方 WhatsApp / 邮寄地址）。
|
||||||
|
- 简单地图或主办方 LOGO 占位。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# 设计风格要求
|
||||||
|
|
||||||
|
- 色调：白底 + 淡金 + 灰棕（温暖、教育感）
|
||||||
|
- 字体：中文适配（如 Noto Sans SC 或思源黑体）
|
||||||
|
- 布局：居中、留白充足、响应式
|
||||||
|
- 使用圆角卡片、阴影轻柔、无多余动画
|
||||||
|
- 使用语义化 HTML 标签（header / main / section / footer）
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# 技术与格式要求
|
||||||
|
|
||||||
|
1. **必须输出纯 HTML / CSS / JS 文件内容**（不使用框架如 Vue/React）。
|
||||||
|
2. 每个文件请单独输出完整可运行内容。
|
||||||
|
3. 所有路径相对引用（如 ./assets/style.css）。
|
||||||
|
4. 不插入外部网络链接（防止被墙）。
|
||||||
|
5. 文案内容可根据项目背景自拟，但需保持真实感与公益性质。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# 附加创意指引（可自由发挥）
|
||||||
|
|
||||||
|
- 可加入时间线（历届赛事回顾）
|
||||||
|
- 可加入「优秀作品精选」阅读区
|
||||||
|
- 可添加「引用名言」区块（推广阅读与写作精神）
|
||||||
|
- 可加入淡入滚动动画（纯 CSS 或轻量 JS 实现）
|
||||||
|
- 可在页脚注明“非官方展示站，仅供公益学习使用”
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# 最终产出目标
|
||||||
|
|
||||||
|
输出一个**可直接打开浏览的纯 HTML 网站雏形**，展示林赛花教育基金与林赛花杯的文化与教育精神。
|
||||||
|
设计重点：简洁、美观、结构清晰、语义化良好，方便后续我以框架（Nuxt / Astro / Next）改造。
|
||||||
578
about.html
Normal file
578
about.html
Normal file
@@ -0,0 +1,578 @@
|
|||||||
|
<!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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 时间线样式 */
|
||||||
|
.timeline-item {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 2rem;
|
||||||
|
}
|
||||||
|
.timeline-item::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0.5rem;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #d97706;
|
||||||
|
}
|
||||||
|
.timeline-item::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 5px;
|
||||||
|
top: 1.5rem;
|
||||||
|
width: 2px;
|
||||||
|
height: calc(100% - 1rem);
|
||||||
|
background-color: #d97706;
|
||||||
|
}
|
||||||
|
.timeline-item:last-child::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 组织单位卡片悬停效果 */
|
||||||
|
.org-card {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.org-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
}
|
||||||
|
</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-amber-600 border-b-2 border-amber-500 pb-1"
|
||||||
|
>关于比赛</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-gray-600 hover:text-amber-500 transition"
|
||||||
|
>联系咨询</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-amber-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-gray-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-4xl mx-auto">
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||||
|
<div class="fade-in">
|
||||||
|
<h2 class="text-3xl font-bold text-amber-800 mb-6">
|
||||||
|
林赛花教育基金
|
||||||
|
</h2>
|
||||||
|
<p class="text-gray-600 mb-4">
|
||||||
|
林赛花教育基金由马来西亚柔佛州知名慈善家林赛花女士于2014年创立，隶属于妙妙机构旗下，致力于推广华文教育与中华传统文化。
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-600 mb-4">
|
||||||
|
基金秉承"以教育启迪心灵，以文化传承精神"的理念，通过多种形式支持马来西亚华文教育发展，培养青少年的人文素养与创作能力。
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-600">
|
||||||
|
林赛花杯写作比赛是该基金的重点项目之一，自2015年首次举办以来，已成为柔佛州最具影响力的华文写作赛事之一。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="fade-in">
|
||||||
|
<div class="bg-amber-50 rounded-2xl p-8 h-full">
|
||||||
|
<div class="text-center mb-6">
|
||||||
|
<div
|
||||||
|
class="w-20 h-20 rounded-full bg-amber-500 flex items-center justify-center text-white text-2xl mx-auto mb-4"
|
||||||
|
>
|
||||||
|
<i class="fas fa-seedling"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold text-amber-800">我们的使命</h3>
|
||||||
|
</div>
|
||||||
|
<ul class="space-y-4">
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-check text-amber-500 mt-1 mr-3"></i>
|
||||||
|
<span class="text-gray-700"
|
||||||
|
>推广华文写作，提升学生语言表达能力</span
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-check text-amber-500 mt-1 mr-3"></i>
|
||||||
|
<span class="text-gray-700">传承中华传统文化与美德</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-check text-amber-500 mt-1 mr-3"></i>
|
||||||
|
<span class="text-gray-700"
|
||||||
|
>培养青少年的独立思考与创作能力</span
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-check text-amber-500 mt-1 mr-3"></i>
|
||||||
|
<span class="text-gray-700"
|
||||||
|
>搭建华文写作交流平台，促进学生互相学习</span
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</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-4xl mx-auto text-center">
|
||||||
|
<h2 class="text-3xl font-bold text-amber-800 mb-4">比赛宗旨</h2>
|
||||||
|
<p class="text-xl text-gray-600 mb-12 max-w-2xl mx-auto">
|
||||||
|
林赛花杯写作比赛旨在通过华文写作，培养学生对中华文化的认同感与自豪感
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
|
<div class="bg-white rounded-xl p-6 shadow-md fade-in">
|
||||||
|
<div
|
||||||
|
class="w-16 h-16 rounded-full bg-amber-100 flex items-center justify-center text-amber-600 text-2xl mb-4 mx-auto"
|
||||||
|
>
|
||||||
|
<i class="fas fa-pen-fancy"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold text-gray-800 mb-3">提升写作能力</h3>
|
||||||
|
<p class="text-gray-600">
|
||||||
|
通过比赛激发学生对华文写作的兴趣，提升语言表达与文学创作能力。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white rounded-xl p-6 shadow-md fade-in">
|
||||||
|
<div
|
||||||
|
class="w-16 h-16 rounded-full bg-amber-100 flex items-center justify-center text-amber-600 text-2xl mb-4 mx-auto"
|
||||||
|
>
|
||||||
|
<i class="fas fa-history"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold text-gray-800 mb-3">传承文化精髓</h3>
|
||||||
|
<p class="text-gray-600">
|
||||||
|
以写作为媒介，传承中华优秀传统文化与传统美德，增强文化自信。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white rounded-xl p-6 shadow-md fade-in">
|
||||||
|
<div
|
||||||
|
class="w-16 h-16 rounded-full bg-amber-100 flex items-center justify-center text-amber-600 text-2xl mb-4 mx-auto"
|
||||||
|
>
|
||||||
|
<i class="fas fa-users"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold text-gray-800 mb-3">促进交流学习</h3>
|
||||||
|
<p class="text-gray-600">
|
||||||
|
为柔佛州华校学生提供交流平台，互相学习，共同进步。
|
||||||
|
</p>
|
||||||
|
</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">
|
||||||
|
自2015年首次举办以来，林赛花杯写作比赛已成功举办九届
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<!-- 时间线 -->
|
||||||
|
<div class="space-y-8">
|
||||||
|
<!-- 第九届 -->
|
||||||
|
<div class="timeline-item fade-in">
|
||||||
|
<div class="bg-amber-50 rounded-xl p-6">
|
||||||
|
<div
|
||||||
|
class="flex flex-col md:flex-row md:items-center md:justify-between mb-4"
|
||||||
|
>
|
||||||
|
<h3 class="text-xl font-bold text-amber-800">
|
||||||
|
第九届林赛花杯 (2023)
|
||||||
|
</h3>
|
||||||
|
<span class="text-amber-600 font-medium mt-2 md:mt-0"
|
||||||
|
>主题: 传统美德与现代生活</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<p class="text-gray-600 mb-2">
|
||||||
|
参赛学校: 42所 | 参赛作品: 156篇
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-600">
|
||||||
|
本届比赛特别关注传统美德在当代社会的价值与意义，鼓励学生思考如何在现代生活中践行传统美德。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 第八届 -->
|
||||||
|
<div class="timeline-item fade-in">
|
||||||
|
<div class="bg-amber-50 rounded-xl p-6">
|
||||||
|
<div
|
||||||
|
class="flex flex-col md:flex-row md:items-center md:justify-between mb-4"
|
||||||
|
>
|
||||||
|
<h3 class="text-xl font-bold text-amber-800">
|
||||||
|
第八届林赛花杯 (2022)
|
||||||
|
</h3>
|
||||||
|
<span class="text-amber-600 font-medium mt-2 md:mt-0"
|
||||||
|
>主题: 疫情中的温暖</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<p class="text-gray-600 mb-2">
|
||||||
|
参赛学校: 38所 | 参赛作品: 142篇
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-600">
|
||||||
|
在疫情影响下，本届比赛鼓励学生记录疫情期间的感人故事，展现人性的光辉与社会的温暖。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 第七届 -->
|
||||||
|
<div class="timeline-item fade-in">
|
||||||
|
<div class="bg-amber-50 rounded-xl p-6">
|
||||||
|
<div
|
||||||
|
class="flex flex-col md:flex-row md:items-center md:justify-between mb-4"
|
||||||
|
>
|
||||||
|
<h3 class="text-xl font-bold text-amber-800">
|
||||||
|
第七届林赛花杯 (2021)
|
||||||
|
</h3>
|
||||||
|
<span class="text-amber-600 font-medium mt-2 md:mt-0"
|
||||||
|
>主题: 我家乡的文化遗产</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<p class="text-gray-600 mb-2">
|
||||||
|
参赛学校: 35所 | 参赛作品: 128篇
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-600">
|
||||||
|
本届比赛聚焦于地方文化遗产保护，鼓励学生发掘和记录自己家乡的文化遗产与特色。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 第六届 -->
|
||||||
|
<div class="timeline-item fade-in">
|
||||||
|
<div class="bg-amber-50 rounded-xl p-6">
|
||||||
|
<div
|
||||||
|
class="flex flex-col md:flex-row md:items-center md:justify-between mb-4"
|
||||||
|
>
|
||||||
|
<h3 class="text-xl font-bold text-amber-800">
|
||||||
|
第六届林赛花杯 (2020)
|
||||||
|
</h3>
|
||||||
|
<span class="text-amber-600 font-medium mt-2 md:mt-0"
|
||||||
|
>主题: 华文与我</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<p class="text-gray-600 mb-2">
|
||||||
|
参赛学校: 32所 | 参赛作品: 118篇
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-600">
|
||||||
|
本届比赛鼓励学生分享自己与华文的故事，探讨华文在个人成长与文化认同中的意义。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 第五届 -->
|
||||||
|
<div class="timeline-item fade-in">
|
||||||
|
<div class="bg-amber-50 rounded-xl p-6">
|
||||||
|
<div
|
||||||
|
class="flex flex-col md:flex-row md:items-center md:justify-between mb-4"
|
||||||
|
>
|
||||||
|
<h3 class="text-xl font-bold text-amber-800">
|
||||||
|
第五届林赛花杯 (2019)
|
||||||
|
</h3>
|
||||||
|
<span class="text-amber-600 font-medium mt-2 md:mt-0"
|
||||||
|
>主题: 青春与梦想</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<p class="text-gray-600 mb-2">
|
||||||
|
参赛学校: 30所 | 参赛作品: 105篇
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-600">
|
||||||
|
本届比赛聚焦青少年的梦想与追求，鼓励学生书写自己的青春故事与未来展望。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 第一届 -->
|
||||||
|
<div class="timeline-item fade-in">
|
||||||
|
<div class="bg-amber-50 rounded-xl p-6">
|
||||||
|
<div
|
||||||
|
class="flex flex-col md:flex-row md:items-center md:justify-between mb-4"
|
||||||
|
>
|
||||||
|
<h3 class="text-xl font-bold text-amber-800">
|
||||||
|
第一届林赛花杯 (2015)
|
||||||
|
</h3>
|
||||||
|
<span class="text-amber-600 font-medium mt-2 md:mt-0"
|
||||||
|
>主题: 我的华文老师</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<p class="text-gray-600 mb-2">
|
||||||
|
参赛学校: 18所 | 参赛作品: 68篇
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-600">
|
||||||
|
首届林赛花杯写作比赛成功举办，为柔佛州华文写作比赛开启了新的篇章。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 组织单位 -->
|
||||||
|
<section class="py-16 bg-gray-50 theme-transition">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<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="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
|
||||||
|
<!-- 主办单位 -->
|
||||||
|
<div
|
||||||
|
class="org-card bg-white rounded-xl p-6 shadow-md text-center fade-in"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="w-20 h-20 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-gray-800 mb-2">主办单位</h3>
|
||||||
|
<p class="text-gray-600 mb-4">林赛花教育基金</p>
|
||||||
|
<div
|
||||||
|
class="h-32 bg-gray-100 rounded-lg flex items-center justify-center mb-4"
|
||||||
|
>
|
||||||
|
<span class="text-gray-500 font-medium">妙妙机构 Logo</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-gray-600 text-sm">
|
||||||
|
林赛花教育基金隶属于妙妙机构，致力于推广华文教育与中华传统文化。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 承办单位 -->
|
||||||
|
<div
|
||||||
|
class="org-card bg-white rounded-xl p-6 shadow-md text-center fade-in"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="w-20 h-20 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-gray-800 mb-2">承办单位</h3>
|
||||||
|
<p class="text-gray-600 mb-4">柔佛州华校校友会联合会</p>
|
||||||
|
<div
|
||||||
|
class="h-32 bg-gray-100 rounded-lg flex items-center justify-center mb-4"
|
||||||
|
>
|
||||||
|
<span class="text-gray-500 font-medium">PPBP Logo</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-gray-600 text-sm">
|
||||||
|
柔佛州华校校友会联合会(PPBP)是柔佛州华文教育的重要推动力量。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 支持单位 -->
|
||||||
|
<div
|
||||||
|
class="org-card bg-white rounded-xl p-6 shadow-md text-center fade-in"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="w-20 h-20 rounded-full bg-amber-500 flex items-center justify-center text-white text-2xl mx-auto mb-4"
|
||||||
|
>
|
||||||
|
<i class="fas fa-hands-helping"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold text-gray-800 mb-2">支持单位</h3>
|
||||||
|
<p class="text-gray-600 mb-4">柔佛州各华文中学</p>
|
||||||
|
<div
|
||||||
|
class="h-32 bg-gray-100 rounded-lg flex items-center justify-center mb-4"
|
||||||
|
>
|
||||||
|
<span class="text-gray-500 font-medium">合作学校 Logo</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-gray-600 text-sm">
|
||||||
|
感谢柔佛州各华文中学的积极参与和支持，共同推动华文写作教育。
|
||||||
|
</p>
|
||||||
|
</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">42</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">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 src="./assets/script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
202
archive/about.html
Normal file
202
archive/about.html
Normal file
@@ -0,0 +1,202 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN" class="scroll-smooth">
|
||||||
|
<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>
|
||||||
|
<script>
|
||||||
|
// 主题初始化（从 localStorage 读取）
|
||||||
|
if (
|
||||||
|
localStorage.theme === "dark" ||
|
||||||
|
(!("theme" in localStorage) &&
|
||||||
|
window.matchMedia("(prefers-color-scheme: dark)").matches)
|
||||||
|
) {
|
||||||
|
document.documentElement.classList.add("dark");
|
||||||
|
} else if (localStorage.theme === "sepia") {
|
||||||
|
document.documentElement.classList.add("sepia");
|
||||||
|
} else {
|
||||||
|
document.documentElement.classList.remove("dark", "sepia");
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleTheme() {
|
||||||
|
const html = document.documentElement;
|
||||||
|
if (html.classList.contains("dark")) {
|
||||||
|
html.classList.remove("dark");
|
||||||
|
html.classList.add("sepia");
|
||||||
|
localStorage.theme = "sepia";
|
||||||
|
} else if (html.classList.contains("sepia")) {
|
||||||
|
html.classList.remove("sepia");
|
||||||
|
localStorage.theme = "light";
|
||||||
|
} else {
|
||||||
|
html.classList.add("dark");
|
||||||
|
localStorage.theme = "dark";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
/* 自定义第三主题（米黄色阅读模式） */
|
||||||
|
.sepia {
|
||||||
|
--tw-bg-opacity: 1;
|
||||||
|
background-color: rgba(250, 245, 235, var(--tw-bg-opacity));
|
||||||
|
color: #3c2f2f;
|
||||||
|
}
|
||||||
|
.sepia .card {
|
||||||
|
background-color: #f7f1e1;
|
||||||
|
border-color: #e2d6c3;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body
|
||||||
|
class="bg-white text-gray-800 dark:bg-gray-900 dark:text-gray-100 transition-colors duration-300"
|
||||||
|
>
|
||||||
|
<!-- 顶部导航 -->
|
||||||
|
<header
|
||||||
|
class="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700"
|
||||||
|
>
|
||||||
|
<a href="index.html" class="text-2xl font-semibold tracking-wide"
|
||||||
|
>林赛花教育基金</a
|
||||||
|
>
|
||||||
|
<nav class="space-x-6 hidden sm:block">
|
||||||
|
<a href="index.html" class="hover:text-amber-600">首页</a>
|
||||||
|
<a href="about.html" class="text-amber-600 font-medium">关于</a>
|
||||||
|
<a href="awards.html" class="hover:text-amber-600">奖项</a>
|
||||||
|
<a href="works.html" class="hover:text-amber-600">作品</a>
|
||||||
|
<a href="contact.html" class="hover:text-amber-600">联系</a>
|
||||||
|
</nav>
|
||||||
|
<button
|
||||||
|
onclick="toggleTheme()"
|
||||||
|
class="p-2 rounded-lg bg-amber-100 dark:bg-gray-800 hover:bg-amber-200 dark:hover:bg-gray-700"
|
||||||
|
title="切换主题"
|
||||||
|
>
|
||||||
|
🌓
|
||||||
|
</button>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Hero 区 -->
|
||||||
|
<section
|
||||||
|
class="text-center py-16 bg-gradient-to-b from-amber-50 to-white dark:from-gray-800 dark:to-gray-900"
|
||||||
|
>
|
||||||
|
<h1 class="text-4xl font-bold mb-4 text-amber-700 dark:text-amber-400">
|
||||||
|
关于林赛花教育基金
|
||||||
|
</h1>
|
||||||
|
<p class="max-w-2xl mx-auto text-lg text-gray-600 dark:text-gray-300">
|
||||||
|
以文字点亮希望，以教育传承温情。
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 内容区 -->
|
||||||
|
<main class="max-w-5xl mx-auto px-6 py-12 space-y-16">
|
||||||
|
<!-- 基金介绍 -->
|
||||||
|
<section>
|
||||||
|
<h2
|
||||||
|
class="text-2xl font-semibold mb-4 border-l-4 border-amber-500 pl-3"
|
||||||
|
>
|
||||||
|
基金缘起
|
||||||
|
</h2>
|
||||||
|
<p class="leading-relaxed text-gray-700 dark:text-gray-300">
|
||||||
|
林赛花教育基金（Linsai Hwa Education Fund）由妙妙机构于 2021 年设立，
|
||||||
|
以纪念与延续林赛花女士长期关怀教育的精神。基金宗旨在于支持华文教育、
|
||||||
|
推广写作文化，并协助独中学生完成学业。
|
||||||
|
</p>
|
||||||
|
<p class="mt-4 leading-relaxed text-gray-700 dark:text-gray-300">
|
||||||
|
自成立以来，基金不仅发放助学金予全国独中学生，
|
||||||
|
也通过举办「林赛花杯写作比赛」鼓励青年以文字表达感恩、弘扬传统美德。
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 比赛宗旨 -->
|
||||||
|
<section>
|
||||||
|
<h2
|
||||||
|
class="text-2xl font-semibold mb-4 border-l-4 border-amber-500 pl-3"
|
||||||
|
>
|
||||||
|
比赛宗旨
|
||||||
|
</h2>
|
||||||
|
<ul class="list-disc pl-8 space-y-2 text-gray-700 dark:text-gray-300">
|
||||||
|
<li>鼓励学生以中文书写表达内心与思想。</li>
|
||||||
|
<li>培养青年对社会、文化与家庭的感恩之心。</li>
|
||||||
|
<li>推动马来西亚华文教育的持续发展。</li>
|
||||||
|
<li>为华校文学创作提供展示与传承的平台。</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 组织结构 -->
|
||||||
|
<section>
|
||||||
|
<h2
|
||||||
|
class="text-2xl font-semibold mb-4 border-l-4 border-amber-500 pl-3"
|
||||||
|
>
|
||||||
|
组织与合作单位
|
||||||
|
</h2>
|
||||||
|
<div class="grid md:grid-cols-2 gap-6">
|
||||||
|
<div class="card p-6 border rounded-2xl bg-white dark:bg-gray-800">
|
||||||
|
<h3 class="text-xl font-medium text-amber-700 mb-2">主办单位</h3>
|
||||||
|
<p class="text-gray-700 dark:text-gray-300">
|
||||||
|
妙妙机构 · 林赛花教育基金
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="card p-6 border rounded-2xl bg-white dark:bg-gray-800">
|
||||||
|
<h3 class="text-xl font-medium text-amber-700 mb-2">承办单位</h3>
|
||||||
|
<p class="text-gray-700 dark:text-gray-300">
|
||||||
|
柔佛州华校校友会联合会（PPBP）
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 发展历程 -->
|
||||||
|
<section>
|
||||||
|
<h2
|
||||||
|
class="text-2xl font-semibold mb-4 border-l-4 border-amber-500 pl-3"
|
||||||
|
>
|
||||||
|
发展历程
|
||||||
|
</h2>
|
||||||
|
<ol
|
||||||
|
class="relative border-l border-gray-300 dark:border-gray-700 ml-6 space-y-6"
|
||||||
|
>
|
||||||
|
<li class="ml-4">
|
||||||
|
<div
|
||||||
|
class="absolute w-3 h-3 bg-amber-500 rounded-full -left-1.5 mt-1.5"
|
||||||
|
></div>
|
||||||
|
<time class="text-sm text-gray-500 dark:text-gray-400"
|
||||||
|
>2021 年</time
|
||||||
|
>
|
||||||
|
<p class="font-medium text-gray-800 dark:text-gray-200">
|
||||||
|
基金正式成立，确立助学与写作推广双核心方向。
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
<li class="ml-4">
|
||||||
|
<div
|
||||||
|
class="absolute w-3 h-3 bg-amber-500 rounded-full -left-1.5 mt-1.5"
|
||||||
|
></div>
|
||||||
|
<time class="text-sm text-gray-500 dark:text-gray-400"
|
||||||
|
>2022 年</time
|
||||||
|
>
|
||||||
|
<p class="font-medium text-gray-800 dark:text-gray-200">
|
||||||
|
首届「林赛花杯写作比赛」举行，吸引 500 余名学生参赛。
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
<li class="ml-4">
|
||||||
|
<div
|
||||||
|
class="absolute w-3 h-3 bg-amber-500 rounded-full -left-1.5 mt-1.5"
|
||||||
|
></div>
|
||||||
|
<time class="text-sm text-gray-500 dark:text-gray-400"
|
||||||
|
>2023–2025 年</time
|
||||||
|
>
|
||||||
|
<p class="font-medium text-gray-800 dark:text-gray-200">
|
||||||
|
比赛持续扩展至全国范围，并新增作品展示与创作指导环节。
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- 页脚 -->
|
||||||
|
<footer
|
||||||
|
class="text-center text-sm text-gray-500 py-8 border-t border-gray-200 dark:border-gray-700"
|
||||||
|
>
|
||||||
|
© 2025 林赛花教育基金 | 设计灵感：教育·公益·文学
|
||||||
|
<br />
|
||||||
|
<span class="text-xs">非官方网站，仅供公益展示与学习使用。</span>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
132
assets/script.js
Normal file
132
assets/script.js
Normal file
@@ -0,0 +1,132 @@
|
|||||||
|
// assets/script.js
|
||||||
|
|
||||||
|
// 主题切换功能
|
||||||
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
|
// 获取主题切换按钮
|
||||||
|
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";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 移动端菜单切换
|
||||||
|
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 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 mobileMenuItems = document.querySelectorAll("#mobile-menu a");
|
||||||
|
mobileMenuItems.forEach((item) => {
|
||||||
|
item.addEventListener("click", function () {
|
||||||
|
mobileMenu.classList.add("hidden");
|
||||||
|
mobileMenuToggle.querySelector("i").className = "fas fa-bars";
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 暗色主题样式
|
||||||
|
const darkThemeStyles = `
|
||||||
|
.dark {
|
||||||
|
--bg-color: #1a202c;
|
||||||
|
--text-color: #e2e8f0;
|
||||||
|
--card-bg: #2d3748;
|
||||||
|
--border-color: #4a5568;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark body {
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .theme-transition {
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .bg-white {
|
||||||
|
background-color: var(--card-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .text-gray-800 {
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .text-gray-600 {
|
||||||
|
color: #cbd5e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .bg-gray-50 {
|
||||||
|
background-color: #2d3748;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .bg-gray-100 {
|
||||||
|
background-color: #4a5568;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .border-gray-700 {
|
||||||
|
border-color: #4a5568;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .shadow-md, .dark .shadow-lg {
|
||||||
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
// 添加暗色主题样式到文档
|
||||||
|
const styleSheet = document.createElement("style");
|
||||||
|
styleSheet.textContent = darkThemeStyles;
|
||||||
|
document.head.appendChild(styleSheet);
|
||||||
803
awards.html
Normal file
803
awards.html
Normal file
@@ -0,0 +1,803 @@
|
|||||||
|
<!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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 奖项卡片样式 */
|
||||||
|
.award-card {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.award-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 表格样式 */
|
||||||
|
.award-table {
|
||||||
|
border-collapse: separate;
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
||||||
|
.award-table th {
|
||||||
|
background-color: #fef3c7;
|
||||||
|
}
|
||||||
|
.award-table tr:nth-child(even) {
|
||||||
|
background-color: #fefce8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 选项卡样式 */
|
||||||
|
.tab-button {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.tab-button.active {
|
||||||
|
background-color: #d97706;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 奖牌颜色 */
|
||||||
|
.gold {
|
||||||
|
color: #f59e0b;
|
||||||
|
}
|
||||||
|
.silver {
|
||||||
|
color: #9ca3af;
|
||||||
|
}
|
||||||
|
.bronze {
|
||||||
|
color: #b45309;
|
||||||
|
}
|
||||||
|
</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-amber-600 border-b-2 border-amber-500 pb-1"
|
||||||
|
>奖项设置</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-gray-600 hover:text-amber-500 transition"
|
||||||
|
>联系咨询</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-amber-600">奖项设置</a>
|
||||||
|
<a href="works.html" class="font-medium text-gray-600">优秀作品</a>
|
||||||
|
<a href="contact.html" class="font-medium text-gray-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">
|
||||||
|
<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="grid grid-cols-1 lg:grid-cols-2 gap-8 max-w-5xl mx-auto">
|
||||||
|
<!-- 初中组奖项 -->
|
||||||
|
<div class="bg-amber-50 rounded-2xl p-6 fade-in">
|
||||||
|
<div class="text-center mb-6">
|
||||||
|
<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-user-graduate"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-2xl font-bold text-amber-800">初中组奖项</h3>
|
||||||
|
<p class="text-amber-600">面向国中及独中初中学生</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="award-card bg-white rounded-xl p-4 shadow-sm">
|
||||||
|
<div class="flex items-center mb-2">
|
||||||
|
<i class="fas fa-medal text-2xl gold mr-3"></i>
|
||||||
|
<h4 class="text-lg font-bold text-gray-800">一等奖 (1名)</h4>
|
||||||
|
</div>
|
||||||
|
<div class="pl-10">
|
||||||
|
<p class="text-gray-600">奖金 RM 800 + 奖状 + 奖杯</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="award-card bg-white rounded-xl p-4 shadow-sm">
|
||||||
|
<div class="flex items-center mb-2">
|
||||||
|
<i class="fas fa-medal text-2xl silver mr-3"></i>
|
||||||
|
<h4 class="text-lg font-bold text-gray-800">二等奖 (2名)</h4>
|
||||||
|
</div>
|
||||||
|
<div class="pl-10">
|
||||||
|
<p class="text-gray-600">奖金 RM 500 + 奖状 + 奖杯</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="award-card bg-white rounded-xl p-4 shadow-sm">
|
||||||
|
<div class="flex items-center mb-2">
|
||||||
|
<i class="fas fa-medal text-2xl bronze mr-3"></i>
|
||||||
|
<h4 class="text-lg font-bold text-gray-800">三等奖 (3名)</h4>
|
||||||
|
</div>
|
||||||
|
<div class="pl-10">
|
||||||
|
<p class="text-gray-600">奖金 RM 300 + 奖状 + 奖杯</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="award-card bg-white rounded-xl p-4 shadow-sm">
|
||||||
|
<div class="flex items-center mb-2">
|
||||||
|
<i class="fas fa-award text-amber-600 text-xl mr-3"></i>
|
||||||
|
<h4 class="text-lg font-bold text-gray-800">优秀奖 (5名)</h4>
|
||||||
|
</div>
|
||||||
|
<div class="pl-10">
|
||||||
|
<p class="text-gray-600">奖金 RM 100 + 奖状</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 高中组奖项 -->
|
||||||
|
<div class="bg-amber-50 rounded-2xl p-6 fade-in">
|
||||||
|
<div class="text-center mb-6">
|
||||||
|
<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-user-graduate"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-2xl font-bold text-amber-800">高中组奖项</h3>
|
||||||
|
<p class="text-amber-600">面向国中及独中高中学生</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="award-card bg-white rounded-xl p-4 shadow-sm">
|
||||||
|
<div class="flex items-center mb-2">
|
||||||
|
<i class="fas fa-medal text-2xl gold mr-3"></i>
|
||||||
|
<h4 class="text-lg font-bold text-gray-800">一等奖 (1名)</h4>
|
||||||
|
</div>
|
||||||
|
<div class="pl-10">
|
||||||
|
<p class="text-gray-600">奖金 RM 1,000 + 奖状 + 奖杯</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="award-card bg-white rounded-xl p-4 shadow-sm">
|
||||||
|
<div class="flex items-center mb-2">
|
||||||
|
<i class="fas fa-medal text-2xl silver mr-3"></i>
|
||||||
|
<h4 class="text-lg font-bold text-gray-800">二等奖 (2名)</h4>
|
||||||
|
</div>
|
||||||
|
<div class="pl-10">
|
||||||
|
<p class="text-gray-600">奖金 RM 700 + 奖状 + 奖杯</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="award-card bg-white rounded-xl p-4 shadow-sm">
|
||||||
|
<div class="flex items-center mb-2">
|
||||||
|
<i class="fas fa-medal text-2xl bronze mr-3"></i>
|
||||||
|
<h4 class="text-lg font-bold text-gray-800">三等奖 (3名)</h4>
|
||||||
|
</div>
|
||||||
|
<div class="pl-10">
|
||||||
|
<p class="text-gray-600">奖金 RM 500 + 奖状 + 奖杯</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="award-card bg-white rounded-xl p-4 shadow-sm">
|
||||||
|
<div class="flex items-center mb-2">
|
||||||
|
<i class="fas fa-award text-amber-600 text-xl mr-3"></i>
|
||||||
|
<h4 class="text-lg font-bold text-gray-800">优秀奖 (5名)</h4>
|
||||||
|
</div>
|
||||||
|
<div class="pl-10">
|
||||||
|
<p class="text-gray-600">奖金 RM 150 + 奖状</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 特别奖项 -->
|
||||||
|
<div class="max-w-3xl mx-auto mt-12 fade-in">
|
||||||
|
<div
|
||||||
|
class="bg-gradient-to-r from-amber-500 to-amber-600 rounded-2xl p-8 text-white text-center"
|
||||||
|
>
|
||||||
|
<h3 class="text-2xl font-bold mb-4">特别奖项</h3>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<h4 class="text-xl font-bold mb-2">最佳组织奖</h4>
|
||||||
|
<p>颁发给参赛作品数量多、质量高的学校</p>
|
||||||
|
<p class="mt-2 font-medium">奖金 RM 1,000 + 奖牌</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-xl font-bold mb-2">优秀指导教师奖</h4>
|
||||||
|
<p>颁发给指导多名学生获奖的教师</p>
|
||||||
|
<p class="mt-2 font-medium">奖金 RM 500 + 奖状</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 历届获奖名单 -->
|
||||||
|
<section class="py-16 bg-gray-50 theme-transition">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<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="flex flex-wrap justify-center gap-2 mb-8">
|
||||||
|
<button
|
||||||
|
class="tab-button px-4 py-2 bg-amber-500 text-white rounded-full font-medium active"
|
||||||
|
data-tab="all"
|
||||||
|
>
|
||||||
|
全部
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="tab-button px-4 py-2 bg-gray-200 text-gray-700 rounded-full font-medium hover:bg-gray-300 transition"
|
||||||
|
data-tab="9"
|
||||||
|
>
|
||||||
|
第九届
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="tab-button px-4 py-2 bg-gray-200 text-gray-700 rounded-full font-medium hover:bg-gray-300 transition"
|
||||||
|
data-tab="8"
|
||||||
|
>
|
||||||
|
第八届
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="tab-button px-4 py-2 bg-gray-200 text-gray-700 rounded-full font-medium hover:bg-gray-300 transition"
|
||||||
|
data-tab="7"
|
||||||
|
>
|
||||||
|
第七届
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="tab-button px-4 py-2 bg-gray-200 text-gray-700 rounded-full font-medium hover:bg-gray-300 transition"
|
||||||
|
data-tab="6"
|
||||||
|
>
|
||||||
|
第六届
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 获奖名单表格 -->
|
||||||
|
<div class="bg-white rounded-2xl shadow-md overflow-hidden fade-in">
|
||||||
|
<div class="overflow-x-auto">
|
||||||
|
<table class="award-table w-full">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="py-3 px-4 text-left text-amber-800 font-bold">
|
||||||
|
届数
|
||||||
|
</th>
|
||||||
|
<th class="py-3 px-4 text-left text-amber-800 font-bold">
|
||||||
|
组别
|
||||||
|
</th>
|
||||||
|
<th class="py-3 px-4 text-left text-amber-800 font-bold">
|
||||||
|
奖项
|
||||||
|
</th>
|
||||||
|
<th class="py-3 px-4 text-left text-amber-800 font-bold">
|
||||||
|
获奖者
|
||||||
|
</th>
|
||||||
|
<th class="py-3 px-4 text-left text-amber-800 font-bold">
|
||||||
|
学校
|
||||||
|
</th>
|
||||||
|
<th class="py-3 px-4 text-left text-amber-800 font-bold">
|
||||||
|
作品名称
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<!-- 第九届 -->
|
||||||
|
<tr class="tab-content tab-9">
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">第九届</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">高中组</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">
|
||||||
|
<span class="font-bold gold">一等奖</span>
|
||||||
|
</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">陈晓雯</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">柔佛独中</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">
|
||||||
|
《时光里的茶香》
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="tab-content tab-9">
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">第九届</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">高中组</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">
|
||||||
|
<span class="font-bold silver">二等奖</span>
|
||||||
|
</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">黄诗琪</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">
|
||||||
|
峇株华仁中学
|
||||||
|
</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">
|
||||||
|
《传统节日的温度》
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="tab-content tab-9">
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">第九届</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">高中组</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">
|
||||||
|
<span class="font-bold silver">二等奖</span>
|
||||||
|
</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">张伟明</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">
|
||||||
|
居銮中华中学
|
||||||
|
</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">
|
||||||
|
《汉字里的哲学》
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="tab-content tab-9">
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">第九届</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">初中组</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">
|
||||||
|
<span class="font-bold gold">一等奖</span>
|
||||||
|
</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">李明轩</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">新山国中</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">
|
||||||
|
《雨中华文课》
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="tab-content tab-9">
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">第九届</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">初中组</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">
|
||||||
|
<span class="font-bold silver">二等奖</span>
|
||||||
|
</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">林心如</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">
|
||||||
|
麻坡中化中学
|
||||||
|
</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">
|
||||||
|
《我的华文老师》
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<!-- 第八届 -->
|
||||||
|
<tr class="tab-content tab-8">
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">第八届</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">高中组</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">
|
||||||
|
<span class="font-bold gold">一等奖</span>
|
||||||
|
</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">吴家明</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">
|
||||||
|
新文龙中华中学
|
||||||
|
</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">
|
||||||
|
《家乡的味道》
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="tab-content tab-8">
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">第八届</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">高中组</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">
|
||||||
|
<span class="font-bold silver">二等奖</span>
|
||||||
|
</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">陈美玲</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">昔加末国中</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">
|
||||||
|
《疫情中的温暖》
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="tab-content tab-8">
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">第八届</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">初中组</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">
|
||||||
|
<span class="font-bold gold">一等奖</span>
|
||||||
|
</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">张慧敏</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">
|
||||||
|
笨珍培群独中
|
||||||
|
</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">
|
||||||
|
《记忆中的老街》
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<!-- 第七届 -->
|
||||||
|
<tr class="tab-content tab-7">
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">第七届</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">高中组</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">
|
||||||
|
<span class="font-bold gold">一等奖</span>
|
||||||
|
</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">王俊杰</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">永平中学</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">
|
||||||
|
《我家乡的文化遗产》
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="tab-content tab-7">
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">第七届</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">初中组</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">
|
||||||
|
<span class="font-bold gold">一等奖</span>
|
||||||
|
</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">刘思琪</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">古来国中</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">
|
||||||
|
《华文与我》
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<!-- 第六届 -->
|
||||||
|
<tr class="tab-content tab-6">
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">第六届</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">高中组</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">
|
||||||
|
<span class="font-bold gold">一等奖</span>
|
||||||
|
</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">林志勇</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">宽柔中学</td>
|
||||||
|
<td class="py-3 px-4 border-t border-gray-200">
|
||||||
|
《青春与梦想》
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 表格说明 -->
|
||||||
|
<div class="mt-6 text-center text-gray-500 text-sm">
|
||||||
|
<p>注：以上为部分获奖名单，完整名单请参考各届比赛专刊</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 获奖学校统计 -->
|
||||||
|
<section class="py-16 bg-white theme-transition">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<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="max-w-4xl mx-auto fade-in">
|
||||||
|
<div class="bg-amber-50 rounded-2xl p-8">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||||
|
<div>
|
||||||
|
<h3 class="text-xl font-bold text-amber-800 mb-4">
|
||||||
|
获奖次数最多学校
|
||||||
|
</h3>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div
|
||||||
|
class="flex justify-between items-center bg-white p-3 rounded-lg shadow-sm"
|
||||||
|
>
|
||||||
|
<span class="font-medium">宽柔中学</span>
|
||||||
|
<span class="text-amber-600 font-bold">12次</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="flex justify-between items-center bg-white p-3 rounded-lg shadow-sm"
|
||||||
|
>
|
||||||
|
<span class="font-medium">居銮中华中学</span>
|
||||||
|
<span class="text-amber-600 font-bold">9次</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="flex justify-between items-center bg-white p-3 rounded-lg shadow-sm"
|
||||||
|
>
|
||||||
|
<span class="font-medium">峇株华仁中学</span>
|
||||||
|
<span class="text-amber-600 font-bold">8次</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="flex justify-between items-center bg-white p-3 rounded-lg shadow-sm"
|
||||||
|
>
|
||||||
|
<span class="font-medium">永平中学</span>
|
||||||
|
<span class="text-amber-600 font-bold">7次</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 class="text-xl font-bold text-amber-800 mb-4">
|
||||||
|
最佳组织奖获奖学校
|
||||||
|
</h3>
|
||||||
|
<div class="space-y-3">
|
||||||
|
<div class="bg-white p-3 rounded-lg shadow-sm">
|
||||||
|
<div class="flex justify-between items-center mb-1">
|
||||||
|
<span class="font-medium">第九届</span>
|
||||||
|
<span class="text-amber-600 font-bold">柔佛独中</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-500">提交作品28篇，获奖5篇</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white p-3 rounded-lg shadow-sm">
|
||||||
|
<div class="flex justify-between items-center mb-1">
|
||||||
|
<span class="font-medium">第八届</span>
|
||||||
|
<span class="text-amber-600 font-bold">居銮中华中学</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-500">提交作品32篇，获奖6篇</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white p-3 rounded-lg shadow-sm">
|
||||||
|
<div class="flex justify-between items-center mb-1">
|
||||||
|
<span class="font-medium">第七届</span>
|
||||||
|
<span class="text-amber-600 font-bold">宽柔中学</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-500">提交作品35篇，获奖7篇</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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">96</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">RM 68,500</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 tabButtons = document.querySelectorAll(".tab-button");
|
||||||
|
const tabContents = document.querySelectorAll(".tab-content");
|
||||||
|
|
||||||
|
tabButtons.forEach((button) => {
|
||||||
|
button.addEventListener("click", function () {
|
||||||
|
const tabId = this.getAttribute("data-tab");
|
||||||
|
|
||||||
|
// 更新按钮状态
|
||||||
|
tabButtons.forEach((btn) => {
|
||||||
|
btn.classList.remove("active");
|
||||||
|
btn.classList.add("bg-gray-200", "text-gray-700");
|
||||||
|
});
|
||||||
|
this.classList.add("active");
|
||||||
|
this.classList.remove("bg-gray-200", "text-gray-700");
|
||||||
|
|
||||||
|
// 显示/隐藏内容
|
||||||
|
if (tabId === "all") {
|
||||||
|
tabContents.forEach((content) => {
|
||||||
|
content.style.display = "table-row";
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
tabContents.forEach((content) => {
|
||||||
|
if (content.classList.contains("tab-" + tabId)) {
|
||||||
|
content.style.display = "table-row";
|
||||||
|
} else {
|
||||||
|
content.style.display = "none";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 滚动动画
|
||||||
|
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>
|
||||||
714
contact.html
Normal file
714
contact.html
Normal 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>
|
||||||
|
© 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>
|
||||||
392
index.html
Normal file
392
index.html
Normal file
@@ -0,0 +1,392 @@
|
|||||||
|
<!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;
|
||||||
|
}
|
||||||
|
</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-amber-600 border-b-2 border-amber-500 pb-1"
|
||||||
|
>首页</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-gray-600 hover:text-amber-500 transition"
|
||||||
|
>联系咨询</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-amber-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-gray-600">联系咨询</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Hero横幅 -->
|
||||||
|
<section
|
||||||
|
class="pt-32 pb-20 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 fade-in">
|
||||||
|
<h1 class="text-4xl md:text-5xl font-bold text-amber-800 mb-6">
|
||||||
|
林赛花杯写作比赛
|
||||||
|
</h1>
|
||||||
|
<p class="text-xl md:text-2xl text-amber-600 mb-6">
|
||||||
|
以文字传递温情，用笔墨书写华章
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-600 mb-10 max-w-2xl mx-auto">
|
||||||
|
马来西亚柔佛州华文写作比赛，由林赛花教育基金主办，柔佛州华校校友会联合会承办，面向全柔独中及国中学生。
|
||||||
|
</p>
|
||||||
|
<div class="flex flex-col sm:flex-row justify-center gap-4">
|
||||||
|
<a
|
||||||
|
href="about.html"
|
||||||
|
class="px-6 py-3 bg-amber-500 text-white rounded-lg font-medium hover:bg-amber-600 transition shadow-md"
|
||||||
|
>了解比赛</a
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="works.html"
|
||||||
|
class="px-6 py-3 border-2 border-amber-500 text-amber-600 rounded-lg font-medium hover:bg-amber-50 transition"
|
||||||
|
>欣赏作品</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 主要入口卡片 -->
|
||||||
|
<section class="py-16 bg-white theme-transition">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12">
|
||||||
|
探索林赛花杯
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
|
<!-- 比赛介绍卡片 -->
|
||||||
|
<div
|
||||||
|
class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition fade-in"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="w-14 h-14 rounded-full bg-amber-100 flex items-center justify-center text-amber-600 text-xl mb-4"
|
||||||
|
>
|
||||||
|
<i class="fas fa-book-open"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold text-gray-800 mb-3">比赛介绍</h3>
|
||||||
|
<p class="text-gray-600 mb-4">
|
||||||
|
了解林赛花教育基金背景、比赛宗旨与参赛细则，掌握最新比赛信息。
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
href="about.html"
|
||||||
|
class="text-amber-600 font-medium flex items-center hover:text-amber-700 transition"
|
||||||
|
>
|
||||||
|
了解更多 <i class="fas fa-arrow-right ml-2 text-sm"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 优秀作品卡片 -->
|
||||||
|
<div
|
||||||
|
class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition fade-in"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="w-14 h-14 rounded-full bg-amber-100 flex items-center justify-center text-amber-600 text-xl mb-4"
|
||||||
|
>
|
||||||
|
<i class="fas fa-trophy"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold text-gray-800 mb-3">优秀作品</h3>
|
||||||
|
<p class="text-gray-600 mb-4">
|
||||||
|
欣赏往届获奖学生的优秀作品，感受文字的力量与华文写作的魅力。
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
href="works.html"
|
||||||
|
class="text-amber-600 font-medium flex items-center hover:text-amber-700 transition"
|
||||||
|
>
|
||||||
|
查看作品 <i class="fas fa-arrow-right ml-2 text-sm"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 联系咨询卡片 -->
|
||||||
|
<div
|
||||||
|
class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition fade-in"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="w-14 h-14 rounded-full bg-amber-100 flex items-center justify-center text-amber-600 text-xl mb-4"
|
||||||
|
>
|
||||||
|
<i class="fas fa-envelope"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold text-gray-800 mb-3">联系咨询</h3>
|
||||||
|
<p class="text-gray-600 mb-4">
|
||||||
|
咨询比赛相关事宜或获取更多信息，我们期待您的关注与支持！
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
href="contact.html"
|
||||||
|
class="text-amber-600 font-medium flex items-center hover:text-amber-700 transition"
|
||||||
|
>
|
||||||
|
联系我们 <i class="fas fa-arrow-right ml-2 text-sm"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 最新公告 -->
|
||||||
|
<section class="py-16 bg-gray-50 theme-transition">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<h2 class="text-3xl font-bold text-center text-gray-800 mb-4">
|
||||||
|
最新公告
|
||||||
|
</h2>
|
||||||
|
<p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">
|
||||||
|
获取林赛花杯写作比赛的最新动态与资讯
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="max-w-4xl mx-auto">
|
||||||
|
<!-- 公告1 -->
|
||||||
|
<div class="bg-white rounded-xl shadow-md p-6 mb-6 fade-in">
|
||||||
|
<div
|
||||||
|
class="flex flex-col md:flex-row md:items-center md:justify-between mb-4"
|
||||||
|
>
|
||||||
|
<h3 class="text-xl font-bold text-gray-800">
|
||||||
|
第九届林赛花杯写作比赛正式启动
|
||||||
|
</h3>
|
||||||
|
<span class="text-amber-600 font-medium mt-2 md:mt-0"
|
||||||
|
>2023年10月15日</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<p class="text-gray-600 mb-4">
|
||||||
|
第九届林赛花杯写作比赛现已开始接受投稿，本届主题为「传统美德与现代生活」，截稿日期为2024年1月31日。
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="text-amber-600 font-medium hover:text-amber-700 transition"
|
||||||
|
>阅读全文 →</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 公告2 -->
|
||||||
|
<div class="bg-white rounded-xl shadow-md p-6 mb-6 fade-in">
|
||||||
|
<div
|
||||||
|
class="flex flex-col md:flex-row md:items-center md:justify-between mb-4"
|
||||||
|
>
|
||||||
|
<h3 class="text-xl font-bold text-gray-800">
|
||||||
|
第八届林赛花杯获奖名单公布
|
||||||
|
</h3>
|
||||||
|
<span class="text-amber-600 font-medium mt-2 md:mt-0"
|
||||||
|
>2023年8月28日</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<p class="text-gray-600 mb-4">
|
||||||
|
第八届林赛花杯写作比赛评审工作已完成，共有32篇作品获奖。颁奖典礼将于9月15日举行。
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="text-amber-600 font-medium hover:text-amber-700 transition"
|
||||||
|
>阅读全文 →</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 公告3 -->
|
||||||
|
<div class="bg-white rounded-xl shadow-md p-6 fade-in">
|
||||||
|
<div
|
||||||
|
class="flex flex-col md:flex-row md:items-center md:justify-between mb-4"
|
||||||
|
>
|
||||||
|
<h3 class="text-xl font-bold text-gray-800">
|
||||||
|
写作工作坊顺利举行
|
||||||
|
</h3>
|
||||||
|
<span class="text-amber-600 font-medium mt-2 md:mt-0"
|
||||||
|
>2023年7月10日</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<p class="text-gray-600 mb-4">
|
||||||
|
林赛花教育基金于7月8日举办了华文写作工作坊，邀请知名作家分享创作经验，吸引近百名学生参与。
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="text-amber-600 font-medium hover:text-amber-700 transition"
|
||||||
|
>阅读全文 →</a
|
||||||
|
>
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<!-- 名言引用 -->
|
||||||
|
<section class="py-16 bg-white theme-transition">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<div class="max-w-3xl mx-auto text-center">
|
||||||
|
<i class="fas fa-quote-left text-amber-500 text-4xl mb-6"></i>
|
||||||
|
<blockquote
|
||||||
|
class="text-2xl md:text-3xl font-light text-gray-700 italic mb-6 fade-in"
|
||||||
|
>
|
||||||
|
"读书破万卷，下笔如有神。"
|
||||||
|
</blockquote>
|
||||||
|
<p class="text-gray-600 text-lg">—— 杜甫</p>
|
||||||
|
</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 src="./assets/script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
712
work-detail.html
Normal file
712
work-detail.html
Normal file
@@ -0,0 +1,712 @@
|
|||||||
|
<!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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 作品内容样式 */
|
||||||
|
.work-content {
|
||||||
|
line-height: 1.8;
|
||||||
|
font-size: 1.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.work-content p {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
|
||||||
|
.work-content .first-letter::first-letter {
|
||||||
|
font-size: 3.5rem;
|
||||||
|
float: left;
|
||||||
|
line-height: 1;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
color: #d97706;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 作者信息卡片 */
|
||||||
|
.author-card {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.author-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 阅读进度条 */
|
||||||
|
.reading-progress {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 0%;
|
||||||
|
height: 3px;
|
||||||
|
background-color: #d97706;
|
||||||
|
z-index: 9999;
|
||||||
|
transition: width 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 分享按钮样式 */
|
||||||
|
.share-btn {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.share-btn:hover {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="theme-transition bg-white text-gray-800">
|
||||||
|
<!-- 阅读进度条 -->
|
||||||
|
<div class="reading-progress" id="reading-progress"></div>
|
||||||
|
|
||||||
|
<!-- 导航栏 -->
|
||||||
|
<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-amber-600 border-b-2 border-amber-500 pb-1"
|
||||||
|
>优秀作品</a
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="contact.html"
|
||||||
|
class="font-medium text-gray-600 hover:text-amber-500 transition"
|
||||||
|
>联系咨询</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-amber-600">优秀作品</a>
|
||||||
|
<a href="contact.html" class="font-medium text-gray-600">联系咨询</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- 作品头部信息 -->
|
||||||
|
<section
|
||||||
|
class="pt-32 pb-12 bg-gradient-to-br from-amber-50 to-amber-100 theme-transition"
|
||||||
|
>
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<div class="max-w-4xl mx-auto">
|
||||||
|
<!-- 返回按钮 -->
|
||||||
|
<a
|
||||||
|
href="works.html"
|
||||||
|
class="inline-flex items-center text-amber-600 hover:text-amber-700 font-medium mb-6 fade-in"
|
||||||
|
>
|
||||||
|
<i class="fas fa-arrow-left mr-2"></i> 返回作品列表
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 作品标题和奖项 -->
|
||||||
|
<div class="text-center mb-8 fade-in">
|
||||||
|
<span
|
||||||
|
class="inline-block px-4 py-1 bg-amber-500 text-white rounded-full text-sm font-medium mb-4"
|
||||||
|
>第九届 · 高中组 · 一等奖</span
|
||||||
|
>
|
||||||
|
<h1 class="text-4xl md:text-5xl font-bold text-amber-800 mb-4">
|
||||||
|
《时光里的茶香》
|
||||||
|
</h1>
|
||||||
|
<div class="flex flex-wrap justify-center gap-4 text-gray-600">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<i class="fas fa-user mr-2"></i>
|
||||||
|
<span>作者：陈晓雯</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<i class="fas fa-school mr-2"></i>
|
||||||
|
<span>学校：柔佛独中</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<i class="fas fa-calendar mr-2"></i>
|
||||||
|
<span>发布时间：2023年8月</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 分享按钮 -->
|
||||||
|
<div class="flex justify-center gap-4 mt-6 fade-in">
|
||||||
|
<button
|
||||||
|
class="share-btn w-10 h-10 rounded-full bg-amber-500 text-white flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<i class="fab fa-facebook-f"></i>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="share-btn w-10 h-10 rounded-full bg-amber-500 text-white flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<i class="fab fa-twitter"></i>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="share-btn w-10 h-10 rounded-full bg-amber-500 text-white flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<i class="fab fa-weibo"></i>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="share-btn w-10 h-10 rounded-full bg-amber-500 text-white flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<i class="fas fa-link"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 作品内容 -->
|
||||||
|
<section class="py-16 bg-white theme-transition">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<div class="max-w-3xl mx-auto">
|
||||||
|
<!-- 作品内容 -->
|
||||||
|
<article class="work-content text-gray-700 fade-in">
|
||||||
|
<p class="first-letter">
|
||||||
|
外婆的茶室里总是弥漫着淡淡的茶香，那香气似乎能穿透时光，带我回到童年。每一个午后，阳光透过木窗洒在茶桌上，外婆轻轻摆弄着茶具，讲述着那些关于家族、关于传统的故事。
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
我记忆中的第一个茶香，是铁观音的兰花香。那时我六岁，刚上小学一年级。外婆泡茶时总是很专注，先用热水温壶，再放入茶叶，轻轻摇晃让茶叶舒展，然后注入热水。她说，泡茶如做人，需要耐心和细心。那时的我并不懂这些道理，只是喜欢看茶叶在水中慢慢舒展，像一个个小精灵在跳舞。
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
茶香中，我学会了第一个汉字——"茶"。外婆握着我的手，在纸上慢慢写下这个字。她说，"茶"字是由"草"、"人"和"木"组成，人在草木间，就是茶。这个解释让我对汉字产生了浓厚的兴趣，也让我明白了中华文化的博大精深。
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
随着年龄增长，我开始帮外婆打理茶室。学习区分不同的茶叶，了解它们的产地和特点。外婆告诉我，茶不仅仅是一种饮品，更是一种文化，一种生活态度。她说，人生如茶，有苦有甜，需要慢慢品味。
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
十三岁那年，外婆教我泡第一壶茶。我手忙脚乱，不是水温不对，就是时间不准。外婆没有责备，只是耐心地纠正我的每一个动作。她说，泡茶最重要的是心静，心静了，茶自然就好喝了。那天，我泡的茶虽然味道一般，但外婆却喝得很开心。
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
高中后，学业繁忙，去茶室的时间少了。但每次考试前，我总会去茶室坐一会儿，闻闻茶香，让心情平静下来。茶香成了我应对压力的良药，也成了我与外婆之间特殊的纽带。
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
去年，外婆生病住院。我去医院看她时，带了一小包她最爱的铁观音。病房里没有茶具，我就用纸杯简单泡了一杯。外婆接过纸杯，闻了闻茶香，脸上露出了欣慰的笑容。她说，茶香让她想起了茶室的时光，想起了我们在一起的点点滴滴。
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
如今，外婆已经离开我们半年了。茶室依然保持着原来的样子，我每周都会去打扫，泡一壶茶，静静地坐一会儿。茶香依旧，只是泡茶的人变了。但我能感觉到，外婆的精神还在茶室里，还在每一片茶叶中。
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
茶香穿越时光，连接着过去与现在，连接着外婆与我。它不仅是味道，更是记忆，是文化，是传承。每当我闻到茶香，就仿佛看到了外婆慈祥的笑容，听到了她温柔的声音。
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
中华文化就像这茶香，绵延数千年，渗透在每一个中国人的生活中。它可能是一杯茶，一首诗，一个汉字，或者一个传统节日。无论形式如何变化，其精神内核始终不变。
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
作为年轻一代，我们有责任传承这份文化，让它在新的时代焕发出新的光彩。就像外婆教我泡茶一样，我们要把中华文化的精髓传递给下一代，让茶香永远飘散在时光里。
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- 作品标签 -->
|
||||||
|
<div class="mt-12 pt-8 border-t border-gray-200 fade-in">
|
||||||
|
<div class="flex flex-wrap gap-2">
|
||||||
|
<span
|
||||||
|
class="px-3 py-1 bg-amber-100 text-amber-700 rounded-full text-sm"
|
||||||
|
>传统文化</span
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="px-3 py-1 bg-amber-100 text-amber-700 rounded-full text-sm"
|
||||||
|
>亲情</span
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="px-3 py-1 bg-amber-100 text-amber-700 rounded-full text-sm"
|
||||||
|
>茶文化</span
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="px-3 py-1 bg-amber-100 text-amber-700 rounded-full text-sm"
|
||||||
|
>传承</span
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="px-3 py-1 bg-amber-100 text-amber-700 rounded-full text-sm"
|
||||||
|
>记忆</span
|
||||||
|
>
|
||||||
|
</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-4xl mx-auto">
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||||
|
<!-- 作者信息 -->
|
||||||
|
<div class="author-card bg-white rounded-2xl shadow-md p-6 fade-in">
|
||||||
|
<h3
|
||||||
|
class="text-2xl font-bold text-amber-800 mb-6 flex items-center"
|
||||||
|
>
|
||||||
|
<i class="fas fa-user-circle text-amber-500 mr-2"></i>
|
||||||
|
作者介绍
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div class="flex items-start mb-6">
|
||||||
|
<div
|
||||||
|
class="w-20 h-20 rounded-full bg-amber-100 flex items-center justify-center text-amber-600 text-2xl mr-4"
|
||||||
|
>
|
||||||
|
<i class="fas fa-user-graduate"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-xl font-bold text-gray-800">陈晓雯</h4>
|
||||||
|
<p class="text-gray-600">柔佛独中 · 高中三年级</p>
|
||||||
|
<p class="text-sm text-gray-500 mt-2">
|
||||||
|
热爱华文写作与中华传统文化，曾多次在校内外写作比赛中获奖。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<i class="fas fa-trophy text-amber-500 mr-3"></i>
|
||||||
|
<div>
|
||||||
|
<p class="font-medium">获奖经历</p>
|
||||||
|
<p class="text-sm text-gray-600">
|
||||||
|
第九届林赛花杯写作比赛高中组一等奖
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center">
|
||||||
|
<i class="fas fa-pen-fancy text-amber-500 mr-3"></i>
|
||||||
|
<div>
|
||||||
|
<p class="font-medium">创作理念</p>
|
||||||
|
<p class="text-sm text-gray-600">
|
||||||
|
希望通过文字记录生活中的美好瞬间，传承中华优秀传统文化。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center">
|
||||||
|
<i class="fas fa-heart text-amber-500 mr-3"></i>
|
||||||
|
<div>
|
||||||
|
<p class="font-medium">兴趣爱好</p>
|
||||||
|
<p class="text-sm text-gray-600">
|
||||||
|
阅读、书法、茶道、传统音乐
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 评委点评 -->
|
||||||
|
<div class="bg-white rounded-2xl shadow-md p-6 fade-in">
|
||||||
|
<h3
|
||||||
|
class="text-2xl font-bold text-amber-800 mb-6 flex items-center"
|
||||||
|
>
|
||||||
|
<i class="fas fa-star text-amber-500 mr-2"></i>
|
||||||
|
评委点评
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div class="space-y-6">
|
||||||
|
<div class="border-l-4 border-amber-500 pl-4 py-1">
|
||||||
|
<p class="text-gray-700 italic">
|
||||||
|
"作品以茶香为线索，巧妙串联起个人成长与传统文化传承的主题，情感真挚，文字优美，展现了作者深厚的华文功底和对中华文化的深刻理解。"
|
||||||
|
</p>
|
||||||
|
<p class="text-right text-gray-600 mt-2">—— 李明华教授</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="border-l-4 border-amber-500 pl-4 py-1">
|
||||||
|
<p class="text-gray-700 italic">
|
||||||
|
"作者通过细腻的笔触，将茶文化与亲情记忆完美融合，既有个人情感的抒发，又有文化传承的思考，是一篇难得的佳作。"
|
||||||
|
</p>
|
||||||
|
<p class="text-right text-gray-600 mt-2">—— 陈文静老师</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-amber-50 rounded-lg p-4">
|
||||||
|
<h4 class="font-bold text-amber-800 mb-2">综合评分</h4>
|
||||||
|
<div class="flex items-center mb-2">
|
||||||
|
<span class="text-gray-700 mr-2">内容立意：</span>
|
||||||
|
<div class="flex">
|
||||||
|
<i class="fas fa-star text-amber-500"></i>
|
||||||
|
<i class="fas fa-star text-amber-500"></i>
|
||||||
|
<i class="fas fa-star text-amber-500"></i>
|
||||||
|
<i class="fas fa-star text-amber-500"></i>
|
||||||
|
<i class="fas fa-star text-amber-500"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center mb-2">
|
||||||
|
<span class="text-gray-700 mr-2">语言表达：</span>
|
||||||
|
<div class="flex">
|
||||||
|
<i class="fas fa-star text-amber-500"></i>
|
||||||
|
<i class="fas fa-star text-amber-500"></i>
|
||||||
|
<i class="fas fa-star text-amber-500"></i>
|
||||||
|
<i class="fas fa-star text-amber-500"></i>
|
||||||
|
<i class="fas fa-star text-amber-500"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<span class="text-gray-700 mr-2">结构布局：</span>
|
||||||
|
<div class="flex">
|
||||||
|
<i class="fas fa-star text-amber-500"></i>
|
||||||
|
<i class="fas fa-star text-amber-500"></i>
|
||||||
|
<i class="fas fa-star text-amber-500"></i>
|
||||||
|
<i class="fas fa-star text-amber-500"></i>
|
||||||
|
<i class="fas fa-star text-amber-500"></i>
|
||||||
|
</div>
|
||||||
|
</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="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||||
|
<!-- 相关作品1 -->
|
||||||
|
<div class="bg-gray-50 rounded-xl p-6 fade-in">
|
||||||
|
<div class="flex justify-between items-start mb-4">
|
||||||
|
<span
|
||||||
|
class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm font-medium"
|
||||||
|
>二等奖</span
|
||||||
|
>
|
||||||
|
<span class="text-gray-500 text-sm">第八届·高中组</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold text-gray-800 mb-3">
|
||||||
|
《传统节日的温度》
|
||||||
|
</h3>
|
||||||
|
<p class="text-gray-600 mb-4 line-clamp-3">
|
||||||
|
在现代都市的喧嚣中，传统节日似乎变得越来越形式化。直到那年春节，我陪着奶奶准备年货，听她讲述每一个习俗背后的故事，才真正感受到传统节日的温度...
|
||||||
|
</p>
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<span class="text-gray-500 text-sm">作者：黄诗琪</span>
|
||||||
|
<a
|
||||||
|
href="work-detail.html"
|
||||||
|
class="text-amber-600 font-medium hover:text-amber-700 transition"
|
||||||
|
>阅读全文 →</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 相关作品2 -->
|
||||||
|
<div class="bg-gray-50 rounded-xl p-6 fade-in">
|
||||||
|
<div class="flex justify-between items-start mb-4">
|
||||||
|
<span
|
||||||
|
class="px-3 py-1 bg-amber-100 text-amber-700 rounded-full text-sm font-medium"
|
||||||
|
>一等奖</span
|
||||||
|
>
|
||||||
|
<span class="text-gray-500 text-sm">第八届·初中组</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold text-gray-800 mb-3">
|
||||||
|
《雨中华文课》
|
||||||
|
</h3>
|
||||||
|
<p class="text-gray-600 mb-4 line-clamp-3">
|
||||||
|
雨滴敲打着教室的窗户，林老师站在讲台上，用温柔而坚定的声音讲述着汉字的故事。她说，每一个汉字都是一幅画，一个故事，承载着中华五千年的文明...
|
||||||
|
</p>
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<span class="text-gray-500 text-sm">作者：李明轩</span>
|
||||||
|
<a
|
||||||
|
href="work-detail.html"
|
||||||
|
class="text-amber-600 font-medium hover:text-amber-700 transition"
|
||||||
|
>阅读全文 →</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-center mt-8">
|
||||||
|
<a
|
||||||
|
href="works.html"
|
||||||
|
class="inline-flex items-center px-6 py-3 bg-amber-500 text-white rounded-lg font-medium hover:bg-amber-600 transition shadow-md"
|
||||||
|
>
|
||||||
|
<i class="fas fa-book-open mr-2"></i> 浏览更多优秀作品
|
||||||
|
</a>
|
||||||
|
</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 readingProgress = document.getElementById("reading-progress");
|
||||||
|
|
||||||
|
function updateReadingProgress() {
|
||||||
|
const windowHeight = window.innerHeight;
|
||||||
|
const documentHeight =
|
||||||
|
document.documentElement.scrollHeight - windowHeight;
|
||||||
|
const scrollTop =
|
||||||
|
window.pageYOffset || document.documentElement.scrollTop;
|
||||||
|
const progress = (scrollTop / documentHeight) * 100;
|
||||||
|
|
||||||
|
readingProgress.style.width = progress + "%";
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener("scroll", updateReadingProgress);
|
||||||
|
updateReadingProgress();
|
||||||
|
|
||||||
|
// 分享功能
|
||||||
|
const shareButtons = document.querySelectorAll(".share-btn");
|
||||||
|
|
||||||
|
shareButtons.forEach((button) => {
|
||||||
|
button.addEventListener("click", function () {
|
||||||
|
const title = document.title;
|
||||||
|
const url = window.location.href;
|
||||||
|
|
||||||
|
if (this.querySelector(".fa-facebook-f")) {
|
||||||
|
window.open(
|
||||||
|
`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
|
||||||
|
url
|
||||||
|
)}`,
|
||||||
|
"_blank"
|
||||||
|
);
|
||||||
|
} else if (this.querySelector(".fa-twitter")) {
|
||||||
|
window.open(
|
||||||
|
`https://twitter.com/intent/tweet?text=${encodeURIComponent(
|
||||||
|
title
|
||||||
|
)}&url=${encodeURIComponent(url)}`,
|
||||||
|
"_blank"
|
||||||
|
);
|
||||||
|
} else if (this.querySelector(".fa-weibo")) {
|
||||||
|
window.open(
|
||||||
|
`http://service.weibo.com/share/share.php?title=${encodeURIComponent(
|
||||||
|
title
|
||||||
|
)}&url=${encodeURIComponent(url)}`,
|
||||||
|
"_blank"
|
||||||
|
);
|
||||||
|
} else if (this.querySelector(".fa-link")) {
|
||||||
|
navigator.clipboard.writeText(url).then(() => {
|
||||||
|
alert("链接已复制到剪贴板");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 滚动动画
|
||||||
|
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>
|
||||||
443
works.html
Normal file
443
works.html
Normal file
@@ -0,0 +1,443 @@
|
|||||||
|
<!-- works.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 作品卡片悬停效果 */
|
||||||
|
.work-card {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.work-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
}
|
||||||
|
</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-amber-600 border-b-2 border-amber-500 pb-1"
|
||||||
|
>优秀作品</a
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="contact.html"
|
||||||
|
class="font-medium text-gray-600 hover:text-amber-500 transition"
|
||||||
|
>联系咨询</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-amber-600">优秀作品</a>
|
||||||
|
<a href="contact.html" class="font-medium text-gray-600">联系咨询</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- 页面标题 -->
|
||||||
|
<section
|
||||||
|
class="pt-32 pb-12 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-8 bg-white border-b theme-transition">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<div class="flex flex-wrap justify-center gap-4">
|
||||||
|
<button
|
||||||
|
class="px-4 py-2 bg-amber-500 text-white rounded-full font-medium"
|
||||||
|
>
|
||||||
|
全部作品
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="px-4 py-2 bg-gray-100 text-gray-700 rounded-full font-medium hover:bg-gray-200 transition"
|
||||||
|
>
|
||||||
|
第八届 (2023)
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="px-4 py-2 bg-gray-100 text-gray-700 rounded-full font-medium hover:bg-gray-200 transition"
|
||||||
|
>
|
||||||
|
第七届 (2022)
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="px-4 py-2 bg-gray-100 text-gray-700 rounded-full font-medium hover:bg-gray-200 transition"
|
||||||
|
>
|
||||||
|
第六届 (2021)
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="px-4 py-2 bg-gray-100 text-gray-700 rounded-full font-medium hover:bg-gray-200 transition"
|
||||||
|
>
|
||||||
|
高中组
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="px-4 py-2 bg-gray-100 text-gray-700 rounded-full font-medium hover:bg-gray-200 transition"
|
||||||
|
>
|
||||||
|
初中组
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 作品展示 -->
|
||||||
|
<section class="py-16 bg-gray-50 theme-transition">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
|
<!-- 作品1 -->
|
||||||
|
<div
|
||||||
|
class="work-card bg-white rounded-xl shadow-md overflow-hidden fade-in"
|
||||||
|
>
|
||||||
|
<div class="p-6">
|
||||||
|
<div class="flex justify-between items-start mb-4">
|
||||||
|
<span
|
||||||
|
class="px-3 py-1 bg-amber-100 text-amber-700 rounded-full text-sm font-medium"
|
||||||
|
>一等奖</span
|
||||||
|
>
|
||||||
|
<span class="text-gray-500 text-sm">第八届·高中组</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold text-gray-800 mb-3">
|
||||||
|
《时光里的茶香》
|
||||||
|
</h3>
|
||||||
|
<p class="text-gray-600 mb-4 line-clamp-3">
|
||||||
|
外婆的茶室里总是弥漫着淡淡的茶香，那香气似乎能穿透时光，带我回到童年。每一个午后，阳光透过木窗洒在茶桌上，外婆轻轻摆弄着茶具，讲述着那些关于家族、关于传统的故事...
|
||||||
|
</p>
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<span class="text-gray-500 text-sm"
|
||||||
|
>作者：陈晓雯 · 柔佛独中</span
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="work-detail.html"
|
||||||
|
class="text-amber-600 font-medium hover:text-amber-700 transition"
|
||||||
|
>阅读全文 →</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 作品2 -->
|
||||||
|
<div
|
||||||
|
class="work-card bg-white rounded-xl shadow-md overflow-hidden fade-in"
|
||||||
|
>
|
||||||
|
<div class="p-6">
|
||||||
|
<div class="flex justify-between items-start mb-4">
|
||||||
|
<span
|
||||||
|
class="px-3 py-1 bg-amber-100 text-amber-700 rounded-full text-sm font-medium"
|
||||||
|
>一等奖</span
|
||||||
|
>
|
||||||
|
<span class="text-gray-500 text-sm">第八届·初中组</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold text-gray-800 mb-3">
|
||||||
|
《雨中华文课》
|
||||||
|
</h3>
|
||||||
|
<p class="text-gray-600 mb-4 line-clamp-3">
|
||||||
|
雨滴敲打着教室的窗户，林老师站在讲台上，用温柔而坚定的声音讲述着汉字的故事。她说，每一个汉字都是一幅画，一个故事，承载着中华五千年的文明...
|
||||||
|
</p>
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<span class="text-gray-500 text-sm"
|
||||||
|
>作者：李明轩 · 新山国中</span
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="work-detail.html"
|
||||||
|
class="text-amber-600 font-medium hover:text-amber-700 transition"
|
||||||
|
>阅读全文 →</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 作品3 -->
|
||||||
|
<div
|
||||||
|
class="work-card bg-white rounded-xl shadow-md overflow-hidden fade-in"
|
||||||
|
>
|
||||||
|
<div class="p-6">
|
||||||
|
<div class="flex justify-between items-start mb-4">
|
||||||
|
<span
|
||||||
|
class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm font-medium"
|
||||||
|
>二等奖</span
|
||||||
|
>
|
||||||
|
<span class="text-gray-500 text-sm">第八届·高中组</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold text-gray-800 mb-3">
|
||||||
|
《传统节日的温度》
|
||||||
|
</h3>
|
||||||
|
<p class="text-gray-600 mb-4 line-clamp-3">
|
||||||
|
在现代都市的喧嚣中，传统节日似乎变得越来越形式化。直到那年春节，我陪着奶奶准备年货，听她讲述每一个习俗背后的故事，才真正感受到传统节日的温度...
|
||||||
|
</p>
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<span class="text-gray-500 text-sm"
|
||||||
|
>作者：黄诗琪 · 峇株华仁中学</span
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="work-detail.html"
|
||||||
|
class="text-amber-600 font-medium hover:text-amber-700 transition"
|
||||||
|
>阅读全文 →</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 作品4 -->
|
||||||
|
<div
|
||||||
|
class="work-card bg-white rounded-xl shadow-md overflow-hidden fade-in"
|
||||||
|
>
|
||||||
|
<div class="p-6">
|
||||||
|
<div class="flex justify-between items-start mb-4">
|
||||||
|
<span
|
||||||
|
class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm font-medium"
|
||||||
|
>二等奖</span
|
||||||
|
>
|
||||||
|
<span class="text-gray-500 text-sm">第七届·高中组</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold text-gray-800 mb-3">
|
||||||
|
《汉字里的哲学》
|
||||||
|
</h3>
|
||||||
|
<p class="text-gray-600 mb-4 line-clamp-3">
|
||||||
|
学习汉字多年，直到有一天我静下心来研究每个汉字的结构和起源，才发现其中蕴含的深刻哲学。"仁"字是二人相依，"信"字是人言为信...
|
||||||
|
</p>
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<span class="text-gray-500 text-sm"
|
||||||
|
>作者：张伟伦 · 居銮中华中学</span
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="work-detail.html"
|
||||||
|
class="text-amber-600 font-medium hover:text-amber-700 transition"
|
||||||
|
>阅读全文 →</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 作品5 -->
|
||||||
|
<div
|
||||||
|
class="work-card bg-white rounded-xl shadow-md overflow-hidden fade-in"
|
||||||
|
>
|
||||||
|
<div class="p-6">
|
||||||
|
<div class="flex justify-between items-start mb-4">
|
||||||
|
<span
|
||||||
|
class="px-3 py-1 bg-green-100 text-green-700 rounded-full text-sm font-medium"
|
||||||
|
>三等奖</span
|
||||||
|
>
|
||||||
|
<span class="text-gray-500 text-sm">第七届·初中组</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold text-gray-800 mb-3">
|
||||||
|
《我的华文老师》
|
||||||
|
</h3>
|
||||||
|
<p class="text-gray-600 mb-4 line-clamp-3">
|
||||||
|
王老师是我遇见过最特别的华文老师。她不仅教我们识字作文，更带领我们走进中华文化的殿堂。她说，学习华文不仅是掌握一门语言，更是继承一种文明...
|
||||||
|
</p>
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<span class="text-gray-500 text-sm"
|
||||||
|
>作者：林心如 · 麻坡中化中学</span
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="work-detail.html"
|
||||||
|
class="text-amber-600 font-medium hover:text-amber-700 transition"
|
||||||
|
>阅读全文 →</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 作品6 -->
|
||||||
|
<div
|
||||||
|
class="work-card bg-white rounded-xl shadow-md overflow-hidden fade-in"
|
||||||
|
>
|
||||||
|
<div class="p-6">
|
||||||
|
<div class="flex justify-between items-start mb-4">
|
||||||
|
<span
|
||||||
|
class="px-3 py-1 bg-green-100 text-green-700 rounded-full text-sm font-medium"
|
||||||
|
>三等奖</span
|
||||||
|
>
|
||||||
|
<span class="text-gray-500 text-sm">第六届·高中组</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold text-gray-800 mb-3">
|
||||||
|
《家乡的味道》
|
||||||
|
</h3>
|
||||||
|
<p class="text-gray-600 mb-4 line-clamp-3">
|
||||||
|
离开家乡求学多年，最怀念的是妈妈做的肉骨茶。那浓郁的香气，不仅是一种食物的味道，更是家的味道，是文化的味道，是无论走到哪里都忘不了的根...
|
||||||
|
</p>
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<span class="text-gray-500 text-sm"
|
||||||
|
>作者：吴家明 · 新文龙中华中学</span
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="work-detail.html"
|
||||||
|
class="text-amber-600 font-medium hover:text-amber-700 transition"
|
||||||
|
>阅读全文 →</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 分页 -->
|
||||||
|
<div class="flex justify-center mt-12">
|
||||||
|
<div class="flex space-x-2">
|
||||||
|
<button
|
||||||
|
class="w-10 h-10 flex items-center justify-center bg-amber-500 text-white rounded-lg"
|
||||||
|
>
|
||||||
|
1
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="w-10 h-10 flex items-center justify-center bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition"
|
||||||
|
>
|
||||||
|
2
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="w-10 h-10 flex items-center justify-center bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition"
|
||||||
|
>
|
||||||
|
3
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="w-10 h-10 flex items-center justify-center bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition"
|
||||||
|
>
|
||||||
|
<i class="fas fa-chevron-right"></i>
|
||||||
|
</button>
|
||||||
|
</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 src="./assets/script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user