Spaces:

Alim111
/

codecraft-ai-assistant-pro

Running

App Files Files Community

Alim111 commited on Oct 17, 2025

Commit

69f9fa4

verified ·

1 Parent(s): b275748

Fixt code

Browse files

Files changed (2) hide show

README.md +9 -5
index.html +567 -19

README.md CHANGED Viewed

@@ -1,10 +1,14 @@
 ---
-title: Codecraft Ai Assistant Pro
-emoji: 🏢
-colorFrom: indigo
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: CodeCraft AI Assistant Pro 🤖
+colorFrom: pink
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -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]*?)(?=\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', '#