script.js

// Sample data for the forum
const forumData = {
    stats: {
        threads: 1245,
        users: 856,
        posts: 9873
    },
    categories: [
        { id: 1, name: "General Discussion", description: "Talk about anything and everything", threads: 342, icon: "bi-chat-square-text" },
        { id: 2, name: "Technology", description: "Computers, gadgets, and tech news", threads: 278, icon: "bi-laptop" },
        { id: 3, name: "Gaming", description: "Video games and consoles", threads: 195, icon: "bi-controller" },
        { id: 4, name: "Movies & TV", description: "Films, series, and streaming", threads: 167, icon: "bi-film" },
        { id: 5, name: "Music", description: "Artists, albums, and concerts", threads: 132, icon: "bi-music-note-beamed" },
        { id: 6, name: "Sports", description: "Athletes, teams, and events", threads: 98, icon: "bi-trophy" }
    ],
    recentThreads: [
        { id: 1, title: "What's your favorite programming language?", category: "Technology", author: "CodeMaster", replies: 24, views: 156, lastPost: "2 hours ago" },
        { id: 2, title: "Best games of 2023 so far?", category: "Gaming", author: "GameFan", replies: 18, views: 203, lastPost: "5 hours ago" },
        { id: 3, title: "New movie recommendations", category: "Movies & TV", author: "FilmBuff", replies: 12, views: 98, lastPost: "Yesterday" },
        { id: 4, title: "Upcoming concert announcements", category: "Music", author: "MusicLover", replies: 8, views: 76, lastPost: "2 days ago" }
    ],
    popularTags: ["javascript", "react", "gaming", "movies", "music", "sports", "technology", "programming", "webdev", "css"],
    thread: {
        id: 1,
        title: "What's your favorite programming language?",
        content: "I'm curious to know what programming languages everyone is using these days. Personally, I've been working a lot with JavaScript and TypeScript for web development, but I'm also interested in exploring Rust for system programming. What about you?",
        author: "CodeMaster",
        date: "June 15, 2023",
        category: "Technology",
        replies: [
            { id: 1, author: "DevGuru", date: "June 15, 2023", content: "I'm all about Python these days. The ecosystem is amazing for data science and machine learning.", avatar: "http://static.photos/technology/200x200/1" },
            { id: 2, author: "WebWizard", date: "June 16, 2023", content: "JavaScript/TypeScript for frontend and Go for backend services. Love the simplicity of Go!", avatar: "http://static.photos/technology/200x200/2" },
            { id: 3, author: "Rustacean", date: "June 16, 2023", content: "Rust is definitely worth learning! The compiler is strict but it helps prevent so many bugs.", avatar: "http://static.photos/technology/200x200/3" }
        ]
    }
};

// DOM Content Loaded
document.addEventListener('DOMContentLoaded', function() {
    // Load stats on homepage
    if (document.getElementById('threadCount')) {
        document.getElementById('threadCount').textContent = forumData.stats.threads.toLocaleString();
        document.getElementById('userCount').textContent = forumData.stats.users.toLocaleString();
        document.getElementById('postCount').textContent = forumData.stats.posts.toLocaleString();
    }

    // Load recent threads on homepage
    if (document.getElementById('recentThreads')) {
        const recentThreadsContainer = document.getElementById('recentThreads');
        forumData.recentThreads.forEach(thread => {
            const threadElement = document.createElement('a');
            threadElement.href = `thread.html?id=${thread.id}`;
            threadElement.className = 'list-group-item list-group-item-action thread-item';
            threadElement.innerHTML = `
                <div class="d-flex w-100 justify-content-between">
                    <h5 class="mb-1">${thread.title}</h5>
                    <small class="text-muted">${thread.lastPost}</small>
                </div>
                <div class="d-flex justify-content-between">
                    <small class="text-muted">${thread.category} • ${thread.author}</small>
                    <small class="text-muted">${thread.replies} replies • ${thread.views} views</small>
                </div>
            `;
            recentThreadsContainer.appendChild(threadElement);
        });
    }

    // Load popular tags on homepage
    if (document.getElementById('popularTags')) {
        const tagsContainer = document.getElementById('popularTags');
        forumData.popularTags.forEach(tag => {
            const tagElement = document.createElement('a');
            tagElement.href = '#';
            tagElement.className = 'tag';
            tagElement.textContent = tag;
            tagsContainer.appendChild(tagElement);
        });
    }

    // Load categories on categories page
    if (document.getElementById('categoriesList')) {
        const categoriesContainer = document.getElementById('categoriesList');
        forumData.categories.forEach(category => {
            const categoryElement = document.createElement('div');
            categoryElement.className = 'col-md-6 mb-4';
            categoryElement.innerHTML = `
                <div class="card h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-center mb-3">
                            <i class="bi ${category.icon} fs-3 me-3"></i>
                            <h5 class="card-title mb-0"><a href="#" class="text-decoration-none">${category.name}</a></h5>
                        </div>
                        <p class="card-text">${category.description}</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <small class="text-muted">${category.threads} threads</small>
                            <a href="#" class="btn btn-sm btn-outline-primary">View</a>
                        </div>
                    </div>
                </div>
            `;
            categoriesContainer.appendChild(categoryElement);
        });
    }

    // Load thread on thread page
    if (document.getElementById('threadTitle')) {
        const urlParams = new URLSearchParams(window.location.search);
        const threadId = urlParams.get('id') || 1;

        document.getElementById('threadTitle').textContent = forumData.thread.title;
        document.getElementById('threadContent').textContent = forumData.thread.content;
        document.getElementById('threadAuthor').textContent = forumData.thread.author;
        document.getElementById('threadDate').textContent = forumData.thread.date;

        const repliesContainer = document.getElementById('repliesList');
        forumData.thread.replies.forEach(reply => {
            const replyElement = document.createElement('div');
            replyElement.className = 'list-group-item';
            replyElement.innerHTML = `
                <div class="d-flex">
                    <img src="${reply.avatar}" alt="${reply.author}" class="avatar me-3">
                    <div class="flex-grow-1">
                        <div class="reply-header">
                            <strong>${reply.author}</strong> • <small>${reply.date}</small>
                        </div>
                        <div class="reply-content">
                            ${reply.content}
                        </div>
                    </div>
                </div>
            `;
            repliesContainer.appendChild(replyElement);
        });

        // Handle reply form submission
        document.getElementById('replyForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const replyContent = document.getElementById('replyContent').value;
            if (replyContent.trim()) {
                alert('Your reply has been posted! (In a real app, this would be sent to the server)');
                document.getElementById('replyContent').value = '';
            }
        });
    }
});