Path-finder/learning-path.html at main · Ankitkr-ak007/Path-finder · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Learning Path - Career Path Finder</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav class="navbar">
        <div class="nav-container">
            <div class="logo">
                <span class="logo-icon">🎯</span>
                <span class="logo-text">Career Path Finder</span>
            </div>
            <ul class="nav-menu">
                <li><a href="index.html">Home</a></li>
                <li><a href="questionnaire.html">Start Journey</a></li>
                <li><a href="about.html">About</a></li>
            </ul>
        </div>
    </nav>

    <main class="learning-path-container">
        <div class="learning-path-header">
            <h1 class="path-title" id="pathTitle">Your Personalized Learning Path</h1>
            <p class="path-subtitle" id="pathSubtitle">Curated resources to help you master your chosen career</p>
        </div>

        <div class="learning-path-content">
            <!-- Career Path Overview -->
            <section class="path-overview" id="pathOverview">
                <h2>📚 Your Career Focus</h2>
                <div id="careerFocusContent"></div>
            </section>

            <!-- Learning Timeline -->
            <section class="learning-timeline">
                <h2>🗓️ Structured Learning Timeline</h2>
                <div id="timelineContent"></div>
            </section>

            <!-- YouTube Videos Section -->
            <section class="resources-section">
                <h2>🎥 Recommended YouTube Learning Videos</h2>
                <p class="section-intro">Free, high-quality video tutorials to start your journey</p>
                <div class="resources-grid" id="youtubeVideos">
                    <!-- Videos will be loaded here -->
                </div>
            </section>

            <!-- Courses Section -->
            <section class="resources-section">
                <h2>📖 Curated Courses</h2>
                <p class="section-intro">Best courses prioritizing free and low-cost options</p>

                <div class="course-filter">
                    <button class="filter-btn active" onclick="filterCourses('all', event)">All Courses</button>
                    <button class="filter-btn" onclick="filterCourses('free', event)">Free Only</button>
                    <button class="filter-btn" onclick="filterCourses('low-cost', event)">Low Cost (&lt;$50)</button>
                    <button class="filter-btn" onclick="filterCourses('premium', event)">Premium</button>
                </div>

                <div class="courses-grid" id="coursesGrid">
                    <!-- Courses will be loaded here -->
                </div>
            </section>

            <!-- Additional Resources -->
            <section class="resources-section">
                <h2>🔗 Additional Learning Resources</h2>
                <div class="additional-resources" id="additionalResources">
                    <!-- Additional resources will be loaded here -->
                </div>
            </section>

            <!-- Action Buttons -->
            <div class="path-actions">
                <button class="btn btn-secondary" onclick="window.location.href='results.html'">← Back to Results</button>
                <button class="btn btn-primary" onclick="window.print()">📄 Save Learning Path</button>
            </div>
        </div>
    </main>

    <footer class="footer">
        <p>&copy; 2024 Career Path Finder. Empowering students to build their future.</p>
    </footer>

    <script src="learning-path.js"></script>
</body>
</html>