804 lines
31 KiB
HTML
804 lines
31 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh" class="light">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>奖项设置 - 林赛花杯写作比赛</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link
|
||
rel="stylesheet"
|
||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
||
/>
|
||
<style>
|
||
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap");
|
||
body {
|
||
font-family: "Noto Sans SC", sans-serif;
|
||
}
|
||
|
||
.fade-in {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
transition: all 0.6s ease;
|
||
}
|
||
.fade-in.visible {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.theme-transition {
|
||
transition: background-color 0.3s ease, color 0.3s ease;
|
||
}
|
||
|
||
/* 奖项卡片样式 */
|
||
.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>
|