mirror of
https://gitee.com/wanwujie/deer-flow
synced 2026-04-03 14:22:13 +08:00
feat: add new demo
This commit is contained in:
Henry Li
File diff suppressed because one or more lines are too long
@@ -0,0 +1,385 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>2026 Horizons: Trends & Opportunities</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📈</text></svg>">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navigation -->
|
||||
<nav class="navbar">
|
||||
<div class="container">
|
||||
<div class="nav-brand">
|
||||
<span class="brand-icon">📈</span>
|
||||
<span class="brand-text">2026 Horizons</span>
|
||||
</div>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#overview">Overview</a></li>
|
||||
<li><a href="#trends">Trends</a></li>
|
||||
<li><a href="#opportunities">Opportunities</a></li>
|
||||
<li><a href="#challenges">Challenges</a></li>
|
||||
</ul>
|
||||
<button class="theme-toggle" id="themeToggle">
|
||||
<i class="fas fa-moon"></i>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<header class="hero">
|
||||
<div class="container">
|
||||
<div class="hero-content">
|
||||
<h1 class="hero-title">Navigating the Future</h1>
|
||||
<p class="hero-subtitle">A comprehensive analysis of trends, opportunities, and challenges shaping 2026</p>
|
||||
<div class="hero-stats">
|
||||
<div class="stat">
|
||||
<span class="stat-number">5</span>
|
||||
<span class="stat-label">Key Economic Trends</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-number">8</span>
|
||||
<span class="stat-label">High-Growth Markets</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-number">4</span>
|
||||
<span class="stat-label">Technology Shifts</span>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#trends" class="cta-button">Explore Trends <i class="fas fa-arrow-down"></i></a>
|
||||
</div>
|
||||
<div class="hero-visual">
|
||||
<div class="visual-element">
|
||||
<div class="circle"></div>
|
||||
<div class="line"></div>
|
||||
<div class="dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Overview Section -->
|
||||
<section class="section overview" id="overview">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">The 2026 Landscape</h2>
|
||||
<p class="section-subtitle">Convergence, complexity, and unprecedented opportunities</p>
|
||||
</div>
|
||||
<div class="overview-content">
|
||||
<div class="overview-text">
|
||||
<p>2026 represents a pivotal inflection point where accelerating technological convergence meets economic realignment and emerging market opportunities. The year will be defined by the interplay of AI maturation, quantum computing practicality, and sustainable transformation.</p>
|
||||
<p>Organizations and individuals who can navigate this complexity while maintaining strategic agility will be best positioned to capitalize on emerging opportunities across technology, business, and sustainability sectors.</p>
|
||||
</div>
|
||||
<div class="overview-highlight">
|
||||
<div class="highlight-card">
|
||||
<div class="highlight-icon">
|
||||
<i class="fas fa-brain"></i>
|
||||
</div>
|
||||
<h3 class="highlight-title">AI Maturation</h3>
|
||||
<p class="highlight-text">Transition from experimentation to production deployment with autonomous agents</p>
|
||||
</div>
|
||||
<div class="highlight-card">
|
||||
<div class="highlight-icon">
|
||||
<i class="fas fa-leaf"></i>
|
||||
</div>
|
||||
<h3 class="highlight-title">Sustainability Focus</h3>
|
||||
<p class="highlight-text">Climate tech emerges as a dominant investment category with material financial implications</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Trends Section -->
|
||||
<section class="section trends" id="trends">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Key Trends Shaping 2026</h2>
|
||||
<p class="section-subtitle">Critical developments across technology, economy, and society</p>
|
||||
</div>
|
||||
|
||||
<div class="trends-grid">
|
||||
<!-- Technology Trends -->
|
||||
<div class="trend-category">
|
||||
<h3 class="category-title"><i class="fas fa-microchip"></i> Technology & Innovation</h3>
|
||||
<div class="trend-cards">
|
||||
<div class="trend-card">
|
||||
<div class="trend-header">
|
||||
<span class="trend-badge tech">AI</span>
|
||||
<span class="trend-priority high">High Impact</span>
|
||||
</div>
|
||||
<h4 class="trend-name">AI Agents Proliferation</h4>
|
||||
<p class="trend-description">Autonomous AI agents become mainstream in enterprise operations, requiring sophisticated governance frameworks and security considerations.</p>
|
||||
<div class="trend-metrics">
|
||||
<span class="metric"><i class="fas fa-rocket"></i> Exponential Growth</span>
|
||||
<span class="metric"><i class="fas fa-shield-alt"></i> Security Critical</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="trend-card">
|
||||
<div class="trend-header">
|
||||
<span class="trend-badge tech">Quantum</span>
|
||||
<span class="trend-priority medium">Emerging</span>
|
||||
</div>
|
||||
<h4 class="trend-name">Quantum-AI Convergence</h4>
|
||||
<p class="trend-description">18% of global quantum algorithm revenues expected from AI applications, marking a significant shift toward practical quantum computing applications.</p>
|
||||
<div class="trend-metrics">
|
||||
<span class="metric"><i class="fas fa-chart-line"></i> 18% Revenue Share</span>
|
||||
<span class="metric"><i class="fas fa-cogs"></i> Optimization Focus</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="trend-card">
|
||||
<div class="trend-header">
|
||||
<span class="trend-badge tech">Security</span>
|
||||
<span class="trend-priority high">Critical</span>
|
||||
</div>
|
||||
<h4 class="trend-name">AI-Powered Cybersecurity</h4>
|
||||
<p class="trend-description">Organizations leverage AI for threat detection, red teaming, and automated defense at machine speed, creating new security paradigms.</p>
|
||||
<div class="trend-metrics">
|
||||
<span class="metric"><i class="fas fa-bolt"></i> Machine Speed</span>
|
||||
<span class="metric"><i class="fas fa-user-shield"></i> Proactive Defense</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Economic Trends -->
|
||||
<div class="trend-category">
|
||||
<h3 class="category-title"><i class="fas fa-chart-line"></i> Economic & Global</h3>
|
||||
<div class="trend-cards">
|
||||
<div class="trend-card">
|
||||
<div class="trend-header">
|
||||
<span class="trend-badge econ">Finance</span>
|
||||
<span class="trend-priority high">Transformative</span>
|
||||
</div>
|
||||
<h4 class="trend-name">Tokenized Cross-Border Payments</h4>
|
||||
<p class="trend-description">Nearly 75% of G20 countries expected to have digital token payment systems, challenging traditional banking and dollar dominance.</p>
|
||||
<div class="trend-metrics">
|
||||
<span class="metric"><i class="fas fa-globe"></i> 75% G20 Adoption</span>
|
||||
<span class="metric"><i class="fas fa-exchange-alt"></i> Borderless</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="trend-card">
|
||||
<div class="trend-header">
|
||||
<span class="trend-badge econ">Trade</span>
|
||||
<span class="trend-priority medium">Volatile</span>
|
||||
</div>
|
||||
<h4 class="trend-name">Trade Realignments</h4>
|
||||
<p class="trend-description">Continued US-China tensions with potential EU tariff responses on advanced manufacturing, reshaping global supply chains.</p>
|
||||
<div class="trend-metrics">
|
||||
<span class="metric"><i class="fas fa-balance-scale"></i> Geopolitical Shift</span>
|
||||
<span class="metric"><i class="fas fa-industry"></i> Supply Chain Impact</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="trend-card">
|
||||
<div class="trend-header">
|
||||
<span class="trend-badge econ">Risk</span>
|
||||
<span class="trend-priority high">Critical</span>
|
||||
</div>
|
||||
<h4 class="trend-name">Debt Sustainability Challenges</h4>
|
||||
<p class="trend-description">Record public debt levels with limited fiscal restraint appetite as central banks unwind balance sheets.</p>
|
||||
<div class="trend-metrics">
|
||||
<span class="metric"><i class="fas fa-exclamation-triangle"></i> Record Levels</span>
|
||||
<span class="metric"><i class="fas fa-percentage"></i> Yield Pressure</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Opportunities Section -->
|
||||
<section class="section opportunities" id="opportunities">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Emerging Opportunities</h2>
|
||||
<p class="section-subtitle">High-growth markets and strategic investment areas</p>
|
||||
</div>
|
||||
|
||||
<div class="opportunities-grid">
|
||||
<div class="opportunity-card">
|
||||
<div class="opportunity-icon climate">
|
||||
<i class="fas fa-solar-panel"></i>
|
||||
</div>
|
||||
<h3 class="opportunity-title">Climate Technology</h3>
|
||||
<p class="opportunity-description">Home energy solutions, carbon capture, and sustainable infrastructure with massive growth potential.</p>
|
||||
<div class="opportunity-market">
|
||||
<span class="market-size">$162B+</span>
|
||||
<span class="market-label">by 2030</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="opportunity-card">
|
||||
<div class="opportunity-icon health">
|
||||
<i class="fas fa-heartbeat"></i>
|
||||
</div>
|
||||
<h3 class="opportunity-title">Preventive Health</h3>
|
||||
<p class="opportunity-description">Personalized wellness, early intervention technologies, and digital health platforms.</p>
|
||||
<div class="opportunity-market">
|
||||
<span class="market-size">High Growth</span>
|
||||
<span class="market-label">Post-pandemic focus</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="opportunity-card">
|
||||
<div class="opportunity-icon tech">
|
||||
<i class="fas fa-robot"></i>
|
||||
</div>
|
||||
<h3 class="opportunity-title">AI Consulting</h3>
|
||||
<p class="opportunity-description">Industry-specific AI implementation services and agentic AI platform development.</p>
|
||||
<div class="opportunity-market">
|
||||
<span class="market-size">Specialized</span>
|
||||
<span class="market-label">Enterprise demand</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="opportunity-card">
|
||||
<div class="opportunity-icon food">
|
||||
<i class="fas fa-seedling"></i>
|
||||
</div>
|
||||
<h3 class="opportunity-title">Plant-Based Foods</h3>
|
||||
<p class="opportunity-description">Sustainable food alternatives with projected market growth toward $162 billion by 2030.</p>
|
||||
<div class="opportunity-market">
|
||||
<span class="market-size">$162B</span>
|
||||
<span class="market-label">Market potential</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="opportunity-highlight">
|
||||
<div class="highlight-content">
|
||||
<h3 class="highlight-title">Strategic Investment Shift</h3>
|
||||
<p>Venture capital is diversifying geographically with emerging hubs in Lagos, Bucharest, Riyadh, and other non-traditional locations. Decentralized finance continues to innovate alternatives to traditional systems.</p>
|
||||
</div>
|
||||
<div class="highlight-stats">
|
||||
<div class="stat-item">
|
||||
<span class="stat-value">75%</span>
|
||||
<span class="stat-label">G20 Digital Payments</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-value">18%</span>
|
||||
<span class="stat-label">Quantum-AI Revenue</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Challenges Section -->
|
||||
<section class="section challenges" id="challenges">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Critical Challenges & Risks</h2>
|
||||
<p class="section-subtitle">Navigating complexity in an uncertain landscape</p>
|
||||
</div>
|
||||
|
||||
<div class="challenges-content">
|
||||
<div class="challenge-card">
|
||||
<div class="challenge-header">
|
||||
<span class="challenge-severity high">High Risk</span>
|
||||
<h3 class="challenge-title">AI Security Vulnerabilities</h3>
|
||||
</div>
|
||||
<p class="challenge-description">New attack vectors require comprehensive defense strategies as autonomous agents proliferate across organizations.</p>
|
||||
<div class="challenge-mitigation">
|
||||
<span class="mitigation-label">Mitigation:</span>
|
||||
<span class="mitigation-text">Robust governance frameworks and AI-native security protocols</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="challenge-card">
|
||||
<div class="challenge-header">
|
||||
<span class="challenge-severity medium">Medium Risk</span>
|
||||
<h3 class="challenge-title">Talent & Skills Gap</h3>
|
||||
</div>
|
||||
<p class="challenge-description">Rapid technological change outpacing workforce skill development, creating critical talent shortages.</p>
|
||||
<div class="challenge-mitigation">
|
||||
<span class="mitigation-label">Mitigation:</span>
|
||||
<span class="mitigation-text">Continuous upskilling programs and AI collaboration training</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="challenge-card">
|
||||
<div class="challenge-header">
|
||||
<span class="challenge-severity high">High Risk</span>
|
||||
<h3 class="challenge-title">Economic Volatility</h3>
|
||||
</div>
|
||||
<p class="challenge-description">Potential AI bubble concerns, trade fragmentation, and competing payment systems creating market uncertainty.</p>
|
||||
<div class="challenge-mitigation">
|
||||
<span class="mitigation-label">Mitigation:</span>
|
||||
<span class="mitigation-text">Diversified portfolios and agile business models</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="strategic-implications">
|
||||
<h3 class="implications-title">Strategic Implications</h3>
|
||||
<div class="implications-grid">
|
||||
<div class="implication">
|
||||
<h4>For Businesses</h4>
|
||||
<p>Success requires embracing AI as a core competency while maintaining robust cybersecurity. Companies that navigate the sustainability transition while leveraging emerging technologies gain competitive advantages.</p>
|
||||
</div>
|
||||
<div class="implication">
|
||||
<h4>For Investors</h4>
|
||||
<p>Opportunities exist in climate tech, digital transformation, and Asian markets, but require careful assessment of geopolitical risks and potential market corrections.</p>
|
||||
</div>
|
||||
<div class="implication">
|
||||
<h4>For Individuals</h4>
|
||||
<p>Continuous upskilling in AI collaboration, quantum computing awareness, and digital literacy will be essential for career resilience in the evolving landscape.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-brand">
|
||||
<span class="brand-icon">📈</span>
|
||||
<span class="brand-text">2026 Horizons</span>
|
||||
<p class="footer-description">An analysis of trends shaping the future landscape</p>
|
||||
</div>
|
||||
|
||||
<div class="footer-links">
|
||||
<div class="link-group">
|
||||
<h4 class="link-title">Trends</h4>
|
||||
<a href="#trends">Technology</a>
|
||||
<a href="#trends">Economic</a>
|
||||
<a href="#trends">Sustainability</a>
|
||||
</div>
|
||||
<div class="link-group">
|
||||
<h4 class="link-title">Opportunities</h4>
|
||||
<a href="#opportunities">Markets</a>
|
||||
<a href="#opportunities">Investments</a>
|
||||
<a href="#opportunities">Startups</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom">
|
||||
<div class="copyright">
|
||||
<p>© 2026 Horizons Analysis. Based on current research and expert predictions.</p>
|
||||
</div>
|
||||
<div class="deerflow-branding">
|
||||
<a href="https://deerflow.tech" target="_blank" class="deerflow-link">
|
||||
<span class="deerflow-icon">✦</span>
|
||||
<span class="deerflow-text">Created by Deerflow</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,175 @@
|
||||
// 2026 Horizons - Interactive Features
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Theme Toggle
|
||||
const themeToggle = document.getElementById('themeToggle');
|
||||
const themeIcon = themeToggle.querySelector('i');
|
||||
|
||||
// Check for saved theme or prefer-color-scheme
|
||||
const savedTheme = localStorage.getItem('theme');
|
||||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
|
||||
if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
|
||||
document.documentElement.setAttribute('data-theme', 'dark');
|
||||
themeIcon.className = 'fas fa-sun';
|
||||
}
|
||||
|
||||
themeToggle.addEventListener('click', function() {
|
||||
const currentTheme = document.documentElement.getAttribute('data-theme');
|
||||
|
||||
if (currentTheme === 'dark') {
|
||||
document.documentElement.removeAttribute('data-theme');
|
||||
themeIcon.className = 'fas fa-moon';
|
||||
localStorage.setItem('theme', 'light');
|
||||
} else {
|
||||
document.documentElement.setAttribute('data-theme', 'dark');
|
||||
themeIcon.className = 'fas fa-sun';
|
||||
localStorage.setItem('theme', 'dark');
|
||||
}
|
||||
});
|
||||
|
||||
// Smooth scroll for navigation links
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const targetId = this.getAttribute('href');
|
||||
if (targetId === '#') return;
|
||||
|
||||
const targetElement = document.querySelector(targetId);
|
||||
if (targetElement) {
|
||||
const headerHeight = document.querySelector('.navbar').offsetHeight;
|
||||
const targetPosition = targetElement.offsetTop - headerHeight - 20;
|
||||
|
||||
window.scrollTo({
|
||||
top: targetPosition,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Navbar scroll effect
|
||||
const navbar = document.querySelector('.navbar');
|
||||
let lastScrollTop = 0;
|
||||
|
||||
window.addEventListener('scroll', function() {
|
||||
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
|
||||
// Hide/show navbar on scroll
|
||||
if (scrollTop > lastScrollTop && scrollTop > 100) {
|
||||
navbar.style.transform = 'translateY(-100%)';
|
||||
} else {
|
||||
navbar.style.transform = 'translateY(0)';
|
||||
}
|
||||
|
||||
lastScrollTop = scrollTop;
|
||||
|
||||
// Add shadow when scrolled
|
||||
if (scrollTop > 10) {
|
||||
navbar.style.boxShadow = 'var(--shadow-md)';
|
||||
} else {
|
||||
navbar.style.boxShadow = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Animate elements on scroll
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver(function(entries) {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('fade-in');
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// Observe elements to animate
|
||||
document.querySelectorAll('.trend-card, .opportunity-card, .challenge-card, .highlight-card').forEach(el => {
|
||||
observer.observe(el);
|
||||
});
|
||||
|
||||
// Stats counter animation
|
||||
const stats = document.querySelectorAll('.stat-number');
|
||||
|
||||
const statsObserver = new IntersectionObserver(function(entries) {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const stat = entry.target;
|
||||
const targetValue = parseInt(stat.textContent);
|
||||
let currentValue = 0;
|
||||
const increment = targetValue / 50;
|
||||
const duration = 1500;
|
||||
const stepTime = Math.floor(duration / 50);
|
||||
|
||||
const timer = setInterval(() => {
|
||||
currentValue += increment;
|
||||
if (currentValue >= targetValue) {
|
||||
stat.textContent = targetValue;
|
||||
clearInterval(timer);
|
||||
} else {
|
||||
stat.textContent = Math.floor(currentValue);
|
||||
}
|
||||
}, stepTime);
|
||||
|
||||
statsObserver.unobserve(stat);
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.5 });
|
||||
|
||||
stats.forEach(stat => {
|
||||
statsObserver.observe(stat);
|
||||
});
|
||||
|
||||
// Hover effects for cards
|
||||
document.querySelectorAll('.trend-card, .opportunity-card, .challenge-card').forEach(card => {
|
||||
card.addEventListener('mouseenter', function() {
|
||||
this.style.zIndex = '10';
|
||||
});
|
||||
|
||||
card.addEventListener('mouseleave', function() {
|
||||
this.style.zIndex = '1';
|
||||
});
|
||||
});
|
||||
|
||||
// Current year in footer
|
||||
const currentYear = new Date().getFullYear();
|
||||
const yearElement = document.querySelector('.copyright p');
|
||||
if (yearElement) {
|
||||
yearElement.textContent = yearElement.textContent.replace('2026', currentYear);
|
||||
}
|
||||
|
||||
// Initialize animations
|
||||
setTimeout(() => {
|
||||
document.body.style.opacity = '1';
|
||||
}, 100);
|
||||
});
|
||||
|
||||
// Add CSS for initial load
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
body {
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease-in;
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeIn 0.8s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user