Hugging Face's logo

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

App Files Community
AlbertRenzo commited on
Commit
4d45ff8
·
verified ·
1 Parent(s): 935ac9d

pls complete all features

Browse files
Files changed (10) hide show
  1. advanced.html +99 -0
  2. assessment.html +1 -1
  3. beginner.html +99 -0
  4. components/navbar.js +2 -2
  5. components/sidebar.js +145 -0
  6. index.html +1 -1
  7. intermediate.html +99 -0
  8. module.html +174 -0
  9. script.js +19 -1
  10. style.css +32 -2
advanced.html ADDED
@@ -0,0 +1,99 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Advanced Path | Python Pathfinder</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ </head>
11
+ <body class="bg-gray-50 min-h-screen">
12
+ <custom-navbar></custom-navbar>
13
+
14
+ <main class="container mx-auto px-4 py-8">
15
+ <div class="flex flex-col md:flex-row gap-8">
16
+ <custom-sidebar path="advanced"></custom-sidebar>
17
+
18
+ <div class="flex-1">
19
+ <div class="bg-white p-6 rounded-xl shadow-md mb-8">
20
+ <h1 class="text-3xl font-bold mb-4 text-blue-700">Advanced Python Path</h1>
21
+ <p class="text-gray-600 mb-6">Master advanced Python concepts and Java-Python interoperability.</p>
22
+
23
+ <div class="bg-blue-50 p-4 rounded-lg border border-blue-200 mb-6">
24
+ <div class="flex items-center">
25
+ <i data-feather="info" class="text-blue-600 mr-2"></i>
26
+ <span class="font-medium">Your Progress: 0%</span>
27
+ </div>
28
+ <div class="w-full bg-gray-200 rounded-full h-2.5 mt-2">
29
+ <div class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
30
+ </div>
31
+ </div>
32
+ </div>
33
+
34
+ <div class="grid md:grid-cols-2 gap-6">
35
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
36
+ <div class="flex items-center mb-4">
37
+ <div class="bg-blue-100 p-3 rounded-lg mr-4">
38
+ <i data-feather="zap" class="text-blue-600"></i>
39
+ </div>
40
+ <h3 class="text-xl font-semibold">Decorators</h3>
41
+ </div>
42
+ <p class="text-gray-600 mb-4">Learn to modify function behavior with decorators and create your own.</p>
43
+ <a href="/module.html?id=decorators" class="text-blue-600 font-medium inline-flex items-center">
44
+ Start Module <i data-feather="arrow-right" class="ml-1" width="18"></i>
45
+ </a>
46
+ </div>
47
+
48
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
49
+ <div class="flex items-center mb-4">
50
+ <div class="bg-green-100 p-3 rounded-lg mr-4">
51
+ <i data-feather="command" class="text-green-600"></i>
52
+ </div>
53
+ <h3 class="text-xl font-semibold">Generators</h3>
54
+ </div>
55
+ <p class="text-gray-600 mb-4">Master generator functions and expressions for memory-efficient processing.</p>
56
+ <a href="/module.html?id=generators" class="text-blue-600 font-medium inline-flex items-center">
57
+ Start Module <i data-feather="arrow-right" class="ml-1" width="18"></i>
58
+ </a>
59
+ </div>
60
+
61
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
62
+ <div class="flex items-center mb-4">
63
+ <div class="bg-purple-100 p-3 rounded-lg mr-4">
64
+ <i data-feather="git-pull-request" class="text-purple-600"></i>
65
+ </div>
66
+ <h3 class="text-xl font-semibold">Java-Python Interop</h3>
67
+ </div>
68
+ <p class="text-gray-600 mb-4">Advanced techniques for calling Java from Python and managing JVM.</p>
69
+ <a href="/module.html?id=interop" class="text-blue-600 font-medium inline-flex items-center">
70
+ Start Module <i data-feather="arrow-right" class="ml-1" width="18"></i>
71
+ </a>
72
+ </div>
73
+
74
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
75
+ <div class="flex items-center mb-4">
76
+ <div class="bg-yellow-100 p-3 rounded-lg mr-4">
77
+ <i data-feather="cpu" class="text-yellow-600"></i>
78
+ </div>
79
+ <h3 class="text-xl font-semibold">Concurrency</h3>
80
+ </div>
81
+ <p class="text-gray-600 mb-4">Learn threading, multiprocessing, and async programming in Python.</p>
82
+ <a href="/module.html?id=concurrency" class="text-blue-600 font-medium inline-flex items-center">
83
+ Start Module <i data-feather="arrow-right" class="ml-1" width="18"></i>
84
+ </a>
85
+ </div>
86
+ </div>
87
+ </div>
88
+ </div>
89
+ </main>
90
+
91
+ <custom-footer></custom-footer>
92
+
93
+ <script src="components/navbar.js"></script>
94
+ <script src="components/footer.js"></script>
95
+ <script src="components/sidebar.js"></script>
96
+ <script src="script.js"></script>
97
+ <script>feather.replace();</script>
98
+ </body>
99
+ </html>
assessment.html CHANGED
@@ -103,9 +103,9 @@
103
  </main>
