Embed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cosmic Energy Balance</title>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Orbitron', sans-serif;
            background-color: #0b0b2f; /* Deep space background */
            color: #fff;
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            animation: backgroundAnimation 60s linear infinite;
        }

        /* Cosmic Star Field Animation */
        @keyframes backgroundAnimation {
            0% { background-position: 0 0; }
            100% { background-position: 100% 100%; }
        }

        .container {
            position: relative;
            z-index: 10;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            text-align: center;
        }

        .header {
            font-size: 3.5rem;
            margin-bottom: 30px;
            color: #00d9ff;
            text-shadow: 0 0 20px #00d9ff, 0 0 30px #00d9ff, 0 0 40px #00d9ff;
            animation: pulse 2s infinite alternate;
        }

        @keyframes pulse {
            0% { transform: scale(1); opacity: 0.8; }
            100% { transform: scale(1.1); opacity: 1; }
        }

        .date-of-birth {
            margin: 20px;
        }

        input[type="date"] {
            padding: 12px;
            background-color: #222;
            color: #fff;
            border: 1px solid #444;
            border-radius: 8px;
            font-size: 1.2rem;
            width: 240px;
            transition: all 0.3s ease;
        }

        input[type="date"]:focus {
            border-color: #00d9ff;
            box-shadow: 0 0 10px #00d9ff;
        }

        button {
            padding: 15px 25px;
            background-color: #00d9ff;
            color: #111;
            border: none;
            border-radius: 8px;
            font-size: 1.2rem;
            cursor: pointer;
            transition: all 0.3s ease;
            text-shadow: 0 0 15px #00d9ff;
            margin-top: 20px;
        }

        button:hover {
            background-color: #008b8b;
            box-shadow: 0 0 20px #00d9ff, 0 0 30px #00d9ff;
            transform: translateY(-5px);
        }

        /* Cosmic Star Field */
        .stars {
            position: absolute;
            width: 100%;
            height: 100%;
            background: url('https://cdn.pixabay.com/photo/2015/10/09/19/34/galaxy-979853_960_720.jpg') no-repeat center center fixed;
            background-size: cover;
            z-index: -2;
            filter: blur(5px);
            animation: starAnimation 60s infinite linear;
        }

        /* Question and Answer Buttons */
        .question-container {
            display: none;
            text-align: center;
        }

        .question {
            font-size: 1.8rem;
            margin-bottom: 20px;
            text-shadow: 0 0 15px #00d9ff;
            animation: fadeIn 1s ease-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .answer-buttons {
            display: flex;
            justify-content: center;
            gap: 25px;
            flex-direction: column;
        }

        .answer-buttons button {
            width: 180px;
            padding: 12px;
            font-size: 1.3rem;
            background-color: #222;
            border: 1px solid #555;
            border-radius: 8px;
            color: #fff;
            cursor: pointer;
            transition: all 0.3s ease;
            text-shadow: 0 0 15px #00d9ff;
        }

        .answer-buttons button:hover {
            background-color: #00d9ff;
            box-shadow: 0 0 20px #00d9ff, 0 0 30px #00d9ff;
            transform: translateY(-5px);
        }

        /* Final Results */
        #energyResult, #actionStep, #planetConnection {
            font-size: 1.8rem;
            text-align: center;
            margin-top: 30px;
            text-shadow: 0 0 15px #00d9ff;
            display: none;
            animation: fadeIn 1s ease-out;
        }

        /* Pop-up Dialog Box for Training Invitation */
        #trainingPopup {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #333;
            color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 20px #00d9ff;
            display: none;
            z-index: 9999;
            text-align: center;
            animation: fadeInPopup 1s ease-out;
        }

        @keyframes fadeInPopup {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        #trainingPopup button {
            background-color: #00d9ff;
            border: none;
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 1.2rem;
            cursor: pointer;
            color: #111;
            margin-top: 20px;
        }

        #trainingPopup button:hover {
            background-color: #008b8b;
            box-shadow: 0 0 20px #00d9ff, 0 0 30px #00d9ff;
            transform: translateY(-5px);
        }

        /* Timer */
        #timer {
            font-size: 1.3rem;
            color: #00d9ff;
            margin-top: 10px;
        }
    </style>
</head>
<body>

<div class="stars"></div>

<div class="container">
    <div class="header">Cosmic Energy Balance</div>

    <div class="date-of-birth">
        <label for="dob">Enter Your Date of Birth:</label>
        <input type="date" id="dob" name="dob" required>
        <button id="startBtn">Start Cosmic Energy Journey</button>
    </div>

    <div id="questionSection" class="question-container">
        <div id="questionText" class="question"></div>
        <div class="answer-buttons">
            <button id="affirmativeBtn">Absolutely</button>
            <button id="neutralBtn">Sometimes</button>
            <button id="negativeBtn">Not at all</button>
        </div>
        <div id="timer"></div>
    </div>

    <div id="energyResult"></div>
    <div id="actionStep"></div>
    <div id="planetConnection"></div>
