Event Names<\/title><style>body {\n font-family: \"Barlow\";\n font-weight: 300;\n margin: 0;\n padding: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n background: #f0f0f0; \/* Light grey background for better visibility *\/\n }\n\n .search-container {\n width: auto !important;\n display: flex;\n justify-content: flex-end;\n }\n\n .search-box::placeholder {\n font-family: \"Barlow\";\n color: #691489;\n }\n .event-box:nth-child(3n+1) {\n background-color: #ed6b6a; \/* Red *\/\n}\n\n.event-box:nth-child(3n+2) {\n background-color: #bce4fa; \/* Blue *\/\n}\n\n.event-box:nth-child(3n+3) {\n background-color: #8c6fbb; \/* Purple *\/\n}\n\n .search-box {\n width: 25% !important;\n justify-content: flex-end;\n font-size: 12px;\n border: 1px solid #691489;\n }\n\n .event-container {\n display: grid;\n grid-template-columns: repeat(2, 1fr); \/* Two columns *\/\n gap: 10px; \/* Space between items *\/\n width: 70vw; \/* Adjust width to control white space on left and right *\/\n margin: 0 auto; \/* Center horizontally *\/\n position: relative;\n }\n \n\n .event-box, .placeholder-box {\n padding: 10vh;\n height: 20vh;\n box-sizing: border-box;\n cursor: pointer;\n position: relative; \/* Enable positioning of children *\/\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .placeholder-box {\n background-color: #691489;\n animation: pulse 1s infinite;\n }\n\n @keyframes pulse {\n 0% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n 100% {\n opacity: 1;\n }\n }\n\n .event-name {\n position: absolute; \/* Position absolutely within the parent .event-box *\/\n top: 10px; \/* Distance from the top *\/\n left: 10px; \/* Distance from the left *\/\n font-size: 20px;\n color: #691489;\n }\n\n .event-type {\n font-size: 2vh;\n color: #691489;\n }\n\n .start-date {\n color: #691489;\n position: absolute; \/* Position absolutely within the parent .event-box *\/\n bottom: 10px; \/* Distance from the bottom *\/\n left: 10px; \/* Distance from the left *\/\n font-size: 2vh; \/* Adjust font size as needed *\/\n }\n\n @media screen and (max-width: 600px) {\n .event-name {\n font-size: 3vh;\n }\n\n .event-type {\n font-size: 6vh;\n }\n\n .start-date {\n font-size: 6vh !important;\n }\n \n .search-container {\n width: 90%;\n }\n\n .event-container {\n grid-template-columns: 1fr; \/* One column on small screens *\/\n }\n }\n\n #eventFilter:focus {\n border: 1px solid #691489;\n }\n <\/style><\/head><body><div class=\"search-container\"><input type=\"text\" id=\"eventFilter\" class=\"search-box\" placeholder=\"Filter by name\"><\/div><div class=\"event-container\"><div class=\"placeholder-box\"><\/div><div class=\"placeholder-box\"><\/div><div class=\"placeholder-box\"><\/div><div class=\"placeholder-box\"><\/div><\/div><script>document.addEventListener('DOMContentLoaded', function() {\n const eventContainer = document.querySelector('.event-container');\n const searchContainer = document.querySelector('.search-container');\n const searchBox = document.querySelector('.search-box');\n\n \/\/ Determine the label for the start date based on the URL\n const startDateLabel = window.location.pathname.includes('\/de') ? 'Datum' : 'Start date';\n\n const formatDate = (dateString) => {\n const date = new Date(dateString);\n const dd = String(date.getDate()).padStart(2, '0');\n const mm = String(date.getMonth() + 1).padStart(2, '0'); \/\/ January is 0!\n const yyyy = date.getFullYear();\n const hh = String(date.getHours()).padStart(2, '0');\n const min = String(date.getMinutes()).padStart(2, '0');\n return `${dd}-${mm}-${yyyy} ${hh}:${min}`;\n };\n\n const get = () => {\n fetch(\"https:\/\/events.axsos.academy\/api\/events\/published\/\")\n .then((res) => res.json())\n .then((data) => {\n if (Array.isArray(data) && data.length > 0) {\n \/\/ Sort events by start date in ascending order\n data.sort((a, b) => new Date(a.startDate) - new Date(b.startDate));\n\n \/\/ Remove placeholder boxes\n eventContainer.innerHTML = '';\n\n data.forEach((event, index) => {\n const eventBox = document.createElement('a');\n eventBox.classList.add('event-box');\n eventBox.href = event.publicEventUrl;\n\n \/\/ Set background color based on event type\n if (event.eventType === 100000002) {\n eventBox.style.backgroundColor = 'rgb(237, 107, 106)'; \/\/ Blue color\n } else if (event.eventType === 100000005) {\n eventBox.style.backgroundColor = 'rgb(188, 228, 250)'; \/\/ Grey color\n } else {\n eventBox.style.backgroundColor = 'rgb(237, 107, 106)'; \/\/ Red color\n }\n\n const eventName = document.createElement('div');\n eventName.classList.add('event-name');\n eventName.textContent = event.eventName;\n\n const startDate = document.createElement('div');\n startDate.classList.add('start-date');\n startDate.textContent = `${startDateLabel}: ${formatDate(event.startDate)}`;\n\n eventBox.appendChild(eventName);\n eventBox.appendChild(startDate);\n eventContainer.appendChild(eventBox);\n });\n\n const thirdEventBox = document.querySelector('.event-box:nth-child(3)');\n if (thirdEventBox) {\n const thirdBoxRect = thirdEventBox.getBoundingClientRect();\n const containerRect = eventContainer.getBoundingClientRect();\n searchContainer.style.width = thirdEventBox.offsetWidth + 'px';\n searchContainer.style.top = (thirdBoxRect.top - containerRect.top - searchContainer.offsetHeight - 10) + 'px';\n searchContainer.style.left = thirdBoxRect.left - containerRect.left + 'px';\n }\n\n \/\/ Add event listener for filtering\n document.getElementById('eventFilter').addEventListener('input', function() {\n const filterValue = this.value.toLowerCase();\n const eventBoxes = document.querySelectorAll('.event-box');\n\n eventBoxes.forEach(box => {\n const eventName = box.querySelector('.event-name').textContent.toLowerCase();\n if (eventName.includes(filterValue)) {\n box.style.display = 'block';\n } else {\n box.style.display = 'none';\n }\n });\n });\n\n } else {\n console.error('No events found or invalid response');\n }\n })\n .catch((error) => {\n console.error('Error fetching data:', error);\n });\n };\n\n get();\n });\n<\/script><\/body><\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/section>\r\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Meet the Academy Team Event Names<\/p>","protected":false},"author":7,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4708","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/axsos.academy\/de\/wp-json\/wp\/v2\/pages\/4708","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/axsos.academy\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/axsos.academy\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/axsos.academy\/de\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/axsos.academy\/de\/wp-json\/wp\/v2\/comments?post=4708"}],"version-history":[{"count":12,"href":"https:\/\/axsos.academy\/de\/wp-json\/wp\/v2\/pages\/4708\/revisions"}],"predecessor-version":[{"id":4720,"href":"https:\/\/axsos.academy\/de\/wp-json\/wp\/v2\/pages\/4708\/revisions\/4720"}],"wp:attachment":[{"href":"https:\/\/axsos.academy\/de\/wp-json\/wp\/v2\/media?parent=4708"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}