(function () { var open = false; var movingIds = [ "about", "tiktok", "instagram", "youtube" ]; var optionIds = [ "tip-option-1", "tip-option-2" ]; var baseTransforms = {}; var optionBaseTransforms = {}; function get(id) { return document.getElementById(id); } function isInside(element, target) { return element === target || element.contains(target); } function getCssVar(name, fallback) { var value = getComputedStyle(document.documentElement).getPropertyValue(name); return value.trim() || fallback; } function isMobile() { return window.matchMedia("(max-width: 600px)").matches; } function getShiftAmount() { return isMobile() ? getCssVar("--tip-shift-mobile", "55px") : getCssVar("--tip-shift-desktop", "55px"); } function getDropdownGap() { return isMobile() ? getCssVar("--tip-dropdown-mobile-gap", "30px") : getCssVar("--tip-dropdown-desktop-gap", "35px"); } function saveBaseTransforms() { movingIds.forEach(function (id) { var el = get(id); if (!el) return; if (!(id in baseTransforms)) { var current = getComputedStyle(el).transform; baseTransforms[id] = current && current !== "none" ? current : ""; } }); optionIds.forEach(function (id) { var el = get(id); if (!el) return; if (!(id in optionBaseTransforms)) { var current = getComputedStyle(el).transform; optionBaseTransforms[id] = current && current !== "none" ? current : ""; } }); } function moveLowerButtonsDown() { var shift = getShiftAmount(); movingIds.forEach(function (id) { var el = get(id); if (!el) return; var base = baseTransforms[id] || ""; el.style.transform = base + " translateY(" + shift + ")"; }); } function moveLowerButtonsBack() { movingIds.forEach(function (id) { var el = get(id); if (!el) return; el.style.transform = baseTransforms[id] || ""; }); } function moveDropdownOptionsToOpenPosition() { var gap = getDropdownGap(); optionIds.forEach(function (id) { var el = get(id); if (!el) return; var base = optionBaseTransforms[id] || ""; el.style.transform = base + " translateY(" + gap + ")"; el.style.opacity = "1"; }); } function moveDropdownOptionsToClosedPosition() { var gap = getDropdownGap(); optionIds.forEach(function (id) { var el = get(id); if (!el) return; var base = optionBaseTransforms[id] || ""; el.style.transform = base + " translateY(calc(" + gap + " - 10px))"; el.style.opacity = "0"; }); } function openTips() { var option1 = get("tip-option-1"); var option2 = get("tip-option-2"); if (!option1 || !option2) return; saveBaseTransforms(); option1.classList.add("tip-open"); option2.classList.add("tip-open"); moveDropdownOptionsToClosedPosition(); setTimeout(function () { moveDropdownOptionsToOpenPosition(); moveLowerButtonsDown(); }, 20); open = true; } function closeTips() { var option1 = get("tip-option-1"); var option2 = get("tip-option-2"); if (!option1 || !option2) return; moveDropdownOptionsToClosedPosition(); moveLowerButtonsBack(); setTimeout(function () { option1.classList.remove("tip-open"); option2.classList.remove("tip-open"); option1.style.transform = optionBaseTransforms["tip-option-1"] || ""; option2.style.transform = optionBaseTransforms["tip-option-2"] || ""; }, 180); open = false; } document.addEventListener("click", function (event) { var toggle = get("tip-toggle"); var option1 = get("tip-option-1"); var option2 = get("tip-option-2"); if (!toggle) return; if (isInside(toggle, event.target)) { event.preventDefault(); event.stopPropagation(); if (open) { closeTips(); } else { openTips(); } return; } if ( (option1 && isInside(option1, event.target)) || (option2 && isInside(option2, event.target)) ) { return; } if (open) { closeTips(); } }, true); window.addEventListener("resize", function () { if (open) { moveDropdownOptionsToOpenPosition(); moveLowerButtonsDown(); } }); })();

Attach images

Submit

