<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/daisyui@3.1.6/dist/full.css" rel="stylesheet" type="text/css" />
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js"></script>
<script type="module" src="main.js"></script>
<title>Cookie Recipe</title>
</head>
<body>
<!-- Declare a new Alpine component and its data -->
<div x-data="cookieRecipe">
<!-- Display ingredients and instructions -->
<div class="container">
<h1>Cookie Recipe</h1>
<ul>
<li x-text="ingredients[0]"></li>
<li x-text="ingredients[1]"></li>
<li x-text="ingredients[2]"></li>
<li x-text="ingredients[3]"></li>
<li x-text="ingredients[4]"></li>
</ul>
<ol>
<li x-text="methodology[0]"></li>
<li x-text="methodology[1]"></li>
<li x-text="methodology[2]"></li>
<li x-text="methodology[3]"></li>
<li x-text="methodology[4]"></li>
<li x-text="methodology[5]"></li>
</ol>
</div>
<!-- Calculate progress and display progress bar -->
<div class="progressBox">
<progress class="progressbar" x-transition="progress.track" x-text="progress.value"></progress>
<div class="progress-value" x-text="progress.value"></div>
</div>
<!-- Completion message -->
<div class="completed-message" x-text="completed ? 'Congratulations, you have completed the cookie recipe!' : ''"></div>
</div>
</body>
</html>