Spaces:
Running
Running
File size: 8,251 Bytes
574e9f7 | 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 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 | <!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Literacy для всіх професій</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="dashboard">
<!-- Header -->
<header class="dashboard-header">
<div class="container">
<h1 class="dashboard-title">Every Job Function Needs to Learn to Use Data</h1>
<p class="subtitle">Кожна професійна функція повинна навчитися використовувати дані</p>
</div>
</header>
<div class="dashboard-content">
<!-- Sidebar Navigation -->
<aside class="sidebar">
<div class="nav-section">
<h3>🏠 Головна</h3>
<button class="nav-item active" onclick="app.showHome()">
<span class="nav-icon">📊</span>
<span>Огляд</span>
</button>
</div>
<div class="nav-section">
<h3>👥 Професії</h3>
<div class="profession-nav" id="professionNav">
<!-- Profession navigation will be populated by JavaScript -->
</div>
</div>
<div class="nav-section">
<h3>📚 Навчання</h3>
<button class="nav-item" onclick="app.showLiteracyLevels()">
<span class="nav-icon">🎯</span>
<span>Рівні Data Literacy</span>
</button>
</div>
</aside>
<!-- Main Content -->
<main class="main-content">
<!-- Home Page -->
<div id="homePage" class="page active">
<div class="hero-section">
<h2>Чому кожна професія потребує навичок роботи з даними?</h2>
<p class="hero-description">
У сучасному світі дані стали основою для прийняття рішень у всіх сферах діяльності.
Незалежно від вашої професії, розуміння та використання даних може значно підвищити
вашу ефективність та цінність на ринку праці.
</p>
<button class="btn btn--primary btn--lg" onclick="app.showFirstProfession()">
🚀 Дослідити професії
</button>
</div>
<div class="stats-grid">
<div class="stat-card">
<div class="stat-number">87%</div>
<div class="stat-label">співробітників вважають базові навички роботи з даними важливими для щоденної роботи</div>
</div>
<div class="stat-card highlight">
<div class="stat-number">40%</div>
<div class="stat-label">співробітників почуваються підготовленими до роботи з даними</div>
</div>
<div class="stat-card">
<div class="stat-number">64%</div>
<div class="stat-label">керівників повідомляють про нестачу розуміння даних серед персоналу</div>
</div>
</div>
<div class="benefits-section">
<h3>Переваги Data Literacy</h3>
<div class="benefits-grid">
<div class="benefit-card">
<div class="benefit-icon">📈</div>
<h4>Кращі рішення</h4>
<p>Прийняття обґрунтованих рішень на базі фактів, а не припущень</p>
</div>
<div class="benefit-card">
<div class="benefit-icon">⚡</div>
<h4>Підвищена ефективність</h4>
<p>Автоматизація процесів та оптимізація робочих процедур</p>
</div>
<div class="benefit-card">
<div class="benefit-icon">🎯</div>
<h4>Конкурентна перевага</h4>
<p>Вищий попит на ринку праці та кращі кар'єрні можливості</p>
</div>
<div class="benefit-card">
<div class="benefit-icon">🔍</div>
<h4>Глибше розуміння</h4>
<p>Виявлення трендів та закономірностей у вашій галузі</p>
</div>
</div>
</div>
</div>
<!-- Profession Pages -->
<div id="professionPages" class="page">
<div class="profession-content" id="professionContent">
<!-- Profession content will be populated by JavaScript -->
</div>
</div>
<!-- Data Literacy Levels Page -->
<div id="literacyPage" class="page">
<div class="literacy-header">
<h2>Рівні Data Literacy за Gartner</h2>
<p>Визначте свій поточний рівень та отримайте рекомендації для розвитку</p>
</div>
<div class="literacy-levels" id="literacyLevels">
<!-- Literacy levels will be populated by JavaScript -->
</div>
<div class="literacy-test">
<h3>🧪 Тест визначення рівня</h3>
<p>Пройдіть короткий тест, щоб дізнатися свій поточний рівень data literacy</p>
<button class="btn btn--primary" onclick="app.startLiteracyTest()">
Розпочати тест
</button>
</div>
</div>
</main>
</div>
</div>
<!-- Modal for Interactive Elements -->
<div class="modal" id="interactiveModal">
<div class="modal-content">
<div class="modal-header">
<h3 id="modalTitle"></h3>
<button class="modal-close" onclick="app.closeModal()">×</button>
</div>
<div class="modal-body" id="modalBody">
<!-- Interactive content will be populated here -->
</div>
</div>
</div>
<!-- Test Modal -->
<div class="modal" id="testModal">
<div class="modal-content">
<div class="modal-header">
<h3>Тест Data Literacy</h3>
<button class="modal-close" onclick="app.closeTestModal()">×</button>
</div>
<div class="modal-body" id="testModalBody">
<!-- Test content will be populated here -->
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html> |