Home
Omer fils ELENGA
Générateur de Certificat Officiel

Générateur de Certificat Officiel

This tailwind example is contributed by Omer fils ELENGA, on 03-Jan-2026. Component is made with Tailwind CSS v3. It is responsive.

Hero Comment Section

Author Omer fils ELENGA

117

Fork Fullscreen

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Générateur de Certificat Moderne</title>
    <script src="https://cdn.tailwindcss.com"></script>
    
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
    <style>
        body {
            background-color: #f8fafc;
            font-family: 'Montserrat', sans-serif;
        }
        .canvas-container {
            box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
        }
        @media print {
            .no-print { display: none; }
            body { background: white; margin: 0; }
            .canvas-container { box-shadow: none; }
        }
    </style>
</head>
<body class="min-h-screen py-10 px-4">

<div class="max-w-5xl mx-auto">
        
        <div class="no-print text-center mb-8">
            <h1 class="text-3xl font-bold text-slate-800 mb-2">Générateur de Certificat Officiel</h1>
            <p class="text-slate-600">Personnalisez et téléchargez votre certificat au format haute définition.</p>
        </div>

<div class="grid lg:grid-cols-3 gap-8">
            
            
            <div class="no-print bg-white p-6 rounded-2xl shadow-sm border border-slate-200 h-fit">
                <h2 class="text-xl font-semibold mb-4 text-slate-700">Paramètres</h2>
                
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-slate-500 mb-1">Nom du Récipiendaire</label>
                        <input type="text" id="inputName" value="Jean Dupont" class="w-full px-4 py-2 rounded-lg border border-slate-300 focus:ring-2 focus:ring-indigo-500 outline-none transition-all">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-500 mb-1">Nom de la Formation</label>
                        <input type="text" id="inputCourse" value="Expert en Design Interface" class="w-full px-4 py-2 rounded-lg border border-slate-300 focus:ring-2 focus:ring-indigo-500 outline-none transition-all">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-500 mb-1">Date d'émission</label>
                        <input type="date" id="inputDate" class="w-full px-4 py-2 rounded-lg border border-slate-300 focus:ring-2 focus:ring-indigo-500 outline-none transition-all">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-500 mb-1">Nom du Signataire</label>
                        <input type="text" id="inputSignatory" value="Directeur Académique" class="w-full px-4 py-2 rounded-lg border border-slate-300 focus:ring-2 focus:ring-indigo-500 outline-none transition-all">
                    </div>
                </div>

<div class="mt-8 space-y-3">
                    <button id="downloadBtn" class="w-full bg-slate-900 hover:bg-black text-white font-bold py-3 rounded-xl transition-all flex items-center justify-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
                        Télécharger Image
                    </button>
                    <button onclick="window.print()" class="w-full bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 font-bold py-3 rounded-xl transition-all flex items-center justify-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect width="12" height="8" x="6" y="14"/></svg>
                        Imprimer PDF
                    </button>
                </div>
            </div>

<div class="lg:col-span-2 flex justify-center items-start">
                <div class="canvas-container bg-white p-0 rounded-sm overflow-hidden border border-slate-200">
                    <canvas id="certCanvas"></canvas>
                </div>
            </div>
        </div>
    </div>

// Dimensions pour un format Paysage A4 (ratio ~1.41) en haute définition
        const SCALE = 2; // Facteur pour la HD
        const WIDTH = 1123 * SCALE;
        const HEIGHT = 794 * SCALE;

canvas.width = WIDTH;
        canvas.height = HEIGHT;
        
        // Ajustement visuel pour le responsive sur le web
        canvas.style.width = '100%';
        canvas.style.height = 'auto';

// Variables de données
        const inputs = {
            name: document.getElementById('inputName'),
            course: document.getElementById('inputCourse'),
            date: document.getElementById('inputDate'),
            signatory: document.getElementById('inputSignatory')
        };

// Initialisation de la date
        inputs.date.valueAsDate = new Date();