104
 
105
  <custom-footer></custom-footer>
106
-
107
  <script src="components/navbar.js"></script>
108
  <script src="components/footer.js"></script>
 
109
  <script src="script.js"></script>
110
  <script>feather.replace();</script>
111
  </body>
 
103
  </main>
104
 
105
  <custom-footer></custom-footer>
 
106
  <script src="components/navbar.js"></script>
107
  <script src="components/footer.js"></script>
108
+ <script src="components/sidebar.js"></script>
109
  <script src="script.js"></script>
110
  <script>feather.replace();</script>
111
  </body>
beginner.html ADDED
@@ -0,0 +1,99 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Beginner Path | Python Pathfinder</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ </head>
11
+ <body class="bg-gray-50 min-h-screen">
12
+ <custom-navbar></custom-navbar>
13
+
14
+ <main class="container mx-auto px-4 py-8">
15
+ <div class="flex flex-col md:flex-row gap-8">
16
+ <custom-sidebar path="beginner"></custom-sidebar>
17
+
18
+ <div class="flex-1">
19
+ <div class="bg-white p-6 rounded-xl shadow-md mb-8">
20
+ <h1 class="text-3xl font-bold mb-4 text-blue-700">Beginner Python Path</h1>
21
+ <p class="text-gray-600 mb-6">Master Python fundamentals with our structured beginner learning path.</p>
22
+
23
+ <div class="bg-blue-50 p-4 rounded-lg border border-blue-200 mb-6">
24
+ <div class="flex items-center">
25
+ <i data-feather="info" class="text-blue-600 mr-2"></i>
26
+ <span class="font-medium">Your Progress: 0%</span>
27
+ </div>
28
+ <div class="w-full bg-gray-200 rounded-full h-2.5 mt-2">
29
+ <div class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
30
+ </div>
31
+ </div>
32
+ </div>
33
+
34
+ <div class="grid md:grid-cols-2 gap-6">
35
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
36
+ <div class="flex items-center mb-4">
37
+ <div class="bg-blue-100 p-3 rounded-lg mr-4">
38
+ <i data-feather="book" class="text-blue-600"></i>
39
+ </div>
40
+ <h3 class="text-xl font-semibold">Python Basics</h3>
41
+ </div>
42
+ <p class="text-gray-600 mb-4">Learn fundamental Python concepts like variables, data types, and basic operations.</p>
43
+ <a href="/module.html?id=py-basics" class="text-blue-600 font-medium inline-flex items-center">
44
+ Start Module <i data-feather="arrow-right" class="ml-1" width="18"></i>
45
+ </a>
46
+ </div>
47
+
48
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
49
+ <div class="flex items-center mb-4">
50
+ <div class="bg-green-100 p-3 rounded-lg mr-4">
51
+ <i data-feather="code" class="text-green-600"></i>
52
+ </div>
53
+ <h3 class="text-xl font-semibold">Control Flow</h3>
54
+ </div>
55
+ <p class="text-gray-600 mb-4">Understand conditionals and loops to control program execution flow.</p>
56
+ <a href="/module.html?id=control-flow" class="text-blue-600 font-medium inline-flex items-center">
57
+ Start Module <i data-feather="arrow-right" class="ml-1" width="18"></i>
58
+ </a>
59
+ </div>
60
+
61
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
62
+ <div class="flex items-center mb-4">
63
+ <div class="bg-purple-100 p-3 rounded-lg mr-4">
64
+ <i data-feather="box" class="text-purple-600"></i>
65
+ </div>
66
+ <h3 class="text-xl font-semibold">Functions</h3>
67
+ </div>
68
+ <p class="text-gray-600 mb-4">Learn to create reusable code with functions and understand scope.</p>
69
+ <a href="/module.html?id=functions" class="text-blue-600 font-medium inline-flex items-center">
70
+ Start Module <i data-feather="arrow-right" class="ml-1" width="18"></i>
71
+ </a>
72
+ </div>
73
+
74
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
75
+ <div class="flex items-center mb-4">
76
+ <div class="bg-yellow-100 p-3 rounded-lg mr-4">
77
+ <i data-feather="database" class="text-yellow-600"></i>
78
+ </div>
79
+ <h3 class="text-xl font-semibold">Data Structures</h3>
80
+ </div>
81
+ <p class="text-gray-600 mb-4">Master lists, tuples, dictionaries, and sets for organizing data.</p>
82
+ <a href="/module.html?id=data-structures" class="text-blue-600 font-medium inline-flex items-center">
83
+ Start Module <i data-feather="arrow-right" class="ml-1" width="18"></i>
84
+ </a>
85
+ </div>
86
+ </div>
87
+ </div>
88
+ </div>
89
+ </main>
90
+
91
+ <custom-footer></custom-footer>
92
+
93
+ <script src="components/navbar.js"></script>
94
+ <script src="components/footer.js"></script>
95
+ <script src="components/sidebar.js"></script>
96
+ <script src="script.js"></script>
97
+ <script>feather.replace();</script>
98
+ </body>
99
+ </html>
components/navbar.js CHANGED
@@ -79,11 +79,11 @@ class CustomNavbar extends HTMLElement {
79
  <div class="nav-links">
80
  <a href="/">Home</a>
81
  <a href="/assessment.html">Assessment</a>
82
- <a href="#">Courses</a>
83
  <a href="#">About</a>
84
  <a href="#" class="login-btn">Sign In</a>
85
  </div>
86
- </nav>
87
  `;
88
  }
89
  }
 
79
  <div class="nav-links">
80
  <a href="/">Home</a>
81
  <a href="/assessment.html">Assessment</a>
82
+ <a href="/beginner.html">Courses</a>
83
  <a href="#">About</a>
84
  <a href="#" class="login-btn">Sign In</a>
85
  </div>
86
+ </nav>
87
  `;
88
  }
