Spaces:
Running
Running
| <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> |