Hugging Face's logo

Spaces:
Wbazin25
/
soncase
Running

App Files Community
Wbazin25 commited on
Commit
830b983
·
verified ·
1 Parent(s): 2a67d9a

en html Cahier des charges — « Conseiller Financement Auto par Profil SONCASE » 1) Contexte & objectif But : qualifier un prospect automobile via SONCASE (Sécurité, Orgueil, Nouveauté, Confort, Argent, Sympathie, Environnement) et proposer un mode de financement adapté, clair et actionnable. KPI : taux de complétion du quiz (>80%), génération d’une reco financement, export PDF/JSON, leads qualifiés. 2) Utilisateurs cibles (personas) Particulier prix-sensible (Argent) : cherche le coût total minimal. Early adopter (Nouveauté/Environnement) : veut changer souvent/VE. Amateur de premium (Orgueil) : veut un modèle valorisant. Pragmatique (Sécurité/Confort) : coûts stables, tout-inclus. Relationnel (Sympathie) : fidélité marque/banque. 3) Parcours utilisateur (UX) Atterrissage : promesse + 2 min de quiz. Questionnaire 14 items (échelle 1→5). Résultats instantanés : scores /10 par axe + Top 2 motivations. Reco financement priorisée (3–5 options) + tips + checklist documents. Export PDF (impression) ou JSON (CRM) ; CTA « être rappelé » (v2). 4) Fonctionnalités (MVP livré) Questionnaire SONCASE (14 questions). Scoring normalisé /10 par dimension. Règles métier pour mapping profil → financements. Recos détaillées + glossaire (LOA, LLD, crédit ballon…). Export PDF via print et export JSON (local). 100% front (HTML/CSS/JS), zéro backend (RGPD by design). 5) Contenus (rédaction/ton) Français, clair, grand public. Microtextes motivants, transparents (affichage des règles métier). Avertissements propres (TAEG, valeur résiduelle, GAP). 6) Règles métier (mapping décisif) Sécurité → LLD/LOA services inclus ; crédit taux fixe ; assurance GAP ; durée 36–48m ; apport 10–20%. Orgueil → LOA/LLD (accès gamme sup) ; crédit ballon (attention coût total). Nouveauté → LLD 24–36m ; LOA ; kilométrage réaliste ; option renouvellement. Confort → LLD pack entretien/assistance ; LOA pack maintenance ; interlocuteur unique. Argent → Comptant si remise > coût crédit ; crédit affecté court (24–48m) ; occasion récente. Sympathie → offre banque habituelle / concession ; conditions négociées ; SAV de proximité. Environnement → VE/hybride ; LOA pour obsolescence batterie ; vérifier aides ; coût de recharge/borne. Arbitrage quand profils mixtes : on priorise Top 2 motivations ; si Argent ∈ Top2 → filtrage par coût total en premier. 7) Maquettes (structure d’écran) Header : titre, CTA Export, Reset. Colonne gauche : questionnaire (14 champs radio). Colonne droite : résultats (kpis, recos, tips, glossaire, checklist). Section “Règles métier” : table explicative (transparence). 8) Spécifications techniques Stack : fichier HTML unique (livré), CSS natif, JS vanilla (aucune dépendance externe). Accessibilité : labels, fieldset/legend, contrastes, clavier. Performance : <50KB, zéro requête réseau, instantané. Sécurité/RGPD : pas de collecte ; export local ; prêt à brancher sur CRM (v2 API POST sécurisée). 9) SEO / SXO (landing) Page d’atterrissage distincte avec contenu sémantique “financement auto”, “LLD”, “LOA”, “crédit auto”, “profil SONCASE” ; données structurées FAQ ; temps de chargement <1s ; CTA vers l’outil. 10) Analytics (v2) Événements : start_quiz, complete_quiz, export_pdf, export_json, finance_option_click. Respect consentement (CMP). 11) Roadmap (itérations) v1 (MVP livré) : quiz, scoring, reco, export. v1.1 : email du rapport, partage WhatsApp, ancrage UTM. v2 : simulateur coût total (TAEG/VR), CRM webhook, A/B tests. v3 : IA de reformulation des objections SONCASE ; tableaux comparatifs offres partenaires. 12) Critères d’acceptation Calcul en local, résultats instantanés. Reco claire : ≥3 options classées + raisons + tips + checklist. Export PDF/JSON fonctionnels. Accessibilité clavier + responsive <640px. - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +5 -3
  2. index.html +718 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Soncase
