<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Votre Invitation</title>
<link rel="apple-touch-icon" sizes="180x180" href="favicon_io/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon_io/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon_io/favicon-16x16.png">
<link rel="manifest" href="favicon_io/site.webmanifest">


    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/invitation.css">
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
</head>
<body>

<div id="invitation-content" class="container invitation-card text-center mt-5 p-5">
    <a href="index.php"><img src="images/ChatGPT 7.png" height="50" alt=""></a>
    <h1 class="invite-title" style="text-shadow: 0 1px 3px rgba(0,0,0,0.2);">Mariage Coutumier</h1>
    <p class="invite-names">Aaron <span>&</span> Priscillia</p>
    <p class="invite-text">Ont l'immense plaisir de vous convier à leur mariage coutumier<br>
        le <strong>20 décembre 2025</strong> à <strong>18h30</strong></p><hr><p>Votre presence est déjà notre precieux cadeaux.</p>

    <div class="invite-details mt-4">
        <p><strong>Lieu :</strong> PullMan, Kinshasa</p>
        <p><strong>Réception :</strong> Salle des Miroirs - 18h30</p>
    </div>
</div> <div class="container text-center">
    <button id="downloadButton" class="btn download-btn mt-3">
        📥 Télécharger l'invitation PDF
    </button>
</div>


<footer class="text-center mt-5">
    <h1 class="text-dark">
    &copy; 2025 Aaron & Priscillia - Tous droits réservés</h1>
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<script>
document.getElementById('downloadButton').addEventListener('click', function () {
    // Cibler l'élément que nous voulons convertir
    const element = document.getElementById('invitation-content');
    
    // Configuration pour le PDF (nom du fichier et qualité)
    const options = {
        margin:       0.5, // Marge en pouces
        filename:     'Invitation_Aaron_Princillia.pdf',
        image:        { type: 'jpeg', quality: 0.98 },
        html2canvas:  { scale: 2 }, // Meilleure qualité d'image
        jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
    };

    // Lancer la conversion et le téléchargement
    html2pdf().set(options).from(element).save();
});
</script>

</body>
</html>