Spaces:
Running
Running
| <html lang="uk"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Python Код-Тестер для Студентів</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header class="header"> | |
| <h1>Python Код-Тестер</h1> | |
| <p class="header__subtitle">Вивчайте основи Python через практичні завдання</p> | |
| </header> | |
| <main class="main-content"> | |
| <div class="sidebar"> | |
| <div class="card"> | |
| <div class="card__header"> | |
| <h3>Завдання</h3> | |
| </div> | |
| <div class="card__body"> | |
| <div class="task-list" id="taskList"> | |
| <!-- Tasks will be populated by JavaScript --> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card mt-8"> | |
| <div class="card__header"> | |
| <h3>Приклади коду</h3> | |
| </div> | |
| <div class="card__body"> | |
| <div class="examples"> | |
| <div class="example-section"> | |
| <h4>Змінні:</h4> | |
| <code>name = "Python"</code> | |
| <code>age = 25</code> | |
| <code>pi = 3.14159</code> | |
| <code>is_active = True</code> | |
| </div> | |
| <div class="example-section"> | |
| <h4>Оператори:</h4> | |
| <code>result = 10 + 5</code> | |
| <code>comparison = 10 > 5</code> | |
| <code>logic = True and False</code> | |
| </div> | |
| <div class="example-section"> | |
| <h4>Функції:</h4> | |
| <code>print("Hello, World!")</code> | |
| <code>type(42)</code> | |
| <code>int("123")</code> | |
| <code>str(456)</code> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="editor-section"> | |
| <div class="card"> | |
| <div class="card__header"> | |
| <div class="flex justify-between items-center"> | |
| <h3 id="currentTaskTitle">Оберіть завдання</h3> | |
| <div class="task-actions"> | |
| <button class="btn btn--sm btn--secondary" id="hintBtn" style="display: none;">Підказка</button> | |
| <button class="btn btn--sm btn--outline" id="solutionBtn" style="display: none;">Розв'язок</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card__body"> | |
| <div id="taskDescription" class="task-description"> | |
| Оберіть завдання зі списку ліворуч, щоб почати програмування на Python. | |
| </div> | |
| <div class="editor-container"> | |
| <div class="editor-header"> | |
| <span class="editor-title">Python Редактор</span> | |
| <button class="btn btn--primary btn--sm" id="runBtn">▶ Запустити</button> | |
| </div> | |
| <textarea | |
| id="codeEditor" | |
| class="code-editor" | |
| placeholder="# Введіть ваш Python код тут | |
| print('Привіт, світ!')" | |
| spellcheck="false"></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card mt-8"> | |
| <div class="card__header"> | |
| <h3>Результат виконання</h3> | |
| <div class="output-status" id="outputStatus"></div> | |
| </div> | |
| <div class="card__body"> | |
| <div class="output-container"> | |
| <pre id="output" class="output">Натисніть "Запустити" для виконання коду...</pre> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Hint Modal --> | |
| <div id="hintModal" class="modal hidden"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h3>Підказка</h3> | |
| <button class="modal-close" id="closeHintModal">×</button> | |
| </div> | |
| <div class="modal-body"> | |
| <p id="hintText"></p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Solution Modal --> | |
| <div id="solutionModal" class="modal hidden"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h3>Розв'язок</h3> | |
| <button class="modal-close" id="closeSolutionModal">×</button> | |
| </div> | |
| <div class="modal-body"> | |
| <pre id="solutionCode" class="solution-code"></pre> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> |