Spaces:

Alim111
/

codecraft-ai-assistant-pro

Running

App Files Files Community

codecraft-ai-assistant-pro / index.html

Alim111

Fixt code

69f9fa4 verified 6 months ago

raw

history blame contribute delete

26.1 kB

	<!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 ({
	'&': '&', '<': '<', '>': '>', '"': '"', "'": '''
	})[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]*?)(?=\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);
	}

	// 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', '#