| <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> |
| |
| <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> |
