Əvəl düzəldimiz bişey varıydı onu gelişdireçem prosdu funksyoda əlavə edək indi vereçem kod replit kimidi AI dı prosdu öz səfin tapamır bəzi səflər və.s və zəifdi sıfırdan edəçək bənzər prosdu ki birşey var ki AI belə işləsin normalda sən kimi kod yaza bilirde prosdu kodun sef olup olmadığın gərəy biz deyey elə eləki AI özü başa düşsün sefin kod düz olana qeder yazın yazıp qutaranda görüne baxsın kod düz işdiyir ya yox bəzən kod düz olsada görünüm səf ola bilir bilirsən bunuda başa düşsün kod budu ilk html <!-- ASISTANT TAB - YENİ GÖRÜNÜŞ -->

<div id="tab-content-asistant" class="tab-content active">
<div id="ai-chat-ux">
<div class="ai-header">
<div class="ai-avatar" id="ai-avatar">
🤖
</div>
</div>
<div class="ai-chat-log-wrap">
<div id="chat-log"></div>
</div>
<form id="chat-form" autocomplete="off" class="ai-chat-input-wrap">
<button type="button" id="reset-all" class="reset-btn">Reset</button>
<input type="text" id="chat-input" placeholder="AI-ya yazın..." autocomplete="off">
<button type="submit" class="send-btn" id="send-btn" tabindex="0">
<span class="arrow-up"></span>
</button>
<button type="button" id="prompt-optimize" class="detail-btn">Detallı Göndər</button>
</form>
</div>
</div>

<!-- PROJECTS TAB (OYUN/LAYIHƏ) -->
<div id="tab-content-projects" class="tab-content">
<div id="output-game" class="output-full"></div>
</div>

<!-- CODE TAB -->
<div id="tab-content-code" class="tab-content">
<div id="code-editors">
<div class="code-block">
<label>HTML kodu <button class="copy-btn" data-target="html-code">Copy</button></label>
<textarea id="html-code" placeholder="HTML kodu"></textarea>
</div>
<div class="code-block">
<label>CSS kodu <button class="copy-btn" data-target="css-code">Copy</button></label>
<textarea id="css-code" placeholder="CSS kodu"></textarea>
</div>
<div class="code-block">
<label>JavaScript kodu <button class="copy-btn" data-target="js-code">Copy</button></label>
<textarea id="js-code" placeholder="JavaScript kodu"></textarea>
</div>
</div>
</div>

<!-- BOTTOM NAVIGATION -->
<div id="bottom-nav">
<button data-tab="asistant" class="nav-btn active">🤖</button>
<button data-tab="projects" class="nav-btn">🕹️</button>
<button data-tab="code" class="nav-btn">🖥️</button>
</div>
<div id="copy-toast">Kopyalandı!</div>

CSS body {
font-family: Arial, sans-serif;
background: #f7f7f7;
margin: 0;
padding: 0;
min-height: 100vh;
box-sizing: border-box;
}
.tab-content {
display: none;
padding-bottom: 70px;
}
.tab-content.active { display: block; }

