File size: 6,324 Bytes
032e1f9 47ce2fe 032e1f9 47ce2fe 032e1f9 47ce2fe 49ea6dd 47ce2fe 032e1f9 47ce2fe a449d24 47ce2fe 032e1f9 47ce2fe a449d24 47ce2fe babf82e 47ce2fe babf82e 032e1f9 47ce2fe 032e1f9 47ce2fe 032e1f9 | 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 | <!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> |