호그와트

Food Is Therapy F I T 앱 맛보기 3

영웅*^%&$ 2024. 11. 18. 07:13
728x90
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>F I T</title>
    <link rel="stylesheet" href="/static/styles_main.css">
    <link rel="icon" href="/static/images/icon.png" type="image/x-icon">
</head>
<body>
    <header class="main-header">
        <div class="logo">
            <h1>Food is Therapy</h1>
        </div>
        <nav class="navbar">
            <a href="random" class="nav-item">✨ Random</a>
            <a href="healthy_meal" class="nav-item">🧑‍🍳 You Choice</a>
            <a href="record_it" class="nav-item">🐶 Record It</a>
            <a href="fortune_food" class="nav-item">🔮 Fortune Food</a>
        </nav>
    </header>

    <main>

    <section class="video-and-features">
        <div class="video-container">
            <video autoplay muted loop>
                <source src="/static/video/background.mp4" type="video/mp4">
                Your browser does not support the video tag. Please disable the video or update your browser.
            </video>
        </div>
        <div class="features">
            <div id="random" class="feature-card">
                <a href="/random" class="feature-button feature-image2">
                    <span>✨ Random</span>
                    <img src="/static/images/random.jpeg" alt="Random recipe" />
                </a>
                <p>Out of ideas? Generate a healthy recipe with just a few clicks and start cooking in no time!</p>
            </div>

            <div id="you-choice" class="feature-card">
                <a href="/healthy_meal" class="feature-button feature-image4">
                    <span>🧑‍🍳 You Choice</span>
                    <img src="/static/images/you_choice.jpeg" alt="You choice" />
                </a>
                <p>Have ingredients but need inspiration? Enter your items and we'll craft recipes just for you, with video tutorials!</p>
            </div>

            <div id="record-it" class="feature-card">
                <a href="/record_it" class="feature-button feature-image3">
                    <span>🐶 Record It</span>
                    <img src="/static/images/record_it.jpeg" alt="Record it" />
                </a>
                <p>Track your meals and let our adorable avatar dog reflect your healthy eating habits. Stay on track!</p>
            </div>

            <div id="fortune-food" class="feature-card">
                <a href="/fortune_food" class="feature-button feature-image1">
                    <span>🔮 Fortune Food</span>
                    <img src="/static/images/fortune_food.jpeg" alt="Fortune food" />
                </a>
                <p>Let fate decide your next meal! Get a fun, healthy recipe recommendation inspired by your zodiac sign.</p>
            </div>
            </div>
        </section>


    <section class="reviews-and-avatar">
        <div class="lottie-container">
            <div id="lottie-avatar"></div>
        </div>

        <div class="reviews">
            <h2>What Our Users Say 💬</h2>
            <div class="review-card">
                <p>"I love the 'Random' feature! It's so easy to discover new recipes. 🌟"</p>
                <span>- Alex J.</span>
            </div>
            <div class="review-card">
                <p>"The 'You Choice' feature helped me use up my leftover ingredients. Perfect! 🥕"</p>
                <span>- Maria L.</span>
            </div>
            <div class="review-card">
                <p>"My kids adore the avatar dog—it keeps them excited about healthy eating! 🐶"</p>
                <span>- Chris D.</span>
            </div>
            <div class="review-card">
                <p>"Fortune Food is such a fun way to pick my meals! It’s like a daily dose of surprise. 🎉"</p>
                <span>- Sarah T.</span>
            </div>
        </div>
    </section>
    </main>

    <footer>
        <p>&copy; 2024 Healthy Recipe Hub | Eat smart, live well! 🌿</p>
    </footer>

    <script>
        window.addEventListener('scroll', function () {
            const navbar = document.querySelector('.navbar');
            navbar.classList.toggle('sticky', window.scrollY > 0);
        });

        lottie.loadAnimation({
            container: document.getElementById('lottie-avatar'),
            renderer: 'svg',
            loop: true,
            autoplay: true,
            path: '/static/animations/normaldog.json' // Replace with your Lottie animation file
        });
    </script>
</body>
</html>
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Healthy Meal Planner</title>
    <link rel="stylesheet" href="/static/style_testing.css">
