| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Project Details | Quantum Coder Nexus</title> |
| | <link rel="stylesheet" href="style.css"> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| | </head> |
| | <body class="bg-gray-50"> |
| | <custom-navbar></custom-navbar> |
| |
|
| | <main class="container mx-auto px-6 py-16"> |
| | <div class="max-w-4xl mx-auto"> |
| | |
| | <a href="index.html#projects" class="inline-flex items-center text-indigo-600 hover:text-indigo-800 mb-8"> |
| | <i data-feather="arrow-left" class="mr-2"></i> Back to Projects |
| | </a> |
| |
|
| | |
| | <div class="flex flex-col md:flex-row gap-8 mb-12"> |
| | <div class="md:w-2/3"> |
| | <h1 class="text-3xl md:text-4xl font-bold mb-4" id="project-title">Quantum Simulation Platform</h1> |
| | <p class="text-lg text-gray-600 mb-6" id="project-description">Advanced quantum computing simulations using Qiskit framework with visualization tools for quantum states and circuits.</p> |
| | |
| | <div class="flex flex-wrap gap-2 mb-6" id="project-tags"> |
| | <span class="px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm">Python</span> |
| | <span class="px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm">Qiskit</span> |
| | <span class="px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm">Quantum Computing</span> |
| | </div> |
| |
|
| | <div class="flex gap-4"> |
| | <a href="#" class="px-6 py-3 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition inline-flex items-center"> |
| | <i data-feather="github" class="mr-2"></i> View Code |
| | </a> |
| | <a href="#" class="px-6 py-3 border border-indigo-600 text-indigo-600 rounded-lg font-medium hover:bg-indigo-50 transition inline-flex items-center"> |
| | <i data-feather="external-link" class="mr-2"></i> Live Demo |
| | </a> |
| | </div> |
| | </div> |
| | <div class="md:w-1/3"> |
| | <img src="http://static.photos/technology/640x360/1" alt="Project Screenshot" class="rounded-xl shadow-lg w-full" id="project-image"> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16"> |
| | <div class="bg-white p-6 rounded-xl shadow-sm"> |
| | <h3 class="text-xl font-semibold mb-4 flex items-center"> |
| | <i data-feather="clock" class="mr-2 text-indigo-500"></i> Timeline |
| | </h3> |
| | <p class="text-gray-600" id="project-timeline">June 2023 - Present</p> |
| | </div> |
| | <div class="bg-white p-6 rounded-xl shadow-sm"> |
| | <h3 class="text-xl font-semibold mb-4 flex items-center"> |
| | <i data-feather="users" class="mr-2 text-indigo-500"></i> Team |
| | </h3> |
| | <p class="text-gray-600" id="project-team">Solo project with mentor guidance</p> |
| | </div> |
| | <div class="bg-white p-6 rounded-xl shadow-sm"> |
| | <h3 class="text-xl font-semibold mb-4 flex items-center"> |
| | <i data-feather="award" class="mr-2 text-indigo-500"></i> Status |
| | </h3> |
| | <p class="text-gray-600" id="project-status">In Development</p> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-12"> |
| | <div class="p-8"> |
| | <h2 class="text-2xl font-bold mb-6">Project Overview</h2> |
| | <div class="prose max-w-none" id="project-content"> |
| | <p>This project aims to create an intuitive platform for simulating quantum algorithms and visualizing quantum states. The system integrates with IBM's quantum computers through Qiskit while providing educational tools for understanding quantum phenomena.</p> |
| | |
| | <h3 class="text-xl font-semibold mt-8 mb-4">Key Features</h3> |
| | <ul class="list-disc pl-6 mb-6"> |
| | <li>Interactive quantum circuit builder</li> |
| | <li>Real-time statevector visualization</li> |
| | <li>Quantum algorithm tutorials</li> |
| | <li>Performance benchmarking tools</li> |
| | <li>Export capabilities for research papers</li> |
| | </ul> |
| |
|
| | <h3 class="text-xl font-semibold mt-8 mb-4">Technical Details</h3> |
| | <p>The backend is built with Python using Qiskit for quantum operations, NumPy for matrix operations, and Flask for the API layer. The frontend uses React with D3.js for visualizations and Three.js for 3D Bloch sphere representations.</p> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="mb-16"> |
| | <h2 class="text-2xl font-bold mb-6">Gallery</h2> |
| | <div class="grid grid-cols-1 md:grid-cols-2 gap-6" id="project-gallery"> |
| | <img src="http://static.photos/technology/640x360/5" alt="Screenshot 1" class="rounded-lg shadow-md"> |
| | <img src="http://static.photos/technology/640x360/6" alt="Screenshot 2" class="rounded-lg shadow-md"> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div> |
| | <h2 class="text-2xl font-bold mb-6">Related Projects</h2> |
| | <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="related-projects"> |
| | |
| | </div> |
| | </div> |
| | </div> |
| | </main> |
| |
|
| | <custom-footer></custom-footer> |
| |
|
| | <script src="components/navbar.js"></script> |
| | <script src="components/footer.js"></script> |
| | <script src="script.js"></script> |
| | <script> |
| | feather.replace(); |
| | |
| | |
| | document.addEventListener('DOMContentLoaded', function() { |
| | const urlParams = new URLSearchParams(window.location.search); |
| | const projectId = urlParams.get('id'); |
| | |
| | |
| | |
| | if (!projectId || projectId === '1') { |
| | document.getElementById('project-title').textContent = 'Quantum Simulation Platform'; |
| | document.getElementById('project-description').textContent = 'Advanced quantum computing simulations using Qiskit framework with visualization tools for quantum states and circuits.'; |
| | document.getElementById('project-image').src = 'http://static.photos/technology/640x360/1'; |
| | document.getElementById('project-timeline').textContent = 'June 2023 - Present'; |
| | document.getElementById('project-team').textContent = 'Solo project with mentor guidance'; |
| | document.getElementById('project-status').textContent = 'In Development'; |
| | } |
| | |
| | }); |
| | </script> |
| | </body> |
| | </html> |
