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>

    
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Poppins:wght@400;600&display=swap" rel="stylesheet">

    <style>
        /* Universal Styling */
        body {
            margin: 0;
            padding: 0;
            font-family: 'Poppins', sans-serif;
            background: #1a1a2e;
            color: white;
            overflow: hidden;
        }

        /* Container Styling */
        .container {
            position: relative;
            text-align: center;
            padding: 40px;
            margin-top: 50px;
            max-width: 700px;
            width: 100%;
            margin: auto;
            background: rgba(0, 0, 0, 0.8);
            border-radius: 15px;
            box-shadow: 0 0 25px rgba(255, 255, 255, 0.2);
        }

        h1 {
            font-family: 'Orbitron', sans-serif;
            font-size: 42px;
            font-weight: 700;
            color: #00e6e6;
            margin-bottom: 30px;
            letter-spacing: 2px;
            text-shadow: 0 0 20px rgba(0, 230, 230, 0.8);
        }

        /* Chakra Question Styling */
        .chakra-question {
            font-size: 20px;
            margin-top: 20px;
            color: #ecf0f1;
        }

        .chakra-options {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 10px;
        }

        .chakra-options button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #00e6e6;
            border: none;
            cursor: pointer;
            border-radius: 30px;
            transition: background-color 0.3s ease;
            color: white;
        }

        .chakra-options button:hover {
            background-color: #009999;
        }

        /* Sci-Fi Glowing Button */
        .btn {
            padding: 15px 35px;
            font-size: 18px;
            background-color: #00e6e6;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 30px;
            transition: background-color 0.3s ease;
            box-shadow: 0 0 15px #00e6e6;
        }

        .btn:hover {
            background-color: #009999;
            box-shadow: 0 0 25px #009999;
        }

        /* Progress Bar for Energy Prediction */
        .progress-bar {
            position: relative;
            width: 80%;
            margin: 20px auto;
            height: 30px;
            border-radius: 15px;
            background: #34495e;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
        }

        .progress-fill {
            position: absolute;
            height: 100%;
            background: linear-gradient(45deg, #00e6e6, #009999);
            border-radius: 15px;
            width: 0;
            transition: width 0.6s ease;
        }

        /* Countdown Timer Styling */
        .countdown {
            font-size: 24px;
            color: #e74c3c;
            margin-top: 20px;
            font-weight: bold;
        }

        /* Prediction Result Styling */
        .prediction-result {
            font-size: 26px;
            font-weight: 500;
            color: #ecf0f1;
            text-align: center;
            margin-top: 20px;
        }
    </style>
</head>
<body>

    <div class="container">
        <h1>Energy Prediction</h1>

        
        <div class="form-group">
            <input type="date" id="dob" placeholder="Select your birth date" required>
        </div>
        <button class="btn" onclick="startEnergyJourney()">Start Energy Journey</button>

        
        <div id="chakraQuestions"></div>

        
        <div class="countdown" id="countdownTimer"></div>

        
        <div class="progress-bar">
            <div class="progress-fill" id="energyProgress"></div>
        </div>

        
        <div class="prediction-result" id="predictionResult"></div>
    </div>

    <script>
        const chakraQuestions = [
            { question: "Do you feel grounded and stable in your daily life?", chakra: "Root Chakra" },
            { question: "Do you often experience emotional or creative outbursts?", chakra: "Sacral Chakra" },
            { question: "Do you feel confident and in control of your personal power?", chakra: "Solar Plexus Chakra" },
            { question: "Do you feel love and compassion for others?", chakra: "Heart Chakra" },
            { question: "Do you feel confident in expressing yourself verbally?", chakra: "Throat Chakra" },
            { question: "Do you trust your intuition and inner vision?", chakra: "Third Eye Chakra" },
            { question: "Do you feel spiritually connected to the universe?", chakra: "Crown Chakra" }
        ];

        let userAnswers = {};
        let questionTimer;
        let currentQuestionIndex = 0;

        // Function to start the energy journey
        function startEnergyJourney() {
            const dob = document.getElementById('dob').value;
            if (dob) {
                displayChakraQuestion(currentQuestionIndex);
                startTimer(); // Start timer for automatic disappearance of questions
            } else {
                alert('Please select your birth date!');
            }
        }

        // Function to display chakra question
        function displayChakraQuestion(index) {
            const chakraQuestionsContainer = document.getElementById('chakraQuestions');
            chakraQuestionsContainer.innerHTML = ''; // Clear previous question

            const item = chakraQuestions[index];
            const questionDiv = document.createElement('div');
            questionDiv.classList.add('chakra-question');
            questionDiv.innerHTML = `
                <p>${item.question}</p>
                <div class="chakra-options">
                    <button onclick="recordAnswer(${index}, 'affirmative')">Affirmative</button>
                    <button onclick="recordAnswer(${index}, 'negative')">Negative</button>
                </div>
            `;
            chakraQuestionsContainer.appendChild(questionDiv);

            // Set a timeout to remove the question after 30 seconds
            setTimeout(() => {
                questionDiv.remove();
                // Show the next question after the timeout
                if (currentQuestionIndex < chakraQuestions.length - 1) {
                    currentQuestionIndex++;
                    displayChakraQuestion(currentQuestionIndex);
                } else {
                    startEnergyPrediction(); // If all questions are answered, start the prediction
                }
            }, 30000); // 30 seconds timeout
        }

        // Function to record user's answers
        function recordAnswer(index, answer) {
            userAnswers[chakraQuestions[index].chakra] = answer;

            // If all answers are collected, start energy prediction
            if (Object.keys(userAnswers).length === chakraQuestions.length) {
                startEnergyPrediction();
            }
        }

        // Function to start the timer
        function startTimer() {
            let countdown = 30;
            const timerNotification = document.getElementById('countdownTimer');
            timerNotification.textContent = `Answer the questions in ${countdown} seconds...`;

            questionTimer = setInterval(function () {
                if (countdown <= 0) {
                    clearInterval(questionTimer);
                    timerNotification.textContent = 'Time is up!';
                    setTimeout(startEnergyPrediction, 1000); // Start prediction after time is up
                } else {
                    timerNotification.textContent = `Answer the questions in ${countdown--} seconds...`;
                }
            }, 1000);
        }

        // Function to start energy prediction after questions
        function startEnergyPrediction() {
            clearInterval(questionTimer); // Stop the question timer

            // Display prediction result
            const energyLevel = calculateEnergy();
            const predictionResult = document.getElementById('predictionResult');
            predictionResult.innerHTML = `
                <strong>Your Energy Level:</strong> ${energyLevel}%<br>
                <strong>Prediction:</strong> ${generatePredictionMessage(energyLevel)}
            `;

            // Show the energy progress bar
            let progressBar = document.getElementById('energyProgress');
            let width = 0;
            let progressInterval = setInterval(function () {
                if (width >= energyLevel) {
                    clearInterval(progressInterval);
                } else {
                    width++;
                    progressBar.style.width = width + "%";
                }
            }, 20); // Updates every 20ms
        }

        // Function to calculate energy (randomized for simulation)
        function calculateEnergy() {
            return Math.floor(Math.random() * 100) + 1;
        }

        // Function to generate a prediction message based on energy level
        function generatePredictionMessage(energyLevel) {
            if (energyLevel >= 80) {
                return "Your energy is high! You're on the right path, keep pushing forward!";
            } else if (energyLevel >= 50) {
                return "Your energy is balanced. You are in a good place, keep up the good work.";
            } else {
                return "Your energy is low. It's a time for reflection and recharging your inner strength.";
            }
        }
    </script>
</body>
</html>

Keshav Chopra