{"id":1637,"date":"2024-11-28T20:12:13","date_gmt":"2024-11-28T19:12:13","guid":{"rendered":"https:\/\/lesfeesdulogis.com\/?page_id=1637"},"modified":"2025-11-12T00:48:43","modified_gmt":"2025-11-11T23:48:43","slug":"1637-2","status":"publish","type":"page","link":"https:\/\/lesfeesdulogis.com\/index.php\/1637-2\/","title":{"rendered":"Concours de N\u00f6el"},"content":{"rendered":"\n
<\/div>\n\n\n\n\n\n\n \n Jeu de dessin de No\u00ebl \ud83c\udf84<\/title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <style>\n :root {\n --noel-red: #b3001b;\n --noel-green: #0E824C;\n --noel-gold: #f6d365;\n --bg: #fdf9f4;\n --card: #ffffff;\n }\n\n * {\n box-sizing: border-box;\n }\n\n body {\n font-family: Arial, sans-serif;\n background: var(--bg);\n margin: 0;\n color: #333;\n line-height: 1.55;\n }\n\n header {\n background: linear-gradient(135deg, #b3001b 0%, #0E824C 100%);\n color: #fff;\n text-align: center;\n padding: 2.2rem 1rem 1.8rem;\n position: relative;\n }\n header::after {\n content: \"\u2744\ufe0f\";\n position: absolute;\n top: 12px;\n right: 16px;\n opacity: .25;\n font-size: 2.1rem;\n }\n header h1 {\n margin: 0;\n font-size: clamp(2rem, 3.4vw, 2.6rem);\n }\n header p {\n margin-top: .6rem;\n max-width: 620px;\n margin-left: auto;\n margin-right: auto;\n }\n\n \/* LAYOUT *\/\n main.page {\n max-width: 1140px;\n margin: 1.4rem auto 3rem;\n padding: 0 1rem;\n display: grid;\n grid-template-columns: 380px minmax(0, 1fr);\n gap: 1.4rem;\n align-items: flex-start;\n }\n\n @media (max-width: 960px) {\n main.page {\n grid-template-columns: 1fr;\n }\n }\n\n .panel {\n background: var(--card);\n border-radius: 14px;\n box-shadow: 0 4px 14px rgba(0,0,0,0.04);\n border: 1px solid rgba(179, 0, 27, .05);\n padding: 1.2rem 1rem 1.35rem;\n }\n\n h2 {\n margin-top: 0;\n color: var(--noel-red);\n font-size: 1.15rem;\n display: flex;\n gap: .4rem;\n align-items: center;\n }\n\n \/* CANVAS ZONE *\/\n .canvas-wrapper {\n width: 100%;\n border: 2px solid rgba(179,0,27,0.25);\n border-radius: 10px;\n background: #fff;\n overflow: hidden;\n margin-bottom: .85rem;\n }\n \/* on cr\u00e9e un canvas responsive : on affiche un canvas 100% et on g\u00e8re le scale en JS *\/\n #draw-area {\n display: block;\n width: 100%;\n height: auto;\n cursor: crosshair;\n }\n\n .controls {\n display: flex;\n flex-wrap: wrap;\n gap: .5rem;\n margin-bottom: .6rem;\n align-items: center;\n }\n .controls label {\n font-size: .78rem;\n color: #555;\n }\n\n .input-group {\n margin-bottom: .55rem;\n }\n .input-group label {\n display: block;\n font-size: .78rem;\n margin-bottom: .25rem;\n }\n .input-group input,\n .input-group textarea {\n width: 100%;\n padding: .45rem .55rem;\n border-radius: 7px;\n border: 1px solid #ddd;\n font-family: inherit;\n font-size: .85rem;\n background: #fffefb;\n }\n\n .btn {\n background: linear-gradient(135deg, #b3001b, #0E824C);\n border: none;\n color: #fff;\n padding: .6rem 1.2rem;\n border-radius: 999px;\n cursor: pointer;\n font-weight: 600;\n margin-right: .4rem;\n font-size: .8rem;\n }\n .btn:hover { filter: brightness(1.03); }\n\n .btn-secondary {\n background: #fff;\n border: 1px solid rgba(179,0,27,.35);\n color: #b3001b;\n }\n .btn-secondary:hover {\n background: rgba(179,0,27,.04);\n }\n\n \/* GALERIE *\/\n .gallery {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));\n gap: 1rem;\n }\n\n .drawing-card {\n background: #fff;\n border: 1px solid rgba(0,0,0,0.02);\n border-radius: 12px;\n box-shadow: 0 4px 10px rgba(0,0,0,0.02);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n min-height: 210px;\n }\n .drawing-card img {\n width: 100%;\n display: block;\n background: #fff;\n object-fit: cover;\n }\n .drawing-meta {\n padding: .6rem .7rem .65rem;\n display: flex;\n flex-direction: column;\n gap: .35rem;\n }\n .drawing-meta h3 {\n margin: 0;\n font-size: .9rem;\n color: #b3001b;\n }\n .drawing-meta p {\n margin: 0;\n font-size: .75rem;\n color: #555;\n }\n .vote-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: .4rem;\n }\n .vote-btn {\n background: #0E824C;\n color: #fff;\n border: none;\n padding: .35rem .75rem;\n border-radius: 999px;\n cursor: pointer;\n font-size: .7rem;\n display: inline-flex;\n align-items: center;\n gap: .25rem;\n }\n .vote-btn:hover {\n background: #0a5d38;\n }\n .vote-count {\n font-size: .73rem;\n color: #333;\n }\n\n .empty-msg {\n text-align: center;\n color: #777;\n font-size: .8rem;\n margin-top: .6rem;\n }\n\n @media (max-width: 520px) {\n .controls {\n flex-direction: column;\n align-items: flex-start;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n<header>\n <h1>Concours de dessin de No\u00ebl \ud83c\udf84<\/h1>\n <p>Dessine, publie ton dessin, et laisse les autres voter pour toi !<\/p>\n<\/header>\n\n<main class=\"page\">\n <!-- Colonne dessin -->\n <section class=\"panel\">\n <h2>1. Dessine ton image<\/h2>\n <div class=\"canvas-wrapper\">\n <!-- canvas de base en 4\/3 -->\n <canvas id=\"draw-area\" width=\"400\" height=\"300\"><\/canvas>\n <\/div>\n\n <div class=\"controls\">\n <label for=\"color\">Couleur :<\/label>\n <input type=\"color\" id=\"color\" value=\"#b3001b\">\n <label for=\"size\">Taille :<\/label>\n <input type=\"range\" id=\"size\" min=\"2\" max=\"20\" value=\"5\">\n <button id=\"clear\" class=\"btn-secondary\" type=\"button\">Effacer<\/button>\n <\/div>\n\n <div class=\"input-group\">\n <label for=\"username\">Votre pseudo<\/label>\n <input type=\"text\" id=\"username\" placeholder=\"ex. Lutin74\">\n <\/div>\n <div class=\"input-group\">\n <label for=\"comment\">Votre message \/ titre<\/label>\n <textarea id=\"comment\" rows=\"2\" placeholder=\"ex. Mon sapin de No\u00ebl\"><\/textarea>\n <\/div>\n\n <button id=\"publish\" class=\"btn\" type=\"button\">Publier mon dessin \ud83c\udf81<\/button>\n <p style=\"font-size:.7rem; color:#777; margin-top:.4rem;\">(Les dessins sont enregistr\u00e9s dans ce navigateur uniquement.)<\/p>\n <\/section>\n\n <!-- Colonne galerie -->\n <section class=\"panel\">\n <h2>2. Dessins publi\u00e9s & votes<\/h2>\n <div id=\"gallery\" class=\"gallery\"><\/div>\n <p id=\"empty\" class=\"empty-msg\">Aucun dessin pour l\u2019instant. Soyez le premier \u2728<\/p>\n <\/section>\n<\/main>\n\n<script>\n \/\/ ---- CANVAS ----\n const canvas = document.getElementById('draw-area');\n const ctx = canvas.getContext('2d');\n const colorPicker = document.getElementById('color');\n const sizeRange = document.getElementById('size');\n const clearBtn = document.getElementById('clear');\n\n \/\/ on garde une taille \"interne\" mais on affichera en responsive\n let drawing = false;\n let currentColor = colorPicker.value;\n let currentSize = sizeRange.value;\n\n \/\/ fond blanc\n function fillWhite() {\n ctx.fillStyle = \"#ffffff\";\n ctx.fillRect(0,0,canvas.width,canvas.height);\n }\n fillWhite();\n\n \/\/ fonction pour avoir la bonne position m\u00eame si le canvas est redimensionn\u00e9 visuellement\n function getCanvasPos(e) {\n const rect = canvas.getBoundingClientRect();\n const scaleX = canvas.width \/ rect.width;\n const scaleY = canvas.height \/ rect.height;\n return {\n x: (e.clientX - rect.left) * scaleX,\n y: (e.clientY - rect.top) * scaleY\n };\n }\n\n canvas.addEventListener('mousedown', (e) => {\n drawing = true;\n const pos = getCanvasPos(e);\n ctx.beginPath();\n ctx.moveTo(pos.x, pos.y);\n });\n\n canvas.addEventListener('mousemove', (e) => {\n if (!drawing) return;\n const pos = getCanvasPos(e);\n ctx.strokeStyle = currentColor;\n ctx.lineWidth = currentSize;\n ctx.lineCap = \"round\";\n ctx.lineTo(pos.x, pos.y);\n ctx.stroke();\n });\n\n canvas.addEventListener('mouseup', () => {\n drawing = false;\n ctx.closePath();\n });\n\n canvas.addEventListener('mouseleave', () => {\n drawing = false;\n ctx.closePath();\n });\n\n colorPicker.addEventListener('input', () => currentColor = colorPicker.value);\n sizeRange.addEventListener('input', () => currentSize = sizeRange.value);\n\n clearBtn.addEventListener('click', () => {\n fillWhite();\n });\n\n \/\/ ---- PUBLICATION ----\n const publishBtn = document.getElementById('publish');\n const gallery = document.getElementById('gallery');\n const emptyMsg = document.getElementById('empty');\n\n let drawings = [];\n\n \/\/ charger depuis localStorage\n const saved = localStorage.getItem('noel_drawings');\n if (saved) {\n drawings = JSON.parse(saved);\n renderDrawings();\n }\n\n publishBtn.addEventListener('click', () => {\n const username = document.getElementById('username').value.trim() || \"Anonyme\";\n const comment = document.getElementById('comment').value.trim() || \"Dessin de No\u00ebl\";\n const imageData = canvas.toDataURL(\"image\/png\");\n\n const newDrawing = {\n id: Date.now(),\n user: username,\n text: comment,\n image: imageData,\n votes: 0\n };\n\n drawings.unshift(newDrawing);\n localStorage.setItem('noel_drawings', JSON.stringify(drawings));\n renderDrawings();\n\n document.getElementById('comment').value = \"\";\n });\n\n function renderDrawings() {\n gallery.innerHTML = \"\";\n if (drawings.length === 0) {\n emptyMsg.style.display = \"block\";\n return;\n } else {\n emptyMsg.style.display = \"none\";\n }\n\n drawings.forEach(d => {\n const card = document.createElement('div');\n card.className = \"drawing-card\";\n\n const img = document.createElement('img');\n img.src = d.image;\n img.alt = \"Dessin de \" + d.user;\n\n const meta = document.createElement('div');\n meta.className = \"drawing-meta\";\n\n const title = document.createElement('h3');\n title.textContent = d.user;\n\n const text = document.createElement('p');\n text.textContent = d.text;\n\n const voteRow = document.createElement('div');\n voteRow.className = \"vote-row\";\n\n const voteBtn = document.createElement('button');\n voteBtn.className = \"vote-btn\";\n voteBtn.innerHTML = \"\ud83d\udc4d Voter\";\n voteBtn.addEventListener('click', () => {\n d.votes++;\n localStorage.setItem('noel_drawings', JSON.stringify(drawings));\n renderDrawings();\n });\n\n const voteCount = document.createElement('div');\n voteCount.className = \"vote-count\";\n voteCount.textContent = d.votes + \" vote\" + (d.votes > 1 ? \"s\" : \"\");\n\n voteRow.appendChild(voteBtn);\n voteRow.appendChild(voteCount);\n\n meta.appendChild(title);\n meta.appendChild(text);\n meta.appendChild(voteRow);\n\n card.appendChild(img);\n card.appendChild(meta);\n gallery.appendChild(card);\n });\n }\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Jeu de dessin de No\u00ebl \ud83c\udf84 Concours de dessin de No\u00ebl \ud83c\udf84 Dessine, publie ton dessin, et laisse les autres voter pour toi ! 1. Dessine ton image Couleur : Taille : Effacer Votre pseudo Votre message \/ titre Publier mon dessin \ud83c\udf81 (Les dessins sont enregistr\u00e9s dans ce navigateur uniquement.) 2. Dessins publi\u00e9s & […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"content-type":"","footnotes":""},"class_list":["post-1637","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lesfeesdulogis.com\/index.php\/wp-json\/wp\/v2\/pages\/1637","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lesfeesdulogis.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lesfeesdulogis.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lesfeesdulogis.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lesfeesdulogis.com\/index.php\/wp-json\/wp\/v2\/comments?post=1637"}],"version-history":[{"count":9,"href":"https:\/\/lesfeesdulogis.com\/index.php\/wp-json\/wp\/v2\/pages\/1637\/revisions"}],"predecessor-version":[{"id":2592,"href":"https:\/\/lesfeesdulogis.com\/index.php\/wp-json\/wp\/v2\/pages\/1637\/revisions\/2592"}],"wp:attachment":[{"href":"https:\/\/lesfeesdulogis.com\/index.php\/wp-json\/wp\/v2\/media?parent=1637"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}