/* ======= AI ASISTANT YENİ GÖRÜNÜŞ ======= */
#ai-chat-ux {
max-width: 480px;
margin: 0 auto;
min-height: 68vh;
display: flex;
flex-direction: column;
background: #fff;
border-radius: 13px;
box-shadow: 0 4px 24px #0002;
position: relative;
}
.ai-header {
display: flex;
justify-content: center;
align-items: center;
padding: 15px 0 5px 0;
}
.ai-avatar {
width: 64px;
height: 64px;
background: #fff8eb;
border: 3px solid #ffa340;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
margin-bottom: 5px;
}
.ai-chat-log-wrap {
flex: 1;
background: #f6f6f6;
border: 2.5px solid #aaa;
border-radius: 15px;
margin: 0 10px 0 10px;
padding: 8px 5px;
min-height: 120px;
overflow-y: auto;
transition: height 0.3s;
box-sizing: border-box;
}
#chat-log {
font-size: 1.09em;
min-height: 30px;
padding-bottom: 20px;
word-break: break-word;
}
.ai-chat-input-wrap {
display: flex;
align-items: center;
border: 2.5px solid #181818;
border-radius: 15px;
background: #fff;
margin: 15px 10px 18px 10px;
padding: 8px 6px 8px 6px;
position: relative;
gap: 6px;
flex-wrap: wrap;
}
#chat-input {
flex: 1;
border: none;
font-size: 1.15em;
background: transparent;
min-height: 38px;
max-height: 120px;
padding: 8px 8px;
outline: none;
font-family: inherit;
transition: min-height 0.2s;
}
.send-btn {
background: #0a84ff;
width: 49px;
height: 49px;
border-radius: 50%;
border: none;
margin-left: 5px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.18s;
box-shadow: 0 2px 7px #0a84ff22;
}
.send-btn:active { background: #005fa3; }
.arrow-up {
display: inline-block;
width: 31px;
height: 31px;
border-radius: 50%;
background: #fff;
position: relative;
}
.arrow-up:after {
content: '';
display: block;
width: 0; height: 0;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-bottom: 17px solid #0a84ff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-60%);
}
.reset-btn {
background: #fff0f0;
color: #e43;
border: 2px solid #e43;
border-radius: 8px;
font-size: 1em;
margin-right: 3px;
padding: 6px 11px 6px 11px;
cursor: pointer;
font-weight: 500;
transition: background 0.16s, color 0.16s;
}
.reset-btn:active {
background: #e43;
color: #fff;
}
.detail-btn {
background: #15a04a;
color: #fff;
border: none;
border-radius: 7px;
padding: 8px 13px;
font-size: 1em;
margin-left: 6px;
cursor: pointer;
transition: background 0.16s;
}
.detail-btn:active {
background: #0d7532;
}

/* ===== Qalan kodlar dəyişməzdir ===== */
#output-game.output-full {
width: 100vw;
min-height: calc(100vh - 70px);
background: #fff;
border: none;
border-radius: 0;
margin: 0;
padding: 0;
overflow: auto;
display: flex;
align-items: center;
justify-content: center;
}
#code-editors {
display: flex;
flex-direction: column;
gap: 12px;
padding: 12px 10px 6px 10px;
background: #f2f2f2;
}
.code-block label {
font-weight: bold;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 2px;
}
#code-editors textarea {
width: 100%;
min-height: 120px;
font-family: monospace;
font-size: 15px;
border-radius: 6px;
border: 1px solid #ccc;
resize: vertical;
padding: 8px;
margin-bottom: 8px;
box-sizing: border-box;
}
.copy-btn {
background: #0a84ff;
color: #fff;
border: none;
border-radius: 4px;
padding: 2px 9px;
font-size: 13px;
cursor: pointer;
margin-left: 10px;
}
.copy-btn:active {
background: #005fa3;
}
#bottom-nav {
position: fixed;
left: 0; right: 0; bottom: 0;
height: 60px;
background: #fff;
border-top: 1.5px solid #eee;
display: flex;
justify-content: space-around;
align-items: center;
z-index: 100;
box-shadow: 0 -2px 12px #0001;
}
.nav-btn {
flex: 1;
font-size: 30px;
background: none;
border: none;
outline: none;
padding: 0;
color: #888;
transition: color 0.2s;
height: 100%;
}
.nav-btn.active, .nav-btn:active {
color: #0a84ff;
background: #e3f0ff;
border-radius: 8px 8px 0 0;
}
#copy-toast {
display: none;
position: fixed;
bottom: 80px;
left: 50%;
transform: translateX(-50%);
background: #0a84ff;
colo r: #fff;

Js
padding: 7px 18px;
border-radius: 8px;
font-size: 15px;
z-index: 9999;
box-shadow: 0 2px 10px #0001;
}


@media
(min-width: 700px) {
#code-editors { flex-direction: row; }
#code-editors textarea { min-height: 200px; }
}


