timekeeper-pro / index.html
ToasterBaptism's picture
## Project Title: WorkTrack Pro - Customizable Time Management Android Application
14854d4 verified
Raw History Blame Contribute Delete
25.5 kB
<!DOCTYPE html>
<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>