89
  }
components/sidebar.js ADDED
@@ -0,0 +1,145 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomSidebar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ const path = this.getAttribute('path') || '';
5
+ this.shadowRoot.innerHTML = `
6
+ <style>
7
+ :host {
8
+ display: block;
9
+ width: 250px;
10
+ }
11
+
12
+ aside {
13
+ background: white;
14
+ border-radius: 0.75rem;
15
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
16
+ padding: 1rem;
17
+ position: sticky;
18
+ top: 1rem;
19
+ }
20
+
21
+ h3 {
22
+ font-size: 1rem;
23
+ font-weight: 600;
24
+ color: #1e293b;
25
+ margin-bottom: 1rem;
26
+ padding-bottom: 0.5rem;
27
+ border-bottom: 1px solid #e2e8f0;
28
+ }
29
+
30
+ ul {
31
+ list-style: none;
32
+ padding: 0;
33
+ margin: 0;
34
+ }
35
+
36
+ li {
37
+ margin-bottom: 0.5rem;
38
+ }
39
+
40
+ a {
41
+ display: flex;
42
+ align-items: center;
43
+ padding: 0.5rem;
44
+ border-radius: 0.375rem;
45
+ color: #64748b;
46
+ text-decoration: none;
47
+ font-size: 0.875rem;
48
+ font-weight: 500;
49
+ transition: all 0.2s;
50
+ }
51
+
52
+ a:hover {
53
+ color: #2563eb;
54
+ background-color: #eff6ff;
55
+ }
56
+
57
+ a.active {
58
+ color: #2563eb;
59
+ background-color: #eff6ff;
60
+ font-weight: 600;
61
+ }
62
+
63
+ i {
64
+ margin-right: 0.75rem;
65
+ width: 16px;
66
+ height: 16px;
67
+ }
68
+
69
+ .divider {
70
+ height: 1px;
71
+ background-color: #e2e8f0;
72
+ margin: 1rem 0;
73
+ }
74
+
75
+ @media (max-width: 768px) {
76
+ :host {
77
+ width: 100%;
78
+ margin-bottom: 1rem;
79
+ }
80
+
81
+ aside {
82
+ position: static;
83
+ }
84
+ }
85
+ </style>
86
+ <aside>
87
+ <h3>Learning Path</h3>
88
+ <ul>
89
+ <li>
90
+ <a href="/beginner.html" class="${path === 'beginner' ? 'active' : ''}">
91
+ <i data-feather="book"></i>
92
+ Beginner
93
+ </a>
94
+ </li>
95
+ <li>
96
+ <a href="/intermediate.html" class="${path === 'intermediate' ? 'active' : ''}">
97
+ <i data-feather="code"></i>
98
+ Intermediate
99
+ </a>
100
+ </li>
101
+ <li>
102
+ <a href="/advanced.html" class="${path === 'advanced' ? 'active' : ''}">
103
+ <i data-feather="zap"></i>
104
+ Advanced
105
+ </a>
106
+ </li>
107
+ </ul>
108
+
109
+ <div class="divider"></div>
110
+
111
+ <h3>Resources</h3>
112
+ <ul>
113
+ <li>
114
+ <a href="#">
115
+ <i data-feather="file-text"></i>
116
+ Cheat Sheets
117
+ </a>
118
+ </li>
119
+ <li>
120
+ <a href="#">
121
+ <i data-feather="help-circle"></i>
122
+ FAQ
123
+ </a>
124
+ </li>
125
+ <li>
126
+ <a href="#">
127
+ <i data-feather="message-square"></i>
128
+ Community
129
+ </a>
130
+ </li>
131
+ </ul>
132
+ </aside>
133
+ `;
134
+
135
+ // Replace feather icons after render
136
+ setTimeout(() => {
137
+ const icons = this.shadowRoot.querySelectorAll('[data-feather]');
138
+ icons.forEach(icon => {
139
+ feather.replace(icon);
140
+ });
141
+ }, 100);
142
+ }
143
+ }
144
+
145
+ customElements.define('custom-sidebar', CustomSidebar);
index.html CHANGED
@@ -67,9 +67,9 @@
67
  </main>
