[Add] Team section & teams post

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

View file

@ -1,6 +1,15 @@
[
{
"date": "2026-04-21",
"date": "2026-04-22, by AlexEmmet",
"head_img": "outpost.png",
"file": "Teams.md",
"title": "Teams",
"description": "Get to know the teams!"
},
{
"date": "2026-04-21, by AlexEmmet",
"head_img": "village_sunset.png",
"file": "JoinAnarchyphase.md",
@ -9,7 +18,7 @@
"description": "Join the Anarchyphase community today!"
},
{
"date": "2026-04-21",
"date": "2026-04-21, by AlexEmmet",
"head_img": "horse_rainbow.png",
"file": "Home.md",
@ -18,7 +27,7 @@
"description": "Learn about the /Home command."
},
{
"date": "2026-04-21",
"date": "2026-04-21, by AlexEmmet",
"head_img": "horse_rainbow.png",
"file": "ThisWebsite.md",
@ -27,7 +36,7 @@
"description": "Learn about this website."
},
{
"date": "2026-04-21",
"date": "2026-04-21, by AlexEmmet",
"head_img": "horse_rainbow.png",
"file": "AlexsOpinion.md",

View file

@ -9,7 +9,7 @@
"icon": "ninivx.png",
"name": "NiniVX",
"priority": 1,
"role": "Administrator"
"role": "Community Manager"
},
{
"icon": "burrata.png",
@ -18,6 +18,7 @@
"role": "Administrator"
},
{
"icon": "pitrex.png",
"name": "Pitrex",
"priority": 2,
"role": "Moderator & Developer"

44
website/api/teams.json Normal file
View file

@ -0,0 +1,44 @@
[
{
"title": "Anarchyphase Public Infrastructure",
"acronym": "API",
"leader": "NiniVX",
"vips": "mewjo_",
"description": "Building infrastructure across the server.",
"image": "api.png",
"discord": "directs/api"
},
{
"title": "Commune",
"acronym": "",
"leader": "StormGamer0512",
"vips": "",
"description": "Spreading Communism around the world",
"image": "campsite.png"
},
{
"title": "Orbit",
"acronym": "",
"leader": "Yippee",
"vips": "Skely, xLeggings, Luxi",
"description": "Me when I Orb it",
"image": "village_sunset.png"
},
{
"title": "Chunky Town",
"acronym": "CT",
"leader": "MoriceMC",
"vips": "Yeah he's the owner",
"description": "We are number one",
"image": "icon.png",
"discord": "directs/ct"
},
{
"title": "Ardubia",
"acronym": "",
"leader": "Liwitikiwi",
"vips": "",
"description": "Build borders to keep out foreign aliens",
"image": "outpost.png"
}
]

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();

BIN
website/assets/api.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.8 KiB

BIN
website/assets/pitrex.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

1
website/directs/api Normal file
View file

@ -0,0 +1 @@
https://discord.gg/3NJ6ZjWTJR

1
website/directs/ct Normal file
View file

@ -0,0 +1 @@
https://discord.gg/dKuPGE32bT

View file

@ -95,47 +95,55 @@
<section id="socials" class="bg-image-section">
<div class="content-wrapper">
<h2>Socials</h2>
<a
href="https://www.youtube.com/@MoriceMC"
target="_blank"
rel="noopener"
class="social-btn"
>
<svg
class="social-icon"
viewBox="0 0 24 24"
fill="currentColor"
<div class="social-links">
<a
href="https://www.youtube.com/@MoriceMC"
target="_blank"
rel="noopener"
class="social-btn"
>
<path
d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"
/>
</svg>
Youtube
</a>
<a
href="https://discord.com/invite/Bq4GhxDwU5"
target="_blank"
rel="noopener"
class="social-btn"
>
<svg
class="social-icon"
viewBox="0 0 24 24"
fill="currentColor"
<svg
class="social-icon"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"
/>
</svg>
Youtube
</a>
<a
href="https://discord.com/invite/Bq4GhxDwU5"
target="_blank"
rel="noopener"
class="social-btn"
>
<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>
<svg
class="social-icon"
viewBox="0 0 24 24"
fill="currentColor"
>
<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 class="staff-section">
<h2>Staff</h2>
<div id="staff-grid" class="team-grid"></div>
</div>
</div>
</section>
<section id="team">
<div class="content-wrapper">
<h2>Team</h2>
<div id="team-grid" class="team-grid"></div>
<h2>Teams</h2>
<div id="teams-grid" class="teams-grid"></div>
</div>
</section>

44
website/posts/Teams.md Normal file
View file

@ -0,0 +1,44 @@
# Teams
Hello Yall, Alex here,
Today I added a teams section & filled it with the most important teams I found, at the moment all descriptions are jokes but I hope the leaders will contact me for actual details & icons.
Now all I know about the teams:
## Anarchyphase Public Infrastructure
I work with API's a lot, though barely in Minecraft, I took part in designing the doors & walls of the new API base currently under construction.
Their leader is NiniVX,
and i know mewjo_ personally, quite the nice guy to be aroung.
They are Building public infrastructure across the server (who could guess).
## Commune
Led by StormGamer0512
They are spreading Communism around the world.
Not really it's just the first thing that comes to mind.
I think they fight a lot.
## Orbit
Led by Yippee,
with Skely, xLeggings, Luxi,
They are extremley good at PVP.
## Chunky Town
Led by the owner of Anarchyphase MoriceMC
they are building a base inside a chunk.
## Ardubia
Led byLiwitikiwi
They are builing a safe region for builders & non pvpers.
I neither know where nor how.
With some fulfilling love
Alex

View file

@ -775,3 +775,218 @@ footer a:hover {
::-webkit-scrollbar-thumb:hover {
background: #3a424a;
}
/* ─── Socials Section Layout ─── */
#socials .content-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
}
/* Social links come first */
.social-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
margin-bottom: 1rem;
}
/* Staff section below socials */
.staff-section {
width: 100%;
max-width: 1200px;
}
/* Staff title */
.staff-section h2 {
text-align: center;
font-size: 2.2rem;
margin-bottom: 3rem;
text-shadow: 0 3px 15px rgba(0, 0, 0, 0.9);
color: #fff;
}
.staff-card {
padding: 1.8rem 1.2rem;
}
.staff-placeholder {
width: 80px;
height: 80px;
border-radius: 50%;
background: #2a2e33;
margin: 0 auto 1rem;
border: 3px solid #2a2e33;
}
/* ─── Team Cards ─── */
#team {
background: var(--bg-solid);
}
#team h2 {
text-align: center;
font-size: 2.2rem;
margin-bottom: 3rem;
color: #fff;
}
.teams-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.team-card-large {
position: relative;
border-radius: 16px;
border: 1px solid var(--border-base);
overflow: hidden;
transition: all 0.3s;
min-height: 420px;
display: flex;
flex-direction: column;
}
.team-card-large:hover {
transform: translateY(-6px);
border-color: var(--border-hover);
}
/* background image */
.team-card-image {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
z-index: 0;
}
/* Bottom half */
.team-card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
transparent 0%,
transparent 35%,
rgba(10, 12, 14, 0.85) 65%,
rgba(10, 12, 14, 0.95) 100%
);
backdrop-filter: blur(0px);
z-index: 1;
}
/* Header text centered */
.team-card-header {
position: relative;
z-index: 2;
text-align: center;
padding: 2rem 1.5rem 1rem;
margin-top: auto;
}
.team-name {
font-size: 1.5rem;
font-weight: bold;
color: #fff;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}
.team-acronym {
font-size: 0.9rem;
color: var(--accent-light);
margin-top: 0.3rem;
letter-spacing: 0.15em;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.team-card-body {
position: relative;
z-index: 2;
padding: 0 1.5rem 1.5rem;
margin-top: auto;
}
/* Fade divider lines */
.fade-line {
height: 1px;
background: linear-gradient(
to right,
transparent 0%,
var(--border-hover) 30%,
var(--border-hover) 70%,
transparent 100%
);
margin: 0.8rem 0;
opacity: 0.5;
}
.team-meta-row {
display: flex;
justify-content: center;
align-items: center;
}
.meta-label {
font-size: 1.1rem;
color: #fff;
font-weight: 600;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.meta-value.vips {
font-size: 0.9rem;
color: var(--text-muted);
letter-spacing: 0.15em;
}
.team-description {
color: #bbb;
line-height: 1.6;
font-size: 0.95rem;
text-align: center;
margin: 0.5rem 0 1rem;
}
/* Discord button centered at bottom */
.team-discord-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
width: calc(100% - 1rem);
margin: 0.5rem auto 0;
padding: 0.7rem 1rem;
background: rgba(88, 101, 242, 0.2);
border: 1px solid rgba(88, 101, 242, 0.35);
border-radius: 10px;
color: #aab2ff;
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
transition: all 0.3s;
}
.team-discord-btn:hover {
background: rgba(88, 101, 242, 0.35);
border-color: rgba(88, 101, 242, 0.55);
color: #c5cbff;
transform: translateY(-2px);
}
.discord-mini {
width: 16px;
height: 16px;
flex-shrink: 0;
}
/* ─── Responsive ─── */
@media (max-width: 768px) {
.teams-grid {
grid-template-columns: 1fr;
}
}