Skip to content

Commit bfb21ea

Browse files
author
Anass Rach
committed
Update index.md and CONTRIBUTING.md!
1 parent 1f5ce6e commit bfb21ea

2 files changed

Lines changed: 287 additions & 20 deletions

File tree

‎CONTRIBUTING.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -195,7 +195,6 @@ Brief description of what this PR adds or changes.
195195
Contributors will be acknowledged in:
196196
- GitHub contributor list
197197
- Project documentation
198-
- Release notes for significant contributions
199198

200199
---
201200

‎index.md‎

Lines changed: 287 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -9,38 +9,83 @@ layout: default
99

1010
A structured collection of flashcards to help you prepare for the Java 21 OCP certification exam.
1111

12-
## 🎯 Quick Links
12+
## Quick Links
1313

14-
<div style="display: flex; gap: 15px; margin: 30px 0; flex-wrap: wrap;">
15-
<a href="{{ '/quiz/' | relative_url }}" style="display: inline-block; padding: 12px 24px; background: linear-gradient(135deg, #667eea, #764ba2); color: white; text-decoration: none; border-radius: 8px; font-weight: 600;">
16-
🧪 Take the Quiz
14+
<div class="quick-links">
15+
<a href="{{ '/quiz/' | relative_url }}" class="btn btn-primary">
16+
Take the Quiz
1717
</a>
18-
<a href="{{ '/complete-java21-qa.html' | relative_url }}" style="display: inline-block; padding: 12px 24px; background: #6c757d; color: white; text-decoration: none; border-radius: 8px; font-weight: 600;">
19-
📚 Q&A Study Guide
18+
<a href="{{ '/complete-java21-qa.html' | relative_url }}" class="btn btn-secondary">
19+
Q&A Study Guide
20+
</a>
21+
<a href="#browse-flashcards" class="btn btn-secondary">
22+
Browse Flashcards
2023
</a>
2124
</div>
2225

23-
## 📖 Flashcard Categories
26+
## Study Progress Overview
2427

25-
{% assign categories = site.flashcards | map: "category" | uniq | sort %}
26-
{% for category in categories %}
27-
{% assign flashcards_in_category = site.flashcards | where: "category", category | sort: "order" %}
28+
<div class="stats-grid">
29+
{% assign total_flashcards = site.flashcards | size %}
30+
{% assign total_categories = site.flashcards | map: "category" | uniq | size %}
31+
32+
<div class="stat-card">
33+
<div class="stat-number">{{ total_flashcards }}</div>
34+
<div class="stat-label">Total Flashcards</div>
35+
</div>
36+
37+
<div class="stat-card">
38+
<div class="stat-number">32</div>
39+
<div class="stat-label">Quiz Questions</div>
40+
</div>
2841

29-
### {{ category }}
30-
{% for flashcard in flashcards_in_category %}
31-
- [{{ flashcard.title }}]({{ flashcard.url | relative_url }})
32-
{% endfor %}
33-
{% endfor %}
42+
<div class="stat-card">
43+
<div class="stat-number">{{ total_categories }}</div>
44+
<div class="stat-label">Categories</div>
45+
</div>
46+
</div>
3447

35-
## 🚀 Getting Started
48+
## Getting Started
3649

3750
1. **Start with the basics**: Begin with Java 21 Features if you're new to the latest version
3851
2. **Use the flashcards**: Study each card thoroughly, paying attention to the code examples
3952
3. **Test yourself**: Take the quiz to assess your knowledge
4053
4. **Review weak areas**: Focus on topics where you scored lower
4154
5. **Practice regularly**: Consistent study is key to certification success
4255

