Changes to lionking-tales.scroll.pub

root
root
12 days ago
Initial commit
body.html
Changed around line 1
+
+
+
+
+
+
+
    +
  • Latest Stories
    • +
  • Popular
    • +
  • Submit Story
    • +
    +
    +
    +
    +
    +
    +
    +

    Lion King Fanfiction

    +

    Journey through the Pride Lands with original stories from fans worldwide

    +
    +
    +
    +
    +

    Latest Stories

    +
    +
    +
    +
    +

    Kiara's Journey

    +

    A tale of discovery beyond the Pride Lands...

    +
    + By: PrideLander22
    + Rating: ★★★★☆
    +
    +
    +
    +
    +
    +
    +

    Shadows of the Past

    +

    Simba confronts memories of his father...

    +
    + By: HakunaWriter
    + Rating: ★★★★★
    +
    +
    +
    +
    +
    +
    +

    Rafiki's Secret

    +

    The wise mandrill holds an ancient mystery...

    +
    + By: SafariTales
    + Rating: ★★★★☆
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    Pride Lands Stories

    +

    A community of Lion King fans sharing their creative stories

    +
    +
    +

    Quick Links

    +
      +
    • Submission Guidelines
      • +
    • About Us
      • +
    • Contact
      • +
      +
      +
      +
      index.scroll
      Changed around line 1
      + buildHtml
      + baseUrl https://lionking-tales.scroll.pub
      + metaTags
      + editButton /edit.html
      + title Pride Lands Stories - Lion King Fanfiction
      + style.css
      + body.html
      + script.js
      prompt.json
      Changed around line 1
      + {
      + "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
      \n \n
      \n\n
      \n
      \n
      \n

      Lion King Fanfiction

      \n

      Journey through the Pride Lands with original stories from fans worldwide

      \n
      \n
      \n\n
      \n

      Latest Stories

      \n
      \n
      \n
      \n
      \n

      Kiara's Journey

      \n

      A tale of discovery beyond the Pride Lands...

      \n
      \n By: PrideLander22\n Rating: ★★★★☆\n
      \n
      \n
      \n
      \n
      \n
      \n

      Shadows of the Past

      \n

      Simba confronts memories of his father...

      \n
      \n By: HakunaWriter\n Rating: ★★★★★\n
      \n
      \n
      \n
      \n
      \n
      \n

      Rafiki's Secret

      \n

      The wise mandrill holds an ancient mystery...

      \n
      \n By: SafariTales\n Rating: ★★★★☆\n
      \n
      \n
      \n
      \n
      \n
      \n\n\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,');\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
      + }
      + }
      readme.scroll
      Changed around line 1
      + # lionking-tales.scroll.pub
      +
      + website generated by Claude from prompt: fanfic about lion king
      script.js
      Changed around line 1
      + 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);
      + });
      + });
      style.css
      Changed around line 1
      + :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,');
      + 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;
      + }
      + }