Embed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Verify certificates - AJDH</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
            background: #f5f7fa;
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 850px;
            margin: 0 auto;
            padding-top: 40px;
        }
        
        h1 {
            font-size: 48px;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 40px;
        }
        
        .verify-card {
            background: white;
            border-radius: 12px;
            padding: 40px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            margin-bottom: 30px;
        }
        
        .form-group {
            margin-bottom: 24px;
        }
        
        .form-label {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 20px;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 16px;
        }
        
        .required-icon {
            width: 24px;
            height: 24px;
            background: #dc3545;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 16px;
        }
        
        .code-input {
            width: 100%;
            padding: 16px 20px;
            font-size: 28px;
            font-weight: 500;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            background: #f8fafc;
            color: #4a5568;
            letter-spacing: 2px;
            transition: all 0.3s;
        }
        
        .code-input:focus {
            outline: none;
            border-color: #4a9d9c;
            background: white;
        }
        
        .verify-btn {
            width: 100%;
            max-width: 280px;
            padding: 18px 40px;
            background: #4a9d9c;
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 18px;
            font-weight: 700;
            text-transform: uppercase;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(74, 157, 156, 0.3);
            transition: all 0.3s;
            margin: 24px 0;
        }
        
        .verify-btn:hover {
            background: #3d8887;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(74, 157, 156, 0.4);
        }
        
        .verify-btn:active {
            transform: translateY(0);
        }
        
        .verify-btn:disabled {
            background: #cbd5e0;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        
        .required-text {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 16px;
            color: #dc3545;
            margin-top: 16px;
        }
        
        .loader {
            display: none;
            text-align: center;
            padding: 30px;
        }
        
        .loader.active {
            display: block;
        }
        
        .spinner {
            border: 4px solid #f3f4f6;
            border-top: 4px solid #4a9d9c;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
            margin: 0 auto 16px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .result-card {
            display: none;
            background: white;
            border-radius: 12px;
            padding: 40px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            margin-top: 24px;
        }
        
        .result-card.show {
            display: block;
            animation: slideIn 0.4s ease-out;
        }
        
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .valid-banner {
            background: #d4edda;
            border: 2px solid #5a7f5e;
            border-radius: 12px;
            padding: 20px 24px;
            margin-bottom: 32px;
            font-size: 20px;
            font-weight: 600;
            color: #155724;
        }
        
        .invalid-banner {
            background: #f8d7da;
            border: 2px solid #dc3545;
            border-radius: 12px;
            padding: 20px 24px;
            margin-bottom: 32px;
            font-size: 20px;
            font-weight: 600;
            color: #721c24;
        }
        
        .info-grid {
            display: grid;
            gap: 20px;
        }
        
        .info-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
            border-bottom: 1px solid #e2e8f0;
        }
        
        .info-row:last-child {
            border-bottom: none;
        }
        
        .info-label {
            font-size: 18px;
            color: #718096;
            font-weight: 500;
        }
        
        .info-value {
            font-size: 18px;
            color: #2d3748;
            font-weight: 600;
            text-align: right;
        }
        
        .status-badge {
            display: inline-block;
            padding: 6px 16px;
            border-radius: 20px;
            font-size: 16px;
            font-weight: 600;
        }
        
        .status-valid {
            background: #d4edda;
            color: #155724;
        }
        
        .status-expired {
            background: #fff3cd;
            color: #856404;
        }
        
        .status-revoked {
            background: #f8d7da;
            color: #721c24;
        }
        
        .view-cert-btn {
            width: 100%;
            max-width: 320px;
            padding: 18px 40px;
            background: #4a9d9c;
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 18px;
            font-weight: 700;
            text-transform: uppercase;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(74, 157, 156, 0.3);
            transition: all 0.3s;
            margin-top: 32px;
            text-decoration: none;
            display: inline-block;
            text-align: center;
        }
        
        .view-cert-btn:hover {
            background: #3d8887;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(74, 157, 156, 0.4);
        }

        .linkedin-section {
            margin-top: 32px;
            padding: 24px;
            background: linear-gradient(135deg, #5a7f5e 0%, #3d5a3f 100%);
            border-radius: 12px;
            text-align: center;
        }

        .linkedin-title {
            color: white;
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 16px;
        }

        .linkedin-btn {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            padding: 14px 28px;
            background: #0077b5;
            color: white;
            text-decoration: none;
            border-radius: 8px;
            font-weight: 600;
            font-size: 16px;
            transition: all 0.3s;
        }

        .linkedin-btn:hover {
            background: #006399;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 119, 181, 0.4);
        }

        .linkedin-icon {
            width: 24px;
            height: 24px;
        }

        @media (max-width: 768px) {
            h1 {
                font-size: 36px;
            }
            .code-input {
                font-size: 20px;
            }
            .verify-card {
                padding: 24px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Verify certificates</h1>
        
        <div class="verify-card">
            <div class="form-group">
                <label class="form-label">
                    <span class="required-icon">!</span>
                    Code
                </label>
                <input 
                    type="text" 
                    id="certCode" 
                    class="code-input" 
                    placeholder="5731604481CH"
                    autocomplete="off"
                >
            </div>
            
            <button onclick="verifyCertificate()" id="verifyBtn" class="verify-btn">
                VERIFY
            </button>
            
            <div class="required-text">
                <span class="required-icon">!</span>
                <span>Required</span>
            </div>
        </div>

        <div class="loader" id="loader">
            <div class="spinner"></div>
            <p style="color: #4a9d9c; font-weight: 600;">Verifying certificate...</p>
        </div>
        
        <div class="result-card" id="resultCard"></div>
    </div>

    <script>
        // ⚠️⚠️⚠️ مهم جداً: استبدل الرابط التالي برابط Google Apps Script الخاص بك ⚠️⚠️⚠️
        const API_URL = 'https://script.google.com/macros/s/AKfycbxy3CBGYm-n4vvmbmDw14ng_R8qV-xqQ4_Y8zXJVuCAKcDeVc1KlgRSZOg2uCmY3cpFOA/exec';
        
        // السماح بالضغط على Enter
        document.getElementById('certCode').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                verifyCertificate();
            }
        });
        
        async function verifyCertificate() {
            const code = document.getElementById('certCode').value.trim();
            const loader = document.getElementById('loader');
            const resultCard = document.getElementById('resultCard');
            const verifyBtn = document.getElementById('verifyBtn');
            
            if (!code) {
                alert('Please enter certificate code');
                return;
            }
            
            // إظهار التحميل
            loader.classList.add('active');
            resultCard.classList.remove('show');
            resultCard.style.display = 'none';
            verifyBtn.disabled = true;
            
            try {
                const response = await fetch(`${API_URL}?code=${encodeURIComponent(code)}`);
                const data = await response.json();
                
                loader.classList.remove('active');
                verifyBtn.disabled = false;
                
                if (data.success && data.data) {
                    showResult(data.data);
                } else {
                    showError(data.message || 'Certificate not found');
                }
            } catch (error) {
                loader.classList.remove('active');
                verifyBtn.disabled = false;
                showError('Connection error. Please try again.');
                console.error('Error:', error);
            }
        }
        
        function showResult(cert) {
            const resultCard = document.getElementById('resultCard');
            const isValid = cert.status === 'Valid';
            
            const statusClass = cert.status === 'Valid' ? 'status-valid' : 
                               cert.status === 'Expired' ? 'status-expired' : 
                               'status-revoked';
            
            const bannerClass = isValid ? 'valid-banner' : 'invalid-banner';
            const bannerText = isValid ? 'This certificate is valid' : 'This certificate is not valid';

            // إنشاء رابط LinkedIn
            const credentialUrl = cert.certificate_url || window.location.href;
            const linkedInUrl = createLinkedInUrl(cert, credentialUrl);
            
            resultCard.innerHTML = `
                <div class="${bannerClass}">
                    ${bannerText}
                </div>
                
                <div class="info-grid">
                    <div class="info-row">
                        <span class="info-label">Full name</span>
                        <span class="info-value">${cert.full_name}</span>
                    </div>
                    
                    <div class="info-row">
                        <span class="info-label">Certificate</span>
                        <span class="info-value">${cert.certificate_name}</span>
                    </div>
                    
                    <div class="info-row">
                        <span class="info-label">Date issued</span>
                        <span class="info-value">${formatDisplayDate(cert.date_issued)}</span>
                    </div>
                    
                    <div class="info-row">
                        <span class="info-label">Expiry date</span>
                        <span class="info-value">${cert.expiry_date === 'Never' ? 'Never' : formatDisplayDate(cert.expiry_date)}</span>
                    </div>
                    
                    <div class="info-row">
                        <span class="info-label">Status</span>
                        <span class="info-value">
                            <span class="status-badge ${statusClass}">${cert.status}</span>
                        </span>
                    </div>
                </div>
                
                ${cert.certificate_url ? `
                    <a href="${cert.certificate_url}" target="_blank" class="view-cert-btn">
                        VIEW CERTIFICATE
                    </a>
                ` : ''}

                ${isValid ? `
                    <div class="linkedin-section">
                        <div class="linkedin-title">Add this certificate to your LinkedIn profile</div>
                        <a href="${linkedInUrl}" target="_blank" class="linkedin-btn">
                            <svg class="linkedin-icon" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
                            </svg>
                            Add to LinkedIn
                        </a>
                    </div>
                ` : ''}
            `;
            
            resultCard.style.display = 'block';
            resultCard.classList.add('show');
        }
        
        function showError(message) {
            const resultCard = document.getElementById('resultCard');
            
            resultCard.innerHTML = `
                <div class="invalid-banner">
                    ${message}
                </div>
                <p style="color: #718096; font-size: 16px; line-height: 1.6; margin-top: 16px;">
                    Please check the certificate code and try again.
                </p>
            `;
            
            resultCard.style.display = 'block';
            resultCard.classList.add('show');
        }

        function createLinkedInUrl(cert, credentialUrl) {
            const issueDate = new Date(cert.date_issued);
            const params = new URLSearchParams({
                name: cert.certificate_name,
                organizationId: '0', //https://www.linkedin.com/company/association-des-jeunes-dipl%C3%B4m%C3%A9s-en-hydrocarbures-ajdh/
                issueYear: issueDate.getFullYear(),
                issueMonth: issueDate.getMonth() + 1,
                certUrl: credentialUrl,
                certId: cert.certificate_code
            });
            
            return `https://www.linkedin.com/profile/add?startTask=CERTIFICATION_NAME&${params.toString()}`;
        }
        
        function formatDisplayDate(dateStr) {
            if (!dateStr || dateStr === 'Never') return dateStr;
            
            try {
                const date = new Date(dateStr);
                const options = { year: 'numeric', month: 'long', day: 'numeric' };
                return date.toLocaleDateString('en-US', options);
            } catch (e) {
                return dateStr;
            }
        }
    </script>
</body>
</html>

Association des Jeunes Diplômés en Hydrocarbures -

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