<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ElectroGen AI - Engineering Workspace</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&family=JetBrains+Mono:wght@400;700&display=swap');
body {
font-family: 'Inter', sans-serif;
background-color: #1e1e1e;
color: #d4d4d4;
overflow: hidden; /* Prevent full page scroll */
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #252526;
}
::-webkit-scrollbar-thumb {
background: #424242;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #505050;
}
/* Grid Background for Canvas */
.grid-bg {
background-color: #1e1e1e;
background-image: radial-gradient(#444 1px, transparent 1px);
background-size: 20px 20px;
}
/* Code Editor Styles */
.code-font {
font-family: 'JetBrains Mono', monospace;
}
.line-numbers {
color: #858585;
text-align: right;
padding-right: 1rem;
user-select: none;
}
/* Component Card on Canvas */
.component-card {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
transition: all 0.2s;
cursor: grab;
}
.component-card:active {
cursor: grabbing;
}
/* Syntax Highlighting Simulation */
.syntax-keyword { color: #569cd6; }
.syntax-func { color: #dcdcaa; }
.syntax-var { color: #9cdcfe; }
.syntax-comment { color: #6a9955; }
.syntax-num { color: #b5cea8; }
.syntax-string { color: #ce9178; }
</style>
</head>
<body class="flex flex-col h-screen">
<header class="h-12 bg-[#333333] flex items-center justify-between px-4 border-b border-[#252526]">
<div class="flex items-center gap-3">
<div class="text-blue-500 text-xl"><i class="fa-solid fa-microchip"></i></div>
<span class="font-semibold text-white tracking-wide">ElectroGen <span class="text-blue-400 text-xs uppercase bg-blue-900/30 px-2 py-0.5 rounded">AI Beta</span></span>
</div>
<div class="flex items-center bg-[#1e1e1e] rounded-md px-1 p-0.5 border border-[#444]">
<button class="px-3 py-1 text-xs rounded hover:bg-[#333] text-gray-300">File</button>
<button class="px-3 py-1 text-xs rounded hover:bg-[#333] text-gray-300">Edit</button>
<button class="px-3 py-1 text-xs rounded hover:bg-[#333] text-gray-300">View</button>
</div>
<div class="flex gap-3">
<button class="bg-[#2d2d2d] hover:bg-[#3a3a3a] text-white px-3 py-1.5 rounded text-sm transition flex items-center gap-2">
<i class="fa-solid fa-share-nodes"></i> Share
</button>
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-1.5 rounded text-sm font-medium transition flex items-center gap-2">
<i class="fa-solid fa-download"></i> Export
</button>
</div>
</header>
<main class="flex-1 flex overflow-hidden">
<section class="w-1/4 min-w-[300px] bg-[#252526] border-r border-[#333] flex flex-col">
<div class="p-3 border-b border-[#333] flex justify-between items-center">
<span class="text-xs font-bold uppercase text-gray-400">AI Assistant</span>
<button class="text-gray-400 hover:text-white"><i class="fa-solid fa-ellipsis"></i></button>
</div>
<div id="chat-history" class="flex-1 overflow-y-auto p-4 space-y-4">
<div class="flex gap-3">
<div class="w-8 h-8 rounded bg-blue-600 flex items-center justify-center shrink-0">
<i class="fa-solid fa-robot text-white text-xs"></i>
</div>
<div class="bg-[#333] p-3 rounded-lg text-sm text-gray-200 shadow-sm">
Привет! Я твой инженерный ИИ. Опиши устройство, которое хочешь создать, и я сгенерирую схему и код.
</div>
</div>
</div>
<div class="p-4 bg-[#252526] border-t border-[#333]">
<div class="relative">
<textarea id="prompt-input" rows="3" class="w-full bg-[#3c3c3c] text-white text-sm rounded p-3 pr-10 focus:outline-none focus:ring-1 focus:ring-blue-500 resize-none placeholder-gray-500" placeholder="Например: Схема Arduino с датчиком DHT11..."></textarea>
<button id="send-btn" class="absolute bottom-2 right-2 text-gray-400 hover:text-blue-400 transition">
<i class="fa-solid fa-paper-plane"></i>
</button>
</div>
<div class="flex gap-2 mt-2">
<button class="text-xs bg-[#333] hover:bg-[#444] px-2 py-1 rounded text-gray-400 transition"><i class="fa-solid fa-image"></i> Фото детали</button>
<button class="text-xs bg-[#333] hover:bg-[#444] px-2 py-1 rounded text-gray-400 transition"><i class="fa-solid fa-wand-magic-sparkles"></i> Оптимизировать</button>
</div>
</div>
</section>
<section class="flex-1 flex flex-col relative bg-[#1e1e1e]">
<div class="h-10 bg-[#2d2d2d] flex items-center justify-between px-4 border-b border-[#333]">
<div class="flex gap-1 bg-[#1e1e1e] p-0.5 rounded">
<button class="px-3 py-1 text-xs bg-[#333] text-white rounded shadow-sm">Breadboard</button>
<button class="px-3 py-1 text-xs text-gray-400 hover:text-white rounded">Schematic</button>
<button class="px-3 py-1 text-xs text-gray-400 hover:text-white rounded">PCB</button>
</div>
<div class="flex items-center gap-4">
<div class="text-xs text-gray-500">Zoom: 100%</div>
<button class="text-green-500 hover:text-green-400 transition flex items-center gap-1.5 bg-green-900/20 px-3 py-1 rounded border border-green-900/50">
<i class="fa-solid fa-play text-xs"></i> <span class="text-xs font-bold">Simulate</span>
</button>
</div>
</div>
<div id="canvas-area" class="flex-1 grid-bg relative overflow-hidden flex items-center justify-center">
<div id="empty-state" class="text-center opacity-30 select-none">
<i class="fa-solid fa-bezier-curve text-6xl mb-4"></i>
<p>Рабочая область пуста</p>
</div>
<div id="workspace-content" class="hidden relative w-full h-full">
<div class="component-card absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-64 h-40 bg-teal-700 rounded-md border-2 border-teal-600 flex flex-col p-2">
<div class="flex justify-between items-start mb-4">
<span class="text-xs font-bold text-white/80 tracking-widest">ARDUINO</span>
<span class="text-[10px] text-white/60">UNO R3</span>
</div>
<div class="mt-auto flex justify-between px-1">
<div class="bg-black/40 h-4 w-full mx-1 rounded-sm"></div> <div class="bg-black/40 h-4 w-full mx-1 rounded-sm"></div>
</div>
<div class="absolute -left-1 top-4 w-3 h-8 bg-gray-400 border border-gray-500 rounded-l-sm"></div>
</div>
<div class="component-card absolute top-1/3 left-2/3 w-16 h-20 bg-blue-500 rounded p-1 flex items-center justify-center animate-bounce duration-1000">
<span class="text-xs font-bold text-white">DHT11</span>
</div>
<svg class="absolute top-0 left-0 w-full h-full pointer-events-none">
<path d="M 500 400 Q 600 300 700 350" stroke="#FF5722" stroke-width="4" fill="transparent" stroke-linecap="round"/>
</svg>
</div>
</div>
</section>
<section class="w-1/4 min-w-[350px] bg-[#1e1e1e] border-l border-[#333] flex flex-col">
<div class="flex border-b border-[#333]">
<button class="flex-1 py-2 text-xs font-medium text-white border-b-2 border-blue-500 bg-[#252526]">main.ino</button>
<button class="flex-1 py-2 text-xs font-medium text-gray-500 hover:bg-[#252526] hover:text-gray-300">components.json</button>
<button class="flex-1 py-2 text-xs font-medium text-gray-500 hover:bg-[#252526] hover:text-gray-300">Serial Monitor</button>
</div>
<div class="flex-1 overflow-auto flex bg-[#1e1e1e] pt-2 code-font text-sm">
<div class="line-numbers w-10 flex flex-col gap-0.5 text-xs pt-1">
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span>
</div>
<div class="flex-1 pt-1 pr-2" id="code-content">
<div class="text-gray-500">// Ожидание генерации кода...</div>
</div>
</div>
<div class="p-3 bg-[#252526] border-t border-[#333] flex justify-between items-center">
<div class="text-xs text-gray-500"><i class="fa-solid fa-check-circle text-green-500"></i> Ready to flash</div>
<button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1.5 rounded text-xs font-bold flex items-center gap-2">
<i class="fa-solid fa-bolt"></i> Upload to Board
</button>
</div>
</section>
</main>
<footer class="h-6 bg-[#007acc] flex items-center justify-between px-3 text-[10px] text-white">
<div class="flex gap-4">
<span><i class="fa-solid fa-code-branch"></i> main*</span>
<span><i class="fa-solid fa-circle-xmark"></i> 0 Errors</span>
<span><i class="fa-solid fa-triangle-exclamation"></i> 0 Warnings</span>
</div>
<div class="flex gap-4">
<span>Arduino Uno on COM3</span>
<span>UTF-8</span>
<span>C++</span>
</div>
</footer>
<script>
const input = document.getElementById('prompt-input');
const sendBtn = document.getElementById('send-btn');
const chatHistory = document.getElementById('chat-history');
const codeContent = document.getElementById('code-content');
const workspaceContent = document.getElementById('workspace-content');
const emptyState = document.getElementById('empty-state');
// Fake Code Snippet
const generatedCode = `
<span class="syntax-comment">// Подключение библиотеки датчика</span>
<span class="syntax-keyword">#include</span> <span class="syntax-string"><DHT.h></span>
<span class="syntax-keyword">#define</span> DHTPIN 2
<span class="syntax-keyword">#define</span> DHTTYPE DHT11
<span class="syntax-var">DHT</span> dht(DHTPIN, DHTTYPE);
<span class="syntax-keyword">void</span> <span class="syntax-func">setup</span>() {
<span class="syntax-func">Serial</span>.<span class="syntax-func">begin</span>(<span class="syntax-num">9600</span>);
dht.<span class="syntax-func">begin</span>();
}
<span class="syntax-keyword">void</span> <span class="syntax-func">loop</span>() {
<span class="syntax-func">delay</span>(<span class="syntax-num">2000</span>);
<span class="syntax-keyword">float</span> h = dht.<span class="syntax-func">readHumidity</span>();
<span class="syntax-keyword">float</span> t = dht.<span class="syntax-func">readTemperature</span>();
<span class="syntax-func">Serial</span>.<span class="syntax-func">print</span>(<span class="syntax-string">"Humidity: "</span>);
<span class="syntax-func">Serial</span>.<span class="syntax-func">print</span>(h);
}`;
function addMessage(text, sender) {
const div = document.createElement('div');
div.className = "flex gap-3 animate-fade-in";
if(sender === 'user') {
div.innerHTML = `
<div class="bg-[#3e3e42] p-3 rounded-lg text-sm text-white shadow-sm ml-auto max-w-[85%]">
${text}
</div>
<div class="w-8 h-8 rounded bg-gray-500 flex items-center justify-center shrink-0">
<i class="fa-solid fa-user text-white text-xs"></i>
</div>
`;
} else {
div.innerHTML = `
<div class="w-8 h-8 rounded bg-blue-600 flex items-center justify-center shrink-0">
<i class="fa-solid fa-robot text-white text-xs"></i>
</div>
<div class="bg-[#333] p-3 rounded-lg text-sm text-gray-200 shadow-sm max-w-[90%]">
${text}
</div>
`;
}
chatHistory.appendChild(div);
chatHistory.scrollTop = chatHistory.scrollHeight;
}
function handleSend() {
const text = input.value.trim();
if(!text) return;
// 1. Add User Message
addMessage(text, 'user');
input.value = '';
// 2. Simulate AI Thinking
setTimeout(() => {
// 3. Add AI Response
addMessage(`Понял! Собираю схему для запроса: "${text}".<br><br>Добавил <b>Arduino Uno</b> и <b>датчик DHT11</b>. Код уже готов справа.`, 'ai');
// 4. Update UI (The Magic)
emptyState.classList.add('hidden');
workspaceContent.classList.remove('hidden');
codeContent.innerHTML = `<div class="flex flex-col gap-0.5">${generatedCode}</div>`;
}, 1000);
}
sendBtn.addEventListener('click', handleSend);
input.addEventListener('keypress', (e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
handleSend();
}
});
</script>
</body>
</html>