Classe css “multicolor-shadow” <\/p>\n\n\n\nClasse css “fill-hover-button”<\/button>\n\n\n\nCalculatrice m\u00e9thode 3-4-5<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n max-width: 1000px;\n margin: 40px auto;\n padding: 20px;\n }\n\n .carte {\n background-color: #f8f8f8;\n padding: 20px;\n margin: 10px;\n border-radius: 10px;\n box-shadow: 0 2px 6px rgba(0,0,0,0.1);\n border-left: 5px solid #2a9d8f;\n flex: 1;\n }\n\n .carte h3 {\n margin-top: 0;\n }\n\n .ligne {\n display: flex;\n flex-wrap: wrap;\n gap: 20px;\n }\n\n #resultat {\n margin-top: 20px;\n font-weight: bold;\n background: #f0f0f0;\n padding: 10px;\n border-left: 4px solid #2a9d8f;\n border-radius: 5px;\n }\n\n input, button {\n font-size: 1em;\n padding: 5px 10px;\n margin-top: 10px;\n }\n <\/style>\n<\/head>\n<body>\n\n <!-- Carte : Calculatrice -->\n <div class=\"carte lift-card\">\n <h2>\ud83d\udcd0 Calculatrice m\u00e9thode 3-4-5<\/h2>\n <p>Cette calculatrice permet de d\u00e9terminer les dimensions d\u2019un triangle rectangle proportionnel (3-4-5), utile pour tracer une ligne bien droite \u00e0 angle droit.<\/p>\n\n <label>Longueur r\u00e9elle \u00e0 tracer (en cm) :\n <input type=\"number\" id=\"hauteur\" step=\"0.01\" min=\"0\">\n <\/label>\n <br>\n <button onclick=\"calculer()\">Calculer<\/button>\n\n <div id=\"resultat\"><\/div>\n <\/div>\n\n <script>\n function calculer() {\n const h = parseFloat(document.getElementById(\"hauteur\").value);\n const res = document.getElementById(\"resultat\");\n\n if (isNaN(h) || h <= 0) {\n res.innerHTML = \"\u274c Veuillez entrer une valeur num\u00e9rique positive.\";\n return;\n }\n\n const arrondie = Math.ceil(h \/ 4) * 4;\n const facteur = arrondie \/ 4;\n const base = 3 * facteur;\n const hypotenuse = 5 * facteur;\n\n res.innerHTML = `\n <p>\ud83d\udd22 <strong>Hauteur arrondie :<\/strong> ${arrondie} cm<\/p>\n <p>\ud83e\uddee <strong>Facteur multiplicateur :<\/strong> ${facteur}<\/p>\n <p>\ud83d\udccf <strong>Base :<\/strong> ${base} cm<\/p>\n <p>\ud83d\udcd0 <strong>Hypot\u00e9nuse :<\/strong> ${hypotenuse} cm<\/p>\n <p>\u2705 Il est maintenant possible de tracer les ${h} cm r\u00e9els \u00e0 l\u2019int\u00e9rieur de ce triangle d\u2019\u00e9querre.<\/p>\n `;\n }\n <\/script>\n\n\n\n<p class=\"wp-block-paragraph\">Ci dessus la classe css “lift-card” (Animation de carte au survol fa\u00e7on \u201clift-up\u201d (carte qui se soul\u00e8ve)-Ajoutez un effet subtil o\u00f9 une carte se soul\u00e8ve avec une ombre renforc\u00e9e au survol.)<\/p>\n\n\n\n<p class=\"animated-background\">test classe css “animated-background”<\/p>\n\n\n\n<button onclick=\"toggleVisibility('contenu')\">fonction js afficher\/Masquer texte dynamique(apr\u00e8s clic)<\/button>\n<div id=\"contenu\" style=\"display:none; opacity:0;\">Texte dynamique ici<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Reconnaissance vocale:<\/p>\n\n\n\n<div id=\"speech-recognition\">\n <textarea id=\"transcript\" rows=\"6\" style=\"width: 100%;\" placeholder=\"Votre texte appara\u00eetra ici...\"><\/textarea>\n \n <div style=\"margin-top: 10px;\">\n <button id=\"start-recognition\">D\u00e9marrer la dict\u00e9e<\/button>\n <button id=\"resume-recognition\" disabled>Continuer<\/button>\n <\/div>\n \n <div style=\"margin-top: 10px;\">\n <button id=\"send-email\">\ud83d\udce7 Envoyer par Email<\/button>\n <button id=\"send-whatsapp\">\ud83d\udcf1 Envoyer par WhatsApp<\/button>\n <\/div>\n<\/div>\n\n<script>\n window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n\n if ('SpeechRecognition' in window) {\n const recognition = new SpeechRecognition();\n recognition.lang = 'fr-FR';\n recognition.interimResults = true;\n recognition.continuous = false;\n\n const startBtn = document.getElementById('start-recognition');\n const resumeBtn = document.getElementById('resume-recognition');\n const textarea = document.getElementById('transcript');\n const emailBtn = document.getElementById('send-email');\n const whatsappBtn = document.getElementById('send-whatsapp');\n\n let cursorPos = 0;\n\n function startDictation() {\n recognition.start();\n startBtn.disabled = true;\n resumeBtn.disabled = true;\n startBtn.textContent = '\u00c9coute en cours...';\n }\n\n function resumeDictation() {\n cursorPos = textarea.selectionStart;\n recognition.start();\n resumeBtn.disabled = true;\n resumeBtn.textContent = 'Reprise en cours...';\n }\n\n startBtn.addEventListener('click', startDictation);\n resumeBtn.addEventListener('click', resumeDictation);\n\n recognition.onresult = (event) => {\n let finalTranscript = '';\n\n for (let i = event.resultIndex; i < event.results.length; ++i) {\n if (event.results[i].isFinal) {\n finalTranscript += event.results[i][0].transcript;\n }\n }\n\n if (finalTranscript) {\n const currentText = textarea.value;\n const before = currentText.substring(0, cursorPos);\n const after = currentText.substring(cursorPos);\n textarea.value = before + finalTranscript + after;\n\n cursorPos = (before + finalTranscript).length;\n textarea.setSelectionRange(cursorPos, cursorPos);\n }\n };\n\n recognition.onend = () => {\n startBtn.disabled = false;\n resumeBtn.disabled = false;\n startBtn.textContent = 'D\u00e9marrer la dict\u00e9e';\n resumeBtn.textContent = 'Continuer';\n };\n\n recognition.onerror = (event) => {\n textarea.value += \"\\n[Erreur] \" + event.error + \"\\n\";\n startBtn.disabled = false;\n resumeBtn.disabled = false;\n };\n\n \/\/ Envoi par Email\n emailBtn.addEventListener('click', () => {\n const body = encodeURIComponent(textarea.value);\n window.location.href = `mailto:?subject=Texte dict\u00e9&body=${body}`;\n });\n\n \/\/ Envoi via WhatsApp\n whatsappBtn.addEventListener('click', () => {\n const message = encodeURIComponent(textarea.value);\n const url = \/Android|iPhone|iPad\/i.test(navigator.userAgent)\n ? `https:\/\/wa.me\/?text=${message}`\n : `https:\/\/web.whatsapp.com\/send?text=${message}`;\n window.open(url, '_blank');\n });\n\n } else {\n document.getElementById('speech-recognition').innerHTML =\n \"<p>La reconnaissance vocale n'est pas support\u00e9e par ce navigateur.<\/p>\";\n }\n<\/script>\n\n\n\n\n<div id=\"geo-locator\">\n <button id=\"get-location\">\ud83d\udccd Obtenir ma position<\/button>\n <p id=\"location-output\">Coordonn\u00e9es GPS non r\u00e9cup\u00e9r\u00e9es.<\/p>\n<\/div>\n\n<script>\n const locationBtn = document.getElementById('get-location');\n const output = document.getElementById('location-output');\n\n locationBtn.addEventListener('click', () => {\n if (!navigator.geolocation) {\n output.textContent = \"La g\u00e9olocalisation n'est pas support\u00e9e par ce navigateur.\";\n return;\n }\n\n output.textContent = \"R\u00e9cup\u00e9ration en cours...\";\n\n navigator.geolocation.getCurrentPosition(\n (position) => {\n const lat = position.coords.latitude.toFixed(7);\n const lon = position.coords.longitude.toFixed(7);\n output.textContent = `\ud83d\udccc Latitude: ${lat}, Longitude: ${lon}`;\n },\n (error) => {\n switch(error.code) {\n case error.PERMISSION_DENIED:\n output.textContent = \"Permission refus\u00e9e pour la g\u00e9olocalisation.\";\n break;\n case error.POSITION_UNAVAILABLE:\n output.textContent = \"Position non disponible.\";\n break;\n case error.TIMEOUT:\n output.textContent = \"Temps d'attente d\u00e9pass\u00e9.\";\n break;\n default:\n output.textContent = \"Une erreur est survenue.\";\n }\n }\n );\n });\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>classe css JS “animated-title” Classe css “multicolor-shadow” Classe css “fill-hover-button” Calculatrice m\u00e9thode 3-4-5 \ud83d\udcd0 Calculatrice m\u00e9thode 3-4-5 Cette calculatrice permet de d\u00e9terminer les dimensions d\u2019un triangle rectangle proportionnel (3-4-5), utile pour tracer une ligne bien droite \u00e0 angle droit. Longueur r\u00e9elle \u00e0 tracer (en cm) : Calculer Ci dessus la classe css “lift-card” (Animation de … <a href=\"https:\/\/www.francisfouda.ovh\/sunrisefarm\/index.php\/repertoire-de-code-css-javascript-php-html\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “R\u00e9pertoire de code css, javascript, php, html…”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-71","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.francisfouda.ovh\/sunrisefarm\/index.php\/wp-json\/wp\/v2\/pages\/71","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.francisfouda.ovh\/sunrisefarm\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.francisfouda.ovh\/sunrisefarm\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.francisfouda.ovh\/sunrisefarm\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.francisfouda.ovh\/sunrisefarm\/index.php\/wp-json\/wp\/v2\/comments?post=71"}],"version-history":[{"count":47,"href":"https:\/\/www.francisfouda.ovh\/sunrisefarm\/index.php\/wp-json\/wp\/v2\/pages\/71\/revisions"}],"predecessor-version":[{"id":120,"href":"https:\/\/www.francisfouda.ovh\/sunrisefarm\/index.php\/wp-json\/wp\/v2\/pages\/71\/revisions\/120"}],"wp:attachment":[{"href":"https:\/\/www.francisfouda.ovh\/sunrisefarm\/index.php\/wp-json\/wp\/v2\/media?parent=71"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}