</head>
<body>
    <div class="container">
        <h1>Healthy Meal Planner</h1>

        <div class="input-section">
            <label>Enter available ingredients (comma-separated):</label>
            <input type="text" id="ingredients" placeholder="e.g., chicken breast, broccoli, rice">
        </div>

        <button onclick="vegiePrompt()">Are you Vegetarian? (Only shows veggie options)</button>

        <div class="input-section">
            <label>Enter dietary restrictions (comma-separated):</label>
            <input type="text" id="restrictions" placeholder="e.g., tofu, milk">
        </div>

        <button onclick="generateRecipe()">Generate Recipe</button>

        <h2>YouTube Information:</h2>
        <div id="youtube-output" class="output"></div>

        <h2>Recipe:</h2>
        <div id="recipe-output" class="output"></div>

        <h2>Instructions:</h2>
        <div id="instructions-output" class="output"></div>

        <h2>Nutritional Information:</h2>
        <div id="nutrition-output" class="output"></div>
    </div>

    <script>
        async function generateRecipe() {
            const ingredients = document.getElementById('ingredients').value.split(',').map(item => item.trim()).filter(item => item);
            const restrictions = document.getElementById('restrictions').value.split(',').map(item => item.trim()).filter(item => item);

            const response = await fetch('/generate_recipe', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({ ingredients, restrictions })
            });

            const data = await response.json();
            displayRecipe(data);
        }

        async function vegiePrompt() {
            const ingredients = document.getElementById('ingredients').value.split(',').map(item => item.trim()).filter(item => item);
            const restrictions = document.getElementById('restrictions').value.split(',').map(item => item.trim()).filter(item => item);

            const response = await fetch('/generate_recipe_vegetarian', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({ ingredients, restrictions })
            });

            const data = await response.json();
            displayRecipe(data);
        }

        function displayRecipe(data) {
            if (data.error) {
                alert(data.error);
                return;
            }

            document.getElementById('recipe-output').innerText = data.recipe || "Sorry, something went wrong.";
            document.getElementById('instructions-output').innerText = data.instructions || "Sorry, something went wrong.";
            document.getElementById('nutrition-output').innerText = `
Calories: ${data.nutrition.calories} kcal
Protein: ${data.nutrition.protein} g
Fat: ${data.nutrition.fat} g
Carbohydrates: ${data.nutrition.carbohydrates} g
            `;

            // Display YouTube Information with embedded video player
            const youtubeOutput = document.getElementById('youtube-output');
            youtubeOutput.innerHTML = ''; // Clear previous content

            if (data.video_id && data.recipe_name) {
                const videoId = data.video_id;
                const videoUrl = `https://www.youtube.com/embed/${videoId}`;

                youtubeOutput.innerHTML = `
                    <h3>Watch "${data.recipe_name}" Video:</h3>
                    <iframe width="560" height="315" src="${videoUrl}" frameborder="0" allowfullscreen></iframe>
                `;
            } else if (data.recipe_name) {
                const query = encodeURIComponent(data.recipe_name);
                const youtubeSearchUrl = `https://www.youtube.com/results?search_query=${query}`;
                youtubeOutput.innerHTML = `
                    <a href="${youtubeSearchUrl}" target="_blank">
                        Click here to search for "${data.recipe_name}" on YouTube
                    </a>
                `;
            } else {
                youtubeOutput.innerText = "No recipe name provided.";
            }
        }
    </script>
</body>
</html>
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>You wanna try something new?</title>
    <link rel="stylesheet" href="/static/style_main.css">
    <style>
        .button-group {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 20px;
        }
        .button-group button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            border: none;
            border-radius: 5px;
            background-color: #76c893;
            color: white;
            transition: background-color 0.3s;
        }
        .button-group button:hover {
            background-color: #76c893;
        }
        .output {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>You wanna try something new?</h1>

        <div class="button-group">
            <button onclick="chooseStyle('western')">Western</button>
            <button onclick="chooseStyle('spicy')">Spicy</button>
            <button onclick="chooseStyle('non-spicy')">Non-Spicy</button>
            <button onclick="chooseStyle('stay-healthy')">Stay Healthy</button>
            <button onclick="chooseStyle('comfort-food')">Comfort Food</button>
        </div>

        <div class="output-section">
            <h2>YouTube Information:</h2>
            <div id="youtube-output" class="output"></div>

            <h2>Recipe:</h2>
            <div id="recipe-output" class="output"></div>

            <h2>Instructions:</h2>
            <div id="instructions-output" class="output"></div>
        </div>
    </div>

    <script>
        async function chooseStyle(style) {
            try {
                // Send POST request to Flask backend
                const response = await fetch('/generate_recipe_by_style', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ style })
                });

                if (!response.ok) {
                    throw new Error('Failed to fetch recipe. Please try again.');
                }

                const data = await response.json();
                displayRecipe(data);
            } catch (error) {
                alert(error.message);
            }
        }


        function displayRecipe(data) {
    if (data.error) {
        alert(data.error);
        return;
    }

    document.getElementById('recipe-output').innerText = data.recipe || "No recipe available.";

    const instructions = data.instructions || "Instructions not available. Please try again later.";
    document.getElementById('instructions-output').innerText = instructions;

    const youtubeOutput = document.getElementById('youtube-output');
    youtubeOutput.innerHTML = ''; // Clear previous content

    if (data.video_id && data.recipe_name) {
        const videoId = data.video_id;
        youtubeOutput.innerHTML = `
            <h3>Watch "${data.recipe_name}" Video:</h3>
            videoId}" frameborder="0" allowfullscreen></iframe>
        `;
    } else if (data.recipe_name) {
        const query = encodeURIComponent(data.recipe_name);
        youtubeOutput.innerHTML = `
            query}" target="_blank">
                Search for "${data.recipe_name}" on YouTube
            </a>
        `;
    } else {
        youtubeOutput.innerText = "No YouTube video available.";
    }
}
    </script>
</body>
</html>
이번 해커톤에서 재미삼아 만든 앱이댯
전체 링크는 아래를 참조 
728x90
저작자표시

'호그와트' 카테고리의 다른 글

Food Is Therapy F I T 앱 맛보기 2  (0) 2024.11.18
Food Is Therapy F I T 앱 맛보기 1  (0) 2024.11.18
vola vola easy vola  (0) 2024.11.14
pqg  (0) 2024.11.08
CVE 2024 27198 without annoying faker lib  (0) 2024.10.20

'호그와트'의 다른글

  • 현재글Food Is Therapy F I T 앱 맛보기 3

관련글

티스토리툴바