Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Productivity Tracker - Boost Your Efficiency</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://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| .hero-gradient { | |
| background: linear-gradient( | |
| to right, | |
| #1e3c72 0%, /* Deep navy */ | |
| #2a5298 25%, /* Indigo */ | |
| #00b4d8 50%, /* Sky blue */ | |
| #0077b6 75%, /* Teal */ | |
| #023e8a 100% /* Dark blue */ | |
| ); | |
| } | |
| .feature-card { | |
| transition: all 0.3s ease; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .animate-on-scroll { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| transition: opacity 0.6s ease-out, transform 0.6s ease-out; | |
| } | |
| .animate-on-scroll.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm py-4"> | |
| <div class="container mx-auto px-4 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i data-feather="target" class="text-blue-600 mr-2"></i> | |
| <span class="text-xl font-bold text-gray-800">ProductivityTracker</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#" class="text-gray-600 hover:text-gray-900 font-medium">Features</a> | |
| <a href="#" class="text-gray-600 hover:text-gray-900 font-medium">How It Works</a> | |
| <a href="#" class="text-gray-600 hover:text-gray-900 font-medium">Testimonials</a> | |
| <a href="todo.html" class="text-gray-600 hover:text-gray-900 font-medium">Todo</a> | |
| </div> | |
| <div> | |
| <a href="productivity.html" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium transition">Get Started</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient text-white py-20"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Transform Your Productivity</h1> | |
| <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Track your tasks, manage your time, and achieve your goals with our powerful productivity tool.</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="productivity.html" class="bg-white text-blue-600 hover:bg-gray-100 px-8 py-4 rounded-lg font-bold text-lg transition shadow-lg">Start Tracking Now</a> | |
| <a href="#features" class="bg-transparent border-2 border-white hover:bg-white/10 px-8 py-4 rounded-lg font-bold text-lg transition">Learn More</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-gray-800">Powerful Features</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-10"> | |
| <!-- Feature 1 --> | |
| <div class="feature-card bg-gray-50 rounded-xl p-8 text-center animate-on-scroll"> | |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i data-feather="clock" class="text-blue-600 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4 text-gray-800">Task Timer</h3> | |
| <p class="text-gray-600">Focus on your work with our built-in Pomodoro timer that helps you stay on track and manage your time effectively.</p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="feature-card bg-gray-50 rounded-xl p-8 text-center animate-on-scroll"> | |
| <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i data-feather="check-circle" class="text-green-600 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4 text-gray-800">Daily Missions</h3> | |
| <p class="text-gray-600">Set and track daily missions to build productive habits and achieve your long-term goals step by step.</p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="feature-card bg-gray-50 rounded-xl p-8 text-center animate-on-scroll"> | |
| <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i data-feather="book-open" class="text-purple-600 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4 text-gray-800">Daily Journal</h3> | |
| <p class="text-gray-600">Reflect on your accomplishments and plan for tomorrow with our integrated daily journal feature.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works Section --> | |
| <section class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-gray-800">How It Works</h2> | |
| <div class="flex flex-col md:flex-row items-center justify-between"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 animate-on-scroll"> | |
| <img src="http://static.photos/technology/640x360/1" alt="Productivity Dashboard" class="rounded-xl shadow-lg"> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12 animate-on-scroll"> | |
| <div class="mb-8"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-4">1</div> | |
| <h3 class="text-xl font-bold text-gray-800">Set Your Goals</h3> | |
| </div> | |
| <p class="text-gray-600">Define your daily missions and tasks to create a clear roadmap for your productivity.</p> | |
| </div> | |
| <div class="mb-8"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-4">2</div> | |
| <h3 class="text-xl font-bold text-gray-800">Track Your Time</h3> | |
| </div> | |
| <p class="text-gray-600">Use our timer to focus on tasks and measure how you spend your time throughout the day.</p> | |
| </div> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-4">3</div> | |
| <h3 class="text-xl font-bold text-gray-800">Reflect & Improve</h3> | |
| </div> | |
| <p class="text-gray-600">Review your daily journal entries to identify patterns and continuously improve your productivity.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-gray-800">What Our Users Say</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div class="bg-gray-50 rounded-xl p-8 animate-on-scroll"> | |
| <div class="flex items-center mb-6"> | |
| <img src="http://static.photos/people/200x200/1" alt="User" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Sarah Johnson</h4> | |
| <p class="text-gray-600">Marketing Manager</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic">"This app has completely transformed how I manage my workday. I'm 40% more productive since I started using it!"</p> | |
| </div> | |
| <div class="bg-gray-50 rounded-xl p-8 animate-on-scroll"> | |
| <div class="flex items-center mb-6"> | |
| <img src="http://static.photos/people/200x200/2" alt="User" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Michael Chen</h4> | |
| <p class="text-gray-600">Software Developer</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic">"The daily missions feature helps me stay consistent with my goals. It's become an essential part of my routine."</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="hero-gradient text-white py-20"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Boost Your Productivity?</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Join thousands of users who have transformed their work habits with our productivity tracker.</p> | |
| <a href="productivity.html" class="bg-white text-blue-600 hover:bg-gray-100 px-8 py-4 rounded-lg font-bold text-lg transition shadow-lg">Get Started Free</a> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <div class="flex items-center"> | |
| <i data-feather="target" class="text-blue-400 mr-2"></i> | |
| <span class="text-xl font-bold">ProductivityTracker</span> | |
| </div> | |
| <p class="mt-2 text-gray-400">Helping you achieve more every day.</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="facebook"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="instagram"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© 2023 ProductivityTracker. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Feather icons | |
| feather.replace(); | |
| // Animation on scroll | |
| function animateOnScroll() { | |
| const elements = document.querySelectorAll('.animate-on-scroll'); | |
| elements.forEach(element => { | |
| const elementPosition = element.getBoundingClientRect().top; | |
| const screenPosition = window.innerHeight / 1.3; | |
| if (elementPosition < screenPosition) { | |
| element.classList.add('visible'); | |
| } | |
| }); | |
| } | |
| window.addEventListener('scroll', animateOnScroll); | |
| window.addEventListener('load', animateOnScroll); | |
| // Simple animation for hero section | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const heroTitle = document.querySelector('.hero-gradient h1'); | |
| if (heroTitle) { | |
| heroTitle.style.opacity = '0'; | |
| heroTitle.style.transform = 'translateY(20px)'; | |
| setTimeout(() => { | |
| heroTitle.style.transition = 'opacity 1s ease, transform 1s ease'; | |
| heroTitle.style.opacity = '1'; | |
| heroTitle.style.transform = 'translateY(0)'; | |
| }, 300); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |