|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>CASHRULER - Gestion de Budget</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Roboto:wght@400;500&display=swap" rel="stylesheet"> |
|
|
<style> |
|
|
.phone-frame { |
|
|
width: 220px; |
|
|
height: 420px; |
|
|
border-radius: 20px; |
|
|
background-color: #333; |
|
|
position: relative; |
|
|
box-shadow: 0 10px 25px rgba(0,0,0,0.2); |
|
|
} |
|
|
.phone-screen { |
|
|
width: 210px; |
|
|
height: 410px; |
|
|
border-radius: 15px; |
|
|
background-color: #f5f5f5; |
|
|
position: absolute; |
|
|
top: 5px; |
|
|
left: 5px; |
|
|
overflow: hidden; |
|
|
} |
|
|
.progress-circle { |
|
|
position: relative; |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
} |
|
|
.progress-circle svg { |
|
|
transform: rotate(-90deg); |
|
|
} |
|
|
.progress-circle-bg { |
|
|
stroke: #eee; |
|
|
stroke-width: 5; |
|
|
fill: none; |
|
|
} |
|
|
.progress-circle-fill { |
|
|
stroke: #2ecc71; |
|
|
stroke-width: 5; |
|
|
fill: none; |
|
|
stroke-linecap: round; |
|
|
stroke-dasharray: 100; |
|
|
stroke-dashoffset: calc(100 - var(--percentage)); |
|
|
} |
|
|
.category-dot { |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
border-radius: 50%; |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
margin-right: 10px; |
|
|
} |
|
|
.bottom-nav { |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 50px; |
|
|
background: white; |
|
|
display: flex; |
|
|
justify-content: space-around; |
|
|
align-items: center; |
|
|
border-top: 1px solid #eee; |
|
|
} |
|
|
.nav-dot { |
|
|
width: 8px; |
|
|
height: 8px; |
|
|
border-radius: 50%; |
|
|
background: #999; |
|
|
} |
|
|
.nav-dot.active { |
|
|
background: #2ecc71; |
|
|
transform: scale(1.3); |
|
|
} |
|
|
.pie-chart { |
|
|
width: 140px; |
|
|
height: 140px; |
|
|
border-radius: 50%; |
|
|
background: conic-gradient( |
|
|
#e74c3c 0% 35%, |
|
|
#3498db 35% 60%, |
|
|
#f1c40f 60% 80%, |
|
|
#2ecc71 80% 100% |
|
|
); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 font-sans min-h-screen"> |
|
|
<div class="container mx-auto px-4 py-8"> |
|
|
<h1 class="text-2xl font-bold text-center text-gray-800 mb-8">CASHRULER - Maquettes UI</h1> |
|
|
|
|
|
<div class="flex flex-wrap justify-center gap-8 mb-12"> |
|
|
|
|
|
<div class="phone-frame"> |
|
|
<div class="phone-screen flex flex-col p-4"> |
|
|
<h2 class="text-center font-bold text-gray-800 mb-4">Dashboard</h2> |
|
|
|
|
|
|
|
|
<div class="bg-green-500 rounded-xl p-3 mb-4 shadow-md"> |
|
|
<p class="text-white text-sm text-center">Solde disponible</p> |
|
|
<p class="text-white text-xl font-bold text-center">125,000 FCFA</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex justify-between mb-4"> |
|
|
<button class="bg-blue-500 text-white text-sm py-2 px-4 rounded-lg w-[48%]"> |
|
|
+ Dépense |
|
|
</button> |
|
|
<button class="bg-green-600 text-white text-sm py-2 px-4 rounded-lg w-[48%]"> |
|
|
+ Revenu |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white border border-gray-200 rounded-lg p-3 mb-4"> |
|
|
<p class="text-gray-800 text-sm font-medium text-center">Défi Alimentation</p> |
|
|
<div class="w-full bg-gray-100 h-3 rounded-full mt-2 mb-1"> |
|
|
<div class="bg-green-500 h-3 rounded-full" style="width: 75%"></div> |
|
|
</div> |
|
|
<p class="text-gray-500 text-xs text-center">6,000 / 8,000 FCFA</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white border border-gray-200 rounded-lg p-3 mb-4"> |
|
|
<p class="text-gray-800 text-sm font-medium text-center">Projet: Nouvel ordinateur</p> |
|
|
<div class="flex items-center mt-3"> |
|
|
<div class="progress-circle mr-4"> |
|
|
<svg viewBox="0 0 40 40" class="w-full h-full"> |
|
|
<circle cx="20" cy="20" r="15" class="progress-circle-bg"></circle> |
|
|
<circle cx="20" cy="20" r="15" class="progress-circle-fill" style="--percentage: 45"></circle> |
|
|
</svg> |
|
|
<span class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-xs font-medium">45%</span> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<p class="text-gray-600 text-sm">225,000 FCFA</p> |
|
|
<p class="text-gray-600 text-xs">sur 500,000</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<p class="text-gray-800 text-sm font-medium mb-2">Récentes</p> |
|
|
<div class="space-y-2"> |
|
|
<div class="bg-white border border-gray-200 rounded-md p-2 flex items-center"> |
|
|
<div class="category-dot bg-red-500"></div> |
|
|
<span class="text-gray-800 text-sm flex-grow">Courses</span> |
|
|
<span class="text-red-500 text-sm">-4,500</span> |
|
|
</div> |
|
|
<div class="bg-white border border-gray-200 rounded-md p-2 flex items-center"> |
|
|
<div class="category-dot bg-blue-500"></div> |
|
|
<span class="text-gray-800 text-sm flex-grow">Transport</span> |
|
|
<span class="text-red-500 text-sm">-1,200</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bottom-nav"> |
|
|
<div class="nav-dot active"></div> |
|
|
<div class="nav-dot"></div> |
|
|
<div class="nav-dot"></div> |
|
|
<div class="nav-dot"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="phone-frame"> |
|
|
<div class="phone-screen flex flex-col p-4"> |
|
|
<h2 class="text-center font-bold text-gray-800 mb-4">Nouvelle Dépense</h2> |
|
|
|
|
|
<div class="bg-white border border-gray-200 rounded-xl p-3 flex-1"> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-500 text-sm mb-1">Titre</label> |
|
|
<div class="bg-gray-50 border border-gray-200 rounded-md p-2"> |
|
|
<p class="text-gray-800">Courses au supermarché</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-500 text-sm mb-1">Catégorie</label> |
|
|
<div class="bg-gray-50 border border-gray-200 rounded-md p-2 flex items-center"> |
|
|
<div class="category-dot bg-red-500"></div> |
|
|
<span class="text-gray-800">Alimentation</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-500 text-sm mb-1">Montant (FCFA)</label> |
|
|
<div class="bg-gray-50 border border-gray-200 rounded-md p-2"> |
|
|
<p class="text-gray-800 font-bold text-lg">4,500</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-500 text-sm mb-1">Date</label> |
|
|
<div class="bg-gray-50 border border-gray-200 rounded-md p-2"> |
|
|
<p class="text-gray-800">12 Avril 2025</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-500 text-sm mb-1">Note (optionnel)</label> |
|
|
<div class="bg-gray-50 border border-gray-200 rounded-md p-2 h-8"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<button class="bg-green-500 text-white py-2 px-6 rounded-full self-center mt-4"> |
|
|
Ajouter |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="phone-frame"> |
|
|
<div class="phone-screen flex flex-col p-4"> |
|
|
<h2 class="text-center font-bold text-gray-800 mb-4">Projet d'Épargne</h2> |
|
|
|
|
|
|
|
|
<div class="bg-blue-500 rounded-xl p-3 mb-4"> |
|
|
<p class="text-white font-bold text-center">Nouvel ordinateur</p> |
|
|
|
|
|
<div class="flex items-center justify-around mt-4"> |
|
|
|
|
|
<div class="relative"> |
|
|
<svg width="60" height="60" viewBox="0 0 60 60" class="transform -rotate-90"> |
|
|
<circle cx="30" cy="30" r="25" stroke="#ffffff40" stroke-width="5" fill="none"></circle> |
|
|
<circle cx="30" cy="30" r="25" stroke="#ffffff" stroke-width="5" fill="none" stroke-dasharray="157" stroke-dashoffset="86.35" stroke-linecap="round"></circle> |
|
|
</svg> |
|
|
<div class="absolute inset-0 flex flex-col items-center justify-center"> |
|
|
<span class="text-white font-bold">45%</span> |
|
|
<span class="text-white text-xs">complété</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="text-white text-center"> |
|
|
<p>225,000</p> |
|
|
<p>sur</p> |
|
|
<p class="font-bold">500,000</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white border border-gray-200 rounded-lg p-3 mb-4"> |
|
|
<p class="text-gray-800 text-sm font-medium text-center">Plan d'épargne suggéré</p> |
|
|
|
|
|
<div class="w-full bg-gray-100 h-4 rounded-full mt-3 mb-2"> |
|
|
<div class="bg-green-500 h-4 rounded-full" style="width: 45%"></div> |
|
|
</div> |
|
|
<p class="text-gray-800 text-xs text-center mb-2">45% du chemin</p> |
|
|
|
|
|
<p class="text-gray-500 text-xs mb-1">Pour atteindre votre objectif:</p> |
|
|
<p class="text-gray-800 text-xs font-medium">Économisez 27,500 FCFA/mois</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<p class="text-gray-800 text-sm font-medium mb-2">Contributions</p> |
|
|
<div class="space-y-2 mb-4"> |
|
|
<div class="bg-white border border-gray-200 rounded-md p-2 flex items-center"> |
|
|
<span class="text-gray-800 text-sm w-12">10 Avr</span> |
|
|
<span class="text-gray-800 text-sm flex-grow">Économies</span> |
|
|
<span class="text-green-500 text-sm">+25,000</span> |
|
|
</div> |
|
|
<div class="bg-white border border-gray-200 rounded-md p-2 flex items-center"> |
|
|
<span class="text-gray-800 text-sm w-12">26 Mar</span> |
|
|
<span class="text-gray-800 text-sm flex-grow">Bonus</span> |
|
|
<span class="text-green-500 text-sm">+50,000</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<button class="bg-green-500 text-white rounded-full w-10 h-10 flex items-center justify-center self-end"> |
|
|
<span class="text-xl">+</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6 max-w-4xl mx-auto"> |
|
|
<h2 class="text-lg font-bold text-gray-800 text-center mb-6">Écran Statistiques (aperçu)</h2> |
|
|
|
|
|
|
|
|
<div class="flex items-center justify-between bg-gray-50 border border-gray-200 rounded-lg px-4 py-2 mb-6"> |
|
|
<span class="text-gray-800">Avril 2025</span> |
|
|
<div class="flex space-x-3"> |
|
|
<div class="w-4 h-4 rounded-full bg-blue-500"></div> |
|
|
<div class="w-4 h-4 rounded-full bg-gray-50 border border-gray-200"></div> |
|
|
<div class="w-4 h-4 rounded-full bg-gray-50 border border-gray-200"></div> |
|
|
<div class="w-4 h-4 rounded-full bg-gray-50 border border-gray-200"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border border-gray-200 rounded-xl p-4"> |
|
|
<div class="flex flex-col md:flex-row items-center justify-around"> |
|
|
|
|
|
<div class="pie-chart mb-6 md:mb-0"></div> |
|
|
|
|
|
|
|
|
<div class="space-y-3"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-4 h-4 rounded-sm bg-red-500 mr-2"></div> |
|
|
<span class="text-gray-800 text-sm">Alimentation (35%)</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-4 h-4 rounded-sm bg-blue-500 mr-2"></div> |
|
|
<span class="text-gray-800 text-sm">Transport (25%)</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-4 h-4 rounded-sm bg-yellow-400 mr-2"></div> |
|
|
<span class="text-gray-800 text-sm">Loisirs (20%)</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-4 h-4 rounded-sm bg-green-500 mr-2"></div> |
|
|
<span class="text-gray-800 text-sm">Autres (20%)</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<p class="text-gray-800 font-medium text-center mt-6">Total: 125,000 FCFA</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<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/apps-1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
