Changes to fairytales.scroll.pub

root

24 days ago

Initial commit

body.html

Changed around line 1
+ 
+   FairyTales
+   Create magical stories with just a few clicks!
+ 
+ 
+ 
+   
+     Choose Your Age Group
+     
+       
+       
+       
+     
+   
+ 
+   
+     Your Story Prompt
+     
+     
+   
+ 
+   
+     Your Fairy Tale
+     
+     
+     
+     
+   
+ 
+ 
+ 
+   Let your imagination soar with FairyTales!
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://fairytales.scroll.pub
+ metaTags
+ editButton /edit.html
+ title FairyTales - Create Your Own Story
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "042f3baa-8f25-4b0f-bd22-c1a0fd044a10",
+   "object": "chat.completion",
+   "created": 1735453302,
+   "model": "deepseek-chat",
+   "choices": [
+     {
+       "index": 0,
+       "message": {
+         "role": "assistant",
+         "content": "---domain---\nfairytales.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://fairytales.scroll.pub\nmetaTags\neditButton /edit.html\ntitle FairyTales - Create Your Own Story\nstyle.css\nbody.html\nscript.js\n---body.html---\n\n  FairyTales\n  Create magical stories with just a few clicks!
\n\n\n\n  \n    Choose Your Age Group\n    \n      \n      \n      \n    
\n  \n\n  \n    Your Story Prompt\n    \n    \n  \n\n  \n    Your Fairy Tale\n    
\n    
\n    \n    \n  \n\n\n\n  Let your imagination soar with FairyTales!
\n\n---style.css---\n:root {\n  --primary-color: #6a1b9a;\n  --secondary-color: #ffab40;\n  --background-color: #f5f5f5;\n  --text-color: #333;\n  --font-family: 'Comic Sans MS', cursive, sans-serif;\n}\n\nbody {\n  font-family: var(--font-family);\n  background-color: var(--background-color);\n  color: var(--text-color);\n  margin: 0;\n  padding: 20px;\n  max-width: 800px;\n  margin: 0 auto;\n}\n\nheader {\n  text-align: center;\n  padding: 2rem 0;\n}\n\nh1 {\n  color: var(--primary-color);\n  font-size: 3rem;\n  margin-bottom: 0.5rem;\n}\n\np {\n  font-size: 1.2rem;\n  color: var(--text-color);\n}\n\nsection {\n  margin: 2rem 0;\n  padding: 1.5rem;\n  background: white;\n  border-radius: 10px;\n  box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n}\n\n.age-buttons {\n  display: flex;\n  justify-content: center;\n  gap: 1rem;\n}\n\nbutton {\n  background-color: var(--primary-color);\n  color: white;\n  border: none;\n  padding: 1rem 2rem;\n  border-radius: 5px;\n  font-size: 1rem;\n  cursor: pointer;\n  transition: background-color 0.3s;\n}\n\nbutton:hover {\n  background-color: var(--secondary-color);\n}\n\ntextarea {\n  width: 100%;\n  height: 100px;\n  padding: 10px;\n  border-radius: 5px;\n  border: 1px solid #ddd;\n  font-family: var(--font-family);\n}\n\n.hidden {\n  display: none;\n}\n\n#story-content {\n  font-size: 1.2rem;\n  line-height: 1.6;\n  margin-bottom: 2rem;\n}\n\n#story-illustration {\n  text-align: center;\n  margin: 2rem 0;\n}\n\n@media (max-width: 600px) {\n  h1 {\n    font-size: 2rem;\n  }\n\n  .age-buttons {\n    flex-direction: column;\n  }\n\n  button {\n    width: 100%;\n    margin-bottom: 0.5rem;\n  }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n  const ageButtons = document.querySelectorAll('.age-buttons button');\n  const storyPromptSection = document.getElementById('story-prompt');\n  const storyResultSection = document.getElementById('story-result');\n  const generateStoryButton = document.getElementById('generate-story');\n  const listenStoryButton = document.getElementById('listen-story');\n  const newStoryButton = document.getElementById('new-story');\n  const promptInput = document.getElementById('prompt-input');\n  const storyContent = document.getElementById('story-content');\n  const storyIllustration = document.getElementById('story-illustration');\n\n  ageButtons.forEach(button => {\n    button.addEventListener('click', function() {\n      storyPromptSection.classList.remove('hidden');\n      storyResultSection.classList.add('hidden');\n    });\n  });\n\n  generateStoryButton.addEventListener('click', function() {\n    const prompt = promptInput.value.trim();\n    if (prompt) {\n      generateStory(prompt);\n    }\n  });\n\n  listenStoryButton.addEventListener('click', function() {\n    const text = storyContent.innerText;\n    if ('speechSynthesis' in window) {\n      const utterance = new SpeechSynthesisUtterance(text);\n      speechSynthesis.speak(utterance);\n    }\n  });\n\n  newStoryButton.addEventListener('click', function() {\n    storyPromptSection.classList.remove('hidden');\n    storyResultSection.classList.add('hidden');\n    promptInput.value = '';\n  });\n\n  function generateStory(prompt) {\n    // Simple story generation logic\n    const story = `Once upon a time, there was a ${prompt}. They went on an adventure and discovered something magical. The end.`;\n    storyContent.innerText = story;\n    storyIllustration.innerHTML = ''; // Placeholder for illustration\n    storyPromptSection.classList.add('hidden');\n    storyResultSection.classList.remove('hidden');\n  }\n});\n---end---"
+       },
+       "logprobs": null,
+       "finish_reason": "stop"
+     }
+   ],
+   "usage": {
+     "prompt_tokens": 270,
+     "completion_tokens": 1296,
+     "total_tokens": 1566,
+     "prompt_cache_hit_tokens": 0,
+     "prompt_cache_miss_tokens": 270
+   },
+   "system_fingerprint": "fp_f1afce2943"
+ }

