|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>ToxiTrack - Toxin Monitoring App</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
} |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #f5f7fa 0%, #e4f0fb 100%); |
|
|
} |
|
|
.card-hover:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
.transition-all { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="gradient-bg min-h-screen"> |
|
|
<div id="app" class="container mx-auto px-4 py-8"> |
|
|
|
|
|
<nav class="flex justify-between items-center mb-12"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i data-feather="shield" class="text-emerald-500"></i> |
|
|
<span class="text-xl font-bold text-gray-800">ToxiTrack</span> |
|
|
</div> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#features" class="text-gray-600 hover:text-emerald-500 transition-all">Features</a> |
|
|
<a href="#how-it-works" class="text-gray-600 hover:text-emerald-500 transition-all">How It Works</a> |
|
|
<a href="dashboard.html" class="text-gray-600 hover:text-emerald-500 transition-all">Dashboard</a> |
|
|
<a href="toxins.html" class="text-gray-600 hover:text-emerald-500 transition-all">Toxin Index</a> |
|
|
</div> |
|
|
<div class="flex space-x-3"> |
|
|
<a href="#" class="bg-emerald-500 hover:bg-emerald-600 text-white px-4 py-2 rounded-full transition-all flex items-center"> |
|
|
<i data-feather="download" class="mr-2"></i> Download |
|
|
</a> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="flex flex-col md:flex-row items-center mb-24"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-6">Protect Your Health with <span class="text-emerald-500">Real-Time Toxin Monitoring</span></h1> |
|
|
<p class="text-lg text-gray-600 mb-8">ToxiTrack helps you monitor environmental toxins and food contaminants to make informed decisions about your health and safety.</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="bg-emerald-500 hover:bg-emerald-600 text-white px-6 py-3 rounded-full transition-all flex items-center"> |
|
|
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Download_on_the_App_Store_Badge.svg" class="h-10" alt="App Store"> |
|
|
</a> |
|
|
<a href="#" class="bg-gray-800 hover:bg-black text-white px-6 py-3 rounded-full transition-all flex items-center"> |
|
|
<img src="https://upload.wikimedia.org/wikipedia/commons/7/78/Google_Play_Store_badge_EN.svg" class="h-10" alt="Play Store"> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center"> |
|
|
<div class="relative"> |
|
|
<div class="absolute -top-6 -left-6 w-full h-full bg-emerald-100 rounded-3xl -z-10"></div> |
|
|
<img src="http://static.photos/technology/640x360/42" alt="ToxiTrack App Preview" class="rounded-2xl shadow-xl w-full max-w-md"> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="features" class="mb-24"> |
|
|
<h2 class="text-3xl font-bold text-center text-gray-800 mb-16">Key Features</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-white p-8 rounded-2xl shadow-lg card-hover transition-all"> |
|
|
<div class="bg-emerald-100 w-16 h-16 rounded-full flex items-center justify-center mb-6"> |
|
|
<i data-feather="camera" class="text-emerald-500 w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">Food Scanner</h3> |
|
|
<p class="text-gray-600">Simply take a picture of your food to get instant toxin analysis and safety recommendations.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-8 rounded-2xl shadow-lg card-hover transition-all"> |
|
|
<div class="bg-emerald-100 w-16 h-16 rounded-full flex items-center justify-center mb-6"> |
|
|
<i data-feather="map-pin" class="text-emerald-500 w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">Air Quality Monitor</h3> |
|
|
<p class="text-gray-600">Automatic air quality tracking based on your location with real-time pollution alerts.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-8 rounded-2xl shadow-lg card-hover transition-all"> |
|
|
<div class="bg-emerald-100 w-16 h-16 rounded-full flex items-center justify-center mb-6"> |
|
|
<i data-feather="activity" class="text-emerald-500 w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">Health Dashboard</h3> |
|
|
<p class="text-gray-600">Comprehensive graphs and trends of your toxin exposure over time to identify patterns.</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="how-it-works" class="mb-24"> |
|
|
<h2 class="text-3xl font-bold text-center text-gray-800 mb-16">How ToxiTrack Works</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-6"> |
|
|
<div class="flex flex-col items-center text-center"> |
|
|
<div class="bg-white w-20 h-20 rounded-full flex items-center justify-center mb-4 shadow-lg"> |
|
|
<span class="text-emerald-500 font-bold text-xl">1</span> |
|
|
</div> |
|
|
<h3 class="font-semibold text-gray-800 mb-2">Download the App</h3> |
|
|
<p class="text-gray-600 text-sm">Available on both iOS and Android platforms</p> |
|
|
</div> |
|
|
<div class="flex flex-col items-center text-center"> |
|
|
<div class="bg-white w-20 h-20 rounded-full flex items-center justify-center mb-4 shadow-lg"> |
|
|
<span class="text-emerald-500 font-bold text-xl">2</span> |
|
|
</div> |
|
|
<h3 class="font-semibold text-gray-800 mb-2">Scan or Select</h3> |
|
|
<p class="text-gray-600 text-sm">Take food pictures or allow location access</p> |
|
|
</div> |
|
|
<div class="flex flex-col items-center text-center"> |
|
|
<div class="bg-white w-20 h-20 rounded-full flex items-center justify-center mb-4 shadow-lg"> |
|
|
<span class="text-emerald-500 font-bold text-xl">3</span> |
|
|
</div> |
|
|
<h3 class="font-semibold text-gray-800 mb-2">Get Analysis</h3> |
|
|
<p class="text-gray-600 text-sm">Instant toxin level evaluation</p> |
|
|
</div> |
|
|
<div class="flex flex-col items-center text-center"> |
|
|
<div class="bg-white w-20 h-20 rounded-full flex items-center justify-center mb-4 shadow-lg"> |
|
|
<span class="text-emerald-500 font-bold text-xl">4</span> |
|
|
</div> |
|
|
<h3 class="font-semibold text-gray-800 mb-2">Track Trends</h3> |
|
|
<p class="text-gray-600 text-sm">Monitor your exposure over time</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-24"> |
|
|
<h2 class="text-3xl font-bold text-center text-gray-800 mb-16">What Our Users Say</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
|
<div class="bg-white p-8 rounded-2xl shadow-lg"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-full bg-emerald-100 flex items-center justify-center mr-4"> |
|
|
<i data-feather="user" class="text-emerald-500"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-800">Sarah J.</h4> |
|
|
<p class="text-gray-500 text-sm">Food Allergy Sufferer</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600">"ToxiTrack has changed how I shop for groceries. I can quickly check for potential allergens and make safer choices for my family."</p> |
|
|
</div> |
|
|
<div class="bg-white p-8 rounded-2xl shadow-lg"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-full bg-emerald-100 flex items-center justify-center mr-4"> |
|
|
<i data-feather="user" class="text-emerald-500"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-800">Michael T.</h4> |
|
|
<p class="text-gray-500 text-sm">Health Enthusiast</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600">"The air quality monitoring feature is incredibly accurate. I use it every morning to decide if I should exercise outdoors or indoors."</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="bg-emerald-500 rounded-3xl p-12 text-center text-white mb-12"> |
|
|
<h2 class="text-3xl font-bold mb-6">Ready to Take Control of Your Health?</h2> |
|
|
<p class="text-lg mb-8 max-w-2xl mx-auto">Download ToxiTrack today and start making informed decisions about your environment and food choices.</p> |
|
|
<div class="flex justify-center space-x-4"> |
|
|
<a href="#" class="bg-white hover:bg-gray-100 text-emerald-500 px-6 py-3 rounded-full transition-all flex items-center"> |
|
|
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Download_on_the_App_Store_Badge.svg" class="h-10" alt="App Store"> |
|
|
</a> |
|
|
<a href="#" class="bg-gray-800 hover:bg-black text-white px-6 py-3 rounded-full transition-all flex items-center"> |
|
|
<img src="https://upload.wikimedia.org/wikipedia/commons/7/78/Google_Play_Store_badge_EN.svg" class="h-10" alt="Play Store"> |
|
|
</a> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="pt-12 pb-6 border-t border-gray-200"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="flex items-center space-x-2 mb-4 md:mb-0"> |
|
|
<i data-feather="shield" class="text-emerald-500"></i> |
|
|
<span class="text-xl font-bold text-gray-800">ToxiTrack</span> |
|
|
</div> |
|
|
<div class="flex space-x-6 mb-4 md:mb-0"> |
|
|
<a href="#" class="text-gray-600 hover:text-emerald-500 transition-all">Privacy Policy</a> |
|
|
<a href="#" class="text-gray-600 hover:text-emerald-500 transition-all">Terms of Service</a> |
|
|
<a href="#" class="text-gray-600 hover:text-emerald-500 transition-all">Contact Us</a> |
|
|
</div> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-600 hover:text-emerald-500 transition-all"> |
|
|
<i data-feather="facebook"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-600 hover:text-emerald-500 transition-all"> |
|
|
<i data-feather="twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-600 hover:text-emerald-500 transition-all"> |
|
|
<i data-feather="instagram"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-center text-gray-500 text-sm mt-6"> |
|
|
© 2023 ToxiTrack. All rights reserved. |
|
|
</div> |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const features = document.querySelectorAll('.card-hover'); |
|
|
features.forEach((feature, index) => { |
|
|
feature.style.transitionDelay = `${index * 0.1}s`; |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
