|
<html> |
|
<head> |
|
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" /> |
|
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/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> |
|
|
|
<div x-data="cookieRecipe"> |
|
|
|
<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> |
|
|
|
<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> |
|
|
|
<div class="completed-message" x-text="completed ? 'Congratulations, you have completed the cookie recipe!' : ''"></div> |
|
</div> |
|
</body> |
|
</html> |
