<!DOCTYPE html> <html lang="fr" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=0.8, viewport-fit=cover" /> <meta name="robots" content="index, follow" /> <meta name="theme-color" content="#0d1b2a"> <meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="0" /> <meta name="author" content="sync" /> <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='85'>👼</text></svg>" /> <!-- Create By sync - https://feuille-heures-angelique.alwaysdata.net - (site ver:9.0.0) --> <title>Spoiler</title> <style> html{ scroll-behavior:smooth; } html, body { margin: 0px; padding: 4px; height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; background: linear-gradient(135deg, #0b1225, #66CC99); color: #ffffff; overflow: hidden; text-align: center; touch-action: manipulation; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; } h1 { margin-top: 80px; font-size: 38px; text-shadow: 0 0 10px #000; } textarea { width: 100%; max-width: 100%; max-height:300px; box-sizing:border-box; display: block; margin: 20px auto 0; border-radius: 12px; padding: 15px; background: rgba(12, 12, 12, 0.3); color: black; font-family: monospace; resize: none; /* Empêche l'utilisateur de déformer le bloc */ outline: none; /* Enlève la bordure par défaut lors du clic */ overflow:auto; -webkit-overflow-scrolling: touch; user-select: text; -webkit-user-select: text; line-height:1.5; backdrop-filter: blur(4px); } .spoiler-container { width:100%; max-width:500px; margin:20px auto; font-family:Arial, sans-serif;} .spoiler-btn { padding:10px 15px; font-size:16px; cursor:pointer; border:none; border-radius:8px; background:#333; color:#fff; transition:0.3s;} .spoiler-btn:hover { opacity:0.8;} .spoiler-content { max-height:0; overflow:hidden; transition:max-height 0.4s ease; background: transparent; color:#0a0a0a; border-radius:20px; margin-top:10px; padding:0 15px;} .spoiler-content.open { padding:15px;} </style> </head> <body> <h1>Code HTML : Spoiler</h1> <h2>🔓 Ouvrir / Fermer 🔐</h2> <div class="spoiler-container"> <button class="spoiler-btn" aria-expanded="false" onclick="toggleSpoiler(this)">🔓 Ouvrir pour copier le code ! 🔐</button> <div class="spoiler-content"> <p> <textarea rows="20" cols="60" autocorrect="off" autocapitalize="off" readonly onclick="this.select()" placeholder=" Actualisez votre page pour réafficher le code. 'CTRL.F5'"> <!-- Votre Code/texte ici ! --> </textarea> </p> </div> </div> <script> function toggleSpoiler(btn) { const content = btn.nextElementSibling; const isOpen = content.classList.contains("open"); if (isOpen) { content.classList.remove("open"); content.style.maxHeight = "0px"; btn.textContent = "Ouvrir 🔐";// 🔓 btn.setAttribute("aria-expanded", "false"); } else { content.classList.add("open"); content.style.maxHeight = content.scrollHeight + "px"; btn.textContent = "Fermer 🔓";// 🔐 btn.setAttribute("aria-expanded", "true"); } } </script> <div style="margin: 5px;"> <footer style="position:relative; margin:0 auto; width:330px; text-align:center; border-radius:20px; overflow:hidden; box-shadow:0 0 12px rgba(0,0,0,0.3); padding:10px 0; font-family:sans-serif; font-size:12px;">👼 <a href="https://feuille-heures-angelique.alwaysdata.net/" style="text-decoration: none; color: inherit;">Calculatrice d’heures - feuille d'heures Angélique (fr)</a></footer> </div> </body> </html>