|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Trackly - Suivi des Habitudes</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
:root { |
|
|
--primary: #6366f1; |
|
|
--primary-dark: #4f46e5; |
|
|
--secondary: #f43f5e; |
|
|
--dark: #1e293b; |
|
|
--light: #f8fafc; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background-color: #f1f5f9; |
|
|
} |
|
|
|
|
|
.habit-card:hover .habit-progress { |
|
|
transform: scaleY(1.1); |
|
|
} |
|
|
|
|
|
.streak-flame { |
|
|
animation: pulse 1.5s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0%, 100% { opacity: 1; } |
|
|
50% { opacity: 0.7; } |
|
|
} |
|
|
|
|
|
.progress-ring__circle { |
|
|
transition: stroke-dashoffset 0.5s; |
|
|
transform: rotate(-90deg); |
|
|
transform-origin: 50% 50%; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen"> |
|
|
|
|
|
<nav class="bg-white shadow-sm"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<i class="fas fa-fire text-indigo-500 text-2xl mr-2"></i> |
|
|
<span class="text-xl font-bold text-indigo-600">Trackly</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden sm:ml-6 sm:flex sm:items-center space-x-8"> |
|
|
<a href="#" class="text-indigo-600 px-3 py-2 font-medium">Tableau de bord</a> |
|
|
<a href="#" class="text-gray-500 hover:text-indigo-600 px-3 py-2 font-medium">Habitudes</a> |
|
|
<a href="#" class="text-gray-500 hover:text-indigo-600 px-3 py-2 font-medium">Statistiques</a> |
|
|
<a href="#" class="text-gray-500 hover:text-indigo-600 px-3 py-2 font-medium">Récompenses</a> |
|
|
</div> |
|
|
<div class="hidden sm:ml-6 sm:flex sm:items-center"> |
|
|
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md font-medium transition"> |
|
|
Passer Premium |
|
|
</button> |
|
|
</div> |
|
|
<div class="-mr-2 flex items-center sm:hidden"> |
|
|
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false"> |
|
|
<span class="sr-only">Open main menu</span> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> |
|
|
|
|
|
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8"> |
|
|
<div> |
|
|
<h1 class="text-3xl font-bold text-gray-900">Bonjour, Alex</h1> |
|
|
<p class="text-gray-500 mt-2">Suivez vos progrès et construisez des habitudes durables</p> |
|
|
</div> |
|
|
<div class="mt-4 md:mt-0 flex space-x-3"> |
|
|
<button class="bg-white border border-gray-300 rounded-md px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 flex items-center"> |
|
|
<i class="fas fa-calendar-alt mr-2 text-indigo-500"></i> |
|
|
Aujourd'hui |
|
|
</button> |
|
|
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md font-medium transition flex items-center"> |
|
|
<i class="fas fa-plus mr-2"></i> |
|
|
Nouvelle habitude |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8"> |
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm font-medium">Série actuelle</p> |
|
|
<p class="text-2xl font-bold text-gray-900 mt-1">12 <span class="text-sm text-gray-500">jours</span></p> |
|
|
</div> |
|
|
<div class="bg-indigo-100 p-3 rounded-full"> |
|
|
<i class="fas fa-fire text-indigo-600 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-indigo-600 h-2 rounded-full" style="width: 75%"></div> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500 mt-1">75% de votre objectif de 16 jours</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm font-medium">Habitudes complétées</p> |
|
|
<p class="text-2xl font-bold text-gray-900 mt-1">5/8</p> |
|
|
</div> |
|
|
<div class="bg-green-100 p-3 rounded-full"> |
|
|
<i class="fas fa-check-circle text-green-600 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-green-500 h-2 rounded-full" style="width: 62%"></div> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500 mt-1">62% des habitudes terminées</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm font-medium">Taux de réussite</p> |
|
|
<p class="text-2xl font-bold text-gray-900 mt-1">89%</p> |
|
|
</div> |
|
|
<div class="bg-blue-100 p-3 rounded-full"> |
|
|
<i class="fas fa-chart-line text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-blue-500 h-2 rounded-full" style="width: 89%"></div> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500 mt-1">+12% depuis la semaine dernière</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm font-medium">Points</p> |
|
|
<p class="text-2xl font-bold text-gray-900 mt-1">1,240</p> |
|
|
</div> |
|
|
<div class="bg-purple-100 p-3 rounded-full"> |
|
|
<i class="fas fa-trophy text-purple-600 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-purple-500 h-2 rounded-full" style="width: 40%"></div> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500 mt-1">400 points jusqu'au prochain niveau</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-8"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-xl font-bold text-gray-900">Vos habitudes du jour</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-gray-500 hover:text-indigo-600"> |
|
|
<i class="fas fa-filter"></i> |
|
|
</button> |
|
|
<button class="text-gray-500 hover:text-indigo-600"> |
|
|
<i class="fas fa-sort"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="habit-card bg-white rounded-xl shadow-sm overflow-hidden transition hover:shadow-md"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-indigo-100 p-2 rounded-lg"> |
|
|
<i class="fas fa-running text-indigo-600 text-lg"></i> |
|
|
</div> |
|
|
<h3 class="ml-3 font-bold text-gray-900">Course matinale</h3> |
|
|
</div> |
|
|
<p class="text-sm text-gray-500 mt-2">30 minutes de course à pied</p> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-xs font-medium px-2 py-1 rounded-full bg-green-100 text-green-800">Active</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<div class="relative w-10 h-10"> |
|
|
<svg class="w-10 h-10" viewBox="0 0 36 36"> |
|
|
<circle cx="18" cy="18" r="16" fill="none" stroke="#e6e6e6" stroke-width="3"></circle> |
|
|
<circle class="progress-ring__circle" cx="18" cy="18" r="16" fill="none" stroke="#6366f1" stroke-width="3" stroke-dasharray="100" stroke-dashoffset="30"></circle> |
|
|
</svg> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<span class="text-xs font-bold text-indigo-600">70%</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-xs text-gray-500">Réussite</p> |
|
|
<p class="text-sm font-medium">7/10 jours</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col items-center"> |
|
|
<div class="flex items-center text-yellow-500 streak-flame"> |
|
|
<i class="fas fa-fire"></i> |
|
|
<span class="ml-1 text-sm font-bold">5</span> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500 mt-1">Série actuelle</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="habit-progress bg-gray-100 h-2 transition-transform origin-bottom"> |
|
|
<div class="bg-indigo-600 h-2" style="width: 70%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="habit-card bg-white rounded-xl shadow-sm overflow-hidden transition hover:shadow-md"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-blue-100 p-2 rounded-lg"> |
|
|
<i class="fas fa-book text-blue-600 text-lg"></i> |
|
|
</div> |
|
|
<h3 class="ml-3 font-bold text-gray-900">Lecture</h3> |
|
|
</div> |
|
|
<p class="text-sm text-gray-500 mt-2">20 pages par jour</p> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-xs font-medium px-2 py-1 rounded-full bg-green-100 text-green-800">Active</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<div class="relative w-10 h-10"> |
|
|
<svg class="w-10 h-10" viewBox="0 0 36 36"> |
|
|
<circle cx="18" cy="18" r="16" fill="none" stroke="#e6e6e6" stroke-width="3"></circle> |
|
|
<circle class="progress-ring__circle" cx="18" cy="18" r="16" fill="none" stroke="#3b82f6" stroke-width="3" stroke-dasharray="100" stroke-dashoffset="15"></circle> |
|
|
</svg> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<span class="text-xs font-bold text-blue-600">85%</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-xs text-gray-500">Réussite</p> |
|
|
<p class="text-sm font-medium">17/20 jours</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col items-center"> |
|
|
<div class="flex items-center text-yellow-500 streak-flame"> |
|
|
<i class="fas fa-fire"></i> |
|
|
<span class="ml-1 text-sm font-bold">12</span> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500 mt-1">Série actuelle</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="habit-progress bg-gray-100 h-2 transition-transform origin-bottom"> |
|
|
<div class="bg-blue-500 h-2" style="width: 85%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="habit-card bg-white rounded-xl shadow-sm overflow-hidden transition hover:shadow-md"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-purple-100 p-2 rounded-lg"> |
|
|
<i class="fas fa-spa text-purple-600 text-lg"></i> |
|
|
</div> |
|
|
<h3 class="ml-3 font-bold text-gray-900">Méditation</h3> |
|
|
</div> |
|
|
<p class="text-sm text-gray-500 mt-2">10 minutes de pleine conscience</p> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-xs font-medium px-2 py-1 rounded-full bg-green-100 text-green-800">Active</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<div class="relative w-10 h-10"> |
|
|
<svg class="w-10 h-10" viewBox="0 0 36 36"> |
|
|
<circle cx="18" cy="18" r="16" fill="none" stroke="#e6e6e6" stroke-width="3"></circle> |
|
|
<circle class="progress-ring__circle" cx="18" cy="18" r="16" fill="none" stroke="#8b5cf6" stroke-width="3" stroke-dasharray="100" stroke-dashoffset="50"></circle> |
|
|
</svg> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<span class="text-xs font-bold text-purple-600">50%</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-xs text-gray-500">Réussite</p> |
|
|
<p class="text-sm font-medium">5/10 jours</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col items-center"> |
|
|
<div class="flex items-center text-yellow-500 streak-flame"> |
|
|
<i class="fas fa-fire"></i> |
|
|
<span class="ml-1 text-sm font-bold">3</span> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500 mt-1">Série actuelle</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="habit-progress bg-gray-100 h-2 transition-transform origin-bottom"> |
|
|
<div class="bg-purple-500 h-2" style="width: 50%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="habit-card bg-white rounded-xl shadow-sm overflow-hidden transition hover:shadow-md"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-green-100 p-2 rounded-lg"> |
|
|
<i class="fas fa-utensils text-green-600 text-lg"></i> |
|
|
</div> |
|
|
<h3 class="ml-3 font-bold text-gray-900">Repas sains</h3> |
|
|
</div> |
|
|
<p class="text-sm text-gray-500 mt-2">3 repas équilibrés par jour</p> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-xs font-medium px-2 py-1 rounded-full bg-green-100 text-green-800">Active</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<div class="relative w-10 h-10"> |
|
|
<svg class="w-10 h-10" viewBox="0 0 36 36"> |
|
|
<circle cx="18" cy="18" r="16" fill="none" stroke="#e6e6e6" stroke-width="3"></circle> |
|
|
<circle class="progress-ring__circle" cx="18" cy="18" r="16" fill="none" stroke="#10b981" stroke-width="3" stroke-dasharray="100" stroke-dashoffset="60"></circle> |
|
|
</svg> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<span class="text-xs font-bold text-green-600">40%</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-xs text-gray-500">Réussite</p> |
|
|
<p class="text-sm font-medium">4/10 jours</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col items-center"> |
|
|
<div class="flex items-center text-yellow-500 streak-flame"> |
|
|
<i class="fas fa-fire"></i> |
|
|
<span class="ml-1 text-sm font-bold">2</span> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500 mt-1">Série actuelle</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="habit-progress bg-gray-100 h-2 transition-transform origin-bottom"> |
|
|
<div class="bg-green-500 h-2" style="width: 40%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="habit-card bg-white rounded-xl shadow-sm overflow-hidden transition hover:shadow-md"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-red-100 p-2 rounded-lg"> |
|
|
<i class="fas fa-bed text-red-600 text-lg"></i> |
|
|
</div> |
|
|
<h3 class="ml-3 font-bold text-gray-900">Sommeil</h3> |
|
|
</div> |
|
|
<p class="text-sm text-gray-500 mt-2">7-8 heures par nuit</p> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-xs font-medium px-2 py-1 rounded-full bg-green-100 text-green-800">Active</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<div class="relative w-10 h-10"> |
|
|
<svg class="w-10 h-10" viewBox="0 0 36 36"> |
|
|
<circle cx="18" cy="18" r="16" fill="none" stroke="#e6e6e6" stroke-width="3"></circle> |
|
|
<circle class="progress-ring__circle" cx="18" cy="18" r="16" fill="none" stroke="#ef4444" stroke-width="3" stroke-dasharray="100" stroke-dashoffset="20"></circle> |
|
|
</svg> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<span class="text-xs font-bold text-red-600">80%</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-xs text-gray-500">Réussite</p> |
|
|
<p class="text-sm font-medium">16/20 jours</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col items-center"> |
|
|
<div class="flex items-center text-yellow-500 streak-flame"> |
|
|
<i class="fas fa-fire"></i> |
|
|
<span class="ml-1 text-sm font-bold">8</span> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500 mt-1">Série actuelle</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="habit-progress bg-gray-100 h-2 transition-transform origin-bottom"> |
|
|
<div class="bg-red-500 h-2" style="width: 80%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border-2 border-dashed border-gray-300 rounded-xl flex flex-col items-center justify-center p-6 hover:border-indigo-400 hover:bg-indigo-50 transition cursor-pointer"> |
|
|
<div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-3"> |
|
|
<i class="fas fa-plus text-indigo-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-700">Ajouter une habitude</h3> |
|
|
<p class="text-sm text-gray-500 mt-1 text-center">Commencez à suivre une nouvelle routine</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-6 mb-8"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-xl font-bold text-gray-900">Vos statistiques</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-gray-500 hover:text-indigo-600 text-sm font-medium">Semaine</button> |
|
|
<button class="text-gray-500 hover:text-indigo-600 text-sm font-medium">Mois</button> |
|
|
<button class="bg-indigo-100 text-indigo-600 px-3 py-1 rounded-md text-sm font-medium">Année</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="h-64"> |
|
|
<canvas id="statsChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gradient-to-r from-indigo-500 to-purple-600 rounded-xl shadow-sm p-8 text-white"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="mb-6 md:mb-0"> |
|
|
<h2 class="text-2xl font-bold mb-2">Passez à Trackly Premium</h2> |
|
|
<p class="opacity-90 max-w-lg">Débloquez des analyses avancées, des plans personnalisés et des fonctionnalités exclusives pour maximiser vos progrès.</p> |
|
|
</div> |
|
|
<button class="bg-white text-indigo-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-bold transition whitespace-nowrap"> |
|
|
Essai gratuit de 7 jours |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="bg-white border-t border-gray-200 mt-12"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">Trackly</h3> |
|
|
<p class="text-gray-500 text-sm">Aidez-vous à construire des habitudes durables et à atteindre vos objectifs personnels.</p> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">Produit</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-500 hover:text-indigo-600 text-sm">Fonctionnalités</a></li> |
|
|
<li><a href="#" class="text-gray-500 hover:text-indigo-600 text-sm">Premium</a></li> |
|
|
<li><a href="#" class="text-gray-500 hover:text-indigo-600 text-sm">Tarifs</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">Ressources</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-500 hover:text-indigo-600 text-sm">Blog</a></li> |
|
|
<li><a href="#" class="text-gray-500 hover:text-indigo-600 text-sm">Guides</a></li> |
|
|
<li><a href="#" class="text-gray-500 hover:text-indigo-600 text-sm">FAQ</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">Entreprise</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-500 hover:text-indigo-600 text-sm">À propos</a></li> |
|
|
<li><a href="#" class="text-gray-500 hover:text-indigo-600 text-sm">Carrières</a></li> |
|
|
<li><a href="#" class="text-gray-500 hover:text-indigo-600 text-sm">Contact</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-8 pt-8 border-t border-gray-200 flex flex-col md:flex-row justify-between items-center"> |
|
|
<p class="text-gray-500 text-sm">© 2023 Trackly. Tous droits réservés.</p> |
|
|
<div class="flex space-x-6 mt-4 md:mt-0"> |
|
|
<a href="#" class="text-gray-400 hover:text-indigo-600"> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-indigo-600"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-indigo-600"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
<script> |
|
|
|
|
|
const ctx = document.getElementById('statsChart').getContext('2d'); |
|
|
const statsChart = new Chart(ctx, { |
|
|
type: 'line', |
|
|
data: { |
|
|
labels: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Août', 'Sep', 'Oct', 'Nov', 'Déc'], |
|
|
datasets: [ |
|
|
{ |
|
|
label: 'Habitudes complétées', |
|
|
data: [65, 59, 80, 81, 76, 85, 90, 92, 88, 95, 93, 97], |
|
|
borderColor: '#6366f1', |
|
|
backgroundColor: 'rgba(99, 102, 241, 0.1)', |
|
|
tension: 0.3, |
|
|
fill: true |
|
|
}, |
|
|
{ |
|
|
label: 'Taux de réussite', |
|
|
data: [72, 75, 78, 82, 85, 87, 89, 91, 90, 93, 94, 96], |
|
|
borderColor: '#10b981', |
|
|
backgroundColor: 'rgba(16, 185, 129, 0.1)', |
|
|
tension: 0.3, |
|
|
fill: true |
|
|
} |
|
|
] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
plugins: { |
|
|
legend: { |
|
|
position: 'top', |
|
|
}, |
|
|
tooltip: { |
|
|
mode: 'index', |
|
|
intersect: false, |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: false, |
|
|
min: 50, |
|
|
max: 100, |
|
|
ticks: { |
|
|
callback: function(value) { |
|
|
return value + '%'; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const circles = document.querySelectorAll('.progress-ring__circle'); |
|
|
const radius = 16; |
|
|
const circumference = 2 * Math.PI * radius; |
|
|
|
|
|
circles.forEach(circle => { |
|
|
const percent = parseInt(circle.parentElement.querySelector('span').textContent); |
|
|
const offset = circumference - (percent / 100) * circumference; |
|
|
circle.style.strokeDasharray = circumference; |
|
|
circle.style.strokeDashoffset = offset; |
|
|
}); |
|
|
|
|
|
|
|
|
const habitCards = document.querySelectorAll('.habit-card'); |
|
|
habitCards.forEach(card => { |
|
|
card.addEventListener('click', function() { |
|
|
const checkIcon = document.createElement('i'); |
|
|
checkIcon.className = 'fas fa-check-circle text-green-500 text-4xl'; |
|
|
|
|
|
const overlay = document.createElement('div'); |
|
|
overlay.className = 'absolute inset-0 bg-white bg-opacity-90 flex items-center justify-center rounded-xl'; |
|
|
overlay.appendChild(checkIcon); |
|
|
|
|
|
this.style.position = 'relative'; |
|
|
this.appendChild(overlay); |
|
|
|
|
|
setTimeout(() => { |
|
|
this.removeChild(overlay); |
|
|
}, 1500); |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=zama1/trackly" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
