Hugging Face's logo

Spaces:
alexdatamed
/
Lecture2_DataScienceWorkflow
Running

App Files Community
alexdatamed commited on
Commit
47ce2fe
·
verified ·
1 Parent(s): 4ad38c8

Upload index.html

Browse files
Files changed (1) hide show
  1. index.html +103 -97
index.html CHANGED
@@ -1,116 +1,122 @@
1
  <!DOCTYPE html>
2
- <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>AI & Data Science Project Lifecycle Dashboard</title>
7
  <link rel="stylesheet" href="style.css">
8
- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
  </head>
10
  <body>
11
- <!-- Header -->
12
- <header class="header">
13
- <div class="container">
14
- <h1 class="header__title">AI & Data Science Project Lifecycle</h1>
15
- <p class="header__subtitle">Interactive Dashboard for ML Project Management</p>
16
- </div>
17
- </header>
18
 
19
- <!-- Main Content -->
20
- <main class="main">
21
- <div class="container">
22
- <!-- Filters Sidebar -->
23
- <aside class="filters">
24
- <div class="filters__section">
25
- <h3 class="filters__title">Industry Domain</h3>
26
- <select id="industryFilter" class="form-control">
27
- <option value="">All Industries</option>
28
- <option value="Healthcare">Healthcare</option>
29
- <option value="Retail">Retail</option>
30
- <option value="Finance">Finance</option>
31
- <option value="Manufacturing">Manufacturing</option>
32
- <option value="Education">Education</option>
33
- </select>
34
- </div>
35
-
36
- <div class="filters__section">
37
- <h3 class="filters__title">Model Type</h3>
38
- <select id="modelFilter" class="form-control">
39
- <option value="">All Models</option>
40
- <option value="Logistic Regression">Logistic Regression</option>
41
- <option value="Random Forest">Random Forest</option>
42
- <option value="SVM">SVM</option>
43
- <option value="Neural Networks">Neural Networks</option>
44
- <option value="Linear Regression">Linear Regression</option>
45
- <option value="K-Means">K-Means</option>
46
- </select>
47
- </div>
48
-
49
- <div class="filters__section">
50
- <h3 class="filters__title">Dataset Version</h3>
51
- <select id="versionFilter" class="form-control">
52
- <option value="">All Versions</option>
53
- <option value="v1.0">v1.0</option>
54
- <option value="v1.1">v1.1</option>
55
- <option value="v1.2">v1.2</option>
56
- <option value="v2.0">v2.0</option>
57
- </select>
58
- </div>
59
-
60
- <div class="filters__section">
61
- <h3 class="filters__title">Progress Overview</h3>
62
- <div class="progress-summary">
63
- <div class="progress-item">
64
- <span class="progress-label">Completed:</span>
65
- <span class="progress-value" id="completedCount">2</span>
66
- </div>
67
- <div class="progress-item">
68
- <span class="progress-label">In Progress:</span>
69
- <span class="progress-value" id="inProgressCount">1</span>
70
- </div>
71
- <div class="progress-item">
72
- <span class="progress-label">Pending:</span>
73
- <span class="progress-value" id="pendingCount">4</span>
74
  </div>
75
  </div>
76
- </div>
77
- </aside>
78
 
79
- <!-- Timeline -->
80
- <section class="timeline-container">
81
- <div class="timeline">
82
- <div class="timeline__line"></div>
83
- <div class="timeline__stages" id="timelineStages">
84
- <!-- Timeline stages will be populated by JavaScript -->
85
- </div>
86
- </div>
87
- </section>
88
-
89
- <!-- Content Area -->
90
- <section class="content-area">
91
- <div class="stage-detail" id="stageDetail">
92
- <div class="welcome-message">
93
- <h2>Welcome to the AI & Data Science Project Lifecycle</h2>
94
- <p>Click on any stage in the timeline to explore detailed information about that phase of the project lifecycle.</p>
95
- <div class="overview-stats">
96
- <div class="stat-card">
97
- <h3>Total Stages</h3>
98
- <div class="stat-value">7</div>
99
  </div>
100
- <div class="stat-card">
101
- <h3>Completion Rate</h3>
102
- <div class="stat-value">43%</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
103
  </div>
104
- <div class="stat-card">
105
- <h3>Current Phase</h3>
106
- <div class="stat-value">Preprocessing</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
107
  </div>
108
  </div>
109
- </div>
110
  </div>
111
- </section>
112
- </div>
113
- </main>
 
 
 
 
 
 
 
114
 
115
  <script src="app.js"></script>
116
  </body>
 
1
  <!DOCTYPE html>
2
+ <html lang="uk">
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>
122
  </body>