288 lines
9.7 KiB
PHP
Executable File
288 lines
9.7 KiB
PHP
Executable File
<!DOCTYPE html>
|
|
<html data-theme="dark" lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>HAMID Code - IDE IA</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: 'Fira Code', 'Consolas', monospace;
|
|
background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3e 100%);
|
|
min-height: 100vh;
|
|
color: #e0e0e0;
|
|
}
|
|
.header {
|
|
background: rgba(0,212,255,0.1);
|
|
border-bottom: 1px solid #333;
|
|
padding: 15px 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.header h1 {
|
|
color: #00d4ff;
|
|
font-size: 1.5em;
|
|
}
|
|
.header a {
|
|
color: #9333ea;
|
|
text-decoration: none;
|
|
}
|
|
.container {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20px;
|
|
padding: 20px;
|
|
height: calc(100vh - 70px);
|
|
}
|
|
.panel {
|
|
background: rgba(26,26,46,0.9);
|
|
border: 1px solid #333;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.panel-header {
|
|
background: rgba(0,212,255,0.1);
|
|
padding: 10px 15px;
|
|
border-bottom: 1px solid #333;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.panel-header h3 { color: #00d4ff; font-size: 1em; }
|
|
select {
|
|
background: #0a0a1a;
|
|
color: #00d4ff;
|
|
border: 1px solid #333;
|
|
padding: 5px 10px;
|
|
border-radius: 5px;
|
|
}
|
|
textarea {
|
|
flex: 1;
|
|
background: #0a0a1a;
|
|
color: #e0e0e0;
|
|
border: none;
|
|
padding: 15px;
|
|
font-family: inherit;
|
|
font-size: 14px;
|
|
resize: none;
|
|
}
|
|
textarea:focus { outline: none; }
|
|
.output {
|
|
flex: 1;
|
|
padding: 15px;
|
|
overflow-y: auto;
|
|
font-size: 14px;
|
|
white-space: pre-wrap;
|
|
}
|
|
.output.error { color: #ef4444; }
|
|
.output.success { color: #22c55e; }
|
|
.toolbar {
|
|
padding: 10px 15px;
|
|
border-top: 1px solid #333;
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
button {
|
|
background: linear-gradient(90deg, #00d4ff, #0099cc);
|
|
color: #000;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
transition: all 0.3s;
|
|
}
|
|
button:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 5px 20px rgba(0,212,255,0.4);
|
|
}
|
|
button.secondary {
|
|
background: #333;
|
|
color: #e0e0e0;
|
|
}
|
|
.templates {
|
|
display: flex;
|
|
gap: 5px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.template-btn {
|
|
background: rgba(147,51,234,0.2);
|
|
color: #9333ea;
|
|
border: 1px solid #9333ea;
|
|
padding: 5px 10px;
|
|
border-radius: 15px;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
.template-btn:hover {
|
|
background: #9333ea;
|
|
color: #fff;
|
|
}
|
|
.stats {
|
|
font-size: 12px;
|
|
color: #666;
|
|
padding: 5px 15px;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<h1>⚡ HAMID Code</h1>
|
|
<div>
|
|
<a href="hamid-dashboard.php">📊 Dashboard</a> |
|
|
<a href="hamid-fullscreen.php">💬 Chat</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<h3>📝 Code</h3>
|
|
<select id="language">
|
|
<option value="python">Python</option>
|
|
<option value="php">PHP</option>
|
|
<option value="bash">Bash</option>
|
|
<option value="javascript">JavaScript</option>
|
|
</select>
|
|
</div>
|
|
<textarea id="code" placeholder="# Écris ton code ici...
|
|
print('Hello HAMID!')"></textarea>
|
|
<div class="toolbar">
|
|
<button onclick="runCode()">▶️ Exécuter</button>
|
|
<button class="secondary" onclick="clearCode()">🗑️ Clear</button>
|
|
<button class="secondary" onclick="askAI()">🤖 Demander à HAMID</button>
|
|
</div>
|
|
<div class="templates">
|
|
<span class="template-btn" onclick="loadTemplate('hello')">Hello World</span>
|
|
<span class="template-btn" onclick="loadTemplate('loop')">Boucle</span>
|
|
<span class="template-btn" onclick="loadTemplate('api')">API Request</span>
|
|
<span class="template-btn" onclick="loadTemplate('file')">Fichier</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<h3>📤 Output</h3>
|
|
<span id="exec-time"></span>
|
|
</div>
|
|
<div class="output" id="output">En attente d'exécution...</div>
|
|
<div class="stats" id="stats"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const templates = {
|
|
hello: {
|
|
python: 'print("Hello, HAMID!")',
|
|
php: 'echo "Hello, HAMID!";',
|
|
bash: 'echo "Hello, HAMID!"',
|
|
javascript: 'console.log("Hello, HAMID!");'
|
|
},
|
|
loop: {
|
|
python: 'for i in range(10):\n print(f"Iteration {i}")',
|
|
php: 'for ($i = 0; $i < 10; $i++) {\n echo "Iteration $i\\n";\n}',
|
|
bash: 'for i in {1..10}; do echo "Iteration $i"; done',
|
|
javascript: 'for (let i = 0; i < 10; i++) {\n console.log(`Iteration ${i}`);\n}'
|
|
},
|
|
api: {
|
|
python: 'import requests\nresponse = requests.get("https://api.github.com")\nprint(response.json())',
|
|
php: '$response = file_get_contents("https://api.github.com");\nprint_r(json_decode($response));',
|
|
bash: 'curl -s https://api.github.com',
|
|
javascript: 'fetch("https://api.github.com").then(r => r.json()).then(console.log);'
|
|
},
|
|
file: {
|
|
python: 'with open("/tmp/test.txt", "w") as f:\n f.write("Hello!")\nprint("File created!")',
|
|
php: 'file_put_contents("/tmp/test.txt", "Hello!");\necho "File created!";',
|
|
bash: 'echo "Hello!" > /tmp/test.txt && cat /tmp/test.txt',
|
|
javascript: 'const fs = require("fs");\nfs.writeFileSync("/tmp/test.txt", "Hello!");\nconsole.log("Done!");'
|
|
}
|
|
};
|
|
|
|
function loadTemplate(name) {
|
|
const lang = document.getElementById('language').value;
|
|
document.getElementById('code').value = templates[name][lang] || templates[name].python;
|
|
}
|
|
|
|
async function runCode() {
|
|
const code = document.getElementById('code').value;
|
|
const lang = document.getElementById('language').value;
|
|
const output = document.getElementById('output');
|
|
const execTime = document.getElementById('exec-time');
|
|
|
|
output.textContent = '⏳ Exécution en cours...';
|
|
output.className = 'output';
|
|
|
|
const start = Date.now();
|
|
|
|
try {
|
|
const response = await fetch('/hamid-code.php', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
|
|
body: 'code=' + encodeURIComponent(code) + '&language=' + lang
|
|
});
|
|
const data = await response.json();
|
|
|
|
const elapsed = Date.now() - start;
|
|
execTime.textContent = elapsed + 'ms';
|
|
|
|
if (data.success) {
|
|
output.textContent = data.output || '(Pas de sortie)';
|
|
output.className = 'output success';
|
|
} else {
|
|
output.textContent = data.error || data.output || 'Erreur';
|
|
output.className = 'output error';
|
|
}
|
|
|
|
document.getElementById('stats').textContent = 'Language: ' + lang + ' | ' + elapsed + 'ms';
|
|
} catch (e) {
|
|
output.textContent = 'Erreur: ' + e.message;
|
|
output.className = 'output error';
|
|
}
|
|
}
|
|
|
|
function clearCode() {
|
|
document.getElementById('code').value = '';
|
|
document.getElementById('output').textContent = 'En attente...';
|
|
}
|
|
|
|
async function askAI() {
|
|
const code = document.getElementById('code').value;
|
|
const output = document.getElementById('output');
|
|
|
|
const question = prompt('Question pour HAMID sur ce code:', 'Explique ce code');
|
|
if (!question) return;
|
|
|
|
output.textContent = '🤖 HAMID réfléchit...';
|
|
|
|
try {
|
|
const response = await fetch('/hamid-api.php', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({
|
|
message: question + '\n\nCode:\n```\n' + code + '\n```',
|
|
provider: 'mistral'
|
|
})
|
|
});
|
|
const data = await response.json();
|
|
output.textContent = data.response || 'Pas de réponse';
|
|
} catch (e) {
|
|
output.textContent = 'Erreur: ' + e.message;
|
|
}
|
|
}
|
|
|
|
// Raccourcis clavier
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.ctrlKey && e.key === 'Enter') {
|
|
runCode();
|
|
}
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|