health.life

get a custom deit plan
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Personal Diet Planner</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 0;
            padding: 20px;
        }
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div id="homePage">
        <h1>Welcome to the Personal Diet Planner</h1>
        <button onclick="goToDietaryRestrictions()">Start</button>
    </div>

    <div id="dietaryRestrictionsPage" class="hidden">
        <h2>Step 1: Enter Dietary Restrictions</h2>
        <textarea id="restrictions" placeholder="E.g., Gluten-free, Dairy-free, etc."></textarea><br>
        <button onclick="goToQuestions()">Next</button>
    </div>

    <div id="questionsPage" class="hidden">
        <h2>Step 2: Answer the Questions</h2>
        <p>What is your goal? (e.g., Weight loss, Muscle gain, etc.)</p>
        <input type="text" id="goal"><br>
        <p>How many meals per day do you prefer?</p>
        <input type="number" id="meals"><br>
        <button onclick="generateDiet()">Submit</button>
    </div>

    <div id="resultPage" class="hidden">
        <h2>Your Personalized Diet Plan</h2>
        <p id="result"></p>
        <button onclick="restart()">Start Over</button>
    </div>

    <script>
        function goToDietaryRestrictions() {
            document.getElementById('homePage').classList.add('hidden');
            document.getElementById('dietaryRestrictionsPage').classList.remove('hidden');
        }

        function goToQuestions() {
            document.getElementById('dietaryRestrictionsPage').classList.add('hidden');
            document.getElementById('questionsPage').classList.remove('hidden');
        }

        function generateDiet() {
            const restrictions = document.getElementById('restrictions').value;
            const goal = document.getElementById('goal').value;
            const meals = document.getElementById('meals').value;

            const dietPlan = `
                Based on your input:
                - Dietary Restrictions: ${restrictions}
                - Goal: ${goal}
                - Meals per day: ${meals}
                Here's your perfect diet! (You can customize this further.)
            `;

            document.getElementById('questionsPage').classList.add('hidden');
            document.getElementById('resultPage').classList.remove('hidden');
            document.getElementById('result').innerText = dietPlan;
        }

        function restart() {
            document.getElementById('resultPage').classList.add('hidden');
            document.getElementById('homePage').classList.remove('hidden');
        }
    </script>
</body>
</html>
Editor is loading...