68
 
69
  <custom-footer></custom-footer>
70
-
71
  <script src="components/navbar.js"></script>
72
  <script src="components/footer.js"></script>
 
73
  <script src="script.js"></script>
74
  <script>feather.replace();</script>
75
  <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 
67
  </main>
68
 
69
  <custom-footer></custom-footer>
 
70
  <script src="components/navbar.js"></script>
71
  <script src="components/footer.js"></script>
72
+ <script src="components/sidebar.js"></script>
73
  <script src="script.js"></script>
74
  <script>feather.replace();</script>
75
  <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
intermediate.html ADDED
@@ -0,0 +1,99 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Intermediate Path | Python Pathfinder</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ </head>
11
+ <body class="bg-gray-50 min-h-screen">
12
+ <custom-navbar></custom-navbar>
13
+
14
+ <main class="container mx-auto px-4 py-8">
15
+ <div class="flex flex-col md:flex-row gap-8">
16
+ <custom-sidebar path="intermediate"></custom-sidebar>
17
+
18
+ <div class="flex-1">
19
+ <div class="bg-white p-6 rounded-xl shadow-md mb-8">
20
+ <h1 class="text-3xl font-bold mb-4 text-blue-700">Intermediate Python Path</h1>
21
+ <p class="text-gray-600 mb-6">Advance your Python skills with object-oriented programming and basic Java integration.</p>
22
+
23
+ <div class="bg-blue-50 p-4 rounded-lg border border-blue-200 mb-6">
24
+ <div class="flex items-center">
25
+ <i data-feather="info" class="text-blue-600 mr-2"></i>
26
+ <span class="font-medium">Your Progress: 0%</span>
27
+ </div>
28
+ <div class="w-full bg-gray-200 rounded-full h-2.5 mt-2">
29
+ <div class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
30
+ </div>
31
+ </div>
32
+ </div>
33
+
34
+ <div class="grid md:grid-cols-2 gap-6">
35
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
36
+ <div class="flex items-center mb-4">
37
+ <div class="bg-blue-100 p-3 rounded-lg mr-4">
38
+ <i data-feather="layers" class="text-blue-600"></i>
39
+ </div>
40
+ <h3 class="text-xl font-semibold">OOP in Python</h3>
41
+ </div>
42
+ <p class="text-gray-600 mb-4">Learn classes, objects, inheritance, and polymorphism in Python.</p>
43
+ <a href="/module.html?id=oop" class="text-blue-600 font-medium inline-flex items-center">
44
+ Start Module <i data-feather="arrow-right" class="ml-1" width="18"></i>
45
+ </a>
46
+ </div>
47
+
48
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
49
+ <div class="flex items-center mb-4">
50
+ <div class="bg-green-100 p-3 rounded-lg mr-4">
51
+ <i data-feather="cpu" class="text-green-600"></i>
52
+ </div>
53
+ <h3 class="text-xl font-semibold">Modules & Packages</h3>
54
+ </div>
55
+ <p class="text-gray-600 mb-4">Organize your code with modules, packages, and understand imports.</p>
56
+ <a href="/module.html?id=modules" class="text-blue-600 font-medium inline-flex items-center">
57
+ Start Module <i data-feather="arrow-right" class="ml-1" width="18"></i>
58
+ </a>
59
+ </div>
60
+
61
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
62
+ <div class="flex items-center mb-4">
63
+ <div class="bg-purple-100 p-3 rounded-lg mr-4">
64
+ <i data-feather="activity" class="text-purple-600"></i>
65
+ </div>
66
+ <h3 class="text-xl font-semibold">Error Handling</h3>
67
+ </div>
68
+ <p class="text-gray-600 mb-4">Master try/except blocks and create custom exceptions.</p>
69
+ <a href="/module.html?id=error-handling" class="text-blue-600 font-medium inline-flex items-center">
70
+ Start Module <i data-feather="arrow-right" class="ml-1" width="18"></i>
71
+ </a>
72
+ </div>
73
+
74
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
75
+ <div class="flex items-center mb-4">
76
+ <div class="bg-yellow-100 p-3 rounded-lg mr-4">
77
+ <i data-feather="git-merge" class="text-yellow-600"></i>
78
+ </div>
79
+ <h3 class="text-xl font-semibold">Basic Java Integration</h3>
80
+ </div>
81
+ <p class="text-gray-600 mb-4">Learn to call Java from Python using JPype and understand JVM basics.</p>
82
+ <a href="/module.html?id=java-integration" class="text-blue-600 font-medium inline-flex items-center">
83
+ Start Module <i data-feather="arrow-right" class="ml-1" width="18"></i>
84
+ </a>
85
+ </div>
86
+ </div>
87
+ </div>
88
+ </div>
89
+ </main>
90
+
91
+ <custom-footer></custom-footer>
92
+
93
+ <script src="components/navbar.js"></script>
94
+ <script src="components/footer.js"></script>
95
+ <script src="components/sidebar.js"></script>
96
+ <script src="script.js"></script>
97
+ <script>feather.replace();</script>
98
+ </body>
99
+ </html>
module.html ADDED
@@ -0,0 +1,174 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Module | Python Pathfinder</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ </head>
11
+ <body class="bg-gray-50 min-h-screen">
12
+ <custom-navbar></custom-navbar>
13
+
14
+ <main class="container mx-auto px-4 py-8">
15
+ <div class="flex flex-col md:flex-row gap-8">
16
+ <custom-sidebar id="module-sidebar"></custom-sidebar>
17
+
18
+ <div class="flex-1">
19
+ <div class="bg-white p-6 rounded-xl shadow-md mb-8">
20
+ <div class="flex items-center justify-between mb-6">
21
+ <div>
22
+ <h1 class="text-3xl font-bold text-blue-700" id="module-title">Python Basics</h1>
23
+ <p class="text-gray-600" id="module-description">Introduction to fundamental Python concepts</p>
24
+ </div>
25
+ <div class="flex items-center">
26
+ <span class="text-sm font-medium text-gray-500 mr-3">Progress: <span id="module-progress">0%</span></span>
27
+ <div class="w-24 bg-gray-200 rounded-full h-2.5">
28
+ <div class="bg-blue-600 h-2.5 rounded-full" id="progress-bar" style="width: 0%"></div>
29
+ </div>
30
+ </div>
31
+ </div>
32
+
33
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
34
+ <div class="flex items-center">
35
+ <div class="bg-blue-100 p-2 rounded-lg mr-3">
36
+ <i data-feather="clock" class="text-blue-600" width="16"></i>
37
+ </div>
38
+ <span class="text-sm text-gray-600" id="module-duration">20 min</span>
39
+ </div>
40
+ <div class="flex items-center">
41
+ <div class="bg-purple-100 p-2 rounded-lg mr-3">
42
+ <i data-feather="book-open" class="text-purple-600" width="16"></i>
43
+ </div>
44
+ <span class="text-sm text-gray-600" id="module-lessons">5 lessons</span>
45
+ </div>
46
+ <div class="flex items-center">
47
+ <div class="bg-green-100 p-2 rounded-lg mr-3">
48
+ <i data-feather="check-circle" class="text-green-600" width="16"></i>
49
+ </div>
50
+ <span class="text-sm text-gray-600" id="module-completed">0 completed</span>
51
+ </div>
52
+ <div class="flex items-center">
53
+ <div class="bg-yellow-100 p-2 rounded-lg mr-3">
54
+ <i data-feather="award" class="text-yellow-600" width="16"></i>
55
+ </div>
56
+ <span class="text-sm text-gray-600" id="module-level">Beginner</span>
57
+ </div>
58
+ </div>
59
+ </div>
60
+
61
+ <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8">
62
+ <div class="border-b border-gray-200 px-6 py-4 bg-gray-50">
63
+ <h2 class="text-lg font-semibold text-gray-800">Lessons</h2>
64
+ </div>
65
+ <div id="lessons-container" class="divide-y divide-gray-200">
66
+ <!-- Lessons will be dynamically inserted here -->
67
+ </div>
68
+ </div>
69
+ </div>
70
+ </div>
71
+ </main>
72
+
73
+ <custom-footer></custom-footer>
74
+
75
+ <script src="components/navbar.js"></script>
76
+ <script src="components/footer.js"></script>
77
+ <script src="components/sidebar.js"></script>
78
+ <script src="script.js"></script>
79
+ <script>
80
+ // Module page specific script
81
+ document.addEventListener('DOMContentLoaded', function() {
82
+ feather.replace();
83
+
84
+ // Parse URL parameters
85
+ const urlParams = new URLSearchParams(window.location.search);
86
+ const moduleId = urlParams.get('id');
87
+
88
+ // Fetch module data based on ID
89
+ fetchModuleData(moduleId).then(module => {
90
+ document.getElementById('module-title').textContent = module.title;
91
+ document.getElementById('module-description').textContent = module.description;
92
+ document.getElementById('module-duration').textContent = module.duration;
93
+ document.getElementById('module-lessons').textContent = `${module.lessons.length} lessons`;
94
+ document.getElementById('module-level').textContent = module.level;
95
+
96
+ // Render lessons
97
+ const container = document.getElementById('lessons-container');
98
+ module.lessons.forEach((lesson, index) => {
99
+ const lessonElement = document.createElement('div');
100
+ lessonElement.className = 'px-6 py-4 hover:bg-gray-50';
101
+ lessonElement.innerHTML = `
102
+ <div class="flex items-center justify-between">
103
+ <div class="flex items-center">
104
+ <span class="text-gray-500 mr-4 w-8 text-center">${index + 1}</span>
105
+ <h3 class="font-medium text-gray-800">${lesson.title}</h3>
106
+ </div>
107
+ <div class="flex items-center">
108
+ <span class="text-sm text-gray-500 mr-4">${lesson.duration}</span>
109
+ <button class="text-blue-600 hover:text-blue-800 font-medium"
110
+ onclick="startLesson('${moduleId}', ${index})">
111
+ Start
112
+ </button>
113
+ </div>
114
+ </div>
115
+ `;
116
+ container.appendChild(lessonElement);
117
+ });
118
+
119
+ // Update sidebar to show current module
120
+ const sidebar = document.getElementById('module-sidebar');
121
+ if (sidebar) {
122
+ sidebar.setAttribute('path', module.path);
123
+ }
124
+ });
125
+ });
126
+
127
+ function fetchModuleData(moduleId) {
128
+ // This would be replaced with actual API call
129
+ const modules = {
130
+ 'py-basics': {
131
+ title: 'Python Basics',
132
+ description: 'Introduction to fundamental Python concepts',
133
+ duration: '20 min',
134
+ level: 'Beginner',
135
+ path: 'beginner',
136
+ lessons: [
137
+ { title: 'Variables and Data Types', duration: '5 min' },
138
+ { title: 'Basic Operations', duration: '4 min' },
139
+ { title: 'Strings and Formatting', duration: '6 min' },
140
+ { title: 'Basic Input/Output', duration: '5 min' }
141
+ ]
142
+ },
143
+ 'oop': {
144
+ title: 'Object-Oriented Python',
145
+ description: 'Learn classes and objects in Python',
146
+ duration: '30 min',
147
+ level: 'Intermediate',
148
+ path: 'intermediate',
149
+ lessons: [
150
+ { title: 'Classes and Objects', duration: '8 min' },
151
+ { title: 'Inheritance', duration: '7 min' },
152
+ { title: 'Polymorphism', duration: '8 min' },
153
+ { title: 'Magic Methods', duration: '7 min' }
154
+ ]
155
+ }
156
+ };
157
+
158
+ return Promise.resolve(modules[moduleId] || modules['py-basics']);
159
+ }
160
+
161
+ function startLesson(moduleId, lessonIndex) {
162
+ // Store progress in localStorage
163
+ const progressKey = `module-${moduleId}-progress`;
164
+ const currentProgress = parseInt(localStorage.getItem(progressKey) || '0');
165
+ if (lessonIndex > currentProgress) {
166
+ localStorage.setItem(progressKey, lessonIndex.toString());
167
+ }
168
+
169
+ // Redirect to lesson page (would be implemented)
170
+ alert(`Starting lesson ${lessonIndex + 1} of module ${moduleId}`);
171
+ }
172
+ </script>
173
+ </body>
174
+ </html>
script.js CHANGED
@@ -1,6 +1,24 @@
 
