Przykładowa strona. Strony są inne niż wpisy na blogu, ponieważ nie tylko znajdują się zawsze w jednym miejscu, ale także pojawiają się w menu witryny (w większości motywów). Większość użytkowników zaczyna od strony z informacjami o sobie, która zapozna ich przed odwiedzającymi witrynę. Taka strona może zawierać na przykład taką treść:.

.

const playersTeam1 = [
    { name: "Robert Lewandowski", birthDate: new Date("1988-08-21") },
    { name: "Kamil Glik", birthDate: new Date("1988-02-03") },
    { name: "Piotr Zieliński", birthDate: new Date("1994-05-20") },
    { name: "Wojciech Szczęsny", birthDate: new Date("1990-04-18") },
    { name: "Jakub Kamiński", birthDate: new Date("2002-06-05") },
    { name: "Sebastian Szymański", birthDate: new Date("1999-05-10") },
    { name: "Karol Linetty", birthDate: new Date("1995-02-02") },
    { name: "Arkadiusz Milik", birthDate: new Date("1994-02-28") },
    { name: "Grzegorz Krychowiak", birthDate: new Date("1990-01-29") },
    { name: "Jakub Moder", birthDate: new Date("1999-04-07") }
];

const playersTeam2 = [
    { name: "Lionel Messi", birthDate: new Date("1987-06-24") },
    { name: "Cristiano Ronaldo", birthDate: new Date("1985-02-05") },
    { name: "Neymar Jr.", birthDate: new Date("1992-02-05") },
    { name: "Kylian Mbappé", birthDate: new Date("1998-12-20") },
    { name: "Kevin De Bruyne", birthDate: new Date("1991-06-28") },
    { name: "Luka Modrić", birthDate: new Date("1985-09-09") },
    { name: "Sergio Ramos", birthDate: new Date("1986-03-30") },
    { name: "Virgil van Dijk", birthDate: new Date("1991-07-08") },
    { name: "Mohamed Salah", birthDate: new Date("1992-06-15") },
    { name: "Karim Benzema", birthDate: new Date("1987-12-19") }
];

// Funkcja renderująca listę zawodników z checkboxami
function displayPlayers(players, containerId) {
    const playerListDiv = document.getElementById(containerId);
    playerListDiv.innerHTML = "";  // Czyścimy poprzednią zawartość

    players.forEach((player, index) => {
        const checkbox = document.createElement("input");
        checkbox.type = "checkbox";
        checkbox.id = containerId + "_" + index;
        checkbox.value = player.birthDate;

        const label = document.createElement("label");
        label.setAttribute("for", checkbox.id);
        label.textContent = `${player.name} (ur. ${player.birthDate.toISOString().split('T')[0]})`;

        const div = document.createElement("div");
        div.appendChild(checkbox);
        div.appendChild(label);
        playerListDiv.appendChild(div);
    });
}

// Gdy strona się załaduje, wyświetl listy zawodników
window.onload = function () {
    displayPlayers(playersTeam1, "player-list1");
    displayPlayers(playersTeam2, "player-list2");
};

// Obliczenie biorytmu drużyny
function calculateTeamBiorhythm(players, listId, date) {
    let total = 0, count = 0;
    players.forEach((player, index) => {
        const checkbox = document.getElementById(listId + "_" + index);
        if (checkbox.checked) {
            total += Math.sin((2 * Math.PI * (date - player.birthDate) / (1000 * 3600 * 24)) / 23);
            count++;
        }
    });
    return count ? (total / count).toFixed(2) : "Brak danych";
}

// Funkcja do porównania biorytmów drużyn
function calculate() {
    const selectedDate = new Date(document.getElementById("date").value);
    if (isNaN(selectedDate)) {
        alert("Proszę wybrać poprawną datę!");
        return;
    }

    const avg1 = calculateTeamBiorhythm(playersTeam1, "player-list1", selectedDate);
    const avg2 = calculateTeamBiorhythm(playersTeam2, "player-list2", selectedDate);

    document.getElementById("result1").innerText = avg1;
    document.getElementById("result2").innerText = avg2;

    if (!isNaN(avg1) && !isNaN(avg2)) {
        document.getElementById("winner").innerText = avg1 > avg2 ? "Drużyna 1" : "Drużyna 2";
    } else {
        document.getElementById("winner").innerText = "Brak wystarczających danych do porównania.";
    }
}