Js // --- TAB NAVIGATION ---
document.querySelectorAll('.nav-btn').forEach(btn => {
btn.onclick = () => {
document.querySelectorAll('.nav-btn').forEach(b=>b.classList.remove('active'));
btn.classList.add('active');
document.querySelectorAll('.tab-content').forEach(tab=>tab.classList.remove('active'));
document.getElementById('tab-content-' + btn.dataset.tab).classList.add('active');
if (btn.dataset.tab === 'projects') updateGameOutput();
}
});

function updateGameOutput() {
const html = document.getElementById('html-code').value;
const css = document.getElementById('css-code').value;
const js = document.getElementById('js-code').value;
const code = `
<html>
<head><style>${css}</style></head>
<body>${html}
<script>
try {
${js}
} catch(e) {
parent.postMessage({type:'js-error', error: e.message}, "*");
}
<\/script>
</body>
</html>`;
let outEl = document.getElementById('output-game');
outEl.innerHTML = "";
let iframe = document.createElement('iframe');
iframe.style.width = "100vw";
iframe.style.height = "calc(100vh - 70px)";
iframe.style.border = "none";
iframe.srcdoc = code;
outEl.appendChild(iframe);
}

['html-code','css-code','js-code'].forEach(id=>{
document.getElementById(id).oninput = () => {
if (document.querySelector('.nav-btn.active').dataset.tab === 'projects') {
updateGameOutput();
}
};
});

document.querySelectorAll('.copy-btn').forEach(btn => {
btn.onclick = function(e) {
e.preventDefault();
let target = btn.getAttribute("data-target");
let code = document.getElementById(target).value;
navigator.clipboard.writeText(code);
showCopyToast();
};
});
let toastTimeout = null;
function showCopyToast() {
const toast = document.getElementById('copy-toast');
toast.style.display = "block";
clearTimeout(toastTimeout);
toastTimeout = setTimeout(() => {
toast.style.display = "none";
}, 1200);
}

// --- AI CHAT (OpenRouter API) ---
const systemPrompt = "Sən Azərbaycan dilində proqramlaşdırma və oyun/kod köməkçisisən. İstifadəçinin istədiyi kodu tam başa düş və kodu tam işlək və düzgün şəkildə, yalnız uyğun kod bloklarında (```html, ```css, ```js) ver. Əgər promptda qeyri-müəyyənlik varsa, istifadəçidən daha aydın soruş. Kod səhvlərini özün yoxla və düzəlişi ayrıca kod kimi ver. Hər zaman çox dəqiq ol.";

// Prompt-un sonuna avtomatik kod blok təlimatı əlavə edir
function appendCodeBlockInstruction(prompt) {
const instruction = 'HTML, CSS və JS kodunu tam, ayrıca və başlıqlı kod bloklarında göndər.';
if (prompt.includes(instruction)) return prompt;
return prompt + "\n\n" + instruction;
}

async function ge

README.md

@@ -1,10 +1,14 @@
 ---
-title: Undefined
-emoji: 🌍
-colorFrom: indigo
-colorTo: indigo
+title: undefined
+colorFrom: green
+colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).
+      

index.html

