Hugging Face's logo

Spaces:
alexdatamed
/
Lecture2_DataScienceWorkflow
Running

App Files Community
alexdatamed commited on
Commit
a449d24
·
verified ·
1 Parent(s): b56ac5a

Upload index.html

Browse files
Files changed (1) hide show
  1. index.html +97 -103
index.html CHANGED
@@ -1,122 +1,116 @@
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>Workflow of a Data Science project</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>Workflow of a Data Science project</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>
 
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>