Ə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ÜŞ -->
0b1ce36
verified
| <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 ({ | |
| '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' | |
| })[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', '# |