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

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

        /* Chakra Based Question Styling */
        .chakra-question {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    </style>
</head>
<body>

    
    <div class="star-field" id="star-field"></div>

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

    <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="startQuestions()">Next</button>

        
        <div class="question-container" id="question-container">
            <h2>Please answer the following questions to assess your energy levels:</h2>
            <div id="chakra-questions"></div>
            <button class="btn" onclick="calculateEnergy()">Submit Answers</button>
        </div>

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

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

    <script>
        const chakraQuestions = [
            { question: "How would you rate your overall sense of physical grounding and stability?", chakra: "Root" },
            { question: "How comfortable are you with embracing your creativity and passions?", chakra: "Sacral" },
            { question: "How confident are you in your ability to make decisions and take action?", chakra: "Solar Plexus" },
            { question: "How well do you connect with feelings of love and compassion?", chakra: "Heart" },
            { question: "How easy is it for you to express your thoughts clearly?", chakra: "Throat" },
            { question: "How strongly do you trust your inner wisdom and intuition?", chakra: "Third Eye" },
            { question: "How open are you to connecting with higher consciousness and spiritual knowledge?", chakra: "Crown" }
        ];

        let answers = [];

        // Create the 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 chakra-based questions after DOB
        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 = '';
            chakraQuestions.forEach((item, index) => {
                questionHtml += `
                    <div class="chakra-question">
                        <p class="question">${item.question}</p>
                        <input type="number" id="answer-${index}" min="1" max="5" placeholder="Rate from 1 to 5">
                    </div>
                `;
            });
            document.getElementById('chakra-questions').innerHTML = questionHtml;
        }

        // Calculate the energy based on the answers
        function calculateEnergy() {
            let totalScore = 0;

            chakraQuestions.forEach((item, index) => {
                const answer = parseInt(document.getElementById(`answer-${index}`).value);
                if (answer >= 1 && answer <= 5) {
                    totalScore += answer;
                }
            });

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

            // Update energy circle animation
            document.getElementById('energy-circle').style.background = `conic-gradient(#00e6e6 ${energyPercentage}%, #009999 ${energyPercentage}%)`;

            // Display action message
            document.getElementById('prediction-result').textContent = `Please wait, generating your action...`;
            setTimeout(() => {
                document.getElementById('prediction-result').textContent = `Your predicted energy level is ${energyPercentage}%`;
            }, 2000);
        }

        // Initialize star field
        createStars();
    </script>

</body>
</html>

Keshav Chopra