Embed

<div class="validator-wrapper">
    <div class="certificate-card">
        <div class="brand-header">
            <div class="logo-circle">AJDH</div>
            <h2>Vérification Officielle</h2>
        </div>

        <div class="search-section">
            <label for="certNumber">Numéro de Certificat</label>
            <div class="input-container">
                <input type="text" id="certNumber" placeholder="Ex: AJDH343975">
                <button onclick="verifyFromSheet()" id="verifyBtn">Vérifier</button>
            </div>
        </div>

        <div id="loading" class="hidden" style="font-size: 14px; color: #666;">Recherche en cours...</div>

        <div id="successResult" class="result-box hidden">
            <div class="valid-badge">✔ Certificat Valide</div>
            <div class="data-table">
                <div class="data-row"><span>Titulaire:</span> <strong id="outName"></strong></div>
                <div class="data-row"><span>Formation:</span> <strong id="outCourse"></strong></div>
                <div class="data-row"><span>Date d'émission:</span> <strong id="outDate"></strong></div>
            </div>
        </div>

        <div id="errorResult" class="error-box hidden">
            ❌ Aucun certificat trouvé avec ce numéro.
        </div>
    </div>
</div>

<style>
    /* التنسيق الاحترافي */
    .validator-wrapper { padding: 40px 15px; display: flex; justify-content: center; font-family: 'Segoe UI', sans-serif; }
    .certificate-card { background: #fff; width: 100%; max-width: 450px; border-radius: 20px; padding: 35px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border-top: 5px solid #004d40; text-align: center; }
    .brand-header h2 { font-size: 20px; color: #333; margin-top: 10px; }
    .logo-circle { width: 50px; height: 50px; background: #004d40; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto; font-weight: bold; }
    .input-container { display: flex; gap: 8px; margin-top: 5px; }
    input[type="text"] { flex: 1; padding: 12px; border: 2px solid #eee; border-radius: 10px; outline: none; }
    #verifyBtn { background: #004d40; color: white; border: none; padding: 0 20px; border-radius: 10px; cursor: pointer; font-weight: bold; }
    .result-box { margin-top: 25px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 12px; padding: 20px; }
    .valid-badge { color: #166534; font-weight: bold; margin-bottom: 15px; }
    .data-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed #ccc; font-size: 14px; }
    .error-box { margin-top: 20px; color: #991b1b; background: #fef2f2; padding: 15px; border-radius: 10px; }
    .hidden { display: none; }
</style>

<script>
    async function verifyFromSheet() {
        const id = document.getElementById('certNumber').value.trim();
        const scriptURL = "https://script.google.com/macros/s/AKfycbzgm--b12WarQOdFSh0BS6ZtPyy5qGqZsrzC_E5AabE4STJDZDTgMdT1J2i_xubVo4/exec";
        
        if(!id) return alert("Veuillez entrer un numéro.");

        // إظهار حالة التحميل وإخفاء النتائج السابقة
        document.getElementById('loading').classList.remove('hidden');
        document.getElementById('successResult').classList.add('hidden');
        document.getElementById('errorResult').classList.add('hidden');

        try {
            const response = await fetch(`${scriptURL}?id=${id}`);
            const data = await response.json();

            document.getElementById('loading').classList.add('hidden');

            if (data.status === "success") {
                document.getElementById('outName').innerText = data.name;
                document.getElementById('outCourse').innerText = data.course;
                document.getElementById('outDate').innerText = data.date;
                document.getElementById('successResult').classList.remove('hidden');
            } else {
                document.getElementById('errorResult').classList.remove('hidden');
            }
        } catch (error) {
            document.getElementById('loading').classList.add('hidden');
            alert("Erreur de connexion au serveur.");
        }
    }
</script>

Association des Jeunes Diplômés en Hydrocarbures -

Crees un logo pour le “Forum Annuel de l’Energie” 