<html>

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width,initial-scale=1">



        <title>Daily Wine Consumption Tracker</title>

        <meta name="description" content="Track your daily wine consumption effortlessly. Set goals, log your drink history, and visualize your consumption trends.">

        <meta name="keywords" content="wine tracker, daily consumption, drink log, wine goals, consumption trends">



        <!-- Libraries -->

        <!-- jQuery (3.6.0) -->

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>

        <!-- Bootstrap CSS (5.3.3) -->

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">

        <!-- Bootstrap JS (5.3.3) -->

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous">

        </script>

        <!-- Font Awesome (6.6.0) -->

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous">



        <script type="text/javascript">

            try {

                document.addEventListener("DOMContentLoaded", function() {

                    const logForm = document.getElementById('log-form');

                    const displayArea = document.getElementById('display-area');

                    const targetGoalInput = document.getElementById('target-goal');

                    const logInput = document.getElementById('wine-amount');

                    const logList = [];

                    

                    logForm.onsubmit = function(e) {

                        e.preventDefault();

                        const wineAmount = parseFloat(logInput.value);

                        if (!isNaN(wineAmount) && wineAmount > 0) {

                            logList.push(wineAmount);

                            logInput.value = '';

                            displayLogs();

                        }

                    }



                    function displayLogs() {

                        displayArea.innerHTML = '';

                        logList.forEach((amount, index) => {

                            const logItem = document.createElement('li');

                            logItem.textContent = `Logged: ${amount} glasses`;

                            displayArea.appendChild(logItem);

                        });

                        calculateProgress();

                    }



                    function calculateProgress() {

                        const total = logList.reduce((acc, curr) => acc + curr, 0);

                        let progressBar = document.getElementById('progress-bar');

                        const target = parseFloat(targetGoalInput.value) || 0;



                        progressBar.style.width = (total / target * 100) + '%';

                        progressBar.innerText = `${total} / ${target} glasses consumed`;



                        progressBar.classList.toggle('bg-success', total >= target);

                        progressBar.classList.toggle('bg-danger', total < target);

                    }



                });

            } catch (error) {

                throw error;

            }

        </script>

        

        <style>

            body {

                background: linear-gradient(90deg, rgba(239, 157, 200, 1) 0%, rgba(255, 199, 248, 1) 100%);

            }

            h1 {

                color: #782B6B;

                text-align: center;

                margin-top: 20px;

            }

            #log-form {

                margin: 20px auto;

                max-width: 400px;

            }

            #progress-bar {

                height: 30px;

                transition: width 0.5s ease;

            }

        </style>

    </head>

    <body>

        <div id="main-container" class="container">

            <h1>Daily Wine Consumption Tracker</h1>

            <form id="log-form" class="text-center">

                <div class="mb-3">

                    <input type="number" id="target-goal" class="form-control" placeholder="Enter your daily goal (glasses)" required>

                </div>

                <div class="mb-3">

                    <input type="number" id="wine-amount" class="form-control" placeholder="Amount of wine consumed (glasses)" required>

                </div>

                <button type="submit" class="btn btn-primary">Log Wine</button>

            </form>

            <div class="progress mb-4">

                <div id="progress-bar" class="progress-bar" role="progressbar" style="width: 0%;" aria-valuemin="0" aria-valuemax="100">0 glasses logged</div>

            </div>

            <ul id="display-area" class="list-unstyled"></ul>

        </div>

    </body>

</html>