readme.scroll

Changed around line 1

+ # fairytales.scroll.pub

+ Website generated by DeepSeek from prompt: Create a children's storybook app that allows kids of different age groups to autonomously generate fairy tales using prompts. The app will automatically generate text and illustrations while providing voiceover options.

script.js

Changed around line 1
+ document.addEventListener('DOMContentLoaded', function() {
+   const ageButtons = document.querySelectorAll('.age-buttons button');
+   const storyPromptSection = document.getElementById('story-prompt');
+   const storyResultSection = document.getElementById('story-result');
+   const generateStoryButton = document.getElementById('generate-story');
+   const listenStoryButton = document.getElementById('listen-story');
+   const newStoryButton = document.getElementById('new-story');
+   const promptInput = document.getElementById('prompt-input');
+   const storyContent = document.getElementById('story-content');
+   const storyIllustration = document.getElementById('story-illustration');
+ 
+   ageButtons.forEach(button => {
+     button.addEventListener('click', function() {
+       storyPromptSection.classList.remove('hidden');
+       storyResultSection.classList.add('hidden');
+     });
+   });
+ 
+   generateStoryButton.addEventListener('click', function() {
+     const prompt = promptInput.value.trim();
+     if (prompt) {
+       generateStory(prompt);
+     }
+   });
+ 
+   listenStoryButton.addEventListener('click', function() {
+     const text = storyContent.innerText;
+     if ('speechSynthesis' in window) {
+       const utterance = new SpeechSynthesisUtterance(text);
+       speechSynthesis.speak(utterance);
+     }
+   });
+ 
+   newStoryButton.addEventListener('click', function() {
+     storyPromptSection.classList.remove('hidden');
+     storyResultSection.classList.add('hidden');
+     promptInput.value = '';
+   });
+ 
+   function generateStory(prompt) {
+     // Simple story generation logic
+     const story = `Once upon a time, there was a ${prompt}. They went on an adventure and discovered something magical. The end.`;
+     storyContent.innerText = story;
+     storyIllustration.innerHTML = ''; // Placeholder for illustration
+     storyPromptSection.classList.add('hidden');
+     storyResultSection.classList.remove('hidden');
+   }
+ });

style.css

Changed around line 1
+ :root {
+   --primary-color: #6a1b9a;
+   --secondary-color: #ffab40;
+   --background-color: #f5f5f5;
+   --text-color: #333;
+   --font-family: 'Comic Sans MS', cursive, sans-serif;
+ }
+ 
+ body {
+   font-family: var(--font-family);
+   background-color: var(--background-color);
+   color: var(--text-color);
+   margin: 0;
+   padding: 20px;
+   max-width: 800px;
+   margin: 0 auto;
+ }
+ 
+ header {
+   text-align: center;
+   padding: 2rem 0;
+ }
+ 
+ h1 {
+   color: var(--primary-color);
+   font-size: 3rem;
+   margin-bottom: 0.5rem;
+ }
+ 
+ p {
+   font-size: 1.2rem;
+   color: var(--text-color);
+ }
+ 
+ section {
+   margin: 2rem 0;
+   padding: 1.5rem;
+   background: white;
+   border-radius: 10px;
+   box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+ }
+ 
+ .age-buttons {
+   display: flex;
+   justify-content: center;
+   gap: 1rem;
+ }
+ 
+ button {
+   background-color: var(--primary-color);
+   color: white;
+   border: none;
+   padding: 1rem 2rem;
+   border-radius: 5px;
+   font-size: 1rem;
+   cursor: pointer;
+   transition: background-color 0.3s;
+ }
+ 
+ button:hover {
+   background-color: var(--secondary-color);
+ }
+ 
+ textarea {
+   width: 100%;
+   height: 100px;
+   padding: 10px;
+   border-radius: 5px;
+   border: 1px solid #ddd;
+   font-family: var(--font-family);
+ }
+ 
+ .hidden {
+   display: none;
+ }
+ 
+ #story-content {
+   font-size: 1.2rem;
+   line-height: 1.6;
+   margin-bottom: 2rem;
+ }
+ 
+ #story-illustration {
+   text-align: center;
+   margin: 2rem 0;
+ }
+ 
+ @media (max-width: 600px) {
+   h1 {
+     font-size: 2rem;
+   }
+ 
+   .age-buttons {
+     flex-direction: column;
+   }
+ 
+   button {
+     width: 100%;
+     margin-bottom: 0.5rem;
+   }
+ }