BLT-University/courses.html at main · willkhinz/BLT-University · 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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
---
layout: default
title: Courses
permalink: /courses/
---

<section class="relative pt-16 pb-24 overflow-hidden bg-white dark:bg-gray-900 border-b border-gray-50 dark:border-gray-800 text-center transition-colors">
    <div class="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(220,38,38,0.04),transparent_50%)] -z-10"></div>

    <div class="max-w-4xl mx-auto px-6 relative z-10">
        <h1 class="font-display text-3xl md:text-4xl font-bold text-gray-900 dark:text-white tracking-tight mb-4">
            Course <span class="text-transparent bg-clip-text bg-gradient-to-r from-bltRed to-red-600">Catalog</span>
        </h1>
        <p class="text-sm md:text-base text-gray-500 dark:text-gray-400 max-w-xl mx-auto font-medium">
            Explore our comprehensive cybersecurity curriculum. From foundational concepts to advanced penetration testing, all 100% open-source.
        </p>
    </div>
</section>

<main class="flex-1 max-w-7xl mx-auto px-6 py-12 w-full dark:bg-gray-900 transition-colors">

    <!-- Filter Bar -->
    <div class="bg-white dark:bg-gray-800 p-4 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 mb-10">
        <div class="flex flex-col md:flex-row gap-4">

            <div class="flex-1 relative">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                </div>
                <input
                    type="text"
                    id="search-filter"
                    class="w-full pl-10 pr-4 py-3 bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl text-sm dark:text-white focus:outline-none focus:ring-2 focus:ring-bltRed/20 focus:border-bltRed transition-colors"
                    placeholder="Search courses, topics, or instructors..."
                >
            </div>

            <div class="w-full md:w-48 relative">
                <select
                    id="category-filter"
                    class="w-full appearance-none pl-4 pr-10 py-3 bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl text-sm text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-bltRed/20 focus:border-bltRed transition-colors cursor-pointer"
                >
                    <option value="">All Categories</option>
                    {% for category in site.categories %}
                    <option value="{{ category | slugify }}">{{ category }}</option>
                    {% endfor %}
                </select>

                <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-gray-400">
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                </div>
            </div>

            <div class="w-full md:w-48 relative">
                <select
                    id="level-filter"
                    class="w-full appearance-none pl-4 pr-10 py-3 bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl text-sm text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-bltRed/20 focus:border-bltRed transition-colors cursor-pointer"
                >
                    <option value="">All Levels</option>
                    <option value="beginner">Beginner</option>
                    <option value="intermediate">Intermediate</option>
                    <option value="advanced">Advanced</option>
                </select>

                <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-gray-400">
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                </div>
            </div>

        </div>
    </div>

    <!-- Course Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="courses-grid">

        {% for course in site.courses %}
        <div
            class="course-card group bg-white dark:bg-gray-800 rounded-2xl shadow-sm hover:shadow-float border border-gray-100 dark:border-gray-700 overflow-hidden flex flex-col transition-all duration-300 hover:-translate-y-1"
            data-category="{{ course.category | slugify }}"
            data-level="{{ course.level | downcase }}"
            data-search="{{ course.title | downcase }} {{ course.description | downcase }} {{ course.instructor | downcase }}"
        >

            <a href="{{ course.url | relative_url }}" class="block h-48 bg-gray-900 relative overflow-hidden">

                {% if course.image %}
                <img
                    src="{{ course.image | relative_url }}"
                    alt="{{ course.title }}"
                    class="w-full h-full object-cover opacity-90 group-hover:scale-105 transition-transform duration-700"
                >
                {% else %}
                <img
                    src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?w=600&q=80"
                    alt="{{ course.title }}"
                    class="w-full h-full object-cover opacity-90 group-hover:scale-105 transition-transform duration-700"
                >
                {% endif %}

                <div class="absolute top-4 left-4 flex gap-2 z-20">
                    <span class="px-2.5 py-1 bg-bltRed text-white rounded-md text-xs font-bold tracking-wide shadow-sm">
                        {{ course.category | default: "Cybersecurity" }}
                    </span>

                    <span class="px-2.5 py-1 bg-gray-900/70 backdrop-blur-md text-white rounded-md text-xs font-semibold capitalize tracking-wide border border-white/10">
                        {{ course.level | default: "All Levels" }}
                    </span>
                </div>

            </a>

            <div class="p-6 flex-1 flex flex-col">

                <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3 leading-snug group-hover:text-bltRed transition-colors">
                    <a href="{{ course.url | relative_url }}" class="focus:outline-none">
                        {{ course.title | default: "Untitled Course" }}
                    </a>
                </h3>

                <p class="text-gray-500 dark:text-gray-400 text-sm mb-6 flex-1 leading-relaxed">
                    {{ course.description | truncate: 120 }}
                </p>

                <div class="flex items-center justify-between text-xs font-medium text-gray-500 dark:text-gray-400 pt-4 border-t border-gray-100 dark:border-gray-700 mb-5">

                    <div class="flex items-center gap-1.5">
                        <div class="w-6 h-6 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-gray-600 dark:text-gray-300">
                            👤
                        </div>

                        <span>
                            {{ course.instructor | default: "OWASP Community" }}
                        </span>
                    </div>

                    <div class="flex items-center gap-1">
                        ⏱️ <span>{{ course.duration | default: "Self-paced" }}</span>
                    </div>

                </div>

                <a
                    href="{{ course.url | relative_url }}"
                    class="w-full block text-center px-4 py-2.5 border border-gray-200 dark:border-gray-700 rounded-xl text-sm font-semibold text-gray-700 dark:text-gray-200 hover:bg-bltRed dark:hover:bg-bltRed hover:text-white dark:hover:text-white hover:border-bltRed transition-all duration-200"
                >
                    View Course
                </a>

            </div>
        </div>
        {% endfor %}

    </div>

    <div id="no-results" class="hidden py-20 text-center">
        <div class="w-20 h-20 bg-gray-50 dark:bg-gray-800 rounded-full flex items-center justify-center mx-auto mb-4 border border-gray-100 dark:border-gray-700">
            <svg class="w-10 h-10 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                    d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
        </div>

        <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-1">
            No courses found
        </h3>

        <p class="text-gray-500 dark:text-gray-400 text-sm">
            We couldn't find anything matching your search criteria. Try adjusting your filters.
        </p>

        <button
            onclick="document.getElementById('search-filter').value=''; document.getElementById('category-filter').value=''; document.getElementById('level-filter').value=''; document.getElementById('search-filter').dispatchEvent(new Event('input'));"
            class="mt-4 text-bltRed text-sm font-semibold hover:underline focus:outline-none"
        >
            Clear all filters
        </button>
    </div>

</main>