Hugging Face's logo

Spaces:
alexdatamed
/
Lecture2_DataScienceWorkflow
Running

App Files Community
alexdatamed commited on
Commit
babf82e
·
verified ·
1 Parent(s): e0cfe87

Upload index.html

Browse files
Files changed (1) hide show
  1. index.html +93 -104
index.html CHANGED
@@ -3,130 +3,119 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Python Код-Тестер для Студентів</title>
7
  <link rel="stylesheet" href="style.css">
8
  </head>
9
  <body>
10
- <div class="container">
 
11
  <header class="header">
12
- <h1>Python Код-Тестер</h1>
13
- <p class="header__subtitle">Вивчайте основи Python через практичні завдання</p>
 
14
  </header>
15
 
16
- <main class="main-content">
17
- <div class="sidebar">
18
- <div class="card">
19
- <div class="card__header">
20
- <h3>Завдання</h3>
21
- </div>
22
- <div class="card__body">
23
- <div class="task-list" id="taskList">
24
- <!-- Tasks will be populated by JavaScript -->
25
- </div>
26
- </div>
27
- </div>
28
-
29
- <div class="card mt-8">
30
- <div class="card__header">
31
- <h3>Приклади коду</h3>
32
- </div>
33
- <div class="card__body">
34
- <div class="examples">
35
- <div class="example-section">
36
- <h4>Змінні:</h4>
37
- <code>name = "Python"</code>
38
- <code>age = 25</code>
39
- <code>pi = 3.14159</code>
40
- <code>is_active = True</code>
41
- </div>
42
- <div class="example-section">
43
- <h4>Оператори:</h4>
44
- <code>result = 10 + 5</code>
45
- <code>comparison = 10 > 5</code>
46
- <code>logic = True and False</code>
47
- </div>
48
- <div class="example-section">
49
- <h4>Функції:</h4>
50
- <code>print("Hello, World!")</code>
51
- <code>type(42)</code>
52
- <code>int("123")</code>
53
- <code>str(456)</code>
54
  </div>
 
 
55
  </div>
56
  </div>
57
- </div>
58
- </div>
59
 
60
- <div class="editor-section">
61
- <div class="card">
62
- <div class="card__header">
63
- <div class="flex justify-between items-center">
64
- <h3 id="currentTaskTitle">Оберіть завдання</h3>
65
- <div class="task-actions">
66
- <button class="btn btn--sm btn--secondary" id="hintBtn" style="display: none;">Підказка</button>
67
- <button class="btn btn--sm btn--outline" id="solutionBtn" style="display: none;">Розв'язок</button>
 
68
  </div>
69
  </div>
70
- </div>
71
- <div class="card__body">
72
- <div id="taskDescription" class="task-description">
73
- Оберіть завдання зі списку ліворуч, щоб почати програмування на Python.
74
- </div>
75
-
76
- <div class="editor-container">
77
- <div class="editor-header">
78
- <span class="editor-title">Python Редактор</span>
79
- <button class="btn btn--primary btn--sm" id="runBtn">▶ Запустити</button>
80
- </div>
81
- <textarea
82
- id="codeEditor"
83
- class="code-editor"
84
- placeholder="# Введіть ваш Python код тут
85
- print('Привіт, світ!')"
86
- spellcheck="false"></textarea>
87
  </div>
88
- </div>
89
- </div>
90
 
91
- <div class="card mt-8">
92
- <div class="card__header">
93
- <h3>Результат виконання</h3>
94
- <div class="output-status" id="outputStatus"></div>
95
- </div>
96
- <div class="card__body">
97
- <div class="output-container">
98
- <pre id="output" class="output">Натисніть "Запустити" для виконання коду...</pre>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
99
  </div>
100
- </div>
101
  </div>
102
  </div>
103
  </main>
104
 
105
- <!-- Hint Modal -->
106
- <div id="hintModal" class="modal hidden">
107
- <div class="modal-content">
108
- <div class="modal-header">
109
- <h3>Підказка</h3>
110
- <button class="modal-close" id="closeHintModal">&times;</button>
111
- </div>
112
- <div class="modal-body">
113
- <p id="hintText"></p>
114
- </div>
115
- </div>
116
- </div>
117
-
118
- <!-- Solution Modal -->
119
- <div id="solutionModal" class="modal hidden">
120
- <div class="modal-content">
121
- <div class="modal-header">
122
- <h3>Розв'язок</h3>
123
- <button class="modal-close" id="closeSolutionModal">&times;</button>
124
- </div>
125
- <div class="modal-body">
126
- <pre id="solutionCode" class="solution-code"></pre>
127
- </div>
128
  </div>
