Add files via upload

UnifierHQ · Jan 9, 2025 · be414f1 · be414f1
1 parent b396ab5
commit be414f1
Show file tree

Hide file tree

Showing 3 changed files with 261 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Unifier's Team</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="container">
+      <header>
+        <h1>Unifier's Team</h1>
+        <p class="description">This is who creates and works on Unifier.</p>
+      </header>
+
+      <main id="team-members" class="team-grid">
+        <!-- Team members will be inserted here -->
+      </main>
+
+      <footer>
+        <p>© 2024 Unifier Team</p>
+      </footer>
+    </div>
+    <script src="main.js"></script>
+  </body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,54 @@
+async function fetchTeamData() {
+  try {
+    const response = await fetch('https://collab.unifierhq.org/data.json');
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error('Error fetching team data:', error);
+    return {};
+  }
+}
+
+function createTeamMemberCard(id, memberData) {
+  const card = document.createElement('div');
+  card.className = 'team-member';
+
+  card.innerHTML = `
+    <img 
+      src="https://collab.unifierhq.org/pfp/${id}.png" 
+      alt="${memberData.displayname}'s profile picture"
+      class="member-image"
+      onerror="this.src='https://via.placeholder.com/120'"
+    >
+    <div class="member-info">
+      <h2 class="member-name">${memberData.displayname}</h2>
+      <p class="member-role">${memberData.icon} ${memberData.role}</p>
+    </div>
+  `;
+
+  return card;
+}
+
+async function initializeTeamGallery() {
+  const teamContainer = document.getElementById('team-members');
+  const teamData = await fetchTeamData();
+
+  if (Object.keys(teamData).length === 0) {
+    teamContainer.innerHTML = '<p>Unable to load team data. Please try again later.</p>';
+    return;
+  }
+
+  Object.entries(teamData)
+    .filter(([id, member]) => {
+      // Filter out aliases and hidden members
+      const isAlias = id.toLowerCase().includes('aliases');
+      const isHidden = member.hidden === 'web' || member.hidden === 'both';
+      return !isAlias && !isHidden;
+    })
+    .forEach(([id, memberData]) => {
+      const card = createTeamMemberCard(id, memberData);
+      teamContainer.appendChild(card);
+    });
+}
+
+document.addEventListener('DOMContentLoaded', initializeTeamGallery);
diff --git a/style.css b/style.css
@@ -0,0 +1,181 @@
+@font-face {
+  font-family: 'Kollektif';
+  src: url('https://unifierhq.org/assets/Kollektif.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+:root {
+  --primary-color: #ff4646;
+  --background-color: #1a0808;
+  --card-background: #2d1414;
+  --text-color: #ffe2e2;
+  --shadow-color: rgba(255, 0, 0, 0.2);
+  --card-glow: 0 0 20px rgba(255, 70, 70, 0.4);
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(255, 70, 70, 0.4);
+  }
+  70% {
+    box-shadow: 0 0 0 10px rgba(255, 70, 70, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(255, 70, 70, 0);
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-50px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes borderGlow {
+  0% {
+    border-color: rgba(255, 70, 70, 0.3);
+  }
+  50% {
+    border-color: rgba(255, 70, 70, 0.8);
+  }
+  100% {
+    border-color: rgba(255, 70, 70, 0.3);
+  }
+}
+
+body {
+  font-family: Inter, system-ui, -apple-system, sans-serif;
+  background-color: var(--background-color);
+  color: var(--text-color);
+  line-height: 1.6;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+header {
+  text-align: left;
+  margin-bottom: 3rem;
+}
+
+h1 {
+  font-family: 'Kollektif', sans-serif;
+  font-size: 2.5rem;
+  margin-bottom: 0.5rem;
+  color: var(--primary-color);
+  text-shadow: 0 0 15px rgba(255, 70, 70, 0.5);
+}
+
+.description {
+  font-size: 1.1rem;
+  color: #ff8f8f;
+}
+
+.team-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 2rem;
+  margin-bottom: 3rem;
+}
+
+.team-member {
+  background: var(--card-background);
+  border-radius: 12px;
+  padding: 1.5rem;
+  box-shadow: 0 4px 6px var(--shadow-color);
+  border: 2px solid rgba(255, 70, 70, 0.3);
+  position: relative;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  animation: fadeInUp 0.6s ease-out backwards;
+}
+
+.team-grid .team-member:nth-child(1) { animation-delay: 0.1s; }
+.team-grid .team-member:nth-child(2) { animation-delay: 0.2s; }
+.team-grid .team-member:nth-child(3) { animation-delay: 0.3s; }
+.team-grid .team-member:nth-child(4) { animation-delay: 0.4s; }
+.team-grid .team-member:nth-child(5) { animation-delay: 0.5s; }
+
+.team-member:hover {
+  transform: translateY(-5px);
+  box-shadow: var(--card-glow);
+}
+
+.member-image {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  margin: 0 auto 1rem;
+  display: block;
+  object-fit: cover;
+  border: 3px solid var(--primary-color);
+  transition: transform 0.3s ease;
+  animation: borderGlow 3s infinite;
+}
+
+.team-member:hover .member-image {
+  transform: scale(1.1) rotate(5deg);
+}
+
+.member-info {
+  text-align: left;
+}
+
+.member-name {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  color: #ffe2e2;
+}
+
+.member-role {
+  font-size: 0.95rem;
+  color: #ff8f8f;
+  margin-bottom: 0.5rem;
+}
+
+.member-icon {
+  font-size: 1.5rem;
+}
+
+footer {
+  text-align: left;
+  padding: 2rem 0;
+  color: #ff8f8f;
+}
+
+@media (max-width: 768px) {
+  .container {
+    padding: 1rem;
+  }
+
+  .team-grid {
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 1rem;
+  }
+}