Embed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Energy Prediction</title>
    <style>
        /* Energy Prediction Theme and Animation */
        body {
            font-family: 'Arial', sans-serif;
            background-color: #111;
            color: #fff;
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100vh;
        }

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

        .header {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 20px;
            color: #00ffcc;
        }

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

        input[type="date"] {
            padding: 10px;
            background-color: #222;
            color: #fff;
            border: 1px solid #444;
            border-radius: 5px;
            font-size: 1rem;
            width: 200px;
        }

        button {
            padding: 10px 20px;
            background-color: #00ffcc;
            color: #111;
            border: none;
            border-radius: 5px;
            font-size: 1rem;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #008b8b;
        }

        /* Sci-Fi Animation */
        .stars {
            position: absolute;
            width: 100%;
            height: 100%;
            background: url('https://cdn.pixabay.com/photo/2014/09/18/19/18/galaxy-442456_960_720.jpg') no-repeat center center fixed;
            background-size: cover;
            z-index: -1;
            animation: starsMovement 50s infinite linear;
        }

        @keyframes starsMovement {
            0% { background-position: 0 0; }
            100% { background-position: 100% 100%; }
        }

        .circle {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            border: 3px solid #00ffcc;
            transform: translate(-50%, -50%);
            animation: rotatingCircle 10s linear infinite;
        }

        @keyframes rotatingCircle {
            0% { transform: translate(-50%, -50%) rotate(0deg); }
            100% { transform: translate(-50%, -50%) rotate(360deg); }
        }

        .question-container {
            display: none;
            text-align: center;
        }

        .question {
            font-size: 1.5rem;
            margin-bottom: 20px;
        }

        .answer-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
        }

        .answer-buttons button {
            width: 150px;
            padding: 15px;
            font-size: 1rem;
            background-color: #333;
            border: 1px solid #555;
            border-radius: 5px;
            color: #fff;
            cursor: pointer;
        }

        .answer-buttons button:hover {
            background-color: #00ffcc;
        }

        #energyResult {
            font-size: 1.8rem;
            text-align: center;
            margin-top: 30px;
        }

        #actionStep {
            font-size: 1.2rem;
            margin-top: 20px;
            text-align: center;
        }
    </style>
</head>
<body>

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

<div class="container">
    <div class="header">Energy Prediction</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 Energy Prediction</button>
    </div>

    <div id="questionSection" class="question-container">
        <div id="questionText" class="question"></div>
        <div class="answer-buttons">
            <button id="affirmativeBtn">Affirmative</button>
            <button id="negativeBtn">Negative</button>
        </div>
    </div>

    <div id="energyResult" class="hidden"></div>
    <div id="actionStep" class="hidden"></div>
</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 negativeBtn = document.getElementById('negativeBtn');
    const energyResult = document.getElementById('energyResult');
    const actionStep = document.getElementById('actionStep');

    // Energy Calculation Variables
    let currentQuestionIndex = 0;
    let positiveAnswers = 0;
    let totalQuestions = 7;  // Total questions based on 7 energy centers

    const questions = [
        { text: "How aligned are you with your personal goals?" },
        { text: "How confident do you feel in your career progression?" },
        { text: "How would you rate your physical health?" },
        { text: "How secure is your financial status?" },
        { text: "How balanced are your relationships?" },
        { text: "How connected do you feel to your spirituality?" },
        { text: "How creatively do you express yourself?" }
    ];

    // Action steps for each chakra
    const actionSteps = [
        "Focus on grounding yourself through physical activities or nature walks.",
        "Channel your confidence and creativity through new projects or hobbies.",
        "Maintain a healthy lifestyle with exercise and proper diet to boost energy.",
        "Evaluate your finances and create a solid plan for future stability.",
        "Nurture your relationships through open communication and understanding.",
        "Spend time meditating or engaging in spiritual practices to reconnect with yourself.",
        "Explore your creative potential through art, music, or writing."
    ];

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

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

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

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

    // Move to next question
    function moveToNextQuestion() {
        questionSection.style.display = 'none';
        currentQuestionIndex++;
        setTimeout(showQuestion, 1000); // Delay before next question
    }

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

        // Action based on score
        let actionText = "";
        if (energyScore >= 80) {
            actionText = "Great energy flow! Continue with your current path.";
        } else if (energyScore >= 50) {
            actionText = "You have balanced energy but some work may be needed.";
        } else {
            actionText = "Consider taking actions to restore your energy balance.";
        }

        energyResult.style.display = 'block';
        actionStep.style.display = 'block';
        actionStep.innerHTML = actionText;

        // Display individual chakra actions
        questions.forEach((question, index) => {
            actionStep.innerHTML += `<br><br><strong>Chakra ${index + 1} Action:</strong> ${actionSteps[index]}`;
        });
    }
</script>

</body>
</html>


Keshav Chopra