<section id="camp-activities-inquiry">
    <h1>Camp Activities Inquiry</h1>
    <form action="/submit-form" method="POST">
        <label for="activity-select">Which camp activities are you most looking forward to?</label>
        <select id="activity-select" name="activity">
            <option value="">--Please choose an option--</option>
            <option value="hiking">Hiking</option>
            <option value="canoeing">Canoeing</option>
            <option value="fishing">Fishing</option>
            <option value="crafts">Crafts</option>
            <option value="archery">Archery</option>
        </select>

        <label for="food-allergies">Food Allergies (if any)</label>
        <textarea id="food-allergies" name="food_allergies" rows="4" cols="50"></textarea>

        <label for="additional-info">Additional things the counselor should know</label>
        <textarea id="additional-info" name="additional_info" rows="4" cols="50"></textarea>

        <button type="submit">Submit</button>
    </form>
</section>

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

:root {
    --background-color: #181923;
    --text-color: #fff;
    --box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    --border-radius: 8px;
    --border: 1px solid rgba(255, 255, 255, 0.1);
    --submit-ok: #0055d6;
    --submit-ok: #ffffff0f;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    margin-right: 1em;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

::-webkit-scrollbar-track {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

::-webkit-scrollbar-button {
    display: none;
}

::-webkit-scrollbar-corner {
    background-color: rgba(0, 0, 0, 0);
    border: none;
    outline: none;
    display: none;
    width: 0px;
    height: 0px;
    opacity: 0;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
}


* {
    box-sizing: border-box;
    font-family: 'Space Grotesk', Arial, Helvetica, sans-serif;
    transition: all 0.4s ease-out;
}

html,
body {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: sans-serif;
    color-scheme: dark;
    background: url('https://programordie.neocities.org/background.jpg') no-repeat center center fixed;
    background-size: cover;
    overflow: hidden;
}

section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: fit-content;
    height: fit-content;
    padding: 10px 2em;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    border: var(--border);
    background-color: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

section * {
    display: block;
}

select,
option {
    padding: 0.5em 1em;
    border-radius: var(--border-radius);
    background-color: #00000000;
    color: var(--text-color);
    border: var(--border);
    box-shadow: var(--box-shadow);
    backdrop-filter: blur(50px);
    outline: none;
    margin: 1em;
    cursor: pointer;
    width: 95%;
}

option {
    background-color: #413e69;
    line-height: 3em;
    font-size: 1.1em;
    font-size-adjust: 0.3;
    text-align: left;
}

option:first-child {
    text-align: center;
}

textarea {
    padding: 0.8em 0.8em;
    border-radius: var(--border-radius);
    background-color: #ffffff20;
    color: var(--text-color);
    border: var(--border);
    box-shadow: var(--box-shadow);
    backdrop-filter: blur(50px);
    outline: none;
    margin: 1em;
    resize: vertical;
    resize: none;
    max-height: 10em;
    min-height: 3em;
    width: 95%;
}

button {
    padding: 0.5em 1em;
    font-size: 1em;
    font-weight: 500;
    font-size-adjust: 0.3;
    line-height: 1.2em;
    letter-spacing: 0.06em;
    border-radius: var(--border-radius);
    background-color: #ffffff15;
    color: var(--text-color);
    border: var(--border);
    box-shadow: var(--box-shadow);
    backdrop-filter: blur(50px);
    outline: none;
    margin-top: 1.6em;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    margin-bottom: 0px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

button:hover {
    cursor: not-allowed;
}

button.isok:hover {
    background-color: var(--submit-ok) !important;
    cursor: pointer !important;
}

button.isok:active {
    background-color: rgba(255, 255, 255, 0.25);
    scale: 0.98;
}

.invisible {
    margin-top: -0.6em !important;
    opacity: 0 !important;
    transition: all 0s;
    transform: rotateY(90deg);
}

form {
    overflow: hidden;
    min-height: 26em;
}

.required {
    color: #ff0000;
    font-size: 0.8em;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    margin-top: -0.8em;
    animation: flash 4s ease-in-out;
    margin-bottom: 0.4em;
}

@keyframes flash {

    0%,
    20%,
    40%,
    60%,
    80%,
    100% {
        opacity: 0;
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        opacity: 1;
    }
}


._popup.notReady {
    opacity: 0;
}

._popup.notReady > div {
    opacity: 0;
    scale: 0.7;
}

@keyframes pulse {
    0% {
        transform: scale(0.7);
    }
    45% {
        transform: scale(1.1);
    }
    80% {
        transform: scale(0.95);
    }
    
    100% {
        transform: scale(1);
    }
}

._popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 3;
    opacity: 1;

    transition: all 0.2s ease;
}
._popup > div {
    background-color: #ffffff0f;
    backdrop-filter: blur(10px);
    border-radius: calc(var(--border-radius) * 2);
    padding: 3.8em;
    padding-top: 1px;
    margin-bottom: 0.6em;
    margin-top: 0.9em;
    padding-bottom: 1.8em;
    scale: 1;
    width: auto;
    min-height: 13em;
    height: fit-content;
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
    opacity: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    transition: all 0.4s cubic-bezier(.18,.89,.32,1.5);
    animation: pulse .3s;
    text-align: center;
}

._popup > div .closeMessage {
    background-color: #ffffff11;
    padding: 0.5em 1em;
    margin-top: 0.8em;
    border: var(--border);
    border-radius: var(--border-radius);
    backdrop-filter: blur(50px);
    color: var(--text-color);
    box-shadow: var(--box-shadow);
    transition: background-color 0.2s ease-in-out, scale 0.2s ease-in-out, padding 0.2s ease-in-out;
    display: block;
}
._popup > div .closeMessage:hover {
    background-color: #ffffff22;
    cursor: pointer;
}
._popup > div .closeMessage:active {
    scale: 0.95;
    background-color: #ffffff33;
    padding: 0.45em 0.95em;
}
._popup > div > h1 {
    margin-bottom: -0.2em;
}

.loading {
    width: 64px;
    height: 64px;
    position: relative;
    margin-top: -1em;
    margin-bottom: 0.6em;
}

.loading::before, .loading::after {
    content: "";
    display: block;
    width: 64px;
    height: 64px;
    border: 5px solid transparent;
    border-top-color: #3498db;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    animation: spin 2s linear infinite;
}

.loading::after {
    border-top-color: #3498db;
    animation-direction: reverse;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.formFadeout {
    opacity: 0;
    margin-left: -150%;
    min-height: 0px;
    transition: all 0.6s ease;
    transition-delay: 0.1s;
    position: absolute;
    pointer-events: none;
}

#chart {
    animation: fadeIn 0.9s;
    width: 100%;
    height: 100%;
    margin-bottom: 1.4em;
}

#chart > canvas {
    height: 100%;
    animation: opaFadeIn 0.6s;
}

@keyframes fadeIn {
    0%, 30% {
        opacity: 0;
        margin-left: 150%;
    }
    100% {
        transform: scaleY(1);
        opacity: 1;
        margin-left: 0px;
    }
}

@keyframes opaFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

button, a {
    position: relative;
    overflow: hidden;
}

.circle {
    content: "";
    position: absolute;
    top: var(--top);
    left: var(--left);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
    translate: -50% -50%;
    animation: scale 0.4s ease-in-out;
    opacity: 0;
}

@keyframes scale {
    0% {
        opacity: 0;
        scale: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        scale: 3;
        opacity: 0;
    }
}

.flex {
    display: flex;
    align-items: center;
    justify-content: center;
    height: fit-content;
    width: fit-content;
    overflow: hidden;
    position: relative;
}

/***************************************************/
/***************** By programORdie *****************/
/***************************************************/


/**
 * Generates a pie chart with the given data and names.
 *
 * @param {Array} data - An array of numbers representing the data to be displayed in the pie chart.
 * @param {Array} names - An array of strings representing the names of the data elements.
 * @param {Array} [colors=null] - An optional array of strings representing the colors of the data elements. If not provided, default colors will be used.
 * @return {undefined} This function does not return a value.
 */
function makeChart(data, names, element = document.body, colors = null) {
    const dataUnsorted = data;
    const namesUnsorted = names;
    let colorsUnsorted = ['#7f24c9', '#c4217d', '#2126c4', '#3cbec9', '#2180c4'];

    if (colors !== null) {
        colorsUnsorted = colors;
    }

    const combinedArray = dataUnsorted.map((value, index) => ({ index, value, name: namesUnsorted[index], color: colorsUnsorted[index] }));
    combinedArray.sort((a, b) => b.value - a.value);

    data = combinedArray.map(item => item.value);
    names = combinedArray.map(item => item.name);
    colors = combinedArray.map(item => item.color);

    const totalData = data.reduce((a, b) => a + b);

    let partEffects = [];
    for (let i = 0; i < data.length; i++) {
        partEffects.push(0);
    }

    let angles = [];

    let [mouseX, mouseY, smoothX, smoothY] = [-50, -50, -50, -50];

    const borderColor = '#b5b5b5';
    const borderHighlightColor = '#ffffff';
    const textColor = '#ffffff';

    const cornerRadius = 0.1;

    const canvas = document.createElement('canvas');
    canvas.width = 450;
    canvas.height = 460;
    const ctx = canvas.getContext('2d');

    ctx.lineCap = "round";

    const centerX = canvas.width / 2;
    const centerY = canvas.height - centerX + 48;
    const radius = Math.min(centerX, centerY) - 50;

    const dpr = window.devicePixelRatio;
    canvas.width = canvas.width * dpr;
    canvas.height = canvas.height * dpr;
    ctx.scale(dpr, dpr);
    canvas.style.width = canvas.width / dpr + 'px';
    canvas.style.height = canvas.height / dpr + 'px';

    ctx.translate(0.5, 0.5);

    let animationTimeout = 0.4 * 60;
    let currentHighlight = null;
    let startEffect = 0;

    let startAngle = -0.5 * Math.PI;
    for (let i = 0; i < data.length; i++) {
        const sliceAngle = (2 * Math.PI * (data[i] / totalData));
        if (angles.length < data.length) {
            angles.push({ start: startAngle + Math.PI / 2, end: startAngle + sliceAngle + Math.PI / 2 });
        }
        startAngle += sliceAngle;
    }

    function shadeColor(color, percent) {
        var R = parseInt(color.substring(1, 3), 16);
        var G = parseInt(color.substring(3, 5), 16);
        var B = parseInt(color.substring(5, 7), 16);

        R = parseInt(R * (100 + percent) / 100);
        G = parseInt(G * (100 + percent) / 100);
        B = parseInt(B * (100 + percent) / 100);

        R = (R < 255) ? R : 255;
        G = (G < 255) ? G : 255;
        B = (B < 255) ? B : 255;

        R = Math.round(R)
        G = Math.round(G)
        B = Math.round(B)

        var RR = ((R.toString(16).length == 1) ? "0" + R.toString(16) : R.toString(16));
        var GG = ((G.toString(16).length == 1) ? "0" + G.toString(16) : G.toString(16));
        var BB = ((B.toString(16).length == 1) ? "0" + B.toString(16) : B.toString(16));

        return "#" + RR + GG + BB;
    }

    function drawPieChart() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        let redrawPart = null;
        let startAngle = -0.5 * Math.PI;
        for (let i = 0; i < data.length; i++) {
            const sliceAngle = (2 * Math.PI * (data[i] / totalData)) * startEffect;

            if (angles.length < data.length) {
                angles.push({ start: startAngle + Math.PI / 2, end: startAngle + sliceAngle + Math.PI / 2 });
            }
            ctx.strokeStyle = shadeColor(borderColor, -9 * partEffects[i]);
            if (i === currentHighlight) {
                redrawPart = { start: startAngle, end: startAngle + sliceAngle, color: colors[i] };
            }
            ctx.lineWidth = 2;
            ctx.lineCap = "round";
            ctx.fillStyle = shadeColor(colors[i], -9 * partEffects[i]);
            ctx.beginPath();
            ctx.moveTo(centerX, centerY);

            ctx.arc(centerX, centerY, cornerRadius, startAngle - Math.PI, startAngle - Math.PI / 2);
            ctx.arc(centerX, centerY, radius * startEffect, startAngle, startAngle + sliceAngle);
            ctx.arc(centerX, centerY, cornerRadius, startAngle + sliceAngle + Math.PI / 2, startAngle + sliceAngle + Math.PI);

            ctx.closePath();
            ctx.fill();
            ctx.stroke();
            startAngle += sliceAngle;
        }
        if (redrawPart !== null) {
            const colorLight = shadeColor(redrawPart.color, -7 * partEffects[currentHighlight]);

            ctx.strokeStyle = borderHighlightColor;
            ctx.lineWidth = 2 * partEffects[currentHighlight];
            ctx.lineCap = "round";
            ctx.fillStyle = colorLight;
            ctx.beginPath();
            ctx.moveTo(centerX, centerY);
            ctx.arc(centerX, centerY, radius * startEffect, redrawPart.start, redrawPart.end);
            ctx.closePath();
            ctx.fill();
            ctx.stroke();
        }
    }

    function drawCard(mouseX, mouseY) {
        ctx.fillStyle = '#0000009f';
        let path = new Path2D();
        path.moveTo(mouseX, mouseY);
        path.lineTo(mouseX + 5, mouseY + 5);
        path.lineTo(mouseX + 5, mouseY - 5);
        ctx.fill(path);
        ctx.strokeStyle = '#00000000';
        ctx.beginPath();
        ctx.roundRect(mouseX + 5, mouseY - 20, 100, 35, 6);
        ctx.stroke();
        ctx.fill();

        ctx.fillStyle = '#ffffff';
        ctx.font = '700 12px Arial';
        ctx.fontWeight = 'bold';
        ctx.fillText(names[currentHighlight], mouseX + 10, mouseY - 5);

        const text = Math.round(data[currentHighlight] / totalData * 1000) / 10 + '% - ' + data[currentHighlight] + ' votes';
        ctx.fillStyle = '#ffffff';
        ctx.font = '400 11px Arial';
        ctx.fillText(text, mouseX + 10, mouseY + 10);
    }

    drawPieChart();

    function calculateDistance(x1, y1, x2, y2) {
        return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
    }

    function handleMouseMove(event) {
        const rect = canvas.getBoundingClientRect();
        mouseX = event.clientX - rect.left;
        mouseY = event.clientY - rect.top;
    }

    function calcMouse() {
        const dx = smoothX - centerX;
        const dy = smoothY - centerY;
        let mouseAngle = Math.atan2(dy, dx) + Math.PI / 2;
        if (mouseAngle < 0) {
            mouseAngle += 2 * Math.PI;
        }
        const distance = calculateDistance(dx, dy, 0, 0);
        currentHighlight = null;
        if (distance < radius) {
            canvas.style.cursor = 'pointer';
            angles.forEach((angle, index) => {
                if (mouseAngle > angle.start && mouseAngle < angle.end) {
                    currentHighlight = index;
                }
            })
        } else {
            canvas.style.cursor = 'default';
        }
    }

    function drawInfo() {
        ctx.fillStyle = textColor;
        ctx.font = '600 ' + 16 * startEffect + 'px Arial';
        ctx.fillText('Total votes: ' + totalData, canvas.width / dpr / 2 - 60, 20);

        let datas = [data];
        if (data.length > 3) {
            datas = [data.slice(0, 3), data.slice(3, data.length)];
        }
        for (let z = 0; z < datas.length; z++) {
            const offsetTop = z * 25 - 12;
            let data = datas[z];
            ctx.font = '500 ' + 12 * startEffect + 'px Arial';
            const start = (canvas.width / dpr / 2 - (data.length * 108) / 2 + 10) * startEffect;
            for (let i = 0; i < data.length; i++) {
                ctx.fillStyle = colors[z * 3 + i];
                ctx.strokeStyle = textColor;
                ctx.lineWidth = 1;
                ctx.fillRect(start + i * 108 * startEffect + 3, (offsetTop + 50) * startEffect, 10 * startEffect, 10 * startEffect);
                ctx.strokeRect(start + i * 108 * startEffect + 3, (offsetTop + 50) * startEffect, 10 * startEffect, 10 * startEffect);
                ctx.fillStyle = textColor;
                ctx.fillText(names[z * 3 + i] + ': ' + Math.round(data[i] / totalData * 1000) / 10 + '%', start + 16 + i * 108 * startEffect, (offsetTop + 60) * startEffect);
            }
        }
    }

    function tick() {
        smoothX += (mouseX - smoothX) * 0.1;
        smoothY += (mouseY - smoothY) * 0.1;

        if (animationTimeout > 0) {
            animationTimeout -= 1;
        }

        if (animationTimeout === 0) {
            if (startEffect < 1) {
                if (startEffect > 0.7) {
                    startEffect += (1 - startEffect) * 0.12;
                } else {
                    startEffect += (1 - startEffect) * 0.08;
                }
            }
        }

        for (let i = 0; i < partEffects.length; i++) {
            if (i === currentHighlight) {
                if (partEffects[i] < 1) {
                    partEffects[i] += 0.06;
                }
            } else {
                if (partEffects[i] > 0) {
                    partEffects[i] -= 0.06;
                }
            }
        }

        calcMouse();
        drawPieChart();
        if (currentHighlight !== null) {
            drawCard(smoothX, smoothY);
        }
        drawInfo();
        requestAnimationFrame(tick);
    }

    tick();
    canvas.addEventListener('mousemove', handleMouseMove);
    element.appendChild(canvas);
}


