Hugging Face's logo

Spaces:
froublot
/
eduvaud-explorer-plus
Running

App Files Community
eduvaud-explorer-plus
File size: 8,309 Bytes
f493344
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EduVaud Explorer - Catalogue des formations</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
    </style>
</head>
<body class="bg-gray-50 font-['Inter']">
    <custom-navbar></custom-navbar>
    
    <main class="container mx-auto px-4 py-8">
        <!-- Hero Section -->
        <section class="bg-gradient-to-r from-blue-600 to-indigo-700 rounded-xl p-8 mb-12 text-white">
            <div class="max-w-3xl mx-auto text-center">
                <h1 class="text-4xl font-bold mb-4">Catalogue des Formations Numériques</h1>
                <p class="text-xl mb-6">Découvrez l'offre de formation continue en éducation numérique du Canton de Vaud et de la Romandie</p>
                <div class="flex justify-center gap-4">
                    <a href="#formations" class="bg-white text-blue-600 px-6 py-3 rounded-lg font-medium hover:bg-blue-50 transition">Explorer les formations</a>
                    <a href="#filters" class="bg-blue-500 bg-opacity-20 px-6 py-3 rounded-lg font-medium hover:bg-opacity-30 transition">Filtrer</a>
                </div>
            </div>
        </section>

        <!-- Stats Section -->
        <section class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-12">
            <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
                <div class="text-blue-600 mb-2">
                    <i data-feather="book-open" class="w-8 h-8"></i>
                </div>
                <h3 class="text-2xl font-bold mb-1" id="total-trainings">7</h3>
                <p class="text-gray-500">Formations disponibles</p>
            </div>
            <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
                <div class="text-indigo-600 mb-2">
                    <i data-feather="award" class="w-8 h-8"></i>
                </div>
                <h3 class="text-2xl font-bold mb-1">3</h3>
                <p class="text-gray-500">Certifications</p>
            </div>
            <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
                <div class="text-purple-600 mb-2">
                    <i data-feather="users" class="w-8 h-8"></i>
                </div>
                <h3 class="text-2xl font-bold mb-1">5+</h3>
                <p class="text-gray-500">Publics cibles</p>
            </div>
            <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
                <div class="text-green-600 mb-2">
                    <i data-feather="map-pin" class="w-8 h-8"></i>
                </div>
                <h3 class="text-2xl font-bold mb-1">4</h3>
                <p class="text-gray-500">Cantons couverts</p>
            </div>
        </section>

        <!-- Filters Section -->
        <section id="filters" class="mb-12">
            <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
                <h2 class="text-2xl font-bold mb-6">Filtrer les formations</h2>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Type de formation</label>
                        <select class="filter-select w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            <option value="all">Tous les types</option>
                            <option value="formation continue">Formation continue</option>
                            <option value="CAS">CAS</option>
                            <option value="DAS">DAS</option>
                            <option value="modules de formation initiale et continue">Modules</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Niveau scolaire</label>
                        <select class="filter-select w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            <option value="all">Tous niveaux</option>
                            <option value="obligatoire">Obligatoire</option>
                            <option value="post-obligatoire">Post-obligatoire</option>
                            <option value="direction / coordination">Direction/Coordination</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Compétences ciblées</label>
                        <select class="filter-select w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            <option value="all">Toutes compétences</option>
                            <option value="Usages pédagogiques">Usages pédagogiques</option>
                            <option value="Citoyenneté numérique">Citoyenneté numérique</option>
                            <option value="Didactique">Didactique</option>
                        </select>
                    </div>
                </div>
            </div>
        </section>

        <!-- Trainings Section -->
        <section id="formations" class="mb-12">
            <h2 class="text-3xl font-bold mb-8">Nos formations</h2>
            <div id="trainings-container" class="grid grid-cols-1 gap-6">
                <card-loader></card-loader>
            </div>
</section>

        <!-- Info Section -->
        <section class="bg-white rounded-xl shadow-sm border border-gray-100 p-8 mb-12">
            <div class="max-w-3xl mx-auto text-center">
                <h2 class="text-2xl font-bold mb-4">Besoin d'aide pour choisir ?</h2>
                <p class="text-gray-600 mb-6">Notre équipe peut vous orienter vers la formation la plus adaptée à votre situation professionnelle et à vos objectifs.</p>
                <a href="contact.html" class="bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition inline-flex items-center">
                    <i data-feather="mail" class="mr-2"></i>
                    Contactez-nous
                </a>
            </div>
        </section>
    </main>

    <custom-footer></custom-footer>

    <script src="components/navbar.js"></script>
    <script src="components/footer.js"></script>
    <script src="script.js"></script>
    <script>
        feather.replace();
        // Initialize trainings data and render
        document.addEventListener('DOMContentLoaded', async function() {
            const trainingsData = await fetchTrainings();
            document.getElementById('total-trainings').textContent = trainingsData.length;
            renderTrainings(trainingsData);

            // Filter functionality
            document.querySelectorAll('.filter-select').forEach(select => {
                select.addEventListener('change', function() {
                    const filterType = this.dataset.filter;
                    const value = this.value;
                    
                    const filteredTrainings = value === 'all' 
                        ? trainingsData 
                        : trainingsData.filter(training => {
                            if (filterType === 'type') return training.type === value;
                            if (filterType === 'level') return training.level === value;
                            if (filterType === 'skill') return training.skills_focus.includes(value);
                            return true;
                        });
                    
                    renderTrainings(filteredTrainings);
                });
            });
        });
</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>