Hugging Face's logo

Spaces:
Kesif
/
measdouspace
Running

App Files Community
measdouspace / index.html
Kesif's picture
Kesif
Add 2 files
ce1f269 verified
raw
history blame contribute delete
65.8 kB
 <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CASHRULER - Gestion Financière</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">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#4F46E5',
secondary: '#10B981',
danger: '#EF4444',
warning: '#F59E0B',
dark: '#1E293B',
light: '#F8FAFC',
}
}
}
}
</script>
<style>
.progress-bar {
height: 8px;
border-radius: 4px;
background-color: #E5E7EB;
overflow: hidden;
}
.progress-fill {
height: 100%;
border-radius: 4px;
transition: width 0.3s ease;
}
.chart-container {
position: relative;
height: 300px;
width: 100%;
}
.floating-btn {
position: fixed;
bottom: 2rem;
right: 2rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.slide-in {
animation: slideIn 0.3s forwards;
}
.slide-out {
animation: slideOut 0.3s forwards;
}
@keyframes slideIn {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
@keyframes slideOut {
from { transform: translateX(0); }
to { transform: translateX(100%); }
}
.fade-in {
animation: fadeIn 0.3s forwards;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.category-chip {
transition: all 0.2s ease;
}
.category-chip:hover {
transform: scale(1.05);
}
.input-highlight {
transition: all 0.2s ease;
}
.input-highlight:focus {
border-color: #4F46E5;
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
}
</style>
</head>
<body class="bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-100">
<!-- Authentification -->
<div id="auth-screen" class="fixed inset-0 bg-white dark:bg-gray-900 z-50 flex flex-col items-center justify-center p-6">
<div class="text-center mb-8">
<h1 class="text-3xl font-bold text-primary mb-2">CASHRULER</h1>
<p class="text-gray-600 dark:text-gray-300">Prenez le contrôle de vos finances</p>
</div>
<div class="w-full max-w-sm">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
<h2 class="text-xl font-semibold mb-6 text-center">Authentification</h2>
<div class="flex justify-center mb-6">
<div class="w-24 h-24 rounded-full bg-primary bg-opacity-10 flex items-center justify-center">
<i class="fas fa-lock text-primary text-3xl"></i>
</div>
</div>
<div class="mb-4">
<p class="text-sm text-gray-600 dark:text-gray-300 mb-2 text-center">Entrez votre code PIN à 4 chiffres</p>
<div class="flex justify-center space-x-3 mb-4">
<div class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 flex items-center justify-center pin-digit" data-index="0"></div>
<div class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 flex items-center justify-center pin-digit" data-index="1"></div>
<div class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 flex items-center justify-center pin-digit" data-index="2"></div>
<div class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 flex items-center justify-center pin-digit" data-index="3"></div>
</div>
</div>
<div class="grid grid-cols-3 gap-3">
<button class="number-btn bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-full h-12 flex items-center justify-center font-medium text-lg" data-value="1">1</button>
<button class="number-btn bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-full h-12 flex items-center justify-center font-medium text-lg" data-value="2">2</button>
<button class="number-btn bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-full h-12 flex items-center justify-center font-medium text-lg" data-value="3">3</button>
<button class="number-btn bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-full h-12 flex items-center justify-center font-medium text-lg" data-value="4">4</button>
<button class="number-btn bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-full h-12 flex items-center justify-center font-medium text-lg" data-value="5">5</button>
<button class="number-btn bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-full h-12 flex items-center justify-center font-medium text-lg" data-value="6">6</button>
<button class="number-btn bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-full h-12 flex items-center justify-center font-medium text-lg" data-value="7">7</button>
<button class="number-btn bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-full h-12 flex items-center justify-center font-medium text-lg" data-value="8">8</button>
<button class="number-btn bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-full h-12 flex items-center justify-center font-medium text-lg" data-value="9">9</button>
<button class="bg-transparent rounded-full h-12 flex items-center justify-center"></button>
<button class="number-btn bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-full h-12 flex items-center justify-center font-medium text-lg" data-value="0">0</button>
<button class="delete-btn bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-full h-12 flex items-center justify-center">
<i class="fas fa-backspace text-lg"></i>
</button>
</div>
<div class="mt-6 text-center">
<button id="fingerprint-btn" class="text-primary flex items-center justify-center w-full py-2">
<i class="fas fa-fingerprint mr-2"></i>
Utiliser l'empreinte digitale
</button>
</div>
</div>
</div>
</div>
<!-- Interface principale -->
<div id="main-app" class="hidden">
<!-- Header -->
<header class="bg-primary text-white p-4 shadow-md">
<div class="container mx-auto flex justify-between items-center">
<div>
<h1 class="text-xl font-bold">CASHRULER</h1>
<p class="text-xs opacity-80" id="welcome-message">Bonjour, John</p>
</div>
<div class="flex items-center space-x-4">
<button id="theme-toggle" class="p-2 rounded-full hover:bg-white hover:bg-opacity-10">
<i class="fas fa-moon"></i>
</button>
<button id="settings-btn" class="p-2 rounded-full hover:bg-white hover:bg-opacity-10">
<i class="fas fa-cog"></i>
</button>
</div>
</div>
</header>
<!-- Navigation -->
<nav class="bg-white dark:bg-gray-800 shadow-sm">
<div class="container mx-auto flex overflow-x-auto">
<button class="nav-btn active px-4 py-3 font-medium text-sm whitespace-nowrap" data-target="dashboard">
<i class="fas fa-home mr-2"></i> Tableau de bord
</button>
<button class="nav-btn px-4 py-3 font-medium text-sm whitespace-nowrap" data-target="transactions">
<i class="fas fa-exchange-alt mr-2"></i> Transactions
</button>
<button class="nav-btn px-4 py-3 font-medium text-sm whitespace-nowrap" data-target="savings">
<i class="fas fa-piggy-bank mr-2"></i> Épargne
</button>
<button class="nav-btn px-4 py-3 font-medium text-sm whitespace-nowrap" data-target="stats">
<i class="fas fa-chart-bar mr-2"></i> Statistiques
</button>
</div>
</nav>
<!-- Contenu principal -->
<main class="container mx-auto p-4 pb-20">
<!-- Tableau de bord -->
<div id="dashboard" class="content-section">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 mb-4">
<div class="flex justify-between items-center mb-4">
<h2 class="font-bold text-lg">Votre solde</h2>
<span class="text-xl font-bold text-primary">2 450,00 €</span>
</div>
<div class="grid grid-cols-2 gap-4 mb-4">
<div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3">
<p class="text-sm text-gray-600 dark:text-gray-300">Revenus</p>
<p class="font-bold text-green-600">3 200,00 €</p>
</div>
<div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3">
<p class="text-sm text-gray-600 dark:text-gray-300">Dépenses</p>
<p class="font-bold text-red-600">750,00 €</p>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 mb-4">
<h2 class="font-bold text-lg mb-4">Défis du jour</h2>
<div class="space-y-3">
<div class="flex items-center justify-between p-3 bg-green-50 dark:bg-gray-700 rounded-lg border border-green-200 dark:border-green-800">
<div>
<p class="font-medium">Alimentation</p>
<p class="text-sm text-gray-600 dark:text-gray-300">20,00 € / 30,00 €</p>
</div>
<div class="w-24">
<div class="progress-bar">
<div class="progress-fill bg-green-500" style="width: 66%"></div>
</div>
</div>
</div>
<div class="flex items-center justify-between p-3 bg-red-50 dark:bg-gray-700 rounded-lg border border-red-200 dark:border-red-800">
<div>
<p class="font-medium">Shopping</p>
<p class="text-sm text-gray-600 dark:text-gray-300">120,00 € / 100,00 €</p>
<p class="text-xs text-red-500">Dépassement de 20,00 €</p>
</div>
<div class="w-24">
<div class="progress-bar">
<div class="progress-fill bg-red-500" style="width: 120%"></div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 mb-4">
<h2 class="font-bold text-lg mb-4">Projets d'épargne</h2>
<div class="space-y-4">
<div class="border rounded-lg p-3">
<div class="flex justify-between items-center mb-2">
<h3 class="font-medium">Nouveau téléphone</h3>
<span class="text-sm">800,00 €</span>
</div>
<div class="progress-bar mb-2">
<div class="progress-fill bg-primary" style="width: 45%"></div>
</div>
<div class="flex justify-between text-xs text-gray-600 dark:text-gray-300">
<span>360,00 € épargnés</span>
<span>440,00 € restants</span>
</div>
</div>
<div class="border rounded-lg p-3">
<div class="flex justify-between items-center mb-2">
<h3 class="font-medium">Vacances</h3>
<span class="text-sm">1 500,00 €</span>
</div>
<div class="progress-bar mb-2">
<div class="progress-fill bg-secondary" style="width: 20%"></div>
</div>
<div class="flex justify-between text-xs text-gray-600 dark:text-gray-300">
<span>300,00 € épargnés</span>
<span>1 200,00 € restants</span>
</div>
</div>
</div>
<button class="w-full mt-4 py-2 text-primary font-medium rounded-lg border border-primary hover:bg-primary hover:text-white transition-colors">
Voir tous les projets
</button>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
<h2 class="font-bold text-lg mb-4">Dépenses récentes</h2>
<div class="space-y-3">
<div class="flex items-center justify-between p-2 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center mr-3">
<i class="fas fa-shopping-bag text-red-500"></i>
</div>
<div>
<p class="font-medium">Courses</p>
<p class="text-xs text-gray-600 dark:text-gray-300">Aujourd'hui, 12:30</p>
</div>
</div>
<span class="font-medium text-red-500">-45,20 €</span>
</div>
<div class="flex items-center justify-between p-2 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mr-3">
<i class="fas fa-bus text-blue-500"></i>
</div>
<div>
<p class="font-medium">Transport</p>
<p class="text-xs text-gray-600 dark:text-gray-300">Aujourd'hui, 08:15</p>
</div>
</div>
<span class="font-medium text-red-500">-2,50 €</span>
</div>
<div class="flex items-center justify-between p-2 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center mr-3">
<i class="fas fa-wallet text-green-500"></i>
</div>
<div>
<p class="font-medium">Salaire</p>
<p class="text-xs text-gray-600 dark:text-gray-300">Hier, 09:00</p>
</div>
</div>
<span class="font-medium text-green-500">+2 300,00 €</span>
</div>
</div>
<button class="w-full mt-4 py-2 text-primary font-medium rounded-lg border border-primary hover:bg-primary hover:text-white transition-colors">
Voir toutes les transactions
</button>
</div>
</div>
<!-- Transactions -->
<div id="transactions" class="content-section hidden">
<div class="flex justify-between items-center mb-4">
<h2 class="font-bold text-lg">Transactions</h2>
<div class="flex space-x-2">
<button class="px-3 py-1 text-sm rounded-full bg-gray-100 dark:bg-gray-700">Tout</button>
<button class="px-3 py-1 text-sm rounded-full">Dépenses</button>
<button class="px-3 py-1 text-sm rounded-full">Revenus</button>
</div>
</div>
<div class="mb-6">
<div class="flex justify-between items-center mb-2">
<h3 class="font-medium text-gray-600 dark:text-gray-300">Aujourd'hui</h3>
<span class="text-sm font-medium text-red-500">-47,70 €</span>
</div>
<div class="space-y-2">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-3">
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center mr-3">
<i class="fas fa-shopping-bag text-red-500"></i>
</div>
<div>
<p class="font-medium">Courses</p>
<p class="text-xs text-gray-600 dark:text-gray-300">Supermarché</p>
</div>
</div>
<span class="font-medium text-red-500">-45,20 €</span>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-3">
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mr-3">
<i class="fas fa-bus text-blue-500"></i>
</div>
<div>
<p class="font-medium">Transport</p>
<p class="text-xs text-gray-600 dark:text-gray-300">Métro</p>
</div>
</div>
<span class="font-medium text-red-500">-2,50 €</span>
</div>
</div>
</div>
</div>
<div class="mb-6">
<div class="flex justify-between items-center mb-2">
<h3 class="font-medium text-gray-600 dark:text-gray-300">Hier</h3>
<span class="text-sm font-medium text-green-500">+2 300,00 €</span>
</div>
<div class="space-y-2">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-3">
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center mr-3">
<i class="fas fa-wallet text-green-500"></i>
</div>
<div>
<p class="font-medium">Salaire</p>
<p class="text-xs text-gray-600 dark:text-gray-300">Entreprise XYZ</p>
</div>
</div>
<span class="font-medium text-green-500">+2 300,00 €</span>
</div>
</div>
</div>
</div>
<div class="mb-6">
<div class="flex justify-between items-center mb-2">
<h3 class="font-medium text-gray-600 dark:text-gray-300">23 juin 2023</h3>
<span class="text-sm font-medium text-red-500">-86,45 €</span>
</div>
<div class="space-y-2">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-3">
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center mr-3">
<i class="fas fa-tshirt text-purple-500"></i>
</div>
<div>
<p class="font-medium">Vêtements</p>
<p class="text-xs text-gray-600 dark:text-gray-300">Boutique ABC</p>
</div>
</div>
<span class="font-medium text-red-500">-65,00 €</span>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-3">
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-yellow-100 dark:bg-yellow-900 flex items-center justify-center mr-3">
<i class="fas fa-utensils text-yellow-500"></i>
</div>
<div>
<p class="font-medium">Restaurant</p>
<p class="text-xs text-gray-600 dark:text-gray-300">Le Bon Repas</p>
</div>
</div>
<span class="font-medium text-red-500">-21,45 €</span>
</div>
</div>
</div>
</div>
</div>
<!-- Épargne -->
<div id="savings" class="content-section hidden">
<div class="flex justify-between items-center mb-6">
<h2 class="font-bold text-lg">Projets d'épargne</h2>
<button id="add-savings-btn" class="bg-primary text-white px-4 py-2 rounded-lg flex items-center">
<i class="fas fa-plus mr-2"></i> Nouveau projet
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
<div class="flex justify-between items-center mb-3">
<h3 class="font-bold">Nouveau téléphone</h3>
<span class="text-sm bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 px-2 py-1 rounded">En cours</span>
</div>
<div class="flex justify-between items-center mb-2">
<span class="text-sm text-gray-600 dark:text-gray-300">Objectif</span>
<span class="font-medium">800,00 €</span>
</div>
<div class="progress-bar mb-2">
<div class="progress-fill bg-primary" style="width: 45%"></div>
</div>
<div class="flex justify-between text-sm mb-4">
<span class="text-gray-600 dark:text-gray-300">360,00 € épargnés</span>
<span class="text-gray-600 dark:text-gray-300">440,00 € restants</span>
</div>
<div class="flex justify-between items-center text-sm">
<span class="text-gray-600 dark:text-gray-300">Échéance: 15/12/2023</span>
<button class="text-primary font-medium">Ajouter des fonds</button>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
<div class="flex justify-between items-center mb-3">
<h3 class="font-bold">Vacances</h3>
<span class="text-sm bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 px-2 py-1 rounded">En cours</span>
</div>
<div class="flex justify-between items-center mb-2">
<span class="text-sm text-gray-600 dark:text-gray-300">Objectif</span>
<span class="font-medium">1 500,00 €</span>
</div>
<div class="progress-bar mb-2">
<div class="progress-fill bg-secondary" style="width: 20%"></div>
</div>
<div class="flex justify-between text-sm mb-4">
<span class="text-gray-600 dark:text-gray-300">300,00 € épargnés</span>
<span class="text-gray-600 dark:text-gray-300">1 200,00 € restants</span>
</div>
<div class="flex justify-between items-center text-sm">
<span class="text-gray-600 dark:text-gray-300">Échéance: 01/06/2024</span>
<button class="text-primary font-medium">Ajouter des fonds</button>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
<div class="flex justify-between items-center mb-3">
<h3 class="font-bold">Voiture</h3>
<span class="text-sm bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 px-2 py-1 rounded">Terminé</span>
</div>
<div class="flex justify-between items-center mb-2">
<span class="text-sm text-gray-600 dark:text-gray-300">Objectif</span>
<span class="font-medium">5 000,00 €</span>
</div>
<div class="progress-bar mb-2">
<div class="progress-fill bg-green-500" style="width: 100%"></div>
</div>
<div class="flex justify-between text-sm mb-4">
<span class="text-gray-600 dark:text-gray-300">5 000,00 € épargnés</span>
<span class="text-gray-600 dark:text-gray-300">0,00 € restants</span>
</div>
<div class="flex justify-between items-center text-sm">
<span class="text-gray-600 dark:text-gray-300">Terminé le: 15/05/2023</span>
<button class="text-primary font-medium">Détails</button>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
<h2 class="font-bold text-lg mb-4">Plan d'épargne recommandé</h2>
<div class="space-y-4">
<div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
<div>
<p class="font-medium">Nouveau téléphone</p>
<p class="text-sm text-gray-600 dark:text-gray-300">440,00 € restants sur 5 mois</p>
</div>
<div>
<p class="font-medium text-primary">88,00 €/mois</p>
</div>
</div>
<div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
<div>
<p class="font-medium">Vacances</p>
<p class="text-sm text-gray-600 dark:text-gray-300">1 200,00 € restants sur 11 mois</p>
</div>
<div>
<p class="font-medium text-primary">109,09 €/mois</p>
</div>
</div>
</div>
</div>
</div>
<!-- Statistiques -->
<div id="stats" class="content-section hidden">
<div class="flex justify-between items-center mb-6">
<h2 class="font-bold text-lg">Statistiques</h2>
<div class="flex items-center">
<select class="bg-gray-100 dark:bg-gray-700 border-0 rounded-lg px-3 py-2 text-sm">
<option>Ce mois-ci</option>
<option>Le mois dernier</option>
<option>3 derniers mois</option>
<option>Cette année</option>
</select>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 mb-6">
<h3 class="font-medium mb-4">Répartition des dépenses</h3>
<div class="chart-container">
<!-- Ce serait un graphique en réalité -->
<div class="flex items-end h-48 space-x-2">
<div class="flex-1 bg-blue-500 rounded-t" style="height: 70%"></div>
<div class="flex-1 bg-green-500 rounded-t" style="height: 40%"></div>
<div class="flex-1 bg-yellow-500 rounded-t" style="height: 30%"></div>
<div class="flex-1 bg-red-500 rounded-t" style="height: 60%"></div>
<div class="flex-1 bg-purple-500 rounded-t" style="height: 25%"></div>
<div class="flex-1 bg-pink-500 rounded-t" style="height: 50%"></div>
</div>
<div class="flex justify-between mt-2 text-xs text-gray-600 dark:text-gray-300">
<span>Alim.</span>
<span>Logt.</span>
<span>Trans.</span>
<span>Loisirs</span>
<span>Santé</span>
<span>Autres</span>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
<h3 class="font-medium mb-4">Dépenses les plus fréquentes</h3>
<div class="space-y-3">
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mr-3">
<i class="fas fa-bus text-blue-500 text-sm"></i>
</div>
<div class="flex-1">
<p class="text-sm">Transport</p>
</div>
<div>
<p class="text-sm font-medium">22 fois</p>
</div>
</div>
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-yellow-100 dark:bg-yellow-900 flex items-center justify-center mr-3">
<i class="fas fa-coffee text-yellow-500 text-sm"></i>
</div>
<div class="flex-1">
<p class="text-sm">Café</p>
</div>
<div>
<p class="text-sm font-medium">18 fois</p>
</div>
</div>
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center mr-3">
<i class="fas fa-shopping-bag text-red-500 text-sm"></i>
</div>
<div class="flex-1">
<p class="text-sm">Courses</p>
</div>
<div>
<p class="text-sm font-medium">12 fois</p>
</div>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
<h3 class="font-medium mb-4">Dépenses les plus élevées</h3>
<div class="space-y-3">
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center mr-3">
<i class="fas fa-laptop text-purple-500 text-sm"></i>
</div>
<div class="flex-1">
<p class="text-sm">Ordinateur</p>
</div>
<div>
<p class="text-sm font-medium text-red-500">-850,00 €</p>
</div>
</div>
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center mr-3">
<i class="fas fa-plane text-green-500 text-sm"></i>
</div>
<div class="flex-1">
<p class="text-sm">Voyage</p>
</div>
<div>
<p class="text-sm font-medium text-red-500">-600,00 €</p>
</div>
</div>
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-pink-100 dark:bg-pink-900 flex items-center justify-center mr-3">
<i class="fas fa-mobile-alt text-pink-500 text-sm"></i>
</div>
<div class="flex-1">
<p class="text-sm">Téléphone</p>
</div>
<div>
<p class="text-sm font-medium text-red-500">-450,00 €</p>
</div>
</div>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
<h3 class="font-medium mb-4">Suivi des plans d'économie</h3>
<div class="space-y-4">
<div>
<div class="flex justify-between mb-1">
<span class="text-sm">Alimentation</span>
<span class="text-sm">75% respecté</span>
</div>
<div class="progress-bar">
<div class="progress-fill bg-green-500" style="width: 75%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span class="text-sm">Shopping</span>
<span class="text-sm">45% respecté</span>
</div>
<div class="progress-bar">
<div class="progress-fill bg-yellow-500" style="width: 45%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span class="text-sm">Loisirs</span>
<span class="text-sm">90% respecté</span>
</div>
<div class="progress-bar">
<div class="progress-fill bg-green-500" style="width: 90%"></div>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Menu flottant -->
<div class="floating-btn">
<button id="add-transaction-btn" class="w-14 h-14 rounded-full bg-primary text-white flex items-center justify-center text-2xl">
<i class="fas fa-plus"></i>
</button>
</div>
<!-- Overlay d'ajout de transaction -->
<div id="transaction-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-md max-h-[90vh] overflow-y-auto">
<div class="p-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
<h3 class="font-bold text-lg">Nouvelle transaction</h3>
<button id="close-transaction-btn" class="text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-100">
<i class="fas fa-times"></i>
</button>
</div>
<div class="p-4">
<div class="flex space-x-2 mb-6">
<button class="transaction-type-btn flex-1 py-2 rounded-lg border-2 border-primary font-medium bg-primary text-white" data-type="expense">
Dépense
</button>
<button class="transaction-type-btn flex-1 py-2 rounded-lg border-2 border-gray-300 dark:border-gray-600 font-medium" data-type="income">
Revenu
</button>
</div>
<div class="mb-4">
<label class="block text-sm font-medium mb-1">Titre</label>
<input type="text" class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 input-highlight" placeholder="Ex: Courses, Salaire...">
</div>
<div class="mb-4">
<label class="block text-sm font-medium mb-1">Catégorie</label>
<div class="grid grid-cols-3 gap-2">
<button class="category-chip py-2 px-3 rounded-lg border border-gray-300 dark:border-gray-600 text-sm flex items-center justify-center">
<i class="fas fa-shopping-bag mr-1 text-red-500"></i> Courses
</button>
<button class="category-chip py-2 px-3 rounded-lg border border-gray-300 dark:border-gray-600 text-sm flex items-center justify-center">
<i class="fas fa-tshirt mr-1 text-purple-500"></i> Vêtements
</button>
<button class="category-chip py-2 px-3 rounded-lg border border-gray-300 dark:border-gray-600 text-sm flex items-center justify-center">
<i class="fas fa-bus mr-1 text-blue-500"></i> Transport
</button>
<button class="category-chip py-2 px-3 rounded-lg border border-gray-300 dark:border-gray-600 text-sm flex items-center justify-center">
<i class="fas fa-utensils mr-1 text-yellow-500"></i> Restaurant
</button>
<button class="category-chip py-2 px-3 rounded-lg border border-gray-300 dark:border-gray-600 text-sm flex items-center justify-center">
<i class="fas fa-home mr-1 text-green-500"></i> Logement
</button>
<button class="category-chip py-2 px-3 rounded-lg border border-gray-300 dark:border-gray-600 text-sm flex items-center justify-center">
<i class="fas fa-plus-circle mr-1 text-gray-500"></i> Autre
</button>
</div>
</div>
<div class="mb-4">
<label class="block text-sm font-medium mb-1">Montant</label>
<div class="relative">
<span class="absolute left-3 top-1/2 transform -translate-y-1/2">€</span>
<input type="number" class="w-full pl-8 pr-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 input-highlight" placeholder="0,00">
</div>
</div>
<div class="mb-4">
<label class="block text-sm font-medium mb-1">Date</label>
<input type="date" class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 input-highlight">
</div>
<div class="mb-4">
<label class="block text-sm font-medium mb-1">Notes (optionnel)</label>
<textarea class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 input-highlight" rows="2" placeholder="Ajoutez des détails..."></textarea>
</div>
<div class="flex space-x-3">
<button class="flex-1 py-2 rounded-lg border border-gray-300 dark:border-gray-600 font-medium">
Annuler
</button>
<button class="flex-1 py-2 rounded-lg bg-primary text-white font-medium">
Enregistrer
</button>
</div>
</div>
</div>
</div>
<!-- Overlay d'ajout de projet d'épargne -->
<div id="savings-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-md max-h-[90vh] overflow-y-auto">
<div class="p-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
<h3 class="font-bold text-lg">Nouveau projet d'épargne</h3>
<button id="close-savings-btn" class="text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-100">
<i class="fas fa-times"></i>
</button>
</div>
<div class="p-4">
<div class="mb-4">
<label class="block text-sm font-medium mb-1">Nom du projet</label>
<input type="text" class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 input-highlight" placeholder="Ex: Nouveau téléphone, Vacances...">
</div>
<div class="mb-4">
<label class="block text-sm font-medium mb-1">Montant cible</label>
<div class="relative">
<span class="absolute left-3 top-1/2 transform -translate-y-1/2">€</span>
<input type="number" class="w-full pl-8 pr-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 input-highlight" placeholder="0,00">
</div>
</div>
<div class="mb-4">
<label class="block text-sm font-medium mb-1">Date cible</label>
<input type="date" class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 input-highlight">
</div>
<div class="mb-6">
<label class="block text-sm font-medium mb-1">Description (optionnel)</label>
<textarea class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 input-highlight" rows="2" placeholder="Décrivez votre projet..."></textarea>
</div>
<div class="bg-blue-50 dark:bg-blue-900 rounded-lg p-3 mb-6">
<div class="flex items-start">
<i class="fas fa-info-circle text-blue-500 mt-1 mr-2"></i>
<p class="text-sm text-blue-800 dark:text-blue-200">
En fonction de votre date cible, CASHRULER calculera automatiquement un plan d'épargne hebdomadaire ou mensuel pour atteindre votre objectif.
</p>
</div>
</div>
<div class="flex space-x-3">
<button class="flex-1 py-2 rounded-lg border border-gray-300 dark:border-gray-600 font-medium">
Annuler
</button>
<button class="flex-1 py-2 rounded-lg bg-primary text-white font-medium">
Créer le projet
</button>
</div>
</div>
</div>
</div>
<!-- Overlay de paramètres -->
<div id="settings-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-md max-h-[90vh] overflow-y-auto">
<div class="p-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
<h3 class="font-bold text-lg">Paramètres</h3>
<button id="close-settings-btn" class="text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-100">
<i class="fas fa-times"></i>
</button>
</div>
<div class="p-4">
<div class="mb-6">
<h4 class="font-medium mb-3">Compte</h4>
<div class="space-y-3">
<button class="w-full text-left p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 flex items-center justify-between">
<span>Modifier le code PIN</span>
<i class="fas fa-chevron-right text-gray-400"></i>
</button>
<button class="w-full text-left p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 flex items-center justify-between">
<span>Sauvegarde en ligne</span>
<div class="flex items-center">
<span class="text-sm text-gray-500 dark:text-gray-300 mr-2">Non connecté</span>
<i class="fas fa-chevron-right text-gray-400"></i>
</div>
</button>
</div>
</div>
<div class="mb-6">
<h4 class="font-medium mb-3">Préférences</h4>
<div class="space-y-3">
<div class="flex items-center justify-between p-3 rounded-lg border border-gray-200 dark:border-gray-700">
<span>Thème sombre</span>
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer" id="dark-mode-toggle">
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary"></div>
</label>
</div>
<div class="flex items-center justify-between p-3 rounded-lg border border-gray-200 dark:border-gray-700">
<span>Devise</span>
<div class="flex items-center">
<span class="mr-2">€ (EUR)</span>
<i class="fas fa-chevron-right text-gray-400"></i>
</div>
</div>
<div class="flex items-center justify-between p-3 rounded-lg border border-gray-200 dark:border-gray-700">
<span>Notifications</span>
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer" checked>
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary"></div>
</label>
</div>
</div>
</div>
<div class="mb-6">
<h4 class="font-medium mb-3">Aide & Support</h4>
<div class="space-y-3">
<button class="w-full text-left p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 flex items-center justify-between">
<span>Centre d'aide</span>
<i class="fas fa-chevron-right text-gray-400"></i>
</button>
<button class="w-full text-left p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 flex items-center justify-between">
<span>Nous contacter</span>
<i class="fas fa-chevron-right text-gray-400"></i>
</button>
<button class="w-full text-left p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 flex items-center justify-between">
<span>Conditions d'utilisation</span>
<i class="fas fa-chevron-right text-gray-400"></i>
</button>
</div>
</div>
<div>
<button class="w-full py-3 rounded-lg bg-red-50 dark:bg-red-900 text-red-500 dark:text-red-300 font-medium flex items-center justify-center">
<i class="fas fa-sign-out-alt mr-2"></i>
Déconnexion
</button>
</div>
</div>
</div>
</div>
</div>
<script>
// Gestion de l'authentification
document.addEventListener('DOMContentLoaded', function() {
const pinDigits = document.querySelectorAll('.pin-digit');
const numberBtns = document.querySelectorAll('.number-btn');
const deleteBtn = document.querySelector('.delete-btn');
const fingerprintBtn = document.getElementById('fingerprint-btn');
const authScreen = document.getElementById('auth-screen');
const mainApp = document.getElementById('main-app');
let pinCode = [];
const correctPin = '1234'; // Code PIN par défaut
// Saisie du code PIN
numberBtns.forEach(btn => {
btn.addEventListener('click', function() {
if (pinCode.length < 4) {
const value = this.getAttribute('data-value');
pinCode.push(value);
updatePinDisplay();
if (pinCode.length === 4) {
checkPinCode();
}
}
});
});
// Suppression du code PIN
deleteBtn.addEventListener('click', function() {
if (pinCode.length > 0) {
pinCode.pop();
updatePinDisplay();
}
});
// Authentification par empreinte digitale
fingerprintBtn.addEventListener('click', function() {
// Simulation d'authentification réussie
setTimeout(() => {
authScreen.classList.add('hidden');
mainApp.classList.remove('hidden');
}, 500);
});
// Mise à jour de l'affichage du code PIN
function updatePinDisplay() {
pinDigits.forEach((digit, index) => {
if (index < pinCode.length) {
digit.innerHTML = '•';
} else {
digit.innerHTML = '';
}
});
}
// Vérification du code PIN
function checkPinCode() {
if (pinCode.join('') === correctPin) {
authScreen.classList.add('hidden');
mainApp.classList.remove('hidden');
} else {
pinCode = [];
updatePinDisplay();
alert('Code PIN incorrect. Veuillez réessayer.');
}
}
// Navigation
const navBtns = document.querySelectorAll('.nav-btn');
const contentSections = document.querySelectorAll('.content-section');
navBtns.forEach(btn => {
btn.addEventListener('click', function() {
const target = this.getAttribute('data-target');
// Mettre à jour l'état actif du bouton
navBtns.forEach(navBtn => {
navBtn.classList.remove('active');
navBtn.classList.add('text-gray-600', 'dark:text-gray-300');
});
this.classList.add('active');
this.classList.remove('text-gray-600', 'dark:text-gray-300');
// Afficher la section cible
contentSections.forEach(section => {
section.classList.add('hidden');
});
document.getElementById(target).classList.remove('hidden');
});
});
// Gestion du thème sombre
const themeToggle = document.getElementById('theme-toggle');
const darkModeToggle = document.getElementById('dark-mode-toggle');
const html = document.documentElement;
themeToggle.addEventListener('click', function() {
html.classList.toggle('dark');
localStorage.setItem('darkMode', html.classList.contains('dark'));
if (html.classList.contains('dark')) {
themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
} else {
themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
}
});
darkModeToggle.addEventListener('change', function() {
html.classList.toggle('dark');
localStorage.setItem('darkMode', html.classList.contains('dark'));
if (html.classList.contains('dark')) {
themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
} else {
themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
}
});
// Vérifier le mode sombre au chargement
if (localStorage.getItem('darkMode') === 'true') {
html.classList.add('dark');
themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
darkModeToggle.checked = true;
}
// Gestion des overlays
const addTransactionBtn = document.getElementById('add-transaction-btn');
const transactionOverlay = document.getElementById('transaction-overlay');
const closeTransactionBtn = document.getElementById('close-transaction-btn');
const addSavingsBtn = document.getElementById('add-savings-btn');
const savingsOverlay = document.getElementById('savings-overlay');
const closeSavingsBtn = document.getElementById('close-savings-btn');
const settingsBtn = document.getElementById('settings-btn');
const settingsOverlay = document.getElementById('settings-overlay');
const closeSettingsBtn = document.getElementById('close-settings-btn');
// Transaction overlay
addTransactionBtn.addEventListener('click', function() {
transactionOverlay.classList.remove('hidden');
});
closeTransactionBtn.addEventListener('click', function() {
transactionOverlay.classList.add('hidden');
});
// Savings overlay
addSavingsBtn.addEventListener('click', function() {
savingsOverlay.classList.remove('hidden');
});
closeSavingsBtn.addEventListener('click', function() {
savingsOverlay.classList.add('hidden');
});
// Settings overlay
settingsBtn.addEventListener('click', function() {
settingsOverlay.classList.remove('hidden');
});
closeSettingsBtn.addEventListener('click', function() {
settingsOverlay.classList.add('hidden');
});
// Gestion du type de transaction
const transactionTypeBtns = document.querySelectorAll('.transaction-type-btn');
transactionTypeBtns.forEach(btn => {
btn.addEventListener('click', function() {
const type = this.getAttribute('data-type');
transactionTypeBtns.forEach(tBtn => {
tBtn.classList.remove('border-primary', 'bg-primary', 'text-white');
tBtn.classList.add('border-gray-300', 'dark:border-gray-600');
});
this.classList.add('border-primary', 'bg-primary', 'text-white');
this.classList.remove('border-gray-300', 'dark:border-gray-600');
});
});
// Message de bienvenue personnalisé
const welcomeMessage = document.getElementById('welcome-message');
const hours = new Date().getHours();
if (hours < 12) {
welcomeMessage.textContent = 'Bonjour, John';
} else if (hours < 18) {
welcomeMessage.textContent = 'Bon après-midi, John';
} else {
welcomeMessage.textContent = 'Bonsoir, John';
}
});
</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=Kesif/measdouspace" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>