function drawCertificate() {
            // 1. Fond
            ctx.fillStyle = '#ffffff';
            ctx.fillRect(0, 0, WIDTH, HEIGHT);

// 2. Éléments Décoratifs (Modernes/Géométriques)
            // Bordure latérale gauche stylisée
            ctx.fillStyle = '#0f172a'; // Slate 900
            ctx.fillRect(0, 0, 80 * SCALE, HEIGHT);

// Accent doré/bleu
            ctx.fillStyle = '#6366f1'; // Indigo 500
            ctx.fillRect(80 * SCALE, 0, 10 * SCALE, HEIGHT);

// Triangle en haut à droite pour le dynamisme
            ctx.beginPath();
            ctx.moveTo(WIDTH, 0);
            ctx.lineTo(WIDTH - 250 * SCALE, 0);
            ctx.lineTo(WIDTH, 250 * SCALE);
            ctx.fillStyle = '#f1f5f9';
            ctx.fill();

// 3. Textes
            
            // Logo / Titre Institution
            ctx.textAlign = 'left';
            ctx.fillStyle = '#0f172a';
            ctx.font = `bold ${24 * SCALE}px Montserrat`;
            ctx.fillText('ACADEMIE DESIGN PRO', 130 * SCALE, 70 * SCALE);

// Titre Principal
            ctx.textAlign = 'center';
            ctx.font = `700 ${70 * SCALE}px 'Playfair Display', serif`;
            ctx.fillStyle = '#0f172a';
            ctx.fillText('CERTIFICAT DE RÉUSSITE', WIDTH / 2 + 40 * SCALE, HEIGHT * 0.25);

// Sous-titre
            ctx.font = `300 ${20 * SCALE}px Montserrat`;
            ctx.fillStyle = '#64748b';
            ctx.fillText('CE CERTIFICAT EST FIÈREMENT DÉCERNÉ À', WIDTH / 2 + 40 * SCALE, HEIGHT * 0.38);

// Nom du récipiendaire
            ctx.font = `700 ${60 * SCALE}px Montserrat`;
            ctx.fillStyle = '#1e293b';
            ctx.fillText(inputs.name.value.toUpperCase(), WIDTH / 2 + 40 * SCALE, HEIGHT * 0.48);

// Ligne décorative sous le nom
            ctx.strokeStyle = '#6366f1';
            ctx.lineWidth = 3 * SCALE;
            ctx.beginPath();
            ctx.moveTo(WIDTH/2 - 150 * SCALE, HEIGHT * 0.52);
            ctx.lineTo(WIDTH/2 + 230 * SCALE, HEIGHT * 0.52);
            ctx.stroke();

// Description
            ctx.font = `300 ${22 * SCALE}px Montserrat`;
            ctx.fillStyle = '#64748b';
            ctx.fillText('Pour avoir complété avec succès le programme de formation de :', WIDTH / 2 + 40 * SCALE, HEIGHT * 0.62);

// Nom de la formation
            ctx.font = `600 ${32 * SCALE}px Montserrat`;
            ctx.fillStyle = '#0f172a';
            ctx.fillText(inputs.course.value, WIDTH / 2 + 40 * SCALE, HEIGHT * 0.70);

// 4. Pied de page (Signatures et Date)
            
            // Date
            const dateObj = new Date(inputs.date.value);
            const formattedDate = dateObj.toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' });
            
            ctx.textAlign = 'left';
            ctx.font = `400 ${18 * SCALE}px Montserrat`;
            ctx.fillStyle = '#64748b';
            ctx.fillText('Délivré le :', 150 * SCALE, HEIGHT * 0.85);
            ctx.font = `bold ${18 * SCALE}px Montserrat`;
            ctx.fillStyle = '#0f172a';
            ctx.fillText(formattedDate, 150 * SCALE, HEIGHT * 0.89);

// Signature
            ctx.textAlign = 'right';
            ctx.font = `italic ${24 * SCALE}px 'Playfair Display'`;
            ctx.fillStyle = '#0f172a';
            ctx.fillText(inputs.signatory.value, WIDTH - 100 * SCALE, HEIGHT * 0.85);
            
            ctx.strokeStyle = '#cbd5e1';
            ctx.lineWidth = 1 * SCALE;
            ctx.beginPath();
            ctx.moveTo(WIDTH - 350 * SCALE, HEIGHT * 0.87);
            ctx.lineTo(WIDTH - 100 * SCALE, HEIGHT * 0.87);
            ctx.stroke();

ctx.font = `400 ${16 * SCALE}px Montserrat`;
            ctx.fillStyle = '#64748b';
            ctx.fillText('SIGNATURE AUTORISÉE', WIDTH - 100 * SCALE, HEIGHT * 0.91);

// Badge Scellé (Cercle décoratif)
            ctx.beginPath();
            ctx.arc(WIDTH * 0.53, HEIGHT * 0.85, 45 * SCALE, 0, Math.PI * 2);
            ctx.fillStyle = '#e2e8f0';
            ctx.fill();
            ctx.strokeStyle = '#6366f1';
            ctx.stroke();
            
            ctx.textAlign = 'center';
            ctx.font = `bold ${12 * SCALE}px Montserrat`;
            ctx.fillStyle = '#6366f1';
            ctx.fillText('CERTIFIÉ', WIDTH * 0.53, HEIGHT * 0.85 + 5 * SCALE);
        }

// Écouteurs d'événements pour la mise à jour en temps réel
        Object.values(inputs).forEach(input => {
            input.addEventListener('input', drawCertificate);
        });

// Téléchargement de l'image
        document.getElementById('downloadBtn').addEventListener('click', () => {
            const link = document.createElement('a');
            link.download = `Certificat_${inputs.name.value.replace(/\s+/g, '_')}.png`;
            link.href = canvas.toDataURL('image/png', 1.0);
            link.click();
        });

// Initial Draw
        window.onload = drawCertificate;
    </script>
</body>
</html>

Related Examples

Chat Box for Marketing
An Onyx component. This chat box is great for SAAS landing pages where you want to mock customer interactions or expectations.

Author:
Coastal UI

1 year ago

1.9k
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Author:
Ayyamperumal S

9 months ago

1.8k
Linear dinamique section by Raul antonio de la cruz hernandez remix omerlinx responsive
Linear dinamique section by Raul antonio de la cruz hernandez remix omerlinx responsive

Author:
Omer fils ELENGA

1 month ago

97
tinderclone By omerlinks
tinderclone By omerlinks

Author:
Omer fils ELENGA

1 month ago

55
omerlinkStream
omerlinkStream

Author:
Omer fils ELENGA

1 month ago

325
use-scroll-effect
use-scroll-effect

Author:
Omer fils ELENGA

1 month ago

235
LIQUID PLASMA by omerlinks
LIQUID PLASMA by omerlinks

Author:
Omer fils ELENGA

1 month ago

86
MENU OMERLINKS
MENU OMERLINKS

Author:
Omer fils ELENGA

2 weeks ago

34
card section neon
card section neon

Author:
Omer fils ELENGA

1 week ago

132
animated hero

Author:
Crimson

1 year ago

3.4k
Hero section
Beatiful landing page hero section

Author:
Rajesh Maheshwari

11 months ago

2.3k
Visernic Profile

Author:
MD Mostafa Niloy

3 months ago

479

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components