Skip to content

Commit 59d3676

Browse files
neur0n-7neur0n-7
authored
Merge branch 'Open-Coding-Society:main' into main
2 parents 0cd57c7 + 8a5a0f0 commit 59d3676

31 files changed

Lines changed: 7719 additions & 796 deletions

‎_includes/tailwind/cs-portfolio-mini_quest_info.html‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,148 @@
1+
<style>
2+
/* ===== PROGRESS BAR STYLES ===== */
3+
4+
/* Container for progress bar */
5+
.module-progress {
6+
position: relative;
7+
width: 100%;
8+
height: 12px;
9+
background: linear-gradient(90deg, #1a1a2e 0%, #16213e 100%);
10+
border-radius: 12px;
11+
overflow: hidden;
12+
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4);
13+
}
14+
15+
/* The actual progress bar */
16+
.progress-bar {
17+
height: 100%;
18+
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
19+
border-radius: 12px;
20+
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), background 0.4s ease;
21+
position: relative;
22+
box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
23+
}
24+
25+
/* Animated shimmer effect */
26+
.progress-bar::before {
27+
content: '';
28+
position: absolute;
29+
top: 0;
30+
left: -100%;
31+
width: 100%;
32+
height: 100%;
33+
background: linear-gradient(
34+
90deg,
35+
transparent,
36+
rgba(255, 255, 255, 0.3),
37+
transparent
38+
);
39+
animation: shimmer 2s infinite;
40+
}
41+
42+
@keyframes shimmer {
43+
0% { left: -100%; }
44+
100% { left: 100%; }
45+
}
46+
47+
/* Partial progress (1-5 lessons done) */
48+
.progress-bar.partial {
49+
background: linear-gradient(90deg, #f093fb 0%, #f5576c 100%);
50+
box-shadow: 0 0 20px rgba(240, 147, 251, 0.6);
51+
}
52+
53+
/* Completed state (all 6 lessons done) */
54+
.progress-bar.completed {
55+
background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
56+
box-shadow: 0 0 25px rgba(79, 172, 254, 0.8);
57+
animation: pulse 2s ease-in-out infinite;
58+
}
59+
60+
@keyframes pulse {
61+
0%, 100% {
62+
box-shadow: 0 0 25px rgba(79, 172, 254, 0.8);
63+
}
64+
50% {
65+
box-shadow: 0 0 35px rgba(79, 172, 254, 1);
66+
}
67+
}
68+
69+
/* Mini progress bar variant (for inside lesson cards) */
70+
.module-progress-bar {
71+
/* inherits from .progress-bar above */
72+
}
73+
74+
/* ===== STATUS BADGES ===== */
75+
76+
.status-badge {
77+
display: inline-block;
78+
padding: 0.4rem 0.8rem;
79+
border-radius: 20px;
80+
font-size: 0.75rem;
81+
font-weight: 600;
82+
text-transform: uppercase;
83+
letter-spacing: 0.5px;
84+
transition: all 0.3s ease;
85+
}
86+
87+
/* Locked state */
88+
.status-badge.status-locked {
89+
background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
90+
color: #718096;
91+
border: 1px solid #4a5568;
92+
}
93+
94+
/* Available/Current state */
95+
.status-badge.status-current {
96+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
97+
color: white;
98+
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
99+
animation: glow 2s ease-in-out infinite;
100+
}
101+
102+
@keyframes glow {
103+
0%, 100% {
104+
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
105+
}
106+
50% {
107+
box-shadow: 0 4px 25px rgba(102, 126, 234, 0.8);
108+
}
109+
}
110+
111+
/* Completed state */
112+
.status-badge.status-completed {
113+
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
114+
color: white;
115+
box-shadow: 0 4px 15px rgba(79, 172, 254, 0.5);
116+
}
117+
118+
.status-badge.status-completed::before {
119+
content: '✓ ';
120+
font-weight: bold;
121+
}
122+
123+
/* ===== HOVER EFFECTS ===== */
124+
125+
.card-hover-effects {
126+
transition: all 0.3s ease;
127+
}
128+
129+
.card-hover-effects:hover {
130+
transform: translateY(-4px);
131+
}
132+
133+
/* ===== RESPONSIVE ADJUSTMENTS ===== */
134+
135+
@media (max-width: 768px) {
136+
.module-progress {
137+
height: 10px;
138+
}
139+
140+
.status-badge {
141+
font-size: 0.7rem;
142+
padding: 0.3rem 0.6rem;
143+
}
144+
}
145+
</style>
1146

2147
<div id="mini-quest" class="container mx-auto px-4 py-8">
3148
<div class="text-center mb-8">

‎_includes/tailwind/cs-portfolio-quest_info.html‎

Lines changed: 229 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,230 @@
1+
<style>
2+
/* ===== MEGA QUEST HUB PROGRESS BAR (Main Page) ===== */
3+
4+
/* Overall progress container - */
5+
#overall-progress-container .module-progress {
6+
position: relative;
7+
width: 100%;
8+
height: 24px; /* Much thicker than mini-quest bars */
9+
background: linear-gradient(90deg, #1a1a2e 0%, #16213e 100%);
10+
border-radius: 16px;
11+
overflow: hidden;
12+
box-shadow:
13+
inset 0 2px 12px rgba(0, 0, 0, 0.5),
14+
0 4px 20px rgba(0, 0, 0, 0.3);
15+
border: 2px solid rgba(255, 255, 255, 0.1);
16+
}
17+
18+
/* The overall progress bar - with color transitions */
19+
#overall-progress {
20+
height: 100%;
21+
border-radius: 16px;
22+
transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1), background 0.6s ease;
23+
position: relative;
24+
box-shadow: 0 0 30px rgba(255, 107, 107, 0.6);
25+
}
26+
27+
/* Starting color - Red (0-16% = 0-1 modules) */
28+
#overall-progress[style*="width: 0"],
29+
#overall-progress[style*="width: 1"],
30+
#overall-progress[style*="width: 2"],
31+
#overall-progress[style*="width: 3"],
32+
#overall-progress[style*="width: 4"],
33+
#overall-progress[style*="width: 5"],
34+
#overall-progress[style*="width: 6"],
35+
#overall-progress[style*="width: 7"],
36+
#overall-progress[style*="width: 8"],
37+
#overall-progress[style*="width: 9"],
38+
#overall-progress[style*="width: 10"],
39+
#overall-progress[style*="width: 11"],
40+
#overall-progress[style*="width: 12"],
41+
#overall-progress[style*="width: 13"],
42+
#overall-progress[style*="width: 14"],
43+
#overall-progress[style*="width: 15"],
44+
#overall-progress[style*="width: 16"] {
45+
background: linear-gradient(90deg, #ff6b6b 0%, #ee5a6f 100%);
46+
box-shadow: 0 0 30px rgba(255, 107, 107, 0.6);
47+
}
48+
49+
/* Orange (17-33% = 1-2 modules) */
50+
#overall-progress[style*="width: 17"],
51+
#overall-progress[style*="width: 18"],
52+
#overall-progress[style*="width: 19"],
53+
#overall-progress[style*="width: 20"],
54+
#overall-progress[style*="width: 21"],
55+
#overall-progress[style*="width: 22"],
56+
#overall-progress[style*="width: 23"],
57+
#overall-progress[style*="width: 24"],
58+
#overall-progress[style*="width: 25"],
59+
#overall-progress[style*="width: 26"],
60+
#overall-progress[style*="width: 27"],
61+
#overall-progress[style*="width: 28"],
62+
#overall-progress[style*="width: 29"],
63+
#overall-progress[style*="width: 30"],
64+
#overall-progress[style*="width: 31"],
65+
#overall-progress[style*="width: 32"],
66+
#overall-progress[style*="width: 33"] {
67+
background: linear-gradient(90deg, #ffa45c 0%, #ff8c42 100%);
68+
box-shadow: 0 0 30px rgba(255, 164, 92, 0.6);
69+
}
70+
71+
/* Yellow (34-50% = 2-3 modules) */
72+
#overall-progress[style*="width: 34"],
73+
#overall-progress[style*="width: 35"],
74+
#overall-progress[style*="width: 36"],
75+
#overall-progress[style*="width: 37"],
76+
#overall-progress[style*="width: 38"],
77+
#overall-progress[style*="width: 39"],
78+
#overall-progress[style*="width: 40"],
79+
#overall-progress[style*="width: 41"],
80+
#overall-progress[style*="width: 42"],
81+
#overall-progress[style*="width: 43"],
82+
#overall-progress[style*="width: 44"],
83+
#overall-progress[style*="width: 45"],
84+
#overall-progress[style*="width: 46"],
85+
#overall-progress[style*="width: 47"],
86+
#overall-progress[style*="width: 48"],
87+
#overall-progress[style*="width: 49"],
88+
#overall-progress[style*="width: 50"] {
89+
background: linear-gradient(90deg, #ffd93d 0%, #f9ca24 100%);
90+
box-shadow: 0 0 30px rgba(255, 217, 61, 0.6);
91+
}
92+
93+
/* Light Green (51-66% = 3-4 modules) */
94+
#overall-progress[style*="width: 51"],
95+
#overall-progress[style*="width: 52"],
96+
#overall-progress[style*="width: 53"],
97+
#overall-progress[style*="width: 54"],
98+
#overall-progress[style*="width: 55"],
99+
#overall-progress[style*="width: 56"],
100+
#overall-progress[style*="width: 57"],
101+
#overall-progress[style*="width: 58"],
102+
#overall-progress[style*="width: 59"],
103+
#overall-progress[style*="width: 60"],
104+
#overall-progress[style*="width: 61"],
105+
#overall-progress[style*="width: 62"],
106+
#overall-progress[style*="width: 63"],
107+
#overall-progress[style*="width: 64"],
108+
#overall-progress[style*="width: 65"],
109+
#overall-progress[style*="width: 66"] {
110+
background: linear-gradient(90deg, #a8e063 0%, #7ed957 100%);
111+
box-shadow: 0 0 30px rgba(168, 224, 99, 0.6);
112+
}
113+
114+
/* Medium Green (67-83% = 4-5 modules) */
115+
#overall-progress[style*="width: 67"],
116+
#overall-progress[style*="width: 68"],
117+
#overall-progress[style*="width: 69"],
118+
#overall-progress[style*="width: 70"],
119+
#overall-progress[style*="width: 71"],
120+
#overall-progress[style*="width: 72"],
121+
#overall-progress[style*="width: 73"],
122+
#overall-progress[style*="width: 74"],
123+
#overall-progress[style*="width: 75"],
124+
#overall-progress[style*="width: 76"],
125+
#overall-progress[style*="width: 77"],
126+
#overall-progress[style*="width: 78"],
127+
#overall-progress[style*="width: 79"],
128+
#overall-progress[style*="width: 80"],
129+
#overall-progress[style*="width: 81"],
130+
#overall-progress[style*="width: 82"],
131+
#overall-progress[style*="width: 83"] {
132+
background: linear-gradient(90deg, #56cc9d 0%, #3ebd93 100%);
133+
box-shadow: 0 0 30px rgba(86, 204, 157, 0.6);
134+
}
135+
136+
/* Full Green - COMPLETED! (84-100% = 5-6 modules) */
137+
#overall-progress[style*="width: 84"],
138+
#overall-progress[style*="width: 85"],
139+
#overall-progress[style*="width: 86"],
140+
#overall-progress[style*="width: 87"],
141+
#overall-progress[style*="width: 88"],
142+
#overall-progress[style*="width: 89"],
143+
#overall-progress[style*="width: 90"],
144+
#overall-progress[style*="width: 91"],
145+
#overall-progress[style*="width: 92"],
146+
#overall-progress[style*="width: 93"],
147+
#overall-progress[style*="width: 94"],
148+
#overall-progress[style*="width: 95"],
149+
#overall-progress[style*="width: 96"],
150+
#overall-progress[style*="width: 97"],
151+
#overall-progress[style*="width: 98"],
152+
#overall-progress[style*="width: 99"],
153+
#overall-progress[style*="width: 100"] {
154+
background: linear-gradient(90deg, #10b981 0%, #059669 100%);
155+
box-shadow: 0 0 40px rgba(16, 185, 129, 0.9);
156+
animation: celebration-pulse 1.5s ease-in-out infinite;
157+
}
158+
159+
/* Celebration pulse animation for 100% */
160+
@keyframes celebration-pulse {
161+
0%, 100% {
162+
box-shadow: 0 0 40px rgba(16, 185, 129, 0.9);
163+
transform: scaleY(1);
164+
}
165+
50% {
166+
box-shadow: 0 0 60px rgba(16, 185, 129, 1);
167+
transform: scaleY(1.05);
168+
}
169+
}
170+
171+
/* Animated shimmer effect (works on all states) */
172+
#overall-progress::before {
173+
content: '';
174+
position: absolute;
175+
top: 0;
176+
left: -100%;
177+
width: 100%;
178+
height: 100%;
179+
background: linear-gradient(
180+
90deg,
181+
transparent,
182+
rgba(255, 255, 255, 0.4),
183+
transparent
184+
);
185+
animation: mega-shimmer 2.5s infinite;
186+
}
187+
188+
@keyframes mega-shimmer {
189+
0% { left: -100%; }
190+
100% { left: 100%; }
191+
}
192+
193+
/* Progress text styling */
194+
#progress-text {
195+
font-size: 1.1rem;
196+
font-weight: 600;
197+
margin-top: 0.75rem;
198+
letter-spacing: 0.5px;
199+
}
200+
201+
/* Completion celebration text */
202+
#progress-text.completed {
203+
background: linear-gradient(90deg, #10b981, #059669, #10b981);
204+
background-size: 200% auto;
205+
-webkit-background-clip: text;
206+
-webkit-text-fill-color: transparent;
207+
background-clip: text;
208+
animation: gradient-shift 3s ease infinite;
209+
}
210+
211+
@keyframes gradient-shift {
212+
0%, 100% { background-position: 0% center; }
213+
50% { background-position: 100% center; }
214+
}
215+
216+
/* ===== RESPONSIVE ===== */
217+
@media (max-width: 768px) {
218+
#overall-progress-container .module-progress {
219+
height: 20px;
220+
}
221+
222+
#progress-text {
223+
font-size: 1rem;
224+
}
225+
}
226+
</style>
227+
1228
<!-- Prerequisites links (unchanged) -->
2229
{% if page.lxdData.Prequisites %}
3230
<div class="mb-8">
@@ -9,8 +236,8 @@
9236
</div>
10237
{% endif %}
11238

12-
<!-- Progress Overview (unchanged styling) -->
13-
<div class="mb-8 text-center">
239+
<!-- Progress Overview -->
240+
<div class="mb-8 text-center" id="overall-progress-container">
14241
<div class="bg-gray-800 rounded-lg p-6 max-w-2xl mx-auto">
15242
<h3 class="text-white font-semibold mb-3">Learning Progress</h3>
16243
<div class="module-progress">

0 commit comments

Comments
 (0)