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

initial commit

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

392
index.html Normal file
View 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>
&copy; 2023 林赛花教育基金·林赛花杯官方网站 |
非官方展示站，仅供公益学习使用
</p>
</div>
</div>
</footer>
<script src="./assets/script.js"></script>
</body>
</html>