Spaces:

AlbertRenzo
/

python-pathfinder-code-your-way-up

Running

App Files Files Community

python-pathfinder-code-your-way-up / module.html

AlbertRenzo

pls complete all features

4d45ff8 verified 9 months ago

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>