{"/styles.css":{"code":".app {\n font-family: system-ui, sans-serif;\n max-width: 800px;\n margin: 0 auto;\n padding: 2rem;\n}\n\nh1 {\n color: #333;\n}"},"/App.js":{"code":"import React, { useState } from \"react\";\n\nexport default function App() {\n const [showComic, setShowComic] = useState(false);\n\n const comicPanels = [\n {\n title: \"Dark Forest Entrance\",\n emoji: \"🌙✨🌲\",\n bg: \"from-indigo-700 to-black\",\n text: \"Starlight and Luna enter the dark forest. A strange energy surrounds them.\",\n },\n {\n title: \"Mysterious Light\",\n emoji: \"🧿✨\",\n bg: \"from-cyan-500 to-blue-900\",\n text: \"A glowing blue light appears from deep in the forest shadows.\",\n },\n {\n title: \"moonlight Appears\",\n emoji: \"🧿👤\",\n bg: \"from-blue-400 to-indigo-800\",\n text: \"moonlight the lion, the Light Guardian, steps forward and offers help.\",\n },\n {\n title: \"The Shadow Beast\",\n emoji: \"🐺🌑⚡\",\n bg: \"from-gray-800 to-black\",\n text: \"A shadow tiger named dark suddenly attacks from the darkness!\",\n },\n {\n title: \"Luna Weakens\",\n emoji: \"🌙💔\",\n bg: \"from-purple-900 to-black\",\n text: \"The shadow tiger hit luna first then she couldn't fight.\",\n },\n {\n title: \"Starlight Fights Alone\",\n emoji: \"⭐⚔️🌑\",\n bg: \"from-orange-500 to-red-900\",\n text: \"Starlight battles the shadow beast alone while moonlight protects Luna.\",\n },\n {\n title: \"moonlight Shield\",\n emoji: \"🧿🛡️✨\",\n bg: \"from-cyan-400 to-blue-700\",\n text: \"moonlight creates a powerful light shield to protect the team.\",\n },\n {\n title: \"Dark Power Rising\",\n emoji: \"🔥🌑👁️\",\n bg: \"from-red-700 to-black\",\n text: \"The shadow energy grows stronger… something even worse is coming.\",\n },\n ];\n\n return (\n

\n\n

\n 🌙 Starlight & Luna: Part 4 ⭐\n

\n\n

\n The Arrival of moonlight\n

\n\n {!showComic && (\n

\n setShowComic(true)}\n className=\"bg-cyan-500 hover:bg-cyan-600 px-8 py-4 rounded-2xl text-2xl shadow-xl transition-all hover:scale-105\"\n >\n 📖 Read Part 4\n \n

\n )}\n\n {showComic && (\n

\n {comicPanels.map((panel, index) => (\n \n

\n {panel.emoji}\n

\n\n

\n {panel.title}\n

\n\n

\n {panel.text}\n

\n ))}\n

\n )}\n\n

\n ✨ A new ally joins the battle… but can they trust moonlight? \n read part 1 2 and 3 first✨\n

\n\n

\n \n );\n}"},"/index.js":{"code":"import React, { StrictMode } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\n\nimport App from \"./App\";\n\nconst root = createRoot(document.getElementById(\"root\"));\nroot.render(\n \n \n \n);"},"/public/index.html":{"code":"\n\n\n \n \n \n My App\n\n\n

\n\n"}}

Starlight and Luna part4 by I hate snakes