[Add] Team section & teams post
This commit is contained in:
parent
723e3762ec
commit
cb26d149eb
13 changed files with 521 additions and 53 deletions
|
|
@ -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();
|
||||
|
|
|
|||
Loading…
Reference in a new issue