@@ -1,19 +1,567 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="az">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CodeCraft AI Assistant Pro</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#f0f9ff',
+                            100: '#e0f2fe',
+                            200: '#bae6fd',
+                            300: '#7dd3fc',
+                            400: '#38bdf8',
+                            500: '#0ea5e9',
+                            600: '#0284c7',
+                            700: '#0369a1',
+                            800: '#075985',
+                            900: '#0c4a6e',
+                        },
+                        secondary: {
+                            50: '#fdf4ff',
+                            100: '#fae8ff',
+                            200: '#f5d0fe',
+                            300: '#f0abfc',
+                            400: '#e879f9',
+                            500: '#d946ef',
+                            600: '#c026d3',
+                            700: '#a21caf',
+                            800: '#86198f',
+                            900: '#701a75',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        
+        body {
+            font-family: 'Inter', sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+        }
+        
+        .glass-effect {
+            background: rgba(255, 255, 255, 0.25);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.18);
+        }
+        
+        .neon-glow {
+            box-shadow: 0 0 20px rgba(14, 165, 233, 0.3);
+        }
+        
+        .code-block pre {
+            background: #1e293b;
+            color: #e2e8f0;
+            border-radius: 8px;
+            padding: 16px;
+            margin: 8px 0;
+            overflow-x: auto;
+            font-family: 'Fira Code', monospace;
+            position: relative;
+        }
+        
+        .typing-indicator {
+            display: inline-flex;
+            align-items: center;
+            gap: 4px;
+        }
+        
+        .typing-dot {
+            width: 8px;
+            height: 8px;
+            background: #0ea5e9;
+            border-radius: 50%;
+            animation: typing 1.4s infinite ease-in-out;
+        }
+        
+        .typing-dot:nth-child(1) { animation-delay: -0.32s; }
+        .typing-dot:nth-child(2) { animation-delay: -0.16s; }
+        
+        @keyframes typing {
+            0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
+            40% { transform: scale(1); opacity: 1; }
+        }
+        
+        .message-bubble {
+            max-width: 85%;
+            padding: 12px 16px;
+            border-radius: 18px;
+            margin: 8px 0;
+            word-wrap: break-word;
+        }
+        
+        .user-message {
+            background: linear-gradient(135deg, #0ea5e9, #38bdf8);
+            color: white;
+            margin-left: auto;
+            border-bottom-right-radius: 4px;
+        }
+        
+        .ai-message {
+            background: rgba(255, 255, 255, 0.9);
+            color: #1f2937;
+            margin-right: auto;
+            border-bottom-left-radius: 4px;
+        }
+        
+        .floating-animation {
+            animation: float 6s ease-in-out infinite;
+        }
+        
+        @keyframes float {
+            0%, 100% { transform: translateY(0px); }
+            50% { transform: translateY(-20px); }
+        }
+        
+        .pulse-ring {
+            animation: pulse-ring 2s ease-out infinite;
+        }
+        
+        @keyframes pulse-ring {
+            0% { transform: scale(0.8); opacity: 1; }
+            100% { transform: scale(2.2); opacity: 0; }
+        }
+    </style>
+</head>
+<body class="min-h-screen flex items-center justify-center p-4">
+    <div class="w-full max-w-4xl">
+        <!-- Header Section -->
+        <div class="text-center mb-8">
+            <div class="inline-block relative">
+                <div class="w-24 h-24 bg-gradient-to-br from-primary-400 to-secondary-500 rounded-2xl flex items-center justify-center text-white text-4xl mb-4 mx-auto floating-animation neon-glow">
+                    🤖
+                </div>
+                <div class="absolute inset-0 rounded-2xl pulse-ring border-2 border-primary-400"></div>
+            </div>
+            <h1 class="text-4xl font-bold text-white mb-2">CodeCraft AI Assistant Pro</h1>
+            <p class="text-primary-100 text-lg">Azərbaycan dilində proqramlaşdırma köməkçisi</p>
+        </div>
+
+        <!-- Main Container -->
+        <div class="glass-effect rounded-3xl shadow-2xl overflow-hidden">
+            <!-- Tab Navigation -->
+            <div class="flex bg-white/20 border-b border-white/20">
+                <button data-tab="asistant" class="flex-1 py-4 text-white font-medium transition-all duration-300 relative tab-btn active">
+                    <div class="flex items-center justify-center gap-2">
+                        <i data-feather="message-circle"></i>
+                        <span>Köməkçi</span>
+                    </div>
+                    <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-16 h-1 bg-primary-400 rounded-t-full transition-all duration-300"></div>
+                </button>
+                <button data-tab="projects" class="flex-1 py-4 text-white/70 font-medium transition-all duration-300 relative tab-btn">
+                    <div class="flex items-center justify-center gap-2">
+                        <i data-feather="play"></i>
+                        <span>Nümayiş</span>
+                    </div>
+                </button>
+                <button data-tab="code" class="flex-1 py-4 text-white/70 font-medium transition-all duration-300 relative tab-btn">
+                    <div class="flex items-center justify-center gap-2">
+                        <i data-feather="code"></i>
+                        <span>Kodlar</span>
+                    </div>
+                </button>
+            </div>
+
+            <!-- Tab Contents -->
+            <div class="min-h-[500px]">
+                <!-- Assistant Tab -->
+                <div id="tab-content-asistant" class="tab-content active p-6">
+                    <div class="max-w-2xl mx-auto">
+                        <!-- Chat Header -->
+                        <div class="flex items-center gap-4 mb-6">
+                            <div class="w-12 h-12 bg-gradient-to-br from-primary-400 to-secondary-500 rounded-xl flex items-center justify-center text-white text-2xl">
+                                <i data-feather="cpu"></i>
+                            </div>
+                            <div>
+                                <h3 class="text-white font-semibold text-lg">AI Köməkçi</h3>
+                                <p class="text-primary-100 text-sm">HTML, CSS, JavaScript kodları yaradın</p>
+                            </div>
+                        </div>
+
+                        <!-- Chat Log -->
+                        <div id="chat-log" class="bg-white/10 rounded-2xl p-4 mb-4 min-h-[300px] max-h-[400px] overflow-y-auto">
+                            <div class="ai-message message-bubble">
+                                Salam! Mən sizin proqramlaşdırma köməkçinizəm. 📝<br>
+                                HTML, CSS və JavaScript kodları yarada bilərəm. Nə etmək istəyirsiniz?
+                            </div>
+                        </div>
+
+                        <!-- Chat Input -->
+                        <form id="chat-form" class="flex gap-2">
+                            <button type="button" id="reset-all" class="px-4 py-3 bg-red-500/20 text-red-100 rounded-xl hover:bg-red-500/30 transition-colors border border-red-400/30">
+                                <i data-feather="refresh-cw" class="w-4 h-4"></i>
+                            </button>
+                            <div class="flex-1 relative">
+                                <input type="text" id="chat-input" placeholder="AI-ya yazın..." 
+                                       class="w-full px-4 py-3 bg-white/20 text-white placeholder-white/60 rounded-xl border border-white/20 focus:border-primary-400 focus:outline-none transition-colors">
+                            </div>
+                            <button type="button" id="prompt-optimize" class="px-4 py-3 bg-secondary-500 text-white rounded-xl hover:bg-secondary-600 transition-colors">
+                                <i data-feather="edit-3" class="w-4 h-4"></i>
+                            </button>
+                            <button type="submit" class="px-4 py-3 bg-primary-500 text-white rounded-xl hover:bg-primary-600 transition-colors">
+                                <i data-feather="send" class="w-4 h-4"></i>
+                            </button>
+                        </form>
+                    </div>
+                </div>
+
+                <!-- Projects Tab -->
+                <div id="tab-content-projects" class="tab-content hidden">
+                    <div id="output-game" class="output-full min-h-[500px] flex items-center justify-center bg-gray-900">
+                        <div class="text-center text-white">
+                            <i data-feather="play-circle" class="w-16 h-16 mx-auto mb-4 text-primary-400"></i>
+                            <h3 class="text-xl font-semibold mb-2">Kod Nümayişi</h3>
+                            <p class="text-gray-300">Kodlar bölməsində yazılan kodlar burada nümayiş olunacaq</p>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Code Tab -->
+                <div id="tab-content-code" class="tab-content hidden p-6">
+                    <div class="grid md:grid-cols-3 gap-6">
+                        <div class="code-block">
+                            <div class="flex items-center justify-between mb-3">
+                                <label class="text-white font-semibold flex items-center gap-2">
+                                    <i data-feather="file-text" class="w-4 h-4"></i>
+                                    HTML
+                                </label>
+                                <button class="copy-btn px-3 py-1 bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition-colors text-sm" data-target="html-code">
+                                    Köçür
+                                </button>
+                            </div>
+                            <textarea id="html-code" placeholder="HTML kodu burada görünəcək" 
+                                      class="w-full h-64 bg-gray-800 text-gray-100 rounded-lg p-4 font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-primary-500"></textarea>
+                        </div>
+                        
+                        <div class="code-block">
+                            <div class="flex items-center justify-between mb-3">
+                                <label class="text-white font-semibold flex items-center gap-2">
+                                    <i data-feather="pen-tool" class="w-4 h-4"></i>
+                                    CSS
+                                </label>
+                                <button class="copy-btn px-3 py-1 bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition-colors text-sm" data-target="css-code">
+                                    Köçür
+                                </button>
+                            </div>
+                            <textarea id="css-code" placeholder="CSS kodu burada görünəcək" 
+                                      class="w-full h-64 bg-gray-800 text-gray-100 rounded-lg p-4 font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-primary-500"></textarea>
+                        </div>
+                        
+                        <div class="code-block">
+                            <div class="flex items-center justify-between mb-3">
+                                <label class="text-white font-semibold flex items-center gap-2">
+                                    <i data-feather="code" class="w-4 h-4"></i>
+                                    JavaScript
+                                </label>
+                                <button class="copy-btn px-3 py-1 bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition-colors text-sm" data-target="js-code">
+                                    Köçür
+                                </button>
+                            </div>
+                            <textarea id="js-code" placeholder="JavaScript kodu burada görünəcək" 
+                                      class="w-full h-64 bg-gray-800 text-gray-100 rounded-lg p-4 font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-primary-500"></textarea>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Toast Notification -->
+        <div id="copy-toast" class="fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-primary-500 text-white px-6 py-3 rounded-lg shadow-lg hidden z-50">
+            Kod köçürüldü! ✅
+        </div>
+    </div>
+
+    <script>
+        // Initialize Feather Icons
+        feather.replace();
+        
+        // Tab Navigation
+        document.querySelectorAll('.tab-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                // Remove active class from all tabs
+                document.querySelectorAll('.tab-btn').forEach(b => {
+                    b.classList.remove('active');
+                    b.querySelector('div:last-child').classList.add('hidden');
+                });
+                
+                // Add active class to clicked tab
+                btn.classList.add('active');
+                btn.querySelector('div:last-child').classList.remove('hidden');
+                
+                // Hide all tab contents
+                document.querySelectorAll('.tab-content').forEach(tab => {
+                    tab.classList.add('hidden');
+                    tab.classList.remove('active');
+                });
+                
+                // Show selected tab content
+                const tabId = btn.getAttribute('data-tab');
+                document.getElementById(`tab-content-${tabId}`).classList.remove('hidden');
+                document.getElementById(`tab-content-${tabId}`).classList.add('active');
+                
+                // Update preview if projects tab is selected
+                if (tabId === 'projects') {
+                    updateGameOutput();
+                }
+            });
+        });
+
+        // Copy functionality
+        document.querySelectorAll('.copy-btn').forEach(btn => {
+            btn.addEventListener('click', function() {
+                const target = this.getAttribute('data-target');
+                const code = document.getElementById(target).value;
+                navigator.clipboard.writeText(code).then(() => {
+                    showCopyToast();
+                });
+            });
+        });
+
+        // Toast notification
+        function showCopyToast() {
+            const toast = document.getElementById('copy-toast');
+            toast.classList.remove('hidden');
+            setTimeout(() => {
+                toast.classList.add('hidden');
+            }, 2000);
+        }
+
+        // Update game output preview
+        function updateGameOutput() {
+            const html = document.getElementById('html-code').value;
+            const css = document.getElementById('css-code').value;
+            const js = document.getElementById('js-code').value;
+            
+            const outputEl = document.getElementById('output-game');
+            if (html || css || js) {
+                const code = `
+                    <!DOCTYPE html>
+                    <html>
+                    <head>
+                        <style>${css}</style>
+                    </head>
+                    <body>${html}
+                        <script>
+                            try {
+                                ${js}
+                            } catch(e) {
+                                console.error('JavaScript error:', e);
+                            }
+                        <\/script>
+                    </body>
+                    </html>`;
+                
+                outputEl.innerHTML = '';
+                const iframe = document.createElement('iframe');
+                iframe.style.width = '100%';
+                iframe.style.height = '100%';
+                iframe.style.border = 'none';
+                iframe.srcdoc = code;
+                outputEl.appendChild(iframe);
+            }
+        }
+
+        // Real-time preview update
+        ['html-code', 'css-code', 'js-code'].forEach(id => {
+            document.getElementById(id).addEventListener('input', () => {
+                if (document.querySelector('.tab-btn.active').getAttribute('data-tab') === 'projects') {
+                    updateGameOutput();
+                }
+            });
+        });
+
+        // Chat functionality
+        document.getElementById('chat-form').addEventListener('submit', function(e) {
+            e.preventDefault();
+            const input = document.getElementById('chat-input');
+            const message = input.value.trim();
+            
+            if (message) {
+                // Add user message
+                addMessage(message, 'user');
+                input.value = '';
+                
+                // Simulate AI response
+                simulateAIResponse(message);
+            }
+        });
+
+        // Reset functionality
+        document.getElementById('reset-all').addEventListener('click', function() {
+            document.getElementById('chat-log').innerHTML = `
+                <div class="ai-message message-bubble">
+                    Salam! Mən sizin proqramlaşdırma köməkçinizəm. 📝<br>
+                    HTML, CSS və JavaScript kodları yarada bilərəm. Nə etmək istəyirsiniz?
+                </div>
+            `;
+            
+            ['html-code', 'css-code', 'js-code'].forEach(id => {
+                document.getElementById(id).value = '';
+            });
+            
+            updateGameOutput();
+        });
+
+        // Prompt optimize
+        document.getElementById('prompt-optimize').addEventListener('click', function() {
+            const input = document.getElementById('chat-input');
+            const message = input.value.trim();
+            
+            if (message) {
+                addMessage(message + ' (Detallı göndərildi)', 'user');
+                input.value = '';
+                
+                // Simulate optimized AI response
+                simulateOptimizedAIResponse(message);
+            }
+        });
+
+        // Helper functions
+        function addMessage(text, sender) {
+            const chatLog = document.getElementById('chat-log');
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `${sender}-message message-bubble`;
+            messageDiv.innerHTML = `<b>${sender === 'user' ? 'Siz' : 'AI'}:</b> ${escapeHTML(text)}`;
+            chatLog.appendChild(messageDiv);
+            chatLog.scrollTop = chatLog.scrollHeight;
+        }
+
+        function escapeHTML(str) {
+            return str.replace(/[&<>"']/g, function(m) {
+                return ({
+                    '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
+                })[m];
+            });
+        }
+
+        function simulateAIResponse(userMessage) {
+            const chatLog = document.getElementById('chat-log');
+            const typingDiv = document.createElement('div');
+            typingDiv.className = 'ai-message message-bubble';
+            typingDiv.innerHTML = '<div class="typing-indicator"><span>AI cavab hazırlayır</span><div class="typing-dot"></div><div class="typing-dot"></div><div class="typing-dot"></div></div>';
+            chatLog.appendChild(typingDiv);
+            chatLog.scrollTop = chatLog.scrollHeight;
+            
+            setTimeout(() => {
+                chatLog.removeChild(typingDiv);
+                
+                // Sample AI response based on user input
+                let response = '';
+                if (userMessage.toLowerCase().includes('html') || userMessage.toLowerCase().includes('css') || userMessage.toLowerCase().includes('javascript')) {
+                    response = `Sizin sorğunuza uyğun olaraq, aşağıdakı kodları təqdim edirəm:\n\n` +
+                              `**HTML kodu:**\n\`\`\`html\n<!DOCTYPE html>\n<html>\n<head>\n    <title>Salam Dünya</title>\n</head>\n<body>\n    <h1>Salam, Dünya!</h1>\n</body>\n</html>\n\`\`\`\n\n` +
+                              `**CSS kodu:**\n\`\`\`css\nbody {\n    font-family: Arial, sans-serif;\n    background: linear-gradient(135deg, #667eea, #764ba2);\n    margin: 0;\n    padding: 20px;\n}\n\nh1 {\n    color: white;\n    text-align: center;\n}\n\`\`\`\n\n` +
+                              `**JavaScript kodu:**\n\`\`\`javascript\ndocument.addEventListener('DOMContentLoaded', function() {\n    console.log('Salam Dünya proqramı işə düşdü!');\n    \n    const h1 = document.querySelector('h1');\n    h1.addEventListener('click', function() {\n        alert('Salam, Dünya!');\n    });\n});\n\`\`\``;
+                } else {
+                    response = `Sizin sorğunuzu başa düşdüm! Daha dəqiq kömək üçün aşağıdakı kimi sorğu verə bilərsiniz:\n\n` +
+                              `"Mənə bir navbar yaradın, HTML, CSS və JavaScript kodlarını ayrıca verin."\n\n` +
+                              `Və ya:\n\n` +
+                              `"Responsive kart dizaynı üçün kod yazın. HTML, CSS və JavaScript kodlarını tam verin."`;
+                }
+                
+                addMessage(response, 'ai');
+                
+                // Auto-fill code editors if code blocks are detected
+                if (response.includes('html')) {
+                    const htmlMatch = response.match(/html\n([\s\S]*?)/);
+                    if (htmlMatch) document.getElementById('html-code').value = htmlMatch[1].trim();
+                    
+                    const cssMatch = response.match(/css\n([\s\S]*?)/);
+                    if (cssMatch) document.getElementById('css-code').value = cssMatch[1].trim();
+                    
+                    const jsMatch = response.match(/javascript\n([\s\S]*?)/);
+                    if (jsMatch) document.getElementById('js-code').value = jsMatch[1].trim();
+                    
+                    updateGameOutput();
+                }
+            }, 2000);
+        }
+
+        function simulateOptimizedAIResponse(userMessage) {
+            const chatLog = document.getElementById('chat-log');
+            const typingDiv = document.createElement('div');
+            typingDiv.className = 'ai-message message-bubble';
+            typingDiv.innerHTML = '<div class="typing-indicator"><span>AI sorğunu optimallaşdırır</span><div class="typing-dot"></div><div class="typing-dot"></div><div class="typing-dot"></div></div>';
+            chatLog.appendChild(typingDiv);
+            chatLog.scrollTop = chatLog.scrollHeight;
+            
+            setTimeout(() => {
+                chatLog.removeChild(typingDiv);
+                
+                const optimizedPrompt = `Optimallaşdırılmış sorğu: "${userMessage}"\n\n` +
+                                      `Daha dəqiq cavab üçün sorğunu aşağıdakı kimi təkmilləşdirə bilərsiniz:\n\n` +
+                                      `"${userMessage}. HTML, CSS və JavaScript kodlarını tam, ayrıca və başlıqlı kod bloklarında göndərin."\n\n` +
+                                      `Bu formatda sorğu verdikdə, daha dəqiq və tam kodlar alacaqsınız.`;
+                
+                addMessage(optimizedPrompt, 'ai');
+            }, 1500);
+        }
+
+        // Initialize with sample code
+        document.addEventListener('DOMContentLoaded', function() {
+            const sampleHTML = `<!DOCTYPE html>
+<html lang="az">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Salam Dünya</title>
+</head>
+<body>
+    <h1>Salam, Dünya! 👋</h1>
+    <p>Bu, AI tərəfindən yaradılmış nümunə səhifədir.</p>
+</body>
+</html>`;
+
+            const sampleCSS = `body {
+    font-family: 'Inter', sans-serif;
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    margin: 0;
+    padding: 40px;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    text-align: center;
+}
+
+h1 {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+}
+
+p {
+    font-size: 1.2rem;
+    opacity: 0.9;
+}`;
+
+            const sampleJS = `document.addEventListener('DOMContentLoaded', function() {
+    console.log('Salam Dünya səhifəsi uğurla yükləndi!');
+    
+    const h1 = document.querySelector('h1');
+    h1.addEventListener('click', function() {
+        this.style.transform = 'scale(1.1)';
+        this.style.transition = 'transform 0.3s ease';
+        
+        setTimeout(() => {
+            this.style.transform = 'scale(1)';
+        }, 300);
+    });
+    
+    // Rəng dəyişmə effekti
+    let colorIndex = 0;
+    const colors = ['#ff6b6b', '#