Spaces:
Running
Running
lets create a section that serves as an interative roadmap and documented journey to accomplish the goal essentially creating a whitepaper and roadmap that would allow other collaborators and partners to follow along the process be sure to include a page dedicated to a forum or public query similar to a crowd development portal I want all elements and functions of the code to be functional and buttons etc lets map out every page and add and create aditional pages when needed
bc7e9d7
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>m1encode - Community Forum</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Exo+2:wght@300;400;600&display=swap'); | |
| .matrix-bg { | |
| background: radial-gradient(circle at center, #0a0a0a 0%, #000000 100%); | |
| } | |
| .forum-post { | |
| transition: all 0.3s ease; | |
| } | |
| .forum-post:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.1); | |
| } | |
| .active-category { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| </style> | |
| </head> | |
| <body class="matrix-bg text-white font-['Exo_2'] min-h-screen"> | |
| <div id="vanta-bg" class="fixed inset-0 z-0"></div> | |
| <!-- Navigation --> | |
| <nav class="relative z-10 py-6 px-4 lg:px-8 border-b border-gray-800 backdrop-blur-sm bg-black/30"> | |
| <div class="max-w-7xl mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-3 h-3 bg-cyan-400 rounded-full animate-pulse"></div> | |
| <h1 class="text-xl font-['Orbitron'] font-bold tracking-wider">m1encode</h1> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="index.html" class="hover:text-cyan-300 transition-colors duration-300">Home</a> | |
| <a href="index.html#mission" class="hover:text-cyan-300 transition-colors duration-300">Mission</a> | |
| <a href="index.html#roadmap" class="hover:text-cyan-300 transition-colors duration-300">Roadmap</a> | |
| <a href="index.html#collaborate" class="hover:text-cyan-300 transition-colors duration-300">Collaborate</a> | |
| <a href="index.html#contact" class="hover:text-cyan-300 transition-colors duration-300">Contact</a> | |
| <a href="forum.html" class="text-cyan-300 font-bold">Forum</a> | |
| </div> | |
| <button class="md:hidden"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Forum Header --> | |
| <section class="relative z-10 py-16 px-4 lg:px-8 text-center"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h1 class="text-5xl lg:text-6xl font-['Orbitron'] font-black mb-6"> | |
| Community <span class="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-500">Forum</span> | |
| </h1> | |
| <p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto"> | |
| Join the global discussion on quantum encryption. Share ideas, ask questions, and collaborate with researchers worldwide. | |
| </p> | |
| </div> | |
| </section> | |
| <!-- Forum Content --> | |
| <section class="relative z-10 py-8 px-4 lg:px-8"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="grid lg:grid-cols-4 gap-8"> | |
| <!-- Categories Sidebar --> | |
| <div class="lg:col-span-1"> | |
| <div class="bg-black/40 backdrop-blur-sm rounded-xl border border-gray-800 p-6"> | |
| <h3 class="font-['Orbitron'] text-xl mb-4">Categories</h3> | |
| <div class="space-y-2"> | |
| <button class="w-full text-left px-4 py-3 rounded-lg bg-cyan-500/20 text-cyan-300 border border-cyan-500/30 active-category"> | |
| <div class="flex items-center space-x-3"> | |
| <i data-feather="message-square" class="w-5 h-5"></i> | |
| <span>General Discussion</span> | |
| </div> | |
| </button> | |
| <button class="w-full text-left px-4 py-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition-colors duration-300"> | |
| <div class="flex items-center space-x-3"> | |
| <i data-feather="cpu" class="w-5 h-5"></i> | |
| <span>Protocol Development</span> | |
| </div> | |
| </button> | |
| <button class="w-full text-left px-4 py-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition-colors duration-300"> | |
| <div class="flex items-center space-x-3"> | |
| <i data-feather="git-branch" class="w-5 h-5"></i> | |
| <span>Research Papers</span> | |
| </div> | |
| </button> | |
| <button class="w-full text-left px-4 py-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition-colors duration-300"> | |
| <i data-feather="help-circle" class="w-5 h-5"></i> | |
| <span>Q&A</span> | |
| </div> | |
| </button> | |
| <button class="w-full text-left px-4 py-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition-colors duration-300"> | |
| <div class="flex items-center space-x-3"> | |
| <i data-feather="users" class="w-5 h-5"></i> | |
| <span>Collaboration</span> | |
| </div> | |
| </button> | |
| <button class="w-full text-left px-4 py-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition-colors duration-300"> | |
| <i data-feather="code" class="w-5 h-5"></i> | |
| <span>Implementation</span> | |
| </div> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- New Post Button --> | |
| <div class="mt-6"> | |
| <button onclick="showNewPostModal()" class="w-full px-4 py-3 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-lg font-['Orbitron'] font-bold tracking-wider hover:scale-105 transition-transform duration-300"> | |
| + New Post | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Forum Posts --> | |
| <div class="lg:col-span-3"> | |
| <div class="bg-black/40 backdrop-blur-sm rounded-xl border border-gray-800 p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="font-['Orbitron'] text-2xl">Recent Discussions</h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-gray-800 rounded-lg text-sm hover:bg-gray-700 transition-colors duration-300"> | |
| <i data-feather="filter" class="w-4 h-4"></i> | |
| <span>Filter</span> | |
| </button> | |
| </div> | |
| <!-- Post List --> | |
| <div class="space-y-4" id="forumPosts"> | |
| <!-- Post 1 --> | |
| <div class="forum-post p-6 rounded-xl bg-gradient-to-br from-gray-900 to-black border border-gray-800 hover:border-cyan-500"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <div> | |
| <h4 class="font-['Orbitron'] text-lg text-cyan-300">Quantum Entanglement Implementation Questions</h4> | |
| <p class="text-gray-400 text-sm">Posted by Dr. Elena Rodriguez • 2 hours ago</p> | |
| </div> | |
| <div class="flex items-center space-x-4 text-sm text-gray-500"> | |
| <span class="flex items-center space-x-1"> | |
| <i data-feather="message-circle" class="w-4 h-4"></i> | |
| <span>12 replies</span> | |
| </span> | |
| <span class="flex items-center space-x-1"> | |
| <i data-feather="eye" class="w-4 h-4"></i> | |
| <span>84 views</span> | |
| </span> | |
| </div> | |
| <p class="text-gray-300 mt-3">I'm working on implementing the quantum entanglement principles discussed in the whitepaper. Has anyone encountered issues with maintaining coherence in simulated environments?</p> | |
| </div> | |
| </div> | |
| <!-- Post 2 --> | |
| <div class="forum-post p-6 rounded-xl bg-gradient-to-br from-gray-900 to-black border border-gray-800 hover:border-purple-500"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <div> | |
| <h4 class="font-['Orbitron'] text-lg text-purple-300">Security Analysis of Current Implementation</h4> | |
| <p class="text-gray-400 text-sm">Posted by Prof. Kenji Tanaka • 5 hours ago</p> | |
| </div> | |
| <div class="flex items-center space-x-4 text-sm text-gray-500"> | |
| <span class="flex items-center space-x-1"> | |
| <i data-feather="message-circle" class="w-4 h-4"></i> | |
| <span>8 replies</span> | |
| </span> | |
| <span class="flex items-center space-x-1"> | |
| <i data-feather="eye" class="w-4 h-4"></i> | |
| <span>67 views</span> | |
| </span> | |
| </div> | |
| <p class="text-gray-300 mt-3">I've completed a preliminary security analysis of the current protocol implementation. Would like to discuss potential vulnerabilities...</p> | |
| </div> | |
| </div> | |
| <!-- Post 3 --> | |
| <div class="forum-post p-6 rounded-xl bg-gradient-to-br from-gray-900 to-black border border-gray-800 hover:border-blue-500"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <div> | |
| <h4 class="font-['Orbitron'] text-lg text-blue-300">Collaboration Opportunities in Europe</h4> | |
| <p class="text-gray-400 text-sm">Posted by Dr. Marco Bianchi • 1 day ago</p> | |
| </div> | |
| <div class="flex items-center space-x-4 text-sm text-gray-500"> | |
| <span class="flex items-center space-x-1"> | |
| <i data-feather="message-circle" class="w-4 h-4"></i> | |
| <span>23 replies</span> | |
| </span> | |
| <span class="flex items-center space-x-1"> | |
| <i data-feather="eye" class="w-4 h-4"></i> | |
| <span>156 views</span> | |
| </span> | |
| </div> | |
| <p class="text-gray-300 mt-3">Our research group at ETH Zurich is interested in collaborating on the quantum encryption protocol. We have access to quantum computing resources...</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Load More Button --> | |
| <div class="mt-6 text-center"> | |
| <button onclick="loadMorePosts()" class="px-6 py-3 border-2 border-cyan-400 rounded-lg font-['Orbitron'] tracking-wider hover:bg-cyan-400/10 transition-all duration-300"> | |
| Load More Discussions | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- New Post Modal --> | |
| <div id="newPostModal" class="fixed inset-0 z-50 hidden"> | |
| <div class="absolute inset-0 bg-black/80 backdrop-blur-sm"></div> | |
| <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-2xl p-6"> | |
| <div class="bg-gradient-to-br from-gray-900 to-black rounded-xl border border-cyan-500/30 p-6"> | |
| <h3 class="font-['Orbitron'] text-2xl mb-4">Create New Post</h3> | |
| <form id="newPostForm" onsubmit="handleNewPost(event)"> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium mb-2">Title</label> | |
| <input type="text" id="postTitle" class="w-full px-4 py-3 bg-black/40 border border-gray-700 rounded-lg focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500" required> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium mb-2">Category</label> | |
| <select id="postCategory" class="w-full px-4 py-3 bg-black/40 border border-gray-700 rounded-lg focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500 bg-black/40 border border-gray-700 rounded-lg focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500" required> | |
| <option value="general">General Discussion</option> | |
| <option value="protocol">Protocol Development</option> | |
| <option value="research">Research Papers</option> | |
| <option value="qa">Q&A</option> | |
| <option value="collaboration">Collaboration</option> | |
| <option value="implementation">Implementation</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium mb-2">Content</label> | |
| <textarea id="postContent" rows="6" class="w-full px-4 py-3 bg-black/40 border border-gray-700 rounded-lg focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500" required></textarea> | |
| </div> | |
| <div class="flex justify-end space-x-3"> | |
| <button type="button" onclick="hideNewPostModal()" class="px-6 py-3 border-2 border-gray-600 rounded-lg hover:border-gray-500 transition-colors duration-300">Cancel</button> | |
| <button type="submit" class="px-6 py-3 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-lg font-['Orbitron'] tracking-wider hover:scale-105 transition-transform duration-300"> | |
| Create Post | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="relative z-10 py-8 px-4 lg:px-8 border-t border-gray-800"> | |
| <div class="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center space-x-2 mb-4 md:mb-0"> | |
| <div class="w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></div> | |
| <span class="text-sm text-gray-400">m1encode © 2024 - Community Forum</span> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-cyan-400 transition-colors duration-300"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-cyan-400 transition-colors duration-300"> | |
| <i data-feather="linkedin"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-cyan-400 transition-colors duration-300"> | |
| <i data-feather="youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Vanta.js globe background | |
| VANTA.GLOBE({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x3f83f8, | |
| backgroundColor: 0x0a0a0a, | |
| size: 1.10 | |
| }); | |
| // Forum functionality | |
| let posts = [ | |
| { | |
| id: 1, | |
| title: "Quantum Entanglement Implementation Questions", | |
| author: "Dr. Elena Rodriguez", | |
| time: "2 hours ago", | |
| replies: 12, | |
| views: 84, | |
| content: "I'm working on implementing the quantum entanglement principles discussed in the whitepaper. Has anyone encountered issues with maintaining coherence in simulated environments?", | |
| category: "protocol" | |
| }, | |
| { | |
| id: 2, | |
| title: "Security Analysis of Current Implementation", | |
| author: "Prof. Kenji Tanaka", | |
| time: "5 hours ago", | |
| replies: 8, | |
| views: 67, | |
| content: "I've completed a preliminary security analysis of the current protocol implementation. Would like to discuss potential vulnerabilities...", | |
| category: "research" | |
| }, | |
| { | |
| id: 3, | |
| title: "Collaboration Opportunities in Europe", | |
| author: "Dr. Marco Bianchi", | |
| time: "1 day ago", | |
| replies: 23, | |
| views: 156, | |
| content: "Our research group at ETH Zurich is interested in collaborating on the quantum encryption protocol. We have access to quantum computing resources...", | |
| category: "collaboration" | |
| } | |
| ]; | |
| function showNewPostModal() { | |
| document.getElementById('newPostModal').classList.remove('hidden'); | |
| } | |
| function hideNewPostModal() { | |
| document.getElementById('newPostModal').classList.add('hidden'); | |
| } | |
| function handleNewPost(event) { | |
| event.preventDefault(); | |
| const title = document.getElementById('postTitle').value; | |
| const category = document.getElementById('postCategory').value; | |
| const content = document.getElementById('postContent').value; | |
| // Create new post object | |
| const newPost = { | |
| id: posts.length + 1, | |
| title: title, | |
| author: "Current User", | |
| time: "Just now", | |
| replies: 0, | |
| views: 1, | |
| content: content, | |
| category: category | |
| }; | |
| posts.unshift(newPost); // Add to beginning of array | |
| renderPosts(); | |
| hideNewPostModal(); | |
| // Show success message | |
| showNotification('Post created successfully!', 'success'); | |
| } | |
| function loadMorePosts() { | |
| // Simulate loading more posts | |
| const newPosts = [ | |
| { | |
| id: posts.length + 1, | |
| title: "Performance Optimization Techniques", | |
| author: "Dr. Sarah Chen", | |
| time: "2 days ago", | |
| replies: 15, | |
| views: 98, | |
| content: "I've been working on optimizing the protocol's performance in high-traffic scenarios. Would appreciate insights on quantum circuit optimization...", | |
| category: "implementation" | |
| } | |
| ]; | |
| posts = [...posts, ...newPosts]; | |
| renderPosts(); | |
| showNotification('More posts loaded!', 'info'); | |
| } | |
| function renderPosts() { | |
| const postsContainer = document.getElementById('forumPosts'); | |
| postsContainer.innerHTML = ''; | |
| posts.forEach(post => { | |
| const postElement = document.createElement('div'); | |
| postElement.className = 'forum-post p-6 rounded-xl bg-gradient-to-br from-gray-900 to-black border border-gray-800 hover:border-cyan-500'; | |
| postElement.innerHTML = ` | |
| <div class="flex justify-between items-start mb-3"> | |
| <div> | |
| <h4 class="font-['Orbitron'] text-lg ${getCategoryColor(post.category)}"> | |
| ${post.title} | |
| </h4> | |
| <p class="text-gray-400 text-sm">Posted by ${post.author} • ${post.time}</p> | |
| </div> | |
| <div class="flex items-center space-x-4 text-sm text-gray-500"> | |
| <span class="flex items-center space-x-1"> | |
| <i data-feather="message-circle" class="w-4 h-4"></i> | |
| <span>${post.replies} replies</span> | |
| </span> | |
| <span class="flex items-center space-x-1"> | |
| <i data-feather="eye" class="w-4 h-4"></i> | |
| <span>${post.views} views</span> | |
| </span> | |
| </div> | |
| <p class="text-gray-300 mt-3">${post.content}</p> | |
| </div> | |
| `; | |
| postsContainer.appendChild(postElement); | |
| }); | |
| feather.replace(); | |
| } | |
| function getCategoryColor(category) { | |
| switch(category) { | |
| case 'protocol': return 'text-cyan-300'; | |
| case 'research': return 'text-purple-300'; | |
| case 'qa': return 'text-blue-300'; | |
| case 'collaboration': return 'text-green-300'; | |
| case 'implementation': return 'text-yellow-300'; | |
| default: return 'text-cyan-300'; | |
| } | |
| } | |
| function showNotification(message, type = 'info') { | |
| const notification = document.createElement('div'); | |
| notification.className = `fixed top-4 right-4 z-50 px-6 py-4 rounded-lg font-['Orbitron'] tracking-wider ${ | |
| type === 'success' ? 'bg-green-500/20 border border-green-500 text-green-300' : | |
| type === 'error' ? 'bg-red-500/20 border border-red-500 text-red-300' : | |
| 'bg-cyan-500/20 border border-cyan-500 text-cyan-300' | |
| } backdrop-blur-sm transform transition-all duration-300 translate-x-full`; | |
| notification.innerHTML = ` | |
| <div class="flex items-center space-x-3"> | |
| <i data-feather="${type === 'success' ? 'check-circle' : type === 'error' ? 'alert-circle' : 'info'}"></i> | |
| <span>${message}</span> | |
| `; | |
| document.body.appendChild(notification); | |
| // Animate in | |
| setTimeout(() => { | |
| notification.classList.remove('translate-x-full'); | |
| }, 100); | |
| // Auto remove after 5 seconds | |
| setTimeout(() => { | |
| notification.classList.add('translate-x-full'); | |
| setTimeout(() => { | |
| if (notification.parentNode) { | |
| notification.parentNode.removeChild(notification); | |
| }, 300); | |
| }, 5000); | |
| feather.replace(); | |
| } | |
| // Initialize forum | |
| document.addEventListener('DOMContentLoaded', function() { | |
| renderPosts(); | |
| }); | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |