AI Code Analyzer Pro
`,
css: `Вставте ваш CSS код тут для аналізу...
Приклад:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}`
};
textarea.placeholder = placeholders[language] || placeholders.python;
this.updateCodePreview();
}
async analyzeCode() {
const code = document.getElementById('codeInput').value.trim();
const language = document.getElementById('language').value;
if (!code) {
alert('Будь ласка, введіть код для аналізу');
return;
}
this.setLoading(true);
try {
// Simulate API call delay
await new Promise(resolve => setTimeout(resolve, 2000));
// Mock analysis results
const mockResults = this.generateMockResults(code, language);
this.displayResults(mockResults);
} catch (error) {
console.error('Помилка аналізу:', error);
alert('Виникла помилка під час аналізу коду. Спробуйте ще раз.');
} finally {
this.setLoading(false);
}
}
generateMockResults(code, language) {
const lines = code.split('\n').length;
const functions = (code.match(/function|def |class /g) || []).length;
const classes = (code.match(/class |\.class/g) || []).length;
const score = Math.floor(Math.random() * 40) + 60; // Score between 60-100
const issues = [
{ type: 'Стиль', message: 'Рекомендується використовувати більш описові назви змінних' },
{ type: 'Продуктивність', message: 'Можна оптимізувати цикли для кращої швидкості' },
{ type: 'Безпека', message: 'Додайте валідацію вхідних параметрів' }
];
const recommendations = [
{
title: 'Покращення читабельності',
description: 'Додайте коментарі до складних частин коду'
},
{
title: 'Оптимізація',
description: 'Розгляньте можливість використання більш ефективних алгоритмів'
},
{
title: 'Тестування',
description: 'Додайте unit-тести для критичних функцій'
}
];
return {
score,
language,
metrics: {
lines,
functions,
classes,
complexity: Math.floor(Math.random() * 10) + 1
},
issues: issues.slice(0, Math.floor(Math.random() * 3) + 1),
recommendations: recommendations.slice(0, Math.floor(Math.random() * 3) + 1)
};
}
displayResults(results) {
this.analysisResults = results;
// Show results container
document.getElementById('resultsContainer').style.display = 'none';
document.getElementById('resultsContent').style.display = 'block';
// Update language badge
const badge = document.getElementById('languageBadge');
badge.textContent = results.language.toUpperCase();
badge.style.display = 'inline-block';
// Update overview
document.getElementById('scoreNumber').textContent = results.score;
document.getElementById('scoreProgress').style.width = results.score + '%';
document.getElementById('totalIssues').textContent = results.issues.length;
document.getElementById('totalRecommendations').textContent = results.recommendations.length;
// Update metrics
document.getElementById('linesCount').textContent = results.metrics.lines;
document.getElementById('functionsCount').textContent = results.metrics.functions;
document.getElementById('classesCount').textContent = results.metrics.classes;
document.getElementById('complexityScore').textContent = results.metrics.complexity;
// Update issues
const issuesList = document.getElementById('issuesList');
issuesList.innerHTML = '';
results.issues.forEach(issue => {
const li = document.createElement('li');
li.className = 'issue-item';
li.innerHTML = `
${issue.type}
${issue.message}
`;
issuesList.appendChild(li);
});
// Update recommendations
const recommendationsList = document.getElementById('recommendationsList');
recommendationsList.innerHTML = '';
results.recommendations.forEach(rec => {
const li = document.createElement('li');
li.className = 'recommendation-item';
li.innerHTML = `
${rec.title}
${rec.description}
`;
recommendationsList.appendChild(li);
});
}
switchTab(tabName) {
// Update tab buttons
document.querySelectorAll('.tab-btn').forEach(btn => {
btn.classList.remove('active');
});
document.querySelector(`[data-tab="${tabName}"]`).classList.add('active');
// Update tab content
document.querySelectorAll('.tab-content').forEach(content => {
content.classList.remove('active');
});
document.getElementById(tabName).classList.add('active');
}
setLoading(isLoading) {
const btn = document.getElementById('analyzeBtn');
if (isLoading) {
btn.disabled = true;
btn.innerHTML = `
Аналізую код...
`;
} else {
btn.disabled = false;
btn.innerHTML = `
🔍
Проаналізувати код
`;
}
}
}
// Initialize the analyzer when page loads
document.addEventListener('DOMContentLoaded', () => {
new CodeAnalyzer();
});