(function () { var submitting = false; var answers = { who: [], what: "", when: "", where: "", notes: "", email: "", name: "", files: [] }; window.malusCommissionAnswers = answers; var screens = ["screen-who", "screen-what", "screen-when", "screen-where", "screen-q5"]; var groups = { what: ["btn-what-static", "btn-what-animated", "btn-what-full", "btn-what-idk"], when: ["btn-when-days", "btn-when-weeks", "btn-when-months", "btn-when-none", "btn-when-idk"], where: ["btn-where-personal", "btn-where-commercial", "btn-where-social", "btn-where-idk"] }; function get(id) { return document.getElementById(id); } function showScreen(nextId) { for (var i = 0; i < screens.length; i++) { var id = screens[i]; var screen = get(id); if (!screen) continue; if (id === nextId) { screen.style.display = "block"; screen.style.transform = "translateY(10px)"; screen.style.opacity = "0"; setTimeout(function (s) { s.style.opacity = "1"; s.style.transform = "translateY(0)"; }, 20, screen); } else { screen.style.opacity = "0"; screen.style.transform = "translateY(10px)"; setTimeout(function (s) { s.style.display = "none"; }, 220, screen); } } } function toggleMulti(button, field, value) { var list = answers[field]; var index = list.indexOf(value); if (index === -1) { list.push(value); button.classList.add("malus-selected"); } else { list.splice(index, 1); button.classList.remove("malus-selected"); } console.log("answers:", answers); } function chooseSingle(button, field, value) { var group = groups[field]; for (var i = 0; i < group.length; i++) { var other = get(group[i]); if (other) other.classList.remove("malus-selected"); } answers[field] = value; button.classList.add("malus-selected"); console.log("answers:", answers); } function refreshFileList() { var list = get("q5-file-list"); if (!list) return; list.innerHTML = ""; for (var i = 0; i < answers.files.length; i++) { var file = answers.files[i]; var row = document.createElement("div"); row.className = "q5-file"; var name = document.createElement("span"); name.textContent = file.name; var remove = document.createElement("button"); remove.type = "button"; remove.className = "q5-remove"; remove.textContent = "Remove"; remove.setAttribute("data-file-index", i); row.appendChild(name); row.appendChild(remove); list.appendChild(row); } } function addFiles(fileList) { for (var i = 0; i < fileList.length; i++) { var file = fileList[i]; var allowed = file.type === "image/png" || file.type === "image/jpeg" || file.type === "image/webp"; if (!allowed) { alert("Only PNG, JPG, and WEBP images are allowed."); continue; } var maxSize = 16 * 1024 * 1024; if (file.size > maxSize) { alert(file.name + " is over 16MB."); continue; } if (answers.files.length >= 5) { alert("Please attach no more than 5 images."); break; } answers.files.push(file); } refreshFileList(); } function captureQ5() { var notes = get("q5-notes"); var email = get("q5-email"); var name = get("q5-name"); answers.notes = notes ? notes.value : ""; answers.email = email ? email.value : ""; answers.name = name ? name.value : ""; } function setBackendField(id, value) { var field = document.querySelector('#backend-form [name="' + id + '"]') || document.querySelector('#backend-form #' + id); if (!field) { console.log("Missing backend field:", id); return false; } field.value = value; field.dispatchEvent(new Event("input", { bubbles: true })); field.dispatchEvent(new Event("change", { bubbles: true })); return true; } function setBackendFile(inputId, file) { var input = document.querySelector('#backend-form [name="' + inputId + '"]') || document.querySelector('#backend-form #' + inputId); if (!input || !file) { return; } var dataTransfer = new DataTransfer(); dataTransfer.items.add(file); input.files = dataTransfer.files; input.dispatchEvent(new Event("input", { bubbles: true })); input.dispatchEvent(new Event("change", { bubbles: true })); } function submitToCarrd() { if (submitting) return; submitting = true; var form = get("backend-form"); if (!form) { submitting = false; alert("Backend form is missing."); return; } if (!answers.email) { submitting = false; alert("Please enter your email address."); return; } setBackendField("who", answers.who.join(", ")); setBackendField("what", answers.what); setBackendField("when", answers.when); setBackendField("where", answers.where); setBackendField("notes", answers.notes); setBackendField("name", answers.name); setBackendField("email", answers.email); for (var i = 0; i < answers.files.length; i++) { setBackendFile("reference_" + (i + 1), answers.files[i]); } var submit = form.querySelector('button[type="submit"]') || form.querySelector('input[type="submit"]') || form.querySelector("button"); if (!submit) { submitting = false; alert("Backend submit button is missing."); return; } submit.click(); setTimeout(function () { submitting = false; }, 8000); } function handleButton(id, button) { switch (id) { case "btn-who-oc": toggleMulti(button, "who", "Original Character"); break; case "btn-who-fanart": toggleMulti(button, "who", "Fan Art"); break; case "btn-who-creature": toggleMulti(button, "who", "Creature / Nightmare Fuel"); break; case "btn-who-environment": toggleMulti(button, "who", "Environment Art"); break; case "btn-who-idk": toggleMulti(button, "who", "I don't know yet"); break; case "btn-who-forward": showScreen("screen-what"); break; case "btn-what-static": chooseSingle(button, "what", "Static Artwork"); break; case "btn-what-animated": chooseSingle(button, "what", "Animated Artwork"); break; case "btn-what-full": chooseSingle(button, "what", "Fully Animated Scene"); break; case "btn-what-idk": chooseSingle(button, "what", "I don't know yet"); break; case "btn-what-back": showScreen("screen-who"); break; case "btn-what-forward": showScreen("screen-when"); break; case "btn-when-days": chooseSingle(button, "when", "Days"); break; case "btn-when-weeks": chooseSingle(button, "when", "Weeks"); break; case "btn-when-months": chooseSingle(button, "when", "Months"); break; case "btn-when-none": chooseSingle(button, "when", "No Deadline"); break; case "btn-when-idk": chooseSingle(button, "when", "I don't know yet"); break; case "btn-when-back": showScreen("screen-what"); break; case "btn-when-forward": showScreen("screen-where"); break; case "btn-where-personal": chooseSingle(button, "where", "Personal / Private Use"); break; case "btn-where-commercial": chooseSingle(button, "where", "Commercial Use"); break; case "btn-where-social": chooseSingle(button, "where", "Posted on Social Media"); break; case "btn-where-idk": chooseSingle(button, "where", "I don't know yet"); break; case "btn-where-back": showScreen("screen-when"); break; case "btn-where-forward": showScreen("screen-q5"); break; case "btn-q5-send": captureQ5(); submitToCarrd(); break; } } document.addEventListener("click", function (event) { var clicked = event.target; var button = null; while (clicked && clicked !== document) { if (clicked.id && clicked.id.indexOf("btn-") === 0) { button = clicked; break; } clicked = clicked.parentNode; } if (!button) return; event.preventDefault(); event.stopPropagation(); handleButton(button.id, button); }, true); document.addEventListener("click", function (event) { if (event.target && event.target.id === "q5-attach") { var input = get("q5-file-input"); if (input) input.click(); } if (event.target && event.target.className === "q5-remove") { var index = parseInt(event.target.getAttribute("data-file-index"), 10); answers.files.splice(index, 1); refreshFileList(); } }); document.addEventListener("change", function (event) { if (event.target && event.target.id === "q5-file-input") { addFiles(event.target.files); event.target.value = ""; } }); setTimeout(function () { showScreen("screen-who"); console.log("MALUS form script active"); }, 100); })();