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

712
work-detail.html Normal file
View 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>
&copy; 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>