איך להגן על תוכן בעמוד באמצעות סיסמא

				
					// קוד הגנה בסיסמא לווידג'טים באלמנטור

document.addEventListener('DOMContentLoaded', function() {
    // הגדרות בסיסיות
    const correctPassword = '1234'; // שנה את הסיסמא כאן
    const protectedClass = 'hide-kedem'; // הקלאס של הווידג'טים המוגנים
    
    // מוצא את כל הווידג'טים המוגנים
    const protectedWidgets = document.querySelectorAll('.' + protectedClass);
    
    protectedWidgets.forEach(function(widget, index) {
        // שומר את התוכן המקורי של הווידג'ט
        const originalContent = widget.innerHTML;
        
        // יוצר טופס סיסמא במקום התוכן
        const passwordFormHTML = `
            <div style="
                background: #fff;
                padding: 30px;
                border-radius: 8px;
                box-shadow: 0 2px 10px rgba(0,0,0,0.1);
                text-align: center;
                border: 2px solid #e0e0e0;
            ">
                <div style="margin-bottom: 20px;">
                    <h3 style="
                        color: #333;
                        margin: 0 0 10px 0;
                        font-size: 20px;
                    ">🔒 תוכן מוגן</h3>
                    <p style="
                        color: #666;
                        margin: 0;
                        font-size: 14px;
                    ">יש להזין סיסמא כדי לצפות בתוכן</p>
                </div>
                
                <div style="margin-bottom: 20px;">
                    <input 
                        type="password" 
                        id="password-input-${index}"
                        placeholder="הזן סיסמא..."
                        style="
                            width: 100%;
                            max-width: 250px;
                            padding: 12px 15px;
                            border: 2px solid #ddd;
                            border-radius: 6px;
                            font-size: 16px;
                            text-align: center;
                            transition: border-color 0.3s;
                        "
                        maxlength="20"
                    >
                </div>
                
                <div>
                    <button 
                        type="button" 
                        onclick="checkPasswordKedem(${index})"
                        style="
                            background: #0073aa;
                            color: white;
                            padding: 12px 25px;
                            border: none;
                            border-radius: 6px;
                            font-size: 16px;
                            cursor: pointer;
                            transition: background 0.3s;
                        "
                        onmouseover="this.style.background='#005a87'"
                        onmouseout="this.style.background='#0073aa'"
                    >
                        הצג תוכן
                    </button>
                </div>
                
                <div 
                    id="error-message-${index}"
                    style="
                        color: #d63384;
                        margin-top: 15px;
                        font-weight: bold;
                        font-size: 14px;
                        display: none;
                    "
                >
                    הסיסמא שגויה - נסה שוב
                </div>
            </div>
        `;
        
        // מחליף את התוכן בטופס
        widget.innerHTML = passwordFormHTML;
        
        // מוסיף אפשרות ללחוץ Enter
        const passwordInput = widget.querySelector(`#password-input-${index}`);
        passwordInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                checkPasswordKedem(index);
            }
        });
        
        // שומר את הנתונים בגלובל
        window.kedemProtectedData = window.kedemProtectedData || {};
        window.kedemProtectedData[index] = {
            widget: widget,
            originalContent: originalContent,
            correctPassword: correctPassword
        };
    });
});

// פונקציה לבדיקת הסיסמא
function checkPasswordKedem(index) {
    const data = window.kedemProtectedData[index];
    const passwordInput = data.widget.querySelector(`#password-input-${index}`);
    const errorMessage = data.widget.querySelector(`#error-message-${index}`);
    const enteredPassword = passwordInput.value.trim();
    
    // מסתיר הודעת שגיאה קודמת
    errorMessage.style.display = 'none';
    
    if (enteredPassword === data.correctPassword) {
        // הסיסמא נכונה - מחזיר את התוכן המקורי
        data.widget.innerHTML = data.originalContent;
        
        // אפקט הופעה חלקה
        data.widget.style.opacity = '0';
        setTimeout(function() {
            data.widget.style.transition = 'opacity 0.6s ease-in-out';
            data.widget.style.opacity = '1';
        }, 100);
        
    } else {
        // הסיסמא שגויה
        errorMessage.style.display = 'block';
        passwordInput.value = '';
        passwordInput.focus();
        
        // אפקט רעידה
        passwordInput.style.animation = 'kedem-shake 0.6s ease-in-out';
        setTimeout(function() {
            passwordInput.style.animation = '';
        }, 600);
    }
}

// מוסיף CSS לאנימציה
const shakeCSS = document.createElement('style');
shakeCSS.textContent = `
    @keyframes kedem-shake {
        0%, 100% { transform: translateX(0); }
        10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); }
        20%, 40%, 60%, 80% { transform: translateX(8px); }
    }
`;
document.head.appendChild(shakeCSS);