Start Your Story
\nEnter your initial story concept below:
\n \n \n\n
\n\n World Building
\n \n\n
\n\n Characters
\n \n\n
\n\n Plot Elements
\n \n\n
\n 
body.html
Changed around line 1
+
+
+
SciFi Story Builder
+
Transform your ideas into complete science fiction universes
+
+
+
+
+
+
Start Your Story
+
Enter your initial story concept below:
+
+
+
+
+
+
+
World Building
+
+
+
+
+
Characters
+
+
+
+
+
Plot Elements
+
+
+
+
+
Technology & Science
+
+
+
+
+
+
+
SciFi Story Builder - Build your universe, one element at a time
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://scifistory.scroll.pub
+ metaTags
+ editButton /edit.html
+ title SciFi Story Builder - Create Your Science Fiction Universe
+ style.css
+ body.html
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "msg_01PA5ULakHSETnWVDh5YctML",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Here's a sci-fi story builder website:\n\n---domain---\nscifistory.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://scifistory.scroll.pub\nmetaTags\neditButton /edit.html\ntitle SciFi Story Builder - Create Your Science Fiction Universe\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n\n \n \n\n\n \n \n\n \n \n \n\n\n\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --accent-color: #3498db;\n --background-color: #1a1a2e;\n --text-color: #ecf0f1;\n --card-color: #2c3e50;\n --gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', system-ui, sans-serif;\n background: var(--gradient);\n color: var(--text-color);\n line-height: 1.6;\n min-height: 100vh;\n}\n\nheader {\n padding: 2rem;\n text-align: center;\n background: rgba(0, 0, 0, 0.2);\n backdrop-filter: blur(10px);\n}\n\nh1 {\n font-size: 2.5rem;\n margin-bottom: 0.5rem;\n background: linear-gradient(45deg, var(--accent-color), #e74c3c);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n}\n\n.tagline {\n font-size: 1.2rem;\n opacity: 0.8;\n}\n\nmain {\n max-width: 1200px;\n margin: 0 auto;\n padding: 2rem;\n}\n\n.idea-input {\n margin-bottom: 3rem;\n text-align: center;\n}\n\ntextarea {\n width: 100%;\n max-width: 800px;\n height: 150px;\n padding: 1rem;\n margin: 1rem 0;\n background: rgba(255, 255, 255, 0.1);\n border: 2px solid var(--accent-color);\n border-radius: 8px;\n color: var(--text-color);\n font-size: 1rem;\n resize: vertical;\n}\n\nbutton {\n background: var(--accent-color);\n color: white;\n border: none;\n padding: 1rem 2rem;\n font-size: 1.1rem;\n border-radius: 25px;\n cursor: pointer;\n transition: transform 0.2s, box-shadow 0.2s;\n}\n\nbutton:hover {\n transform: translateY(-2px);\n box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);\n}\n\n.element-group {\n margin-bottom: 2rem;\n padding: 2rem;\n background: rgba(0, 0, 0, 0.2);\n border-radius: 15px;\n backdrop-filter: blur(10px);\n}\n\n.grid-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 1.5rem;\n margin-top: 1rem;\n}\n\n.story-card {\n background: var(--card-color);\n padding: 1.5rem;\n border-radius: 10px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n transition: transform 0.3s;\n}\n\n.story-card:hover {\n transform: translateY(-5px);\n}\n\n.hidden {\n display: none;\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n margin-top: 3rem;\n background: rgba(0, 0, 0, 0.2);\n}\n\n@media (max-width: 768px) {\n h1 {\n font-size: 2rem;\n }\n \n .tagline {\n font-size: 1rem;\n }\n \n main {\n padding: 1rem;\n }\n \n .element-group {\n padding: 1rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const generateBtn = document.getElementById('generate-btn');\n const elementsContainer = document.getElementById('elements-container');\n \n generateBtn.addEventListener('click', generateStoryElements);\n\n function generateStoryElements() {\n const storyIdea = document.getElementById('story-idea').value;\n if (!storyIdea.trim()) {\n alert('Please enter a story idea first!');\n return;\n }\n\n elementsContainer.classList.remove('hidden');\n \n // Clear previous elements\n document.querySelectorAll('.grid-container').forEach(container => {\n container.innerHTML = '';\n });\n\n // Generate and display elements for each category\n generateWorldBuilding();\n generateCharacters();\n generatePlotElements();\n generateTechnology();\n }\n\n function createCard(title, description) {\n const card = document.createElement('div');\n card.className = 'story-card';\n card.innerHTML = `\n
${title}
\n${description}
\n `;\n return card;\n }\n\n function generateWorldBuilding() {\n const container = document.querySelector('#world-building .grid-container');\n const elements = [\n { title: 'Setting', description: 'Define the primary location and time period' },\n { title: 'Social Structure', description: 'Develop the societal organization and hierarchy' },\n { title: 'History', description: 'Create the background events that shaped this world' },\n { title: 'Environment', description: 'Describe the physical characteristics and challenges' }\n ];\n \n elements.forEach(element => {\n container.appendChild(createCard(element.title, element.description));\n });\n }\n\n function generateCharacters() {\n const container = document.querySelector('#characters .grid-container');\n const elements = [\n { title: 'Protagonist', description: 'Define your main character\\'s goals and motivations' },\n { title: 'Antagonist', description: 'Create the opposing force or character' },\n { title: 'Supporting Cast', description: 'Develop key secondary characters' },\n { title: 'Character Relationships', description: 'Map out character interactions and dynamics' }\n ];\n \n elements.forEach(element => {\n container.appendChild(createCard(element.title, element.description));\n });\n }\n\n function generatePlotElements() {\n const container = document.querySelector('#plot .grid-container');\n const elements = [\n { title: 'Main Conflict', description: 'Define the central problem or challenge' },\n { title: 'Plot Points', description: 'Outline major events and turning points' },\n { title: 'Subplots', description: 'Develop secondary storylines' },\n { title: 'Resolution', description: 'Plan how conflicts will be resolved' }\n ];\n \n elements.forEach(element => {\n container.appendChild(createCard(element.title, element.description));\n });\n }\n\n function generateTechnology() {\n const container = document.querySelector('#technology .grid-container');\n const elements = [\n { title: 'Core Technologies', description: 'Define key scientific advances' },\n { title: 'Scientific Principles', description: 'Establish rules for your sci-fi universe' },\n { title: 'Tech Impact', description: 'Explore how technology affects society' },\n { title: 'Limitations', description: 'Set boundaries for your technological elements' }\n ];\n \n elements.forEach(element => {\n container.appendChild(createCard(element.title, element.description));\n });\n }\n});\n\n---end---"+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 329,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2443
+ }
+ }
readme.scroll
Changed around line 1
+ # scifistory.scroll.pub
+ Website generated by Claude from prompt: Un sito che aiuta a costruire tutti gli elementi necessari per un romanzo di fantascienza (background, world Building, personaggi, trama). Inserendo un'idea il sito creerà una serie di tabelle con gli elementi da sviluppare
script.js
Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ const generateBtn = document.getElementById('generate-btn');
+ const elementsContainer = document.getElementById('elements-container');
+
+ generateBtn.addEventListener('click', generateStoryElements);
+
+ function generateStoryElements() {
+ const storyIdea = document.getElementById('story-idea').value;
+ if (!storyIdea.trim()) {
+ alert('Please enter a story idea first!');
+ return;
+ }
+
+ elementsContainer.classList.remove('hidden');
+
+ // Clear previous elements
+ document.querySelectorAll('.grid-container').forEach(container => {
+ container.innerHTML = '';
+ });
+
+ // Generate and display elements for each category
+ generateWorldBuilding();
+ generateCharacters();
+ generatePlotElements();
+ generateTechnology();
+ }
+
+ function createCard(title, description) {
+ const card = document.createElement('div');
+ card.className = 'story-card';
+ card.innerHTML = `
+
${title}
+
${description}
+ `;
+ return card;
+ }
+
+ function generateWorldBuilding() {
+ const container = document.querySelector('#world-building .grid-container');
+ const elements = [
+ { title: 'Setting', description: 'Define the primary location and time period' },
+ { title: 'Social Structure', description: 'Develop the societal organization and hierarchy' },
+ { title: 'History', description: 'Create the background events that shaped this world' },
+ { title: 'Environment', description: 'Describe the physical characteristics and challenges' }
+ ];
+
+ elements.forEach(element => {
+ container.appendChild(createCard(element.title, element.description));
+ });
+ }
+
+ function generateCharacters() {
+ const container = document.querySelector('#characters .grid-container');
+ const elements = [
+ { title: 'Protagonist', description: 'Define your main character\'s goals and motivations' },
+ { title: 'Antagonist', description: 'Create the opposing force or character' },
+ { title: 'Supporting Cast', description: 'Develop key secondary characters' },
+ { title: 'Character Relationships', description: 'Map out character interactions and dynamics' }
+ ];
+
+ elements.forEach(element => {
+ container.appendChild(createCard(element.title, element.description));
+ });
+ }
+
+ function generatePlotElements() {
+ const container = document.querySelector('#plot .grid-container');
+ const elements = [
+ { title: 'Main Conflict', description: 'Define the central problem or challenge' },
+ { title: 'Plot Points', description: 'Outline major events and turning points' },
+ { title: 'Subplots', description: 'Develop secondary storylines' },
+ { title: 'Resolution', description: 'Plan how conflicts will be resolved' }
+ ];
+
+ elements.forEach(element => {
+ container.appendChild(createCard(element.title, element.description));
+ });
+ }
+
+ function generateTechnology() {
+ const container = document.querySelector('#technology .grid-container');
+ const elements = [
+ { title: 'Core Technologies', description: 'Define key scientific advances' },
+ { title: 'Scientific Principles', description: 'Establish rules for your sci-fi universe' },
+ { title: 'Tech Impact', description: 'Explore how technology affects society' },
+ { title: 'Limitations', description: 'Set boundaries for your technological elements' }
+ ];
+
+ elements.forEach(element => {
+ container.appendChild(createCard(element.title, element.description));
+ });
+ }
+ });
style.css
Changed around line 1
+ :root {
+ --primary-color: #2c3e50;
+ --accent-color: #3498db;
+ --background-color: #1a1a2e;
+ --text-color: #ecf0f1;
+ --card-color: #2c3e50;
+ --gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ background: var(--gradient);
+ color: var(--text-color);
+ line-height: 1.6;
+ min-height: 100vh;
+ }
+
+ header {
+ padding: 2rem;
+ text-align: center;
+ background: rgba(0, 0, 0, 0.2);
+ backdrop-filter: blur(10px);
+ }
+
+ h1 {
+ font-size: 2.5rem;
+ margin-bottom: 0.5rem;
+ background: linear-gradient(45deg, var(--accent-color), #e74c3c);
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+ }
+
+ .tagline {
+ font-size: 1.2rem;
+ opacity: 0.8;
+ }
+
+ main {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 2rem;
+ }
+
+ .idea-input {
+ margin-bottom: 3rem;
+ text-align: center;
+ }
+
+ textarea {
+ width: 100%;
+ max-width: 800px;
+ height: 150px;
+ padding: 1rem;
+ margin: 1rem 0;
+ background: rgba(255, 255, 255, 0.1);
+ border: 2px solid var(--accent-color);
+ border-radius: 8px;
+ color: var(--text-color);
+ font-size: 1rem;
+ resize: vertical;
+ }
+
+ button {
+ background: var(--accent-color);
+ color: white;
+ border: none;
+ padding: 1rem 2rem;
+ font-size: 1.1rem;
+ border-radius: 25px;
+ cursor: pointer;
+ transition: transform 0.2s, box-shadow 0.2s;
+ }
+
+ button:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
+ }
+
+ .element-group {
+ margin-bottom: 2rem;
+ padding: 2rem;
+ background: rgba(0, 0, 0, 0.2);
+ border-radius: 15px;
+ backdrop-filter: blur(10px);
+ }
+
+ .grid-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 1.5rem;
+ margin-top: 1rem;
+ }
+
+ .story-card {
+ background: var(--card-color);
+ padding: 1.5rem;
+ border-radius: 10px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ transition: transform 0.3s;
+ }
+
+ .story-card:hover {
+ transform: translateY(-5px);
+ }
+
+ .hidden {
+ display: none;
+ }
+
+ footer {
+ text-align: center;
+ padding: 2rem;
+ margin-top: 3rem;
+ background: rgba(0, 0, 0, 0.2);
+ }
+
+ @media (max-width: 768px) {
+ h1 {
+ font-size: 2rem;
+ }
+
+ .tagline {
+ font-size: 1rem;
+ }
+
+ main {
+ padding: 1rem;
+ }
+
+ .element-group {
+ padding: 1rem;
+ }
+ }