|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>ZenFocus - Respiration & Concentration</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> |
|
|
@keyframes pulse { |
|
|
0%, 100% { transform: scale(1); opacity: 0.7; } |
|
|
50% { transform: scale(1.05); opacity: 1; } |
|
|
} |
|
|
@keyframes breatheIn { |
|
|
0% { transform: scale(1); } |
|
|
100% { transform: scale(1.2); } |
|
|
} |
|
|
@keyframes breatheOut { |
|
|
0% { transform: scale(1.2); } |
|
|
100% { transform: scale(1); } |
|
|
} |
|
|
.pulse-animation { |
|
|
animation: pulse 4s infinite ease-in-out; |
|
|
} |
|
|
.breathe-in { |
|
|
animation: breatheIn 4s ease-in forwards; |
|
|
} |
|
|
.breathe-out { |
|
|
animation: breatheOut 4s ease-out forwards; |
|
|
} |
|
|
.wave-bg { |
|
|
background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 50%, #80deea 100%); |
|
|
} |
|
|
.circle-animation { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.progress-ring__circle { |
|
|
transition: stroke-dashoffset 0.35s; |
|
|
transform: rotate(-90deg); |
|
|
transform-origin: 50% 50%; |
|
|
} |
|
|
.fade-in { |
|
|
animation: fadeIn 0.5s ease-in forwards; |
|
|
} |
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; } |
|
|
to { opacity: 1; } |
|
|
} |
|
|
.tab-active { |
|
|
border-bottom: 3px solid #4fd1c5; |
|
|
color: #4fd1c5; |
|
|
font-weight: 600; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="font-sans bg-gray-50 text-gray-800 min-h-screen"> |
|
|
|
|
|
<div class="max-w-md mx-auto bg-white shadow-lg rounded-lg overflow-hidden min-h-screen flex flex-col"> |
|
|
|
|
|
<header class="bg-teal-500 text-white p-4 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-spa text-xl"></i> |
|
|
<h1 class="text-xl font-bold">ZenFocus</h1> |
|
|
</div> |
|
|
<div class="flex space-x-3"> |
|
|
<button class="text-white"><i class="fas fa-chart-line"></i></button> |
|
|
<button class="text-white"><i class="fas fa-cog"></i></button> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-1 overflow-y-auto"> |
|
|
|
|
|
<div id="onboarding" class="p-6 bg-white"> |
|
|
<div class="text-center mb-8"> |
|
|
<div class="w-32 h-32 bg-teal-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<i class="fas fa-wind text-teal-500 text-5xl"></i> |
|
|
</div> |
|
|
<h2 class="text-2xl font-bold text-teal-700 mb-2">Bienvenue sur ZenFocus</h2> |
|
|
<p class="text-gray-600">Améliorez votre concentration et réduisez le stress grâce à des exercices de respiration guidés.</p> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-6 mb-8"> |
|
|
<div class="flex items-start space-x-3"> |
|
|
<div class="bg-teal-100 p-2 rounded-full"> |
|
|
<i class="fas fa-lungs text-teal-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-semibold">Respiration guidée</h3> |
|
|
<p class="text-sm text-gray-600">Techniques scientifiquement prouvées pour réduire le stress</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start space-x-3"> |
|
|
<div class="bg-indigo-100 p-2 rounded-full"> |
|
|
<i class="fas fa-brain text-indigo-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-semibold">Concentration améliorée</h3> |
|
|
<p class="text-sm text-gray-600">Exercices pour booster votre focus et productivité</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start space-x-3"> |
|
|
<div class="bg-purple-100 p-2 rounded-full"> |
|
|
<i class="fas fa-chart-line text-purple-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-semibold">Suivi de progression</h3> |
|
|
<p class="text-sm text-gray-600">Visualisez vos améliorations au fil du temps</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button id="startBtn" class="w-full bg-teal-500 hover:bg-teal-600 text-white font-bold py-3 px-4 rounded-full transition duration-300"> |
|
|
Commencer |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="mainApp" class="hidden"> |
|
|
|
|
|
<div class="flex border-b"> |
|
|
<button data-tab="home" class="tab-active flex-1 py-4 text-center"> |
|
|
<i class="fas fa-home"></i> |
|
|
</button> |
|
|
<button data-tab="breathe" class="flex-1 py-4 text-center text-gray-500"> |
|
|
<i class="fas fa-wind"></i> |
|
|
</button> |
|
|
<button data-tab="focus" class="flex-1 py-4 text-center text-gray-500"> |
|
|
<i class="fas fa-brain"></i> |
|
|
</button> |
|
|
<button data-tab="stats" class="flex-1 py-4 text-center text-gray-500"> |
|
|
<i class="fas fa-chart-line"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 p-4"> |
|
|
|
|
|
<div id="homeTab" class="tab-content"> |
|
|
<div class="text-center mb-6"> |
|
|
<h2 class="text-xl font-bold text-teal-700 mb-2">Bonjour,</h2> |
|
|
<p class="text-gray-600">Comment souhaitez-vous vous sentir aujourd'hui ?</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 gap-4 mb-6"> |
|
|
<div class="bg-blue-50 p-4 rounded-xl text-center"> |
|
|
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-2"> |
|
|
<i class="fas fa-wind text-blue-500 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold text-blue-700">Détendu</h3> |
|
|
<p class="text-xs text-blue-600">Exercices de respiration</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-purple-50 p-4 rounded-xl text-center"> |
|
|
<div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-2"> |
|
|
<i class="fas fa-brain text-purple-500 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold text-purple-700">Concentré</h3> |
|
|
<p class="text-xs text-purple-600">Boost de focus</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-green-50 p-4 rounded-xl text-center"> |
|
|
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-2"> |
|
|
<i class="fas fa-moon text-green-500 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold text-green-700">Calme</h3> |
|
|
<p class="text-xs text-green-600">Méditation</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-orange-50 p-4 rounded-xl text-center"> |
|
|
<div class="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-2"> |
|
|
<i class="fas fa-bolt text-orange-500 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold text-orange-700">Énergisé</h3> |
|
|
<p class="text-xs text-orange-600">Réveil matinal</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white shadow rounded-xl p-4 mb-4"> |
|
|
<h3 class="font-semibold text-gray-700 mb-2">Votre routine du jour</h3> |
|
|
<div class="flex items-center justify-between bg-teal-50 rounded-lg p-3"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="bg-teal-100 p-2 rounded-full"> |
|
|
<i class="fas fa-wind text-teal-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Respiration profonde</h4> |
|
|
<p class="text-xs text-gray-500">5 min • Cohérence cardiaque</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="bg-teal-500 text-white p-2 rounded-full"> |
|
|
<i class="fas fa-play"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center text-sm text-gray-500"> |
|
|
<p>Dernière session: il y a 2 jours</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="breatheTab" class="tab-content hidden"> |
|
|
<div class="text-center mb-6"> |
|
|
<h2 class="text-xl font-bold text-teal-700 mb-2">Exercices de respiration</h2> |
|
|
<p class="text-gray-600">Choisissez une technique pour vous détendre</p> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4 mb-6"> |
|
|
<div class="bg-white shadow rounded-xl overflow-hidden"> |
|
|
<div class="flex"> |
|
|
<div class="w-1/3 bg-blue-100 flex items-center justify-center p-4"> |
|
|
<i class="fas fa-lungs text-blue-500 text-3xl"></i> |
|
|
</div> |
|
|
<div class="w-2/3 p-4"> |
|
|
<h3 class="font-semibold text-blue-700">Respiration profonde</h3> |
|
|
<p class="text-sm text-gray-600 mb-2">Réduit le stress et améliore l'oxygénation</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded">5 min</span> |
|
|
<button class="text-blue-500 text-sm font-medium">Démarrer</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white shadow rounded-xl overflow-hidden"> |
|
|
<div class="flex"> |
|
|
<div class="w-1/3 bg-purple-100 flex items-center justify-center p-4"> |
|
|
<i class="fas fa-heartbeat text-purple-500 text-3xl"></i> |
|
|
</div> |
|
|
<div class="w-2/3 p-4"> |
|
|
<h3 class="font-semibold text-purple-700">Cohérence cardiaque</h3> |
|
|
<p class="text-sm text-gray-600 mb-2">Équilibre le système nerveux</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-xs bg-purple-100 text-purple-700 px-2 py-1 rounded">10 min</span> |
|
|
<button class="text-purple-500 text-sm font-medium">Démarrer</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white shadow rounded-xl overflow-hidden"> |
|
|
<div class="flex"> |
|
|
<div class="w-1/3 bg-green-100 flex items-center justify-center p-4"> |
|
|
<i class="fas fa-leaf text-green-500 text-3xl"></i> |
|
|
</div> |
|
|
<div class="w-2/3 p-4"> |
|
|
<h3 class="font-semibold text-green-700">Respiration carrée</h3> |
|
|
<p class="text-sm text-gray-600 mb-2">Améliore la concentration</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-xs bg-green-100 text-green-700 px-2 py-1 rounded">7 min</span> |
|
|
<button class="text-green-500 text-sm font-medium">Démarrer</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button class="w-full border-2 border-teal-500 text-teal-500 font-bold py-2 px-4 rounded-full transition duration-300"> |
|
|
<i class="fas fa-plus mr-2"></i> Personnaliser |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="focusTab" class="tab-content hidden"> |
|
|
<div class="text-center mb-6"> |
|
|
<h2 class="text-xl font-bold text-teal-700 mb-2">Boost de concentration</h2> |
|
|
<p class="text-gray-600">Améliorez votre focus et productivité</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white shadow rounded-xl p-4 mb-6"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<h3 class="font-semibold">Sessions de travail</h3> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="bg-gray-100 text-gray-600 p-1 rounded"> |
|
|
<i class="fas fa-sliders-h text-sm"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-3 gap-2 mb-4"> |
|
|
<button class="bg-gray-100 hover:bg-teal-100 text-gray-700 py-2 rounded transition duration-300"> |
|
|
25 min |
|
|
</button> |
|
|
<button class="bg-teal-100 text-teal-700 py-2 rounded font-semibold"> |
|
|
50 min |
|
|
</button> |
|
|
<button class="bg-gray-100 hover:bg-teal-100 text-gray-700 py-2 rounded transition duration-300"> |
|
|
90 min |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<h4 class="font-medium">Pauses</h4> |
|
|
<p class="text-xs text-gray-500">5 min après chaque session</p> |
|
|
</div> |
|
|
<button class="bg-teal-500 text-white px-4 py-2 rounded-full text-sm font-medium"> |
|
|
Démarrer |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white shadow rounded-xl p-4 mb-6"> |
|
|
<h3 class="font-semibold mb-3">Exercices de concentration</h3> |
|
|
|
|
|
<div class="space-y-3"> |
|
|
<div class="flex items-center justify-between p-2 hover:bg-gray-50 rounded-lg transition duration-300"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="bg-indigo-100 p-2 rounded-full"> |
|
|
<i class="fas fa-bullseye text-indigo-500"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Focus visuel</h4> |
|
|
<p class="text-xs text-gray-500">8 min • Niveau débutant</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="text-indigo-500"> |
|
|
<i class="fas fa-play"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center justify-between p-2 hover:bg-gray-50 rounded-lg transition duration-300"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="bg-purple-100 p-2 rounded-full"> |
|
|
<i class="fas fa-headphones text-purple-500"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Méditation sonore</h4> |
|
|
<p class="text-xs text-gray-500">12 min • Niveau intermédiaire</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="text-purple-500"> |
|
|
<i class="fas fa-play"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center justify-between p-2 hover:bg-gray-50 rounded-lg transition duration-300"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="bg-green-100 p-2 rounded-full"> |
|
|
<i class="fas fa-mountain text-green-500"></i> |
|
|
</div> |
|
|
<div> |
|
|
|
|
|
</html> |
