vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update ui

Browse Source
This commit is contained in:
zzlgreat
2025-11-13 17:38:54 +08:00
parent 0e32076e71
commit cb4c51a958
65 changed files with 39193 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

717
public/htmls/电解液添加剂.html Normal file
View File

@@ -0,0 +1,717 @@
<!DOCTYPE html>
<html lang="zh-CN">
<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">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
* {
font-family: 'Inter', sans-serif;
}
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.glass-effect {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.price-rise {
animation: priceUp 2s ease-in-out infinite;
}
@keyframes priceUp {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
.hover-lift {
transition: all 0.3s ease;
}
.hover-lift:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.timeline-item {
position: relative;
padding-left: 40px;
}
.timeline-item::before {
content: '';
position: absolute;
left: 0;
top: 8px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #667eea;
}
.timeline-line {
position: absolute;
left: 5px;
top: 20px;
bottom: -20px;
width: 2px;
background: #e5e7eb;
}
.stock-table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.stock-table::-webkit-scrollbar {
height: 8px;
}
.stock-table::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
.stock-table::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
.pulse-dot {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
}
}
.dark-mode {
background: #1a202c;
color: #e2e8f0;
}
.dark-mode .glass-effect {
background: rgba(26, 32, 44, 0.95);
border: 1px solid rgba(255, 255, 255, 0.1);
}
</style>
</head>
<body class="bg-gray-50">
<!-- Navigation -->
<nav class="fixed top-0 w-full z-50 glass-effect shadow-lg">
<div class="container mx-auto px-4 py-3">
<div class="flex justify-between items-center">
<div class="flex items-center space-x-3">
<i class="fas fa-battery-three-quarters text-2xl text-purple-600"></i>
<span class="text-xl font-bold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">电解液添加剂深度分析</span>
</div>
<button id="darkModeToggle" class="p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700">
<i class="fas fa-moon text-gray-600"></i>
</button>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="gradient-bg text-white pt-20 pb-16">
<div class="container mx-auto px-4 pt-8">
<div class="grid md:grid-cols-2 gap-8 items-center">
<div>
<h1 class="text-4xl md:text-5xl font-bold mb-4 leading-tight">
电解液添加剂<br>
<span class="text-yellow-300">供需逆转</span>的投资机遇
</h1>
<p class="text-xl mb-6 opacity-90">
4680电池量产推动单耗倍增，行业进入盈利修复关键期
</p>
<div class="flex flex-wrap gap-4">
<div class="bg-white/20 rounded-lg px-4 py-2 backdrop-blur">
<i class="fas fa-chart-line mr-2"></i>
VC价格涨<span class="font-bold text-yellow-300">13%</span>
</div>
<div class="bg-white/20 rounded-lg px-4 py-2 backdrop-blur">
<i class="fas fa-industry mr-2"></i>
产能出清<span class="font-bold text-yellow-300">90%</span>
</div>
</div>
</div>
<div class="relative">
<div class="bg-white/10 rounded-2xl p-6 backdrop-blur">
<canvas id="priceChart" width="400" height="200"></canvas>
</div>
<div class="absolute -top-4 -right-4 pulse-dot w-8 h-8 bg-green-400 rounded-full"></div>
</div>
</div>
</div>
</section>
<!-- Key Catalysts Timeline -->
<section class="py-12 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-8 text-center">
<i class="fas fa-clock-rotate-left text-purple-600 mr-2"></i>
核心催化时间轴
</h2>
<div class="max-w-4xl mx-auto">
<div class="space-y-8">
<div class="timeline-item">
<div class="timeline-line"></div>
<div class="bg-gray-50 rounded-lg p-4 hover-lift">
<div class="flex justify-between items-start mb-2">
<h3 class="font-bold text-lg">深度洗牌去产能</h3>
<span class="text-sm text-gray-500">2023-2025上半年</span>
</div>
<p class="text-gray-600">行业经历残酷出清，大量二三线厂商退出或停产</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-line"></div>
<div class="bg-gray-50 rounded-lg p-4 hover-lift">
<div class="flex justify-between items-start mb-2">
<h3 class="font-bold text-lg">供需错配机会提示</h3>
<span class="text-sm text-gray-500">2024年11月</span>
</div>
<p class="text-gray-600">招商电新等卖方开始提示电解液环节投资机会</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-line"></div>
<div class="bg-purple-50 rounded-lg p-4 hover-lift border-l-4 border-purple-500">
<div class="flex justify-between items-start mb-2">
<h3 class="font-bold text-lg text-purple-700">需求爆发 & 供给收缩</h3>
<span class="text-sm text-purple-600">2025年9-10月</span>
</div>
<p class="text-gray-700">
<i class="fas fa-arrow-up text-green-500 mr-1"></i> 电池产量环比增20%<br>
<i class="fas fa-arrow-up text-green-500 mr-1"></i> VC/FEC添加比例翻倍<br>
<i class="fas fa-arrow-down text-red-500 mr-1"></i> 环保核查升级，安全事故加剧紧张
</p>
</div>
</div>
<div class="timeline-item">
<div class="bg-gray-50 rounded-lg p-4 hover-lift">
<div class="flex justify-between items-start mb-2">
<h3 class="font-bold text-lg">价格信号确立</h3>
<span class="text-sm text-gray-500">2025年10月</span>
</div>
<p class="text-gray-600">VC价格涨13%至5.20万元/吨，六氟磷酸锂涨近50%</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Core Logic Section -->
<section class="py-12 bg-gray-50">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-8 text-center">
<i class="fas fa-lightbulb text-yellow-500 mr-2"></i>
核心逻辑分析
</h2>
<div class="grid md:grid-cols-3 gap-6">
<div class="bg-white rounded-xl p-6 hover-lift shadow-lg">
<div class="text-4xl mb-4 text-center">⚖️</div>
<h3 class="text-xl font-bold mb-3 text-center">供需格局逆转</h3>
<ul class="space-y-2 text-gray-600">
<li><i class="fas fa-check text-green-500 mr-2"></i>行业产能出清90%+</li>
<li><i class="fas fa-check text-green-500 mr-2"></i>头部厂商无新增产能</li>
<li><i class="fas fa-check text-green-500 mr-2"></i>环保+事故加剧供给紧张</li>
</ul>
</div>
<div class="bg-white rounded-xl p-6 hover-lift shadow-lg">
<div class="text-4xl mb-4 text-center">📈</div>
<h3 class="text-xl font-bold mb-3 text-center">单耗倍增效应</h3>
<ul class="space-y-2 text-gray-600">
<li><i class="fas fa-battery-full text-blue-500 mr-2"></i>4680电池量产</li>
<li><i class="fas fa-battery-full text-blue-500 mr-2"></i>VC/FEC比例3-5%→8-10%</li>
<li><i class="fas fa-battery-full text-blue-500 mr-2"></i>储能快充需求爆发</li>
</ul>
</div>
<div class="bg-white rounded-xl p-6 hover-lift shadow-lg">
<div class="text-4xl mb-4 text-center">📦</div>
<h3 class="text-xl font-bold mb-3 text-center">库存周期共振</h3>
<ul class="space-y-2 text-gray-600">
<li><i class="fas fa-box text-purple-500 mr-2"></i>库存跌破警戒线</li>
<li><i class="fas fa-box text-purple-500 mr-2"></i>进入补库周期</li>
<li><i class="fas fa-box text-purple-500 mr-2"></i>Q4长单锁定价格</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Market Sentiment -->
<section class="py-12 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-8 text-center">
<i class="fas fa-fire text-orange-500 mr-2"></i>
市场情绪与预期差
</h2>
<div class="max-w-4xl mx-auto">
<div class="bg-gradient-to-r from-red-50 to-orange-50 rounded-xl p-6 border-l-4 border-red-500">
<h3 class="text-xl font-bold mb-4 text-red-700">⚠️ 关键预期差：价格涨 ≠ 利润增</h3>
<div class="grid md:grid-cols-2 gap-6">
<div>
<h4 class="font-bold mb-2 text-gray-700">市场认知（过于乐观）</h4>
<ul class="space-y-1 text-sm text-gray-600">
<li>• "非线性盈利修复"</li>
<li>• "中枢50%以上空间"</li>
<li>• 25年PE仅14倍</li>
</ul>
</div>
<div>
<h4 class="font-bold mb-2 text-gray-700">路演现实（谨慎理性）</h4>
<ul class="space-y-1 text-sm text-gray-600">
<li>• "全行业亏损"</li>
<li>• "目标现金流转正"</li>
<li>• VC价格4.51万仍亏损</li>
</ul>
</div>
</div>
<div class="mt-4 p-3 bg-white/70 rounded-lg">
<p class="text-sm text-gray-700">
<i class="fas fa-info-circle mr-2 text-blue-500"></i>
当前处于"止血"阶段，距离"输血"仍需价格持续上涨或成本优势兑现
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Stock Data Table -->
<section class="py-12 bg-gray-50">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-8 text-center">
<i class="fas fa-table text-blue-600 mr-2"></i>
核心公司产能对比
</h2>
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
<div class="stock-table">
<table class="w-full">
<thead class="bg-gradient-to-r from-purple-600 to-pink-600 text-white">
<tr>
<th class="px-4 py-3 text-left">公司名称</th>
<th class="px-4 py-3 text-left">添加剂类型</th>
<th class="px-4 py-3 text-left">现有产能</th>
<th class="px-4 py-3 text-left">规划产能</th>
<th class="px-4 py-3 text-left">信源</th>
<th class="px-4 py-3 text-left">亮点</th>
</tr>
</thead>
<tbody>
<tr class="border-b hover:bg-gray-50">
<td class="px-4 py-3 font-bold text-purple-600">孚日股份</td>
<td class="px-4 py-3">碳酸亚乙烯酯VC</td>
<td class="px-4 py-3">1万吨</td>
<td class="px-4 py-3">-</td>
<td class="px-4 py-3">半年报</td>
<td class="px-4 py-3 text-sm">全产业链唯一</td>
</tr>
<tr class="border-b hover:bg-gray-50">
<td class="px-4 py-3 font-bold text-purple-600">华盛锂电</td>
<td class="px-4 py-3">VC+FEC合计</td>
<td class="px-4 py-3">1.4万吨/年</td>
<td class="px-4 py-3">6万吨VC项目</td>
<td class="px-4 py-3">互动/调研</td>
<td class="px-4 py-3 text-sm">专业龙头</td>
</tr>
<tr class="border-b hover:bg-gray-50">
<td class="px-4 py-3 font-bold text-purple-600">天赐材料</td>
<td class="px-4 py-3">碳酸亚乙烯酯VC</td>
<td class="px-4 py-3">0.4万吨</td>
<td class="px-4 py-3">2万吨/年</td>
<td class="px-4 py-3">公告</td>
<td class="px-4 py-3 text-sm">自供80%+</td>
</tr>
<tr class="border-b hover:bg-gray-50">
<td class="px-4 py-3 font-bold text-purple-600">永太科技</td>
<td class="px-4 py-3">碳酸亚乙烯酯VC</td>
<td class="px-4 py-3">0.5万吨/年</td>
<td class="px-4 py-3">2.5万吨</td>
<td class="px-4 py-3">调研/公告</td>
<td class="px-4 py-3 text-sm">规划最大</td>
</tr>
<tr class="border-b hover:bg-gray-50">
<td class="px-4 py-3 font-bold text-purple-600">海科新源</td>
<td class="px-4 py-3">VC+FEC合计</td>
<td class="px-4 py-3">1万吨</td>
<td class="px-4 py-3">-</td>
<td class="px-4 py-3">公告</td>
<td class="px-4 py-3 text-sm">溶剂龙头</td>
</tr>
<tr class="border-b hover:bg-gray-50">
<td class="px-4 py-3 font-bold text-purple-600">富祥药业</td>
<td class="px-4 py-3">碳酸亚乙烯酯VC</td>
<td class="px-4 py-3">0.8万吨/年</td>
<td class="px-4 py-3">2万吨/年</td>
<td class="px-4 py-3">互动</td>
<td class="px-4 py-3 text-sm">快速扩张</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- Key Players Analysis -->
<section class="py-12 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-8 text-center">
<i class="fas fa-chess text-indigo-600 mr-2"></i>
核心玩家深度剖析
</h2>
<div class="grid md:grid-cols-3 gap-6">
<div class="bg-gradient-to-br from-purple-50 to-pink-50 rounded-xl p-6 hover-lift">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center text-white font-bold mr-3">
弹
</div>
<h3 class="text-xl font-bold">孚日股份</h3>
</div>
<div class="space-y-3">
<div class="flex items-start">
<i class="fas fa-star text-yellow-500 mt-1 mr-2"></i>
<div>
<p class="font-semibold">高弹性标的</p>
<p class="text-sm text-gray-600">VC产能行业第二，全产业链成本优势</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-shield-alt text-blue-500 mt-1 mr-2"></i>
<div>
<p class="font-semibold">深度绑定龙头</p>
<p class="text-sm text-gray-600">与宁德时代、比亚迪等头部厂商合作</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-exclamation-triangle text-orange-500 mt-1 mr-2"></i>
<div>
<p class="font-semibold">风险提示</p>
<p class="text-sm text-gray-600">主业为家纺，新业务管理能力待验证</p>
</div>
</div>
</div>
</div>
<div class="bg-gradient-to-br from-blue-50 to-cyan-50 rounded-xl p-6 hover-lift">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold mr-3">
专
</div>
<h3 class="text-xl font-bold">华盛锂电</h3>
</div>
<div class="space-y-3">
<div class="flex items-start">
<i class="fas fa-star text-yellow-500 mt-1 mr-2"></i>
<div>
<p class="font-semibold">专业龙头</p>
<p class="text-sm text-gray-600">专注电解液添加剂，行业地位稳固</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-rocket text-green-500 mt-1 mr-2"></i>
<div>
<p class="font-semibold">成长性明确</p>
<p class="text-sm text-gray-600">6万吨VC项目积极推进中</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-exclamation-triangle text-orange-500 mt-1 mr-2"></i>
<div>
<p class="font-semibold">风险提示</p>
<p class="text-sm text-gray-600">扩产进度不及预期，竞争加剧</p>
</div>
</div>
</div>
</div>
<div class="bg-gradient-to-br from-green-50 to-emerald-50 rounded-xl p-6 hover-lift">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-green-600 rounded-full flex items-center justify-center text-white font-bold mr-3">
核
</div>
<h3 class="text-xl font-bold">天赐材料</h3>
</div>
<div class="space-y-3">
<div class="flex items-start">
<i class="fas fa-star text-yellow-500 mt-1 mr-2"></i>
<div>
<p class="font-semibold">一体化巨头</p>
<p class="text-sm text-gray-600">电解液全球市占率超35%</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-crown text-purple-500 mt-1 mr-2"></i>
<div>
<p class="font-semibold">成本控制最强</p>
<p class="text-sm text-gray-600">添加剂自供比例超80%</p>
</div>
</div>
<div class="flex items-start">
<i class="fas fa-exclamation-triangle text-orange-500 mt-1 mr-2"></i>
<div>
<p class="font-semibold">风险提示</p>
<p class="text-sm text-gray-600">体量巨大弹性小，固态电池长期挑战</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Risk Analysis -->
<section class="py-12 bg-gray-50">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-8 text-center">
<i class="fas fa-exclamation-triangle text-red-500 mr-2"></i>
潜在风险与挑战
</h2>
<div class="max-w-4xl mx-auto grid md:grid-cols-2 gap-6">
<div class="bg-white rounded-xl p-6 shadow-lg hover-lift">
<h3 class="text-xl font-bold mb-4 text-red-600">
<i class="fas fa-microchip mr-2"></i>技术风险
</h3>
<ul class="space-y-3 text-gray-600">
<li class="flex items-start">
<i class="fas fa-battery-slash text-red-400 mt-1 mr-2"></i>
<div>
<p class="font-semibold">固态电池替代</p>
<p class="text-sm">2027年后可能量产商用，改变行业需求结构</p>
</div>
</li>
<li class="flex items-start">
<i class="fas fa-vial text-orange-400 mt-1 mr-2"></i>
<div>
<p class="font-semibold">LiFSI产业化进度</p>
<p class="text-sm">生产工艺复杂，成本高昂，进度存不确定性</p>
</div>
</li>
</ul>
</div>
<div class="bg-white rounded-xl p-6 shadow-lg hover-lift">
<h3 class="text-xl font-bold mb-4 text-orange-600">
<i class="fas fa-coins mr-2"></i>商业化风险
</h3>
<ul class="space-y-3 text-gray-600">
<li class="flex items-start">
<i class="fas fa-chart-line text-yellow-400 mt-1 mr-2"></i>
<div>
<p class="font-semibold">涨价持续性</p>
<p class="text-sm">价格过高可能刺激产能复产或寻找替代方案</p>
</div>
</li>
<li class="flex items-start">
<i class="fas fa-handshake text-blue-400 mt-1 mr-2"></i>
<div>
<p class="font-semibold">成本传导</p>
<p class="text-sm">电池厂盈利能力影响成本传导效果</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Investment Insights -->
<section class="py-12 bg-gradient-to-r from-purple-600 to-pink-600 text-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-8 text-center">
<i class="fas fa-lightbulb text-yellow-300 mr-2"></i>
投资启示
</h2>
<div class="max-w-4xl mx-auto">
<div class="bg-white/10 backdrop-blur rounded-xl p-8">
<div class="grid md:grid-cols-2 gap-6 mb-6">
<div>
<h3 class="text-xl font-bold mb-3 text-yellow-300">
<i class="fas fa-star mr-2"></i>最具投资价值方向
</h3>
<ul class="space-y-2">
<li class="flex items-start">
<i class="fas fa-arrow-right text-green-300 mt-1 mr-2"></i>
<span>高弹性品种：孚日股份（周期反转+成本优势）</span>
</li>
<li class="flex items-start">
<i class="fas fa-arrow-right text-green-300 mt-1 mr-2"></i>
<span>核心资产：天赐材料（盈利确定性最高）</span>
</li>
<li class="flex items-start">
<i class="fas fa-arrow-right text-green-300 mt-1 mr-2"></i>
<span>专业选手：华盛锂电（业务纯粹，成长性好）</span>
</li>
</ul>
</div>
<div>
<h3 class="text-xl font-bold mb-3 text-yellow-300">
<i class="fas fa-crosshairs mr-2"></i>关键跟踪指标
</h3>
<ul class="space-y-2">
<li class="flex items-start">
<i class="fas fa-chart-bar text-blue-300 mt-1 mr-2"></i>
<span>VC/FEC周度市场价格</span>
</li>
<li class="flex items-start">
<i class="fas fa-percentage text-purple-300 mt-1 mr-2"></i>
<span>核心公司添加剂业务毛利率</span>
</li>
<li class="flex items-start">
<i class="fas fa-industry text-orange-300 mt-1 mr-2"></i>
<span>头部企业产能利用率</span>
</li>
</ul>
</div>
</div>
<div class="bg-yellow-400/20 rounded-lg p-4 border border-yellow-400/50">
<p class="text-center text-lg">
<i class="fas fa-info-circle mr-2"></i>
<strong>核心结论：</strong>概念已从主题炒作过渡至基本面驱动的早期阶段，
价格上涨趋势明确，但盈利修复仍需时间验证
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-8">
<div class="container mx-auto px-4 text-center">
<p class="mb-2">
<i class="fas fa-battery-three-quarters mr-2"></i>
电解液添加剂深度分析报告
</p>
<p class="text-gray-400 text-sm">
数据来源：公开新闻、路演记录、行业研报 | 更新时间：2025年10月
</p>
</div>
</footer>
<script>
// Price Chart
const ctx = document.getElementById('priceChart').getContext('2d');
const priceChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['9月初', '9月中', '9月末', '10月初', '10月中'],
datasets: [{
label: 'VC价格(万元/吨)',
data: [4.60, 4.75, 4.90, 5.05, 5.20],
borderColor: 'rgb(255, 206, 86)',
backgroundColor: 'rgba(255, 206, 86, 0.2)',
tension: 0.4,
fill: true
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
labels: {
color: 'white'
}
},
title: {
display: true,
text: 'VC价格近期走势',
color: 'white',
font: {
size: 16
}
}
},
scales: {
y: {
beginAtZero: false,
ticks: {
color: 'white'
},
grid: {
color: 'rgba(255, 255, 255, 0.1)'
}
},
x: {
ticks: {
color: 'white'
},
grid: {
color: 'rgba(255, 255, 255, 0.1)'
}
}
}
}
});
// Dark Mode Toggle
const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;
const icon = darkModeToggle.querySelector('i');
darkModeToggle.addEventListener('click', () => {
body.classList.toggle('dark-mode');
if (body.classList.contains('dark-mode')) {
icon.classList.remove('fa-moon');
icon.classList.add('fa-sun');
} else {
icon.classList.remove('fa-sun');
icon.classList.add('fa-moon');
}
});
// Smooth Scroll
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Intersection Observer for animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -100px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
document.querySelectorAll('section').forEach(section => {
section.style.opacity = '0';
section.style.transform = 'translateY(20px)';
section.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(section);
});
</script>
</body>
</html>