|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>SkyScribe - Cloud-Powered Productivity Suite</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: { |
|
|
50: '#f0f9ff', |
|
|
100: '#e0f2fe', |
|
|
500: '#0ea5e9', |
|
|
600: '#0284c7', |
|
|
700: '#0369a1', |
|
|
}, |
|
|
secondary: { |
|
|
50: '#eef2ff', |
|
|
100: '#e0e7ff', |
|
|
500: '#6366f1', |
|
|
600: '#4f46e5', |
|
|
700: '#4338ca', |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
:root { |
|
|
--glass-bg: rgba(255, 255, 255, 0.75); |
|
|
--glass-border: rgba(209, 213, 219, 0.3); |
|
|
--glass-shadow: rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.dark { |
|
|
--glass-bg: rgba(17, 24, 39, 0.75); |
|
|
--glass-border: rgba(255, 255, 255, 0.125); |
|
|
--glass-shadow: rgba(0, 0, 0, 0.25); |
|
|
} |
|
|
.vanta-bg { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
z-index: -1; |
|
|
} |
|
|
.glass-effect { |
|
|
background: var(--glass-bg); |
|
|
border-radius: 16px; |
|
|
border: 1px solid var(--glass-border); |
|
|
box-shadow: 0 4px 30px var(--glass-shadow); |
|
|
backdrop-filter: blur(16px) saturate(180%); |
|
|
-webkit-backdrop-filter: blur(16px) saturate(180%); |
|
|
} |
|
|
.dark { |
|
|
background-color: #111827; |
|
|
color: #f3f4f6; |
|
|
} |
|
|
.dark nav { |
|
|
background-color: #111827 !important; |
|
|
} |
|
|
.dark .bg-white { |
|
|
background-color: #1f2937 !important; |
|
|
} |
|
|
.dark .text-gray-600, .dark .text-gray-400 { |
|
|
color: #9ca3af !important; |
|
|
} |
|
|
.dark .text-gray-900 { |
|
|
color: #f9fafb !important; |
|
|
} |
|
|
.dark .border-gray-200, .dark .border-gray-300 { |
|
|
border-color: #374151 !important; |
|
|
} |
|
|
.feature-card:hover { |
|
|
transform: translateY(-8px); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.pricing-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.pricing-card:hover { |
|
|
transform: scale(1.05); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-white text-gray-800"> |
|
|
|
|
|
<nav class="bg-white dark:bg-gray-900 shadow-sm fixed w-full z-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between items-center h-16"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<i data-feather="cloud" class="h-8 w-8 text-primary-500"></i> |
|
|
<span class="ml-2 text-xl font-bold text-gray-900 dark:text-white">SkyScribe</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-4 flex items-center"> |
|
|
<button id="theme-toggle" class="text-gray-700 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400"> |
|
|
<i id="theme-icon" data-feather="moon"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="hidden md:block"> |
|
|
<div class="ml-10 flex items-baseline space-x-4"> |
|
|
<a href="#features" class="text-gray-600 hover:text-primary-500 px-3 py-2 rounded-md text-sm font-medium transition-colors">Features</a> |
|
|
<a href="#pricing" class="text-gray-600 hover:text-primary-500 px-3 py-2 rounded-md text-sm font-medium transition-colors">Pricing</a> |
|
|
<a href="#testimonials" class="text-gray-600 hover:text-primary-500 px-3 py-2 rounded-md text-sm font-medium transition-colors">Testimonials</a> |
|
|
<a href="#" class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors">Get Started</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:hidden"> |
|
|
<button class="text-gray-600 hover:text-primary-500"> |
|
|
<i data-feather="menu"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
<section class="relative min-h-screen flex items-center justify-center overflow-hidden dark:bg-gray-900"> |
|
|
<div id="vanta-bg" class="vanta-bg"></div> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10"> |
|
|
<div class="max-w-4xl mx-auto glass-effect p-8 md:p-12"> |
|
|
<h1 class="text-5xl md:text-7xl font-bold text-gray-900 dark:text-white mb-6"> |
|
|
Write. Collaborate. |
|
|
<span class="text-primary-500">Soar.</span> |
|
|
</h1> |
|
|
<p class="text-xl md:text-2xl text-gray-600 mb-8 max-w-3xl mx-auto"> |
|
|
SkyScribe transforms how teams create content together. Real-time collaboration, AI-powered insights, and seamless cloud integration in one beautiful platform. |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center"> |
|
|
<button class="bg-primary-500 hover:bg-primary-600 text-white px-8 py-4 rounded-lg font-semibold text-lg transition-colors shadow-lg flex items-center"> |
|
|
<i data-feather="play" class="mr-2"></i> |
|
|
Start Free Trial |
|
|
</button> |
|
|
<button class="border-2 border-gray-300 hover:border-primary-500 text-gray-700 hover:text-primary-500 px-8 py-4 rounded-lg font-semibold text-lg transition-colors flex items-center"> |
|
|
<i data-feather="video" class="mr-2"></i> |
|
|
Watch Demo |
|
|
</button> |
|
|
</div> |
|
|
<div class="mt-12 grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto"> |
|
|
<div class="text-center"> |
|
|
<div class="text-3xl font-bold text-primary-500">10K+</div> |
|
|
<div class="text-gray-600">Happy Teams</div> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="text-3xl font-bold text-primary-500">99.9%</div> |
|
|
<div class="text-gray-600">Uptime</div> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="text-3xl font-bold text-primary-500">50+</div> |
|
|
<div class="text-gray-600">Integrations</div> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="text-3xl font-bold text-primary-500">24/7</div> |
|
|
<div class="text-gray-600">Support</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section id="features" class="py-20 bg-gray-50 dark:bg-gray-800"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4"> |
|
|
Powerful Features for |
|
|
<span class="text-primary-500">Modern Teams</span> |
|
|
</h2> |
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto"> |
|
|
Everything you need to create amazing content together, with tools designed to boost productivity and foster collaboration. |
|
|
</p> |
|
|
</div> |
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="feature-card bg-white rounded-2xl p-8 shadow-lg border border-gray-100"> |
|
|
<div class="w-16 h-16 bg-primary-50 rounded-xl flex items-center justify-center mb-6"> |
|
|
<i data-feather="edit-3" class="h-8 w-8 text-primary-500"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-4">Real-time Collaboration</h3> |
|
|
<p class="text-gray-600 mb-6">Work together seamlessly with live editing, comments, and version control that keeps everyone in sync.</p> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-center text-gray-600"> |
|
|
<i data-feather="check" class="h-4 w-4 text-primary-500 mr-2"></i> |
|
|
Live cursor presence |
|
|
</li> |
|
|
<li class="flex items-center text-gray-600"> |
|
|
<i data-feather="check" class="h-4 w-4 text-primary-500 mr-2"></i> |
|
|
Instant updates |
|
|
</li> |
|
|
<li class="flex items-center text-gray-600"> |
|
|
<i data-feather="check" class="h-4 w-4 text-primary-500 mr-2"></i> |
|
|
Comment threads |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card bg-white rounded-2xl p-8 shadow-lg border border-gray-100"> |
|
|
<div class="w-16 h-16 bg-secondary-50 rounded-xl flex items-center justify-center mb-6"> |
|
|
<i data-feather="zap" class="h-8 w-8 text-secondary-500"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-4">AI-Powered Insights</h3> |
|
|
<p class="text-gray-600 mb-6">Get smart suggestions, grammar corrections, and content optimization powered by advanced AI.</p> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-center text-gray-600"> |
|
|
<i data-feather="check" class="h-4 w-4 text-secondary-500 mr-2"></i> |
|
|
Tone analysis |
|
|
</li> |
|
|
<li class="flex items-center text-gray-600"> |
|
|
<i data-feather="check" class="h-4 w-4 text-secondary-500 mr-2"></i> |
|
|
Content suggestions |
|
|
</li> |
|
|
<li class="flex items-center text-gray-600"> |
|
|
<i data-feather="check" class="h-4 w-4 text-secondary-500 mr-2"></i> |
|
|
Grammar excellence |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card bg-white rounded-2xl p-8 shadow-lg border border-gray-100"> |
|
|
<div class="w-16 h-16 bg-primary-50 rounded-xl flex items-center justify-center mb-6"> |
|
|
<i data-feather="layers" class="h-8 w-8 text-primary-500"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-4">Cloud Integration</h3> |
|
|
<p class="text-gray-600 mb-6">Connect with your favorite tools and services for a unified workflow experience.</p> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-center text-gray-600"> |
|
|
<i data-feather="check" class="h-4 w-4 text-primary-500 mr-2"></i> |
|
|
Google Drive |
|
|
</li> |
|
|
<li class="flex items-center text-gray-600"> |
|
|
<i data-feather="check" class="h-4 w-4 text-primary-500 mr-2"></i> |
|
|
Dropbox |
|
|
</li> |
|
|
<li class="flex items-center text-gray-600"> |
|
|
<i data-feather="check" class="h-4 w-4 text-primary-500 mr-2"></i> |
|
|
Slack integration |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section id="pricing" class="py-20 bg-white dark:bg-gray-900"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4"> |
|
|
Simple, Transparent |
|
|
<span class="text-primary-500">Pricing</span> |
|
|
</h2> |
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto"> |
|
|
Choose the plan that works best for your team. All plans include our core features with no hidden fees. |
|
|
</p> |
|
|
</div> |
|
|
<div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto"> |
|
|
|
|
|
<div class="pricing-card bg-white dark:bg-gray-800 rounded-2xl p-8 border-2 border-gray-200 dark:border-gray-700"> |
|
|
<div class="text-center mb-8"> |
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-2">Starter</h3> |
|
|
<p class="text-gray-600">Perfect for small teams getting started</p> |
|
|
</div> |
|
|
<div class="text-center mb-8"> |
|
|
<span class="text-5xl font-bold text-gray-900">$12</span> |
|
|
<span class="text-gray-600">/user/month</span> |
|
|
</div> |
|
|
<ul class="space-y-4 mb-8"> |
|
|
<li class="flex items-center text-gray-600"> |
|
|
<i data-feather="check" class="h-5 w-5 text-primary-500 mr-3"></i> |
|
|
Up to 5 team members |
|
|
</li> |
|
|
<li class="flex items-center text-gray-600"> |
|
|
<i data-feather="check" class="h-5 w-5 text-primary-500 mr-3"></i> |
|
|
10GB storage per user |
|
|
</li> |
|
|
<li class="flex items-center text-gray-600"> |
|
|
<i data-feather="check" class="h-5 w-5 text-primary-500 mr-3"></i> |
|
|
Basic collaboration |
|
|
</li> |
|
|
<li class="flex items-center text-gray-600"> |
|
|
<i data-feather="check" class="h-5 w-5 text-primary-500 mr-3"></i> |
|
|
Email support |
|
|
</li> |
|
|
</ul> |
|
|
<button class="w-full bg-gray-100 hover:bg-primary-500 hover:text-white text-gray-700 py-3 rounded-lg font-semibold transition-colors"> |
|
|
Get Started |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="pricing-card bg-white dark:bg-gray-800 rounded-2xl p-8 border-2 border-primary-500 relative shadow-xl"> |
|
|
<div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2"> |
|
|
<span class="bg-primary-500 text-white px-4 py-1 rounded-full text-sm font-semibold">Most Popular</span> |
|
|
</div> |
|
|
<div class="text-center mb-8"> |
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-2">Professional</h3> |
|
|
<p class="text-gray-600">Ideal for growing teams and businesses</p> |
|
|
</div> |
|
|
<div class="text-center mb-8"> |
|
|
<span class="text-5xl font-bold text-gray-900">$24</span> |
|
|
<span class="text-gray-600">/user/month</span> |
|
|
</div> |
|
|
<ul class="space-y-4 mb-8"> |
|
|
<li class="flex items-center text-gray-600"> |
|
|
<i data-feather="check" class="h-5 w-5 text-primary-500 mr-3"></i> |
|
|
Unlimited team members |
|
|
</li> |
|
|
<li class="flex items-center text-gray-600"> |
|
|
<i data-feather="check" class="h-5 w-5 text-primary-500 mr-3"></i> |
|
|
100GB storage per user |
|
|
</li> |
|
|
<li class="flex items-center text-gray-600"> |
|
|
<i data-feather="check" class="h-5 w-5 text-primary-500 mr-3"></i> |
|
|
Advanced collaboration |
|
|
</li> |
|
|
<li class="flex items-center text-gray-600"> |
|
|
<i data-feather="check" class="h-5 w-5 text-primary-500 mr-3"></i> |
|
|
Priority support |
|
|
</li> |
|
|
<li class="flex items-center text-gray-600"> |
|
|
<i data-feather="check" class="h-5 w-5 text-primary-500 mr-3"></i> |
|
|
AI-powered features |
|
|
</li> |
|
|
</ul> |
|
|
<button class="w-full bg-primary-500 hover:bg-primary-600 text-white py-3 rounded-lg font-semibold transition-colors"> |
|
|
Get Started |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="pricing-card bg-white rounded-2xl p-8 border-2 border-gray-200"> |
|
|
<div class="text-center mb-8"> |
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-2">Enterprise</h3> |
|
|
<p class="text-gray-600">For large organizations with custom needs</p> |
|
|
</div> |
|
|
<div class="text-center mb-8"> |
|
|
<span class="text-5xl font-bold text-gray-900">$45</span> |
|
|
<span class="text-gray-600">/user/month</span> |
|
|
</div> |
|
|
<ul class="space-y-4 mb-8"> |
|
|
<li class="flex items-center text-gray-600"> |
|
|
<i data-feather="check" class="h-5 w-5 text-primary-500 mr-3"></i> |
|
|
Unlimited everything |
|
|
</li> |
|
|
<li class="flex items-center text-gray-600"> |
|
|
<i data-feather="check" class="h-5 w-5 text-primary-500 mr-3"></i> |
|
|
Custom storage solutions |
|
|
</li> |
|
|
<li class="flex items-center text-gray-600"> |
|
|
<i data-feather="check" class="h-5 w-5 text-primary-500 mr-3"></i> |
|
|
Dedicated account manager |
|
|
</li> |
|
|
<li class="flex items-center text-gray-600"> |
|
|
<i data-feather="check" class="h-5 w-5 text-primary-500 mr-3"></i> |
|
|
24/7 phone support |
|
|
</li> |
|
|
<li class="flex items-center text-gray-600"> |
|
|
<i data-feather="check" class="h-5 w-5 text-primary-500 mr-3"></i> |
|
|
Custom integrations |
|
|
</li> |
|
|
</ul> |
|
|
<button class="w-full bg-gray-100 hover:bg-primary-500 hover:text-white text-gray-700 py-3 rounded-lg font-semibold transition-colors"> |
|
|
Contact Sales |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-gradient-to-r from-primary-500 to-secondary-500"> |
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold text-white mb-6"> |
|
|
Ready to Transform Your Team's Workflow? |
|
|
</h2> |
|
|
<p class="text-xl text-primary-100 mb-8 max-w-2xl mx-auto"> |
|
|
Join thousands of teams who have already elevated their content creation process with SkyScribe. |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center"> |
|
|
<button class="bg-white hover:bg-gray-100 text-primary-500 px-8 py-4 rounded-lg font-semibold text-lg transition-colors shadow-lg flex items-center"> |
|
|
<i data-feather="rocket" class="mr-2"></i> |
|
|
Start Your Free Trial |
|
|
</button> |
|
|
<button class="border-2 border-white hover:bg-white hover:text-primary-500 text-white px-8 py-4 rounded-lg font-semibold text-lg transition-colors flex items-center"> |
|
|
<i data-feather="message-circle" class="mr-2"></i> |
|
|
Schedule a Demo |
|
|
</button> |
|
|
</div> |
|
|
<p class="text-primary-100 mt-6">No credit card required • 14-day free trial • Cancel anytime</p> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white py-12"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<div class="flex items-center mb-4"> |
|
|
<i data-feather="cloud" class="h-6 w-6 text-primary-500"></i> |
|
|
<span class="ml-2 text-xl font-bold">SkyScribe</span> |
|
|
</div> |
|
|
<p class="text-gray-400">Empowering teams to create amazing content together, faster and smarter.</p> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-semibold mb-4">Product</h4> |
|
|
<ul class="space-y-2 text-gray-400"> |
|
|
<li><a href="#" class="hover:text-white transition-colors">Features</a></li> |
|
|
<li><a href="#" class="hover:text-white transition-colors">Pricing</a></li> |
|
|
<li><a href="#" class="hover:text-white transition-colors">Integrations</a></li> |
|
|
<li><a href="#" class="hover:text-white transition-colors">Updates</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-semibold mb-4">Company</h4> |
|
|
<ul class="space-y-2 text-gray-400"> |
|
|
<li><a href="#" class="hover:text-white transition-colors">About</a></li> |
|
|
<li><a href="#" class="hover:text-white transition-colors">Careers</a></li> |
|
|
<li><a href="#" class="hover:text-white transition-colors">Blog</a></li> |
|
|
<li><a href="#" class="hover:text-white transition-colors">Press</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-semibold mb-4">Support</h4> |
|
|
<ul class="space-y-2 text-gray-400"> |
|
|
<li><a href="#" class="hover:text-white transition-colors">Help Center</a></li> |
|
|
<li><a href="#" class="hover:text-white transition-colors">Contact</a></li> |
|
|
<li><a href="#" class="hover:text-white transition-colors">Status</a></li> |
|
|
<li><a href="#" class="hover:text-white transition-colors">API Docs</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"> |
|
|
<p>© 2024 SkyScribe. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
VANTA.GLOBE({ |
|
|
el: "#vanta-bg", |
|
|
mouseControls: true, |
|
|
touchControls: true, |
|
|
gyroControls: false, |
|
|
minHeight: 200.00, |
|
|
minWidth: 200.00, |
|
|
scale: 1.00, |
|
|
scaleMobile: 1.00, |
|
|
color: 0x0ea5e9, |
|
|
backgroundColor: 0xffffff, |
|
|
size: 1.00 |
|
|
}); |
|
|
|
|
|
feather.replace(); |
|
|
|
|
|
const themeToggle = document.getElementById('theme-toggle'); |
|
|
const themeIcon = document.getElementById('theme-icon'); |
|
|
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)'); |
|
|
|
|
|
|
|
|
function applyTheme(isDark) { |
|
|
document.documentElement.style.transition = 'all 0.5s ease'; |
|
|
if (isDark) { |
|
|
document.documentElement.classList.add('dark'); |
|
|
themeIcon.setAttribute('data-feather', 'sun'); |
|
|
} else { |
|
|
document.documentElement.classList.remove('dark'); |
|
|
themeIcon.setAttribute('data-feather', 'moon'); |
|
|
} |
|
|
feather.replace(); |
|
|
setTimeout(() => { |
|
|
document.documentElement.style.transition = ''; |
|
|
}, 500); |
|
|
} |
|
|
|
|
|
|
|
|
const currentTheme = localStorage.getItem('theme'); |
|
|
if (currentTheme === 'dark' || (!currentTheme && prefersDarkScheme.matches)) { |
|
|
applyTheme(true); |
|
|
} else { |
|
|
applyTheme(false); |
|
|
} |
|
|
|
|
|
|
|
|
themeToggle.addEventListener('click', function() { |
|
|
const html = document.documentElement; |
|
|
const isDark = !html.classList.contains('dark'); |
|
|
localStorage.setItem('theme', isDark ? 'dark' : 'light'); |
|
|
applyTheme(isDark); |
|
|
}); |
|
|
|
|
|
|
|
|
prefersDarkScheme.addListener((e) => { |
|
|
if (!localStorage.getItem('theme')) { |
|
|
applyTheme(e.matches); |
|
|
} |
|
|
}); |
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
const targetId = this.getAttribute('href'); |
|
|
const target = document.querySelector(targetId); |
|
|
if (target) { |
|
|
const headerHeight = document.querySelector('nav').offsetHeight; |
|
|
const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - headerHeight; |
|
|
window.scrollTo({ |
|
|
top: targetPosition, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
window.addEventListener('scroll', function() { |
|
|
const nav = document.querySelector('nav'); |
|
|
if (window.scrollY > 20) { |
|
|
nav.classList.add('bg-white/80', 'dark:bg-gray-900/80', 'shadow-lg', 'backdrop-blur-md'); |
|
|
nav.style.backdropFilter = 'blur(8px)'; |
|
|
nav.style.webkitBackdropFilter = 'blur(8px)'; |
|
|
} else { |
|
|
nav.classList.remove('shadow-lg', 'backdrop-blur-md'); |
|
|
nav.style.backdropFilter = ''; |
|
|
nav.style.webkitBackdropFilter = ''; |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
