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

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

8 months ago

1.6k
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

2 weeks ago

60
tinderclone By omerlinks
tinderclone By omerlinks

Author:
Omer fils ELENGA

2 weeks ago

36
omerlinkStream
omerlinkStream

Author:
Omer fils ELENGA

2 weeks ago

195
use-scroll-effect
use-scroll-effect

Author:
Omer fils ELENGA

2 weeks ago

150
LIQUID PLASMA by omerlinks
LIQUID PLASMA by omerlinks

Author:
Omer fils ELENGA

2 weeks ago

30
SaaS Feature Section
It has a Gradient text headline and CTA buttons

Author:
Junclarkaizen Pagu

2 years ago

9.3k
Hero

Author:
Hasan AlDoy (McDoy)

1 year ago

1.5k
Portfolio Hero Section 3
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

8.6k
bears/beats/battlestar gallactica
bears beats battlestar gallactica

Author:
Anonymous

2 years ago

9.7k
Premium SAAS HERO Section
A hero section for your SAAS application

Author:
Emdadul Islam

1 year ago

2.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components