https://dup-lille.netlify.app/

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4  <meta charset="UTF-8" />
5<!-- This site is hosted on Netlify. Anyone can build and deploy a site
6     like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=99633dd8-b4f1-487c-b547-5f019853f661
7     Netlify hosting facts for this site: static/SSR served via Netlify Edge. -->
8  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
9  <title>Département Universitaire de Psychiatrie — Université de Lille</title>
10  <meta name="description" content="Site du Département Universitaire de Psychiatrie (DUP) de l'Université de Lille : équipe, ressources pédagogiques et aide pratique pour les internes du DES de psychiatrie." />
11
12  <!-- Police (Google Fonts) -->
13  <link rel="preconnect" href="https://fonts.googleapis.com" />
14  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
15  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
16
17  <link rel="stylesheet" href="css/style.css" />
18</head>
19<body>
20
21  <!-- ==================================================================
22       EN-TÊTE : nom du département + navigation fixe
23       ================================================================== -->
24  <header class="hero" id="haut">
25
26    <nav class="navbar" id="navbar">
27      <a href="#haut" class="navbar__brand">DUP <span>· Lille</span></a>
28
29      <button class="navbar__toggle" id="navToggle" aria-label="Ouvrir le menu" aria-expanded="false">
30        <span></span><span></span><span></span>
31      </button>
32
33      <ul class="navbar__menu" id="navMenu">
34        <li><a href="#presentation">Présentation</a></li>
35        <li><a href="#equipe">Équipe</a></li>
36        <li><a href="#moodle">Moodle</a></li>
37        <li><a href="#ressources">Ressources</a></li>
38        <li><a href="#aide-pratique">Aide pratique</a></li>
39      </ul>
40    </nav>
41
42    <div class="hero__content">
43      <h1 id="entete-nom">Département Universitaire de Psychiatrie</h1>
44      <p class="hero__etablissement" id="entete-etablissement">Université de Lille</p>
45      <p class="hero__soustitre" id="entete-soustitre">DES de psychiatrie — CHU de Lille</p>
46      <a href="#presentation" class="btn btn--ghost hero__scroll">Découvrir le département ↓</a>
47    </div>
48  </header>
49
50  <main>
51
52    <!-- ==================================================================
53         PRÉSENTATION
54         ================================================================== -->
55    <section id="presentation" class="section">
56      <div class="section__inner">
57        <span class="eyebrow">Présentation</span>
58        <h2>Le Département Universitaire de Psychiatrie</h2>
59        <p class="lead" id="presentation-texte-site"><!-- rempli par script.js --></p>
60        <p class="lead" id="presentation-texte-dup"><!-- rempli par script.js --></p>
61        <ul class="badges" id="presentation-philosophie"><!-- rempli par script.js --></ul>
62      </div>
63    </section>
64
65    <!-- ==================================================================
66         ÉQUIPE
67         ================================================================== -->
68    <section id="equipe" class="section section--alt">
69      <div class="section__inner">
70        <span class="eyebrow">Équipe</span>
71        <h2>L'équipe universitaire</h2>
72        <p class="lead">Les enseignants-chercheurs et praticiens hospitalo-universitaires du département.</p>
73
74        <div class="grid grid--equipe" id="equipe-grille">
75          <!-- Les cartes de l'équipe sont générées automatiquement par js/script.js
76               à partir des données de js/data.js -->
77        </div>
78      </div>
79    </section>
80
81    <!-- ==================================================================
82         MOODLE
83         ================================================================== -->
84    <section id="moodle" class="section">
85      <div class="section__inner">
86        <span class="eyebrow">Moodle</span>
87        <h2>

87Moodle</h2>
88        <p class="lead" id="moodle-description"><!-- rempli par script.js --></p>
89        <a id="moodle-lien" class="btn btn--accent" href="#" target="_blank" rel="noopener noreferrer">Accéder à Moodle ↗</a>
90
91        <div class="codes-moodle">
92          <h3>Codes d'accès aux cours Moodle</h3>
93          <p class="text-muted">Un code par année / cours, pour ne plus les perdre.</p>
94          <div class="table-wrap">
95            <table class="table" id="codes-moodle-table">
96              <thead>
97                <tr>
98                  <th>Cours / espace Moodle</th>
99                  <th>Public concerné</th>
100                  <th>Code d'accès</th>
101                </tr>
102              </thead>
103              <tbody id="codes-moodle-corps">
104                <!-- Lignes générées automatiquement à partir de js/data.js -->
105              </tbody>
106            </table>
107          </div>
108        </div>
109      </div>
110    </section>
111
112    <!-- ==================================================================
113         RESSOURCES
114         ================================================================== -->
115    <section id="ressources" class="section">
116      <div class="section__inner">
117        <span class="eyebrow">Ressources</span>
118        <h2>Ressources pédagogiques</h2>
119        <p class="lead">D'autres plateformes et sites utiles à votre formation.</p>
120
121        <div class="grid grid--ressources" id="ressources-grille">
122          <!-- Cartes générées automatiquement à partir de js/data.js -->
123        </div>
124      </div>
125    </section>
126
127    <!-- ==================================================================
128         AIDE PRATIQUE
129         ================================================================== -->
130    <section id="aide-pratique" class="section section--alt">
131      <div class="section__inner">
132        <span class="eyebrow">Aide pratique</span>
133        <h2>Aide pratique</h2>
134
135        <div class="grid grid--aide">
136          <div class="card card--aide">
137            <h3 id="aide-email-titre"></h3>
138            <p id="aide-email-intro"></p>
139            <ol class="steps" id="aide-email-etapes"><!-- rempli par script.js --></ol>
140          </div>
141
142          <div class="card card--aide">
143            <h3 id="aide-notif-titre"></h3>
144            <p id="aide-notif-texte"></p>
145          </div>
146        </div>
147      </div>
148    </section>
149
150  </main>
151
152  <footer class="footer">
153    <p>Département Universitaire de Psychiatrie — Université de Lille · CHU de Lille</p>
154    <p class="footer__muted">Ce site est un point d'entrée pédagogique. Les cours se trouvent sur Moodle.</p>
155  </footer>
156
157  

157<script src="js/data.js"></script>

157
158  

158<script src="js/script.js"></script>

158
159</body>
160</html>