Upload 2 files

static/style.css

@@ -0,0 +1,691 @@
+:root {
+    --wattpad-orange: #FF8F00;
+    --wattpad-orange-light: #FFB74D;
+    --wattpad-orange-dark: #F57C00;
+    --wattpad-white: #FFFFFF;
+    --text-color: #333333;
+    --text-secondary: #666666;
+    --background-light: #f8f9fa;
+    --shadow-color: rgba(0, 0, 0, 0.1);
+    --border-color: #e0e0e0;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Source Sans Pro', sans-serif;
+    line-height: 1.6;
+    color: var(--text-color);
+    background-color: var(--background-light);
+}
+
+/* Navbar Styles */
+.navbar {
+    background-color: var(--wattpad-white);
+    box-shadow: 0 2px 4px var(--shadow-color);
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+}
+
+.nav-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0.8rem 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.logo i {
+    color: var(--wattpad-orange);
+    font-size: 1.8rem;
+}
+
+.logo h1 {
+    color: var(--wattpad-orange);
+    font-size: 1.8rem;
+    font-weight: 700;
+}
+
+.logo span {
+    color: var(--text-color);
+}
+
+.nav-links {
+    display: flex;
+    gap: 1.5rem;
+}
+
+.nav-links a {
+    color: var(--text-secondary);
+    text-decoration: none;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    transition: color 0.3s ease;
+}
+
+.nav-links a:hover,
+.nav-links a.active {
+    color: var(--wattpad-orange);
+}
+
+.nav-links i {
+    font-size: 1.1rem;
+}
+
+/* Container Styles */
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem 20px;
+}
+
+/* Story Generator Styles */
+.story-generator {
+    background-color: var(--wattpad-white);
+    border-radius: 15px;
+    padding: 2rem;
+    box-shadow: 0 4px 6px var(--shadow-color);
+}
+
+.input-section {
+    text-align: center;
+    margin-bottom: 2rem;
+}
+
+.input-container {
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 0 1rem;
+}
+
+.input-group {
+    display: flex;
+    gap: 0.5rem;
+    margin-bottom: 0.75rem;
+}
+
+.input-wrapper {
+    flex: 1;
+    position: relative;
+}
+
+.input-icon {
+    position: absolute;
+    left: 1rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--text-secondary);
+}
+
+#topic {
+    width: 100%;
+    padding: 0.8rem 1rem 0.8rem 2.5rem;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    font-size: 0.95rem;
+    color: var(--text-color);
+    background-color: var(--wattpad-white);
+}
+
+#topic:focus {
+    outline: none;
+    border-color: var(--wattpad-orange);
+}
+
+#generate-btn {
+    background-color: var(--wattpad-orange);
+    color: white;
+    border: none;
+    padding: 0 1.5rem;
+    border-radius: 8px;
+    font-weight: 600;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    transition: background-color 0.3s ease;
+}
+
+#generate-btn:hover {
+    background-color: var(--wattpad-orange-dark);
+}
+
+/* Mode Selector Styles */
+.mode-selector {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding-left: 2.5rem;
+}
+
+.mode-buttons {
+    display: inline-flex;
+    gap: 0.5rem;
+}
+
+.mode-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.4rem 0.8rem;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    background: var(--wattpad-white);
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.mode-btn i {
+    font-size: 0.9rem;
+    opacity: 0.7;
+}
+
+.mode-btn:hover {
+    border-color: var(--wattpad-orange-light);
+    color: var(--wattpad-orange);
+}
+
+.mode-btn.active {
+    background: var(--wattpad-orange);
+    border-color: var(--wattpad-orange);
+    color: white;
+}
+
+.mode-btn.active i {
+    opacity: 1;
+}
+
+.mode-note {
+    display: none;
+}
+
+/* Loading Spinner Styles */
+.loading-spinner {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 3rem;
+}
+
+.spinner {
+    width: 50px;
+    height: 50px;
+    border: 3px solid var(--background-light);
+    border-top: 3px solid var(--wattpad-orange);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-bottom: 1rem;
+}
+
+.loading-spinner p {
+    color: var(--text-secondary);
+    font-size: 1.1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+/* Story Container Styles */
+.story-container {
+    max-width: 800px;
+    margin: 2rem auto;
+    background-color: var(--wattpad-white);
+    border-radius: 15px;
+    padding: 2rem;
+    box-shadow: 0 4px 6px var(--shadow-color);
+}
+
+.story-header {
+    margin-bottom: 2rem;
+}
+
+.story-meta {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.story-icon {
+    font-size: 2rem;
+    color: var(--wattpad-orange);
+}
+
+.story-title {
+    color: var(--text-color);
+    font-size: 2rem;
+    font-weight: 700;
+}
+
+.story-stats {
+    display: flex;
+    gap: 1.5rem;
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+}
+
+.story-stats span {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.chapter-header {
+    margin-bottom: 1.5rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.chapter-header h4 {
+    font-size: 1.5rem;
+    color: var(--text-color);
+    font-weight: 600;
+}
+
+.story-content {
+    font-size: 1.1rem;
+    line-height: 1.8;
+    color: var(--text-color);
+}
+
+.content-warning {
+    background-color: #fff3cd;
+    color: #856404;
+    padding: 1rem;
+    border-radius: 10px;
+    margin-bottom: 1.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.author-note {
+    background-color: var(--background-light);
+    padding: 1.5rem;
+    border-radius: 10px;
+    margin-top: 2rem;
+    font-style: italic;
+    color: var(--text-secondary);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.story-actions {
+    display: flex;
+    gap: 1rem;
+    margin-top: 2rem;
+    padding-top: 1.5rem;
+    border-top: 1px solid var(--border-color);
+}
+
+.action-btn {
+    background-color: transparent;
+    color: var(--text-secondary);
+    border: 1px solid var(--border-color);
+    padding: 0.8rem 1.5rem;
+    flex: 1;
+}
+
+.action-btn:hover {
+    background-color: var(--background-light);
+    color: var(--wattpad-orange);
+    border-color: var(--wattpad-orange);
+    transform: translateY(0);
+    box-shadow: none;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* Mobile Responsiveness */
+@media (max-width: 768px) {
+    .nav-container {
+        padding: 0.8rem 15px;
+    }
+
+    .logo h1 {
+        font-size: 1.5rem;
+    }
+
+    .nav-links {
+        gap: 1rem;
+    }
+
+    .nav-links span {
+        display: none;
+    }
+
+    .container {
+        padding: 1rem 15px;
+    }
+
+    .input-group {
+        flex-direction: column;
+    }
+
+    .input-section h2 {
+        font-size: 1.5rem;
+    }
+
+    .story-container {
+        padding: 1.5rem;
+    }
+
+    .story-title {
+        font-size: 1.5rem;
+    }
+
+    .story-stats {
+        flex-wrap: wrap;
+        gap: 1rem;
+    }
+
+    .story-content {
+        font-size: 1rem;
+    }
+
+    .story-actions {
+        flex-direction: column;
+    }
+
+    .action-btn {
+        width: 100%;
+    }
+}
+
+/* Chapter Navigation */
+.chapter-navigation {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 2rem;
+    padding: 1rem;
+    background-color: var(--background-light);
+    border-radius: 10px;
+}
+
+.nav-btn {
+    background-color: var(--wattpad-white);
+    color: var(--text-color);
+    border: 1px solid var(--border-color);
+    padding: 0.8rem 1.5rem;
+    border-radius: 25px;
+    cursor: pointer;
+    font-size: 0.9rem;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    transition: all 0.3s ease;
+    position: relative;
+}
+
+.nav-btn:hover:not(:disabled) {
+    background-color: var(--wattpad-orange);
+    color: var(--wattpad-white);
+    border-color: var(--wattpad-orange);
+}
+
+.nav-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.chapter-indicator {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: var(--text-color);
+}
+
+/* Chapter Content */
+.chapters-list {
+    margin: 2rem 0;
+}
+
+.chapter-content {
+    display: none;
+}
+
+.chapter-content.active {
+    display: block;
+    animation: fadeIn 0.5s ease;
+}
+
+.chapter-title {
+    font-size: 1.8rem;
+    color: var(--text-color);
+    margin-bottom: 1.5rem;
+    font-weight: 700;
+}
+
+.chapter-summary {
+    background-color: var(--background-light);
+    padding: 1.5rem;
+    border-radius: 10px;
+    margin-bottom: 2rem;
+    font-style: italic;
+    color: var(--text-secondary);
+}
+
+.narrative-hook {
+    background-color: #e3f2fd;
+    padding: 1.5rem;
+    border-radius: 10px;
+    margin: 2rem 0;
+    color: #1976d2;
+    font-weight: 500;
+}
+
+.chapter-section {
+    font-size: 1.1rem;
+    line-height: 1.8;
+    margin-bottom: 2rem;
+}
+
+/* Animations */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Mobile Responsiveness Updates */
+@media (max-width: 768px) {
+    .chapter-navigation {
+        flex-direction: column;
+        gap: 1rem;
+        padding: 1rem;
+    }
+
+    .chapter-indicator {
+        order: -1;
+        margin-bottom: 0.5rem;
+    }
+
+    .nav-btn {
+        width: 100%;
+        justify-content: center;
+    }
+
+    .chapter-title {
+        font-size: 1.5rem;
+    }
+
+    .chapter-summary,
+    .narrative-hook {
+        padding: 1rem;
+    }
+}
+
+/* Mobile Responsive Adjustments */
+@media (max-width: 480px) {
+    .input-container {
+        padding: 0 0.5rem;
+    }
+    
+    .input-group {
+        flex-direction: column;
+    }
+    
+    #generate-btn {
+        padding: 0.8rem;
+        justify-content: center;
+    }
+    
+    .mode-selector {
+        padding-left: 0;
+        align-items: center;
+    }
+    
+    .mode-buttons {
+        width: 100%;
+        justify-content: center;
+    }
+    
+    .mode-btn {
+        flex: 1;
+        justify-content: center;
+        padding: 0.35rem 0.6rem;
+        font-size: 0.85rem;
+    }
+}
+
+/* Contemplation Section Styles */
+.contemplation-section {
+    background: var(--wattpad-white);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    margin: 1rem 0;
+    overflow: hidden;
+}
+
+.contemplation-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem 1rem;
+    background: var(--background-light);
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+.contemplation-header:hover {
+    background: var(--background-lighter);
+}
+
+.thinking-indicator {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+    font-weight: 500;
+}
+
+.thinking-indicator i {
+    color: var(--wattpad-orange);
+    font-size: 0.85rem;
+}
+
+.toggle-contemplation {
+    background: none;
+    border: none;
+    padding: 0;
+    color: var(--text-secondary);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border-radius: 4px;
+    transition: all 0.2s ease;
+}
+
+.toggle-contemplation:hover {
+    background: rgba(0, 0, 0, 0.05);
+    color: var(--text-color);
+}
+
+.toggle-contemplation i {
+    transition: transform 0.2s ease;
+}
+
+.contemplation-section.collapsed .toggle-contemplation i {
+    transform: rotate(180deg);
+}
+
+.contemplation-content {
+    padding: 1rem;
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+    line-height: 1.6;
+    max-height: 300px;
+    overflow-y: auto;
+    transition: max-height 0.3s ease-out;
+}
+
+.contemplation-section.collapsed .contemplation-content {
+    max-height: 0;
+    padding: 0 1rem;
+    overflow: hidden;
+}
+
+.contemplation-content p {
+    margin-bottom: 0.75rem;
+}
+
+.contemplation-content p:last-child {
+    margin-bottom: 0;
+}
+
+@media (max-width: 480px) {
+    .contemplation-section {
+        margin: 0.75rem 0;
+        border-radius: 6px;
+    }
+    
+    .contemplation-header {
+        padding: 0.6rem 0.75rem;
+    }
+    
+    .thinking-indicator {
+        font-size: 0.85rem;
+    }
+}
+
+/* Remove old styles */
+.mode-label,
+.mode-note,
+.mode-toggle,
+.toggle-label,
+.mode-text,
+.mode-select {
+    display: none;
+}

templates/index.html

@@ -0,0 +1,294 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Wattpad Story Generator</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+</head>
+<body>
+    <nav class="navbar">
+        <div class="nav-container">
+            <div class="logo">
+                <i class="fas fa-book-open"></i>
+                <h1>Story<span>AI</span></h1>
+            </div>
+            <div class="nav-links">
+                <a href="#" class="active"><i class="fas fa-magic"></i> Generate</a>
+                <a href="#"><i class="fas fa-book"></i> Library</a>
+            </div>
+        </div>
+    </nav>
+
+    <div class="container">
+        <main>
+            <div class="story-generator">
+                <div class="input-section">
+                    <h2><i class="fas fa-feather-alt"></i> Create Your Story</h2>
+                    <p class="subtitle">Transform your ideas into captivating stories</p>
+                    
+                    <div class="input-container">
+                        <div class="input-group">
+                            <div class="input-wrapper">
+                                <i class="fas fa-pencil-alt input-icon"></i>
+                                <input type="text" id="topic" placeholder="Enter your story topic..." required>
+                            </div>
+                            <button id="generate-btn">
+                                <i class="fas fa-wand-magic-sparkles"></i>
+                                Generate Story
+                            </button>
+                        </div>
+                        <div class="mode-selector">
+                            <div class="mode-buttons">
+                                <button class="mode-btn active" data-mode="simple">
+                                    <i class="fas fa-bolt"></i>
+                                    Simple
+                                </button>
+                                <button class="mode-btn" data-mode="advanced">
+                                    <i class="fas fa-brain"></i>
+                                    Advanced
+                                </button>
+                            </div>
+                            <div class="mode-note">Advanced mode takes longer to generate</div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="loading-spinner" style="display: none;">
+                    <div class="spinner"></div>
+                    <p><i class="fas fa-pen-fancy"></i> Crafting your story with creativity...</p>
+                </div>
+
+                <div class="story-container" style="display: none;">
+                    <div class="contemplation-wrapper">
+                        <div class="contemplation-section">
+                            <div class="contemplation-header">
+                                <div class="thinking-indicator">
+                                    <i class="fas fa-circle-notch fa-spin"></i>
+                                    Thinking...
+                                </div>
+                                <button class="toggle-contemplation" aria-label="Toggle thinking process">
+                                    <i class="fas fa-chevron-up"></i>
+                                </button>
+                            </div>
+                            <div class="contemplation-content"></div>
+                        </div>
+                    </div>
+
+                    <div class="chapter-navigation">
+                        <button class="nav-btn" id="prev-chapter" disabled>
+                            <i class="fas fa-chevron-left"></i> Previous Chapter
+                        </button>
+                        <span class="chapter-indicator">Chapter <span id="current-chapter">1</span></span>
+                        <button class="nav-btn" id="next-chapter">
+                            Next Chapter <i class="fas fa-chevron-right"></i>
+                        </button>
+                    </div>
+
+                    <div class="story-header">
+                        <div class="story-meta">
+                            <i class="fas fa-book-open story-icon"></i>
+                            <h3 class="story-title"></h3>
+                        </div>
+                        <div class="story-stats">
+                            <span><i class="fas fa-eye"></i> 0 Reads</span>
+                            <span><i class="fas fa-star"></i> 0 Votes</span>
+                            <span><i class="fas fa-comment"></i> 0 Comments</span>
+                        </div>
+                    </div>
+
+                    <div class="chapters-list">
+                        <!-- Chapters will be dynamically added here -->
+                    </div>
+
+                    <div class="story-actions">
+                        <button class="action-btn"><i class="fas fa-star"></i> Vote</button>
+                        <button class="action-btn"><i class="fas fa-comment"></i> Comment</button>
+                        <button class="action-btn"><i class="fas fa-share"></i> Share</button>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Initialize thinking section toggle
+            const contemplationSection = document.querySelector('.contemplation-section');
+            const contemplationHeader = document.querySelector('.contemplation-header');
+            
+            if (contemplationHeader) {
+                contemplationHeader.addEventListener('click', function() {
+                    contemplationSection.classList.toggle('collapsed');
+                });
+            }
+            
+            let currentChapter = 1;
+            let allChapters = [];
+            let currentTopic = '';
+            let isAdvancedMode = false;
+
+            // Mode selection handling
+            const modeButtons = document.querySelectorAll('.mode-btn');
+            modeButtons.forEach(button => {
+                button.addEventListener('click', function() {
+                    modeButtons.forEach(btn => btn.classList.remove('active'));
+                    this.classList.add('active');
+                    isAdvancedMode = this.dataset.mode === 'advanced';
+                });
+            });
+
+            document.getElementById('generate-btn').addEventListener('click', async () => {
+                const topic = document.getElementById('topic').value.trim();
+                if (!topic) {
+                    alert('Please enter a topic');
+                    return;
+                }
+
+                currentTopic = topic;
+                currentChapter = 1;
+                allChapters = [];
+                await generateChapter(topic);
+            });
+
+            document.getElementById('next-chapter').addEventListener('click', async () => {
+                // Only use the last chapter as context
+                const lastChapter = allChapters[allChapters.length - 1].content;
+                currentChapter++;
+                await generateChapter(currentTopic, lastChapter);
+            });
+
+            document.getElementById('prev-chapter').addEventListener('click', () => {
+                if (currentChapter > 1) {
+                    currentChapter--;
+                    updateChapterDisplay();
+                    updateNavigationButtons();
+                }
+            });
+
+            async function generateChapter(topic, previousChapter = '') {
+                const loadingSpinner = document.querySelector('.loading-spinner');
+                const storyContainer = document.querySelector('.story-container');
+                const contemplationSection = document.querySelector('.contemplation-section');
+                
+                loadingSpinner.style.display = 'flex';
+                storyContainer.style.display = 'none';
+                if (contemplationSection) {
+                    contemplationSection.style.display = 'none';
+                }
+
+                try {
+                    const response = await fetch('/generate', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({
+                            topic,
+                            previous_chapter: previousChapter,
+                            chapter_number: currentChapter,
+                            mode: isAdvancedMode ? 'advanced' : 'simple'
+                        })
+                    });
+
+                    const data = await response.json();
+                    
+                    if (data.error) {
+                        throw new Error(data.error);
+                    }
+
+                    let storyContent = data.story;
+                    if (isAdvancedMode) {
+                        // Extract content between <contemplator> tags for thinking section
+                        const contemplationMatch = storyContent.match(/<contemplator>([\s\S]*?)<\/contemplator>/);
+                        if (contemplationMatch) {
+                            const contemplation = contemplationMatch[1].trim();
+                            const contemplationContent = document.querySelector('.contemplation-content');
+                            if (contemplationContent) {
+                                contemplationContent.innerHTML = contemplation
+                                    .split('\n')
+                                    .map(line => `<p>${line.trim()}</p>`)
+                                    .join('');
+                                contemplationSection.style.display = 'block';
+                            }
+                        }
+                        
+                        // Extract content between <final_answer> tags for the story
+                        const finalAnswerMatch = storyContent.match(/<final_answer>([\s\S]*?)<\/final_answer>/);
+                        if (finalAnswerMatch) {
+                            storyContent = finalAnswerMatch[1].trim();
+                        } else {
+                            // If no final_answer tags found, use the content after removing contemplator section
+                            storyContent = storyContent.replace(/<contemplator>[\s\S]*?<\/contemplator>/g, '').trim();
+                        }
+                    }
+
+                    allChapters[currentChapter - 1] = formatChapter(storyContent, currentChapter);
+                    updateChapterDisplay();
+                    updateNavigationButtons();
+                    
+                    loadingSpinner.style.display = 'none';
+                    storyContainer.style.display = 'block';
+                    
+                    document.querySelector('.story-title').textContent = topic;
+                    
+                } catch (error) {
+                    alert('Error generating story: ' + error.message);
+                    loadingSpinner.style.display = 'none';
+                }
+            }
+
+            // Toggle contemplation visibility
+            document.querySelector('.toggle-contemplation')?.addEventListener('click', function() {
+                const content = document.querySelector('.contemplation-content');
+                const icon = this.querySelector('i');
+                if (content.style.maxHeight) {
+                    content.style.maxHeight = null;
+                    icon.classList.replace('fa-chevron-down', 'fa-chevron-up');
+                } else {
+                    content.style.maxHeight = content.scrollHeight + "px";
+                    icon.classList.replace('fa-chevron-up', 'fa-chevron-down');
+                }
+            });
+
+            function updateChapterDisplay() {
+                const chaptersContainer = document.querySelector('.chapters-list');
+                chaptersContainer.innerHTML = '';
+                
+                allChapters.forEach((chapter, index) => {
+                    const chapterDiv = document.createElement('div');
+                    chapterDiv.className = 'chapter-content' + (index + 1 === currentChapter ? ' active' : '');
+                    chapterDiv.style.display = index + 1 === currentChapter ? 'block' : 'none';
+                    chapterDiv.innerHTML = chapter.content;
+                    chaptersContainer.appendChild(chapterDiv);
+                });
+
+                document.getElementById('current-chapter').textContent = currentChapter;
+            }
+
+            function updateNavigationButtons() {
+                const prevButton = document.getElementById('prev-chapter');
+                const nextButton = document.getElementById('next-chapter');
+                
+                prevButton.disabled = currentChapter === 1;
+                nextButton.disabled = false;
+            }
+
+            function formatChapter(content, chapterNum) {
+                return {
+                    content: content
+                        .replace(/\n/g, '<br>')
+                        .replace(/<chapter>/g, `<div class="chapter-section">`)
+                        .replace(/<\/chapter>/g, '</div>')
+                        .replace(/<chapter_number>(.*?)<\/chapter_number>/g, `<h4 class="chapter-title">Chapter ${chapterNum}</h4>`)
+                        .replace(/<chapter_summary>(.*?)<\/chapter_summary>/g, '<div class="chapter-summary">$1</div>')
+                        .replace(/<narrative_hook>(.*?)<\/narrative_hook>/g, '<div class="narrative-hook">$1</div>')
+                        .replace(/<content_warning>(.*?)<\/content_warning>/g, '<div class="content-warning"><i class="fas fa-exclamation-triangle"></i> Content Warning: $1</div>')
+                };
+            }
+        });
+    </script>
+</body>
+</html>