{"id":8,"date":"2026-03-05T04:39:36","date_gmt":"2026-03-05T04:39:36","guid":{"rendered":"https:\/\/djaink.com\/public_html\/Portfolio\/?page_id=8"},"modified":"2026-03-19T21:14:27","modified_gmt":"2026-03-19T21:14:27","slug":"home","status":"publish","type":"page","link":"https:\/\/djaink.com\/public_html\/Portfolio\/","title":{"rendered":"Home"},"content":{"rendered":"\n
<\/span>
\n
\"\"<\/figure>\n<\/div><\/div>\n\n\n\n\n\n\n\n\n\n\n\nRoyal Voting<\/title>\n\n\n\n<style>\n :root{\n \/* \ud83d\udd27 Update these to match your color scheme *\/\n --brand:#6b2d91; \/* primary *\/\n --brand2:#d4af37; \/* accent (gold) *\/\n --bg:#f7f6fb;\n --card:#ffffff;\n --text:#1f2430;\n --muted:#5b6472;\n --danger:#b00020;\n --ok:#0b7a3e;\n --border:#e6e3ef;\n --shadow: 0 10px 25px rgba(14, 12, 25, 0.08);\n --radius:16px;\n }\n\n body{\n margin:0;\n font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\n background: radial-gradient(1200px 700px at 20% 0%, rgba(107,45,145,.10), transparent 60%),\n radial-gradient(900px 600px at 90% 10%, rgba(212,175,55,.12), transparent 55%),\n var(--bg);\n color:var(--text);\n }\n\n .wrap{\n max-width: 980px;\n margin: 0 auto;\n padding: 28px 16px 48px;\n }\n\n header{\n display:flex;\n gap:16px;\n align-items:center;\n padding: 14px 16px;\n border:1px solid var(--border);\n background: rgba(255,255,255,0.75);\n backdrop-filter: blur(10px);\n border-radius: var(--radius);\n box-shadow: var(--shadow);\n }\n\n .logo{\n width:62px;\n height:62px;\n border-radius: 14px;\n display:grid;\n place-items:center;\n overflow:hidden;\n border:1px solid var(--border);\n background: linear-gradient(135deg, rgba(107,45,145,.12), rgba(212,175,55,.10));\n }\n .logo img{ width:100%; height:100%; object-fit:cover; }\n\n h1{\n margin:0;\n font-size: 1.15rem;\n line-height:1.2;\n }\n .sub{\n margin: 6px 0 0;\n color:var(--muted);\n font-size: 0.95rem;\n }\n\n .grid{\n margin-top: 18px;\n display:grid;\n grid-template-columns: 1fr;\n gap: 16px;\n }\n\n @media (min-width: 820px){\n .grid{ grid-template-columns: 1fr 1fr; }\n }\n\n .card{\n background: var(--card);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n box-shadow: var(--shadow);\n padding: 16px;\n }\n\n .card h2{\n margin:0 0 6px 0;\n font-size: 1.05rem;\n display:flex;\n align-items:center;\n justify-content:space-between;\n gap:10px;\n }\n\n .badge{\n font-size: 0.85rem;\n padding: 4px 10px;\n border-radius: 999px;\n border:1px solid var(--border);\n background: rgba(107,45,145,.07);\n color: var(--brand);\n white-space:nowrap;\n }\n\n .help{\n margin:0 0 10px 0;\n color: var(--muted);\n font-size: 0.92rem;\n }\n\n .list{\n display:grid;\n gap:10px;\n margin-top: 10px;\n }\n\n label.option{\n display:flex;\n align-items:center;\n gap: 10px;\n padding: 10px 12px;\n border-radius: 12px;\n border:1px solid var(--border);\n cursor:pointer;\n transition: transform .04s ease, border-color .12s ease, background .12s ease;\n background: #fff;\n }\n\n label.option:hover{\n border-color: rgba(107,45,145,.35);\n background: rgba(107,45,145,.03);\n }\n\n input[type=\"checkbox\"]{\n width: 18px;\n height: 18px;\n accent-color: var(--brand);\n }\n\n .count{\n margin-top: 10px;\n display:flex;\n gap:10px;\n align-items:center;\n justify-content:space-between;\n padding-top: 10px;\n border-top: 1px dashed var(--border);\n color: var(--muted);\n font-size: 0.92rem;\n }\n\n .count strong{\n color: var(--text);\n }\n\n .msg{\n margin-top: 12px;\n padding: 10px 12px;\n border-radius: 12px;\n border:1px solid var(--border);\n background: rgba(11,122,62,.07);\n color: var(--ok);\n display:none;\n }\n\n .msg.error{\n background: rgba(176,0,32,.06);\n color: var(--danger);\n }\n\n .actions{\n margin-top: 16px;\n display:flex;\n flex-wrap:wrap;\n gap: 10px;\n align-items:center;\n justify-content:flex-end;\n }\n\n button{\n appearance:none;\n border:0;\n border-radius: 14px;\n padding: 12px 16px;\n font-weight: 650;\n cursor:pointer;\n background: var(--brand);\n color:white;\n box-shadow: 0 10px 18px rgba(107,45,145,.22);\n transition: transform .05s ease, opacity .15s ease;\n }\n button:hover{ transform: translateY(-1px); }\n button:disabled{\n opacity:.6;\n cursor:not-allowed;\n transform:none;\n }\n\n .secondary{\n background: transparent;\n color: var(--brand);\n border: 1px solid rgba(107,45,145,.35);\n box-shadow:none;\n }\n\n footer{\n margin-top: 16px;\n color: var(--muted);\n font-size: 0.9rem;\n text-align:center;\n }\n\n .fine{\n font-size: 0.85rem;\n color: var(--muted);\n margin-top: 10px;\n line-height: 1.4;\n }\n .fine b{ color: var(--text); }\n <\/style>\n\n\n\n<div class=\"wrap\">\n <header>\n <!--<figure><img decoding=\"async\" src=\"\" alt=\"\" onerror=\"this.style.display='none'; this.parentElement.textContent='NCNW'; this.parentElement.style.color='var(--brand)'; this.parentElement.style.fontWeight='800';\"><\/figure><div class=\"logo\"> -->\n <!-- Optional: replace with your logo file. Example: <img decoding=\"async\" src=\"ncnw-logo.png\" alt=\"NCNW Logo\"> -->\n \n <\/div>\n <div>\n <h1>2026 Mardi Gras Royalty Voting Poll<\/h1>\n <p class=\"sub\">Select <b>exactly 3<\/b> Kings and <b>exactly 3<\/b> Queens, then submit your ballot.<\/p>\n <\/div>\n <\/header>\n\n <div class=\"grid\">\n <!-- KINGS -->\n <section class=\"card\" aria-labelledby=\"kingsTitle\">\n <h2 id=\"kingsTitle\">\n Kings\n <span class=\"badge\">Pick 3 of 6<\/span>\n <\/h2>\n <p class=\"help\">Choose your top three Kings.<\/p>\n\n <div class=\"list\" id=\"kingsList\">\n <!-- \ud83d\udd27 Replace names as needed -->\n <label class=\"option\"><input type=\"checkbox\" name=\"king\" value=\"King 1\"> King 1<\/label>\n <label class=\"option\"><input type=\"checkbox\" name=\"king\" value=\"King 2\"> King 2<\/label>\n <label class=\"option\"><input type=\"checkbox\" name=\"king\" value=\"King 3\"> King 3<\/label>\n <label class=\"option\"><input type=\"checkbox\" name=\"king\" value=\"King 4\"> King 4<\/label>\n <label class=\"option\"><input type=\"checkbox\" name=\"king\" value=\"King 5\"> King 5<\/label>\n <label class=\"option\"><input type=\"checkbox\" name=\"king\" value=\"King 6\"> King 6<\/label>\n <\/div>\n\n <div class=\"count\">\n <div>Selected: <strong id=\"kingsCount\">0<\/strong>\/3<\/div>\n <div id=\"kingsLock\" class=\"badge\" style=\"display:none; background: rgba(212,175,55,.12); color: #7a5a00;\">Limit reached<\/div>\n <\/div>\n\n <div id=\"kingsMsg\" class=\"msg error\"><\/div>\n <\/section>\n\n <!-- QUEENS -->\n <section class=\"card\" aria-labelledby=\"queensTitle\">\n <h2 id=\"queensTitle\">\n Queens\n <span class=\"badge\">Pick 3 of 6<\/span>\n <\/h2>\n <p class=\"help\">Choose your top three Queens.<\/p>\n\n <div class=\"list\" id=\"queensList\">\n <!-- \ud83d\udd27 Replace names as needed -->\n <label class=\"option\"><input type=\"checkbox\" name=\"queen\" value=\"Queen 1\"> Queen 1<\/label>\n <label class=\"option\"><input type=\"checkbox\" name=\"queen\" value=\"Queen 2\"> Queen 2<\/label>\n <label class=\"option\"><input type=\"checkbox\" name=\"queen\" value=\"Queen 3\"> Queen 3<\/label>\n <label class=\"option\"><input type=\"checkbox\" name=\"queen\" value=\"Queen 4\"> Queen 4<\/label>\n <label class=\"option\"><input type=\"checkbox\" name=\"queen\" value=\"Queen 5\"> Queen 5<\/label>\n <label class=\"option\"><input type=\"checkbox\" name=\"queen\" value=\"Queen 6\"> Queen 6<\/label>\n <\/div>\n\n <div class=\"count\">\n <div>Selected: <strong id=\"queensCount\">0<\/strong>\/3<\/div>\n <div id=\"queensLock\" class=\"badge\" style=\"display:none; background: rgba(212,175,55,.12); color: #7a5a00;\">Limit reached<\/div>\n <\/div>\n\n <div id=\"queensMsg\" class=\"msg error\"><\/div>\n <\/section>\n <\/div>\n\n <div class=\"card\" style=\"margin-top:16px;\">\n <h2 style=\"margin:0 0 8px 0;\">Submit Ballot<\/h2>\n <p class=\"help\" style=\"margin:0;\">Your ballot must include <b>3 Kings<\/b> and <b>3 Queens<\/b>.<\/p>\n\n <div class=\"actions\">\n <button class=\"secondary\" id=\"resetBtn\" type=\"button\">Reset<\/button>\n <button id=\"submitBtn\" type=\"button\">Submit Vote<\/button>\n <\/div>\n\n <div id=\"globalMsg\" class=\"msg\"><\/div>\n <\/div>\n\n <footer>\n \u00a9 NCNW Champaign County Section\n <\/footer>\n <\/div>\n\n\n\n<script>\n \/\/ \u2705 YOUR DEPLOYED GOOGLE APPS SCRIPT WEB APP URL IS HERE:\n const GOOGLE_SCRIPT_URL = \"https:\/\/script.google.com\/macros\/s\/AKfycbx81YSl7SCEnnLqlU0HOiWfVUgjBddUnQwJZP_0Sh28e0I5TLOcHmomDk7Co96cSTDV\/exec\";\n\n const PICK_LIMIT = 3;\n\n const kingsInputs = Array.from(document.querySelectorAll('input[name=\"king\"]'));\n const queensInputs = Array.from(document.querySelectorAll('input[name=\"queen\"]'));\n\n const kingsCountEl = document.getElementById('kingsCount');\n const queensCountEl = document.getElementById('queensCount');\n const kingsLock = document.getElementById('kingsLock');\n const queensLock = document.getElementById('queensLock');\n\n const kingsMsg = document.getElementById('kingsMsg');\n const queensMsg = document.getElementById('queensMsg');\n const globalMsg = document.getElementById('globalMsg');\n\n const submitBtn = document.getElementById('submitBtn');\n const resetBtn = document.getElementById('resetBtn');\n\n function selectedValues(inputs){\n return inputs.filter(i => i.checked).map(i => i.value);\n }\n\n function setMsg(el, text, isError=true){\n if(!text){\n el.style.display = \"none\";\n el.textContent = \"\";\n el.classList.toggle(\"error\", false);\n return;\n }\n el.textContent = text;\n el.style.display = \"block\";\n el.classList.toggle(\"error\", !!isError);\n }\n\n function updateGroup(inputs, countEl, lockEl, msgEl){\n const chosen = inputs.filter(i => i.checked).length;\n countEl.textContent = String(chosen);\n\n const atLimit = chosen >= PICK_LIMIT;\n lockEl.style.display = atLimit ? \"inline-block\" : \"none\";\n\n inputs.forEach(i => {\n if(!i.checked){\n i.disabled = atLimit;\n }else{\n i.disabled = false;\n }\n });\n\n setMsg(msgEl, \"\");\n }\n\n function updateAll(){\n updateGroup(kingsInputs, kingsCountEl, kingsLock, kingsMsg);\n updateGroup(queensInputs, queensCountEl, queensLock, queensMsg);\n setMsg(globalMsg, \"\");\n }\n\n kingsInputs.forEach(i => i.addEventListener('change', updateAll));\n queensInputs.forEach(i => i.addEventListener('change', updateAll));\n\n resetBtn.addEventListener('click', () => {\n [...kingsInputs, ...queensInputs].forEach(i => { i.checked = false; i.disabled = false; });\n resetBtn.disabled = false;\n submitBtn.disabled = false;\n updateAll();\n });\n\n function validate(){\n const kings = selectedValues(kingsInputs);\n const queens = selectedValues(queensInputs);\n\n let ok = true;\n\n if(kings.length !== PICK_LIMIT){\n setMsg(kingsMsg, `Please select exactly ${PICK_LIMIT} Kings.`);\n ok = false;\n } else {\n setMsg(kingsMsg, \"\");\n }\n\n if(queens.length !== PICK_LIMIT){\n setMsg(queensMsg, `Please select exactly ${PICK_LIMIT} Queens.`);\n ok = false;\n } else {\n setMsg(queensMsg, \"\");\n }\n\n return { ok, kings, queens };\n }\n\n async function submitVote(){\n const { ok, kings, queens } = validate();\n if(!ok){\n setMsg(globalMsg, \"Fix the selections above, then submit again.\", true);\n return;\n }\n\n submitBtn.disabled = true;\n\n const payload = {\n timestamp: new Date().toISOString(),\n kings,\n queens\n };\n\n try{\n await fetch(GOOGLE_SCRIPT_URL, {\n method: \"POST\",\n mode: \"no-cors\",\n headers: { \"Content-Type\": \"text\/plain;charset=utf-8\" },\n body: JSON.stringify(payload)\n });\n\n setMsg(globalMsg, \"\u2705 Ballot submitted! Thank you for voting.\", false);\n\n setTimeout(() => {\n window.location.href = \"https:\/\/djaink.com\/public_html\/Portfolio\/index.php\/33-2\/\";\n }, 1000);\n\n [...kingsInputs, ...queensInputs].forEach(i => i.disabled = true);\n resetBtn.disabled = true;\n\n}catch(err){\n console.error(err);\n setMsg(globalMsg, \"\u274c Submission failed. Please try again or contact the organizer.\", true);\n submitBtn.disabled = false;\n return;\n}\n\n submitBtn.disabled = true;\n }\n\n submitBtn.addEventListener('click', submitVote);\n\n updateAll();\n <\/script>\n","protected":false},"excerpt":{"rendered":"<p>Royal Voting 2026 Mardi Gras Royalty Voting Poll Select exactly 3 Kings and exactly 3 Queens, then submit your ballot. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"plain-container","ast-site-content-layout":"default","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":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"enabled","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-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":"","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-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":"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":""},"mobile":{"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":""}},"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/djaink.com\/public_html\/Portfolio\/index.php\/wp-json\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/djaink.com\/public_html\/Portfolio\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/djaink.com\/public_html\/Portfolio\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/djaink.com\/public_html\/Portfolio\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/djaink.com\/public_html\/Portfolio\/index.php\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":19,"href":"https:\/\/djaink.com\/public_html\/Portfolio\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":73,"href":"https:\/\/djaink.com\/public_html\/Portfolio\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions\/73"}],"wp:attachment":[{"href":"https:\/\/djaink.com\/public_html\/Portfolio\/index.php\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}