Hugging Face's logo

Spaces:
AlbertRenzo
/
python-pathfinder-code-your-way-up
Running

App Files Community
python-pathfinder-code-your-way-up / module.html
AlbertRenzo's picture
AlbertRenzo
pls complete all features
4d45ff8 verified
Raw History Blame Contribute Delete
8.74 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Module | Python Pathfinder</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
</head>
<body class="bg-gray-50 min-h-screen">
<custom-navbar></custom-navbar>
<main class="container mx-auto px-4 py-8">
<div class="flex flex-col md:flex-row gap-8">
<custom-sidebar id="module-sidebar"></custom-sidebar>
<div class="flex-1">
<div class="bg-white p-6 rounded-xl shadow-md mb-8">
<div class="flex items-center justify-between mb-6">
<div>
<h1 class="text-3xl font-bold text-blue-700" id="module-title">Python Basics</h1>
<p class="text-gray-600" id="module-description">Introduction to fundamental Python concepts</p>
</div>
<div class="flex items-center">
<span class="text-sm font-medium text-gray-500 mr-3">Progress: <span id="module-progress">0%</span></span>
<div class="w-24 bg-gray-200 rounded-full h-2.5">
<div class="bg-blue-600 h-2.5 rounded-full" id="progress-bar" style="width: 0%"></div>
</div>
</div>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
<div class="flex items-center">
<div class="bg-blue-100 p-2 rounded-lg mr-3">
<i data-feather="clock" class="text-blue-600" width="16"></i>
</div>
<span class="text-sm text-gray-600" id="module-duration">20 min</span>
</div>
<div class="flex items-center">
<div class="bg-purple-100 p-2 rounded-lg mr-3">
<i data-feather="book-open" class="text-purple-600" width="16"></i>
</div>
<span class="text-sm text-gray-600" id="module-lessons">5 lessons</span>
</div>
<div class="flex items-center">
<div class="bg-green-100 p-2 rounded-lg mr-3">
<i data-feather="check-circle" class="text-green-600" width="16"></i>
</div>
<span class="text-sm text-gray-600" id="module-completed">0 completed</span>
</div>
<div class="flex items-center">
<div class="bg-yellow-100 p-2 rounded-lg mr-3">
<i data-feather="award" class="text-yellow-600" width="16"></i>
</div>
<span class="text-sm text-gray-600" id="module-level">Beginner</span>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden mb-8">
<div class="border-b border-gray-200 px-6 py-4 bg-gray-50">
<h2 class="text-lg font-semibold text-gray-800">Lessons</h2>
</div>
<div id="lessons-container" class="divide-y divide-gray-200">
<!-- Lessons will be dynamically inserted here -->
</div>
</div>
</div>
</div>
</main>
<custom-footer></custom-footer>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="components/sidebar.js"></script>
<script src="script.js"></script>
<script>
// Module page specific script
document.addEventListener('DOMContentLoaded', function() {
feather.replace();
// Parse URL parameters
const urlParams = new URLSearchParams(window.location.search);
const moduleId = urlParams.get('id');
// Fetch module data based on ID
fetchModuleData(moduleId).then(module => {
document.getElementById('module-title').textContent = module.title;
document.getElementById('module-description').textContent = module.description;
document.getElementById('module-duration').textContent = module.duration;
document.getElementById('module-lessons').textContent = `${module.lessons.length} lessons`;
document.getElementById('module-level').textContent = module.level;
// Render lessons
const container = document.getElementById('lessons-container');
module.lessons.forEach((lesson, index) => {
const lessonElement = document.createElement('div');
lessonElement.className = 'px-6 py-4 hover:bg-gray-50';
lessonElement.innerHTML = `
<div class="flex items-center justify-between">
<div class="flex items-center">
<span class="text-gray-500 mr-4 w-8 text-center">${index + 1}</span>
<h3 class="font-medium text-gray-800">${lesson.title}</h3>
</div>
<div class="flex items-center">
<span class="text-sm text-gray-500 mr-4">${lesson.duration}</span>
<button class="text-blue-600 hover:text-blue-800 font-medium"
onclick="startLesson('${moduleId}', ${index})">
Start
</button>
</div>
</div>
`;
container.appendChild(lessonElement);
});
// Update sidebar to show current module
const sidebar = document.getElementById('module-sidebar');
if (sidebar) {
sidebar.setAttribute('path', module.path);
}
});
});
function fetchModuleData(moduleId) {
// This would be replaced with actual API call
const modules = {
'py-basics': {
title: 'Python Basics',
description: 'Introduction to fundamental Python concepts',
duration: '20 min',
level: 'Beginner',
path: 'beginner',
lessons: [
{ title: 'Variables and Data Types', duration: '5 min' },
{ title: 'Basic Operations', duration: '4 min' },
{ title: 'Strings and Formatting', duration: '6 min' },
{ title: 'Basic Input/Output', duration: '5 min' }
]
},
'oop': {
title: 'Object-Oriented Python',
description: 'Learn classes and objects in Python',
duration: '30 min',
level: 'Intermediate',
path: 'intermediate',
lessons: [
{ title: 'Classes and Objects', duration: '8 min' },
{ title: 'Inheritance', duration: '7 min' },
{ title: 'Polymorphism', duration: '8 min' },
{ title: 'Magic Methods', duration: '7 min' }
]
}
};
return Promise.resolve(modules[moduleId] || modules['py-basics']);
}
function startLesson(moduleId, lessonIndex) {
// Store progress in localStorage
const progressKey = `module-${moduleId}-progress`;
const currentProgress = parseInt(localStorage.getItem(progressKey) || '0');
if (lessonIndex > currentProgress) {
localStorage.setItem(progressKey, lessonIndex.toString());
}
// Redirect to lesson page (would be implemented)
alert(`Starting lesson ${lessonIndex + 1} of module ${moduleId}`);
}
</script>
</body>
</html>