Add closing slide section with QR codes and styling enhancements
- Introduced a new closing slide section in index.html to thank the audience and provide QR codes for easy access to the repository and slides. - Added corresponding CSS styles in custom.css to enhance the presentation of the closing slide elements, including layout and typography adjustments. - Implemented QR code generation for the repository and slides using JavaScript for improved user engagement.
This commit is contained in:
@@ -284,3 +284,70 @@
|
|||||||
color: var(--accent-cyan);
|
color: var(--accent-cyan);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Slide de fin : remerciement, Q/R, QR codes */
|
||||||
|
.reveal section.slide-fin h1 {
|
||||||
|
margin: 0 0 0.2em;
|
||||||
|
font-size: clamp(1.15em, 5vw, 1.45em);
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal section.slide-fin .slide-fin-thanks {
|
||||||
|
margin: 0 0 0.15em;
|
||||||
|
font-size: 0.52em;
|
||||||
|
line-height: 1.35;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal section.slide-fin .slide-fin-cta {
|
||||||
|
margin: 0 0 0.35em;
|
||||||
|
font-size: 0.72em;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--accent-cyan);
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal section.slide-fin .slide-fin-hint {
|
||||||
|
margin: 0 auto 0.45em;
|
||||||
|
max-width: 28em;
|
||||||
|
font-size: 0.38em;
|
||||||
|
line-height: 1.4;
|
||||||
|
color: var(--text-subtle);
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal section.slide-fin .slide-fin-qr-grid {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-end;
|
||||||
|
gap: 0.85em 1.75em;
|
||||||
|
margin: 0.15em 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal section.slide-fin .slide-fin-qr-block {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: none;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal section.slide-fin .slide-fin-qr-block figcaption {
|
||||||
|
margin: 0 0 0.35em;
|
||||||
|
font-size: 0.36em;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal section.slide-fin .qrcode-fin-wrap {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.2em;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
line-height: 0;
|
||||||
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal section.slide-fin .qrcode-fin-wrap canvas,
|
||||||
|
.reveal section.slide-fin .qrcode-fin-wrap img {
|
||||||
|
display: block;
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
}
|
||||||
|
|||||||
@@ -667,8 +667,31 @@ spec:
|
|||||||
honnêtes, plus que chaque ligne du deck.</p>
|
honnêtes, plus que chaque ligne du deck.</p>
|
||||||
</aside>
|
</aside>
|
||||||
</section>
|
</section>
|
||||||
|
<section class="slide-fin">
|
||||||
|
<h1>Merci</h1>
|
||||||
|
<p class="slide-fin-thanks">Merci pour votre attention.</p>
|
||||||
|
<p class="slide-fin-cta">Des questions ?</p>
|
||||||
|
<p class="slide-fin-hint">Dépôt des sources et page d’accueil des slides — à scanner pour repartir avec les
|
||||||
|
liens.</p>
|
||||||
|
<div class="slide-fin-qr-grid">
|
||||||
|
<figure class="slide-fin-qr-block">
|
||||||
|
<figcaption>Dépôt</figcaption>
|
||||||
|
<div id="qrcode-fin-repo" class="qrcode-fin-wrap" aria-hidden="true"></div>
|
||||||
|
</figure>
|
||||||
|
<figure class="slide-fin-qr-block">
|
||||||
|
<figcaption>Slides — accueil</figcaption>
|
||||||
|
<div id="qrcode-fin-site" class="qrcode-fin-wrap" aria-hidden="true"></div>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
<aside class="notes">
|
||||||
|
<p>Slide de clôture : laisser le temps de photographier les QR. Rappeler à voix haute le dépôt et l’URL des
|
||||||
|
slides si la salle est loin de l’écran.</p>
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
<footer class="deck-footer">
|
<footer class="deck-footer">
|
||||||
|
<a href="../">Accueil</a>
|
||||||
|
<span class="deck-footer-sep" aria-hidden="true">·</span>
|
||||||
<a href="https://specificat.io/" rel="noopener noreferrer" target="_blank">Specificat.io</a>
|
<a href="https://specificat.io/" rel="noopener noreferrer" target="_blank">Specificat.io</a>
|
||||||
<span class="deck-footer-sep" aria-hidden="true">·</span>
|
<span class="deck-footer-sep" aria-hidden="true">·</span>
|
||||||
<span class="deck-footer-rights">All rights reserved</span>
|
<span class="deck-footer-rights">All rights reserved</span>
|
||||||
@@ -799,6 +822,22 @@ spec:
|
|||||||
});
|
});
|
||||||
})();
|
})();
|
||||||
</script>
|
</script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/qrcodejs/qrcode.min.js"></script>
|
||||||
|
<script>
|
||||||
|
(function () {
|
||||||
|
if (typeof QRCode === "undefined") return;
|
||||||
|
var repoUrl = "https://git.specificat.io/arnault/Talks";
|
||||||
|
var talksHome = new URL("../", window.location.href);
|
||||||
|
talksHome.hash = "";
|
||||||
|
var siteUrl = talksHome.href;
|
||||||
|
|
||||||
|
var repoEl = document.getElementById("qrcode-fin-repo");
|
||||||
|
var siteEl = document.getElementById("qrcode-fin-site");
|
||||||
|
var qrOpts = { width: 150, height: 150 };
|
||||||
|
if (repoEl) new QRCode(repoEl, Object.assign({ text: repoUrl }, qrOpts));
|
||||||
|
if (siteEl) new QRCode(siteEl, Object.assign({ text: siteUrl }, qrOpts));
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user