From 5628e8493ae9faf1f2c90c7c0f76735327f51c29 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 25 Oct 2024 18:35:54 +0530 Subject: [PATCH] Added the interactive storybook --- index.html | 12 +++ projects/interactive stroybook/index.html | 17 ++++ projects/interactive stroybook/script.js | 108 ++++++++++++++++++++++ projects/interactive stroybook/styles.css | 95 +++++++++++++++++++ 4 files changed, 232 insertions(+) create mode 100644 projects/interactive stroybook/index.html create mode 100644 projects/interactive stroybook/script.js create mode 100644 projects/interactive stroybook/styles.css diff --git a/index.html b/index.html index bcc87c08..3026984c 100644 --- a/index.html +++ b/index.html @@ -980,6 +980,18 @@

Image Generator

+ +
+ Storybook +
+
+

Interactive storybook

+

+ generates interactive stories with branching paths +

+
+ +
Recipe finder logo diff --git a/projects/interactive stroybook/index.html b/projects/interactive stroybook/index.html new file mode 100644 index 00000000..a8c9cf54 --- /dev/null +++ b/projects/interactive stroybook/index.html @@ -0,0 +1,17 @@ + + + + + + Interactive Storybook + + + +
+

🧚‍♀️ Interactive Storybook

+
+
+
+ + + diff --git a/projects/interactive stroybook/script.js b/projects/interactive stroybook/script.js new file mode 100644 index 00000000..bb9d165d --- /dev/null +++ b/projects/interactive stroybook/script.js @@ -0,0 +1,108 @@ +// Story data structure +const story = { + start: { + text: "You wake up in a mysterious forest. What do you want to do?", + choices: [ + { + text: "Explore the forest", + next: "exploreForest" + }, + { + text: "Look for a way out", + next: "findWayOut" + } + ] + }, + exploreForest: { + text: "You venture deeper into the forest and find a river. Do you want to:", + choices: [ + { + text: "Swim across the river", + next: "swimRiver" + }, + { + text: "Follow the river", + next: "followRiver" + } + ] + }, + findWayOut: { + text: "You decide to look for a way out and stumble upon an old cabin. Do you want to:", + choices: [ + { + text: "Enter the cabin", + next: "enterCabin" + }, + { + text: "Keep walking", + next: "keepWalking" + } + ] + }, + swimRiver: { + text: "You swim across the river but get caught in a current. You manage to survive, but you're lost.", + choices: [ + { + text: "Search for help", + next: "searchForHelp" + }, + { + text: "Build a shelter", + next: "buildShelter" + } + ] + }, + followRiver: { + text: "Following the river leads you to a small village. The villagers welcome you.", + choices: [] + }, + enterCabin: { + text: "Inside the cabin, you find a treasure chest filled with gold! You are rich!", + choices: [] + }, + keepWalking: { + text: "You walk for hours and find your way back to the forest's edge. You made it out safely!", + choices: [] + }, + searchForHelp: { + text: "You shout for help, and a stranger comes to your aid. They guide you out of the forest.", + choices: [] + }, + buildShelter: { + text: "You build a shelter and decide to wait for help. It rains, but you stay safe inside.", + choices: [] + } + }; + + // Function to display the story and choices + function displayStory(node) { + const storyDiv = document.getElementById("story"); + const choicesDiv = document.getElementById("choices"); + + // Clear previous story and choices + storyDiv.innerHTML = ""; + choicesDiv.innerHTML = ""; + + // Display story text + storyDiv.innerHTML = `

${story[node].text}

`; + + // Display choices + story[node].choices.forEach(choice => { + const button = document.createElement("button"); + button.className = "choice-button"; + button.textContent = choice.text; + button.onclick = () => displayStory(choice.next); + choicesDiv.appendChild(button); + }); + + // If there are no choices, display a message + if (story[node].choices.length === 0) { + const message = document.createElement("p"); + message.textContent = "The end. Thanks for reading!"; + choicesDiv.appendChild(message); + } + } + + // Start the story + displayStory("start"); + \ No newline at end of file diff --git a/projects/interactive stroybook/styles.css b/projects/interactive stroybook/styles.css new file mode 100644 index 00000000..29c5097f --- /dev/null +++ b/projects/interactive stroybook/styles.css @@ -0,0 +1,95 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; + } + + body { + font-family: 'Georgia', serif; + background-image: url('https://images.unsplash.com/photo-1533656008771-4ae2fbb4b737'); /* Background image */ + background-size: cover; + background-position: center; + color: #333; + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); + } + + .story-container { + background: rgba(255, 255, 255, 0.9); /* Slight transparency */ + border-radius: 15px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); + padding: 20px; + max-width: 600px; + width: 90%; + text-align: center; + animation: fadeIn 1s ease; + } + + @keyframes fadeIn { + from { opacity: 0; transform: translateY(-10px); } + to { opacity: 1; transform: translateY(0); } + } + + h1 { + margin-bottom: 20px; + font-size: 2.5rem; + color: #ff6347; /* Tomato color */ + } + + .story-text { + font-size: 1.2rem; + margin-bottom: 20px; + } + + .choices-container { + margin-top: 20px; + } + + .choice-button { + display: block; + background-color: #4CAF50; + color: white; + padding: 10px; + margin: 10px auto; + border: none; + border-radius: 8px; + cursor: pointer; + font-size: 1.2rem; + transition: background-color 0.3s, transform 0.2s; + width: 80%; + } + + .choice-button:hover { + background-color: #45a049; + transform: scale(1.05); + } + + .choice-button:active { + transform: scale(0.95); + } + + .hidden { + display: none; + } + + @media (max-width: 600px) { + .story-container { + padding: 15px; + } + + h1 { + font-size: 2rem; + } + + .choice-button { + font-size: 1rem; + } + + .story-text { + font-size: 1rem; + } + } + \ No newline at end of file