Spaces:

alexdatamed
/

Lecture2_DataScienceWorkflow

Running

App Files Files Community

Lecture2_DataScienceWorkflow / index.html

alexdatamed

Update index.html

49ea6dd verified 10 months ago

raw

history blame contribute delete

6.32 kB

	<!DOCTYPE html>
	<html lang="uk">
	<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="app-container">
	<!-- Заголовок -->
	<header class="header">
	<div class="container">
	<h1>Workflow of a Data Science project</h1>
	</div>
	</header>

	<!-- Основний контент -->
	<main class="container main-content">
	<div class="flex workflow-container">
	<!-- Бічна панель -->
	<aside class="sidebar">
	<div class="sidebar-content">
	<h3>Етапи процесу</h3>
	<ul class="steps-list" id="sidebarStepsList">
	<!-- Буде заповнено з JavaScript -->
	</ul>
	<div class="progress-container">
	<h4>Ваш прогрес</h4>
	<div class="progress-bar">
	<div class="progress-fill" id="progressFill"></div>
	</div>
	<p id="progressText">0/7 етапів вивчено</p>
	<button class="btn btn--secondary" id="resetProgressBtn">Скинути прогрес</button>
	</div>
	</div>
	</aside>

	<!-- Основна панель -->
	<div class="main-panel">
	<!-- Вступ -->
	<section class="introduction" id="introSection">
	<div class="card">
	<div class="card__body">
	<h2>Вступ до робочого процесу науки про дані</h2>
	<p id="introText"></p>
	<p>Натисніть на будь-який етап у діаграмі нижче, щоб дізнатися більше.</p>
	</div>
	</div>
	</section>

	<!-- Візуалізація робочого процесу -->
	<section class="workflow-visualization">
	<div class="workflow-diagram" id="workflowDiagram">
	<!-- Буде заповнено з JavaScript -->
	</div>
	</section>

	<!-- Панель деталей етапу -->
	<section class="step-details" id="stepDetailsSection">
	<div class="card">
	<div class="card__header">
	<h2 id="stepTitle"></h2>
	<div class="step-navigation">
	<button class="btn btn--outline" id="prevStepBtn">← Попередній</button>
	<button class="btn btn--primary" id="nextStepBtn">Наступний →</button>
	</div>
	</div>
	<div class="card__body">
	<div class="step-content">
	<div class="step-description">
	<p id="stepDescription"></p>
	</div>

	<div class="step-key-points">
	<h3>Ключові моменти</h3>
	<ul id="stepKeyPoints">
	<!-- Буде заповнено з JavaScript -->
	</ul>
	</div>

	<div class="step-example">
	<h3>Приклад з реального світу</h3>
	<div class="example-box" id="stepExample"></div>
	</div>

	<div class="step-tips">
	<h3>Поради та найкращі практики</h3>
	<ul id="stepTips">
	<!-- Буде заповнено з JavaScript -->
	</ul>
	</div>

	<div class="step-quiz">
	<h3>Перевірте свої знання</h3>
	<div class="quiz-container" id="quizContainer">
	<div class="quiz-question" id="quizQuestion"></div>
	<div class="quiz-options" id="quizOptions">
	<!-- Буде заповнено з JavaScript -->
	</div>
	<div class="quiz-result" id="quizResult"></div>
	<button class="btn btn--primary" id="checkAnswerBtn">Перевірити відповідь</button>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>
	</div>
	</div>
	</main>

	<!-- Футер -->
	<footer class="footer">
	<div class="container">
	<p>© 2025 Робочий процес науки про дані \| Навчальний дашборд</p>
	</div>
	</footer>
	</div>

	<script src="app.js"></script>
	</body>
	</html>