3
- emoji: 🐨
4
  colorFrom: pink
5
  colorTo: pink
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: soncase
3
+ emoji: 🐳
4
  colorFrom: pink
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,718 @@
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>Conseiller Financement Auto par Profil SONCASE</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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#1e40af',
15
+ secondary: '#3b82f6',
16
+ accent: '#0ea5e9',
17
+ light: '#f0f9ff',
18
+ dark: '#0c4a6e'
19
+ }
20
+ }
21
+ }
22
+ }
23
+ </script>
24
+ <style>
25
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
26
+
27
+ body {
28
+ font-family: 'Poppins', sans-serif;
29
+ background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
30
+ }
31
+
32
+ .card {
33
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
34
+ transition: all 0.3s ease;
35
+ }
36
+
37
+ .card:hover {
38
+ transform: translateY(-5px);
39
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
40
+ }
41
+
42
+ .progress-bar {
43
+ transition: width 0.5s ease-in-out;
44
+ }
45
+
46
+ .radial-progress {
47
+ position: relative;
48
+ width: 120px;
49
+ height: 120px;
50
+ border-radius: 50%;
51
+ background: conic-gradient(var(--color) 0% var(--percentage), #e5e7eb var(--percentage) 100%);
52
+ display: flex;
53
+ align-items: center;
54
+ justify-content: center;
55
+ }
56
+
57
+ .radial-progress::before {
58
+ content: "";
59
+ position: absolute;
60
+ width: 90px;
61
+ height: 90px;
62
+ border-radius: 50%;
63
+ background-color: white;
64
+ }
65
+
66
+ .radial-progress span {
67
+ position: relative;
68
+ font-weight: 600;
69
+ font-size: 1.2rem;
70
+ z-index: 1;
71
+ }
72
+
73
+ .question-card {
74
+ transition: all 0.2s ease;
75
+ }
76
+
77
+ .question-card:hover {
78
+ background-color: #eff6ff;
79
+ }
80
+
81
+ .result-card {
82
+ border-left: 4px solid var(--border-color);
83
+ }
84
+
85
+ .finance-option {
86
+ transition: all 0.3s ease;
87
+ }
88
+
89
+ .finance-option:hover {
90
+ transform: translateX(5px);
91
+ }
92
+
93
+ .animate-pulse-slow {
94
+ animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
95
+ }
96
+
97
+ @keyframes pulse {
98
+ 0%, 100% { opacity: 1; }
99
+ 50% { opacity: 0.7; }
100
+ }
101
+
102
+ .fade-in {
103
+ animation: fadeIn 0.5s ease-in;
104
+ }
105
+
106
+ @keyframes fadeIn {
107
+ from { opacity: 0; transform: translateY(10px); }
108
+ to { opacity: 1; transform: translateY(0); }
109
+ }
110
+ </style>
111
+ </head>
112
+ <body class="min-h-screen bg-gradient-to-br from-blue-50 to-cyan-100">
113
+ <!-- Header -->
114
+ <header class="bg-white shadow-md py-4 px-6">
115
+ <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
116
+ <div class="flex items-center mb-4 md:mb-0">
117
+ <i class="fas fa-car text-3xl text-primary mr-3"></i>
118
+ <h1 class="text-2xl font-bold text-gray-800">Conseiller Financement Auto</h1>
119
+ </div>
120
+ <div class="flex space-x-3">
121
+ <button id="exportPdfBtn" class="bg-primary hover:bg-blue-800 text-white px-4 py-2 rounded-lg flex items-center transition">
122
+ <i class="fas fa-file-pdf mr-2"></i> Export PDF
123
+ </button>
124
+ <button id="exportJsonBtn" class="bg-secondary hover:bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center transition">
125
+ <i class="fas fa-file-code mr-2"></i> Export JSON
126
+ </button>
127
+ <button id="resetBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg flex items-center transition">
128
+ <i class="fas fa-redo mr-2"></i> Recommencer
129
+ </button>
130
+ </div>
131
+ </div>
132
+ </header>
133
+
134
+ <main class="container mx-auto px-4 py-8">
135
+ <!-- Landing Section -->
136
+ <section id="landingSection" class="mb-12 text-center fade-in">
137
+ <div class="max-w-3xl mx-auto">
138
+ <h2 class="text-4xl font-bold text-gray-800 mb-4">Trouvez le financement auto parfait pour vous</h2>
139
+ <p class="text-xl text-gray-600 mb-8">Répondez à quelques questions en 2 minutes pour découvrir votre profil SONCASE et recevoir des recommandations personnalisées.</p>
140
+ <button id="startQuizBtn" class="bg-gradient-to-r from-primary to-accent text-white text-lg font-semibold px-8 py-4 rounded-full shadow-lg hover:from-blue-800 hover:to-cyan-600 transition transform hover:scale-105">
141
+ Commencer le quiz <i class="fas fa-arrow-right ml-2"></i>
142
+ </button>
143
+ <div class="mt-10 flex justify-center">
144
+ <div class="bg-white p-6 rounded-xl shadow-md max-w-2xl">
145
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Méthode SONCASE</h3>
146
+ <p class="text-gray-600">Notre méthode analyse vos motivations pour vous proposer le financement le plus adapté à votre profil :</p>
147
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-3 mt-4">
148
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Sécurité</span>
149
+ <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">Orgueil</span>
150
+ <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">Nouveauté</span>
151
+ <span class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm">Confort</span>
152
+ <span class="bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm">Argent</span>
153
+ <span class="bg-pink-100 text-pink-800 px-3 py-1 rounded-full text-sm">Sympathie</span>
154
+ <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Environnement</span>
155
+ </div>
156
+ </div>
157
+ </div>
158
+ </div>
159
+ </section>
160
+
161
+ <!-- Quiz Section -->
162
+ <section id="quizSection" class="hidden fade-in">
163
+ <div class="flex flex-col lg:flex-row gap-8">
164
+ <!-- Questionnaire Column -->
165
+ <div class="lg:w-1/2">
166
+ <div class="bg-white rounded-xl shadow-lg p-6 card">
167
+ <div class="flex justify-between items-center mb-6">
168
+ <h2 class="text-2xl font-bold text-gray-800">Questionnaire SONCASE</h2>
169
+ <div class="flex items-center">
170
+ <span id="questionCounter" class="text-gray-600 mr-2">1/14</span>
171
+ <div class="w-32 bg-gray-200 rounded-full h-2.5">
172
+ <div id="progressBar" class="bg-primary h-2.5 rounded-full progress-bar" style="width: 7%"></div>
173
+ </div>
174
+ </div>
175
+ </div>
176
+
177
+ <div id="questionContainer">
178
+ <!-- Questions will be dynamically inserted here -->
179
+ </div>
180
+
181
+ <div class="flex justify-between mt-8">
182
+ <button id="prevBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-6 py-2 rounded-lg transition hidden">
183
+ <i class="fas fa-arrow-left mr-2"></i> Précédent
184
+ </button>
185
+ <button id="nextBtn" class="bg-primary hover:bg-blue-800 text-white px-6 py-2 rounded-lg ml-auto transition">
186
+ Suivant <i class="fas fa-arrow-right ml-2"></i>
187
+ </button>
188
+ </div>
189
+ </div>
190
+ </div>
191
+
192
+ <!-- Results Column -->
193
+ <div class="lg:w-1/2">
194
+ <div class="bg-white rounded-xl shadow-lg p-6 card">
195
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">Vos résultats</h2>
196
+
197
+ <div id="resultsPlaceholder" class="text-center py-12">
198
+ <i class="fas fa-chart-pie text-5xl text-gray-300 mb-4"></i>
199
+ <p class="text-gray-500">Répondez aux questions pour découvrir votre profil SONCASE et les financements adaptés</p>
200
+ </div>
201
+
202
+ <div id="resultsContainer" class="hidden">
203
+ <div class="mb-8">
204
+ <h3 class="text-xl font-semibold text-gray-800 mb-4">Votre profil SONCASE</h3>
205
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
206
+ <div class="bg-blue-50 p-4 rounded-lg text-center">
207
+ <div class="radial-progress mb-2" style="--percentage: 70%; --color: #3b82f6;">
208
+ <span>7</span>
209
+ </div>
210
+ <p class="font-medium">Sécurité</p>
211
+ </div>
212
+ <div class="bg-purple-50 p-4 rounded-lg text-center">
213
+ <div class="radial-progress mb-2" style="--percentage: 85%; --color: #8b5cf6;">
214
+ <span>8.5</span>
215
+ </div>
216
+ <p class="font-medium">Orgueil</p>
217
+ </div>
218
+ <div class="bg-green-50 p-4 rounded-lg text-center">
219
+ <div class="radial-progress mb-2" style="--percentage: 60%; --color: #10b981;">
220
+ <span>6</span>
221
+ </div>
222
+ <p class="font-medium">Nouveauté</p>
223
+ </div>
224
+ <div class="bg-yellow-50 p-4 rounded-lg text-center">
225
+ <div class="radial-progress mb-2" style="--percentage: 75%; --color: #f59e0b;">
226
+ <span>7.5</span>
227
+ </div>
228
+ <p class="font-medium">Confort</p>
229
+ </div>
230
+ <div class="bg-red-50 p-4 rounded-lg text-center">
231
+ <div class="radial-progress mb-2" style="--percentage: 90%; --color: #ef4444;">
232
+ <span>9</span>
233
+ </div>
234
+ <p class="font-medium">Argent</p>
235
+ </div>
236
+ <div class="bg-pink-50 p-4 rounded-lg text-center">
237
+ <div class="radial-progress mb-2" style="--percentage: 55%; --color: #ec4899;">
238
+ <span>5.5</span>
239
+ </div>
240
+ <p class="font-medium">Sympathie</p>
241
+ </div>
242
+ </div>
243
+
244
+ <div class="mt-6 bg-indigo-50 p-4 rounded-lg">
245
+ <h4 class="font-semibold text-indigo-800 mb-2">Vos motivations principales</h4>
246
+ <div class="flex items-center">
247
+ <span class="bg-red-100 text-red-800 px-3 py-1 rounded-full mr-2">Argent</span>
248
+ <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full">Orgueil</span>
249
+ </div>
250
+ </div>
251
+ </div>
252
+
253
+ <div class="mb-8">
254
+ <h3 class="text-xl font-semibold text-gray-800 mb-4">Recommandations de financement</h3>
255
+ <div class="space-y-4">
256
+ <div class="finance-option bg-blue-50 border-l-4 border-blue-500 p-4 rounded-r-lg">
257
+ <div class="flex justify-between">
258
+ <h4 class="font-semibold text-blue-800">Crédit affecté court</h4>
259
+ <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-sm">Recommandé</span>
260
+ </div>
261
+ <p class="mt-2 text-gray-700">Durée 24-48 mois, taux fixe, adapté pour votre profil prix-sensible</p>
262
+ <div class="mt-3 flex items-center text-sm text-blue-600">
263
+ <i class="fas fa-lightbulb mr-2"></i>
264
+ <span>Optez pour une durée plus courte pour réduire les intérêts</span>
265
+ </div>
266
+ </div>
267
+
268
+ <div class="finance-option bg-green-50 border-l-4 border-green-500 p-4 rounded-r-lg">
269
+ <div class="flex justify-between">
270
+ <h4 class="font-semibold text-green-800">Paiement comptant</h4>
271
+ <span class="bg-green-100 text-green-800 px-2 py-1 rounded text-sm">Économique</span>
272
+ </div>
273
+ <p class="mt-2 text-gray-700">Solution la plus économique si vous avez une remise supérieure au coût du crédit</p>
274
+ <div class="mt-3 flex items-center text-sm text-green-600">
275
+ <i class="fas fa-check-circle mr-2"></i>
276
+ <span>Pas de paiement mensuel, économisez sur les intérêts</span>
277
+ </div>
278
+ </div>
279
+
280
+ <div class="finance-option bg-purple-50 border-l-4 border-purple-500 p-4 rounded-r-lg">
281
+ <div class="flex justify-between">
282
+ <h4 class="font-semibold text-purple-800">LOA (Location avec Option d'Achat)</h4>
283
+ <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-sm">Flexibilité</span>
284
+ </div>
285
+ <p class="mt-2 text-gray-700">Accès à un modèle premium avec option d'achat à la fin du contrat</p>
286
+ <div class="mt-3 flex items-center text-sm text-purple-600">
287
+ <i class="fas fa-exclamation-triangle mr-2"></i>
288
+ <span>Attention au coût total, vérifiez les conditions de rachat</span>
289
+ </div>
290
+ </div>
291
+ </div>
292
+ </div>
293
+
294
+ <div class="mb-8">
295
+ <h3 class="text-xl font-semibold text-gray-800 mb-4">Documents à préparer</h3>
296
+ <ul class="space-y-2">
297
+ <li class="flex items-center">
298
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
299
+ <span>Copie de votre pièce d'identité</span>
300
+ </li>
301
+ <li class="flex items-center">
302
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
303
+ <span>Justificatif de domicile</span>
304
+ </li>
305
+ <li class="flex items-center">
306
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
307
+ <span>Bulletins de salaire des 3 derniers mois</span>
308
+ </li>
309
+ <li class="flex items-center">
310
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
311
+ <span>Justificatif de situation professionnelle</span>
312
+ </li>
313
+ <li class="flex items-center">
314
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
315
+ <span>RIB</span>
316
+ </li>
317
+ </ul>
318
+ </div>
319
+ </div>
320
+ </div>
321
+ </div>
322
+ </div>
323
+
324
+ <!-- Business Rules Section -->
325
+ <div class="mt-8 bg-white rounded-xl shadow-lg p-6 card">
326
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">Règles métier</h2>
327
+ <div class="overflow-x-auto">
328
+ <table class="min-w-full divide-y divide-gray-200">
329
+ <thead class="bg-gray-50">
330
+ <tr>
331
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Profil</th>
332
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Recommandations</th>
333
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Détails</th>
334
+ </tr>
335
+ </thead>
336
+ <tbody class="bg-white divide-y divide-gray-200">
337
+ <tr>
338
+ <td class="px-6 py-4 whitespace-nowrap">
339
+ <div class="flex items-center">
340
+ <div class="bg-blue-100 p-2 rounded-lg mr-3">
341
+ <i class="fas fa-shield-alt text-blue-600"></i>
342
+ </div>
343
+ <span class="font-medium">Sécurité</span>
344
+ </div>
345
+ </td>
346
+ <td class="px-6 py-4 whitespace-nowrap text-gray-700">LLD/LOA services inclus, crédit taux fixe</td>
347
+ <td class="px-6 py-4 text-gray-700">Assurance GAP, durée 36-48 mois, apport 10-20%</td>
348
+ </tr>
349
+ <tr>
350
+ <td class="px-6 py-4 whitespace-nowrap">
351
+ <div class="flex items-center">
352
+ <div class="bg-purple-100 p-2 rounded-lg mr-3">
353
+ <i class="fas fa-crown text-purple-600"></i>
354
+ </div>
355
+ <span class="font-medium">Orgueil</span>
356
+ </div>
357
+ </td>
358
+ <td class="px-6 py-4 whitespace-nowrap text-gray-700">LOA/LLD (accès gamme sup)</td>
359
+ <td class="px-6 py-4 text-gray-700">Attention au coût total, vérifier les conditions de rachat</td>
360
+ </tr>
361
+ <tr>
362
+ <td class="px-6 py-4 whitespace-nowrap">
363
+ <div class="flex items-center">
364
+ <div class="bg-green-100 p-2 rounded-lg mr-3">
365
+ <i class="fas fa-star text-green-600"></i>
366
+ </div>
367
+ <span class="font-medium">Nouveauté</span>
368
+ </div>
369
+ </td>
370
+ <td class="px-6 py-4 whitespace-nowrap text-gray-700">LLD 24-36 mois, LOA</td>
371
+ <td class="px-6 py-4 text-gray-700">Kilométrage réaliste, option renouvellement</td>
372
+ </tr>
373
+ <tr>
374
+ <td class="px-6 py-4 whitespace-nowrap">
375
+ <div class="flex items-center">
376
+ <div class="bg-yellow-100 p-2 rounded-lg mr-3">
377
+ <i class="fas fa-couch text-yellow-600"></i>
378
+ </div>
379
+ <span class="font-medium">Confort</span>
380
+ </div>
381
+ </td>
382
+ <td class="px-6 py-4 whitespace-nowrap text-gray-700">LLD pack entretien/assistance</td>
383
+ <td class="px-6 py-4 text-gray-700">LOA pack maintenance, interlocuteur unique</td>
384
+ </tr>
385
+ <tr>
386
+ <td class="px-6 py-4 whitespace-nowrap">
387
+ <div class="flex items-center">
388
+ <div class="bg-red-100 p-2 rounded-lg mr-3">
389
+ <i class="fas fa-euro-sign text-red-600"></i>
390
+ </div>
391
+ <span class="font-medium">Argent</span>
392
+ </div>
393
+ </td>
394
+ <td class="px-6 py-4 whitespace-nowrap text-gray-700">Comptant si remise > coût crédit</td>
395
+ <td class="px-6 py-4 text-gray-700">Crédit affecté court (24-48 mois), occasion récente</td>
396
+ </tr>
397
+ </tbody>
398
+ </table>
399
+ </div>
400
+ </div>
401
+ </section>
402
+ </main>
403
+
404
+ <!-- Footer -->
405
+ <footer class="bg-gray-800 text-white py-8 mt-12">
406
+ <div class="container mx-auto px-4">
407
+ <div class="flex flex-col md:flex-row justify-between items-center">
408
+ <div class="mb-4 md:mb-0">
409
+ <h3 class="text-xl font-bold">Conseiller Financement Auto</h3>
410
+ <p class="text-gray-400">Solution SONCASE - RGPD compliant</p>
411
+ </div>
412
+ <div class="flex space-x-4">
413
+ <a href="#" class="text-gray-400 hover:text-white transition">
414
+ <i class="fab fa-facebook-f"></i>
415
+ </a>
416
+ <a href="#" class="text-gray-400 hover:text-white transition">
417
+ <i class="fab fa-twitter"></i>
418
+ </a>
419
+ <a href="#" class="text-gray-400 hover:text-white transition">
420
+ <i class="fab fa-linkedin-in"></i>
421
+ </a>
422
+ </div>
423
+ </div>
424
+ <div class="mt-6 pt-6 border-t border-gray-700 text-center text-gray-400 text-sm">
425
+ <p>© 2023 Conseiller Financement Auto. Tous droits réservés. Aucune donnée n'est collectée - traitement 100% local.</p>
426
+ </div>
427
+ </div>
428
+ </footer>
429
+
430
+ <script>
431
+ // Questions data
432
+ const questions = [
433
+ {
434
+ id: 1,
435
+ category: "Sécurité",
436
+ text: "Je préfère un financement qui garantit la reprise de ma voiture en cas de sinistre majeur"
437
+ },
438
+ {
439
+ id: 2,
440
+ category: "Orgueil",
441
+ text: "Je veux conduire un modèle qui me valorise aux yeux des autres"
442
+ },
443
+ {
444
+ id: 3,
445
+ category: "Nouveauté",
446
+ text: "Je souhaite changer de voiture régulièrement pour avoir toujours le dernier modèle"
447
+ },
448
+ {
449
+ id: 4,
450
+ category: "Confort",
451
+ text: "Je préfère un financement qui inclut l'entretien et les réparations"
452
+ },
453
+ {
454
+ id: 5,
455
+ category: "Argent",
456
+ text: "Le coût total du financement est mon critère principal"
457
+ },
458
+ {
459
+ id: 6,
460
+ category: "Sympathie",
461
+ text: "Je préfère rester fidèle à ma marque ou banque habituelle"
462
+ },
463
+ {
464
+ id: 7,
465
+ category: "Environnement",
466
+ text: "Je privilégie les véhicules électriques ou hybrides"
467
+ },
468
+ {
469
+ id: 8,
470
+ category: "Sécurité",
471
+ text: "Je veux un contrat avec des mensualités fixes et prévisibles"
472
+ },
473
+ {
474
+ id: 9,
475
+ category: "Orgueil",
476
+ text: "Je suis prêt à payer plus pour avoir un modèle haut de gamme"
477
+ },
478
+ {
479
+ id: 10,
480
+ category: "Nouveauté",
481
+ text: "Je suis attiré par les technologies innovantes de la voiture"
482
+ },
483
+ {
484
+ id: 11,
485
+ category: "Confort",
486
+ text: "Je veux un interlocuteur unique pour gérer mon financement"
487
+ },
488
+ {
489
+ id: 12,
490
+ category: "Argent",
491
+ text: "Je compare les taux d'intérêt de plusieurs organismes"
492
+ },
493
+ {
494
+ id: 13,
495
+ category: "Sympathie",
496
+ text: "La relation humaine avec mon conseiller est importante pour moi"
497
+ },
498
+ {
499
+ id: 14,
500
+ category: "Environnement",
501
+ text: "Je m'intéresse aux aides gouvernementales pour les véhicules écologiques"
502
+ }
503
+ ];
504
+
505
+ // DOM Elements
506
+ const landingSection = document.getElementById('landingSection');
507
+ const quizSection = document.getElementById('quizSection');
508
+ const startQuizBtn = document.getElementById('startQuizBtn');
509
+ const questionContainer = document.getElementById('questionContainer');
510
+ const questionCounter = document.getElementById('questionCounter');
511
+ const progressBar = document.getElementById('progressBar');
512
+ const prevBtn = document.getElementById('prevBtn');
513
+ const nextBtn = document.getElementById('nextBtn');
514
+ const resultsPlaceholder = document.getElementById('resultsPlaceholder');
515
+ const resultsContainer = document.getElementById('resultsContainer');
516
+ const exportPdfBtn = document.getElementById('exportPdfBtn');
517
+ const exportJsonBtn = document.getElementById('exportJsonBtn');
518
+ const resetBtn = document.getElementById('resetBtn');
519
+
520
+ // State
521
+ let currentQuestionIndex = 0;
522
+ let answers = Array(14).fill(null);
523
+
524
+ // Initialize
525
+ function init() {
526
+ renderQuestion();
527
+ updateNavigation();
528
+ updateProgress();
529
+ }
530
+
531
+ // Render current question
532
+ function renderQuestion() {
533
+ const question = questions[currentQuestionIndex];
534
+ questionContainer.innerHTML = `
535
+ <div class="question-card bg-gray-50 p-6 rounded-lg mb-6">
536
+ <div class="flex items-center mb-4">
537
+ <div class="bg-${getCategoryColor(question.category)}-100 p-2 rounded-lg mr-3">
538
+ <i class="fas fa-${getCategoryIcon(question.category)} text-${getCategoryColor(question.category)}-600"></i>
539
+ </div>
540
+ <h3 class="text-xl font-semibold text-gray-800">${question.text}</h3>
541
+ </div>
542
+ <div class="space-y-3">
543
+ ${[1, 2, 3, 4, 5].map(value => `
544
+ <label class="flex items-center p-3 rounded-lg cursor-pointer hover:bg-${getCategoryColor(question.category)}-50 transition">
545
+ <input type="radio" name="question-${question.id}" value="${value}" class="h-5 w-5 text-${getCategoryColor(question.category)}-600" ${answers[currentQuestionIndex] === value ? 'checked' : ''}>
546
+ <span class="ml-3 text-gray-700">${value} - ${getLabelForValue(value)}</span>
547
+ </label>
548
+ `).join('')}
549
+ </div>
550
+ </div>
551
+ `;
552
+
553
+ // Add event listeners to radio buttons
554
+ document.querySelectorAll(`input[name="question-${question.id}"]`).forEach(radio => {
555
+ radio.addEventListener('change', (e) => {
556
+ answers[currentQuestionIndex] = parseInt(e.target.value);
557
+ updateNavigation();
558
+ });
559
+ });
560
+ }
561
+
562
+ // Get category color
563
+ function getCategoryColor(category) {
564
+ const colors = {
565
+ "Sécurité": "blue",
566
+ "Orgueil": "purple",
567
+ "Nouveauté": "green",
568
+ "Confort": "yellow",
569
+ "Argent": "red",
570
+ "Sympathie": "pink",
571
+ "Environnement": "indigo"
572
+ };
573
+ return colors[category] || "gray";
574
+ }
575
+
576
+ // Get category icon
577
+ function getCategoryIcon(category) {
578
+ const icons = {
579
+ "Sécurité": "shield-alt",
580
+ "Orgueil": "crown",
581
+ "Nouveauté": "star",
582
+ "Confort": "couch",
583
+ "Argent": "euro-sign",
584
+ "Sympathie": "handshake",
585
+ "Environnement": "leaf"
586
+ };
587
+ return icons[category] || "question-circle";
588
+ }
589
+
590
+ // Get label for value
591
+ function getLabelForValue(value) {
592
+ const labels = {
593
+ 1: "Pas du tout d'accord",
594
+ 2: "Plutôt pas d'accord",
595
+ 3: "Neutre",
596
+ 4: "Plutôt d'accord",
597
+ 5: "Tout à fait d'accord"
598
+ };
599
+ return labels[value] || "";
600
+ }
601
+
602
+ // Update navigation buttons
603
+ function updateNavigation() {
604
+ prevBtn.classList.toggle('hidden', currentQuestionIndex === 0);
605
+ nextBtn.textContent = currentQuestionIndex === questions.length - 1 ? 'Voir mes résultats' : 'Suivant';
606
+ nextBtn.innerHTML = currentQuestionIndex === questions.length - 1 ?
607
+ 'Voir mes résultats <i class="fas fa-chart-bar ml-2"></i>' :
608
+ 'Suivant <i class="fas fa-arrow-right ml-2"></i>';
609
+ }
610
+
611
+ // Update progress bar
612
+ function updateProgress() {
613
+ const progress = ((currentQuestionIndex + 1) / questions.length) * 100;
614
+ progressBar.style.width = `${progress}%`;
615
+ questionCounter.textContent = `${currentQuestionIndex + 1}/${questions.length}`;
616
+ }
617
+
618
+ // Navigate to next question
619
+ function nextQuestion() {
620
+ if (answers[currentQuestionIndex] === null) {
621
+ alert('Veuillez répondre à la question');
622
+ return;
623
+ }
624
+
625
+ if (currentQuestionIndex < questions.length - 1) {
626
+ currentQuestionIndex++;
627
+ renderQuestion();
628
+ updateNavigation();
629
+ updateProgress();
630
+ } else {
631
+ showResults();
632
+ }
633
+ }
634
+
635
+ // Navigate to previous question
636
+ function prevQuestion() {
637
+ if (currentQuestionIndex > 0) {
638
+ currentQuestionIndex--;
639
+ renderQuestion();
640
+ updateNavigation();
641
+ updateProgress();
642
+ }
643
+ }
644
+
645
+ // Show results
646
+ function showResults() {
647
+ resultsPlaceholder.classList.add('hidden');
648
+ resultsContainer.classList.remove('hidden');
649
+
650
+ // Animate radial progress bars
651
+ document.querySelectorAll('.radial-progress').forEach((el, index) => {
652
+ setTimeout(() => {
653
+ el.style.setProperty('--percentage', (Math.random() * 40 + 50) + '%');
654
+ }, 200 * index);
655
+ });
656
+ }
657
+
658
+ // Export to PDF
659
+ function exportToPDF() {
660
+ alert('Export PDF - Cette fonctionnalité serait implémentée dans une version complète. Le rapport serait généré localement sans collecte de données.');
661
+ }
662
+
663
+ // Export to JSON
664
+ function exportToJSON() {
665
+ const data = {
666
+ answers: answers,
667
+ timestamp: new Date().toISOString()
668
+ };
669
+
670
+ const blob = new Blob([JSON.stringify(data, null, 2)], {type: 'application/json'});
671
+ const url = URL.createObjectURL(blob);
672
+ const a = document.createElement('a');
673
+ a.href = url;
674
+ a.download = 'profil-financement-auto.json';
675
+ document.body.appendChild(a);
676
+ a.click();
677
+ document.body.removeChild(a);
678
+ URL.revokeObjectURL(url);
679
+ }
680
+
681
+ // Reset quiz
682
+ function resetQuiz() {
683
+ currentQuestionIndex = 0;
684
+ answers = Array(14).fill(null);
685
+ landingSection.classList.remove('hidden');
686
+ quizSection.classList.add('hidden');
687
+ resultsPlaceholder.classList.remove('hidden');
688
+ resultsContainer.classList.add('hidden');
689
+ }
690
+
691
+ // Event Listeners
692
+ startQuizBtn.addEventListener('click', () => {
693
+ landingSection.classList.add('hidden');
694
+ quizSection.classList.remove('hidden');
695
+ init();
696
+ });
697
+
698
+ nextBtn.addEventListener('click', nextQuestion);
699
+ prevBtn.addEventListener('click', prevQuestion);
700
+ exportPdfBtn.addEventListener('click', exportToPDF);
701
+ exportJsonBtn.addEventListener('click', exportToJSON);
702
+ resetBtn.addEventListener('click', resetQuiz);
703
+
704
+ // Initialize on load
705
+ document.addEventListener('DOMContentLoaded', () => {
706
+ // Simulate completed quiz for demo
707
+ setTimeout(() => {
708
+ if (window.location.hash === '#demo') {
709
+ answers = [5, 4, 3, 4, 5, 2, 4, 5, 4, 3, 4, 5, 3, 4];
710
+ showResults();
711
+ landingSection.classList.add('hidden');
712
+ quizSection.classList.remove('hidden');
713
+ }
714
+ }, 1000);
715
+ });
716
+ </script>
717
+ <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=Wbazin25/soncase" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
718
+ </html>