/**
 * Creates a confetti effect on the screen.
 *
 * @param {number} amount - The number of confetti pieces to create (default: 500)
 * @return {undefined} This function does not return a value
 */
function Confetti(amount = 500) {
    const canvas = document.createElement('canvas');
    canvas.style.position = 'fixed';
    canvas.style.top = 0;
    canvas.style.left = 0;
    // canvas.style.zIndex = 9999;
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    const mutiplyerX = canvas.width / 700;
    const mutiplyerY = canvas.height / 60;
    const colors = ['#f00', '#0f0', '#00f', '#ff0', '#0ff'];
    let confetti = [];
    function randomRange(min, max) {return Math.random() * (max - min) + min;}
    function createConfetti() {
        const x = Math.round(Math.random()) * canvas.width;
        const y = canvas.height;
        const speedX = randomRange(-6, 6) * mutiplyerX;
        const speedY = randomRange(-2, 1) * mutiplyerY;
        const rotationSpeed = randomRange(0.02, 0.05);

        return { x, y, radius: randomRange(5, 10), color: colors[Math.floor(Math.random() * colors.length)], speedX, speedY, rotation: randomRange(0, 2 * Math.PI), rotationSpeed };
    }
    function drawConfetti() {
        confetti.forEach(piece => {
            ctx.save();
            ctx.translate(piece.x + piece.radius / 2, piece.y + piece.radius / 2);
            ctx.rotate(piece.rotation);
            ctx.fillStyle = piece.color;
            ctx.fillRect(-piece.radius / 2, -piece.radius / 2, piece.radius, piece.radius);
            ctx.restore();
        });
    }
    function updateConfetti() {
        confetti.forEach(piece => {
            piece.x += piece.speedX;
            piece.y += piece.speedY;
            piece.rotation += piece.rotationSpeed;
            piece.speedY += 0.5;
            if (piece.y > canvas.height + 5) { confetti.splice(confetti.indexOf(piece), 1); }
        });
    }
    function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawConfetti();
        updateConfetti();
        requestAnimationFrame(animate);
    }
    for (let i = 0; i < amount; i++) { confetti.push(createConfetti()); }
    document.body.appendChild(canvas);
    animate();

    setTimeout(() => {
        canvas.remove();
    }, 5000);
}


