|
|
<!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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="glass-effect rounded-3xl shadow-2xl overflow-hidden"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="min-h-[500px]"> |
|
|
|
|
|
<div id="tab-content-asistant" class="tab-content active p-6"> |
|
|
<div class="max-w-2xl mx-auto"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.tab-btn').forEach(btn => { |
|
|
btn.addEventListener('click', () => { |
|
|
|
|
|
document.querySelectorAll('.tab-btn').forEach(b => { |
|
|
b.classList.remove('active'); |
|
|
b.querySelector('div:last-child').classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
btn.classList.add('active'); |
|
|
btn.querySelector('div:last-child').classList.remove('hidden'); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.tab-content').forEach(tab => { |
|
|
tab.classList.add('hidden'); |
|
|
tab.classList.remove('active'); |
|
|
}); |
|
|
|
|
|
|
|
|
const tabId = btn.getAttribute('data-tab'); |
|
|
document.getElementById(`tab-content-${tabId}`).classList.remove('hidden'); |
|
|
document.getElementById(`tab-content-${tabId}`).classList.add('active'); |
|
|
|
|
|
|
|
|
if (tabId === 'projects') { |
|
|
updateGameOutput(); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
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(); |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
function showCopyToast() { |
|
|
const toast = document.getElementById('copy-toast'); |
|
|
toast.classList.remove('hidden'); |
|
|
setTimeout(() => { |
|
|
toast.classList.add('hidden'); |
|
|
}, 2000); |
|
|
} |
|
|
|
|
|
|
|
|
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); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
['html-code', 'css-code', 'js-code'].forEach(id => { |
|
|
document.getElementById(id).addEventListener('input', () => { |
|
|
if (document.querySelector('.tab-btn.active').getAttribute('data-tab') === 'projects') { |
|
|
updateGameOutput(); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('chat-form').addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
const input = document.getElementById('chat-input'); |
|
|
const message = input.value.trim(); |
|
|
|
|
|
if (message) { |
|
|
|
|
|
addMessage(message, 'user'); |
|
|
input.value = ''; |
|
|
|
|
|
|
|
|
simulateAIResponse(message); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
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(); |
|
|
}); |
|
|
|
|
|
|
|
|
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 = ''; |
|
|
|
|
|
|
|
|
simulateOptimizedAIResponse(message); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
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'); |
|
|
|
|
|
|
|
|
if (response.includes('html')) { |
|
|
const htmlMatch = response.match(/html\n([\s\S]*?)(?=\n```|$)/); |
|
|
if (htmlMatch) document.getElementById('html-code').value = htmlMatch[1].trim(); |
|
|
|
|
|
const cssMatch = response.match(/css\n([\s\S]*?)(?=\n```|$)/); |
|
|
if (cssMatch) document.getElementById('css-code').value = cssMatch[1].trim(); |
|
|
|
|
|
const jsMatch = response.match(/javascript\n([\s\S]*?)(?=\n```|$)/); |
|
|
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); |
|
|
} |
|
|
|
|
|
|
|
|
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', '# |
