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;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .container {
            text-align: center;
            padding: 40px;
            background: rgba(0, 0, 0, 0.8);
            border-radius: 15px;
            box-shadow: 0 0 25px rgba(255, 255, 255, 0.2);
            width: 80%;
            max-width: 800px;
        }

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

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

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

        .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;
        }

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

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

        /* Energy Circle */
        .circle-container {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 30px auto;
            border-radius: 50%;
            border: 10px solid #00e6e6;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .circle-fill {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #00e6e6;
            transform-origin: center;
            clip-path: polygon(50% 50%, 100% 0, 100% 100%, 50% 100%, 50% 50%);
            transition: transform 1s ease;
        }

        .circle-text {
            font-size: 28px;
            font-weight: bold;
            color: white;
        }

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

        /* Planet Alignment Styling */
        .planet-alignment {
            display: flex;
            justify-content: center;
            margin-top: 30px;
        }

        .planet {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #00e6e6;
            margin: 0 10px;
            box-shadow: 0 0 20px #00e6e6;
        }

        /* Popup Styling */
        .popup {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }

        .popup-content {
            background: #1a1a2e;
            padding: 40px;
            text-align: center;
            border-radius: 15px;
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
        }

        .popup button {
            padding: 15px 30px;
            font-size: 18px;
            background-color: #00e6e6;
            color: white;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            margin-top: 20px;
            box-shadow: 0 0 20px #00e6e6;
        }

        .popup button:hover {
            background-color: #009999;
        }
    </style>
</head>
<body>

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

        
        <input type="date" id="dob" placeholder="Enter your date of birth" required>

        
        <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="circle-container">
            <div class="circle-fill" id="circleFill"></div>
            <div class="circle-text" id="energyPercentage">0%</div>
        </div>

        
        <div class="planet-alignment" id="planetAlignment"></div>
    </div>

    
    <div class="popup" id="trainingPopup">
        <div class="popup-content">
            <p>Would you like to join our training and harness your energy?</p>
            <button onclick="closePopup()">Yes, I'm interested!</button>
        </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 currentQuestionIndex = 0;
        let questionTimer;

        // 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 enter your date of birth!');
            }
        }

        // 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);
        }

        // Function to record user's answer
        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();
            } else {
                currentQuestionIndex++;
                displayChakraQuestion(currentQuestionIndex);
            }
        }

        // Function to start the timer for the question
        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!';
                    currentQuestionIndex++;
                    if (currentQuestionIndex < chakraQuestions.length) {
                        displayChakraQuestion(currentQuestionIndex);
                    } else {
                        startEnergyPrediction();
                    }
                } 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

            // Show energy circle animation
            animateCircle(energyLevel);

            // Show planet alignment
            displayPlanetAlignment(energyLevel);

            // Show training popup after 15 seconds
            setTimeout(showPopup, 15000);
        }

        // 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 aligned with the universe!";
            } else if (energyLevel >= 50) {
                return "Your energy is balanced. You're in a good place!";
            } else {
                return "Your energy is low. Time to recharge and realign.";
            }
        }

        // Function to animate the energy circle
        function animateCircle(energyLevel) {
            const circleFill = document.getElementById('circleFill');
            const energyPercentage = document.getElementById('energyPercentage');

            const rotation = (energyLevel / 100) * 360;
            circleFill.style.transform = `rotate(${rotation}deg)`;
            energyPercentage.textContent = `${energyLevel}%`;
        }

        // Function to display planet alignment based on energy level
        function displayPlanetAlignment(energyLevel) {
            const planetAlignmentContainer = document.getElementById('planetAlignment');
            planetAlignmentContainer.innerHTML = ''; // Clear previous planets

            const planetCount = Math.ceil(energyLevel / 20); // Number of planets aligned

            for (let i = 0; i < planetCount; i++) {
                const planet = document.createElement('div');
                planet.classList.add('planet');
                planetAlignmentContainer.appendChild(planet);
            }
        }

        // Function to show the popup message
        function showPopup() {
            const popup = document.getElementById('trainingPopup');
            popup.style.display = 'flex';
        }

        // Function to close the popup message
        function closePopup() {
            const popup = document.getElementById('trainingPopup');
            popup.style.display = 'none';
        }
    </script>
</body>
</html>

Keshav Chopra