{% extends 'base.html.twig' %}
{% block title %}Contact - ID Numérique Haïti{% endblock %}
{% block body %}
<main>
<section class="page-header">
<div class="container">
<h1>Contactez-Nous</h1>
<p>Nous sommes à votre écoute pour toute question ou suggestion</p>
</div>
</section>
<section class="contact-section">
<div class="container">
<div class="contact-info">
<h2>Nos Coordonnées</h2>
<div class="info-item">
<div class="info-icon">
<i class="fas fa-map-marker-alt"></i>
</div>
<div class="info-content">
<h3>Adresse</h3>
<p>123 Rue Principale, Port-au-Prince, Haïti</p>
</div>
</div>
<div class="info-item">
<div class="info-icon">
<i class="fas fa-phone-alt"></i>
</div>
<div class="info-content">
<h3>Téléphone</h3>
<p><a href="tel:+509xxxxxxxx">+509 xxx xxx xxx</a></p>
</div>
</div>
<div class="info-item">
<div class="info-icon">
<i class="fas fa-envelope"></i>
</div>
<div class="info-content">
<h3>Email</h3>
<p><a href="mailto:support@idantifyem.ht">support@idantifyem.ht</a></p>
</div>
</div>
<div class="info-item">
<div class="info-icon">
<i class="fas fa-clock"></i>
</div>
<div class="info-content">
<h3>Heures d'ouverture</h3>
<p>Lundi - Vendredi: 8h00 - 17h00</p>
<p>Samedi: 9h00 - 13h00</p>
</div>
</div>
<div class="social-contact">
<h3>Suivez-nous</h3>
<div class="social-icons">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
<div class="contact-form">
<h2>Envoyez-nous un message</h2>
<form id="contactForm">
<div class="form-group">
<label for="name">Nom complet</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="phone">Téléphone</label>
<input type="tel" id="phone" name="phone">
</div>
<div class="form-group">
<label for="subject">Sujet</label>
<input type="text" id="subject" name="subject" required>
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea id="message" name="message" rows="5" required></textarea>
</div>
<button type="submit" class="btn btn-primary">Envoyer le message</button>
<div id="loadingSpinner" class="loading-spinner" style="display: none;"></div>
</form>
<!-- Bouton pour afficher/masquer les données stockées (visible uniquement pour les administrateurs) -->
<button id="toggleStoredData" class="toggle-stored-data" style="display: none;">
<i class="fas fa-database"></i> Afficher les données stockées
</button>
<!-- Visualiseur de données stockées -->
<div id="storedDataViewer" class="stored-data-viewer">
<h3>Données des formulaires enregistrées</h3>
<div id="storedDataList" class="stored-data-list"></div>
</div>
</div>
</div>
</section>
<section class="map-section">
<div class="container">
<h2>Nous Trouver</h2>
<div class="map-container">
<!-- Ici, vous pouvez intégrer une carte Google Maps ou OpenStreetMap -->
<div class="map-placeholder">
<img src="{{ asset('images/carte1.png') }}" alt="Carte de localisation">
<p>Carte interactive sera chargée ici</p>
</div>
</div>
</div>
</section>
<section class="faq-section">
<div class="container">
<div class="section-header">
<h2>Questions Fréquentes</h2>
<p>Trouvez rapidement des réponses à vos questions</p>
</div>
<div class="faq-container">
<div class="faq-item">
<div class="faq-question">
<h3>Comment puis-je télécharger l'application ID Numérique?</h3>
<span class="faq-toggle"><i class="fas fa-plus"></i></span>
</div>
<div class="faq-answer">
<p>L'application ID Numérique est disponible gratuitement sur Google Play Store pour les appareils Android. Vous pouvez également scanner le QR code disponible sur notre site pour être redirigé vers la page de téléchargement.</p>
</div>
</div>
<div class="faq-item">
<div class="faq-question">
<h3>Quels documents sont nécessaires pour créer mon identité numérique?</h3>
<span class="faq-toggle"><i class="fas fa-plus"></i></span>
</div>
<div class="faq-answer">
<p>Pour créer votre identité numérique, vous aurez besoin de votre carte nationale d'identité ou de votre passeport. L'application vous guidera tout au long du processus d'inscription et de vérification.</p>
</div>
</div>
<div class="faq-item">
<div class="faq-question">
<h3>Mes données personnelles sont-elles en sécurité?</h3>
<span class="faq-toggle"><i class="fas fa-plus"></i></span>
</div>
<div class="faq-answer">
<p>Absolument. La sécurité de vos données est notre priorité absolue. Nous utilisons un cryptage de bout en bout et des protocoles de sécurité avancés pour protéger vos informations personnelles. De plus, vous contrôlez entièrement quelles informations sont partagées et avec qui.</p>
</div>
</div>
<div class="faq-item">
<div class="faq-question">
<h3>Que faire si je perds mon téléphone?</h3>
<span class="faq-toggle"><i class="fas fa-plus"></i></span>
</div>
<div class="faq-answer">
<p>En cas de perte ou de vol de votre téléphone, votre compte reste protégé. Vous pouvez immédiatement désactiver votre compte en contactant notre service client. Une fois que vous avez un nouveau téléphone, vous pouvez réactiver votre compte en suivant notre processus de vérification sécurisé.</p>
</div>
</div>
<div class="faq-item">
<div class="faq-question">
<h3>Comment puis-je contrôler mes données personnelles?</h3>
<span class="faq-toggle"><i class="fas fa-plus"></i></span>
</div>
<div class="faq-answer">
<p>Vous gardez le contrôle total sur vos données :</p>
<ul>
<li>Vous pouvez consulter vos informations à tout moment</li>
<li>Vous pouvez désactiver l'accès à certaines fonctions ou données</li>
<li>Vous pouvez demander la suppression définitive de votre profil via l'application</li>
</ul>
</div>
</div>
<div class="faq-item">
<div class="faq-question">
<h3>Comment les autorités peuvent-elles accéder à mes données?</h3>
<span class="faq-toggle"><i class="fas fa-plus"></i></span>
</div>
<div class="faq-answer">
<p>Certaines autorités habilitées (policiers, agents ONI, etc.) peuvent vérifier votre identité si vous êtes dans l'incapacité de le faire vous-même. Cette vérification se fait via un système sécurisé, limité et traçable, sans accès à l'ensemble de vos données. Aucune consultation abusive ne sera tolérée.</p>
</div>
</div>
<div class="faq-item">
<div class="faq-question">
<h3>Quels sont mes droits concernant mes données personnelles?</h3>
<span class="faq-toggle"><i class="fas fa-plus"></i></span>
</div>
<div class="faq-answer">
<p>Conformément aux principes internationaux de protection de la vie privée, vous avez :</p>
<ul>
<li>Le droit à l'information sur l'utilisation de vos données</li>
<li>Le droit d'accès à vos informations</li>
<li>Le droit de retirer votre consentement à tout moment</li>
</ul>
</div>
</div>
</div>
</div>
</section>
</main>
<script>
// Script pour la section FAQ
document.addEventListener('DOMContentLoaded', function() {
const faqItems = document.querySelectorAll('.faq-item');
faqItems.forEach(item => {
const question = item.querySelector('.faq-question');
question.addEventListener('click', () => {
// Toggle active class
item.classList.toggle('active');
// Change icon
const icon = item.querySelector('.faq-toggle i');
if (item.classList.contains('active')) {
icon.classList.remove('fa-plus');
icon.classList.add('fa-minus');
} else {
icon.classList.remove('fa-minus');
icon.classList.add('fa-plus');
}
});
});
});
</script>
{% endblock %}