Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DataMaster | Consultancy Learning Platform</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6b73ff 0%, #000dff 100%); | |
| } | |
| .course-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .progress-ring__circle { | |
| transition: stroke-dashoffset 0.5s; | |
| transform: rotate(-90deg); | |
| transform-origin: 50% 50%; | |
| } | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| @media (max-width: 768px) { | |
| .sidebar { | |
| transform: translateX(-100%); | |
| } | |
| .sidebar.open { | |
| transform: translateX(0); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Mobile Menu Button --> | |
| <button id="menuToggle" class="md:hidden fixed top-4 left-4 z-50 bg-white p-2 rounded-lg shadow-lg"> | |
| <i class="fas fa-bars text-blue-600 text-xl"></i> | |
| </button> | |
| <!-- Sidebar Navigation --> | |
| <div id="sidebar" class="sidebar fixed inset-y-0 left-0 w-64 bg-white shadow-lg z-40"> | |
| <div class="flex items-center justify-center h-16 px-4 gradient-bg"> | |
| <h1 class="text-white text-xl font-bold">DataMaster</h1> | |
| </div> | |
| <nav class="mt-6"> | |
| <div class="px-4"> | |
| <div class="flex items-center px-4 py-3 bg-blue-50 text-blue-600 rounded-lg"> | |
| <i class="fas fa-home mr-3"></i> | |
| <span class="font-medium">Dashboard</span> | |
| </div> | |
| <div class="flex items-center px-4 py-3 text-gray-600 hover:bg-blue-50 hover:text-blue-600 rounded-lg mt-1"> | |
| <i class="fas fa-book mr-3"></i> | |
| <span class="font-medium">Courses</span> | |
| </div> | |
| <div class="flex items-center px-4 py-3 text-gray-600 hover:bg-blue-50 hover:text-blue-600 rounded-lg mt-1"> | |
| <i class="fas fa-chart-bar mr-3"></i> | |
| <span class="font-medium">Progress</span> | |
| </div> | |
| <div class="flex items-center px-4 py-3 text-gray-600 hover:bg-blue-50 hover:text-blue-600 rounded-lg mt-1"> | |
| <i class="fas fa-trophy mr-3"></i> | |
| <span class="font-medium">Achievements</span> | |
| </div> | |
| <div class="flex items-center px-4 py-3 text-gray-600 hover:bg-blue-50 hover:text-blue-600 rounded-lg mt-1"> | |
| <i class="fas fa-cog mr-3"></i> | |
| <span class="font-medium">Settings</span> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-0 w-full px-4 py-6 border-t border-gray-200"> | |
| <div class="flex items-center"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile"> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-700">Sarah Johnson</p> | |
| <p class="text-xs text-gray-500">Senior Consultant</p> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="md:ml-64"> | |
| <!-- Header --> | |
| <header class="gradient-bg shadow-md"> | |
| <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8 flex justify-between items-center"> | |
| <h1 class="text-2xl font-bold text-white">Learning Dashboard</h1> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search courses..." class="pl-10 pr-4 py-2 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-blue-300"> | |
| <i class="fas fa-search absolute left-3 top-2.5 text-gray-400"></i> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content Area --> | |
| <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <!-- Welcome Banner --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8"> | |
| <div class="md:flex"> | |
| <div class="md:flex-shrink-0 gradient-bg md:w-1/3 flex items-center justify-center p-8"> | |
| <i class="fas fa-chart-line text-white text-6xl"></i> | |
| </div> | |
| <div class="p-8"> | |
| <div class="uppercase tracking-wide text-sm text-blue-600 font-semibold">Welcome back</div> | |
| <h2 class="mt-2 text-2xl font-bold text-gray-800">Enhance your data consultancy skills</h2> | |
| <p class="mt-2 text-gray-600">Complete courses, generate datasets, and tackle real-world challenges to level up your expertise in data platforms, algorithms, and analytics.</p> | |
| <div class="mt-4"> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition duration-300"> | |
| Continue Learning | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Progress Overview --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Courses Completed</p> | |
| <h3 class="text-2xl font-bold mt-1">12</h3> | |
| </div> | |
| <div class="relative w-16 h-16"> | |
| <svg class="w-full h-full" viewBox="0 0 36 36"> | |
| <path | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#e6e6e6" | |
| stroke-width="3" | |
| /> | |
| <path | |
| class="progress-ring__circle" | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#4f46e5" | |
| stroke-width="3" | |
| stroke-dasharray="75, 100" | |
| /> | |
| </svg> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <span class="text-sm font-bold text-blue-600">75%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Current Level</p> | |
| <h3 class="text-2xl font-bold mt-1">Advanced</h3> | |
| </div> | |
| <div class="text-blue-600 text-4xl"> | |
| <i class="fas fa-medal"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Datasets Generated</p> | |
| <h3 class="text-2xl font-bold mt-1">24</h3> | |
| </div> | |
| <div class="text-blue-600 text-4xl"> | |
| <i class="fas fa-database"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Course Categories --> | |
| <div class="mb-8"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-bold text-gray-800">Browse Learning Paths</h2> | |
| <button class="text-blue-600 hover:text-blue-800 font-medium">View All</button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div class="course-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> | |
| <div class="gradient-bg p-6 text-white"> | |
| <i class="fas fa-chart-pie text-3xl mb-2"></i> | |
| <h3 class="font-bold text-lg">Data Visualization</h3> | |
| </div> | |
| <div class="p-6"> | |
| <p class="text-gray-600 text-sm mb-4">Master PowerBI, Tableau and other visualization tools with real-world datasets.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs font-medium text-blue-600">5 Courses</span> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Explore</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="course-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> | |
| <div class="gradient-bg p-6 text-white"> | |
| <i class="fas fa-brain text-3xl mb-2"></i> | |
| <h3 class="font-bold text-lg">Machine Learning</h3> | |
| </div> | |
| <div class="p-6"> | |
| <p class="text-gray-600 text-sm mb-4">Learn predictive modeling and algorithm implementation with practical challenges.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs font-medium text-blue-600">8 Courses</span> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Explore</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="course-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> | |
| <div class="gradient-bg p-6 text-white"> | |
| <i class="fas fa-broom text-3xl mb-2"></i> | |
| <h3 class="font-bold text-lg">Data Quality</h3> | |
| </div> | |
| <div class="p-6"> | |
| <p class="text-gray-600 text-sm mb-4">Identify, clean and transform messy datasets into reliable sources.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs font-medium text-blue-600">4 Courses</span> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Explore</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="course-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> | |
| <div class="gradient-bg p-6 text-white"> | |
| <i class="fas fa-server text-3xl mb-2"></i> | |
| <h3 class="font-bold text-lg">Data Platforms</h3> | |
| </div> | |
| <div class="p-6"> | |
| <p class="text-gray-600 text-sm mb-4">Understand modern data architectures and integration challenges.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs font-medium text-blue-600">6 Courses</span> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Explore</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Dataset Generator --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8"> | |
| <div class="p-6 border-b border-gray-200"> | |
| <h2 class="text-xl font-bold text-gray-800">Custom Dataset Generator</h2> | |
| <p class="text-gray-600 mt-1">Generate practice datasets tailored to your learning objectives and difficulty level.</p> | |
| </div> | |
| <div class="p-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Learning Objective</label> | |
| <select class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-300"> | |
| <option>Select objective</option> | |
| <option>Data Visualization (PowerBI)</option> | |
| <option>Predictive Modeling</option> | |
| <option>Data Cleaning</option> | |
| <option>Time Series Analysis</option> | |
| <option>Anomaly Detection</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Difficulty Level</label> | |
| <select class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-300"> | |
| <option>Beginner</option> | |
| <option selected>Intermediate</option> | |
| <option>Advanced</option> | |
| <option>Expert</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Dataset Size</label> | |
| <div class="flex items-center"> | |
| <input type="range" min="100" max="10000" value="1000" step="100" class="w-full mr-2"> | |
| <span class="text-sm font-medium">1,000 rows</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Additional Parameters</label> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="missingData" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> | |
| <label for="missingData" class="ml-2 block text-sm text-gray-700">Include missing data</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="outliers" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked> | |
| <label for="outliers" class="ml-2 block text-sm text-gray-700">Include outliers</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="timeSeries" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> | |
| <label for="timeSeries" class="ml-2 block text-sm text-gray-700">Time series data</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 flex justify-center"> | |
| <button id="generateDataset" class="gradient-bg hover:opacity-90 text-white font-bold py-3 px-8 rounded-lg transition duration-300 flex items-center"> | |
| <i class="fas fa-download mr-2"></i> Generate Dataset (.CSV) | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recommended Courses --> | |
| <div class="mb-8"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-bold text-gray-800">Recommended For You</h2> | |
| <button class="text-blue-600 hover:text-blue-800 font-medium">View All</button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-4"> | |
| <div class="flex items-start"> | |
| <div class="gradient-bg p-3 rounded-lg text-white mr-4"> | |
| <i class="fas fa-chart-bar text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-gray-800">Advanced PowerBI Visualizations</h3> | |
| <p class="text-gray-600 text-sm mt-1">Create interactive dashboards with complex datasets</p> | |
| <div class="mt-3 flex items-center"> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-600 h-2 rounded-full" style="width: 45%"></div> | |
| </div> | |
| <span class="text-xs text-gray-500 ml-2">45%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-4"> | |
| <div class="flex items-start"> | |
| <div class="gradient-bg p-3 rounded-lg text-white mr-4"> | |
| <i class="fas fa-project-diagram text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-gray-800">Data Pipeline Architecture</h3> | |
| <p class="text-gray-600 text-sm mt-1">Designing robust ETL processes for large datasets</p> | |
| <div class="mt-3 flex items-center"> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-600 h-2 rounded-full" style="width: 20%"></div> | |
| </div> | |
| <span class="text-xs text-gray-500 ml-2">20%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-4"> | |
| <div class="flex items-start"> | |
| <div class="gradient-bg p-3 rounded-lg text-white mr-4"> | |
| <i class="fas fa-robot text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-gray-800">ML Model Deployment</h3> | |
| <p class="text-gray-600 text-sm mt-1">Operationalizing machine learning models in production</p> | |
| <div class="mt-3 flex items-center"> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-600 h-2 rounded-full" style="width: 65%"></div> | |
| </div> | |
| <span class="text-xs text-gray-500 ml-2">65%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- Dataset Generation Modal --> | |
| <div id="datasetModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-xl shadow-xl w-full max-w-md"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-bold text-gray-800">Dataset Generated!</h3> | |
| <button id="closeModal" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="text-center py-6"> | |
| <div class="text-green-500 text-5xl mb-4"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <p class="text-gray-600 mb-6">Your custom dataset has been successfully generated and is ready for download.</p> | |
| <div class="bg-gray-100 p-4 rounded-lg mb-6"> | |
| <div class="flex justify-between text-sm text-gray-600 mb-2"> | |
| <span>Rows:</span> | |
| <span class="font-medium">1,000</span> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-600 mb-2"> | |
| <span>Columns:</span> | |
| <span class="font-medium">12</span> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-600"> | |
| <span>Difficulty:</span> | |
| <span class="font-medium">Intermediate</span> | |
| </div> | |
| </div> | |
| <button class="gradient-bg hover:opacity-90 text-white font-bold py-3 px-8 rounded-lg transition duration-300 w-full"> | |
| <i class="fas fa-download mr-2"></i> Download Dataset | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('menuToggle').addEventListener('click', function() { | |
| document.getElementById('sidebar').classList.toggle('open'); | |
| }); | |
| // Dataset generation | |
| document.getElementById('generateDataset').addEventListener('click', function() { | |
| document.getElementById('datasetModal').classList.remove('hidden'); | |
| }); | |
| // Close modal | |
| document.getElementById('closeModal').addEventListener('click', function() { | |
| document.getElementById('datasetModal').classList.add('hidden'); | |
| }); | |
| // Close modal when clicking outside | |
| document.getElementById('datasetModal').addEventListener('click', function(e) { | |
| if (e.target === this) { | |
| this.classList.add('hidden'); | |
| } | |
| }); | |
| // Simulate generating CSV data (in a real app, this would be server-side) | |
| function generateCSV() { | |
| const headers = ["ID", "Date", "Product", "Region", "Sales", "Profit", "Customer", "Rating", "Returns", "Discount", "Category", "Subcategory"]; | |
| let csv = headers.join(",") + "\n"; | |
| for (let i = 1; i <= 1000; i++) { | |
| const row = [ | |
| i, | |
| `2023-${Math.floor(Math.random() * 12) + 1}-${Math.floor(Math.random() * 28) + 1}`, | |
| `Product ${String.fromCharCode(65 + Math.floor(Math.random() * 5))}`, | |
| ["North", "South", "East", "West"][Math.floor(Math.random() * 4)], | |
| (Math.random() * 10000).toFixed(2), | |
| (Math.random() * 2000).toFixed(2), | |
| `Customer ${Math.floor(Math.random() * 500) + 1}`, | |
| (Math.random() * 5).toFixed(1), | |
| Math.random() > 0.9 ? "Yes" : "No", | |
| Math.random() > 0.7 ? (Math.random() * 30).toFixed(0) + "%" : "0%", | |
| ["Electronics", "Furniture", "Office Supplies"][Math.floor(Math.random() * 3)], | |
| ["Phones", "Chairs", "Paper", "Computers"][Math.floor(Math.random() * 4)] | |
| ]; | |
| csv += row.join(",") + "\n"; | |
| } | |
| return csv; | |
| } | |
| // Download CSV when clicking download button in modal | |
| document.querySelector('#datasetModal button').addEventListener('click', function() { | |
| const csv = generateCSV(); | |
| const blob = new Blob([csv], { type: 'text/csv' }); | |
| const url = URL.createObjectURL(blob); | |
| const a = document.createElement('a'); | |
| a.setAttribute('hidden', ''); | |
| a.setAttribute('href', url); | |
| a.setAttribute('download', 'custom_dataset.csv'); | |
| document.body.appendChild(a); | |
| a.click(); | |
| document.body.removeChild(a); | |
| document.getElementById('datasetModal').classList.add('hidden'); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=basmeinen/leerplatform" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |