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

639
public/htmls/金属空气电池.html Normal file
View File

@@ -0,0 +1,639 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>金属空气电池 - 新一代能源革命的前沿</title>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
.glass-morphism {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.18);
}
.gradient-text {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.timeline-dot {
position: relative;
}
.timeline-dot::before {
content: '';
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
left: -10px;
top: 50%;
transform: translateY(-50%);
box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
}
.hover-scale {
transition: transform 0.3s ease;
}
.hover-scale:hover {
transform: scale(1.05);
}
.custom-scrollbar::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 10px;
}
.pulse-animation {
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);
}
}
.stock-row {
transition: all 0.3s ease;
}
.stock-row:hover {
background: linear-gradient(90deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
transform: translateX(5px);
}
.badge-heat {
animation: heatPulse 1.5s ease-in-out infinite;
}
@keyframes heatPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
</style>
</head>
<body>
<!-- Hero Section -->
<div class="hero min-h-screen bg-gradient-to-br from-purple-600 via-pink-500 to-red-500 text-white">
<div class="hero-overlay bg-opacity-60"></div>
<div class="hero-content text-center text-neutral-content p-10">
<div class="max-w-5xl">
<div class="badge badge-warning badge-lg mb-4 badge-heat">
<i class="fas fa-fire-alt mr-2"></i>热点追踪
</div>
<h1 class="mb-5 text-5xl md:text-7xl font-bold">
金属空气电池
</h1>
<p class="mb-5 text-xl md:text-2xl">
新一代能源革命的前沿技术
</p>
<div class="glass-morphism rounded-2xl p-6 text-gray-800 text-left mt-10">
<div class="flex items-center mb-4">
<i class="fas fa-bolt text-yellow-500 text-3xl mr-3"></i>
<h3 class="text-2xl font-bold gradient-text">核心催化</h3>
</div>
<p class="text-lg leading-relaxed">
2025年10月23日，工信部装备工业发展中心副主任柳新岩在2025新能源电池产业发展大会上明确提出：
<span class="font-bold text-purple-600">"系统布局金属空气电池等新一代电池研发工作，加速产业化进程"</span>
</p>
<div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-white rounded-lg p-4 hover-scale">
<i class="fas fa-rocket text-3xl text-blue-500 mb-2"></i>
<h4 class="font-semibold">政策驱动</h4>
<p class="text-sm text-gray-600">国家战略布局</p>
</div>
<div class="bg-white rounded-lg p-4 hover-scale">
<i class="fas fa-battery-full text-3xl text-green-500 mb-2"></i>
<h4 class="font-semibold">理论优势</h4>
<p class="text-sm text-gray-600">超高能量密度</p>
</div>
<div class="bg-white rounded-lg p-4 hover-scale">
<i class="fas fa-shield-alt text-3xl text-purple-500 mb-2"></i>
<h4 class="font-semibold">资源安全</h4>
<p class="text-sm text-gray-600">铝锌资源丰富</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Timeline Section -->
<div class="container mx-auto px-4 py-16">
<div class="glass-morphism rounded-3xl p-8">
<h2 class="text-4xl font-bold text-center mb-10 gradient-text">关键事件时间线</h2>
<div class="relative">
<div class="absolute left-8 top-0 bottom-0 w-0.5 bg-gradient-to-b from-purple-600 to-pink-500"></div>
<div class="mb-8 timeline-dot ml-16">
<div class="bg-white rounded-xl shadow-lg p-6 hover-scale">
<div class="flex items-center justify-between mb-2">
<span class="text-sm text-gray-500">2024年9月24日</span>
<span class="badge badge-info">技术突破</span>
</div>
<h3 class="text-xl font-bold mb-2">澳大利亚莫纳什大学研发突破</h3>
<p class="text-gray-700">复合催化剂使锌空气电池实现<strong>74天</strong>稳定充放电循环，次数达<strong>3552次</strong>，创纪录</p>
</div>
</div>
<div class="mb-8 timeline-dot ml-16">
<div class="bg-white rounded-xl shadow-lg p-6 hover-scale">
<div class="flex items-center justify-between mb-2">
<span class="text-sm text-gray-500">2025年4月11日</span>
<span class="badge badge-success">产业布局</span>
</div>
<h3 class="text-xl font-bold mb-2">比亚迪公布锌离子电池专利</h3>
<p class="text-gray-700">头部企业积极布局锌离子技术路线，为锌空气电池发展奠定基础</p>
</div>
</div>
<div class="mb-8 timeline-dot ml-16">
<div class="bg-gradient-to-r from-purple-600 to-pink-500 text-white rounded-xl shadow-lg p-6 pulse-animation">
<div class="flex items-center justify-between mb-2">
<span class="text-sm">2025年10月23日</span>
<span class="badge badge-warning">核心催化剂</span>
</div>
<h3 class="text-2xl font-bold mb-2">工信部官方定调</h3>
<p class="text-white/90">首次将金属空气电池与全固态电池并列，提升至国家新一代电池技术研发战略高度</p>
</div>
</div>
<div class="timeline-dot ml-16">
<div class="bg-white rounded-xl shadow-lg p-6 hover-scale">
<div class="flex items-center justify-between mb-2">
<span class="text-sm text-gray-500">2025年10月23日后</span>
<span class="badge badge-secondary">市场响应</span>
</div>
<h3 class="text-xl font-bold mb-2">概念股名单快速扩散</h3>
<p class="text-gray-700">资本市场迅速响应，各类财经平台传播相关产业链公司名单</p>
</div>
</div>
</div>
</div>
</div>
<!-- Market Analysis Section -->
<div class="container mx-auto px-4 py-16">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- Core Logic -->
<div class="glass-morphism rounded-3xl p-8">
<div class="flex items-center mb-6">
<i class="fas fa-lightbulb text-yellow-500 text-3xl mr-3"></i>
<h2 class="text-3xl font-bold gradient-text">核心逻辑分析</h2>
</div>
<div class="space-y-4">
<div class="bg-gradient-to-r from-blue-50 to-purple-50 rounded-xl p-4 border-l-4 border-blue-500">
<h4 class="font-semibold text-blue-700 mb-2">
<i class="fas fa-flag mr-2"></i>政策驱动
</h4>
<p class="text-sm text-gray-700">工信部官方定调是本次概念行情的"发令枪"，赋予"国家队"身份</p>
</div>
<div class="bg-gradient-to-r from-green-50 to-emerald-50 rounded-xl p-4 border-l-4 border-green-500">
<h4 class="font-semibold text-green-700 mb-2">
<i class="fas fa-chart-line mr-2"></i>理论优势
</h4>
<p class="text-sm text-gray-700">铝空气电池理论能量密度极高，有望解决续航焦虑</p>
</div>
<div class="bg-gradient-to-r from-purple-50 to-pink-50 rounded-xl p-4 border-l-4 border-purple-500">
<h4 class="font-semibold text-purple-700 mb-2">
<i class="fas fa-lock mr-2"></i>资源安全
</h4>
<p class="text-sm text-gray-700">依赖铝、锌等储量丰富金属，降低对锂资源依赖</p>
</div>
</div>
<div class="mt-6 p-4 bg-yellow-50 rounded-xl border-2 border-yellow-200">
<p class="text-sm font-semibold text-yellow-800">
<i class="fas fa-exclamation-triangle mr-2"></i>
关键提示：当前仍处早期研发阶段，投资主题性远大于基本面
</p>
</div>
</div>
<!-- Expectation Gap -->
<div class="glass-morphism rounded-3xl p-8">
<div class="flex items-center mb-6">
<i class="fas fa-exchange-alt text-red-500 text-3xl mr-3"></i>
<h2 class="text-3xl font-bold gradient-text">预期差分析</h2>
</div>
<div class="bg-red-50 rounded-xl p-6">
<div class="flex items-center mb-4">
<div class="flex-1">
<h3 class="font-bold text-lg text-red-700 mb-2">市场认知</h3>
<ul class="space-y-2 text-sm">
<li class="flex items-start">
<i class="fas fa-arrow-up text-red-500 mt-1 mr-2"></i>
<span>"金属空气电池即将产业化"</span>
</li>
<li class="flex items-start">
<i class="fas fa-arrow-up text-red-500 mt-1 mr-2"></i>
<span>产业链公司深度参与</span>
</li>
</ul>
</div>
<div class="mx-4 text-3xl text-gray-400">VS</div>
<div class="flex-1">
<h3 class="font-bold text-lg text-blue-700 mb-2">产业现实</h3>
<ul class="space-y-2 text-sm">
<li class="flex items-start">
<i class="fas fa-arrow-down text-blue-500 mt-1 mr-2"></i>
<span>产业界全力聚焦固态电池</span>
</li>
<li class="flex items-start">
<i class="fas fa-arrow-down text-blue-500 mt-1 mr-2"></i>
<span>多数公司处于前瞻研究阶段</span>
</li>
</ul>
</div>
</div>
<div class="bg-white rounded-lg p-4 border-2 border-red-200">
<p class="text-sm text-red-800 font-medium">
<i class="fas fa-info-circle mr-2"></i>
<strong>核心矛盾：</strong>路演数据显示所有主流厂商都在攻坚固态电池，对金属空气电池几乎只字未提
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Stock Data Table -->
<div class="container mx-auto px-4 py-16">
<div class="glass-morphism rounded-3xl p-8">
<div class="flex items-center justify-between mb-8">
<div class="flex items-center">
<i class="fas fa-chart-bar text-green-500 text-3xl mr-3"></i>
<h2 class="text-3xl font-bold gradient-text">产业链核心公司</h2>
</div>
<div class="badge badge-success badge-lg">
<i class="fas fa-building mr-2"></i>共 11 家
</div>
</div>
<div class="overflow-x-auto custom-scrollbar">
<table class="table w-full">
<thead>
<tr class="bg-gradient-to-r from-purple-600 to-pink-500 text-white">
<th class="text-left">股票名称</th>
<th class="text-left">分类</th>
<th class="text-left">项目/技术</th>
<th class="text-left">参与逻辑</th>
<th class="text-center">风险评级</th>
</tr>
</thead>
<tbody>
<tr class="stock-row">
<td class="font-bold text-purple-600">雄韬股份</td>
<td><span class="badge badge-info">锌空气电池</span></td>
<td>锌离子、铝空气、燃料电池</td>
<td class="text-sm">注重新型产品技术储备，加大研发投入</td>
<td class="text-center"><span class="badge badge-warning">高风险高弹性</span></td>
</tr>
<tr class="stock-row">
<td class="font-bold text-purple-600">鹏辉能源</td>
<td><span class="badge badge-info">锌空气电池</span></td>
<td>石墨烯电池应用</td>
<td class="text-sm">前瞻性研究，具备产业化优势</td>
<td class="text-center"><span class="badge badge-warning">中高风险</span></td>
</tr>
<tr class="stock-row">
<td class="font-bold text-purple-600">云铝股份</td>
<td><span class="badge badge-accent">铝空气电池</span></td>
<td>参股创能斐源公司</td>
<td class="text-sm">产业链一体化，铝资源优势</td>
<td class="text-center"><span class="badge badge-warning">中等风险</span></td>
</tr>
<tr class="stock-row">
<td class="font-bold text-purple-600">中国铝业</td>
<td><span class="badge badge-accent">铝空气电池</span></td>
<td>铝阳极材料开发</td>
<td class="text-sm">上游资源龙头，主业稳健</td>
<td class="text-center"><span class="badge badge-success">低风险</span></td>
</tr>
<tr class="stock-row">
<td class="font-bold text-purple-600">尖峰集团</td>
<td><span class="badge badge-info">锌空气电池</span></td>
<td>参股上海博信</td>
<td class="text-sm text-red-600">已停止运营，全额计提坏账</td>
<td class="text-center"><span class="badge badge-error">极高风险</span></td>
</tr>
<tr class="stock-row">
<td class="font-bold text-purple-600">智慧农业</td>
<td><span class="badge badge-accent">铝空气电池</span></td>
<td>铝空电池储能应用</td>
<td class="text-sm">应急备用电源场景应用</td>
<td class="text-center"><span class="badge badge-warning">中高风险</span></td>
</tr>
<tr class="stock-row">
<td class="font-bold text-purple-600">新疆众和</td>
<td><span class="badge badge-accent">铝空气电池</span></td>
<td>发明专利申请</td>
<td class="text-sm">技术研发储备中</td>
<td class="text-center"><span class="badge badge-warning">中等风险</span></td>
</tr>
<tr class="stock-row">
<td class="font-bold text-purple-600">南山铝业</td>
<td><span class="badge badge-accent">铝空气电池</span></td>
<td>行业进展关注</td>
<td class="text-sm text-gray-500">仅关注，无实质性动作</td>
<td class="text-center"><span class="badge badge-success">低相关性</span></td>
</tr>
<tr class="stock-row">
<td class="font-bold text-purple-600">宝武镁业</td>
<td><span class="badge badge-secondary">镁空气电池</span></td>
<td>镁储氢研究</td>
<td class="text-sm">相关领域研究储备</td>
<td class="text-center"><span class="badge badge-warning">中等风险</span></td>
</tr>
<tr class="stock-row">
<td class="font-bold text-purple-600">濮耐股份</td>
<td><span class="badge badge-secondary">镁空气电池</span></td>
<td>超高纯氧化镁</td>
<td class="text-sm">电解液缓蚀剂应用</td>
<td class="text-center"><span class="badge badge-warning">中等风险</span></td>
</tr>
<tr class="stock-row">
<td class="font-bold text-purple-600">科力远</td>
<td><span class="badge badge-outline">其他</span></td>
<td>新型镍氢电池</td>
<td class="text-sm">多技术路线布局</td>
<td class="text-center"><span class="badge badge-warning">中等风险</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Risk & Opportunity Section -->
<div class="container mx-auto px-4 py-16">
<div class="glass-morphism rounded-3xl p-8">
<h2 class="text-3xl font-bold text-center mb-10 gradient-text">风险与机遇分析</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Risks -->
<div class="bg-gradient-to-br from-red-50 to-orange-50 rounded-2xl p-6">
<div class="flex items-center mb-4">
<i class="fas fa-exclamation-triangle text-red-500 text-3xl mr-3"></i>
<h3 class="text-2xl font-bold text-red-700">主要风险</h3>
</div>
<div class="space-y-3">
<div class="bg-white rounded-lg p-4">
<h4 class="font-semibold text-red-600 mb-1">
<i class="fas fa-microscope mr-2"></i>技术风险
</h4>
<p class="text-sm text-gray-700">催化剂成本高、寿命短；金属负极自腐蚀严重</p>
</div>
<div class="bg-white rounded-lg p-4">
<h4 class="font-semibold text-red-600 mb-1">
<i class="fas fa-coins mr-2"></i>商业化风险
</h4>
<p class="text-sm text-gray-700">初期成本高昂，面临锂电和固态电池竞争</p>
</div>
<div class="bg-white rounded-lg p-4">
<h4 class="font-semibold text-red-600 mb-1">
<i class="fas fa-sync-alt mr-2"></i>政策持续性
</h4>
<p class="text-sm text-gray-700">政策热度可能是一日游，需持续资金支持</p>
</div>
</div>
</div>
<!-- Opportunities -->
<div class="bg-gradient-to-br from-green-50 to-emerald-50 rounded-2xl p-6">
<div class="flex items-center mb-4">
<i class="fas fa-rocket text-green-500 text-3xl mr-3"></i>
<h3 class="text-2xl font-bold text-green-700">发展机遇</h3>
</div>
<div class="space-y-3">
<div class="bg-white rounded-lg p-4">
<h4 class="font-semibold text-green-600 mb-1">
<i class="fas fa-globe mr-2"></i>利基市场
</h4>
<p class="text-sm text-gray-700">通信基站、军用设备、长航时无人机</p>
</div>
<div class="bg-white rounded-lg p-4">
<h4 class="font-semibold text-green-600 mb-1">
<i class="fas fa-chart-line mr-2"></i>长期价值
</h4>
<p class="text-sm text-gray-700">解决资源安全，理论能量密度优势显著</p>
</div>
<div class="bg-white rounded-lg p-4">
<h4 class="font-semibold text-green-600 mb-1">
<i class="fas fa-users mr-2"></i>政策红利
</h4>
<p class="text-sm text-gray-700">国家级研发资金和政策倾斜</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Investment Strategy -->
<div class="container mx-auto px-4 py-16">
<div class="glass-morphism rounded-3xl p-8">
<div class="text-center mb-10">
<h2 class="text-3xl font-bold gradient-text mb-4">投资策略建议</h2>
<p class="text-gray-600">基于当前认知差和风险收益比</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-gradient-to-br from-purple-100 to-pink-100 rounded-2xl p-6 text-center hover-scale">
<div class="w-20 h-20 bg-gradient-to-br from-purple-600 to-pink-500 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-dice text-white text-3xl"></i>
</div>
<h3 class="text-xl font-bold mb-2">高弹性策略</h3>
<p class="text-sm text-gray-700 mb-3">追求高收益，承受高风险</p>
<div class="text-left space-y-2">
<div class="flex items-center">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span class="text-sm">关注雄韬股份</span>
</div>
<div class="flex items-center">
<i class="fas fa-info-circle text-blue-500 mr-2"></i>
<span class="text-sm">概念领头羊</span>
</div>
</div>
</div>
<div class="bg-gradient-to-br from-blue-100 to-cyan-100 rounded-2xl p-6 text-center hover-scale">
<div class="w-20 h-20 bg-gradient-to-br from-blue-600 to-cyan-500 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-shield-alt text-white text-3xl"></i>
</div>
<h3 class="text-xl font-bold mb-2">稳健策略</h3>
<p class="text-sm text-gray-700 mb-3">主业支撑，技术期权</p>
<div class="text-left space-y-2">
<div class="flex items-center">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span class="text-sm">关注中国铝业</span>
</div>
<div class="flex items-center">
<i class="fas fa-info-circle text-blue-500 mr-2"></i>
<span class="text-sm">上游资源巨头</span>
</div>
</div>
</div>
<div class="bg-gradient-to-br from-red-100 to-orange-100 rounded-2xl p-6 text-center hover-scale">
<div class="w-20 h-20 bg-gradient-to-br from-red-600 to-orange-500 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-eye-slash text-white text-3xl"></i>
</div>
<h3 class="text-xl font-bold mb-2">规避策略</h3>
<p class="text-sm text-gray-700 mb-3">逻辑薄弱，风险较高</p>
<div class="text-left space-y-2">
<div class="flex items-center">
<i class="fas fa-times-circle text-red-500 mr-2"></i>
<span class="text-sm">规避尖峰集团</span>
</div>
<div class="flex items-center">
<i class="fas fa-times-circle text-red-500 mr-2"></i>
<span class="text-sm">规避南山铝业</span>
</div>
</div>
</div>
</div>
<div class="mt-10 bg-gradient-to-r from-yellow-50 to-amber-50 rounded-2xl p-6 border-2 border-yellow-300">
<h4 class="font-bold text-lg text-yellow-800 mb-3">
<i class="fas fa-key mr-2"></i>关键跟踪指标
</h4>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
<div class="flex items-start">
<i class="fas fa-certificate text-yellow-600 mt-1 mr-2"></i>
<span><strong>政策层面：</strong>国家重大科技专项项目及资金规模</span>
</div>
<div class="flex items-start">
<i class="fas fa-flask text-yellow-600 mt-1 mr-2"></i>
<span><strong>公司层面：</strong>研发费用变化及中试线建设</span>
</div>
<div class="flex items-start">
<i class="fas fa-microscope text-yellow-600 mt-1 mr-2"></i>
<span><strong>技术层面：</strong>循环寿命>1000次突破进展</span>
</div>
<div class="flex items-start">
<i class="fas fa-industry text-yellow-600 mt-1 mr-2"></i>
<span><strong>应用层面：</strong>首个商业化示范项目落地</span>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12 mt-20">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-4 md:mb-0">
<h3 class="text-2xl font-bold gradient-text">金属空气电池</h3>
<p class="text-gray-400 mt-2">新一代能源革命的前沿技术分析</p>
</div>
<div class="flex space-x-6">
<div class="text-center">
<i class="fas fa-calendar-alt text-3xl mb-2"></i>
<p class="text-sm">2025年10月更新</p>
</div>
<div class="text-center">
<i class="fas fa-chart-pie text-3xl mb-2"></i>
<p class="text-sm">深度研究</p>
</div>
<div class="text-center">
<i class="fas fa-exclamation-triangle text-3xl mb-2"></i>
<p class="text-sm">风险提示</p>
</div>
</div>
</div>
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
<p>© 2025 金属空气电池概念分析 | 本报告仅供研究参考，不构成投资建议</p>
</div>
</div>
</footer>
<script>
// Add smooth scroll behavior
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Add parallax effect to hero section
window.addEventListener('scroll', () => {
const scrolled = window.pageYOffset;
const hero = document.querySelector('.hero');
if (hero) {
hero.style.transform = `translateY(${scrolled * 0.5}px)`;
}
});
// Intersection Observer for fade-in animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 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('.glass-morphism').forEach(el => {
el.style.opacity = '0';
el.style.transform = 'translateY(20px)';
el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(el);
});
</script>
</body>
</html>