const url = 'https://programordie-1-b6431438.deta.app/devto/';

async function _vote(vote) {
    let db = await fetch(url + '?vote=' + vote, { method: 'POST' });
    db = await db.json();
    return db
}

async function vote(vote) {
    try {
        db = await _vote(vote);
    } catch (error) {
        console.log(error);
        db = await _vote(vote);
    }
    console.log(db);
    return db;
}

document.addEventListener("DOMContentLoaded", () => {
    // Get DOM elements
    const section = document.getElementById('camp-activities-inquiry');
    const form = section.querySelector('form');
    const submit = form.querySelector('button');
    const allergy = form.querySelector('#food-allergies');
    const additional = form.querySelector('#additional-info');
    const activity = form.querySelector('#activity-select');
    const sectionChilds = form.childNodes;

    // Set form attributes
    form.action = '/';
    form.method = 'GET';
  
  
    allergy.placeholder = 'Do you have any food allergies?';
    additional.placeholder = 'Anything else we should know?';


    // Function to handle form changes
    function formChanged(event) {
        event.preventDefault();
        if (activity.value !== '') {
            submit.classList.add('isok');
        } else {
            submit.classList.remove('isok');
        }
    }

    // Function to show activity required message
    function showActivityRequired() {
        const required = document.createElement('p');
        required.classList.add('required');
        required.innerText = 'This field is required!';
        activity.parentElement.insertBefore(required, activity.nextSibling);

        setTimeout(() => {
            required.remove();
            submit.disabled = false;
        }, 4000);
    }

    // Function to finish voting process
    async function finishVote(activity) {
        vote(activity).then((data) => {
            closePopup(document.querySelector('._popup'));
            showMessage('Success!', 'Your choice has been saved and our team will review your notes.<br> If you would like too see what activities other people like to do, you can click on the button below.', '<br>', 'View statistics', viewStats, data);
        });
    }

    // Function to create a message popup
    function makeMessage(html, showClose, callback = false, callbackData = null) {
        const message = document.createElement("div");
        message.className = "_popup notReady";
        message.innerHTML = '<div>' + html + '</div>';
        if (showClose) {
            message.addEventListener('click', (e) => {
                if (e.target === message) {
                    closePopup(message);
                    if (callback !== false) {
                        callback(callbackData);
                    }
                }
            });
        }
        document.body.appendChild(message);
        setTimeout(() => {
            message.classList.remove("notReady");
        }, 0)
    }

    // Function to close a popup
    function closePopup(popup) {
        popup.classList.add('notReady');
        setTimeout(() => {
            popup.remove();
        }, 200);
    }

    // Function to show a message
    function showMessage(title, text, html, showClose = false, callback = false, callbackData = null) {
        let extraButton = '';
        if (showClose !== false) {
            extraButton = '<a title="' + showClose + '" class="closeMessage">' + showClose + '</a>';
        }
        let htmlData = '<h1>' + title + '</h1><p>' + text + '</p>' + html + '<div class="flex">' + extraButton + '</div>';
        makeMessage(htmlData, showClose, callback, callbackData);
        if (showClose) {
            const closes = document.querySelectorAll('.closeMessage');
            const close = closes[closes.length - 1];
            close.style.overflow = 'hidden';
            close.style.position = 'relative';
            close.addEventListener('click', (e) => {
                setTimeout(() => {
                    closePopup(close.parentElement.parentElement.parentElement);
                    if (callback !== false) {
                        callback(callbackData);
                    }
                }, 350);
                const rect = close.getBoundingClientRect();
                const mouseX = e.clientX - rect.left;
                const mouseY = e.clientY - rect.top;

                const circle = document.createElement('span');
                circle.classList.add('circle');
                circle.style.setProperty('--top', mouseY + 'px');
                circle.style.setProperty('--left', mouseX + 'px');

                close.appendChild(circle);
                setTimeout(() => {
                    circle.remove();
                }, 500);
            });
        }
    }

    // Function to view statistics
    function viewStats(rawData) {
        console.log(rawData);
        const names = Object.keys(rawData);
        const values = Object.values(rawData);

        form.classList.add('formFadeout');
        section.querySelector('h1').innerText = section.querySelector('h1').innerText + ' Results';
        const chartElement = document.createElement('div');
        chartElement.id = 'chart';
        makeChart(values, names, element = chartElement);
        section.appendChild(chartElement);
    }

    // Event listener for submit button click
    submit.addEventListener('click', (e) => {
        if (!submit.classList.contains('isok')) {
            return;
        }
        const rect = submit.getBoundingClientRect();
        const mouseX = e.clientX - rect.left;
        const mouseY = e.clientY - rect.top;

        const circle = document.createElement('span');
        circle.classList.add('circle');
        circle.style.setProperty('--top', mouseY + 'px');
        circle.style.setProperty('--left', mouseX + 'px');

        submit.appendChild(circle);
        setTimeout(() => {
            circle.remove();
        }, 500);
    });

    // Event listener for form submission
    form.addEventListener('submit', (event) => {
        event.preventDefault();
        if (!submit.classList.contains('isok')) {
            submit.disabled = true;
            showActivityRequired();
            return false;
        }

        setTimeout(() => {
            Confetti(400);
            showMessage('Loading ...', '', '<span class="loading"></span>');

            finishVote(activity.value);
        }, 350);
    });

    // Event listeners for form changes
    form.addEventListener('change', formChanged);
    form.addEventListener('keyup', formChanged);

    // Hide form children initially
    sectionChilds.forEach((child) => {
        try {
            child.classList.add('invisible');
        } catch (error) { }
    });

    // Show form children gradually
    setTimeout(() => {
        let wait = 0;
        sectionChilds.forEach((child) => {
            setTimeout(() => {
                try {
                    child.classList.remove('invisible');
                } catch (error) { }
            }, wait);
            wait += 50;
        });
    }, 0);
});