4b45521f01
- Updated index.html to include an introductory section, quick links with QR codes, and a structured layout for presentations. - Added styling in home.css for new sections, including .masthead-lead, .intro, and .qr-section, to improve visual hierarchy and user experience. - Implemented QR code generation for easy access to the code repository and presentation slides.
96 lines
3.4 KiB
HTML
96 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Talks — Specificat</title>
|
||
<link rel="stylesheet" href="css/home.css" />
|
||
</head>
|
||
|
||
<body>
|
||
<div class="page">
|
||
<header class="masthead">
|
||
<h1>Talks</h1>
|
||
<p class="masthead-lead">
|
||
Présentations techniques au format <strong><a href="https://revealjs.com/" target="_blank" rel="noopener noreferrer">Reveal.js</a></strong>
|
||
|
||
</p>
|
||
</header>
|
||
|
||
<section class="intro" aria-labelledby="intro-heading">
|
||
<h2 id="intro-heading" class="section-title">À propos de ce site</h2>
|
||
<p>
|
||
Ce site regroupe les slides utilisées pour nos conférences et ateliers : navigation clavier, mode plein écran,
|
||
export PDF possible selon les thèmes. Le contenu vit dans le dépôt Git <em>Talks</em> ; les mises à jour du
|
||
dossier <code>content/</code> sont déployées automatiquement.
|
||
</p>
|
||
<p>
|
||
En salle ou en visio, vous pouvez partager l’URL des slides ou le dépôt source pour que le public récupère les
|
||
liens et le code — les QR codes ci-dessous facilitent l’accès depuis un téléphone.
|
||
</p>
|
||
</section>
|
||
|
||
<section class="qr-section" aria-labelledby="qr-heading">
|
||
<h2 id="qr-heading" class="section-title">Liens rapides</h2>
|
||
<div class="qr-grid">
|
||
<article class="qr-card">
|
||
<h3>Dépôt de code</h3>
|
||
<p class="qr-card-desc">Sources, CI et configuration du site.</p>
|
||
<a class="qr-link" href="https://git.specificat.io/arnault/Talks">git.specificat.io/arnault/Talks</a>
|
||
<div id="qrcode-repo" class="qrcode-wrap" aria-hidden="true"></div>
|
||
</article>
|
||
<article class="qr-card">
|
||
<h3>Ce site (slides)</h3>
|
||
<p class="qr-card-desc">URL à projeter ou à partager pendant une présentation.</p>
|
||
<a class="qr-link" id="qr-site-link" href="./">…</a>
|
||
<div id="qrcode-site" class="qrcode-wrap" aria-hidden="true"></div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="talks-section" aria-labelledby="talks-heading">
|
||
<h2 id="talks-heading" class="section-title">Présentations</h2>
|
||
<div class="talks-grid">
|
||
<a class="talk-card" href="kubernetes-hell-to-heaven/">
|
||
<h2>Kubernetes Operators</h2>
|
||
<p>De l’enfer au paradis — Kubernetes, opérateurs et boucle de réconciliation.</p>
|
||
<span class="meta">Dossier · kubernetes-hell-to-heaven</span>
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="site-footer">
|
||
Contenu servi depuis le dépôt <em>Talks</em> (dossier <code>content/</code>).
|
||
</footer>
|
||
</div>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/qrcodejs/qrcode.min.js"></script>
|
||
<script>
|
||
(function () {
|
||
var u = new URL(window.location.href);
|
||
u.hash = "";
|
||
var siteUrl = u.href;
|
||
|
||
var siteLink = document.getElementById("qr-site-link");
|
||
if (siteLink) {
|
||
siteLink.href = siteUrl;
|
||
siteLink.textContent = siteUrl.replace(/^https?:\/\//, "");
|
||
}
|
||
|
||
new QRCode(document.getElementById("qrcode-repo"), {
|
||
text: "https://git.specificat.io/arnault/Talks",
|
||
width: 200,
|
||
height: 200,
|
||
});
|
||
new QRCode(document.getElementById("qrcode-site"), {
|
||
text: siteUrl,
|
||
width: 200,
|
||
height: 200,
|
||
});
|
||
})();
|
||
</script>
|
||
</body>
|
||
|
||
</html>
|