129
- </div>
130
  </div>
131
 
132
  <script src="app.js"></script>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Робочий процес науки про дані</title>
7
  <link rel="stylesheet" href="style.css">
8
  </head>
9
  <body>
10
+ <div class="app-container">
11
+ <!-- Заголовок -->
12
  <header class="header">
13
+ <div class="container">
14
+ <h1>Робочий процес науки про дані</h1>
15
+ </div>
16
  </header>
17
 
18
+ <!-- Основний контент -->
19
+ <main class="container main-content">
20
+ <div class="flex workflow-container">
21
+ <!-- Бічна панель -->
22
+ <aside class="sidebar">
23
+ <div class="sidebar-content">
24
+ <h3>Етапи процесу</h3>
25
+ <ul class="steps-list" id="sidebarStepsList">
26
+ <!-- Буде заповнено з JavaScript -->
27
+ </ul>
28
+ <div class="progress-container">
29
+ <h4>Ваш прогрес</h4>
30
+ <div class="progress-bar">
31
+ <div class="progress-fill" id="progressFill"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
32
  </div>
33
+ <p id="progressText">0/7 етапів вивчено</p>
34
+ <button class="btn btn--secondary" id="resetProgressBtn">Скинути прогрес</button>
35
  </div>
36
  </div>
37
+ </aside>
 
38
 
39
+ <!-- Основна панель -->
40
+ <div class="main-panel">
41
+ <!-- Вступ -->
42
+ <section class="introduction" id="introSection">
43
+ <div class="card">
44
+ <div class="card__body">
45
+ <h2>Вступ до робочого процесу науки про дані</h2>
46
+ <p id="introText"></p>
47
+ <p>Натисніть на будь-який етап у діаграмі нижче, щоб дізнатися більше.</p>
48
  </div>
49
  </div>
50
+ </section>
51
+
52
+ <!-- Візуалізація робочого процесу -->
53
+ <section class="workflow-visualization">
54
+ <div class="workflow-diagram" id="workflowDiagram">
55
+ <!-- Буде заповнено з JavaScript -->
 
 
 
 
 
 
 
 
 
 
 
56
  </div>
57
+ </section>
 
58
 
59
+ <!-- Панель деталей етапу -->
60
+ <section class="step-details" id="stepDetailsSection">
61
+ <div class="card">
62
+ <div class="card__header">
63
+ <h2 id="stepTitle"></h2>
64
+ <div class="step-navigation">
65
+ <button class="btn btn--outline" id="prevStepBtn">← Попередній</button>
66
+ <button class="btn btn--primary" id="nextStepBtn">Наступний →</button>
67
+ </div>
68
+ </div>
69
+ <div class="card__body">
70
+ <div class="step-content">
71
+ <div class="step-description">
72
+ <p id="stepDescription"></p>
73
+ </div>
74
+
75
+ <div class="step-key-points">
76
+ <h3>Ключові моменти</h3>
77
+ <ul id="stepKeyPoints">
78
+ <!-- Буде заповнено з JavaScript -->
79
+ </ul>
80
+ </div>
81
+
82
+ <div class="step-example">
83
+ <h3>Приклад з реального світу</h3>
84
+ <div class="example-box" id="stepExample"></div>
85
+ </div>
86
+
87
+ <div class="step-tips">
88
+ <h3>Поради та найкращі практики</h3>
89
+ <ul id="stepTips">
90
+ <!-- Буде заповнено з JavaScript -->
91
+ </ul>
92
+ </div>
93
+
94
+ <div class="step-quiz">
95
+ <h3>Перевірте свої знання</h3>
96
+ <div class="quiz-container" id="quizContainer">
97
+ <div class="quiz-question" id="quizQuestion"></div>
98
+ <div class="quiz-options" id="quizOptions">
99
+ <!-- Буде заповнено з JavaScript -->
100
+ </div>
101
+ <div class="quiz-result" id="quizResult"></div>
102
+ <button class="btn btn--primary" id="checkAnswerBtn">Перевіри��и відповідь</button>
103
+ </div>
104
+ </div>
105
+ </div>
106
+ </div>
107
  </div>
108
+ </section>
109
  </div>
110
  </div>
111
  </main>
112
 
113
+ <!-- Футер -->
114
+ <footer class="footer">
115
+ <div class="container">
116
+ <p>© 2025 Робочий процес науки про дані | Навчальний дашборд</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
117
  </div>
118
+ </footer>
119
  </div>
120
 
121
  <script src="app.js"></script>