713 lines
28 KiB
HTML
713 lines
28 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;
|
||
}
|
||
|
||
/* 作品内容样式 */
|
||
.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>
|