commit 7059e6e22742fb56747c61f79fe7f61ec9e2fd0c
Author: root <root@hub.scroll.pub>
Date: 2025-01-10 04:49:55 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..02a57f1
--- /dev/null
+++ b/body.html
@@ -0,0 +1,78 @@
+<header>
+ <nav class="main-nav">
+ <div class="logo">Pride Lands Stories</div>
+ <button class="mobile-menu" aria-label="Toggle menu">
+ <span></span><span></span><span></span>
+ </button>
+ <ul class="nav-links">
+ <li><a href="#latest">Latest Stories</a></li>
+ <li><a href="#popular">Popular</a></li>
+ <li><a href="#submit">Submit Story</a></li>
+ </ul>
+ </nav>
+</header>
+
+<main>
+ <section class="hero">
+ <div class="hero-content">
+ <h1>Lion King Fanfiction</h1>
+ <p>Journey through the Pride Lands with original stories from fans worldwide</p>
+ </div>
+ </section>
+
+ <section id="latest" class="stories-grid">
+ <h2>Latest Stories</h2>
+ <div class="story-cards">
+ <article class="story-card">
+ <div class="story-image"></div>
+ <div class="story-content">
+ <h3>Kiara's Journey</h3>
+ <p>A tale of discovery beyond the Pride Lands...</p>
+ <div class="story-meta">
+ <span>By: PrideLander22</span>
+ <span>Rating: ★★★★☆</span>
+ </div>
+ </div>
+ </article>
+ <article class="story-card">
+ <div class="story-image"></div>
+ <div class="story-content">
+ <h3>Shadows of the Past</h3>
+ <p>Simba confronts memories of his father...</p>
+ <div class="story-meta">
+ <span>By: HakunaWriter</span>
+ <span>Rating: ★★★★★</span>
+ </div>
+ </div>
+ </article>
+ <article class="story-card">
+ <div class="story-image"></div>
+ <div class="story-content">
+ <h3>Rafiki's Secret</h3>
+ <p>The wise mandrill holds an ancient mystery...</p>
+ <div class="story-meta">
+ <span>By: SafariTales</span>
+ <span>Rating: ★★★★☆</span>
+ </div>
+ </div>
+ </article>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <div class="footer-content">
+ <div class="footer-section">
+ <h4>Pride Lands Stories</h4>
+ <p>A community of Lion King fans sharing their creative stories</p>
+ </div>
+ <div class="footer-section">
+ <h4>Quick Links</h4>
+ <ul>
+ <li><a href="#guidelines">Submission Guidelines</a></li>
+ <li><a href="#about">About Us</a></li>
+ <li><a href="#contact">Contact</a></li>
+ </ul>
+ </div>
+ </div>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..23cef7d
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://lionking-tales.scroll.pub
+metaTags
+editButton /edit.html
+title Pride Lands Stories - Lion King Fanfiction
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..f3d639e
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01FfMj8tE9eJSRY6ipdZZ1WF",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a fanfiction website dedicated to The Lion King stories.\n\n---domain---\nlionking-tales.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://lionking-tales.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Pride Lands Stories - Lion King Fanfiction\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav class=\"main-nav\">\n <div class=\"logo\">Pride Lands Stories</div>\n <button class=\"mobile-menu\" aria-label=\"Toggle menu\">\n <span></span><span></span><span></span>\n </button>\n <ul class=\"nav-links\">\n <li><a href=\"#latest\">Latest Stories</a></li>\n <li><a href=\"#popular\">Popular</a></li>\n <li><a href=\"#submit\">Submit Story</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <div class=\"hero-content\">\n <h1>Lion King Fanfiction</h1>\n <p>Journey through the Pride Lands with original stories from fans worldwide</p>\n </div>\n </section>\n\n <section id=\"latest\" class=\"stories-grid\">\n <h2>Latest Stories</h2>\n <div class=\"story-cards\">\n <article class=\"story-card\">\n <div class=\"story-image\"></div>\n <div class=\"story-content\">\n <h3>Kiara's Journey</h3>\n <p>A tale of discovery beyond the Pride Lands...</p>\n <div class=\"story-meta\">\n <span>By: PrideLander22</span>\n <span>Rating: ★★★★☆</span>\n </div>\n </div>\n </article>\n <article class=\"story-card\">\n <div class=\"story-image\"></div>\n <div class=\"story-content\">\n <h3>Shadows of the Past</h3>\n <p>Simba confronts memories of his father...</p>\n <div class=\"story-meta\">\n <span>By: HakunaWriter</span>\n <span>Rating: ★★★★★</span>\n </div>\n </div>\n </article>\n <article class=\"story-card\">\n <div class=\"story-image\"></div>\n <div class=\"story-content\">\n <h3>Rafiki's Secret</h3>\n <p>The wise mandrill holds an ancient mystery...</p>\n <div class=\"story-meta\">\n <span>By: SafariTales</span>\n <span>Rating: ★★★★☆</span>\n </div>\n </div>\n </article>\n </div>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <div class=\"footer-section\">\n <h4>Pride Lands Stories</h4>\n <p>A community of Lion King fans sharing their creative stories</p>\n </div>\n <div class=\"footer-section\">\n <h4>Quick Links</h4>\n <ul>\n <li><a href=\"#guidelines\">Submission Guidelines</a></li>\n <li><a href=\"#about\">About Us</a></li>\n <li><a href=\"#contact\">Contact</a></li>\n </ul>\n </div>\n </div>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #f4a460;\n --secondary-color: #8b4513;\n --accent-color: #ffd700;\n --text-color: #2c1810;\n --background-light: #fff8dc;\n --transition: all 0.3s ease;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background: var(--background-light);\n}\n\n.main-nav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 5%;\n background: linear-gradient(to right, var(--primary-color), var(--secondary-color));\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n color: white;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.2);\n}\n\n.nav-links {\n display: flex;\n list-style: none;\n gap: 2rem;\n}\n\n.nav-links a {\n color: white;\n text-decoration: none;\n font-weight: 500;\n transition: var(--transition);\n}\n\n.nav-links a:hover {\n color: var(--accent-color);\n}\n\n.mobile-menu {\n display: none;\n}\n\n.hero {\n height: 60vh;\n background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),\n url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1 1\"><rect width=\"1\" height=\"1\" fill=\"%23f4a460\"/></svg>');\n background-size: cover;\n background-position: center;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n color: white;\n}\n\n.hero-content h1 {\n font-size: 3.5rem;\n margin-bottom: 1rem;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.5);\n}\n\n.stories-grid {\n padding: 4rem 5%;\n}\n\n.stories-grid h2 {\n text-align: center;\n margin-bottom: 2rem;\n color: var(--secondary-color);\n}\n\n.story-cards {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n}\n\n.story-card {\n background: white;\n border-radius: 10px;\n overflow: hidden;\n box-shadow: 0 4px 15px rgba(0,0,0,0.1);\n transition: var(--transition);\n}\n\n.story-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 6px 20px rgba(0,0,0,0.15);\n}\n\n.story-image {\n height: 200px;\n background: var(--primary-color);\n position: relative;\n overflow: hidden;\n}\n\n.story-content {\n padding: 1.5rem;\n}\n\n.story-meta {\n display: flex;\n justify-content: space-between;\n margin-top: 1rem;\n font-size: 0.9rem;\n color: #666;\n}\n\nfooter {\n background: var(--secondary-color);\n color: white;\n padding: 3rem 5%;\n}\n\n.footer-content {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n}\n\n.footer-section h4 {\n margin-bottom: 1rem;\n color: var(--accent-color);\n}\n\n.footer-section ul {\n list-style: none;\n}\n\n.footer-section a {\n color: white;\n text-decoration: none;\n transition: var(--transition);\n}\n\n.footer-section a:hover {\n color: var(--accent-color);\n}\n\n@media (max-width: 768px) {\n .mobile-menu {\n display: block;\n background: none;\n border: none;\n cursor: pointer;\n }\n\n .mobile-menu span {\n display: block;\n width: 25px;\n height: 3px;\n background: white;\n margin: 5px 0;\n transition: var(--transition);\n }\n\n .nav-links {\n display: none;\n }\n\n .nav-links.active {\n display: flex;\n flex-direction: column;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n background: var(--primary-color);\n padding: 1rem;\n text-align: center;\n }\n\n .hero-content h1 {\n font-size: 2.5rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Mobile menu toggle\n const mobileMenu = document.querySelector('.mobile-menu');\n const navLinks = document.querySelector('.nav-links');\n\n mobileMenu.addEventListener('click', () => {\n navLinks.classList.toggle('active');\n \n // Animate hamburger to X\n const spans = mobileMenu.querySelectorAll('span');\n spans.forEach(span => span.classList.toggle('active'));\n });\n\n // Smooth scroll for navigation links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n document.querySelector(this.getAttribute('href')).scrollIntoView({\n behavior: 'smooth'\n });\n });\n });\n\n // Add animation to story cards on scroll\n const storyCards = document.querySelectorAll('.story-card');\n \n const observerOptions = {\n threshold: 0.2,\n rootMargin: '0px'\n };\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.opacity = '1';\n entry.target.style.transform = 'translateY(0)';\n }\n });\n }, observerOptions);\n\n storyCards.forEach(card => {\n card.style.opacity = '0';\n card.style.transform = 'translateY(20px)';\n card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';\n observer.observe(card);\n });\n});\n\n---end---\n\nThis website features:\n1. Responsive design that works on all devices\n2. Beautiful gradient headers and smooth animations\n3. Card-based story layout with hover effects\n4. Intersection Observer for scroll animations\n5. Mobile-friendly navigation with hamburger menu\n6. Semantic HTML structure\n7. Accessible navigation and ARIA labels\n8. CSS variables for easy theming\n9. Smooth scrolling navigation\n10. Grid-based layout system\n11. Clean, modern aesthetic inspired by The Lion King's color palette\n12. Progressive enhancement principles\n\nThe design uses earthy tones (sandy browns, golden yellows) to evoke the African savanna setting of The Lion King, while maintaining readability and professional appearance."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 276,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2856
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..2ca24d7
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,3 @@
+# lionking-tales.scroll.pub
+
+website generated by Claude from prompt: fanfic about lion king
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..8a5ce84
--- /dev/null
+++ b/script.js
@@ -0,0 +1,47 @@
+document.addEventListener('DOMContentLoaded', () => {
+ // Mobile menu toggle
+ const mobileMenu = document.querySelector('.mobile-menu');
+ const navLinks = document.querySelector('.nav-links');
+
+ mobileMenu.addEventListener('click', () => {
+ navLinks.classList.toggle('active');
+
+ // Animate hamburger to X
+ const spans = mobileMenu.querySelectorAll('span');
+ spans.forEach(span => span.classList.toggle('active'));
+ });
+
+ // Smooth scroll for navigation links
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
+ behavior: 'smooth'
+ });
+ });
+ });
+
+ // Add animation to story cards on scroll
+ const storyCards = document.querySelectorAll('.story-card');
+
+ const observerOptions = {
+ threshold: 0.2,
+ rootMargin: '0px'
+ };
+
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.style.opacity = '1';
+ entry.target.style.transform = 'translateY(0)';
+ }
+ });
+ }, observerOptions);
+
+ storyCards.forEach(card => {
+ card.style.opacity = '0';
+ card.style.transform = 'translateY(20px)';
+ card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
+ observer.observe(card);
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..b8f0e22
--- /dev/null
+++ b/style.css
@@ -0,0 +1,194 @@
+:root {
+ --primary-color: #f4a460;
+ --secondary-color: #8b4513;
+ --accent-color: #ffd700;
+ --text-color: #2c1810;
+ --background-light: #fff8dc;
+ --transition: all 0.3s ease;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+ background: var(--background-light);
+}
+
+.main-nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 5%;
+ background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ color: white;
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
+}
+
+.nav-links {
+ display: flex;
+ list-style: none;
+ gap: 2rem;
+}
+
+.nav-links a {
+ color: white;
+ text-decoration: none;
+ font-weight: 500;
+ transition: var(--transition);
+}
+
+.nav-links a:hover {
+ color: var(--accent-color);
+}
+
+.mobile-menu {
+ display: none;
+}
+
+.hero {
+ height: 60vh;
+ background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
+ url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><rect width="1" height="1" fill="%23f4a460"/></svg>');
+ background-size: cover;
+ background-position: center;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ color: white;
+}
+
+.hero-content h1 {
+ font-size: 3.5rem;
+ margin-bottom: 1rem;
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+}
+
+.stories-grid {
+ padding: 4rem 5%;
+}
+
+.stories-grid h2 {
+ text-align: center;
+ margin-bottom: 2rem;
+ color: var(--secondary-color);
+}
+
+.story-cards {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+}
+
+.story-card {
+ background: white;
+ border-radius: 10px;
+ overflow: hidden;
+ box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+ transition: var(--transition);
+}
+
+.story-card:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 6px 20px rgba(0,0,0,0.15);
+}
+
+.story-image {
+ height: 200px;
+ background: var(--primary-color);
+ position: relative;
+ overflow: hidden;
+}
+
+.story-content {
+ padding: 1.5rem;
+}
+
+.story-meta {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 1rem;
+ font-size: 0.9rem;
+ color: #666;
+}
+
+footer {
+ background: var(--secondary-color);
+ color: white;
+ padding: 3rem 5%;
+}
+
+.footer-content {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+}
+
+.footer-section h4 {
+ margin-bottom: 1rem;
+ color: var(--accent-color);
+}
+
+.footer-section ul {
+ list-style: none;
+}
+
+.footer-section a {
+ color: white;
+ text-decoration: none;
+ transition: var(--transition);
+}
+
+.footer-section a:hover {
+ color: var(--accent-color);
+}
+
+@media (max-width: 768px) {
+ .mobile-menu {
+ display: block;
+ background: none;
+ border: none;
+ cursor: pointer;
+ }
+
+ .mobile-menu span {
+ display: block;
+ width: 25px;
+ height: 3px;
+ background: white;
+ margin: 5px 0;
+ transition: var(--transition);
+ }
+
+ .nav-links {
+ display: none;
+ }
+
+ .nav-links.active {
+ display: flex;
+ flex-direction: column;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ background: var(--primary-color);
+ padding: 1rem;
+ text-align: center;
+ }
+
+ .hero-content h1 {
+ font-size: 2.5rem;
+ }
+}