</div>


<div id="trainingPopup">
    <h3>Enhance Your Cosmic Energy</h3>
    <p>Join our <strong>7-Week Cosmic Energy Balance Training</strong> and unlock your full potential!</p>
    <button id="closePopup">Close</button>
</div>

<script>
    // DOM Elements
    const dobInput = document.getElementById('dob');
    const startBtn = document.getElementById('startBtn');
    const questionSection = document.getElementById('questionSection');
    const questionText = document.getElementById('questionText');
    const affirmativeBtn = document.getElementById('affirmativeBtn');
    const neutralBtn = document.getElementById('neutralBtn');
    const negativeBtn = document.getElementById('negativeBtn');
    const energyResult = document.getElementById('energyResult');
    const actionStep = document.getElementById('actionStep');
    const planetConnection = document.getElementById('planetConnection');
    const timerDisplay = document.getElementById('timer');
    const trainingPopup = document.getElementById('trainingPopup');
    const closePopupBtn = document.getElementById('closePopup');

    // Energy Calculation Variables
    let currentQuestionIndex = 0;
    let positiveAnswers = 0;
    let neutralAnswers = 0;
    let totalQuestions = 5;  // Changed to 5 questions
    let timer;

    const questions = [
        { text: "How aligned do you feel with your current life goals?" },
        { text: "Do you often feel energized throughout the day?" },
        { text: "How balanced are your emotional and physical well-being?" },
        { text: "How much do you prioritize self-care in your routine?" },
        { text: "How connected do you feel to your spiritual self?" }
    ];

    const planets = {
        high: { planet: "Mars", action: "Engage in energetic activities such as exercise or creative expression." },
        medium: { planet: "Jupiter", action: "Focus on grounding practices and finding inner balance." },
        low: { planet: "Neptune", action: "Take time for introspection, rest, and reconnect with your inner self." }
    };

    // Start button handler
    startBtn.addEventListener('click', () => {
        const dob = dobInput.value;
        if (dob) {
            startBtn.style.display = 'none';  // Hide the start button
            showQuestion();
        } else {
            alert('Please enter a valid date of birth!');
        }
    });

    // Show questions one by one
    function showQuestion() {
        if (currentQuestionIndex < totalQuestions) {
            questionText.innerText = questions[currentQuestionIndex].text;
            questionSection.style.display = 'block';
            startTimer();
        } else {
            calculateEnergy();
        }
    }

    // Start the timer for each question (30 seconds)
    function startTimer() {
        let timeRemaining = 30;
        timerDisplay.innerText = `Time left: ${timeRemaining}s`;

        timer = setInterval(() => {
            timeRemaining--;
            timerDisplay.innerText = `Time left: ${timeRemaining}s`;

            if (timeRemaining <= 0) {
                clearInterval(timer);
                moveToNextQuestion();
            }
        }, 1000);
    }

    // Move to the next question or finish the quiz
    function moveToNextQuestion() {
        clearInterval(timer);
        currentQuestionIndex++;
        questionSection.style.display = 'none';
        showQuestion();
    }

    // Answer buttons functionality
    affirmativeBtn.addEventListener('click', () => {
        positiveAnswers++;
        moveToNextQuestion();
    });

    neutralBtn.addEventListener('click', () => {
        neutralAnswers++;
        moveToNextQuestion();
    });

    negativeBtn.addEventListener('click', () => {
        moveToNextQuestion();
    });

    // Calculate energy score and show results
    function calculateEnergy() {
        const energyScore = (positiveAnswers / totalQuestions) * 100;
        energyResult.innerText = `Your Cosmic Energy Score: ${energyScore.toFixed(2)}% positive energy.`;

        let action, planet;
        if (energyScore >= 80) {
            planet = planets.high.planet;
            action = planets.high.action;
        } else if (energyScore >= 50) {
            planet = planets.medium.planet;
            action = planets.medium.action;
        } else {
            planet = planets.low.planet;
            action = planets.low.action;
        }

        actionStep.innerText = action;
        planetConnection.innerHTML = `Connected with Planet: ${planet}`;

        energyResult.style.display = 'block';
        actionStep.style.display = 'block';
        planetConnection.style.display = 'block';

        // Show training invitation pop-up
        setTimeout(() => {
            trainingPopup.style.display = 'block';
        }, 2000);  // Show popup after 2 seconds
    }

    // Close the training popup
    closePopupBtn.addEventListener('click', () => {
        trainingPopup.style.display = 'none';
    });
</script>

</body>
</html>

Keshav Chopra