Spaces:
Running
Running
File size: 5,944 Bytes
04fd8b2 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 | <!DOCTYPE html>
<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> |