My Projects

                     /* --- this is only a portion of code --- */
/* --- SITE THEME & GENERAL STYLES --- */

.custom-section {
    background-color: #2c0000;
    border-radius: 20px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.1);
}

.revelation-card {
    transition: all 0.3s ease-in-out;
    background-color: #1e1e1e !important;
}

/* Glow Effects */
.border-info:hover { box-shadow: 0 0 20px rgba(13, 202, 240, 0.3); transform: translateY(-5px); }
.border-warning:hover { box-shadow: 0 0 20px rgba(255, 193, 7, 0.3); transform: translateY(-5px); }
.border-danger:hover { box-shadow: 0 0 20px rgba(220, 53, 69, 0.3); transform: translateY(-5px); }

/* Scroll Animation Base */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}
.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

                    

                      // this is only a portion of code
// 1. Intersection Observer for scroll reveals
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('is-visible');
            // Optional: stop observing once it's visible to save resources
            // observer.unobserve(entry.target); 
        }
    });
}, { threshold: 0.1 });

document.querySelectorAll('.reveal-on-scroll').forEach((el) => observer.observe(el));

// 2. Back to Top Logic
const backToTopBtn = document.getElementById('backToTop');

window.addEventListener('scroll', () => {
    const scrollPos = window.pageYOffset || document.documentElement.scrollTop;
    
    if (scrollPos > 200) {
        backToTopBtn.classList.add('show');
    } else {
        backToTopBtn.classList.remove('show');
    }
});

backToTopBtn.addEventListener('click', () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
});
                    

                      /* --- this is only a portion of code --- */
    @keyframes slowFall {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(120px) rotate(360deg); opacity: 0; }
}

/* Ensure the popup can contain the falling particles */
#jesusPopup {
    position: relative;
    overflow: hidden;
}
                    

                      // this is only a portion of code
window.calculate = function() {
        let input = document.getElementById("nameInput").value.toLowerCase().trim();
        document.getElementById("displayName").innerText = input || "---";
        
        let hebTotal = 0, grkTotal = 0;
        let hebBreakdown = "", grkBreakdown = "", insightHTML = "";

        if (input === "iesous" || input === "jesus") {
            hebTotal = 386; grkTotal = 888;
            hebBreakdown = "Y(10) + S(300) + V(6) + A(70) = 386"; 
            grkBreakdown = "I(10) + E(8) + S(200) + O(70) + U(400) + S(200) = 888";
            insightHTML = `
            <div id="jesusPopup" class="alert mt-3 text-center border rounded" 
                 style="background: linear-gradient(135deg, #fffcf0 0%, #fff 100%); 
                        border: 2px solid #ffd700 !important; box-shadow: 0 0 20px #ffea00; 
                        position: relative; overflow: hidden; min-height: 120px;">
                <strong style="color: #b8860b; font-size: 1.25rem;">🌟 Splendour: Iesous (888)</strong>
                <p class="mt-2 mb-0" style="color: #5c4d00;">The number of Resurrection and the New Creation.</p>
            </div>`;
            setTimeout(startWatchingJesusBox, 100); 
        }
else if (input.includes("nero")) {
    hebTotal = input.includes("neron") ? 666 : 616;
    grkTotal = 1113;
    
    hebBreakdown = input.includes("neron") ? "נ(50) ר(200) ו(6) נ(50) ק(100) ס(60) ר(200)" : "נ(50) ר(200) ו(6) ק(100) ס(60) ר(200)";
    grkBreakdown = "Ν(50) Ε(5) Ρ(100) Ω(800) Ν(50) Κ(20) Α(1) Ι(10) Σ(200) Α(1) Ρ(200)";
    
    const neroLink = "https://americanvision.org/posts/the-beast-and-his-number/";
    insightHTML = `
    <div class="mt-3 p-3 text-start border rounded" 
         style="background: radial-gradient(circle, #2c2c2c 0%, #000000 100%); 
                border: 2px solid #ff0000 !important; box-shadow: 0 0 15px #ff0000; color: #fff;">
        <div class="row align-items-center">
            <div class="col-md-4 text-center mb-3 mb-md-0">
                <a href="${neroLink}" target="_blank">
                    <img src="https://americanvision.org/images/uploads/neron.png" alt="Nero Coin" class="img-fluid rounded border border-secondary" style="max-height: 100px;">
                </a>
            </div>
            <div class="col-md-8">
                <strong class="d-block mb-1 text-danger">🔥 Revelation Match: 666 / 616</strong>
                <p class="small mb-2">Neron Caesar equals 666 in Hebrew transliteration. The oldest fragments (Papyrus 115) show 616, which matches the Latin spelling.</p>
                <a href="${neroLink}" target="_blank" class="fw-bold text-warning" style="text-decoration: none;">Explore Nero's coins →</a>
            </div>
        </div>
    </div>`;
                    

                          /* --- this is only a portion of code --- */
/* --- BASE STYLES --- */
body { 
    background-color: white; 
    color: black; 
    font-family: sans-serif; 
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

#game-container {
    width: 100%;
    max-width: 350px; 
    position: relative; /* Essential for the Pause Overlay */
}

/* --- STATS & CONTROLS --- */
.stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 0.85rem;
    color: #333;
}

.controls {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 15px;
}

/* --- Shared Style for All Control Buttons --- */
.control-button {
    padding: 5px 10px;
    border: 1px solid #121df1;
    background: white;
    color: #121df1;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
}
                        

                          // this is only a portion of code
function solve(board) {
    for (let r = 0; r < 9; r++) {
        for (let c = 0; c < 9; c++) {
            if (board[r][c] === 0) {
                const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9].sort(() => Math.random() - 0.5);
                for (const num of numbers) {
                    if (isValid(board, num, r, c)) {
                        board[r][c] = num;
                        if (solve(board)) return true;
                        board[r][c] = 0; 
                    }
                }
                return false;
            }
        }
    }
    return true;
}

function isValid(board, num, row, col) {
    for (let i = 0; i < 9; i++) {
        if (board[row][i] === num || board[i][col] === num) return false;
    }
    const startRow = Math.floor(row / 3) * 3;
    const startCol = Math.floor(col / 3) * 3;
    for (let r = 0; r < 3; r++) {
        for (let c = 0; c < 3; c++) {
            if (board[startRow + r][startCol + c] === num) return false;
        }
    }
    return true;
}