{"id":1857,"date":"2025-11-07T01:36:56","date_gmt":"2025-11-07T01:36:56","guid":{"rendered":"https:\/\/eccsaintsiege.org\/?page_id=1857"},"modified":"2025-11-13T03:47:51","modified_gmt":"2025-11-13T03:47:51","slug":"jy-serai-seme-2025","status":"publish","type":"page","link":"https:\/\/eccsaintsiege.org\/en\/jy-serai-seme-2025\/","title":{"rendered":"J&rsquo;Y SERAI &#8211; SEME 2025"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1857\" class=\"elementor elementor-1857\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-eb822ff e-flex e-con-boxed e-con e-parent\" data-id=\"eb822ff\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-58a5421 e-flex e-con-boxed e-con e-child\" data-id=\"58a5421\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5ed29cc elementor-widget elementor-widget-html\" data-id=\"5ed29cc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ECC \"J'Y SERAI - SEME 2025\" Badge Generator - Improved UI + Mobile First -->\r\n<style>\r\n.ecc-badge-wrap {\r\n  max-width: 680px;\r\n  margin: 20px auto;\r\n  padding: 20px;\r\n  border-radius: 18px;\r\n  background: #ffffff;\r\n  box-shadow: 0 10px 30px rgba(0,0,0,.08);\r\n  font-family: Inter, system-ui, Arial;\r\n  text-align: center;\r\n}\r\n\r\n.ecc-title {\r\n  font-size: 22px;\r\n  color: #003e9e;\r\n  font-weight: 700;\r\n  margin-bottom: 16px;\r\n  letter-spacing: -.3px;\r\n}\r\n\r\n.ecc-canvas-wrap {\r\n  position: relative;\r\n  width: 100%;\r\n  max-width: 340px;\r\n  height: 340px;\r\n  margin: 0 auto 14px;\r\n  border-radius: 12px;\r\n  overflow: hidden;\r\n  background: #f3f3f3;\r\n}\r\n\r\n.ecc-canvas {\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n.ecc-preview-overlay {\r\n  position: absolute;\r\n  inset: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  pointer-events: none;\r\n}\r\n\r\n.ecc-field {\r\n  margin: 10px auto;\r\n  max-width: 260px;\r\n}\r\n\r\n.ecc-input {\r\n  width: 100%;\r\n  padding: 12px;\r\n  border: 1px solid #ddd;\r\n  border-radius: 10px;\r\n  font-size: 14px;\r\n}\r\n\r\n.ecc-range {\r\n  width: 100%;\r\n}\r\n\r\n.ecc-btn {\r\n  width: 100%;\r\n  padding: 14px;\r\n  font-size: 16px;\r\n  border-radius: 12px;\r\n  border: none;\r\n  cursor: pointer;\r\n  margin-top: 12px;\r\n}\r\n\r\n.ecc-btn-primary {\r\n  background: #0a49c2;\r\n  color: #fff;\r\n  font-weight: 700;\r\n  transition: .25s;\r\n}\r\n\r\n.ecc-btn-primary:hover {\r\n  background: #093da1;\r\n}\r\n\r\n.ecc-btn-secondary {\r\n  background: #e9e9e9;\r\n  color: #222;\r\n  border: 1px solid #ddd;\r\n}\r\n\r\n#ecc-counter {\r\n  font-size: 13px;\r\n  margin-top: 8px;\r\n  color: #666;\r\n}\r\n\r\n\/* Mobile *\/\r\n@media (max-width: 450px){\r\n  .ecc-title { font-size: 18px; }\r\n  .ecc-canvas-wrap { max-width: 300px; height: 300px; }\r\n}\r\n<\/style>\r\n\r\n<div class=\"ecc-badge-wrap\">\r\n  <div class=\"ecc-title\">Cr\u00e9er ton badge officiel \u00ab J\u2019Y SERAI \u2014 SEME 2025 \u00bb<\/div>\r\n\r\n  <div class=\"ecc-canvas-wrap\">\r\n    <canvas id=\"ecc-canvas\" class=\"ecc-canvas\" width=\"340\" height=\"340\"><\/canvas>\r\n    <img decoding=\"async\" id=\"ecc-overlay-preview\" class=\"ecc-preview-overlay\"\r\n      src=\"https:\/\/eccsaintsiege.org\/wp-content\/uploads\/2025\/11\/JY-SERAI-SEME-2025_083548.png\" \/>\r\n  <\/div>\r\n\r\n  <div class=\"ecc-field\">\r\n    <input type=\"file\" id=\"ecc-file\" class=\"ecc-input\" accept=\"image\/*\">\r\n  <\/div>\r\n\r\n  <div class=\"ecc-field\">\r\n    <label style=\"font-size:13px;color:#555\">Zoom<\/label>\r\n    <input type=\"range\" id=\"ecc-zoom\" class=\"ecc-range\" min=\"1\" max=\"3\" step=\"0.01\" value=\"1.0\"\/>\r\n  <\/div>\r\n\r\n  <div class=\"ecc-field\">\r\n    <label style=\"font-size:13px;color:#555\">Rotation<\/label>\r\n    <input type=\"range\" id=\"ecc-rotate\" class=\"ecc-range\" min=\"-30\" max=\"30\" step=\"1\" value=\"0\"\/>\r\n  <\/div>\r\n\r\n  <button id=\"ecc-center\" class=\"ecc-btn ecc-btn-secondary\">Recentrer la photo<\/button>\r\n\r\n  <button id=\"ecc-export\" class=\"ecc-btn ecc-btn-primary\">T\u00e9l\u00e9charger mon badge \ud83c\udf89<\/button>\r\n\r\n  <div id=\"ecc-counter\"><\/div>\r\n<\/div>\r\n\r\n\r\n<script>\r\n\/* ---------- CONFIG ---------- *\/\r\nconst OVERLAY_URL = \"https:\/\/eccsaintsiege.org\/wp-content\/uploads\/2025\/11\/JY-SERAI-SEME-2025_083548.png\";\r\nconst EXPORT_SIZE = 1080;\r\n\r\n\/* ---------- DOM ---------- *\/\r\nconst fileInput = document.getElementById(\"ecc-file\");\r\nconst zoomInput = document.getElementById(\"ecc-zoom\");\r\nconst rotateInput = document.getElementById(\"ecc-rotate\");\r\nconst centerBtn = document.getElementById(\"ecc-center\");\r\nconst exportBtn = document.getElementById(\"ecc-export\");\r\nconst counterBox = document.getElementById(\"ecc-counter\");\r\n\r\nconst canvas = document.getElementById(\"ecc-canvas\");\r\nconst ctx = canvas.getContext(\"2d\");\r\n\r\nlet srcImg = new Image();\r\nlet overlayImg = new Image();\r\noverlayImg.src = OVERLAY_URL;\r\n\r\nlet imgLoaded = false;\r\nlet imgScale = 1;\r\nlet imgRotate = 0;\r\nlet imgX = 0;\r\nlet imgY = 0;\r\n\r\nlet dragging = false;\r\n\r\n\r\n\/* ---------- COUNTER VIA REST API ---------- *\/\r\nconst apiBase = window.location.origin + \"\/wp-json\/ecc\/v1\";\r\n\r\nasync function fetchCounter() {\r\n  try {\r\n    const res = await fetch(`${apiBase}\/get_badge_count`);\r\n    const data = await res.json();\r\n    counterBox.innerHTML = `\ud83d\udd25 Badges d\u00e9j\u00e0 cr\u00e9\u00e9s : <strong>${data.count}<\/strong>`;\r\n  } catch(e){\r\n    console.error(\"Erreur compteur:\", e);\r\n    counterBox.innerHTML = \"\ud83d\udd04 Chargement...\";\r\n  }\r\n}\r\n\r\nasync function incCounter() {\r\n  try {\r\n    const res = await fetch(`${apiBase}\/increment_badge`, { method: \"POST\" });\r\n    const data = await res.json();\r\n    counterBox.innerHTML = `\ud83d\udd25 Badges d\u00e9j\u00e0 cr\u00e9\u00e9s : <strong>${data.new_count}<\/strong>`;\r\n  } catch(e){\r\n    console.error(\"Erreur increment:\", e);\r\n  }\r\n}\r\n\r\n\/\/ Initial load\r\nfetchCounter();\r\n\r\n\r\n\/* Drawing *\/\r\nfunction drawPreview() {\r\n  ctx.clearRect(0,0,canvas.width,canvas.height);\r\n  ctx.fillStyle=\"#fff\"; ctx.fillRect(0,0,canvas.width,canvas.height);\r\n\r\n  if(imgLoaded){\r\n    const cx = canvas.width\/2, cy = canvas.height\/2;\r\n    ctx.save();\r\n    ctx.translate(cx+imgX, cy+imgY);\r\n    ctx.rotate(imgRotate*Math.PI\/180);\r\n    ctx.scale(imgScale,imgScale);\r\n    ctx.drawImage(srcImg, -srcImg.width\/2, -srcImg.height\/2);\r\n    ctx.restore();\r\n  }\r\n}\r\n\r\n\/* Upload *\/\r\nfileInput.addEventListener(\"change\", e=>{\r\n  const f = e.target.files[0]; if(!f) return;\r\n  const url = URL.createObjectURL(f);\r\n  srcImg.onload = ()=> {\r\n    imgLoaded=true;\r\n    imgScale = canvas.width\/srcImg.width;\r\n    zoomInput.value = imgScale;\r\n    imgX=0; imgY=0; imgRotate=0;\r\n    drawPreview();\r\n  };\r\n  srcImg.src = url;\r\n});\r\n\r\n\/* Zoom & Rotate *\/\r\nzoomInput.addEventListener(\"input\", ()=>{ imgScale=parseFloat(zoomInput.value); drawPreview(); });\r\nrotateInput.addEventListener(\"input\", ()=>{ imgRotate=parseFloat(rotateInput.value); drawPreview(); });\r\n\r\n\/* Drag *\/\r\ncanvas.addEventListener(\"mousedown\", e=>{\r\n  if(!imgLoaded) return;\r\n  dragging=true;\r\n  lastX=e.clientX; lastY=e.clientY;\r\n});\r\nwindow.addEventListener(\"mousemove\", e=>{\r\n  if(!dragging) return;\r\n  imgX += e.clientX-lastX;\r\n  imgY += e.clientY-lastY;\r\n  lastX=e.clientX; lastY=e.clientY;\r\n  drawPreview();\r\n});\r\nwindow.addEventListener(\"mouseup\", ()=>dragging=false);\r\n\r\n\/* Touch *\/\r\ncanvas.addEventListener(\"touchstart\", e=>{\r\n  if(!imgLoaded) return;\r\n  dragging=true;\r\n  const t=e.touches[0];\r\n  lastX=t.clientX; lastY=t.clientY;\r\n},{passive:false});\r\ncanvas.addEventListener(\"touchmove\", e=>{\r\n  if(!dragging) return;\r\n  const t=e.touches[0];\r\n  imgX+=t.clientX-lastX;\r\n  imgY+=t.clientY-lastY;\r\n  lastX=t.clientX; lastY=t.clientY;\r\n  drawPreview();\r\n  e.preventDefault();\r\n},{passive:false});\r\ncanvas.addEventListener(\"touchend\", ()=>dragging=false);\r\n\r\ncenterBtn.addEventListener(\"click\", ()=>{\r\n  imgX=0; imgY=0; drawPreview();\r\n});\r\n\r\n\/* Export *\/\r\nexportBtn.addEventListener(\"click\", ()=> {\r\n  if(!imgLoaded){ alert(\"T\u00e9l\u00e9verse une photo d'abord \ud83d\ude4f\"); return; }\r\n\r\n  const ex=document.createElement(\"canvas\"),x=ex.getContext(\"2d\");\r\n  ex.width=ex.height=EXPORT_SIZE;\r\n  x.fillStyle=\"#fff\"; x.fillRect(0,0,ex.width,ex.height);\r\n\r\n  const r=EXPORT_SIZE\/canvas.width;\r\n  const cx=EXPORT_SIZE\/2+imgX*r, cy=EXPORT_SIZE\/2+imgY*r;\r\n\r\n  x.save();\r\n  x.translate(cx,cy);\r\n  x.rotate(imgRotate * Math.PI\/180);\r\n  x.scale(imgScale*r,imgScale*r);\r\n  x.drawImage(srcImg,-srcImg.width\/2,-srcImg.height\/2);\r\n  x.restore();\r\n\r\n  const ov=new Image();\r\n  ov.onload=()=>{\r\n    x.drawImage(ov,0,0,EXPORT_SIZE,EXPORT_SIZE);\r\n    ex.toBlob(b=>{\r\n      const url=URL.createObjectURL(b);\r\n      const a=document.createElement(\"a\");\r\n      a.href=url; a.download=\"JY-SERAI-SEME2025.png\";\r\n      a.click(); URL.revokeObjectURL(url);\r\n\r\n      incCounter(); \/\/ \u2705 analytics\r\n    },\"image\/png\");\r\n  };\r\n  ov.src = OVERLAY_URL;\r\n});\r\n\r\n\/* Live draw loop *\/\r\nrequestAnimationFrame(function loop(){ drawPreview(); requestAnimationFrame(loop);});\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f97a633 e-flex e-con-boxed e-con e-parent\" data-id=\"f97a633\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-5506412 e-con-full e-flex e-con e-child\" data-id=\"5506412\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9a10cce elementor-widget elementor-widget-shortcode\" data-id=\"9a10cce\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">[badge_counter]<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Cr\u00e9er ton badge officiel \u00ab J\u2019Y SERAI \u2014 SEME 2025 \u00bb Zoom Rotation Recentrer la photo T\u00e9l\u00e9charger mon badge \ud83c\udf89 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_theme","meta":{"_eb_attr":"","_templately_pack_id":"","_templately_imported_at":"","_templately_source":"","_templately_import_session_id":"","site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1857","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/eccsaintsiege.org\/en\/wp-json\/wp\/v2\/pages\/1857","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eccsaintsiege.org\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/eccsaintsiege.org\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/eccsaintsiege.org\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eccsaintsiege.org\/en\/wp-json\/wp\/v2\/comments?post=1857"}],"version-history":[{"count":25,"href":"https:\/\/eccsaintsiege.org\/en\/wp-json\/wp\/v2\/pages\/1857\/revisions"}],"predecessor-version":[{"id":1949,"href":"https:\/\/eccsaintsiege.org\/en\/wp-json\/wp\/v2\/pages\/1857\/revisions\/1949"}],"wp:attachment":[{"href":"https:\/\/eccsaintsiege.org\/en\/wp-json\/wp\/v2\/media?parent=1857"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}