Create js/script.js

static/js/script.js

@@ -0,0 +1,173 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const generateBtn = document.getElementById('generate-btn');
+    const topicInput = document.getElementById('topic');
+    const loadingSpinner = document.getElementById('loading');
+    const storyContainer = document.getElementById('story-container');
+    const storyContent = document.getElementById('story-content');
+    const storyTitle = document.getElementById('story-title');
+
+    // Initialize counters
+    let reads = 0;
+    let votes = 0;
+    let comments = 0;
+
+    // Animate counter function
+    const animateCounter = (element, start, end, duration) => {
+        let startTimestamp = null;
+        const step = (timestamp) => {
+            if (!startTimestamp) startTimestamp = timestamp;
+            const progress = Math.min((timestamp - startTimestamp) / duration, 1);
+            const current = Math.floor(progress * (end - start) + start);
+            element.textContent = current;
+            if (progress < 1) {
+                window.requestAnimationFrame(step);
+            }
+        };
+        window.requestAnimationFrame(step);
+    };
+
+    // Add hover effect to story container
+    storyContainer.addEventListener('mouseenter', () => {
+        storyContainer.style.transform = 'translateY(-5px)';
+        storyContainer.style.boxShadow = '0 6px 25px rgba(0, 0, 0, 0.15)';
+    });
+
+    storyContainer.addEventListener('mouseleave', () => {
+        storyContainer.style.transform = 'translateY(0)';
+        storyContainer.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.1)';
+    });
+
+    // Handle story generation
+    generateBtn.addEventListener('click', async () => {
+        const topic = topicInput.value.trim();
+        if (!topic) {
+            topicInput.classList.add('shake');
+            setTimeout(() => topicInput.classList.remove('shake'), 500);
+            return;
+        }
+
+        // Disable button and show loading
+        generateBtn.disabled = true;
+        generateBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Generating...';
+        loadingSpinner.style.display = 'block';
+        storyContainer.style.display = 'none';
+
+        try {
+            const response = await fetch('/generate', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ topic }),
+            });
+
+            const data = await response.json();
+
+            if (response.ok) {
+                // Format and display story
+                storyTitle.textContent = topic.charAt(0).toUpperCase() + topic.slice(1);
+                storyContent.innerHTML = formatStoryText(data.story);
+                
+                // Show story with animation
+                storyContainer.style.display = 'block';
+                storyContainer.style.opacity = '0';
+                storyContainer.style.transform = 'translateY(20px)';
+                
+                // Trigger reflow
+                storyContainer.offsetHeight;
+                
+                // Add animation
+                storyContainer.style.transition = 'all 0.5s ease-out';
+                storyContainer.style.opacity = '1';
+                storyContainer.style.transform = 'translateY(0)';
+
+                // Animate counters
+                reads += Math.floor(Math.random() * 50) + 10;
+                votes += Math.floor(Math.random() * 20) + 5;
+                comments += Math.floor(Math.random() * 10) + 2;
+
+                animateCounter(document.querySelector('.reads .count'), 0, reads, 1500);
+                animateCounter(document.querySelector('.votes .count'), 0, votes, 1500);
+                animateCounter(document.querySelector('.comments .count'), 0, comments, 1500);
+
+                // Scroll to story
+                storyContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            } else {
+                throw new Error(data.error || 'Failed to generate story');
+            }
+        } catch (error) {
+            showError('Error generating story: ' + error.message);
+        } finally {
+            loadingSpinner.style.display = 'none';
+            generateBtn.disabled = false;
+            generateBtn.innerHTML = '<span class="btn-text">Generate Story</span><i class="fas fa-magic"></i>';
+        }
+    });
+
+    // Handle action buttons
+    document.querySelector('.vote-btn').addEventListener('click', function() {
+        this.classList.toggle('voted');
+        if (this.classList.contains('voted')) {
+            votes++;
+            this.style.backgroundColor = '#FF8F00';
+            this.style.color = 'white';
+        } else {
+            votes--;
+            this.style.backgroundColor = 'white';
+            this.style.color = '#333';
+        }
+        document.querySelector('.votes .count').textContent = votes;
+    });
+
+    document.querySelector('.share-btn').addEventListener('click', () => {
+        // Create a temporary input to copy the URL
+        const input = document.createElement('input');
+        input.value = window.location.href;
+        document.body.appendChild(input);
+        input.select();
+        document.execCommand('copy');
+        document.body.removeChild(input);
+        
+        // Show copied notification
+        const shareBtn = document.querySelector('.share-btn');
+        const originalText = shareBtn.innerHTML;
+        shareBtn.innerHTML = '<i class="fas fa-check"></i> Copied!';
+        setTimeout(() => {
+            shareBtn.innerHTML = originalText;
+        }, 2000);
+    });
+
+    // Format story text
+    function formatStoryText(text) {
+        return text
+            .split('\n')
+            .filter(para => para.trim())
+            .map(para => `<p class="story-paragraph">${para}</p>`)
+            .join('');
+    }
+
+    // Show error message
+    function showError(message) {
+        const errorDiv = document.createElement('div');
+        errorDiv.className = 'error-message';
+        errorDiv.innerHTML = `<i class="fas fa-exclamation-circle"></i> ${message}`;
+        document.querySelector('.input-section').appendChild(errorDiv);
+        setTimeout(() => errorDiv.remove(), 5000);
+    }
+
+    // Enable enter key to generate story
+    topicInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') {
+            generateBtn.click();
+        }
+    });
+
+    // Add input animations
+    topicInput.addEventListener('focus', () => {
+        document.querySelector('.input-wrapper').style.transform = 'scale(1.02)';
+    });
+
+    topicInput.addEventListener('blur', () => {
+        document.querySelector('.input-wrapper').style.transform = 'scale(1)';
+    });
+});