Spaces:
Running
Running
Download index.html from ToasterBaptism/timekeeper-pro: direct link, hf CLI and curl.
- Browser
- Download file 25.5 kB
-
https://huggingface.co/spaces/ToasterBaptism/timekeeper-pro/resolve/main/index.html
- Command line
-
hf download hf://spaces/ToasterBaptism/timekeeper-pro/index.html
-
curl -L -o index.html https://huggingface.co/spaces/ToasterBaptism/timekeeper-pro/resolve/main/index.html
25.5 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TimeKeeper Pro - Smart Work Tracking</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/vanta@latest/dist/vanta.waves.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| overflow-x: hidden; | |
| } | |
| .glass-card { | |
| background: rgba(255, 255, 255, 0.08); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border-radius: 16px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .feature-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .feature-card:hover .feature-icon { | |
| transform: translateY(-5px) scale(1.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-blue-900 via-purple-900 to-gray-900 text-white"> | |
| <div id="vanta-bg" class="fixed inset-0 z-0"></div> | |
| <header class="relative z-10"> | |
| <nav class="container mx-auto px-6 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="clock" class="w-8 h-8 text-blue-400"></i> | |
| <span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-400">TimeKeeper Pro</span> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#features" class="hover:text-blue-300 transition">Features</a> | |
| <a href="#how-it-works" class="hover:text-blue-300 transition">How It Works</a> | |
| <a href="#pricing" class="hover:text-blue-300 transition">Pricing</a> | |
| <a href="#" class="px-4 py-2 rounded-full bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 transition">Get Started</a> | |
| </div> | |
| <button class="md:hidden focus:outline-none" id="mobile-menu-button"> | |
| <i data-feather="menu" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| </header> | |
| <main class="relative z-10"> | |
| <!-- Hero Section --> | |
| <section class="container mx-auto px-6 py-20 md:py-32 text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight"> | |
| Track Your Work Time <br> | |
| <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-400">Smarter, Not Harder</span> | |
| </h1> | |
| <p class="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto mb-10"> | |
| A customizable Android app for effortless work time tracking, location logging, and task management - all while protecting your privacy. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#" class="px-8 py-4 rounded-full bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 transition text-lg font-semibold shadow-lg"> | |
| Download Now | |
| </a> | |
| <a href="#features" class="px-8 py-4 rounded-full bg-white/10 hover:bg-white/20 transition text-lg font-semibold"> | |
| Learn More | |
| </a> | |
| </div> | |
| <div class="mt-16 relative max-w-4xl mx-auto"> | |
| <div class="absolute inset-0 bg-blue-500/20 blur-3xl rounded-full"></div> | |
| <img src="http://static.photos/technology/1024x576/42" alt="App Screenshot" class="relative rounded-3xl border border-white/10 shadow-2xl"> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="container mx-auto px-6 py-20"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Powerful Features</h2> | |
| <p class="text-xl text-gray-300 max-w-2xl mx-auto">Everything you need to track your work efficiently while maintaining complete control.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="glass-card p-8 rounded-xl feature-card"> | |
| <div class="w-14 h-14 rounded-xl bg-blue-500/20 flex items-center justify-center mb-6 feature-icon"> | |
| <i data-feather="clock" class="w-6 h-6 text-blue-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Smart Time Tracking</h3> | |
| <p class="text-gray-300">Automatically record work hours with intuitive in/out tracking, break management, and overtime calculation.</p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="glass-card p-8 rounded-xl feature-card"> | |
| <div class="w-14 h-14 rounded-xl bg-purple-500/20 flex items-center justify-center mb-6 feature-icon"> | |
| <i data-feather="map-pin" class="w-6 h-6 text-purple-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Location Logging</h3> | |
| <p class="text-gray-300">GPS-based location tracking with manual override options and historical location data.</p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="glass-card p-8 rounded-xl feature-card"> | |
| <div class="w-14 h-14 rounded-xl bg-green-500/20 flex items-center justify-center mb-6 feature-icon"> | |
| <i data-feather="check-square" class="w-6 h-6 text-green-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Task Management</h3> | |
| <p class="text-gray-300">Create, categorize, and track tasks with duration logging and completion status.</p> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="glass-card p-8 rounded-xl feature-card"> | |
| <div class="w-14 h-14 rounded-xl bg-yellow-500/20 flex items-center justify-center mb-6 feature-icon"> | |
| <i data-feather="file-text" class="w-6 h-6 text-yellow-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Job Documentation</h3> | |
| <p class="text-gray-300">Complete forms, add notes, and attach photos to document your work activities.</p> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="glass-card p-8 rounded-xl feature-card"> | |
| <div class="w-14 h-14 rounded-xl bg-red-500/20 flex items-center justify-center mb-6 feature-icon"> | |
| <i data-feather="calendar" class="w-6 h-6 text-red-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Interactive Calendar</h3> | |
| <p class="text-gray-300">Visualize your work schedule with daily, weekly, and monthly views plus holiday tracking.</p> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="glass-card p-8 rounded-xl feature-card"> | |
| <div class="w-14 h-14 rounded-xl bg-indigo-500/20 flex items-center justify-center mb-6 feature-icon"> | |
| <i data-feather="shield" class="w-6 h-6 text-indigo-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Privacy Focused</h3> | |
| <p class="text-gray-300">All data stays on your device with optional encrypted cloud backup. No hidden tracking.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works Section --> | |
| <section id="how-it-works" class="container mx-auto px-6 py-20 bg-black/20"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">How It Works</h2> | |
| <p class="text-xl text-gray-300 max-w-2xl mx-auto">Simple steps to transform your work tracking experience.</p> | |
| </div> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="relative"> | |
| <!-- Timeline line --> | |
| <div class="hidden md:block absolute left-1/2 top-0 bottom-0 w-1 bg-gradient-to-b from-blue-500 to-purple-500 transform -translate-x-1/2"></div> | |
| <!-- Steps --> | |
| <div class="space-y-12 md:space-y-0"> | |
| <!-- Step 1 --> | |
| <div class="relative md:flex items-center justify-between"> | |
| <div class="md:w-5/12 md:pr-10 mb-6 md:mb-0 text-right"> | |
| <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-blue-500 text-white font-bold mb-4"> | |
| 1 | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Set Up Your Profile</h3> | |
| <p class="text-gray-300">Create your profile with work preferences, hourly rates, and notification settings.</p> | |
| </div> | |
| <div class="hidden md:block w-2/12 flex-shrink-0"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-r from-blue-500 to-purple-500 mx-auto"></div> | |
| </div> | |
| <div class="md:w-5/12 md:pl-10"> | |
| <img src="http://static.photos/office/640x360/1" alt="Step 1" class="rounded-xl shadow-lg"> | |
| </div> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="relative md:flex items-center justify-between"> | |
| <div class="md:w-5/12 md:pr-10 order-1 mb-6 md:mb-0 md:order-none"> | |
| <img src="http://static.photos/office/640x360/2" alt="Step 2" class="rounded-xl shadow-lg"> | |
| </div> | |
| <div class="hidden md:block w-2/12 flex-shrink-0"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-r from-blue-500 to-purple-500 mx-auto"></div> | |
| </div> | |
| <div class="md:w-5/12 md:pl-10 text-left"> | |
| <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-purple-500 text-white font-bold mb-4"> | |
| 2 | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Track Your Time</h3> | |
| <p class="text-gray-300">Simply clock in when you start work and clock out when you're done. The app handles the rest.</p> | |
| </div> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="relative md:flex items-center justify-between"> | |
| <div class="md:w-5/12 md:pr-10 mb-6 md:mb-0 text-right"> | |
| <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-indigo-500 text-white font-bold mb-4"> | |
| 3 | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Manage Tasks</h3> | |
| <p class="text-gray-300">Create tasks, log time spent, and track progress throughout your workday.</p> | |
| </div> | |
| <div class="hidden md:block w-2/12 flex-shrink-0"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-r from-blue-500 to-purple-500 mx-auto"></div> | |
| </div> | |
| <div class="md:w-5/12 md:pl-10"> | |
| <img src="http://static.photos/office/640x360/3" alt="Step 3" class="rounded-xl shadow-lg"> | |
| </div> | |
| </div> | |
| <!-- Step 4 --> | |
| <div class="relative md:flex items-center justify-between"> | |
| <div class="md:w-5/12 md:pr-10 order-1 mb-6 md:mb-0 md:order-none"> | |
| <img src="http://static.photos/office/640x360/4" alt="Step 4" class="rounded-xl shadow-lg"> | |
| </div> | |
| <div class="hidden md:block w-2/12 flex-shrink-0"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-r from-blue-500 to-purple-500 mx-auto"></div> | |
| </div> | |
| <div class="md:w-5/12 md:pl-10 text-left"> | |
| <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-pink-500 text-white font-bold mb-4"> | |
| 4 | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Review Reports</h3> | |
| <p class="text-gray-300">Generate detailed reports of your work history, earnings, and productivity metrics.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Section --> | |
| <section id="pricing" class="container mx-auto px-6 py-20"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Simple, Transparent Pricing</h2> | |
| <p class="text-xl text-gray-300 max-w-2xl mx-auto">Choose the plan that works for you. No hidden fees, no surprises.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto"> | |
| <!-- Free Plan --> | |
| <div class="glass-card p-8 rounded-xl"> | |
| <div class="text-center"> | |
| <h3 class="text-xl font-bold mb-2">Basic</h3> | |
| <div class="text-4xl font-bold mb-4">Free</div> | |
| <p class="text-gray-300 mb-6">Perfect for personal use with essential features</p> | |
| <a href="#" class="block w-full py-3 px-6 rounded-lg bg-white/10 hover:bg-white/20 transition text-center">Get Started</a> | |
| </div> | |
| <div class="mt-8 space-y-4"> | |
| <div class="flex items-center"> | |
| <i data-feather="check" class="w-5 h-5 text-green-400 mr-2"></i> | |
| <span>Basic time tracking</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="check" class="w-5 h-5 text-green-400 mr-2"></i> | |
| <span>Manual location logging</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="check" class="w-5 h-5 text-green-400 mr-2"></i> | |
| <span>Simple task management</span> | |
| </div> | |
| <div class="flex items-center text-gray-500"> | |
| <i data-feather="x" class="w-5 h-5 text-red-400 mr-2"></i> | |
| <span>No GPS tracking</span> | |
| </div> | |
| <div class="flex items-center text-gray-500"> | |
| <i data-feather="x" class="w-5 h-5 text-red-400 mr-2"></i> | |
| <span>Limited reports</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pro Plan --> | |
| <div class="glass-card p-8 rounded-xl relative border-2 border-blue-500"> | |
| <div class="absolute top-0 right-0 bg-blue-500 text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">POPULAR</div> | |
| <div class="text-center"> | |
| <h3 class="text-xl font-bold mb-2">Professional</h3> | |
| <div class="text-4xl font-bold mb-4">$4.99<span class="text-lg text-gray-300">/month</span></div> | |
| <p class="text-gray-300 mb-6">For professionals who need advanced features</p> | |
| <a href="#" class="block w-full py-3 px-6 rounded-lg bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 transition text-center">Get Started</a> | |
| </div> | |
| <div class="mt-8 space-y-4"> | |
| <div class="flex items-center"> | |
| <i data-feather="check" class="w-5 h-5 text-green-400 mr-2"></i> | |
| <span>Advanced time tracking</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="check" class="w-5 h-5 text-green-400 mr-2"></i> | |
| <span>GPS location tracking</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="check" class="w-5 h-5 text-green-400 mr-2"></i> | |
| <span>Comprehensive task management</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="check" class="w-5 h-5 text-green-400 mr-2"></i> | |
| <span>Detailed reports & analytics</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="check" class="w-5 h-5 text-green-400 mr-2"></i> | |
| <span>Cloud backup</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Team Plan --> | |
| <div class="glass-card p-8 rounded-xl"> | |
| <div class="text-center"> | |
| <h3 class="text-xl font-bold mb-2">Team</h3> | |
| <div class="text-4xl font-bold mb-4">$9.99<span class="text-lg text-gray-300">/month</span></div> | |
| <p class="text-gray-300 mb-6">For small businesses and teams</p> | |
| <a href="#" class="block w-full py-3 px-6 rounded-lg bg-white/10 hover:bg-white/20 transition text-center">Contact Us</a> | |
| </div> | |
| <div class="mt-8 space-y-4"> | |
| <div class="flex items-center"> | |
| <i data-feather="check" class="w-5 h-5 text-green-400 mr-2"></i> | |
| <span>All Professional features</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="check" class="w-5 h-5 text-green-400 mr-2"></i> | |
| <span>Team management dashboard</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="check" class="w-5 h-5 text-green-400 mr-2"></i> | |
| <span>Team productivity reports</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="check" class="w-5 h-5 text-green-400 mr-2"></i> | |
| <span>Centralized billing</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="check" class="w-5 h-5 text-green-400 mr-2"></i> | |
| <span>Priority support</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="container mx-auto px-6 py-20 text-center"> | |
| <div class="glass-card p-12 rounded-2xl max-w-4xl mx-auto"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Your Work Tracking?</h2> | |
| <p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">Join thousands of professionals who trust TimeKeeper Pro to manage their work time efficiently.</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#" class="px-8 py-4 rounded-full bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 transition text-lg font-semibold shadow-lg"> | |
| Download Now | |
| </a> | |
| <a href="#" class="px-8 py-4 rounded-full bg-white/10 hover:bg-white/20 transition text-lg font-semibold"> | |
| Learn More | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="relative z-10 bg-black/30 backdrop-blur-sm py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center space-x-2 mb-6 md:mb-0"> | |
| <i data-feather="clock" class="w-6 h-6 text-blue-400"></i> | |
| <span class="text-lg font-bold">TimeKeeper Pro</span> | |
| </div> | |
| <div class="flex space-x-6 mb-6 md:mb-0"> | |
| <a href="#" class="hover:text-blue-300 transition">Privacy Policy</a> | |
| <a href="#" class="hover:text-blue-300 transition">Terms of Service</a> | |
| <a href="#" class="hover:text-blue-300 transition">Contact Us</a> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center transition"> | |
| <i data-feather="twitter" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center transition"> | |
| <i data-feather="facebook" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center transition"> | |
| <i data-feather="instagram" class="w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-8 pt-8 border-t border-white/10 text-center text-gray-400"> | |
| <p>© 2023 TimeKeeper Pro. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Vanta.js background | |
| VANTA.WAVES({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x1a237e, | |
| shininess: 20.00, | |
| waveHeight: 15.00, | |
| waveSpeed: 0.75, | |
| zoom: 0.8 | |
| }); | |
| // Initialize feather icons | |
| feather.replace(); | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // Animation for feature cards on scroll | |
| const featureCards = document.querySelectorAll('.feature-card'); | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.style.opacity = '1'; | |
| entry.target.style.transform = 'translateY(0)'; | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| featureCards.forEach(card => { | |
| card.style.opacity = '0'; | |
| card.style.transform = 'translateY(20px)'; | |
| card.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; | |
| observer.observe(card); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |