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

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