Initial commit: hardened DeerFlow factory
Vendored deer-flow upstream (bytedance/deer-flow) plus prompt-injection hardening: - New deerflow.security package: content_delimiter, html_cleaner, sanitizer (8 layers — invisible chars, control chars, symbols, NFC, PUA, tag chars, horizontal whitespace collapse with newline/tab preservation, length cap) - New deerflow.community.searx package: web_search, web_fetch, image_search backed by a private SearX instance, every external string sanitized and wrapped in <<<EXTERNAL_UNTRUSTED_CONTENT>>> delimiters - All native community web providers (ddg_search, tavily, exa, firecrawl, jina_ai, infoquest, image_search) replaced with hard-fail stubs that raise NativeWebToolDisabledError at import time, so a misconfigured tool.use path fails loud rather than silently falling back to unsanitized output - Native client back-doors (jina_client.py, infoquest_client.py) stubbed too - Native-tool tests quarantined under tests/_disabled_native/ (collect_ignore_glob via local conftest.py) - Sanitizer Layer 7 fix: only collapse horizontal whitespace, preserve newlines and tabs so list/table structure survives - Hardened runtime config.yaml references only the searx-backed tools - Factory overlay (backend/) kept in sync with deer-flow tree as a reference / source See HARDENING.md for the full audit trail and verification steps.
This commit is contained in:
File diff suppressed because one or more lines are too long
@@ -0,0 +1,533 @@
|
||||
<!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,187 @@
|
||||
// 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