Spaces:
Running
Running
| // 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 = ''; | |
| } | |
| }); | |
| } | |
| }); |