Embed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chakra World Energy Journey</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;
        }

        /* Chakra World Animation */
        .chakra-world {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 36px;
            opacity: 0;
            transition: opacity 2s ease-in-out;
        }

        /* Individual Chakra Worlds */
        .root-world {
            background: rgba(255, 0, 0, 0.8);
            color: white;
        }

        .sacral-world {
            background: rgba(255, 165, 0, 0.8);
            color: white;
        }

        .solar-world {
            background: rgba(255, 255, 0, 0.8);
            color: black;
        }

        .heart-world {
            background: rgba(0, 255, 0, 0.8);
            color: white;
        }

        .throat-world {
            background: rgba(0, 0, 255, 0.8);
            color: white;
        }

        .third-eye-world {
            background: rgba(75, 0, 130, 0.8);
            color: white;
        }

        .crown-world {
            background: rgba(238, 130, 238, 0.8);
            color: white;
        }

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

        /* General Page 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 Energy Level Progress Bar */
        .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;
        }
    </style>
</head>
<body>

    
    <div id="chakraWorld" class="chakra-world"></div>

    <div class="container">
        <h1>Chakra World Energy Journey</h1>

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

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

        
        <div class="progress-bar">
            <div class="progress-fill" id="energyProgress"></div>
        </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 = {};

        // Function to start the journey
        function startJourney() {
            const dob = document.getElementById('dob').value;
            if (dob) {
                // Show chakra questions after DOB is entered
                displayChakraQuestions();
            } else {
                alert('Please select your birth date!');
            }
        }

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

            chakraQuestions.forEach((item, 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}, 'yes')">Yes</button>
                        <button onclick="recordAnswer(${index}, 'no')">No</button>
                    </div>
                `;
                chakraQuestionsContainer.appendChild(questionDiv);
            });
        }

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

            // If all answers are collected, start chakra world visualization
            if (Object.keys(userAnswers).length === chakraQuestions.length) {
                transitionChakraWorld();
            }
        }

        // Function to transition to chakra world
        function transitionChakraWorld() {
            const chakraWorld = document.getElementById('chakraWorld');

            // Determine which chakra world to show based on answers
            if (userAnswers['Root Chakra'] === 'yes') {
                chakraWorld.className = 'chakra-world root-world';
            } else if (userAnswers['Sacral Chakra'] === 'yes') {
                chakraWorld.className = 'chakra-world sacral-world';
            } else if (userAnswers['Solar Plexus Chakra'] === 'yes') {
                chakraWorld.className = 'chakra-world solar-world';
            } else if (userAnswers['Heart Chakra'] === 'yes') {
                chakraWorld.className = 'chakra-world heart-world';
            } else if (userAnswers['Throat Chakra'] === 'yes') {
                chakraWorld.className = 'chakra-world throat-world';
            } else if (userAnswers['Third Eye Chakra'] === 'yes') {
                chakraWorld.className = 'chakra-world third-eye-world';
            } else if (userAnswers['Crown Chakra'] === 'yes') {
                chakraWorld.className = 'chakra-world crown-world';
            }

            // Show chakra world after transition
            setTimeout(() => {
                chakraWorld.style.opacity = 1;
            }, 500);

            // Update energy level (a randomized energy calculation)
            const energy = calculateEnergy();
            document.getElementById('energyProgress').style.width = energy + '%';
        }

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

</body>
</html>

Keshav Chopra