| <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>Bedtime Stories Generator</title></head><body> |
| <div class="bg-black h-screen w-screen"></div> |
| <div class="flex h-screen top-0 bg-white"> |
| <div class="flex-1"> |
| <div class="object-contain pull-left overflow-auto p-5 lg:h-64" x-data="{{ foo: 'bar' }}"> |
| <svg viewBox="0 0 800 200" width="100%" fill="white" xmlns="http://www.w3.org/2000/svg"> |
| <path d="M 0 0 0 150 200 150 200 0 z"></path> |
| <text y="140" x="100" stroke="#FF0000" fill="red" font-family="Helvetica" font-size="30" letter-spacing="16" text-anchor="middle">{ foo }</text> |
| </svg> |
| </div> |
| <div class="m-10 p-5 bg-white w-3/4"> |
| <div class="flex justify-center pt-10 font-h1"> |
| <h1 class="text-indigo-500 font-bold text-xl">Story Time!</h1> |
| </div> |
| <p class="font-body mx-2">Welcome to DaisyUI's Story Time! Here you can create your own infinite bedtime stories using DaisyUI's unlimited flow and the power of OpenAI's GPT-3!</p> |
| </div> |
| <div class="m-10 p-5 bg-white w-3/4"> |
| <form x-data="{ open: false }"> |
| <div class="relative group"> |
| <div class="absolute remove compatible top-0 left-0 appearance w-full bg-black"> |
| <div class="h-full w-full opacity-0 items-center justify-items-center p-5 bg-gray-500"> |
| <span class="w-5 h-5"> |
| <svg viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg"> |
| <path d="M0 0h24v24H0z" fill="none"></path><path d="M6.72 16l-2.49-2.49 1.41-1.41 2.49 2.49 4.95-4.95-4.95-4.96-2.689 2.689zm3.213-2.056l-.589 1.902 1.063-2.056-1.746-1.117 1.388-1.388c-2.496-.12-4.786-.347-6.697.2-1.986 1.315-2.653 2.485-2.963 4.982l-.89 1.41zm3.708-3.708l2.596 2.596-.89 1.41-2.596-2.596L9.6 12.594l2.813 1.41 2.19-2.19zm-2.957 3.332l1.41 1.41L5.376 17.361 2.89 15.796l2.689 2.689zm16.99-5.348l-1.41-1.41 2.49-2.49-1.41-1.41-2.49-2.49L9.6 2.798l-2.81-1.41L11.354 0z"></path> |
| </svg> |
| </span> |
| </div> |
| </div> |
| <div class="flex items-center"> |
| <input type="text" class="mr-3 form-input w-full appearance-none" placeholder="Enter your prompt..." @focus="open = !open" @blur="open = !open"> |
| <div class="bg-gray-500 appearance-none block showed" x-show="open"><button class="btn btn-primary">Generate Story</button></div> |
| </div> |
| </div> |
| </form> |
| </div> |
| </div> |
| <div class="flex-1"> |
| <div class="object-center mx-auto w-full"> |
| <div class="ardinator"></div> |
| <div class="pl-5 pr-10 p-5 lg:w-8/12"> |
| <p class="font-body mx-2">Your story will appear here!</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="flex bottom-0 w-full m-10 p-5 bg-black text-white"> |
| <div class="flex-1"> |
| <div class="object-contain pull-left overflow-auto p-5 lg:h-64"> |
| <svg viewBox="0 0 800 200" width="100%" fill="white" xmlns="http://www.w3.org/2000/svg"> |
| <path d="M 0 0 0 150 200 150 200 0 z"></path> |
| <text y="140" x="100" stroke="#FF8040" fill="whitesmoke" font-family="Helvetica" font-size="30" letter-spacing="16" text-anchor="middle">Powered by OpenAI and DaisyUI</text> |
| </svg> |
| </div> |
| <div class="m-10 p-5 bg-black w-3/4"> |
| <h1 class="text-indigo-500 font-bold text-xl">Powered by OpenAI and DaisyUI</h1> |
| <p class="font-body mx-2">DaisyUI is powered by OpenAI's GPT-3 which is used to generate the stories based on your prompt. This is just a proof of concept, so please use it responsibly and have fun!</p> |
| </div> |
| </div> |
| </div> |
| </body></html> |