43-
## 🤝 Contributing
56+
## <a id="browse-flashcards"></a>Browse Flashcards by Category
57+
58+
<div class="category-grid">
59+
{% assign categories = site.flashcards | map: "category" | uniq | sort %}
60+
{% for category in categories %}
61+
{% assign flashcards_in_category = site.flashcards | where: "category", category | sort: "order" %}
62+
63+
<div class="category-card">
64+
<div class="category-header">
65+
<h3 class="category-title">{{ category }}</h3>
66+
<span class="category-count">{{ flashcards_in_category | size }} cards</span>
67+
</div>
68+
69+
<div class="category-preview">
70+
{% for flashcard in flashcards_in_category limit: 3 %}
71+
<a href="{{ flashcard.url | relative_url }}" class="flashcard-link">
72+
{{ flashcard.title | truncate: 40 }}
73+
</a>
74+
{% endfor %}
75+
76+
{% if flashcards_in_category.size > 3 %}
77+
<span class="more-cards">... and {{ flashcards_in_category.size | minus: 3 }} more</span>
78+
{% endif %}
79+
</div>
80+
81+
<a href="#" onclick="showCategoryModal('{{ category | slugify }}')" class="view-all-btn">
82+
View All {{ flashcards_in_category | size }} Cards
83+
</a>
84+
</div>
85+
{% endfor %}
86+
</div>
87+
88+
## Contributing
4489

