live renderhtml
htmlideo.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Figures de style – Jardin des Idées</title>
<style>
/* --------------------
Color palette & base
-------------------- */
:root {
--bg: #faf8f3;
--fg: #213c34;
--accent: #40f2d0;
--accent-dark: #2ba899;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
background:var(--bg);
color:var(--fg);
line-height:1.55;
min-height:100svh;
overflow-x:hidden;
}
header,footer{padding:1.8rem 6vw;display:flex;justify-content:space-between;align-items:center;backdrop-filter:blur(3px)}
header h1{font-size:clamp(1.4rem,2.5vw+1rem,2.8rem);font-weight:500;letter-spacing:.03em}
main{padding:2rem 6vw;max-width:70rem;margin-inline:auto;position:relative;z-index:1}
#search{width:100%;padding:.7rem 1rem;border:1px solid var(--accent-dark);border-radius:.6rem;font-size:1rem;margin-bottom:1.6rem}
/* Accordions */
details{background:rgba(255,255,255,.65);border:1px solid var(--accent);border-radius:1rem;margin-bottom:.8rem;overflow:hidden}
summary{cursor:pointer;padding:1rem 1.4rem;font-size:1.12rem;list-style:none;display:flex;justify-content:space-between;align-items:center;user-select:none}
summary::after{content:"➕";transition:transform .3s ease}
details[open] summary::after{content:"➖";transform:rotate(180deg)}
ul.category{padding:0 1.6rem 1.2rem 2rem}
ul.category li{margin:.4rem 0;transition:background .2s ease;padding:.2rem .4rem;border-radius:.4rem}
ul.category li:hover{background:var(--accent);color:#fff}
/* Footer */
footer p{font-size:.9rem;opacity:.65}
/* --------------
Background canvas
-------------- */
#bg{position:fixed;inset:0;z-index:-1;pointer-events:none}
/* Responsive tweaks */
@media(max-width:600px){
header,footer{padding:1.2rem 4vw}
main{padding:1.4rem 4vw}
}
</style>
</head>
<body>
<canvas id="bg"></canvas>
<header>
<h1>Jardin des Idées</h1>
<span aria-hidden="true">🌿</span>
</header>
<main>
<input type="search" id="search" placeholder="Rechercher une figure…" />
<!-- Les différentes figures de style -->
<details open>
<summary>Les figures d’analogie</summary>
<ul class="category">
<li>La comparaison</li>
<li>La métaphore</li>
<li>La personnification</li>
<li>L’allégorie <em>(notion avancée)</em></li>
</ul>
</details>
<details>
<summary>Les figures d’amplification</summary>
<ul class="category">
<li>L’énumération</li>
<li>La gradation</li>
<li>L’hyperbole</li>
</ul>
</details>
<details>
<summary>Les figures d’insistance</summary>
<ul class="category">
<li>La répétition</li>
<li>L’anaphore <em>(notion avancée)</em></li>
<li>La redondance <em>(notion avancée)</em></li>
<li>Le pléonasme <em>(notion avancée)</em></li>
</ul>
</details>
<details>
<summary>Les figures d’atténuation et d’omission</summary>
<ul class="category">
<li>L’euphémisme</li>
<li>La litote</li>
<li>L’ellipse <em>(notion avancée)</em></li>
</ul>
</details>
<details>
<summary>Les figures d’opposition</summary>
<ul class="category">
<li>L’antithèse</li>
<li>L’oxymore</li>
<li>L’ironie</li>
<li>Le chiasme <em>(notion avancée)</em></li>
</ul>
</details>
<details>
<summary>Les figures de substitution</summary>
<ul class="category">
<li>La périphrase</li>
<li>La métonymie</li>
<li>La synecdoque <em>(notion avancée)</em></li>
</ul>
</details>
</main>
<footer>
<p>© 2025 Kobalt – Exploration des écosystèmes créatifs</p>
</footer>
<script>
/* -----------------------------
Instant search / filter list
----------------------------- */
const searchInput = document.getElementById("search");
searchInput.addEventListener("input", e => {
const q = e.target.value.toLowerCase();
document.querySelectorAll("ul.category li").forEach(li => {
li.style.display = li.textContent.toLowerCase().includes(q) ? "list-item" : "none";
});
});
/* -----------------------------------------
Minimal generative background (organic points)
----------------------------------------- */
const canvas = document.getElementById("bg");
const ctx = canvas.getContext("2d");
let W, H;
const dots = [];
const DOTS = 420;
function resize() {
W = canvas.width = window.innerWidth * devicePixelRatio;
H = canvas.height = window.innerHeight * devicePixelRatio;
canvas.style.width = window.innerWidth + "px";
canvas.style.height = window.innerHeight + "px";
ctx.scale(devicePixelRatio, devicePixelRatio);
}
resize();
window.addEventListener("resize", resize);
// create initial field of dots following differential‑growth-ish directions
function initDots() {
dots.length = 0;
for (let i = 0; i < DOTS; i++) {
dots.push({
x: Math.random() * window.innerWidth,
y: Math.random() * window.innerHeight,
vx: (Math.random() - 0.5) * 0.6,
vy: (Math.random() - 0.5) * 0.6
});
}
}
initDots();
function step() {
ctx.fillStyle = "rgba(250, 248, 243, 0.1)";
ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);
ctx.fillStyle = "rgba(33, 60, 52, 0.9)";
dots.forEach(p => {
// simple edge‑bounce
if (p.x < 0 || p.x > window.innerWidth) p.vx *= -1;
if (p.y < 0 || p.y > window.innerHeight) p.vy *= -1;
// subtle acceleration towards centre to mimic growth toward nutrients
const dx = window.innerWidth / 2 - p.x;
const dy = window.innerHeight / 2 - p.y;
p.vx += dx * 0.000015;
p.vy += dy * 0.000015;
// speed limit
const spd = Math.hypot(p.vx, p.vy);
const max = 0.9;
if (spd > max) { p.vx *= max / spd; p.vy *= max / spd; }
p.x += p.vx;
p.y += p.vy;
ctx.beginPath();
ctx.arc(p.x, p.y, 1.4, 0, Math.PI * 2);
ctx.fill();
});
requestAnimationFrame(step);
}
step();
</script>
</body>
</html>