Html-Setup - это основа любого веб-сайта, словно фундамент дома, который необходимо заложить перед строительством стен. Это процесс создания начальной структуры HTML-документа, которая сообщает браузеру, как отображать ваш контент. Html-Setup включает в себя объявление DOCTYPE, тег html, секцию head и секцию body. Этот этап критически важен для любого веб-проекта - будь то создание сайта-портфолио, разработка блога, построение интернет-магазина, создание новостного сайта или проектирование социальной платформы. Без правильного Html-Setup ваш сайт будет напоминать библиотеку без каталогизации, где книги разбросаны в хаотичном порядке. В этом уроке вы научитесь создавать чистую и профессиональную HTML-структуру, правильно использовать базовые элементы и избегать распространенных ошибок. Эта основа позволит вам в дальнейшем добавлять CSS-стилизацию и JavaScript-функциональность. Освоение Html-Setup подобно изучению правильного формата письма - сначала нужно понять стандартную структуру, а затем персонализировать содержимое.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Мой Веб-сайт</title> <!-- Page title for browser tab -->
</head>
<body>
<h1>Добро пожаловать на мой сайт</h1> <!-- Main heading -->
<p>Это моя первая веб-страница!</p> <!-- Paragraph text -->
</body>
</html>
Код выше демонстрирует базовую структуру полного HTML-документа. Объявление <!DOCTYPE html> сообщает браузеру, что это HTML5-документ. Тег обертывает весь документ, а атрибут lang указывает русский язык. Секция
содержит метаданные, которые не видны на странице, но важны для браузера. Тег
обеспечивает правильную кодировку символов, чтобы русские буквы и специальные символы отображались корректно. Тег
определяет текст, который появляется во вкладке браузера. Секция <body> содержит фактический контент, который видят пользователи. Тег <h1> используется для основного заголовка, а <p> для текста абзаца. Эта структура является фундаментом каждой HTML-страницы, независимо от того, пишете ли вы простую запись в блоге или создаете сложный интернет-магазин. Без правильной настройки ваш контент не будет корректно отображаться в браузерах. Каждый элемент имеет свою специфическую функцию, подобно различным комнатам в хорошо организованном доме.</p>
</div>
<!-- Enhanced Code Block -->
<div class="code-editor-container">
<div class="code-editor-header">
<h3 class="code-title">Практический пример настройки HTML</h3>
<span class="code-language-badge html">html</span>
</div>
<div class="code-display">
<div class="code-display-header">
<span>HTML Code</span>
<div class="flex flex-col sm:flex-row gap-2">
<button type="button" class="copy-button" onclick="copyStaticCode('code-40', this)">
📋 Скопировать
</button>
<button type="button"
class="copy-button bg-green-600 hover:bg-green-700 text-white"
onclick="openCodeRunner('html', 'Практический пример настройки HTML', 40)">
🚀 Попробовать Вживую
</button>
</div>
</div>
<div class="code-block">
<pre><code id="code-40" class="language-html"><!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Портфолио Анны Петровой - Веб-разработчик">
<title>Анна Петрова | Портфолио - Веб-разработчик</title>
</head>
<body>
<header>
<h1>Анна Петрова</h1>
<nav>
<a href="#about">О себе</a>
<a href="#projects">Проекты</a>
<a href="#contact">Контакты</a>
</nav>
</header>
<main>
<section id="about">
<h2>О себе</h2>
<p>Я увлеченный веб-разработчик с 4-летним опытом работы.</p>
</section>
</main>
</body>
</html></code></pre>
</div>
</div>
</div>
<!-- Enhanced Text Block with Smart Links -->
<div class="prose prose-lg max-w-none">
<p>Лучшие практики включают использование семантического HTML - элементов вроде header, nav, main, section, которые имеют конкретное значение. Мета-тег viewport критически важен для мобильной адаптивности. Всегда поддерживайте правильную структуру документа с метаданными в head и контентом в body. Используйте семантические элементы вместо общих div, когда это возможно. Распространенные ошибки включают забывание объявления DOCTYPE, что заставляет браузеры переходить в режим совместимости. Неопределение meta charset может вызвать проблемы с отображением специальных символов. Неправильная вложенность, например размещение div внутри p, является невалидной. Забывание тега title вредит SEO. Для отладки используйте инструменты разработчика браузера, нажав F12 для инспекции HTML-структуры. Применяйте инструменты валидации вроде W3C Markup Validator. Всегда поддерживайте последовательные отступы для читаемости. Добавляйте комментарии для сложных секций. Тестируйте в разных браузерах для обеспечения совместимости. Организуйте код логично, подобно обустройству комнат дома функционально и эстетично.</p>
</div>
<!-- Enhanced Reference Table -->
<div class="table-responsive">
<div class="bg-white p-6">
<h3 class="text-xl font-semibold mb-4 text-gray-800">📊 Краткое руководство по настройке HTML</h3>
<div class="overflow-x-auto">
<table class="w-full table-auto border-collapse">
<thead>
<tr class="bg-gradient-to-r from-gray-50 to-gray-100">
<th class="border border-gray-300 px-4 py-3 text-left font-semibold text-gray-700">Элемент</th>
<th class="border border-gray-300 px-4 py-3 text-left font-semibold text-gray-700">Описание</th>
<th class="border border-gray-300 px-4 py-3 text-left font-semibold text-gray-700">Пример</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-gray-50 transition-colors">
<td class="border border-gray-300 px-4 py-3 text-gray-600"><!DOCTYPE html></td>
<td class="border border-gray-300 px-4 py-3 text-gray-600">Объявляет HTML5-документ</td>
<td class="border border-gray-300 px-4 py-3 text-gray-600"><!DOCTYPE html></td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="border border-gray-300 px-4 py-3 text-gray-600"><html lang="ru"></td>
<td class="border border-gray-300 px-4 py-3 text-gray-600">Корневой элемент с языком</td>
<td class="border border-gray-300 px-4 py-3 text-gray-600"><html lang="ru"></td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="border border-gray-300 px-4 py-3 text-gray-600"><meta charset="UTF-8"></td>
<td class="border border-gray-300 px-4 py-3 text-gray-600">Кодировка символов</td>
<td class="border border-gray-300 px-4 py-3 text-gray-600"><meta charset="UTF-8"></td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="border border-gray-300 px-4 py-3 text-gray-600"><title></td>
<td class="border border-gray-300 px-4 py-3 text-gray-600">Заголовок страницы для вкладки браузера</td>
<td class="border border-gray-300 px-4 py-3 text-gray-600"><title>Мой Сайт</title></td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="border border-gray-300 px-4 py-3 text-gray-600"><meta name="viewport"></td>
<td class="border border-gray-300 px-4 py-3 text-gray-600">Мета-тег для мобильной адаптивности</td>
<td class="border border-gray-300 px-4 py-3 text-gray-600"><meta name="viewport" content="width=device-width, initial-scale=1.0"></td>
</tr>
<tr class="hover:bg-gray-50 transition-colors">
<td class="border border-gray-300 px-4 py-3 text-gray-600"><meta name="description"></td>
<td class="border border-gray-300 px-4 py-3 text-gray-600">Описание страницы для SEO</td>
<td class="border border-gray-300 px-4 py-3 text-gray-600"><meta name="description" content="Описание страницы"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Enhanced Text Block with Smart Links -->
<div class="prose prose-lg max-w-none">
<p>В этом уроке вы изучили создание правильной структуры HTML-документа. Ключевые моменты включают то, что каждая HTML-страница должна иметь элементы DOCTYPE, html, head и body. Мета-теги важны для SEO и доступности. Семантическая HTML-структура создает более чистый и значимый код. Эта основа позволит вам добавлять CSS-стилизацию, где вы будете определять цвета, шрифты и макеты. Для JavaScript-взаимодействий правильная HTML-структура также необходима. Следующие темы для изучения включают основы CSS, адаптивный дизайн и элементы форм. Для практики создавайте базовые структуры для различных типов сайтов. Всегда используйте инструменты валидации и проверяйте совместимость браузеров. При регулярной практике вы сможете создавать сайты профессионального качества. Помните, что Html-Setup подобен организации библиотеки - хорошая изначальная организация облегчает поиск и использование всего в дальнейшем. Продолжайте практиковаться и экспериментировать с различными структурами для закрепления знаний.</p>
</div>
</div>
<!-- Keywords Section -->
<!-- Content Reporting Widget -->
<!-- Content Reporting Widget -->
<div class="content-report-container"
id="report-container"
data-content-type-id="10"
data-object-id="2">
<div class="report-dropdown" id="report-dropdown">
<button type="button" class="report-button" id="report-button">
<span>👋</span>
<span>Report Issue</span>
</button>
<div class="dropdown-menu" id="dropdown-menu">
<!-- Categories will be loaded dynamically by JavaScript -->
</div>
</div>
</div>
<!-- Load Required CSS and JS -->
<link rel="stylesheet" href="/static/css/content-reporting.3f7dc51ec48b.css">
<script src="/static/js/content-reporting.37a7bd46d1db.js" defer></script>
<!-- Enhanced Quiz Section -->
<div class="mb-8">
<h2 class="text-2xl md:text-3xl font-bold mb-6 bg-clip-text">
🧠 Проверьте Свои Знания
</h2>
<!-- Modern Quiz Container - Direct Display -->
<div id="quiz-container" class="quiz-modern-container">
<!-- Hidden CSRF Token -->
<input type="hidden" name="csrfmiddlewaretoken" value="2FPiOruFSqmmp7UxIQ21oxzT5vArHrWF0El05Hug45IMlEdWHiwcY3zFtqtky3Dg">
<!-- Quiz Header with Progress -->
<div class="quiz-header">
<div class="quiz-progress-wrapper">
<div class="quiz-progress-track">
<div id="quiz-progress-fill" class="quiz-progress-fill"></div>
</div>
<div class="quiz-progress-info">
<span id="progress-text" class="progress-current">Готов к Началу</span>
<span id="progress-stats" class="progress-stats"></span>
</div>
</div>
<!-- Timer (if applicable) -->
<div id="quiz-timer-wrapper" class="quiz-timer-wrapper" style="display: none;">
<div class="timer-icon">⏱️</div>
<span id="timer-display" class="timer-display">10:00</span>
</div>
</div>
<!-- Quiz Content Area -->
<div class="quiz-content-area">
<!-- Quiz Introduction - Now Always Visible -->
<div id="quiz-intro" class="quiz-intro-section">
<div class="quiz-intro-icon">
<div class="icon-circle">
<svg class="brain-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
</div>
</div>
<h3 class="quiz-intro-title">Test Your Html-Setup Knowledge</h3>
<p class="quiz-intro-subtitle">Challenge yourself with this interactive quiz and see how well you understand the topic</p>
<!-- Quiz Stats Grid -->
<div id="quiz-stats-grid" class="quiz-stats-grid">
<div class="quiz-stat-card">
<span class="stat-icon">❓</span>
<div class="stat-value">3</div>
<div class="stat-label">Вопросы</div>
</div>
<div class="quiz-stat-card">
<span class="stat-icon">🎯</span>
<div class="stat-value">70%</div>
<div class="stat-label">Для Прохождения</div>
</div>
<div class="quiz-stat-card">
<span class="stat-icon">♾️</span>
<div class="stat-value">∞</div>
<div class="stat-label">Время</div>
</div>
<div class="quiz-stat-card">
<span class="stat-icon">🔄</span>
<div class="stat-value">∞</div>
<div class="stat-label">Попытки</div>
</div>
</div>
<!-- Quiz Instructions -->
<div class="quiz-instructions">
<h4 class="instructions-title">📝 Инструкции</h4>
<ul class="instructions-list">
<li>Внимательно прочитайте каждый вопрос</li>
<li>Выберите лучший ответ на каждый вопрос</li>
<li>Вы можете пересдавать тест столько раз, сколько захотите</li>
<li>Ваш прогресс будет показан вверху</li>
</ul>
</div>
<button id="start-quiz-btn" class="quiz-start-button" onclick="startQuiz(2)">
<span class="button-content">
<svg class="button-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h1m4 0h1m-6 4h8"/>
</svg>
Начать Тест
</span>
<div class="button-ripple"></div>
</button>
</div>
<!-- Quiz Questions Section -->
<div id="quiz-questions" class="quiz-questions-section" style="display: none;">
<!-- Question Header -->
<div class="question-header">
<div class="question-meta">
<span id="question-number" class="question-counter">Вопрос 1</span>
<div class="question-type-badge" id="question-type">
<span>📝</span>
</div>
</div>
</div>
<!-- Question Content -->
<div id="current-question" class="question-content">
<!-- Question will be loaded here -->
</div>
<!-- Question Actions -->
<div class="question-actions">
<button id="submit-answer" class="submit-answer-btn" onclick="submitAnswer()" disabled>
<span class="btn-text">Отправить Ответ</span>
<div class="btn-loader" style="display: none;">
<div class="loader-spinner"></div>
</div>
</button>
</div>
</div>
<!-- Quiz Results Section -->
<div id="quiz-results" class="quiz-results-section" style="display: none;">
<!-- Results will be populated here -->
</div>
<!-- Loading State -->
<div id="quiz-loading" class="quiz-loading-section" style="display: none;">
<div class="loading-animation">
<div class="loading-spinner"></div>
<div class="loading-dots">
<span></span>
<span></span>
<span></span>
</div>
</div>
<p class="loading-text">Загружается ваш тест...</p>
</div>
</div>
<!-- Error Display -->
<div id="quiz-error" class="quiz-error-display" style="display: none;">
<div class="error-content">
<div class="error-icon">⚠️</div>
<div class="error-message"></div>
<button class="error-close" onclick="hideError()">✕</button>
</div>
</div>
</div>
<script>
let currentQuiz = null;
let currentQuestionIndex = 0;
let selectedAnswer = null;
let quizTimer = null;
let timeRemaining = null;
let currentQuestionData = null;
let quizSessionData = null; // Store quiz session data for answer sheet
function getCsrfToken() {
let token = null;
const quizContainer = document.getElementById('quiz-container');
if (quizContainer) {
const tokenInput = quizContainer.querySelector('input[name="csrfmiddlewaretoken"]');
if (tokenInput) {
token = tokenInput.value;
}
}
if (!token) {
const tokenInput = document.querySelector('input[name="csrfmiddlewaretoken"]');
if (tokenInput) {
token = tokenInput.value;
}
}
if (!token) {
const cookieMatch = document.cookie.match(/csrftoken=([^;]+)/);
if (cookieMatch) {
token = cookieMatch[1];
}
}
return token;
}
function startQuiz(topicId) {
console.log('Starting quiz for topic:', topicId);
// Reset quiz session data
quizSessionData = {
questions: [],
answers: {},
correctAnswers: {},
explanations: {},
startTime: new Date().toISOString()
};
// Show loading
showSection('quiz-loading');
updateProgress(0, 'Инициализация теста...', '');
const csrfToken = getCsrfToken();
if (!csrfToken) {
console.error('CSRF token not found');
showError('Security token not found. Please refresh the page.');
showSection('quiz-intro');
return;
}
const formData = new FormData();
formData.append('csrfmiddlewaretoken', csrfToken);
const url = `/ru/quiz/${topicId}/start/`;
fetch(url, {
method: 'POST',
body: formData,
headers: {
'X-Requested-With': 'XMLHttpRequest'
}
})
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
})
.then(data => {
if (data.success) {
currentQuiz = data.quiz;
currentQuestionIndex = 0;
// Setup timer if quiz has time limit
if (currentQuiz.time_limit) {
setupTimer(currentQuiz.time_limit);
}
// Show quiz questions section
showSection('quiz-questions');
// Load first question
loadQuestion(data.current_question, data.question_number, data.total_questions);
} else {
console.error('Quiz start failed:', data.error);
showError(data.error || 'Failed to start quiz');
showSection('quiz-intro');
}
})
.catch(error => {
console.error('Fetch error:', error);
showError('Не удалось запустить тест. Пожалуйста, попробуйте снова.');
showSection('quiz-intro');
});
}
function loadQuestion(question, questionNumber, totalQuestions) {
console.log('Loading question:', question);
// Store current question data
currentQuestionData = question;
// Store question in session data
quizSessionData.questions[questionNumber - 1] = question;
// Update progress
const progressPercent = (questionNumber / totalQuestions) * 100;
updateProgress(progressPercent, `Вопрос ${questionNumber}`, `${questionNumber} из ${totalQuestions}`);
// Update question number
const questionNumberEl = document.getElementById('question-number');
if (questionNumberEl) {
questionNumberEl.textContent = `Вопрос ${questionNumber}`;
}
// Update question type badge
const questionTypeEl = document.getElementById('question-type');
if (questionTypeEl) {
const typeIcons = {
'multiple_choice': '📝',
'true_false': '✅',
'fill_code': '💻'
};
questionTypeEl.innerHTML = `<span>${typeIcons[question.type] || '📝'}</span>`;
}
// Reset selected answer
selectedAnswer = null;
const submitBtn = document.getElementById('submit-answer');
if (submitBtn) {
submitBtn.disabled = true;
submitBtn.querySelector('.btn-text').textContent = 'Отправить Ответ';
}
// Generate question HTML
let questionHTML = `
<div class="question-text">${escapeHtml(question.text)}</div>
`;
// Add code template if exists
if (question.code_template && question.code_template.trim()) {
questionHTML += `
<div class="code-block">
<pre><code>${escapeHtml(question.code_template)}</code></pre>
</div>
`;
}
// Add options
questionHTML += '<div class="options-container">';
if (question.options && question.options.length > 0) {
question.options.forEach((option, index) => {
questionHTML += `
<div class="option-item" onclick="selectOption(${option.id}, this)">
<input type="radio" name="quiz-option" value="${option.id}" style="display: none;">
<div class="option-content">
<div class="option-indicator"></div>
<div class="option-text">${escapeHtml(option.text)}</div>
</div>
</div>
`;
});
} else {
questionHTML += '<p class="error-message">No options available for this question.</p>';
}
questionHTML += '</div>';
// Insert question content with animation
const questionContainer = document.getElementById('current-question');
if (questionContainer) {
questionContainer.style.opacity = '0';
questionContainer.innerHTML = questionHTML;
// Animate in
setTimeout(() => {
questionContainer.style.transition = 'opacity 0.3s ease';
questionContainer.style.opacity = '1';
}, 100);
}
}
function selectOption(optionId, element) {
console.log('Option selected:', optionId);
selectedAnswer = optionId;
// Update visual feedback
document.querySelectorAll('.option-item').forEach(item => {
item.classList.remove('selected');
});
element.classList.add('selected');
// Enable submit button
const submitBtn = document.getElementById('submit-answer');
if (submitBtn) {
submitBtn.disabled = false;
}
}
function submitAnswer() {
if (!selectedAnswer || !currentQuestionData) {
console.log('No answer selected or no question data');
return;
}
console.log('Submitting answer:', selectedAnswer, 'for question:', currentQuestionData.id);
// Store user answer in session data
quizSessionData.answers[currentQuestionData.id] = {
selectedOptionId: selectedAnswer,
selectedOptionText: getSelectedOptionText(selectedAnswer)
};
const submitBtn = document.getElementById('submit-answer');
if (!submitBtn) return;
// Show loading state
submitBtn.disabled = true;
submitBtn.querySelector('.btn-text').style.opacity = '0';
submitBtn.querySelector('.btn-loader').style.display = 'block';
const csrfToken = getCsrfToken();
if (!csrfToken) {
console.error('CSRF token not found for submit');
showError('Security token not found. Please refresh the page.');
resetSubmitButton(submitBtn);
return;
}
const formData = new FormData();
formData.append('question_id', currentQuestionData.id);
formData.append('selected_option', selectedAnswer);
formData.append('csrfmiddlewaretoken', csrfToken);
const url = `/ru/quiz/${currentQuiz.id}/submit/`;
fetch(url, {
method: 'POST',
body: formData,
headers: {
'X-Requested-With': 'XMLHttpRequest'
}
})
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
})
.then(data => {
if (data.success) {
if (data.completed) {
// Quiz completed - load results
loadQuizResults(data.redirect_url);
} else {
// Load next question
setTimeout(() => {
loadQuestion(data.current_question, data.question_number, data.total_questions);
resetSubmitButton(submitBtn);
}, 500);
}
} else {
console.error('Submit failed:', data.error);
showError(data.error || 'Failed to submit answer');
resetSubmitButton(submitBtn);
}
})
.catch(error => {
console.error('Submit fetch error:', error);
showError('Не удалось отправить ответ. Пожалуйста, попробуйте снова.');
resetSubmitButton(submitBtn);
});
}
function getSelectedOptionText(optionId) {
if (!currentQuestionData || !currentQuestionData.options) return '';
const option = currentQuestionData.options.find(opt => opt.id == optionId);
return option ? option.text : '';
}
function loadQuizResults(resultUrl) {
console.log('Loading results from:', resultUrl);
// Show loading while fetching results
showSection('quiz-loading');
updateProgress(100, 'Вычисление результатов...', 'Пожалуйста, подождите');
fetch(resultUrl, {
headers: {
'HX-Request': 'true'
}
})
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.text();
})
.then(html => {
// Parse the results and extract detailed information
const tempDiv = document.createElement('div');
tempDiv.innerHTML = html;
// Extract score data from the response
const scoreElement = tempDiv.querySelector('.score-percentage') || tempDiv.querySelector('[data-score]');
let scoreValue = 0;
if (scoreElement) {
const scoreText = scoreElement.textContent || scoreElement.getAttribute('data-score') || '0';
scoreValue = parseInt(scoreText.replace('%', '')) || 0;
}
const correctElement = tempDiv.querySelector('.correct-answers') || tempDiv.querySelector('[data-correct]');
let correctAnswers = 0;
if (correctElement) {
const correctText = correctElement.textContent || correctElement.getAttribute('data-correct') || '0';
correctAnswers = parseInt(correctText) || 0;
}
const totalElement = tempDiv.querySelector('.total-questions') || tempDiv.querySelector('[data-total]');
let totalQuestions = currentQuiz.total_questions || 0;
if (totalElement) {
const totalText = totalElement.textContent || totalElement.getAttribute('data-total') || '0';
totalQuestions = parseInt(totalText) || totalQuestions;
}
// Extract detailed question results
extractQuestionResults(tempDiv);
// Save quiz result for authenticated users
if (window.siteConfig && window.siteConfig.isAuthenticated && window.saveQuizResult) {
const quizData = {
quiz_id: currentQuiz.id,
score: correctAnswers,
total_questions: totalQuestions,
correct_answers: correctAnswers,
time_spent: calculateQuizTime(),
answers: quizSessionData,
passing_score: currentQuiz.passing_score || 70
};
window.saveQuizResult(quizData).catch(error => {
console.error('Failed to save quiz result:', error);
});
}
displayResults(scoreValue, correctAnswers, totalQuestions);
// Stop timer if running
if (quizTimer) {
clearInterval(quizTimer);
hideTimer();
}
})
.catch(error => {
console.error('Results fetch error:', error);
showError('Не удалось загрузить результаты. Пожалуйста, обновите страницу.');
showSection('quiz-questions');
});
}
function calculateQuizTime() {
// Calculate time spent from quiz session start
if (quizSessionData && quizSessionData.startTime) {
const startTime = new Date(quizSessionData.startTime);
const endTime = new Date();
return Math.floor((endTime - startTime) / 1000); // Return seconds
}
return 0;
}
function extractQuestionResults(resultContainer) {
// Extract detailed results from the Django-generated HTML
const questionContainers = resultContainer.querySelectorAll('.border-b, .border');
questionContainers.forEach((container, index) => {
try {
// Extract question text
const questionTextEl = container.querySelector('p.text-gray-700, .text-gray-700');
const questionText = questionTextEl ? questionTextEl.textContent.trim() : `Question ${index + 1}`;
// Extract correct/incorrect status
const correctSpan = container.querySelector('.bg-green-100');
const incorrectSpan = container.querySelector('.bg-red-100');
const isCorrect = correctSpan !== null;
// Extract user's answer
let userAnswer = '';
const userAnswerSpans = container.querySelectorAll('.text-red-600, .text-green-600');
for (let span of userAnswerSpans) {
const text = span.textContent;
if (text.includes('Your answer:')) {
userAnswer = text.replace('Your answer:', '').trim();
break;
}
}
// Extract correct answer
let correctAnswer = '';
const greenSpans = container.querySelectorAll('.text-green-600');
for (let span of greenSpans) {
const text = span.textContent.trim();
const parentText = span.parentElement ? span.parentElement.textContent : '';
// Check if this span contains "Correct answer:" in its parent context
if (parentText.includes('Correct answer:') && !text.includes('Your answer:')) {
// Extract only the answer part after "Correct answer:"
const parts = parentText.split('Correct answer:');
if (parts.length > 1) {
correctAnswer = parts[1].split('Explanation:')[0].trim();
break;
}
}
}
// Fallback: if still empty, use user answer for correct questions
if (!correctAnswer && isCorrect) {
correctAnswer = userAnswer;
}
// Extract explanation
let explanation = '';
const explanationEl = container.querySelector('.bg-blue-50 p');
if (explanationEl) {
explanation = explanationEl.textContent.replace('Explanation:', '').trim();
}
// Store in session data
const questionId = quizSessionData.questions[index] ? quizSessionData.questions[index].id : index + 1;
quizSessionData.correctAnswers[questionId] = {
isCorrect: isCorrect,
correctAnswer: correctAnswer,
explanation: explanation,
questionText: questionText
};
} catch (error) {
console.error('Error extracting question result:', error);
}
});
}
function displayResults(scoreValue, correctAnswers, totalQuestions) {
const passed = scoreValue >= (currentQuiz.passing_score || 70);
const resultsSection = document.getElementById('quiz-results');
if (!resultsSection) return;
resultsSection.innerHTML = `
<div class="result-header">
<div class="result-status-icon ${passed ? 'passed' : 'failed'}">
${passed ? '🎉' : '📚'}
</div>
<h3 class="result-title">
${passed ? 'Поздравляем!' : 'Продолжайте Учиться!'}
</h3>
<p class="result-subtitle">
${passed ? 'Вы прошли тест!' : 'Вы можете лучше. Попробуйте снова!'}
</p>
</div>
<div class="score-display">
<div class="score-percentage ${passed ? 'passed' : 'failed'}">${scoreValue}%</div>
<div class="score-details">
${correctAnswers} из ${totalQuestions} правильно
</div>
<div class="score-bar">
<div class="score-fill" style="width: 0%"></div>
</div>
<div style="margin-top: 1rem; font-size: 0.875rem; opacity: 0.8;">
Проходной балл: ${currentQuiz.passing_score || 70}%
</div>
</div>
<div class="result-actions">
<button class="result-btn primary" onclick="retakeQuiz()">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
</svg>
Пересдать Тест
</button>
<button class="result-btn secondary" onclick="toggleAnswerSheet()" id="view-answers-btn">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg>
Посмотреть Ответы
</button>
<button class="result-btn secondary" onclick="closeQuiz()">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
Закрыть
</button>
</div>
<!-- Answer Sheet Section -->
<div id="answer-sheet" class="answer-sheet-section" style="display: none;">
<div class="answer-sheet-header">
<h4>📋 Лист Ответов</h4>
<button class="close-answer-sheet" onclick="toggleAnswerSheet()">✕</button>
</div>
<div id="answer-sheet-content" class="answer-sheet-content">
Загружаются ответы...
</div>
</div>
`;
// Show results section
showSection('quiz-results');
updateProgress(100, 'Тест Завершен!', `${scoreValue}% Очки`);
// Animate score bar
setTimeout(() => {
const scoreFill = resultsSection.querySelector('.score-fill');
if (scoreFill) {
scoreFill.style.width = `${scoreValue}%`;
}
}, 500);
}
// Answer sheet functions
function toggleAnswerSheet() {
const answerSheet = document.getElementById('answer-sheet');
const btn = document.getElementById('view-answers-btn');
if (answerSheet.style.display === 'none' || answerSheet.style.display === '') {
answerSheet.style.display = 'block';
loadAnswerSheet();
btn.innerHTML = `
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
Скрыть Ответы
`;
} else {
answerSheet.style.display = 'none';
btn.innerHTML = `
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg>
Посмотреть Ответы
`;
}
}
function loadAnswerSheet() {
const answerSheetContent = document.getElementById('answer-sheet-content');
if (!answerSheetContent || !quizSessionData) return;
let correctCount = 0;
let incorrectCount = 0;
let answerSheetHTML = `
<div class="answer-summary">
<div class="summary-stat total">
<div class="number">${currentQuiz.total_questions || 0}</div>
<div class="label">Всего Вопросов</div>
</div>
<div class="summary-stat correct">
<div class="number" id="correct-count">0</div>
<div class="label">Правильно</div>
</div>
<div class="summary-stat incorrect">
<div class="number" id="incorrect-count">0</div>
<div class="label">Неправильно</div>
</div>
</div>
<div class="answer-grid">
`;
// Generate answer sheet for each question
quizSessionData.questions.forEach((question, index) => {
if (!question) return;
const questionId = question.id;
const userAnswer = quizSessionData.answers[questionId];
const correctInfo = quizSessionData.correctAnswers[questionId];
if (!userAnswer || !correctInfo) return;
const isCorrect = correctInfo.isCorrect;
if (isCorrect) {
correctCount++;
} else {
incorrectCount++;
}
answerSheetHTML += `
<div class="answer-item ${isCorrect ? 'correct' : 'incorrect'}">
<div class="question-number">Q${index + 1}</div>
<div class="question-details">
<div class="question-text">${escapeHtml(correctInfo.questionText || question.text)}</div>
<div class="answer-comparison">
<div class="user-answer">
<span class="label">Your Answer:</span>
<span class="value ${isCorrect ? 'correct' : 'incorrect'}">${escapeHtml(userAnswer.selectedOptionText)}</span>
</div>
${!isCorrect ? `
<div class="correct-answer">
<span class="label">Correct Answer:</span>
<span class="value correct">${escapeHtml(correctInfo.correctAnswer)}</span>
</div>
` : ''}
${correctInfo.explanation ? `
<div class="explanation">
<span class="label">Объяснение:</span>
<span class="explanation-text">${escapeHtml(correctInfo.explanation)}</span>
</div>
` : ''}
</div>
</div>
<div class="result-icon">
${isCorrect ? '✅' : '❌'}
</div>
</div>
`;
});
answerSheetHTML += '</div>';
answerSheetContent.innerHTML = answerSheetHTML;
// Update summary counts
document.getElementById('correct-count').textContent = correctCount;
document.getElementById('incorrect-count').textContent = incorrectCount;
}
function retakeQuiz() {
// Reset quiz state
currentQuiz = null;
currentQuestionIndex = 0;
selectedAnswer = null;
currentQuestionData = null;
quizSessionData = null;
if (quizTimer) {
clearInterval(quizTimer);
hideTimer();
}
// Show intro section
showSection('quiz-intro');
updateProgress(0, 'Готов к Началу', '');
}
function closeQuiz() {
// Just reset and hide for now since we're directly displaying
retakeQuiz();
}
function showSection(sectionId) {
const sections = ['quiz-intro', 'quiz-questions', 'quiz-results', 'quiz-loading'];
sections.forEach(id => {
const element = document.getElementById(id);
if (element) {
element.style.display = id === sectionId ? 'block' : 'none';
}
});
}
function updateProgress(percentage, currentText, statsText) {
const progressFill = document.getElementById('quiz-progress-fill');
const progressText = document.getElementById('progress-text');
const progressStats = document.getElementById('progress-stats');
if (progressFill) {
progressFill.style.width = `${percentage}%`;
}
if (progressText) {
progressText.textContent = currentText;
}
if (progressStats) {
progressStats.textContent = statsText;
}
}
function setupTimer(timeLimit) {
const timerWrapper = document.getElementById('quiz-timer-wrapper');
const timerDisplay = document.getElementById('timer-display');
if (!timerWrapper || !timerDisplay) return;
timeRemaining = timeLimit * 60; // Convert to seconds
timerWrapper.style.display = 'flex';
quizTimer = setInterval(() => {
const minutes = Math.floor(timeRemaining / 60);
const seconds = timeRemaining % 60;
timerDisplay.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
// Warning when time is running out
if (timeRemaining <= 60) {
timerWrapper.style.color = '#ef4444';
timerWrapper.style.animation = 'pulse 1s infinite';
}
if (timeRemaining <= 0) {
clearInterval(quizTimer);
if (selectedAnswer) {
submitAnswer();
} else {
showError('Время вышло! Тест будет отправлен автоматически.');
}
}
timeRemaining--;
}, 1000);
}
function hideTimer() {
const timerWrapper = document.getElementById('quiz-timer-wrapper');
if (timerWrapper) {
timerWrapper.style.display = 'none';
}
}
function resetSubmitButton(button) {
if (!button) return;
button.disabled = false;
button.querySelector('.btn-text').style.opacity = '1';
button.querySelector('.btn-loader').style.display = 'none';
}
function showError(message) {
console.log('Showing error:', message);
const errorDisplay = document.getElementById('quiz-error');
if (!errorDisplay) return;
const errorMessage = errorDisplay.querySelector('.error-message');
if (errorMessage) {
errorMessage.textContent = message;
}
errorDisplay.style.display = 'block';
// Auto-hide after 5 seconds
setTimeout(() => {
hideError();
}, 5000);
}
function hideError() {
const errorDisplay = document.getElementById('quiz-error');
if (errorDisplay) {
errorDisplay.style.display = 'none';
}
}
function escapeHtml(unsafe) {
if (typeof unsafe !== 'string') {
return unsafe;
}
return unsafe
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
// Initialize quiz when page loads
document.addEventListener('DOMContentLoaded', function() {
// Quiz is now directly visible, no need for showQuiz() function
console.log('Quiz components loaded');
});
// HTMX after-swap event
document.body.addEventListener('htmx:afterSwap', function() {
// Reinitialize quiz if it exists on the swapped content
console.log('Quiz components reloaded after HTMX swap');
});
</script>
</div>
<!-- Enhanced Navigation -->
<div class="topic-navigation">
<div class="nav-links">
<div></div>
<div class="nav-center">
<div class="text-sm font-semibold">Тема 1 из 1</div>
<div class="text-xs mt-1 opacity-75">Html Урок</div>
</div>
<div></div>
</div>
</div>
</div>
<script>
const sessionKey = `code_session_${codeExampleId}`;
// Smart Link Click Tracking
document.addEventListener('click', function(event) {
const smartLink = event.target.closest('.smart-link');
if (smartLink) {
const keywordId = smartLink.getAttribute('data-keyword-id');
if (keywordId) {
// Track click asynchronously
fetch('/ru/api/smart-link-click/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': '2FPiOruFSqmmp7UxIQ21oxzT5vArHrWF0El05Hug45IMlEdWHiwcY3zFtqtky3Dg'
},
body: JSON.stringify({
keyword_id: keywordId,
source_content_type: 'topic',
source_content_id: 2,
user_agent: navigator.userAgent
})
}).catch(error => {
console.debug('Smart link tracking failed:', error);
});
}
}
});
function openCodeRunner(language, title, codeExampleId) {
const codeElement = document.getElementById('code-' + codeExampleId);
const code = codeElement.textContent;
const formData = new FormData();
formData.append('language', language);
formData.append('title', title);
formData.append('code', code);
formData.append('source_example_id', codeExampleId);
formData.append('csrfmiddlewaretoken', '2FPiOruFSqmmp7UxIQ21oxzT5vArHrWF0El05Hug45IMlEdWHiwcY3zFtqtky3Dg');
fetch('/ru/create-code-session/', {
method: 'POST',
body: formData,
headers: {
'X-Requested-With': 'XMLHttpRequest'
}
})
.then(response => response.json())
.then(data => {
if (data.success) {
window.open(data.url, '_blank');
} else {
console.error('Error creating session:', data.error);
window.open('/ru/try-it/' + language + '/', '_blank');
}
})
.catch(error => {
console.error('Error:', error);
window.open('/ru/try-it/' + language + '/', '_blank');
});
}
document.body.addEventListener('htmx:afterSwap', function() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
if (typeof Prism !== 'undefined') {
Prism.highlightAll();
}
if (typeof populateQuizStats === 'function') {
populateQuizStats();
}
if (window.mobileMenu && window.mobileMenu.isMenuOpen && window.mobileMenu.isMenuOpen()) {
window.mobileMenu.forceClose();
}
initializeEnhancedFeatures();
});
function initializeEnhancedFeatures() {
// Initialize topic tracking for authenticated users
if (window.siteConfig && window.siteConfig.isAuthenticated) {
initializeTopicTracking();
}
document.querySelectorAll('.nav-link, .custom-sidebar-item').forEach(link => {
link.addEventListener('click', function() {
if (this.hasAttribute('hx-get')) {
this.classList.add('loading');
setTimeout(() => {
this.classList.remove('loading');
}, 1000);
}
});
});
document.querySelectorAll('.code-block pre').forEach(pre => {
const code = pre.querySelector('code');
if (code && code.textContent.split('\n').length > 3) {
pre.classList.add('line-numbers');
}
});
}
function initializeTopicTracking() {
// Track topic view for authenticated users
const topicId = getTopicIdFromCurrentUrl();
const categorySlug = getCategorySlugFromCurrentUrl();
if (topicId && categorySlug) {
// Track initial view
trackTopicView({
topic_id: topicId,
category_slug: categorySlug
});
// Track scroll percentage
let maxScrollPercentage = 0;
let timeSpent = 0;
let startTime = Date.now();
window.addEventListener('scroll', throttle(function() {
const scrollPercentage = calculateScrollPercentage();
if (scrollPercentage > maxScrollPercentage) {
maxScrollPercentage = scrollPercentage;
}
}, 1000));
// Track time spent
setInterval(() => {
if (!document.hidden) {
timeSpent += 5; // Add 5 seconds
}
}, 5000);
// Send final data on page unload
window.addEventListener('beforeunload', function() {
if (maxScrollPercentage > 0 || timeSpent > 0) {
trackTopicView({
topic_id: topicId,
category_slug: categorySlug,
scroll_percentage: maxScrollPercentage,
time_spent: timeSpent,
completed: maxScrollPercentage >= 80 // Consider 80% as completed
});
}
});
}
}
function getTopicIdFromCurrentUrl() {
const pathParts = window.location.pathname.split('/').filter(Boolean);
const languages = ['en', 'fa', 'ar', 'zh', 'hi', 'fr', 'de', 'ru', 'tr', 'pt', 'es'];
let startIndex = 0;
if (languages.includes(pathParts[0])) {
startIndex = 1;
}
if (pathParts.length >= startIndex + 2) {
return pathParts[startIndex + 1]; // Return topic slug
}
return null;
}
function getCategorySlugFromCurrentUrl() {
const pathParts = window.location.pathname.split('/').filter(Boolean);
const languages = ['en', 'fa', 'ar', 'zh', 'hi', 'fr', 'de', 'ru', 'tr', 'pt', 'es'];
let startIndex = 0;
if (languages.includes(pathParts[0])) {
startIndex = 1;
}
if (pathParts.length >= startIndex + 1) {
return pathParts[startIndex]; // Return category slug
}
return null;
}
function trackTopicView(data) {
if (!window.siteConfig || !window.siteConfig.isAuthenticated) {
return Promise.resolve();
}
return fetch('/account/ajax/track-topic-view/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': window.siteConfig.csrfToken || getCsrfToken()
},
body: JSON.stringify(data)
}).catch(error => {
console.debug('Topic view tracking failed:', error);
});
}
function calculateScrollPercentage() {
const scrollTop = window.pageYOffset;
const docHeight = document.documentElement.scrollHeight - window.innerHeight;
return Math.min(100, Math.max(0, (scrollTop / docHeight) * 100));
}
function throttle(func, limit) {
let inThrottle;
return function() {
const args = arguments;
const context = this;
if (!inThrottle) {
func.apply(context, args);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
};
}
function getCsrfToken() {
const tokenInput = document.querySelector('input[name="csrfmiddlewaretoken"]');
if (tokenInput) {
return tokenInput.value;
}
const cookieMatch = document.cookie.match(/csrftoken=([^;]+)/);
return cookieMatch ? cookieMatch[1] : null;
}
document.addEventListener('DOMContentLoaded', function() {
initializeEnhancedFeatures();
if (typeof Prism !== 'undefined') {
Prism.highlightAll();
}
document.body.addEventListener('htmx:beforeRequest', function(event) {
const target = event.target;
if (target.classList.contains('nav-link') || target.classList.contains('custom-sidebar-item')) {
target.style.opacity = '0.7';
target.style.pointerEvents = 'none';
}
});
document.body.addEventListener('htmx:afterRequest', function(event) {
const target = event.target;
if (target.classList.contains('nav-link') || target.classList.contains('custom-sidebar-item')) {
target.style.opacity = '1';
target.style.pointerEvents = 'auto';
}
});
});
window.addEventListener('error', function(event) {
console.error('JavaScript error:', event.error);
if (window.innerWidth <= 768) {
const errorDiv = document.createElement('div');
errorDiv.className = 'fixed top-4 left-4 right-4 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg z-50 shadow-lg';
errorDiv.innerHTML = `
<div class="flex items-center justify-between">
<div class="flex items-center">
<span class="text-red-500 mr-2">⚠️</span>
<span><strong>Ошибка:</strong> Что-то пошло не так. Пожалуйста, обновите страницу.</span>
</div>
<button onclick="this.parentElement.parentElement.remove()" class="text-red-500 hover:text-red-700 ml-2">✕</button>
</div>
`;
document.body.appendChild(errorDiv);
setTimeout(() => {
if (errorDiv.parentElement) {
errorDiv.remove();
}
}, 5000);
}
});
const style = document.createElement('style');
style.textContent = `
@keyframes ripple {
to {
transform: scale(4);
opacity: 0;
}
}
.copy-button {
position: relative;
overflow: hidden;
}
`;
document.head.appendChild(style);
</script>
</main>
</div>
<!-- Coming Soon Course Modal -->
<div id="coming-soon-modal" class="coming-soon-modal hidden">
<div class="coming-soon-backdrop"></div>
<div class="coming-soon-content">
<!-- Modal Header -->
<div class="coming-soon-header">
<div class="flex items-center space-x-3 ">
<div class="coming-soon-icon">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
</svg>
</div>
<h3 class="coming-soon-title">
🚧 Курс Скоро Появится
</h3>
</div>
<button id="close-coming-soon-modal" class="coming-soon-close">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<!-- Modal Body -->
<div class="coming-soon-body">
<div class="course-info-section">
<h4 id="course-name" class="course-name">Course Name</h4>
<div class="course-status">
<span class="status-badge">В Разработке</span>
</div>
<p class="course-description">
Этот всеобъемлющий курс в настоящее время разрабатывается с использованием новейших отраслевых стандартов и лучших практик. Наша команда экспертов создает высококачественный контент, чтобы обеспечить вам лучший опыт обучения.
</p>
</div>
<div class="estimated-release">
<div class="flex items-center space-x-2 ">
<svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span class="text-sm text-gray-600 dark:text-gray-400">
Ожидаемый выпуск: 2-4 недели
</span>
</div>
</div>
<!-- Notify Me Section -->
<div class="notify-section">
<h5 class="notify-title">Получить Уведомление О Доступности</h5>
<form id="notify-form" class="notify-form">
<div class="email-input-group">
<input type="email"
id="notify-email"
name="email"
placeholder="Введите ваш адрес электронной почты"
class="notify-email-input"
required>
<button type="submit" class="notify-submit-btn">
<span class="btn-text">Уведомить Меня</span>
<svg class="btn-icon w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
</svg>
</button>
</div>
<p class="email-disclaimer">
Мы отправим вам одно уведомление, когда этот курс станет доступен. Никакого спама, обещаем!
</p>
</form>
</div>
<!-- Related Courses -->
<div class="related-courses">
<h5 class="related-title">Доступно Сейчас</h5>
<div class="related-links">
<a href="/ru/html/" class="related-link">
<i class="fab fa-html5 text-orange-500"></i>
<span>Учебник HTML</span>
</a>
<a href="/ru/css/" class="related-link">
<i class="fab fa-css3-alt text-blue-500"></i>
<span>Полное Руководство По CSS</span>
</a>
<a href="/ru/javascript/" class="related-link">
<i class="fab fa-js-square text-yellow-500"></i>
<span>Основы JavaScript</span>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Coming Soon Modal -->
<div id="coming-soon-modal" class="coming-soon-modal">
<div class="coming-soon-backdrop"></div>
<div class="coming-soon-content">
<div class="coming-soon-header">
<div class="coming-soon-icon">
<i class="fas fa-clock"></i>
</div>
<h3 class="coming-soon-title">Coming Soon</h3>
<button class="coming-soon-close" id="close-coming-soon">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<div class="coming-soon-body">
<div class="course-info-section">
<h4 class="course-name" id="modal-course-name">Course Name</h4>
<div class="course-status">
<span class="status-badge">
<i class="fas fa-hammer mr-1"></i>
В Разработке
</span>
</div>
<p class="course-description" id="modal-course-description">
This course is currently under development. We're working hard to bring you high-quality content.
</p>
</div>
<div class="estimated-release">
<div class="flex items-center space-x-2 mb-2">
<i class="fas fa-calendar-alt text-blue-600"></i>
<span class="font-semibold text-blue-600">Estimated Release</span>
</div>
<p class="text-sm text-blue-700" id="modal-release-date">Q2 2025</p>
</div>
</div>
</div>
</div>
<!-- Include Footer -->
<footer class="bg-gray-900 text-white">
<div class="">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 grid grid-cols-2 md:grid-cols-6 gap-8">
<!-- Frontend Development -->
<div>
<h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wide mb-4">Фронтенд</h3>
<ul class="space-y-1">
<li><a href="/ru/html/" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">HTML Tutorial</a></li>
<li><a href="/ru/css/" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">CSS Complete Guide</a></li>
<li><a href="/ru/javascript/" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">JavaScript Fundamentals</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="react">React Development</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="vue">Vue.js Framework</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="angular">Angular Framework</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="typescript">TypeScript Guide</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="bootstrap">Bootstrap Framework</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="tailwind">Tailwind CSS</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="sass">Sass & SCSS</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="jquery">jQuery Library</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="webcomponents">Web Components</a></li>
</ul>
</div>
<!-- Backend Development -->
<div>
<h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wide mb-4">Бэкенд</h3>
<ul class="space-y-1">
<li><a href="/ru/python/" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Python Tutorial</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="django">Django Framework</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="flask">Flask Framework</a></li>
<li><a href="/ru/nodejs/" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Node.js Tutorial</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="express">Express.js Framework</a></li>
<li><a href="/ru/php/" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">PHP Programming</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="laravel">Laravel Framework</a></li>
<li><a href="/ru/java/" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">Java Programming</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="spring">Spring Boot</a></li>
<li><a href="/ru/c-sharp/" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">C# Programming</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="dotnet">ASP.NET Core</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="ruby">Ruby on Rails</a></li>
</ul>
</div>
<!-- Database Programming -->
<div>
<h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wide mb-4">База Данных</h3>
<ul class="space-y-1">
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="sql">SQL Tutorial</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="mysql">MySQL Tutorial</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="postgresql">PostgreSQL Tutorial</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="mongodb">MongoDB Tutorial</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="redis">Redis Tutorial</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="sqlite">SQLite Tutorial</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="database-design">Database Design</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="sqlserver">SQL Server Tutorial</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="oracle">Oracle Database</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="mariadb">MariaDB Tutorial</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="firebase">Firebase Tutorial</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="elasticsearch">Elasticsearch Tutorial</a></li>
</ul>
</div>
<!-- Mobile Development -->
<div>
<h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wide mb-4">Мобильные</h3>
<ul class="space-y-1">
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="react-native">React Native Tutorial</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="flutter">Flutter Tutorial</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="dart">Dart Programming</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="swift">iOS Swift Tutorial</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="swiftui">SwiftUI Tutorial</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="kotlin">Android Kotlin</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="android-java">Android Java</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="xamarin">Xamarin Tutorial</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="ionic">Ionic Framework</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="phonegap">PhoneGap Tutorial</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="pwa">Progressive Web Apps</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="mobile-ui">Mobile UI Design</a></li>
</ul>
</div>
<!-- Advanced Topics -->
<div>
<h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wide mb-4">Продвинутый</h3>
<ul class="space-y-1">
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="data-structures">Data Structures</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="algorithms">Algorithms Tutorial</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="oop">Object Oriented Programming</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="design-patterns">Design Patterns</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="api-development">API Development</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="rest-api">REST API Tutorial</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="graphql">GraphQL Tutorial</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="microservices">Microservices</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="machine-learning">Machine Learning</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="ai">Artificial Intelligence</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="blockchain">Blockchain Programming</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="game-dev">Game Development</a></li>
</ul>
</div>
<!-- Programming Languages -->
<div>
<h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wide mb-4">Языки Программирования</h3>
<ul class="space-y-1">
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="c">C Programming</a></li>
<li><a href="/ru/c-plus-plus/" class="text-xs text-gray-400 hover:text-teal-400 transition-colors">C++ Programming</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="go">Go Programming</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="rust">Rust Programming</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="ruby">Ruby Programming</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="scala">Scala Programming</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="kotlin">Kotlin Programming</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="r">R Programming</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="matlab">MATLAB Programming</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="perl">Perl Programming</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="assembly">Assembly Language</a></li>
<li><a href="#" class="coming-soon-link text-xs text-gray-400 hover:text-teal-400 transition-colors" data-course="lua">Lua Programming</a></li>
</ul>
</div>
</div>
<!-- Brand Section -->
<div class="border-t border-gray-800 mt-12 pt-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row justify-between items-center">
<div class="flex flex-col items-center text-center mb-6 md:mb-0">
<img src="/static/images/logo.6fecbe0a2cbf.png"
alt="Mrebi Logo"
class="h-12 w-auto object-contain mb-2">
<div>
<p class="text-sm text-gray-400 mt-1">Учись, Практикуйся, Осваивай</p>
</div>
</div>
<div class="text-center md:text-right">
<div class="flex flex-wrap justify-center md:justify-end gap-6 mb-4">
<a href="#" class="text-sm text-gray-400 hover:text-teal-400 transition-colors">О Нас</a>
<a href="#" class="text-sm text-gray-400 hover:text-teal-400 transition-colors">Контакты</a>
<a href="#" class="text-sm text-gray-400 hover:text-teal-400 transition-colors">Политика Конфиденциальности</a>
<a href="#" class="text-sm text-gray-400 hover:text-teal-400 transition-colors">Условия Использования</a>
<a href="#" class="text-sm text-gray-400 hover:text-teal-400 transition-colors">Блог</a>
</div>
<div class="text-gray-400">
<p class="text-sm mb-2">
Осваивайте программирование с интерактивными уроками и практическими упражнениями
</p>
<p class="text-xs">
© 2025 Mrebi. Все права защищены.
</p>
</div>
</div>
</div>
<!-- Social Links -->
<div class="mt-8 pt-6 border-t border-gray-800 text-center">
<div class="flex justify-center gap-6 flex-wrap">
<a href="https://www.linkedin.com/in/mr-ebi/" class="text-gray-400 hover:text-teal-400 transition-colors duration-200" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
</svg>
</a>
<a href="https://www.youtube.com/@mrebi-com" class="text-gray-400 hover:text-teal-400 transition-colors duration-200" aria-label="YouTube" target="_blank" rel="noopener noreferrer">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
</svg>
</a>
<a href="https://www.instagram.com/mrebicom/" class="text-gray-400 hover:text-teal-400 transition-colors duration-200" aria-label="Instagram" target="_blank" rel="noopener noreferrer">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.148 3.227-1.691 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.148-4.771-1.691-4.919-4.919-.058-1.265-.069-1.645-.069-4.849 0-3.205.012-3.584.069-4.849.149-3.227 1.691-4.771 4.919-4.919 1.266-.058 1.644-.07 4.849-.07zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.667.072 4.947.2 4.36 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.667-.014 4.947-.072 4.358-.2 6.78-2.618 6.98-6.98.059-1.281.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.2-4.36-2.618-6.78-6.98-6.98-1.281-.058-1.689-.072-4.948-.072zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-teal-400 transition-colors duration-200" aria-label="TikTok" target="_blank" rel="noopener noreferrer">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.55 2.89 2.89 0 0 1 .88.13V9.65a6.34 6.34 0 0 0-1-.09A6.34 6.34 0 0 0 3 16a6.34 6.34 0 0 0 11.13 4.13 6.34 6.34 0 0 0 1.81-4.55V8.52a8.28 8.28 0 0 0 4.85 1.56V6.69z"/>
</svg>
</a>
<a href="https://x.com/mrebicom" class="text-gray-400 hover:text-teal-400 transition-colors duration-200" aria-label="X" target="_blank" rel="noopener noreferrer">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
</svg>
</a>
<a href="https://www.facebook.com/mrebicom/" class="text-gray-400 hover:text-teal-400 transition-colors duration-200" aria-label="Facebook" target="_blank" rel="noopener noreferrer">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.73 0 1.323-.593 1.323-1.325V1.325C24 .593 23.407 0 22.675 0z"/>
</svg>
</a>
</div>
<p class="text-xs text-gray-500 mt-4">
Join our community and start your programming journey today!
</p>
</div>
</div>
</div>
</footer>
<script>
// Handle Coming Soon links in footer
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.coming-soon-link').forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
const courseName = this.getAttribute('data-course') || 'default';
if (typeof window.showComingSoonModal === 'function') {
window.showComingSoonModal(courseName);
}
});
});
});
</script>
<!-- Prism.js for Syntax Highlighting -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-html.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-php.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-sql.min.js"></script>
<!-- Theme Switcher -->
<script src="/static/js/theme-switcher.6107c7dde403.js"></script>
<!-- Custom JavaScript -->
<script src="/static/js/code-editor.744452e3251a.js"></script>
<script src="/static/js/code-runner.0ff7847dbd6e.js"></script>
<script src="/static/js/mobile-menu.b685f211e4ca.js"></script>
<script>
// Mobile menu toggle
function toggleMobileMenu() {
const menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
}
// Enhanced language switcher
function changeLanguage(languageCode) {
const changeUrl = `/ru/change-language/?language=${languageCode}`;
if (typeof htmx !== 'undefined') {
htmx.ajax('GET', changeUrl, {
headers: {
'HX-Request': 'true'
}
}).then(function(response) {
if (response.redirect) {
window.location.href = response.redirect;
}
});
} else {
window.location.href = changeUrl;
}
}
// HTMX event listeners
document.body.addEventListener('htmx:beforeRequest', function(evt) {
document.getElementById('loading-indicator').style.display = 'block';
});
document.body.addEventListener('htmx:afterRequest', function(evt) {
document.getElementById('loading-indicator').style.display = 'none';
});
document.body.addEventListener('htmx:afterSwap', function(evt) {
// Reinitialize Prism.js highlighting
if (typeof Prism !== 'undefined') {
Prism.highlightAll();
}
// Close mobile menu
const mobileMenu = document.getElementById('mobile-menu');
if (mobileMenu && !mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.add('hidden');
}
// Scroll to top for new content
window.scrollTo({ top: 0, behavior: 'smooth' });
});
// Smooth scroll for anchor links
document.addEventListener('click', function(e) {
if (e.target.matches('a[href^="#"]')) {
const href = e.target.getAttribute('href');
// Skip if just #
if (href === '#') {
return;
}
e.preventDefault();
const target = document.querySelector(href);
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
}
});
// Coming Soon Modal functionality
function initComingSoonModal() {
const modal = document.getElementById('coming-soon-modal');
const closeBtn = document.getElementById('close-coming-soon-modal');
const backdrop = modal.querySelector('.coming-soon-backdrop');
const notifyForm = document.getElementById('notify-form');
// Course mapping for dynamic content
const courseInfo = {
'python': {
name: 'Python Programming',
description: 'Изучите Python от основ до продвинутых концепций, включая веб-разработку, науку о данных и автоматизацию.'
},
'java': {
name: 'Java Programming',
description: 'Освойте программирование на Java для корпоративных приложений, разработки Android и серверного программирования.'
},
'nodejs': {
name: 'Node.js Development',
description: 'Создавайте масштабируемые серверные приложения с Node.js и фреймворком Express.'
},
'react': {
name: 'React Development',
description: 'Создавайте современные пользовательские интерфейсы с React, хуками и управлением состоянием.'
},
'typescript': {
name: 'TypeScript Guide',
description: 'Пишите более безопасный JavaScript со статической проверкой типов и современными возможностями языка.'
},
'vue': {
name: 'Vue.js Framework',
description: 'Создавайте прогрессивные веб-приложения с Vue.js и его экосистемой.'
},
'angular': {
name: 'Angular Framework',
description: 'Разрабатывайте одностраничные приложения корпоративного уровня с Angular.'
},
'tailwind': {
name: 'Tailwind CSS',
description: 'Создавайте современные дизайны быстро с utility-first CSS фреймворком.'
},
'django': {
name: 'Django Framework',
description: 'Создавайте надежные веб-приложения с фреймворком Django с включенными батареями.'
},
'express': {
name: 'Express.js Framework',
description: 'Создавайте быстрые и минималистичные веб-приложения с Express.js.'
},
'spring': {
name: 'Spring Boot',
description: 'Разрабатывайте корпоративные Java-приложения с фреймворком Spring Boot.'
},
'php': {
name: 'PHP Programming',
description: 'Изучите серверные скрипты с PHP для динамической веб-разработки.'
},
'laravel': {
name: 'Laravel Framework',
description: 'Создавайте элегантные веб-приложения с выразительным синтаксисом Laravel.'
},
'sql': {
name: 'SQL Tutorial',
description: 'Освойте запросы к базам данных и манипулирование данными с SQL.'
},
'mysql': {
name: 'MySQL Tutorial',
description: 'Изучите самую популярную в мире реляционную базу данных с открытым исходным кодом.'
},
'postgresql': {
name: 'PostgreSQL Tutorial',
description: 'Освойте продвинутые возможности системы баз данных PostgreSQL.'
},
'mongodb': {
name: 'MongoDB Tutorial',
description: 'Работайте с гибкой NoSQL документной базой данных для современных приложений.'
},
'flutter': {
name: 'Flutter Tutorial',
description: 'Создавайте красивые нативные мобильные приложения для iOS и Android с единой кодовой базой.'
},
'react-native': {
name: 'React Native Tutorial',
description: 'Создавайте нативные мобильные приложения используя React и JavaScript.'
},
'swift': {
name: 'iOS Swift Tutorial',
description: 'Разрабатывайте нативные iOS-приложения с языком программирования Swift.'
},
'kotlin': {
name: 'Android Kotlin',
description: 'Создавайте современные Android-приложения с языком программирования Kotlin.'
},
'docker': {
name: 'Docker',
description: 'Контейнеризируйте приложения для согласованного развертывания в различных средах.'
},
'git': {
name: 'Git',
description: 'Освойте контроль версий и рабочие процессы совместной работы с Git.'
},
'aws': {
name: 'AWS',
description: 'Развертывайте и масштабируйте приложения на облачной платформе Amazon Web Services.'
},
'kubernetes': {
name: 'Kubernetes',
description: 'Оркестрируйте контейнеризированные приложения в масштабе с Kubernetes.'
},
'go': {
name: 'Go Programming',
description: 'Создавайте быстрое, надежное и эффективное программное обеспечение с языком Go.'
},
'rust': {
name: 'Rust Programming',
description: 'Изучите системное программирование с безопасностью памяти и абстракциями нулевой стоимости.'
},
'csharp': {
name: 'C# Programming',
description: 'Разрабатывайте современные приложения с C# и экосистемой .NET.'
},
'cpp': {
name: 'C++ Programming',
description: 'Освойте системное программирование и высокопроизводительные приложения с C++.'
},
'bootstrap': {
name: 'Bootstrap Framework',
description: 'Создавайте отзывчивые веб-сайты быстро с CSS фреймворком Bootstrap.'
},
'jquery': {
name: 'jQuery Library',
description: 'Упростите программирование на JavaScript с библиотекой jQuery для манипулирования DOM.'
},
'sass': {
name: 'Sass & SCSS',
description: 'Пишите более поддерживаемый CSS с препроцессором Sass и продвинутыми возможностями.'
},
'graphql': {
name: 'GraphQL Tutorial',
description: 'Создавайте эффективные API с языком запросов GraphQL и определением схемы.'
},
'nextjs': {
name: 'Next.js',
description: 'Создавайте полнофункциональные React-приложения с фреймворком Next.js.'
},
'nuxtjs': {
name: 'Nuxt.js',
description: 'Создавайте универсальные Vue.js приложения с фреймворком Nuxt.js.'
},
'redis': {
name: 'Redis Tutorial',
description: 'Изучите хранилище структур данных в памяти для кеширования и приложений реального времени.'
},
'firebase': {
name: 'Firebase Tutorial',
description: 'Создавайте веб и мобильные приложения с бэкенд-сервисами Google Firebase.'
},
'elasticsearch': {
name: 'Elasticsearch Tutorial',
description: 'Реализуйте мощный поиск и аналитику с движком Elasticsearch.'
},
'c': {
name: 'C Programming',
description: 'Изучите основы системного программирования с языком C.'
},
'ruby': {
name: 'Ruby Programming',
description: 'Пишите элегантный код с языком программирования Ruby и фреймворком Rails.'
},
'scala': {
name: 'Scala Programming',
description: 'Объедините объектно-ориентированное и функциональное программирование со Scala.'
},
'r': {
name: 'R Programming',
description: 'Выполняйте статистические вычисления и анализ данных с языком R.'
},
'matlab': {
name: 'MATLAB Programming',
description: 'Решайте инженерные и научные задачи с программированием MATLAB.'
},
'perl': {
name: 'Perl Programming',
description: 'Освойте обработку текста и системное администрирование с Perl.'
},
'assembly': {
name: 'Assembly Language',
description: 'Понимайте низкоуровневое программирование и архитектуру компьютера с Assembly.'
},
'lua': {
name: 'Lua Programming',
description: 'Изучите легкий язык сценариев для встроенных систем и игр.'
},
'xamarin': {
name: 'Xamarin Tutorial',
description: 'Создавайте кроссплатформенные мобильные приложения с Xamarin и C#.'
},
'ionic': {
name: 'Ionic Framework',
description: 'Создавайте гибридные мобильные приложения с Ionic и веб-технологиями.'
},
'phonegap': {
name: 'PhoneGap Tutorial',
description: 'Создавайте мобильные приложения используя веб-технологии с платформой PhoneGap.'
},
'pwa': {
name: 'Progressive Web Apps',
description: 'Создавайте похожие на приложения интерфейсы в вебе с технологиями Progressive Web App.'
},
'mobile-ui': {
name: 'Mobile UI Design',
description: 'Разрабатывайте красивые и интуитивные пользовательские интерфейсы для мобильных приложений.'
},
'data-structures': {
name: 'Data Structures',
description: 'Освойте фундаментальные структуры данных для эффективной реализации алгоритмов.'
},
'algorithms': {
name: 'Algorithms Tutorial',
description: 'Изучите алгоритмическое мышление и техники решения проблем.'
},
'oop': {
name: 'Object Oriented Programming',
description: 'Понимайте концепции объектно-ориентированного программирования и принципы дизайна.'
},
'design-patterns': {
name: 'Design Patterns',
description: 'Применяйте проверенные шаблоны проектирования программного обеспечения для решения общих проблем программирования.'
},
'api-development': {
name: 'API Development',
description: 'Проектируйте и создавайте надежные API для веб и мобильных приложений.'
},
'rest-api': {
name: 'REST API Tutorial',
description: 'Создавайте RESTful веб-сервисы следуя лучшим практикам и стандартам.'
},
'microservices': {
name: 'Microservices',
description: 'Архитектурируйте масштабируемые приложения используя шаблоны проектирования микросервисов.'
},
'machine-learning': {
name: 'Machine Learning',
description: 'Создавайте интеллектуальные системы с алгоритмами и техниками машинного обучения.'
},
'ai': {
name: 'Artificial Intelligence',
description: 'Исследуйте концепции ИИ и создавайте интеллектуальные приложения с современными фреймворками.'
},
'blockchain': {
name: 'Blockchain Programming',
description: 'Разрабатывайте децентрализованные приложения и умные контракты на блокчейн-платформах.'
},
'game-dev': {
name: 'Game Development',
description: 'Создавайте увлекательные игры используя современные игровые движки и техники программирования.'
},
'webcomponents': {
name: 'Web Components',
description: 'Создавайте многоразовые пользовательские элементы со стандартами Web Components.'
},
'database-design': {
name: 'Database Design',
description: 'Проектируйте эффективные и масштабируемые схемы баз данных и отношения.'
},
'sqlserver': {
name: 'SQL Server Tutorial',
description: 'Работайте с системой управления базами данных Microsoft SQL Server.'
},
'oracle': {
name: 'Oracle Database',
description: 'Освойте техники администрирования и разработки баз данных Oracle.'
},
'mariadb': {
name: 'MariaDB Tutorial',
description: 'Изучите возможности и администрирование базы данных MariaDB.'
},
'dotnet': {
name: 'ASP.NET Core',
description: 'Создавайте современные веб-приложения с фреймворком ASP.NET Core.'
},
'flask': {
name: 'Flask Framework',
description: 'Создавайте легкие веб-приложения с микрофреймворком Python Flask.'
},
'android-java': {
name: 'Android Java',
description: 'Разрабатывайте Android-приложения используя язык программирования Java.'
},
'swiftui': {
name: 'SwiftUI Tutorial',
description: 'Создавайте современные iOS-интерфейсы с декларативным фреймворком SwiftUI.'
},
'prompt-engineering': {
name: 'AI Prompt Engineering',
description: 'Освойте искусство эффективного общения с ИИ-системами и языковыми моделями.'
},
'default': {
name: 'Новый Курс',
description: 'Этот всеобъемлющий курс разрабатывается с использованием новейших отраслевых стандартов и лучших практик.'
}
};
// Show modal function
function showModal(courseName = 'default') {
const info = courseInfo[courseName] || courseInfo['default'];
const courseNameElement = document.getElementById('course-name');
const courseDescElement = modal.querySelector('.course-description');
if (courseNameElement) courseNameElement.textContent = info.name;
if (courseDescElement) courseDescElement.textContent = info.description;
modal.classList.remove('hidden');
modal.classList.add('active');
document.body.style.overflow = 'hidden';
}
// Hide modal function
function hideModal() {
modal.classList.remove('active');
modal.classList.add('hidden');
document.body.style.overflow = 'auto';
// Reset form
if (notifyForm) {
notifyForm.reset();
}
}
// Event listeners
if (closeBtn) {
closeBtn.addEventListener('click', hideModal);
}
if (backdrop) {
backdrop.addEventListener('click', hideModal);
}
// Escape key
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && modal.classList.contains('active')) {
hideModal();
}
});
// Handle notify form submission
if (notifyForm) {
notifyForm.addEventListener('submit', function(e) {
e.preventDefault();
const email = document.getElementById('notify-email').value;
if (email) {
// Here you would typically send the email to your backend
console.log('Notify email:', email);
// Show success message
alert('Thank you! We will notify you when this course becomes available.');
hideModal();
}
});
}
// Detect clicks on # links and show modal
document.addEventListener('click', function(e) {
if (e.target.matches('a[href="#"]') || e.target.closest('a[href="#"]')) {
e.preventDefault();
// Try to extract course name from link text or data attribute
const link = e.target.matches('a') ? e.target : e.target.closest('a');
const linkText = link.textContent.toLowerCase();
let courseName = 'default';
if (linkText.includes('python')) courseName = 'python';
else if (linkText.includes('java') && !linkText.includes('javascript')) courseName = 'java';
else if (linkText.includes('node')) courseName = 'nodejs';
else if (linkText.includes('react')) courseName = 'react';
else if (linkText.includes('typescript')) courseName = 'typescript';
else if (linkText.includes('vue')) courseName = 'vue';
else if (linkText.includes('angular')) courseName = 'angular';
else if (linkText.includes('tailwind')) courseName = 'tailwind';
else if (linkText.includes('django')) courseName = 'django';
else if (linkText.includes('express')) courseName = 'express';
else if (linkText.includes('spring')) courseName = 'spring';
else if (linkText.includes('php')) courseName = 'php';
else if (linkText.includes('laravel')) courseName = 'laravel';
else if (linkText.includes('sql') && !linkText.includes('mysql') && !linkText.includes('postgresql')) courseName = 'sql';
else if (linkText.includes('mysql')) courseName = 'mysql';
else if (linkText.includes('postgresql')) courseName = 'postgresql';
else if (linkText.includes('mongodb')) courseName = 'mongodb';
else if (linkText.includes('flutter')) courseName = 'flutter';
else if (linkText.includes('react native')) courseName = 'react-native';
else if (linkText.includes('swift')) courseName = 'swift';
else if (linkText.includes('kotlin')) courseName = 'kotlin';
else if (linkText.includes('docker')) courseName = 'docker';
else if (linkText.includes('git')) courseName = 'git';
else if (linkText.includes('aws')) courseName = 'aws';
else if (linkText.includes('kubernetes')) courseName = 'kubernetes';
else if (linkText.includes('go')) courseName = 'go';
else if (linkText.includes('rust')) courseName = 'rust';
else if (linkText.includes('c#')) courseName = 'csharp';
else if (linkText.includes('c++')) courseName = 'cpp';
else if (linkText.includes('bootstrap')) courseName = 'bootstrap';
else if (linkText.includes('jquery')) courseName = 'jquery';
else if (linkText.includes('sass')) courseName = 'sass';
else if (linkText.includes('graphql')) courseName = 'graphql';
else if (linkText.includes('next')) courseName = 'nextjs';
else if (linkText.includes('nuxt')) courseName = 'nuxtjs';
else if (linkText.includes('redis')) courseName = 'redis';
else if (linkText.includes('firebase')) courseName = 'firebase';
else if (linkText.includes('elasticsearch')) courseName = 'elasticsearch';
else if (linkText.includes('c programming')) courseName = 'c';
else if (linkText.includes('ruby')) courseName = 'ruby';
else if (linkText.includes('scala')) courseName = 'scala';
else if (linkText.includes('r programming')) courseName = 'r';
else if (linkText.includes('matlab')) courseName = 'matlab';
else if (linkText.includes('perl')) courseName = 'perl';
else if (linkText.includes('assembly')) courseName = 'assembly';
else if (linkText.includes('lua')) courseName = 'lua';
else if (linkText.includes('xamarin')) courseName = 'xamarin';
else if (linkText.includes('ionic')) courseName = 'ionic';
else if (linkText.includes('phonegap')) courseName = 'phonegap';
else if (linkText.includes('progressive web')) courseName = 'pwa';
else if (linkText.includes('mobile ui')) courseName = 'mobile-ui';
else if (linkText.includes('data structures')) courseName = 'data-structures';
else if (linkText.includes('algorithms')) courseName = 'algorithms';
else if (linkText.includes('object oriented')) courseName = 'oop';
else if (linkText.includes('design patterns')) courseName = 'design-patterns';
else if (linkText.includes('api development')) courseName = 'api-development';
else if (linkText.includes('rest api')) courseName = 'rest-api';
else if (linkText.includes('microservices')) courseName = 'microservices';
else if (linkText.includes('machine learning')) courseName = 'machine-learning';
else if (linkText.includes('artificial intelligence')) courseName = 'ai';
else if (linkText.includes('blockchain')) courseName = 'blockchain';
else if (linkText.includes('game development')) courseName = 'game-dev';
else if (linkText.includes('web components')) courseName = 'webcomponents';
else if (linkText.includes('database design')) courseName = 'database-design';
else if (linkText.includes('sql server')) courseName = 'sqlserver';
else if (linkText.includes('oracle')) courseName = 'oracle';
else if (linkText.includes('mariadb')) courseName = 'mariadb';
else if (linkText.includes('asp.net') || linkText.includes('dotnet')) courseName = 'dotnet';
else if (linkText.includes('flask')) courseName = 'flask';
else if (linkText.includes('android java')) courseName = 'android-java';
else if (linkText.includes('swiftui')) courseName = 'swiftui';
else if (linkText.includes('prompt engineering') || linkText.includes('ai prompt')) courseName = 'prompt-engineering';
showModal(courseName);
}
});
// Make showModal globally available
window.showComingSoonModal = showModal;
}
// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
// Initialize Prism.js
if (typeof Prism !== 'undefined') {
Prism.highlightAll();
}
// Hide loading indicator
document.getElementById('loading-indicator').style.display = 'none';
// RTL adjustments
if (window.siteConfig.isRTL) {
document.body.classList.add('rtl');
}
// Initialize Coming Soon Modal
initComingSoonModal();
});
</script>
<!-- Block for additional JavaScript -->
<!-- Analytics (add your tracking code here) -->
<!-- Add Google Analytics, Plausible, or other analytics scripts here -->
</body>
</html> 