4590
We welcome contributions! Check out our [contributing guide](https://github.com/Anasss/java21docCards/blob/main/CONTRIBUTING.md) for details on how to:
4691

@@ -49,11 +94,20 @@ We welcome contributions! Check out our [contributing guide](https://github.com/
4994
- Add quiz questions
5095
- Report issues
5196

52-
## 📝 License
97+
## License
5398

5499
This project is open-source and available under the MIT License.
55100

101+
<!-- Category Modal (Hidden by default) -->
102+
<div id="categoryModal" class="modal">
103+
<div class="modal-content">
104+
<span class="close">&times;</span>
105+
<div id="modalContent"></div>
106+
</div>
107+
</div>
108+
56109
<style>
110+
/* Quick Links */
57111
.quick-links {
58112
display: flex;
59113
gap: 15px;
@@ -96,6 +150,161 @@ This project is open-source and available under the MIT License.
96150
color: white;
97151
}
98152

153+
/* Stats Grid */
154+
.stats-grid {
155+
display: grid;
156+
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
157+
gap: 20px;
158+
margin: 30px 0;
159+
}
160+
161+
.stat-card {
162+
text-align: center;
163+
padding: 20px;
164+
background: #f8f9fa;
165+
border-radius: 10px;
166+
border: 1px solid #e1e8ed;
167+
}
168+
169+
.stat-number {
170+
font-size: 2.5em;
171+
font-weight: bold;
172+
color: #667eea;
173+
margin-bottom: 5px;
174+
}
175+
176+
.stat-label {
177+
color: #666;
178+
font-size: 0.9em;
179+
text-transform: uppercase;
180+
letter-spacing: 0.5px;
181+
}
182+
183+
/* Category Grid */
184+
.category-grid {
185+
display: grid;
186+
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
187+
gap: 20px;
188+
margin: 30px 0;
189+
}
190+
191+
.category-card {
192+
border: 1px solid #e1e8ed;
193+
border-radius: 10px;
194+
padding: 20px;
195+
background: white;
196+
transition: all 0.3s ease;
197+
cursor: pointer;
198+
}
199+
200+
.category-card:hover {
201+
transform: translateY(-4px);
202+
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
203+
border-color: #667eea;
204+
}
205+
206+
.category-header {
207+
display: flex;
208+
justify-content: space-between;
209+
align-items: center;
210+
margin-bottom: 15px;
211+
}
212+
213+
.category-title {
214+
margin: 0;
215+
color: #2c3e50;
216+
font-size: 1.2em;
217+
}
218+
219+
.category-count {
220+
background: #667eea;
221+
color: white;
222+
padding: 4px 12px;
223+
border-radius: 12px;
224+
font-size: 0.8em;
225+
font-weight: 600;
226+
}
227+
228+
.category-preview {
229+
margin-bottom: 15px;
230+
}
231+
232+
.flashcard-link {
233+
display: block;
234+
color: #555;
235+
text-decoration: none;
236+
padding: 4px 0;
237+
font-size: 0.9em;
238+
border-bottom: 1px solid transparent;
239+
transition: color 0.3s ease;
240+
}
241+
242+
.flashcard-link:hover {
243+
color: #667eea;
244+
text-decoration: none;
245+
border-bottom-color: #667eea;
246+
}
247+
248+
.more-cards {
249+
color: #888;
250+
font-style: italic;
251+
font-size: 0.85em;
252+
}
253+
254+
.view-all-btn {
255+
display: inline-block;
256+
color: #667eea;
257+
font-weight: 600;
258+
text-decoration: none;
259+
padding: 8px 16px;
260+
border: 2px solid #667eea;
261+
border-radius: 5px;
262+
transition: all 0.3s ease;
263+
font-size: 0.9em;
264+
}
265+
266+
.view-all-btn:hover {
267+
background: #667eea;
268+
color: white;
269+
text-decoration: none;
270+
}
271+
272+
/* Modal */
273+
.modal {
274+
display: none;
275+
position: fixed;
276+
z-index: 1000;
277+
left: 0;
278+
top: 0;
279+
width: 100%;
280+
height: 100%;
281+
background-color: rgba(0,0,0,0.4);
282+
}
283+
284+
.modal-content {
285+
background-color: #fefefe;
286+
margin: 5% auto;
287+
padding: 20px;
288+
border-radius: 10px;
289+
width: 80%;
290+
max-width: 600px;
291+
max-height: 80vh;
292+
overflow-y: auto;
293+
}
294+
295+
.close {
296+
color: #aaa;
297+
float: right;
298+
font-size: 28px;
299+
font-weight: bold;
300+
cursor: pointer;
301+
}
302+
303+
.close:hover {
304+
color: black;
305+
}
306+
307+
/* Responsive */
99308
@media (max-width: 768px) {
100309
.quick-links {
101310
flex-direction: column;
@@ -104,5 +313,64 @@ This project is open-source and available under the MIT License.
104313
.btn {
105314
text-align: center;
106315
}
316+
317+
.category-grid {
318+
grid-template-columns: 1fr;
319+
}
320+
321+
.stats-grid {
322+
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
323+
}
324+
325+
.modal-content {
326+
width: 95%;
327+
margin: 10% auto;
328+
}
329+
}
330+
</style>
331+
332+
<script>
333+
// Modal functionality for category details
334+
function showCategoryModal(categorySlug) {
335+
const modal = document.getElementById('categoryModal');
336+
const modalContent = document.getElementById('modalContent');
337+
338+
// Build category content
339+
{% assign categories = site.flashcards | map: "category" | uniq | sort %}
340+
{% for category in categories %}
341+
{% assign flashcards_in_category = site.flashcards | where: "category", category | sort: "order" %}
342+
if ('{{ category | slugify }}' === categorySlug) {
343+
modalContent.innerHTML = `
344+
<h2>{{ category }}</h2>
345+
<p>{{ flashcards_in_category | size }} flashcards in this category:</p>
346+
<div class="modal-flashcard-list">
347+
{% for flashcard in flashcards_in_category %}
348+
<a href="{{ flashcard.url | relative_url }}" class="modal-flashcard-item">
349+
<strong>{{ flashcard.title }}</strong>
350+
{% if flashcard.learning_tip %}<br><small>{{ flashcard.learning_tip | truncate: 80 }}</small>{% endif %}
351+
</a>
352+
{% endfor %}
353+
</div>
354+
`;
355+
}
356+
{% endfor %}
357+
358+
modal.style.display = 'block';
107359
}
108-
</style>
360+
361+
// Close modal when clicking X or outside
362+
document.addEventListener('DOMContentLoaded', function() {
363+
const modal = document.getElementById('categoryModal');
364+
const closeBtn = document.querySelector('.close');
365+
366+
closeBtn.onclick = function() {
367+
modal.style.display = 'none';
368+
}
369+
370+
window.onclick = function(event) {
371+
if (event.target === modal) {
372+
modal.style.display = 'none';
373+
}
374+
}
375+
});
376+
</script>

0 commit comments

Comments
 (0)