Hugging Face's logo

Spaces:
shanezdz
/
cotisation
Running

App Files Community
shanezdz commited on
Commit
6f5db91
·
verified ·
1 Parent(s): 9816825

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +353 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Cotisation
3
- emoji: 🏆
4
  colorFrom: purple
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: cotisation
3
+ emoji: 🐳
4
  colorFrom: purple
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,353 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Calculateur de Cotisations Sociales</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
12
+ }
13
+ .result-card {
14
+ transition: all 0.3s ease;
15
+ }
16
+ .result-card:hover {
17
+ transform: translateY(-5px);
18
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
19
+ }
20
+ .tooltip {
21
+ position: relative;
22
+ display: inline-block;
23
+ }
24
+ .tooltip .tooltip-text {
25
+ visibility: hidden;
26
+ width: 200px;
27
+ background-color: #555;
28
+ color: #fff;
29
+ text-align: center;
30
+ border-radius: 6px;
31
+ padding: 8px;
32
+ position: absolute;
33
+ z-index: 1;
34
+ bottom: 125%;
35
+ left: 50%;
36
+ margin-left: -100px;
37
+ opacity: 0;
38
+ transition: opacity 0.3s;
39
+ }
40
+ .tooltip:hover .tooltip-text {
41
+ visibility: visible;
42
+ opacity: 1;
43
+ }
44
+ </style>
45
+ </head>
46
+ <body class="min-h-screen bg-gray-50">
47
+ <div class="gradient-bg text-white py-12 px-4">
48
+ <div class="max-w-4xl mx-auto text-center">
49
+ <h1 class="text-4xl font-bold mb-4">Calculateur de Cotisations Sociales</h1>
50
+ <p class="text-xl opacity-90">Estimez vos cotisations sociales en fonction de votre statut et revenus</p>
51
+ </div>
52
+ </div>
53
+
54
+ <div class="max-w-4xl mx-auto px-4 py-8 -mt-12">
55
+ <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
56
+ <div class="grid md:grid-cols-2 gap-6">
57
+ <div>
58
+ <label class="block text-gray-700 font-medium mb-2">Statut professionnel</label>
59
+ <div class="grid grid-cols-2 gap-4">
60
+ <button id="salarie-btn" class="status-btn bg-blue-100 text-blue-800 border-blue-300 py-3 px-4 rounded-lg font-medium flex items-center justify-center transition">
61
+ <i class="fas fa-user-tie mr-2"></i> Salarié
62
+ </button>
63
+ <button id="independant-btn" class="status-btn bg-purple-100 text-purple-800 border-purple-300 py-3 px-4 rounded-lg font-medium flex items-center justify-center transition">
64
+ <i class="fas fa-user-cog mr-2"></i> Indépendant
65
+ </button>
66
+ </div>
67
+ </div>
68
+
69
+ <div>
70
+ <label for="revenu" class="block text-gray-700 font-medium mb-2">Revenu mensuel brut (€)</label>
71
+ <div class="relative">
72
+ <input type="number" id="revenu" class="w-full border border-gray-300 rounded-lg py-3 px-4 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition" placeholder="3000">
73
+ <div class="absolute inset-y-0 right-0 flex items-center pr-3">
74
+ <i class="fas fa-euro-sign text-gray-400"></i>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ </div>
79
+
80
+ <div id="salarie-options" class="mt-6 hidden">
81
+ <h3 class="text-lg font-medium text-gray-700 mb-4">Options pour salariés</h3>
82
+ <div class="grid md:grid-cols-3 gap-4">
83
+ <div>
84
+ <label class="flex items-center">
85
+ <input type="checkbox" id="cadre" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500 mr-2">
86
+ <span>Cadre</span>
87
+ </label>
88
+ </div>
89
+ <div>
90
+ <label class="flex items-center">
91
+ <input type="checkbox" id="temps-partiel" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500 mr-2">
92
+ <span>Temps partiel</span>
93
+ </label>
94
+ </div>
95
+ <div>
96
+ <label class="flex items-center">
97
+ <input type="checkbox" id="contrat-pro" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500 mr-2">
98
+ <span>Contrat pro</span>
99
+ </label>
100
+ </div>
101
+ </div>
102
+ </div>
103
+
104
+ <div id="independant-options" class="mt-6 hidden">
105
+ <h3 class="text-lg font-medium text-gray-700 mb-4">Options pour indépendants</h3>
106
+ <div class="grid md:grid-cols-3 gap-4">
107
+ <div>
108
+ <label class="block text-gray-700 mb-1">Régime</label>
109
+ <select id="regime" class="w-full border border-gray-300 rounded-lg py-2 px-3 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition">
110
+ <option value="micro">Micro-entreprise</option>
111
+ <option value="auto">Auto-entrepreneur</option>
112
+ <option value="classique">Classique</option>
113
+ </select>
114
+ </div>
115
+ <div>
116
+ <label class="block text-gray-700 mb-1">Secteur</label>
117
+ <select id="secteur" class="w-full border border-gray-300 rounded-lg py-2 px-3 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition">
118
+ <option value="commercial">Commercial</option>
119
+ <option value="artisan">Artisan</option>
120
+ <option value="liberal">Profession libérale</option>
121
+ </select>
122
+ </div>
123
+ <div>
124
+ <label class="block text-gray-700 mb-1">ACRE</label>
125
+ <select id="acre" class="w-full border border-gray-300 rounded-lg py-2 px-3 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition">
126
+ <option value="non">Non</option>
127
+ <option value="oui">Oui</option>
128
+ </select>
129
+ </div>
130
+ </div>
131
+ </div>
132
+
133
+ <div class="mt-8">
134
+ <button id="calculer-btn" class="w-full gradient-bg text-white py-3 px-6 rounded-lg font-bold text-lg hover:opacity-90 transition flex items-center justify-center">
135
+ <i class="fas fa-calculator mr-2"></i> Calculer mes cotisations
136
+ </button>
137
+ </div>
138
+ </div>
139
+
140
+ <div id="resultats" class="hidden">
141
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">Résultats du calcul</h2>
142
+
143
+ <div class="grid md:grid-cols-3 gap-6 mb-8">
144
+ <div class="result-card bg-white rounded-xl shadow-md p-6 border-l-4 border-blue-500">
145
+ <div class="flex justify-between items-start mb-2">
146
+ <h3 class="text-lg font-medium text-gray-700">Revenu brut</h3>
147
+ <div class="tooltip">
148
+ <i class="fas fa-info-circle text-gray-400"></i>
149
+ <span class="tooltip-text">Montant avant déduction des cotisations</span>
150
+ </div>
151
+ </div>
152
+ <p id="revenu-brut" class="text-3xl font-bold text-gray-800">0 €</p>
153
+ </div>
154
+
155
+ <div class="result-card bg-white rounded-xl shadow-md p-6 border-l-4 border-purple-500">
156
+ <div class="flex justify-between items-start mb-2">
157
+ <h3 class="text-lg font-medium text-gray-700">Cotisations sociales</h3>
158
+ <div class="tooltip">
159
+ <i class="fas fa-info-circle text-gray-400"></i>
160
+ <span class="tooltip-text">Total des cotisations à payer</span>
161
+ </div>
162
+ </div>
163
+ <p id="cotisations" class="text-3xl font-bold text-gray-800">0 €</p>
164
+ </div>
165
+
166
+ <div class="result-card bg-white rounded-xl shadow-md p-6 border-l-4 border-green-500">
167
+ <div class="flex justify-between items-start mb-2">
168
+ <h3 class="text-lg font-medium text-gray-700">Revenu net</h3>
169
+ <div class="tooltip">
170
+ <i class="fas fa-info-circle text-gray-400"></i>
171
+ <span class="tooltip-text">Montant après déduction des cotisations</span>
172
+ </div>
173
+ </div>
174
+ <p id="revenu-net" class="text-3xl font-bold text-gray-800">0 €</p>
175
+ </div>
176
+ </div>
177
+
178
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8">
179
+ <h3 class="text-lg font-medium text-gray-700 mb-4">Détail des cotisations</h3>
180
+ <div class="overflow-x-auto">
181
+ <table class="min-w-full divide-y divide-gray-200">
182
+ <thead class="bg-gray-50">
183
+ <tr>
184
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Organisme</th>
185
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Taux</th>
186
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Montant</th>
187
+ </tr>
188
+ </thead>
189
+ <tbody id="detail-cotisations" class="bg-white divide-y divide-gray-200">
190
+ <!-- Les détails seront ajoutés dynamiquement -->
191
+ </tbody>
192
+ </table>
193
+ </div>
194
+ </div>
195
+
196
+ <div class="bg-blue-50 rounded-xl shadow-md p-6">
197
+ <div class="flex items-start">
198
+ <div class="flex-shrink-0">
199
+ <i class="fas fa-lightbulb text-blue-500 text-2xl mt-1"></i>
200
+ </div>
201
+ <div class="ml-3">
202
+ <h3 class="text-lg font-medium text-blue-800 mb-2">Conseils</h3>
203
+ <p id="conseils" class="text-blue-700">
204
+ Ces résultats sont une estimation. Pour une évaluation précise, consultez un expert-comptable ou votre URSSAF.
205
+ </p>
206
+ </div>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ </div>
211
+
212
+ <script>
213
+ document.addEventListener('DOMContentLoaded', function() {
214
+ // Gestion des boutons de statut
215
+ const salarieBtn = document.getElementById('salarie-btn');
216
+ const independantBtn = document.getElementById('independant-btn');
217
+ const salarieOptions = document.getElementById('salarie-options');
218
+ const independantOptions = document.getElementById('independant-options');
219
+
220
+ let currentStatus = null;
221
+
222
+ salarieBtn.addEventListener('click', function() {
223
+ currentStatus = 'salarie';
224
+ salarieBtn.classList.remove('bg-blue-100', 'border-blue-300');
225
+ salarieBtn.classList.add('bg-blue-500', 'text-white');
226
+ independantBtn.classList.remove('bg-purple-500', 'text-white');
227
+ independantBtn.classList.add('bg-purple-100', 'border-purple-300');
228
+ salarieOptions.classList.remove('hidden');
229
+ independantOptions.classList.add('hidden');
230
+ });
231
+
232
+ independantBtn.addEventListener('click', function() {
233
+ currentStatus = 'independant';
234
+ independantBtn.classList.remove('bg-purple-100', 'border-purple-300');
235
+ independantBtn.classList.add('bg-purple-500', 'text-white');
236
+ salarieBtn.classList.remove('bg-blue-500', 'text-white');
237
+ salarieBtn.classList.add('bg-blue-100', 'border-blue-300');
238
+ independantOptions.classList.remove('hidden');
239
+ salarieOptions.classList.add('hidden');
240
+ });
241
+
242
+ // Calcul des cotisations
243
+ const calculerBtn = document.getElementById('calculer-btn');
244
+ const resultats = document.getElementById('resultats');
245
+
246
+ calculerBtn.addEventListener('click', function() {
247
+ if (!currentStatus) {
248
+ alert('Veuillez sélectionner votre statut professionnel');
249
+ return;
250
+ }
251
+
252
+ const revenu = parseFloat(document.getElementById('revenu').value) || 0;
253
+ if (revenu <= 0) {
254
+ alert('Veuillez entrer un revenu valide');
255
+ return;
256
+ }
257
+
258
+ let cotisations = [];
259
+ let totalCotisations = 0;
260
+
261
+ if (currentStatus === 'salarie') {
262
+ // Cotisations salarié (approximatives)
263
+ const cadre = document.getElementById('cadre').checked;
264
+
265
+ cotisations.push({ nom: 'Sécurité sociale', taux: 0.13, montant: revenu * 0.13 });
266
+ cotisations.push({ nom: 'Assurance chômage', taux: 0.024, montant: revenu * 0.024 });
267
+ cotisations.push({ nom: 'Retraite', taux: 0.083, montant: revenu * 0.083 });
268
+
269
+ if (cadre) {
270
+ cotisations.push({ nom: 'Retraite complémentaire', taux: 0.07, montant: revenu * 0.07 });
271
+ }
272
+
273
+ cotisations.push({ nom: 'CSG/CRDS', taux: 0.092, montant: revenu * 0.092 });
274
+
275
+ } else if (currentStatus === 'independant') {
276
+ // Cotisations indépendant (approximatives)
277
+ const regime = document.getElementById('regime').value;
278
+ const secteur = document.getElementById('secteur').value;
279
+ const acre = document.getElementById('acre').value === 'oui';
280
+
281
+ let tauxBase = 0;
282
+
283
+ if (regime === 'micro') {
284
+ tauxBase = 0.22; // Taux micro-entreprise simplifié
285
+ } else if (regime === 'auto') {
286
+ tauxBase = 0.22; // Auto-entrepreneur
287
+ } else {
288
+ // Régime classique
289
+ if (secteur === 'commercial') {
290
+ tauxBase = 0.45;
291
+ } else if (secteur === 'artisan') {
292
+ tauxBase = 0.42;
293
+ } else {
294
+ tauxBase = 0.40; // Libéral
295
+ }
296
+ }
297
+
298
+ if (acre && (regime === 'micro' || regime === 'auto')) {
299
+ tauxBase *= 0.5; // Réduction ACRE la première année
300
+ }
301
+
302
+ cotisations.push({
303
+ nom: 'Cotisations sociales',
304
+ taux: tauxBase,
305
+ montant: revenu * tauxBase
306
+ });
307
+ }
308
+
309
+ // Calcul du total
310
+ totalCotisations = cotisations.reduce((sum, item) => sum + item.montant, 0);
311
+ const revenuNet = revenu - totalCotisations;
312
+
313
+ // Affichage des résultats
314
+ document.getElementById('revenu-brut').textContent = revenu.toFixed(2) + ' €';
315
+ document.getElementById('cotisations').textContent = totalCotisations.toFixed(2) + ' €';
316
+ document.getElementById('revenu-net').textContent = revenuNet.toFixed(2) + ' €';
317
+
318
+ // Détail des cotisations
319
+ const detailCotisations = document.getElementById('detail-cotisations');
320
+ detailCotisations.innerHTML = '';
321
+
322
+ cotisations.forEach(item => {
323
+ const row = document.createElement('tr');
324
+ row.innerHTML = `
325
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${item.nom}</td>
326
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${(item.taux * 100).toFixed(1)}%</td>
327
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.montant.toFixed(2)} €</td>
328
+ `;
329
+ detailCotisations.appendChild(row);
330
+ });
331
+
332
+ // Conseils personnalisés
333
+ const conseils = document.getElementById('conseils');
334
+ if (currentStatus === 'salarie') {
335
+ conseils.textContent = 'En tant que salarié, votre employeur paie également des cotisations patronales. Ces résultats ne concernent que la part salariale.';
336
+ } else {
337
+ if (document.getElementById('regime').value === 'auto') {
338
+ conseils.textContent = 'En tant qu\'auto-entrepreneur, vous bénéficiez d\'un régime simplifié. Pensez à déclarer votre chiffre d\'affaires chaque mois ou trimestre.';
339
+ } else {
340
+ conseils.textContent = 'En tant qu\'indépendant, vos cotisations peuvent varier selon votre secteur d\'activité et votre régime. Consultez un expert-comptable pour une estimation précise.';
341
+ }
342
+ }
343
+
344
+ // Afficher les résultats
345
+ resultats.classList.remove('hidden');
346
+
347
+ // Scroll vers les résultats
348
+ resultats.scrollIntoView({ behavior: 'smooth' });
349
+ });
350
+ });
351
+ </script>
352
+ <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=shanezdz/cotisation" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
353
+ </html>