Spaces:
Running
Running
File size: 2,724 Bytes
b26cf7f 657ff42 b26cf7f 657ff42 4b67936 b26cf7f 657ff42 a93f87c 657ff42 a93f87c 657ff42 a93f87c 657ff42 a93f87c 657ff42 a93f87c 657ff42 a93f87c 657ff42 b26cf7f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<!DOCTYPE html>
<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> |