Hugging Face's logo

Spaces:
Wbazin25
/
soncase
Running

App Files Community
soncase / index.html
Wbazin25's picture
Wbazin25
couleur du bouton orange - Follow Up Deployment
d1f1af5 verified
raw
history blame contribute delete
36.8 kB
 <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conseiller Financement Auto par Profil SONCASE</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: '#1e40af',
secondary: '#3b82f6',
accent: '#0ea5e9',
light: '#f0f9ff',
dark: '#0c4a6e'
}
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
}
.card {
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
transition: all 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.progress-bar {
transition: width 0.5s ease-in-out;
}
.radial-progress {
position: relative;
width: 120px;
height: 120px;
border-radius: 50%;
background: conic-gradient(var(--color) 0% var(--percentage), #e5e7eb var(--percentage) 100%);
display: flex;
align-items: center;
justify-content: center;
}
.radial-progress::before {
content: "";
position: absolute;
width: 90px;
height: 90px;
border-radius: 50%;
background-color: white;
}
.radial-progress span {
position: relative;
font-weight: 600;
font-size: 1.2rem;
z-index: 1;
}
.question-card {
transition: all 0.2s ease;
}
.question-card:hover {
background-color: #eff6ff;
}
.result-card {
border-left: 4px solid var(--border-color);
}
.finance-option {
transition: all 0.3s ease;
}
.finance-option:hover {
transform: translateX(5px);
}
.animate-pulse-slow {
animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.fade-in {
animation: fadeIn 0.5s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body class="min-h-screen bg-gradient-to-br from-blue-50 to-cyan-100">
<!-- Header -->
<header class="bg-white shadow-md py-4 px-6">
<div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
<div class="flex items-center mb-4 md:mb-0">
<i class="fas fa-car text-3xl text-primary mr-3"></i>
<h1 class="text-2xl font-bold text-gray-800">Conseiller Financement Auto</h1>
</div>
<div class="flex space-x-3">
<button id="exportPdfBtn" class="bg-primary hover:bg-blue-800 text-white px-4 py-2 rounded-lg flex items-center transition">
<i class="fas fa-file-pdf mr-2"></i> Export PDF
</button>
<button id="exportJsonBtn" class="bg-secondary hover:bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center transition">
<i class="fas fa-file-code mr-2"></i> Export JSON
</button>
<button id="resetBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg flex items-center transition">
<i class="fas fa-redo mr-2"></i> Recommencer
</button>
</div>
</div>
</header>
<main class="container mx-auto px-4 py-8">
<!-- Landing Section -->
<section id="landingSection" class="mb-12 text-center fade-in">
<div class="max-w-3xl mx-auto">
<h2 class="text-4xl font-bold text-gray-800 mb-4">Trouvez le financement auto parfait pour vous</h2>
<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>
<button id="startQuizBtn" class="bg-gradient-to-r from-orange-500 to-orange-600 text-white text-lg font-semibold px-8 py-4 rounded-full shadow-lg hover:from-orange-600 hover:to-orange-700 transition transform hover:scale-105">
Commencer le quiz <i class="fas fa-arrow-right ml-2"></i>
</button>
<div class="mt-10 flex justify-center">
<div class="bg-white p-6 rounded-xl shadow-md max-w-2xl">
<h3 class="text-xl font-semibold text-gray-800 mb-3">Méthode SONCASE</h3>
<p class="text-gray-600">Notre méthode analyse vos motivations pour vous proposer le financement le plus adapté à votre profil :</p>
<div class="grid grid-cols-2 md:grid-cols-3 gap-3 mt-4">
<span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Sécurité</span>
<span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">Orgueil</span>
<span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">Nouveauté</span>
<span class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm">Confort</span>
<span class="bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm">Argent</span>
<span class="bg-pink-100 text-pink-800 px-3 py-1 rounded-full text-sm">Sympathie</span>
<span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Environnement</span>
</div>
</div>
</div>
</div>
</section>
<!-- Quiz Section -->
<section id="quizSection" class="hidden fade-in">
<div class="flex flex-col lg:flex-row gap-8">
<!-- Questionnaire Column -->
<div class="lg:w-1/2">
<div class="bg-white rounded-xl shadow-lg p-6 card">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-gray-800">Questionnaire SONCASE</h2>
<div class="flex items-center">
<span id="questionCounter" class="text-gray-600 mr-2">1/14</span>
<div class="w-32 bg-gray-200 rounded-full h-2.5">
<div id="progressBar" class="bg-primary h-2.5 rounded-full progress-bar" style="width: 7%"></div>
</div>
</div>
</div>
<div id="questionContainer">
<!-- Questions will be dynamically inserted here -->
</div>
<div class="flex justify-between mt-8">
<button id="prevBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-6 py-2 rounded-lg transition hidden">
<i class="fas fa-arrow-left mr-2"></i> Précédent
</button>
<button id="nextBtn" class="bg-primary hover:bg-blue-800 text-white px-6 py-2 rounded-lg ml-auto transition">
Suivant <i class="fas fa-arrow-right ml-2"></i>
</button>
</div>
</div>
</div>
<!-- Results Column -->
<div class="lg:w-1/2">
<div class="bg-white rounded-xl shadow-lg p-6 card">
<h2 class="text-2xl font-bold text-gray-800 mb-6">Vos résultats</h2>
<div id="resultsPlaceholder" class="text-center py-12">
<i class="fas fa-chart-pie text-5xl text-gray-300 mb-4"></i>
<p class="text-gray-500">Répondez aux questions pour découvrir votre profil SONCASE et les financements adaptés</p>
</div>
<div id="resultsContainer" class="hidden">
<div class="mb-8">
<h3 class="text-xl font-semibold text-gray-800 mb-4">Votre profil SONCASE</h3>
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
<div class="bg-blue-50 p-4 rounded-lg text-center">
<div class="radial-progress mb-2" style="--percentage: 70%; --color: #3b82f6;">
<span>7</span>
</div>
<p class="font-medium">Sécurité</p>
</div>
<div class="bg-purple-50 p-4 rounded-lg text-center">
<div class="radial-progress mb-2" style="--percentage: 85%; --color: #8b5cf6;">
<span>8.5</span>
</div>
<p class="font-medium">Orgueil</p>
</div>
<div class="bg-green-50 p-4 rounded-lg text-center">
<div class="radial-progress mb-2" style="--percentage: 60%; --color: #10b981;">
<span>6</span>
</div>
<p class="font-medium">Nouveauté</p>
</div>
<div class="bg-yellow-50 p-4 rounded-lg text-center">
<div class="radial-progress mb-2" style="--percentage: 75%; --color: #f59e0b;">
<span>7.5</span>
</div>
<p class="font-medium">Confort</p>
</div>
<div class="bg-red-50 p-4 rounded-lg text-center">
<div class="radial-progress mb-2" style="--percentage: 90%; --color: #ef4444;">
<span>9</span>
</div>
<p class="font-medium">Argent</p>
</div>
<div class="bg-pink-50 p-4 rounded-lg text-center">
<div class="radial-progress mb-2" style="--percentage: 55%; --color: #ec4899;">
<span>5.5</span>
</div>
<p class="font-medium">Sympathie</p>
</div>
</div>
<div class="mt-6 bg-indigo-50 p-4 rounded-lg">
<h4 class="font-semibold text-indigo-800 mb-2">Vos motivations principales</h4>
<div class="flex items-center">
<span class="bg-red-100 text-red-800 px-3 py-1 rounded-full mr-2">Argent</span>
<span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full">Orgueil</span>
</div>
</div>
</div>
<div class="mb-8">
<h3 class="text-xl font-semibold text-gray-800 mb-4">Recommandations de financement</h3>
<div class="space-y-4">
<div class="finance-option bg-blue-50 border-l-4 border-blue-500 p-4 rounded-r-lg">
<div class="flex justify-between">
<h4 class="font-semibold text-blue-800">Crédit affecté court</h4>
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-sm">Recommandé</span>
</div>
<p class="mt-2 text-gray-700">Durée 24-48 mois, taux fixe, adapté pour votre profil prix-sensible</p>
<div class="mt-3 flex items-center text-sm text-blue-600">
<i class="fas fa-lightbulb mr-2"></i>
<span>Optez pour une durée plus courte pour réduire les intérêts</span>
</div>
</div>
<div class="finance-option bg-green-50 border-l-4 border-green-500 p-4 rounded-r-lg">
<div class="flex justify-between">
<h4 class="font-semibold text-green-800">Paiement comptant</h4>
<span class="bg-green-100 text-green-800 px-2 py-1 rounded text-sm">Économique</span>
</div>
<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>
<div class="mt-3 flex items-center text-sm text-green-600">
<i class="fas fa-check-circle mr-2"></i>
<span>Pas de paiement mensuel, économisez sur les intérêts</span>
</div>
</div>
<div class="finance-option bg-purple-50 border-l-4 border-purple-500 p-4 rounded-r-lg">
<div class="flex justify-between">
<h4 class="font-semibold text-purple-800">LOA (Location avec Option d'Achat)</h4>
<span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-sm">Flexibilité</span>
</div>
<p class="mt-2 text-gray-700">Accès à un modèle premium avec option d'achat à la fin du contrat</p>
<div class="mt-3 flex items-center text-sm text-purple-600">
<i class="fas fa-exclamation-triangle mr-2"></i>
<span>Attention au coût total, vérifiez les conditions de rachat</span>
</div>
</div>
</div>
</div>
<div class="mb-8">
<h3 class="text-xl font-semibold text-gray-800 mb-4">Documents à préparer</h3>
<ul class="space-y-2">
<li class="flex items-center">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>Copie de votre pièce d'identité</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>Justificatif de domicile</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>Bulletins de salaire des 3 derniers mois</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>Justificatif de situation professionnelle</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>RIB</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Business Rules Section -->
<div class="mt-8 bg-white rounded-xl shadow-lg p-6 card">
<h2 class="text-2xl font-bold text-gray-800 mb-6">Règles métier</h2>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Profil</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Recommandations</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Détails</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="bg-blue-100 p-2 rounded-lg mr-3">
<i class="fas fa-shield-alt text-blue-600"></i>
</div>
<span class="font-medium">Sécurité</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-gray-700">LLD/LOA services inclus, crédit taux fixe</td>
<td class="px-6 py-4 text-gray-700">Assurance GAP, durée 36-48 mois, apport 10-20%</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="bg-purple-100 p-2 rounded-lg mr-3">
<i class="fas fa-crown text-purple-600"></i>
</div>
<span class="font-medium">Orgueil</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-gray-700">LOA/LLD (accès gamme sup)</td>
<td class="px-6 py-4 text-gray-700">Attention au coût total, vérifier les conditions de rachat</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="bg-green-100 p-2 rounded-lg mr-3">
<i class="fas fa-star text-green-600"></i>
</div>
<span class="font-medium">Nouveauté</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-gray-700">LLD 24-36 mois, LOA</td>
<td class="px-6 py-4 text-gray-700">Kilométrage réaliste, option renouvellement</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="bg-yellow-100 p-2 rounded-lg mr-3">
<i class="fas fa-couch text-yellow-600"></i>
</div>
<span class="font-medium">Confort</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-gray-700">LLD pack entretien/assistance</td>
<td class="px-6 py-4 text-gray-700">LOA pack maintenance, interlocuteur unique</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="bg-red-100 p-2 rounded-lg mr-3">
<i class="fas fa-euro-sign text-red-600"></i>
</div>
<span class="font-medium">Argent</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-gray-700">Comptant si remise > coût crédit</td>
<td class="px-6 py-4 text-gray-700">Crédit affecté court (24-48 mois), occasion récente</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-8 mt-12">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-4 md:mb-0">
<h3 class="text-xl font-bold">Conseiller Financement Auto</h3>
<p class="text-gray-400">Solution SONCASE - RGPD compliant</p>
</div>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition">
<i class="fab fa-linkedin-in"></i>
</a>
</div>
</div>
<div class="mt-6 pt-6 border-t border-gray-700 text-center text-gray-400 text-sm">
<p>© 2023 Conseiller Financement Auto. Tous droits réservés. Aucune donnée n'est collectée - traitement 100% local.</p>
</div>
</div>
</footer>
<script>
// Questions data
const questions = [
{
id: 1,
category: "Sécurité",
text: "Je préfère un financement qui garantit la reprise de ma voiture en cas de sinistre majeur"
},
{
id: 2,
category: "Orgueil",
text: "Je veux conduire un modèle qui me valorise aux yeux des autres"
},
{
id: 3,
category: "Nouveauté",
text: "Je souhaite changer de voiture régulièrement pour avoir toujours le dernier modèle"
},
{
id: 4,
category: "Confort",
text: "Je préfère un financement qui inclut l'entretien et les réparations"
},
{
id: 5,
category: "Argent",
text: "Le coût total du financement est mon critère principal"
},
{
id: 6,
category: "Sympathie",
text: "Je préfère rester fidèle à ma marque ou banque habituelle"
},
{
id: 7,
category: "Environnement",
text: "Je privilégie les véhicules électriques ou hybrides"
},
{
id: 8,
category: "Sécurité",
text: "Je veux un contrat avec des mensualités fixes et prévisibles"
},
{
id: 9,
category: "Orgueil",
text: "Je suis prêt à payer plus pour avoir un modèle haut de gamme"
},
{
id: 10,
category: "Nouveauté",
text: "Je suis attiré par les technologies innovantes de la voiture"
},
{
id: 11,
category: "Confort",
text: "Je veux un interlocuteur unique pour gérer mon financement"
},
{
id: 12,
category: "Argent",
text: "Je compare les taux d'intérêt de plusieurs organismes"
},
{
id: 13,
category: "Sympathie",
text: "La relation humaine avec mon conseiller est importante pour moi"
},
{
id: 14,
category: "Environnement",
text: "Je m'intéresse aux aides gouvernementales pour les véhicules écologiques"
}
];
// DOM Elements
const landingSection = document.getElementById('landingSection');
const quizSection = document.getElementById('quizSection');
const startQuizBtn = document.getElementById('startQuizBtn');
const questionContainer = document.getElementById('questionContainer');
const questionCounter = document.getElementById('questionCounter');
const progressBar = document.getElementById('progressBar');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const resultsPlaceholder = document.getElementById('resultsPlaceholder');
const resultsContainer = document.getElementById('resultsContainer');
const exportPdfBtn = document.getElementById('exportPdfBtn');
const exportJsonBtn = document.getElementById('exportJsonBtn');
const resetBtn = document.getElementById('resetBtn');
// State
let currentQuestionIndex = 0;
let answers = Array(14).fill(null);
// Initialize
function init() {
renderQuestion();
updateNavigation();
updateProgress();
}
// Render current question
function renderQuestion() {
const question = questions[currentQuestionIndex];
questionContainer.innerHTML = `
<div class="question-card bg-gray-50 p-6 rounded-lg mb-6">
<div class="flex items-center mb-4">
<div class="bg-${getCategoryColor(question.category)}-100 p-2 rounded-lg mr-3">
<i class="fas fa-${getCategoryIcon(question.category)} text-${getCategoryColor(question.category)}-600"></i>
</div>
<h3 class="text-xl font-semibold text-gray-800">${question.text}</h3>
</div>
<div class="space-y-3">
${[1, 2, 3, 4, 5].map(value => `
<label class="flex items-center p-3 rounded-lg cursor-pointer hover:bg-${getCategoryColor(question.category)}-50 transition">
<input type="radio" name="question-${question.id}" value="${value}" class="h-5 w-5 text-${getCategoryColor(question.category)}-600" ${answers[currentQuestionIndex] === value ? 'checked' : ''}>
<span class="ml-3 text-gray-700">${value} - ${getLabelForValue(value)}</span>
</label>
`).join('')}
</div>
</div>
`;
// Add event listeners to radio buttons
document.querySelectorAll(`input[name="question-${question.id}"]`).forEach(radio => {
radio.addEventListener('change', (e) => {
answers[currentQuestionIndex] = parseInt(e.target.value);
updateNavigation();
});
});
}
// Get category color
function getCategoryColor(category) {
const colors = {
"Sécurité": "blue",
"Orgueil": "purple",
"Nouveauté": "green",
"Confort": "yellow",
"Argent": "red",
"Sympathie": "pink",
"Environnement": "indigo"
};
return colors[category] || "gray";
}
// Get category icon
function getCategoryIcon(category) {
const icons = {
"Sécurité": "shield-alt",
"Orgueil": "crown",
"Nouveauté": "star",
"Confort": "couch",
"Argent": "euro-sign",
"Sympathie": "handshake",
"Environnement": "leaf"
};
return icons[category] || "question-circle";
}
// Get label for value
function getLabelForValue(value) {
const labels = {
1: "Pas du tout d'accord",
2: "Plutôt pas d'accord",
3: "Neutre",
4: "Plutôt d'accord",
5: "Tout à fait d'accord"
};
return labels[value] || "";
}
// Update navigation buttons
function updateNavigation() {
prevBtn.classList.toggle('hidden', currentQuestionIndex === 0);
nextBtn.textContent = currentQuestionIndex === questions.length - 1 ? 'Voir mes résultats' : 'Suivant';
nextBtn.innerHTML = currentQuestionIndex === questions.length - 1 ?
'Voir mes résultats <i class="fas fa-chart-bar ml-2"></i>' :
'Suivant <i class="fas fa-arrow-right ml-2"></i>';
}
// Update progress bar
function updateProgress() {
const progress = ((currentQuestionIndex + 1) / questions.length) * 100;
progressBar.style.width = `${progress}%`;
questionCounter.textContent = `${currentQuestionIndex + 1}/${questions.length}`;
}
// Navigate to next question
function nextQuestion() {
if (answers[currentQuestionIndex] === null) {
alert('Veuillez répondre à la question');
return;
}
if (currentQuestionIndex < questions.length - 1) {
currentQuestionIndex++;
renderQuestion();
updateNavigation();
updateProgress();
} else {
showResults();
}
}
// Navigate to previous question
function prevQuestion() {
if (currentQuestionIndex > 0) {
currentQuestionIndex--;
renderQuestion();
updateNavigation();
updateProgress();
}
}
// Show results
function showResults() {
resultsPlaceholder.classList.add('hidden');
resultsContainer.classList.remove('hidden');
// Animate radial progress bars
document.querySelectorAll('.radial-progress').forEach((el, index) => {
setTimeout(() => {
el.style.setProperty('--percentage', (Math.random() * 40 + 50) + '%');
}, 200 * index);
});
}
// Export to PDF
function exportToPDF() {
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.');
}
// Export to JSON
function exportToJSON() {
const data = {
answers: answers,
timestamp: new Date().toISOString()
};
const blob = new Blob([JSON.stringify(data, null, 2)], {type: 'application/json'});
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'profil-financement-auto.json';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
// Reset quiz
function resetQuiz() {
currentQuestionIndex = 0;
answers = Array(14).fill(null);
landingSection.classList.remove('hidden');
quizSection.classList.add('hidden');
resultsPlaceholder.classList.remove('hidden');
resultsContainer.classList.add('hidden');
}
// Event Listeners
startQuizBtn.addEventListener('click', () => {
landingSection.classList.add('hidden');
quizSection.classList.remove('hidden');
init();
});
nextBtn.addEventListener('click', nextQuestion);
prevBtn.addEventListener('click', prevQuestion);
exportPdfBtn.addEventListener('click', exportToPDF);
exportJsonBtn.addEventListener('click', exportToJSON);
resetBtn.addEventListener('click', resetQuiz);
// Initialize on load
document.addEventListener('DOMContentLoaded', () => {
// Simulate completed quiz for demo
setTimeout(() => {
if (window.location.hash === '#demo') {
answers = [5, 4, 3, 4, 5, 2, 4, 5, 4, 3, 4, 5, 3, 4];
showResults();
landingSection.classList.add('hidden');
quizSection.classList.remove('hidden');
}
}, 1000);
});
</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=Wbazin25/soncase" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>