<html lang="en"><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@jaames/iro@5"></script>
</head>
<body>
    <div id="main">
        <div id="status">

            <div class="status-container">
                <svg id="thirst" class="status-svg">
                    <circle class="status-circle" cx="50%" cy="50%" r="35%"></circle>
                    <image x="27%" y="27%" href="images/water.png" width="40%" height="40%"></image>
                </svg>
                <div id="thirst-container" class="status-bar-container">
                    <div id="thirst-bar" class="status-bar"></div>
                </div>
            </div>
            
            <div class="status-container">
                <svg id="hunger" class="status-svg">
                    <circle class="status-circle" cx="50%" cy="50%" r="35%"></circle>
                    <image x="27%" y="27%" href="images/cutlery.png" width="40%" height="40%"></image>
                </svg>
                <div id="hunger-container" class="status-bar-container">
                    <div id="hunger-bar" class="status-bar"></div>
                </div>
            </div>
            
        </div>
    <script src="js/ui.js"></script>
</div>

</body></html>

