| <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>Children's Story</title></head><body><div class="space-y-8"> | |
| <div class="font-bold text-3xl text-center">Introduction</div> | |
| <p class="text-xl font-medium text-gray-700">Welcome to the children's story website. Here, you can create your own personalized story and interactive game. Please follow along the instructions and let's make some magic happen!</p> | |
| <div class="font-bold text-3xl text-center">Start the Story</div> | |
| <div class="space-y-4"> | |
| <div class="flex justify-center"> | |
| <input type="text" name="title" x-model="title" placeholder="Title" class="w-full rounded-md mb-2 text-gray-600 font-bold"> | |
| <label class="mr-4">Title</label> | |
| </div> | |
| <div class="flex justify-center"> | |
| <input type="text" name="author" x-model="author" placeholder="Author" class="w-full rounded-md mb-2 text-gray-600 font-bold"> | |
| <label>Author</label> | |
| </div> | |
| <div class="flex justify-center"> | |
| <div class="w-full mb-8"> | |
| <div class="p-4 border-t-2 border-gray-200"> | |
| <p> | |
| <textarea name="story" x-model="story" placeholder="Describe the story" cols="50" rows="10" class="w-full rounded-md mb-2 text-gray-600 font-bold"></textarea> | |
| </p> | |
| </div> | |
| <p> | |
| <span class="text-sm font-medium text-gray-700">Imagine you are a child in 500 words.</span> | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex justify-center"> | |
| <button type="button" class="btn btn-primary" x-on:click="generate">Generate Story</button> | |
| </div> | |
| </div> | |
| <div class="font-bold text-3xl text-center"> Interactive Game</div> | |
| <div class="space-y-8"> | |
| <div class="w-full"></div> | |
| <div class="flex justify-center"> | |
| <div class="w-full mb-8"> | |
| <div class="p-4 border-t-2 border-gray-200"> | |
| <p> | |
| <span class="text-sm font-medium text-gray-700"> intitulé</span> | |
| </p> | |
| <p> | |
| <span class="text-sm font-medium text-gray-700"> game code</span> | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-center"> | |
| <button type="button" class="btn btn-primary" x-on:click="startGame">Start the Game</button> | |
| </div> | |
| </div> | |
| </div></body></html> |