Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CodeCraft Haven | Espace Codage</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100 font-sans antialiased"> | |
| <div class="app-container h-screen flex"> | |
| <!-- Project Manager Sidebar --> | |
| <project-manager class="w-80"></project-manager> | |
| <!-- Main Content Area --> | |
| <div class="flex-1 flex flex-col bg-gray-850/50"> | |
| <!-- Code Explanation Column --> | |
| <code-explainer class="flex-1 border-r border-gray-700"></code-explainer> | |
| </div> | |
| <!-- Visualization Column --> | |
| <code-visualizer class="w-96 bg-gray-800 border-l border-gray-700"></code-visualizer> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| // Initialize components | |
| const projectManager = document.querySelector('project-manager'); | |
| const codeExplainer = document.querySelector('code-explainer'); | |
| const codeVisualizer = document.querySelector('code-visualizer'); | |
| // Example of setting code and explanation | |
| const exampleCSS = `body { | |
| background-color: #ff6347; /* Couleur de fond tomatée */ | |
| color: #ffffff; | |
| font-family: 'Arial', sans-serif; | |
| }`; | |
| const exampleExplanation = `La Baleine a généré ce code CSS pour le thème : | |
| - La couleur de fond est définie sur une nuance de tomate (#ff6347) | |
| - Le texte sera en blanc (#ffffff) | |
| - La police par défaut est Arial avec une police sans-serif de secours`; | |
| // Set initial example | |
| codeExplainer.setCode(exampleCSS, exampleExplanation); | |
| codeVisualizer.setCode(exampleCSS); | |
| // Listen for project changes | |
| projectManager.addEventListener('project-changed', (e) => { | |
| const project = e.detail.project; | |
| console.log('Project changed to:', project.name); | |
| // Update code and explanation based on project | |
| // In a real app, you would fetch this data for the selected project | |
| codeExplainer.setCode(exampleCSS, exampleExplanation); | |
| codeVisualizer.setCode(exampleCSS); | |
| }); | |
| </script> | |
| <script src="components/project-manager.js"></script> | |
| <script src="components/code-explainer.js"></script> | |
| <script src="components/code-visualizer.js"></script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |