[Add] Team section & teams post

This commit is contained in:
Alex Emmet 2026-04-22 13:52:22 +02:00
commit cb26d149eb
13 changed files with 521 additions and 53 deletions

View file

@ -124,24 +124,24 @@ async function loadBackdrops() {
}
}
// ─── Load Team ───
async function loadTeam() {
// ─── Load Staff (in Socials section) ───
async function loadStaff() {
try {
const response = await fetch("/api/team.json");
const team = await response.json();
team.sort((a, b) => a.priority - b.priority);
const response = await fetch("/api/staff.json");
const staff = await response.json();
staff.sort((a, b) => a.priority - b.priority);
const container = document.getElementById("team-grid");
const container = document.getElementById("staff-grid");
if (!container) return;
container.innerHTML = team
container.innerHTML = staff
.map(
(member) => `
<div class="team-card">
<div class="team-card staff-card">
${
member.icon
? `<img src="/assets/${member.icon}" alt="${member.name}" onerror="this.style.display='none'">`
: '<div style="width:100px;height:100px;border-radius:50%;background:#2a2e33;margin:0 auto 1.2rem;border:3px solid #2a2e33;"></div>'
: '<div class="staff-placeholder"></div>'
}
<div class="name">${member.name}</div>
<div class="role">${member.role}</div>
@ -150,10 +150,70 @@ async function loadTeam() {
)
.join("");
} catch (err) {
console.error("Failed to load team:", err);
console.error("Failed to load staff:", err);
}
}
// ─── Load Teams ───
async function loadTeams() {
try {
const response = await fetch("/api/teams.json");
const teams = await response.json();
const container = document.getElementById("teams-grid");
if (!container) return;
container.innerHTML = teams
.map((team) => {
const acronym = team.acronym || "";
const vips = team.vips || "";
const hasDiscord = team.discord && team.discord.trim() !== "";
return `
<div class="team-card-large">
<div class="team-card-image" style="background-image: url('/assets/${team.image}')">
<div class="team-card-overlay"></div>
<div class="team-card-header">
<div class="team-name">${team.title}</div>
${acronym ? `<div class="team-acronym">${acronym}</div>` : ""}
</div>
</div>
<div class="team-card-body">
<div class="fade-line"></div>
<div class="team-meta-row">
<span class="meta-label">${team.leader}</span>
</div>
${
vips
? `
<div class="team-meta-row">
<span class="meta-value vips">${vips}</span>
</div>
`
: ""
}
<div class="fade-line"></div>
<p class="team-description">${team.description}</p>
${
hasDiscord
? `
<a href="${team.discord}" target="_blank" rel="noopener" class="team-discord-btn">
<svg viewBox="0 0 24 24" fill="currentColor" class="discord-mini">
<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/>
</svg>
Discord
</a>
`
: ""
}
</div>
</div>
`;
})
.join("");
} catch (err) {
console.error("Failed to load teams:", err);
}
}
// ─── Load Posts ───
async function loadPosts() {
try {
@ -242,7 +302,8 @@ function initScrollEffects() {
// ─── Initialize ───
document.addEventListener("DOMContentLoaded", () => {
loadBackdrops();
loadTeam();
loadStaff();
loadTeams();
loadPosts();
initVideo();
initScrollEffects();