Files
vf_react/public/htmls/电解液添加剂.html
2025-11-13 17:38:54 +08:00

717 lines
34 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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>