{"id":14,"date":"2026-08-06T13:58:15","date_gmt":"2026-08-06T13:58:15","guid":{"rendered":"https:\/\/footballklursta.com.ng\/?page_id=14"},"modified":"2026-08-06T15:27:35","modified_gmt":"2026-08-06T15:27:35","slug":"predictor","status":"publish","type":"page","link":"https:\/\/footballklursta.com.ng\/?page_id=14","title":{"rendered":"Predictor"},"content":{"rendered":"\n<style>\n\/* Football Klursta Branded Palette *\/\n:root {\n    --klursta-green: #008751;       \n    --klursta-green-dark: #005c36;  \n    --klursta-green-light: #e6f3ed; \n    --klursta-border-light: #22c55e; \n    --klursta-text-dark: #1e293b;   \n    --klursta-text-muted: #64748b;\n}\n\n\/* Global outer container for all matches *\/\n.klursta-prediction-center {\n    background: #e6f3ed;\n    border: 1px solid var(--klursta-border-light);\n    border-radius: 10px;\n    padding: 10px;\n    width: 95%; \n    box-sizing: border-box;\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);\n    margin: 20px auto;\n}\n\n\/* 2. Minibox - Expanded internal padding and room for a wider layout *\/\n.klursta-match-minibox {\n    background: #f8fafc;\n    border: 1px solid var(--klursta-border-light);\n    border-radius: 12px;\n    padding: 10px; \/* Increased padding to expand the box slightly *\/\n    margin-bottom: 20px;\n    position: relative;\n}\n\n\/* 1. Match Meta Information - Stacked per line *\/\n.klursta-match-meta {\n    display: flex;\n    flex-direction: column; \/* Forces layout to stack every detail per line *\/\n    gap: 4px; \/* Space between lines *\/\n    font-size: 11px;\n    color: var(--klursta-text-muted);\n    border-bottom: 1px dashed var(--klursta-border-light);\n    padding-bottom: 10px;\n    margin-bottom: 16px;\n    font-weight: 500;\n}\n\n.klursta-meta-league {\n    color: var(--klursta-green);\n    font-weight: 700;\n    text-transform: uppercase;\n}\n\n\/* Symmetrical Grid for Head-to-Head Actions *\/\n.klursta-match-core {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 12px;\n}\n\n.klursta-team-column {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n    min-width: 0; \/* Ensures text truncation rules are respected if needed *\/\n}\n\n.klursta-team-logo {\n    width: 46px; \n    height: 46px;\n    object-fit: contain;\n    margin-bottom: 6px;\n}\n\n\/* 2. Team Name - Typography reduced by 2px to avoid conflicts *\/\n.klursta-team-name {\n    font-size: 12px; \/* Reduced from 14px to 12px *\/\n    font-weight: 700;\n    color: var(--klursta-text-dark);\n    margin-bottom: 4px;\n    white-space: normal;\n    word-break: break-word;\n    line-height: 1.2;\n}\n\n\/* Form Badges (W-D-L) Setup *\/\n.klursta-form-row {\n    display: flex;\n    gap: 2px;\n}\n\n.klursta-form-badge {\n    font-size: 7px;\n    font-weight: 600;\n    width: 14px;\n    height: 14px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 3px;\n    color: #ffffff;\n}\n.klursta-form-badge.w { background: #22c55e; } \n.klursta-form-badge.d { background: #94a3b8; } \n.klursta-form-badge.l { background: #ef4444; } \n\n\/* Inputs alignment box *\/\n.klursta-score-inputs {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    flex-shrink: 0;\n}\n\n.klursta-score-field {\n    width: 36px;               \n    height: 36px;              \n    border: 1px solid #004d2e; \n    border-radius: 6px;\n    text-align: center;\n    font-size: 16px;           \n    font-weight: 700;\n    color: var(--klursta-text-dark);\n    outline: none;\n    transition: all 0.2s ease;\n    background: #ffffff;\n    -moz-appearance: textfield; \n}\n\n.klursta-score-field::-webkit-outer-spin-button,\n.klursta-score-field::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n}\n\n.klursta-score-field:focus {\n    border-color: var(--klursta-green);\n    box-shadow: 0 0 0 3px var(--klursta-green-light);\n}\n\n.klursta-vs-text {\n    font-weight: 600;\n    color: #94a3b8;\n    font-size: 11px;\n}\n\n\/* Form footer action steps styling *\/\n.klursta-center-footer {\n    text-align: center;\n    margin-top: 24px;\n}\n\n.klursta-submit-button {\n    width: 100%;\n    background: var(--klursta-green);\n    color: #ffffff;\n    border: none;\n    border-radius: 8px;\n    padding: 14px;\n    font-size: 16px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: background 0.2s ease;\n}\n\n.klursta-submit-button:hover {\n    background: var(--klursta-green-dark);\n}\n\n.klursta-footer-hint {\n    display: block;\n    font-size: 12px;\n    color: var(--klursta-text-muted);\n    margin-top: 8px;\n}\n\n#prediction-message {\n    margin-top: 12px;\n    font-size: 13px;\n    font-weight: 500;\n}\n<\/style>\n\n<!-- Global Form Wrapper -->\n<form id=\"prediction-form\" class=\"klursta-prediction-center\">\n\n    <!-- MATCH MINIBOX 1 -->\n    <div class=\"klursta-match-minibox\">\n        <!-- 1. Stacking match details line-by-line -->\n        <div class=\"klursta-match-meta\">\n            <span class=\"klursta-meta-league\">UEFA Champions League<\/span>\n            <span>Stadium: Emirates Stadium<\/span>\n            <span>Kick-off: 14 Aug 2026 &#8211; 6:00pm<\/span>\n        <\/div>\n        \n        <div class=\"klursta-match-core\">\n            <!-- Team Home -->\n            <div class=\"klursta-team-column\">\n                <img decoding=\"async\" class=\"klursta-team-logo\" src=\"https:\/\/placehold.co\" alt=\"Arsenal Logo\">\n                <span class=\"klursta-team-name\">Arsenal FC<\/span>\n                <div class=\"klursta-form-row\">\n                    <span class=\"klursta-form-badge w\">W<\/span>\n                    <span class=\"klursta-form-badge w\">W<\/span>\n                    <span class=\"klursta-form-badge d\">D<\/span>\n                    <span class=\"klursta-form-badge l\">L<\/span>\n                    <span class=\"klursta-form-badge w\">W<\/span>\n                <\/div>\n            <\/div>\n\n            <!-- Custom array-based inputs for match_1 -->\n            <div class=\"klursta-score-inputs\">\n                <input type=\"number\" name=\"predictions[match_1][home]\" class=\"klursta-score-field\" min=\"0\" max=\"99\" placeholder=\"-\" required=\"\">\n                <span class=\"klursta-vs-text\">VS<\/span>\n                <input type=\"number\" name=\"predictions[match_1][away]\" class=\"klursta-score-field\" min=\"0\" max=\"99\" placeholder=\"-\" required=\"\">\n            <\/div>\n\n            <!-- Team Away -->\n            <div class=\"klursta-team-column\">\n                <img decoding=\"async\" class=\"klursta-team-logo\" src=\"https:\/\/placehold.co\" alt=\"Real Madrid Logo\">\n                <span class=\"klursta-team-name\">Real Madrid CF<\/span>\n                <div class=\"klursta-form-row\">\n                    <span class=\"klursta-form-badge w\">W<\/span>\n                    <span class=\"klursta-form-badge d\">D<\/span>\n                    <span class=\"klursta-form-badge w\">W<\/span>\n                    <span class=\"klursta-form-badge w\">W<\/span>\n                    <span class=\"klursta-form-badge l\">L<\/span>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- MATCH MINIBOX 2 -->\n    <div class=\"klursta-match-minibox\">\n        <!-- 1. Stacking match details line-by-line -->\n        <div class=\"klursta-match-meta\">\n            <span class=\"klursta-meta-league\">UEFA Champions League<\/span>\n            <span>Stadium: Stamford Bridge<\/span>\n            <span>Kick-off: 15 Aug 2026 &#8211; 8:00pm<\/span>\n        <\/div>\n        \n        <div class=\"klursta-match-core\">\n            <!-- Team Home -->\n            <div class=\"klursta-team-column\">\n                <img decoding=\"async\" class=\"klursta-team-logo\" src=\"https:\/\/placehold.co\" alt=\"Chelsea Logo\">\n                <span class=\"klursta-team-name\">Chelsea FC<\/span>\n                <div class=\"klursta-form-row\">\n                    <span class=\"klursta-form-badge l\">L<\/span>\n                    <span class=\"klursta-form-badge d\">D<\/span>\n                    <span class=\"klursta-form-badge w\">W<\/span>\n                    <span class=\"klursta-form-badge l\">L<\/span>\n                    <span class=\"klursta-form-badge w\">W<\/span>\n                <\/div>\n            <\/div>\n\n            <!-- Custom array-based inputs for match_2 -->\n            <div class=\"klursta-score-inputs\">\n                <input type=\"number\" name=\"predictions[match_2][home]\" class=\"klursta-score-field\" min=\"0\" max=\"99\" placeholder=\"-\" required=\"\">\n                <span class=\"klursta-vs-text\">VS<\/span>\n                <input type=\"number\" name=\"predictions[match_2][away]\" class=\"klursta-score-field\" min=\"0\" max=\"99\" placeholder=\"-\" required=\"\">\n            <\/div>\n\n            <!-- Team Away -->\n            <div class=\"klursta-team-column\">\n                <img decoding=\"async\" class=\"klursta-team-logo\" src=\"https:\/\/placehold.co\" alt=\"Barcelona Logo\">\n                <span class=\"klursta-team-name\">FC Barcelona<\/span>\n                <div class=\"klursta-form-row\">\n                    <span class=\"klursta-form-badge w\">W<\/span>\n                    <span class=\"klursta-form-badge w\">W<\/span>\n                    <span class=\"klursta-form-badge w\">W<\/span>\n                    <span class=\"klursta-form-badge d\">D<\/span>\n                    <span class=\"klursta-form-badge w\">W<\/span>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Action Center Footer Area -->\n    <div class=\"klursta-center-footer\">\n        <button type=\"submit\" class=\"klursta-submit-button\">Save My Predictions<\/button>\n        <span class=\"klursta-footer-hint\">You can still update predictions before kickoff.<\/span>\n        <div id=\"prediction-message\"><\/div>\n    <\/div>\n\n<\/form>\n\n<script>\ndocument.getElementById('prediction-form').addEventListener('submit', function(e) {\n    e.preventDefault();\n    \n    const messageDiv = document.getElementById('prediction-message');\n    messageDiv.style.color = \"var(--klursta-text-dark)\";\n    messageDiv.innerText = \"Processing and saving your predictions...\";\n    \n    const formData = new FormData(this);\n    formData.append('action', 'save_klursta_multi_predictions'); \n    \n    fetch('\/wp-admin\/admin-ajax.php', {\n        method: 'POST',\n        body: formData\n    })\n    .then(response => response.json())\n    .then(data => {\n        if(data.success) {\n            messageDiv.style.color = \"var(--klursta-green)\";\n            messageDiv.innerText = data.data;\n        } else {\n            messageDiv.style.color = \"#ef4444\";<\/script>\n","protected":false},"excerpt":{"rendered":"<p>UEFA Champions League Stadium: Emirates Stadium Kick-off: 14 Aug 2026 &#8211; 6:00pm Arsenal FC W W D L W VS Real Madrid CF W D W W L UEFA Champions League Stadium: Stamford Bridge Kick-off: 15 Aug 2026 &#8211; 8:00pm Chelsea FC L D W L W VS FC Barcelona W W W D W &#8230; <a title=\"Predictor\" class=\"read-more\" href=\"https:\/\/footballklursta.com.ng\/?page_id=14\" aria-label=\"Read more about Predictor\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-14","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/footballklursta.com.ng\/index.php?rest_route=\/wp\/v2\/pages\/14","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/footballklursta.com.ng\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/footballklursta.com.ng\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/footballklursta.com.ng\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/footballklursta.com.ng\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=14"}],"version-history":[{"count":4,"href":"https:\/\/footballklursta.com.ng\/index.php?rest_route=\/wp\/v2\/pages\/14\/revisions"}],"predecessor-version":[{"id":35,"href":"https:\/\/footballklursta.com.ng\/index.php?rest_route=\/wp\/v2\/pages\/14\/revisions\/35"}],"wp:attachment":[{"href":"https:\/\/footballklursta.com.ng\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}