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

        /* Cosmic Star Background */
        .star-field {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
        }

        .star {
            position: absolute;
            background-color: #00e6e6;
            border-radius: 50%;
            animation: twinkle 2s infinite alternate, moveStars 50s linear infinite;
        }

        @keyframes moveStars {
            0% { transform: translateX(0) translateY(0); }
            100% { transform: translateX(100vw) translateY(100vh); }
        }

        @keyframes twinkle {
            0% { opacity: 0.3; }
            50% { opacity: 1; }
            100% { opacity: 0.3; }
        }

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

        /* Date of Birth Input Styling */
        .form-group input {
            padding: 15px;
            font-size: 22px;
            width: 90%;
            max-width: 400px;
            margin: 20px auto;
            border-radius: 10px;
            border: 2px solid #2c3e50;
            background-color: #34495e;
            color: white;
            transition: all 0.3s ease;
            box-shadow: 0 0 10px rgba(0, 230, 230, 0.4);
        }

        .form-group input:focus {
            border-color: #00e6e6;
            outline: none;
            box-shadow: 0 0 15px #00e6e6;
        }

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

        /* Prediction Section */
        .prediction-result {
            margin-top: 40px;
            font-size: 26px;
            font-weight: 500;
            color: #ecf0f1;
            text-align: center;
        }

        /* Sci-Fi Circle for Energy Prediction */
        .energy-circle-container {
            position: relative;
            width: 150px;
            height: 150px;
            margin: auto;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.6);
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
        }

        .energy-circle {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: conic-gradient(#00e6e6 0%, #009999 100%);
            clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
            transition: background 1s ease;
            animation: rotateCircle 10s linear infinite;
        }

        @keyframes rotateCircle {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .energy-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 24px;
            font-weight: bold;
            color: white;
        }

        /* Saturn Animation */
        .saturn {
            position: absolute;
            top: 20%;
            right: 5%;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: #f4d03f;
            box-shadow: 0 0 50px #f4d03f, inset 0 0 20px #f4d03f;
            animation: rotateSaturn 50s linear infinite;
        }

        @keyframes rotateSaturn {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Question Styling */
        .question-container {
            display: none;
            margin-top: 30px;
        }

        .question {
            margin: 10px 0;
            font-size: 20px;
        }

        .question input {
            padding: 10px;
            font-size: 18px;
            width: 70%;
            max-width: 300px;
            margin-top: 10px;
            border-radius: 10px;
            background-color: #34495e;
            color: white;
            border: 2px solid #2c3e50;
        }

        .question-rating {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
        }

        .question-rating input {
            width: 30px;
            height: 30px;
        }

        /* Sci-Fi Lights and Effects */
        .glowing-text {
            animation: glowing 1.5s infinite alternate;
        }

        @keyframes glowing {
            0% { text-shadow: 0 0 5px #fff, 0 0 10px #00e6e6, 0 0 15px #00e6e6; }
            100% { text-shadow: 0 0 10px #fff, 0 0 20px #00e6e6, 0 0 30px #00e6e6; }
        }
    </style>
</head>
<body>

    
    <div class="star-field" id="star-field"></div>
    
    
    <div class="container">
        <h1>Energy Level Analysis</h1>

        
        <div class="form-group">
            <label for="dob">Enter Your Date of Birth</label>
            <input type="date" id="dob">
            <button class="btn" onclick="startQuestions()">Start Analysis</button>
        </div>

        
        <div class="question-container" id="question-container">
            <div id="chakra-questions"></div>
            <button class="btn" onclick="calculateEnergy()">Submit</button>
        </div>

        
        <div id="prediction-result" class="prediction-result glowing-text"></div>

        <div class="energy-circle-container">
            <div id="energy-circle" class="energy-circle"></div>
            <div id="energy-text" class="energy-text">0%</div>
        </div>

        <div class="saturn"></div>
    </div>

    <script>
        // Updated Chakra-based questions with scientific terms and ratings (1-10 scale)
        const energyQuestions = [
            { question: "How grounded and secure do you feel in your current physical health?", aspect: "Physical Well-being" },
            { question: "How emotionally stable are you in handling stress and challenges?", aspect: "Emotional Stability" },
            { question: "How confident are you in achieving your personal goals?", aspect: "Confidence and Willpower" },
            { question: "How effectively do you communicate your thoughts and ideas?", aspect: "Communication Skills" },
            { question: "How balanced are your relationships with others?", aspect: "Relationship Balance" },
            { question: "How clear and focused are you in your thoughts and decisions?", aspect: "Mental Clarity" },
            { question: "How spiritually connected do you feel with the universe?", aspect: "Spiritual Awareness" }
        ];

        // Initialize cosmic star field
        function createStars() {
            const starField = document.getElementById('star-field');
            for (let i = 0; i < 200; i++) {
                let star = document.createElement('div');
                star.classList.add('star');
                star.style.left = `${Math.random() * 100}vw`;
                star.style.top = `${Math.random() * 100}vh`;
                star.style.width = `${Math.random() * 2 + 1}px`;
                star.style.height = star.style.width;
                starField.appendChild(star);
            }
        }

        // Start the questions
        function startQuestions() {
            const dob = document.getElementById('dob').value;
            if (!dob) {
                alert("Please select your date of birth.");
                return;
            }

            document.querySelector('.form-group').style.display = 'none';
            document.querySelector('.btn').style.display = 'none';
            document.getElementById('question-container').style.display = 'block';

            let questionHtml = '';
            energyQuestions.forEach((item, index) => {
                questionHtml += `
                    <div class="question">
                        <p>${item.question}</p>
                        <div class="question-rating">
                            <input type="radio" name="answer-${index}" value="1"> 1
                            <input type="radio" name="answer-${index}" value="2"> 2
                            <input type="radio" name="answer-${index}" value="3"> 3
                            <input type="radio" name="answer-${index}" value="4"> 4
                            <input type="radio" name="answer-${index}" value="5"> 5
                            <input type="radio" name="answer-${index}" value="6"> 6
                            <input type="radio" name="answer-${index}" value="7"> 7
                            <input type="radio" name="answer-${index}" value="8"> 8
                            <input type="radio" name="answer-${index}" value="9"> 9
                            <input type="radio" name="answer-${index}" value="10"> 10
                        </div>
                    </div>
                `;
            });
            document.getElementById('chakra-questions').innerHTML = questionHtml;
        }

        // Calculate energy and display results
        function calculateEnergy() {
            let totalScore = 0;

            energyQuestions.forEach((item, index) => {
                const answer = document.querySelector(`input[name="answer-${index}"]:checked`);
                if (answer) {
                    totalScore += parseInt(answer.value);
                }
            });

            let energyPercentage = Math.min(Math.max((totalScore / (energyQuestions.length * 10)) * 100, 0), 100);
            document.getElementById('energy-text').textContent = `${energyPercentage}%`;

            // Display "Analyzing" message
            document.getElementById('prediction-result').textContent = "Please wait, analyzing your energy...";
            document.getElementById('energy-circle').style.background = `conic-gradient(#00e6e6 ${energyPercentage}%, #009999 ${energyPercentage}%)`;

            setTimeout(() => {
                let actionMessage = getActionMessage(energyPercentage);
                document.getElementById('prediction-result').textContent = actionMessage;
            }, 2000);
        }

        // Provide action message based on energy percentage
        function getActionMessage(energy) {
            if (energy >= 80) {
                return "You are highly energized! Continue nurturing your positive habits and balance.";
            } else if (energy >= 50) {
                return "Your energy is balanced. Focus on optimizing and improving key areas.";
            } else {
                return "Your energy levels are low. Consider focusing on physical health, emotional well-being, and mental clarity.";
            }
        }

        // Initialize stars and effects
        createStars();
    </script>
</body>
</html>

Keshav Chopra