1
  document.addEventListener('DOMContentLoaded', function() {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2
  // Assessment form handling
3
- const assessmentForm = document.getElementById('assessment-form');
4
  if (assessmentForm) {
5
  assessmentForm.addEventListener('submit', function(e) {
6
  e.preventDefault();
 
1
+
2
  document.addEventListener('DOMContentLoaded', function() {
3
+ // Initialize all tooltips
4
+ const tooltipTriggers = document.querySelectorAll('[data-tooltip]');
5
+ tooltipTriggers.forEach(trigger => {
6
+ const tooltip = document.createElement('div');
7
+ tooltip.className = 'tooltip hidden absolute z-10 bg-gray-800 text-white text-xs rounded py-1 px-2';
8
+ tooltip.textContent = trigger.getAttribute('data-tooltip');
9
+ trigger.appendChild(tooltip);
10
+
11
+ trigger.addEventListener('mouseenter', () => {
12
+ tooltip.classList.remove('hidden');
13
+ });
14
+
15
+ trigger.addEventListener('mouseleave', () => {
16
+ tooltip.classList.add('hidden');
17
+ });
18
+ });
19
+
20
  // Assessment form handling
21
+ const assessmentForm = document.getElementById('assessment-form');
22
  if (assessmentForm) {
23
  assessmentForm.addEventListener('submit', function(e) {
24
  e.preventDefault();
style.css CHANGED
@@ -29,7 +29,37 @@ body {
29
  from { opacity: 0; transform: translateY(20px); }
30
  to { opacity: 1; transform: translateY(0); }
31
  }
32
-
33
  .fade-in {
34
  animation: fadeIn 0.5s ease-out forwards;
35
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
29
  from { opacity: 0; transform: translateY(20px); }
30
  to { opacity: 1; transform: translateY(0); }
31
  }
 
32
  .fade-in {
33
  animation: fadeIn 0.5s ease-out forwards;
34
+ }
35
+
36
+ /* Tooltip styles */
37
+ .tooltip {
38
+ bottom: 100%;
39
+ left: 50%;
40
+ transform: translateX(-50%);
41
+ margin-bottom: 5px;
42
+ white-space: nowrap;
43
+ }
44
+
45
+ .tooltip:after {
46
+ content: "";
47
+ position: absolute;
48
+ top: 100%;
49
+ left: 50%;
50
+ margin-left: -5px;
51
+ border-width: 5px;
52
+ border-style: solid;
53
+ border-color: #1f2937 transparent transparent transparent;
54
+ }
55
+
56
+ /* Sidebar transition */
57
+ custom-sidebar {
58
+ transition: transform 0.3s ease;
59
+ }
60
+
61
+ @media (max-width: 768px) {
62
+ custom-sidebar {
63
+ transform: translateY(0);
64
+ }
65
+ }