/
dayekb
/
vibecoding_type_trainer
Обзор
Документация
Войти
/
dayekb
/
vibecoding_type_trainer
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
index.html
144 строки
7 KB
dayekb
upload files
06 сен 2025, 09:47
06 сен 2025, 09:47
239b2d1
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Тренажер слепой печати</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <header> <div class="header-top"> <h1>Тренажер слепой печати</h1> <div class="theme-switcher"> <button id="theme-toggle" class="theme-btn" title="Переключить тему"> <span class="theme-icon">🌙</span> </button> </div> </div> <div class="header-controls"> <div class="language-switcher"> <button id="lang-ru" class="lang-btn active">Русский</button> <button id="lang-en" class="lang-btn">English</button> </div> <div class="mode-selector"> <button class="mode-btn active" data-mode="practice">Обычная практика</button> <button class="mode-btn" data-mode="training">Простая тренировка</button> </div> </div> </header> <div class="stats-panel"> <div class="stat"> <span class="stat-label">Скорость:</span> <span id="wpm">0</span> зн/мин </div> <div class="stat"> <span class="stat-label">Точность:</span> <span id="accuracy">100</span>% </div> <div class="stat"> <span class="stat-label">Время:</span> <span id="timer">00:00</span> </div> <div class="stat"> <span class="stat-label">Ошибки:</span> <span id="errors">0</span> </div> </div> <div class="exercise-panel"> <div class="text-display"> <div id="text-to-type" class="text-content"></div> </div> <div class="input-area"> <textarea id="text-input" placeholder="Начните печатать здесь..." autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea> </div> </div> <div class="keyboard-display"> <div class="keyboard" id="keyboard"></div> </div> <div class="controls"> <button id="new-exercise" class="btn primary">Новое упражнение</button> <button id="pause-btn" class="btn secondary">Пауза</button> <button id="reset-btn" class="btn secondary">Сброс</button> </div> <div class="settings-panel"> <div class="difficulty-selector"> <h3>Уровень сложности:</h3> <div class="difficulty-buttons"> <button class="difficulty-btn active" data-level="easy">Легкий</button> <button class="difficulty-btn" data-level="medium">Средний</button> <button class="difficulty-btn" data-level="hard">Сложный</button> </div> </div> </div> <div class="training-panel" id="training-panel" style="display: none;"> <div class="training-progress"> <h3>Прогресс обучения</h3> <div class="progress-bar"> <div class="progress-fill" id="progress-fill"></div> </div> <div class="progress-text"> <span id="current-lesson">Урок 1: Верхний ряд</span> <span id="progress-percent">0%</span> </div> </div> <div class="lesson-info"> <h4 id="lesson-title">Изучаем верхний ряд клавиш</h4> <p id="lesson-description">Нажмите клавиши в указанном порядке. Не торопитесь, главное - точность!</p> <div class="error-warning" id="error-warning" style="display: none;"> ⚠️ Внимание! Ошибок: <span id="error-count">0</span> из <span id="max-errors">3</span> </div> <div class="keys-to-press" id="keys-to-press"></div> </div> </div> </div> <!-- Модальное окно для результатов --> <div id="result-modal" class="modal" style="display: none;"> <div class="modal-content"> <div class="modal-header"> <h2>🎉 Упражнение завершено!</h2> <button class="modal-close" id="modal-close">×</button> </div> <div class="modal-body"> <div class="result-stats"> <div class="stat-item"> <span class="stat-icon">⚡</span> <span class="stat-label">Скорость:</span> <span class="stat-value" id="result-wpm">0</span> зн/мин </div> <div class="stat-item"> <span class="stat-icon">🎯</span> <span class="stat-label">Точность:</span> <span class="stat-value" id="result-accuracy">100</span>% </div> <div class="stat-item"> <span class="stat-icon">❌</span> <span class="stat-label">Ошибки:</span> <span class="stat-value" id="result-errors">0</span> </div> <div class="stat-item"> <span class="stat-icon">⏱️</span> <span class="stat-label">Время:</span> <span class="stat-value" id="result-time">0</span> сек </div> </div> </div> <div class="modal-footer"> <button class="btn secondary" id="modal-cancel">Остаться здесь</button> <button class="btn primary" id="modal-next">Следующее упражнение</button> </div> </div> </div> <script src="script.js"></script> </body> </html>