commit 43533ad38a9c9e30f2a4897727b5f7ec42ef51b6
Author: root <root@hub.scroll.pub>
Date: 2024-12-29 06:22:01 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..039927d
--- /dev/null
+++ b/body.html
@@ -0,0 +1,33 @@
+<header>
+ <h1>FairyTales</h1>
+ <p>Create magical stories with just a few clicks!</p>
+</header>
+
+<main>
+ <section id="age-group">
+ <h2>Choose Your Age Group</h2>
+ <div class="age-buttons">
+ <button data-age="3-5">3-5 Years</button>
+ <button data-age="6-8">6-8 Years</button>
+ <button data-age="9-12">9-12 Years</button>
+ </div>
+ </section>
+
+ <section id="story-prompt" class="hidden">
+ <h2>Your Story Prompt</h2>
+ <textarea id="prompt-input" placeholder="Enter a few words to start your story..."></textarea>
+ <button id="generate-story">Create My Story</button>
+ </section>
+
+ <section id="story-result" class="hidden">
+ <h2>Your Fairy Tale</h2>
+ <div id="story-content"></div>
+ <div id="story-illustration"></div>
+ <button id="listen-story">Listen to Story</button>
+ <button id="new-story">Create Another Story</button>
+ </section>
+</main>
+
+<footer>
+ <p>Let your imagination soar with FairyTales!</p>
+</footer>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..c9587e1
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://fairytales.scroll.pub
+metaTags
+editButton /edit.html
+title FairyTales - Create Your Own Story
+style.css
+body.html
+script.js
\ No newline at end of file
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..6ae643a
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,25 @@
+{
+ "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<header>\n <h1>FairyTales</h1>\n <p>Create magical stories with just a few clicks!</p>\n</header>\n\n<main>\n <section id=\"age-group\">\n <h2>Choose Your Age Group</h2>\n <div class=\"age-buttons\">\n <button data-age=\"3-5\">3-5 Years</button>\n <button data-age=\"6-8\">6-8 Years</button>\n <button data-age=\"9-12\">9-12 Years</button>\n </div>\n </section>\n\n <section id=\"story-prompt\" class=\"hidden\">\n <h2>Your Story Prompt</h2>\n <textarea id=\"prompt-input\" placeholder=\"Enter a few words to start your story...\"></textarea>\n <button id=\"generate-story\">Create My Story</button>\n </section>\n\n <section id=\"story-result\" class=\"hidden\">\n <h2>Your Fairy Tale</h2>\n <div id=\"story-content\"></div>\n <div id=\"story-illustration\"></div>\n <button id=\"listen-story\">Listen to Story</button>\n <button id=\"new-story\">Create Another Story</button>\n </section>\n</main>\n\n<footer>\n <p>Let your imagination soar with FairyTales!</p>\n</footer>\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 = '<img src=\"data:image/svg+xml;base64,...\" alt=\"Story Illustration\">'; // 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"
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..ab932b8
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# 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.
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..209c043
--- /dev/null
+++ b/script.js
@@ -0,0 +1,48 @@
+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 = '<img src="data:image/svg+xml;base64,..." alt="Story Illustration">'; // Placeholder for illustration
+ storyPromptSection.classList.add('hidden');
+ storyResultSection.classList.remove('hidden');
+ }
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..1feebca
--- /dev/null
+++ b/style.css
@@ -0,0 +1,101 @@
+: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;
+ }
+}
\ No newline at end of file