560 lines
19 KiB
HTML
560 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Community - AeThex</title>
|
|
<meta name="description" content="Join our community on Discord">
|
|
<meta name="theme-color" content="#6366f1">
|
|
<link rel="icon" href="/logo.png" type="image/png">
|
|
<style>
|
|
:root {
|
|
--background: #030712;
|
|
--foreground: #f8fafc;
|
|
--card: rgba(15, 23, 42, 0.6);
|
|
--card-border: rgba(99, 102, 241, 0.15);
|
|
--card-border-hover: rgba(99, 102, 241, 0.4);
|
|
--primary: #6366f1;
|
|
--primary-light: #818cf8;
|
|
--secondary: rgba(30, 41, 59, 0.5);
|
|
--muted: #64748b;
|
|
--border: rgba(51, 65, 85, 0.5);
|
|
--success: #10b981;
|
|
}
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
font-family: 'Segoe UI', system-ui, sans-serif;
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
min-height: 100vh;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.bg-grid {
|
|
position: fixed;
|
|
inset: 0;
|
|
background-image:
|
|
linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px);
|
|
background-size: 64px 64px;
|
|
pointer-events: none;
|
|
z-index: -2;
|
|
}
|
|
|
|
.bg-glow {
|
|
position: fixed;
|
|
top: -50%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 150%;
|
|
height: 100%;
|
|
background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.15) 0%, transparent 60%);
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
}
|
|
|
|
.container {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
padding: 2rem 1.5rem;
|
|
}
|
|
|
|
.loading {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 80vh;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.loading .spinner {
|
|
width: 48px;
|
|
height: 48px;
|
|
border: 3px solid var(--border);
|
|
border-top-color: var(--primary);
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.error-page {
|
|
display: none;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 80vh;
|
|
text-align: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.error-page h1 {
|
|
font-size: 6rem;
|
|
color: var(--primary);
|
|
line-height: 1;
|
|
}
|
|
|
|
.error-page p {
|
|
color: var(--muted);
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.community-page {
|
|
display: none;
|
|
}
|
|
|
|
.banner {
|
|
width: 100%;
|
|
height: 200px;
|
|
background: linear-gradient(135deg, var(--primary), #3b82f6);
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
margin-bottom: -60px;
|
|
position: relative;
|
|
}
|
|
|
|
.banner img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.banner-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(to bottom, transparent 50%, var(--background) 100%);
|
|
}
|
|
|
|
.profile-section {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.avatar {
|
|
width: 120px;
|
|
height: 120px;
|
|
border-radius: 50%;
|
|
border: 4px solid var(--background);
|
|
background: var(--card);
|
|
object-fit: cover;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.community-name {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.community-handle {
|
|
color: var(--muted);
|
|
font-size: 0.9rem;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.member-count {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
background: var(--secondary);
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 20px;
|
|
margin-top: 1rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.member-count .dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
background: var(--success);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.description {
|
|
max-width: 600px;
|
|
margin: 1.5rem auto;
|
|
color: var(--muted);
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
.cta-buttons {
|
|
display: flex;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.875rem 1.75rem;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
transition: all 0.2s;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, #5865F2, #7289DA);
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 25px rgba(88, 101, 242, 0.4);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: var(--secondary);
|
|
color: var(--foreground);
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
border-color: var(--primary);
|
|
}
|
|
|
|
.features-section {
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.features-title {
|
|
font-size: 1.25rem;
|
|
text-align: center;
|
|
margin-bottom: 1.5rem;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.features-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
|
|
.feature-card {
|
|
background: var(--card);
|
|
border: 1px solid var(--card-border);
|
|
border-radius: 12px;
|
|
padding: 1.25rem;
|
|
text-align: center;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.feature-card:hover {
|
|
border-color: var(--card-border-hover);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.feature-icon {
|
|
font-size: 2rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.feature-name {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.socials-section {
|
|
margin-top: 2.5rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.social-link {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 44px;
|
|
height: 44px;
|
|
background: var(--secondary);
|
|
border: 1px solid var(--border);
|
|
border-radius: 50%;
|
|
color: var(--foreground);
|
|
text-decoration: none;
|
|
transition: all 0.2s;
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.social-link:hover {
|
|
border-color: var(--primary);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.powered-by {
|
|
margin-top: 4rem;
|
|
text-align: center;
|
|
padding: 1.5rem;
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
.powered-by a {
|
|
color: var(--muted);
|
|
text-decoration: none;
|
|
font-size: 0.85rem;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.powered-by a:hover {
|
|
color: var(--primary);
|
|
}
|
|
|
|
.powered-by img {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.tier-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 4px;
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
.tier-badge.pro {
|
|
background: linear-gradient(135deg, #a855f7, #6366f1);
|
|
color: white;
|
|
}
|
|
|
|
.tier-badge.enterprise {
|
|
background: linear-gradient(135deg, #f59e0b, #ef4444);
|
|
color: white;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.banner { height: 150px; }
|
|
.avatar { width: 100px; height: 100px; }
|
|
.community-name { font-size: 1.5rem; }
|
|
.cta-buttons { flex-direction: column; width: 100%; }
|
|
.btn { width: 100%; justify-content: center; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="bg-grid"></div>
|
|
<div class="bg-glow"></div>
|
|
|
|
<div id="loading" class="loading">
|
|
<div class="spinner"></div>
|
|
<p>Loading community...</p>
|
|
</div>
|
|
|
|
<div id="error" class="error-page">
|
|
<h1>404</h1>
|
|
<h2>Community Not Found</h2>
|
|
<p>This community page doesn't exist or has been removed.</p>
|
|
<a href="/" class="btn btn-primary">Go Home</a>
|
|
</div>
|
|
|
|
<div id="community" class="community-page">
|
|
<div class="container">
|
|
<div class="banner" id="banner">
|
|
<img id="banner-img" src="" alt="Banner" style="display: none;">
|
|
<div class="banner-overlay"></div>
|
|
</div>
|
|
|
|
<div class="profile-section">
|
|
<img id="avatar" class="avatar" src="/logo.png" alt="Community Avatar">
|
|
<h1 class="community-name">
|
|
<span id="name">Community</span>
|
|
<span id="tier-badge" class="tier-badge" style="display: none;"></span>
|
|
</h1>
|
|
<p class="community-handle" id="handle">@handle</p>
|
|
<div class="member-count" id="member-count" style="display: none;">
|
|
<span class="dot"></span>
|
|
<span id="members">0</span> members
|
|
</div>
|
|
<p class="description" id="description"></p>
|
|
|
|
<div class="cta-buttons">
|
|
<a href="#" id="invite-btn" class="btn btn-primary" style="display: none;" onclick="trackEvent('invite_click')">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.09.09 0 0 0-.07.03c-.18.33-.39.76-.53 1.09a16.09 16.09 0 0 0-4.8 0c-.14-.34-.35-.76-.54-1.09c-.01-.02-.04-.03-.07-.03c-1.5.26-2.93.71-4.27 1.33c-.01 0-.02.01-.03.02c-2.72 4.07-3.47 8.03-3.1 11.95c0 .02.01.04.03.05c1.8 1.32 3.53 2.12 5.24 2.65c.03.01.06 0 .07-.02c.4-.55.76-1.13 1.07-1.74c.02-.04 0-.08-.04-.09c-.57-.22-1.11-.48-1.64-.78c-.04-.02-.04-.08-.01-.11c.11-.08.22-.17.33-.25c.02-.02.05-.02.07-.01c3.44 1.57 7.15 1.57 10.55 0c.02-.01.05-.01.07.01c.11.09.22.17.33.26c.04.03.04.09-.01.11c-.52.31-1.07.56-1.64.78c-.04.01-.05.06-.04.09c.32.61.68 1.19 1.07 1.74c.03.01.06.02.09.01c1.72-.53 3.45-1.33 5.25-2.65c.02-.01.03-.03.03-.05c.44-4.53-.73-8.46-3.1-11.95c-.01-.01-.02-.02-.04-.02zM8.52 14.91c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.84 2.12-1.89 2.12zm6.97 0c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.83 2.12-1.89 2.12z"/></svg>
|
|
Join Discord
|
|
</a>
|
|
<a href="#" id="website-btn" class="btn btn-secondary" style="display: none;" onclick="trackEvent('website_click')">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
|
|
Website
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="features-section" class="features-section" style="display: none;">
|
|
<h3 class="features-title">What We Offer</h3>
|
|
<div id="features-grid" class="features-grid"></div>
|
|
</div>
|
|
|
|
<div id="socials-section" class="socials-section" style="display: none;"></div>
|
|
|
|
<div class="powered-by">
|
|
<a href="/">
|
|
<img src="/logo.png" alt="AeThex">
|
|
Powered by AeThex | Warden
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const handle = window.location.pathname.split('/').filter(Boolean)[0];
|
|
|
|
async function loadCommunity() {
|
|
try {
|
|
const res = await fetch(`/api/community/${handle}`);
|
|
|
|
if (!res.ok) {
|
|
document.getElementById('loading').style.display = 'none';
|
|
document.getElementById('error').style.display = 'flex';
|
|
return;
|
|
}
|
|
|
|
const data = await res.json();
|
|
|
|
// Update page
|
|
document.title = `${data.title || data.name} - AeThex`;
|
|
document.querySelector('meta[name="description"]').content = data.description || '';
|
|
|
|
// Avatar
|
|
if (data.avatar) {
|
|
document.getElementById('avatar').src = data.avatar;
|
|
}
|
|
|
|
// Banner
|
|
if (data.banner) {
|
|
const bannerImg = document.getElementById('banner-img');
|
|
bannerImg.src = data.banner;
|
|
bannerImg.style.display = 'block';
|
|
}
|
|
|
|
// Name and handle
|
|
document.getElementById('name').textContent = data.title || data.name;
|
|
document.getElementById('handle').textContent = `aethex.dev/${data.handle}`;
|
|
|
|
// Tier badge
|
|
if (data.tier === 'pro' || data.tier === 'enterprise') {
|
|
const badge = document.getElementById('tier-badge');
|
|
badge.textContent = data.tier === 'pro' ? '⭐ Pro' : '🏆 Enterprise';
|
|
badge.className = `tier-badge ${data.tier}`;
|
|
badge.style.display = 'inline-flex';
|
|
}
|
|
|
|
// Member count
|
|
if (data.memberCount) {
|
|
document.getElementById('members').textContent = data.memberCount.toLocaleString();
|
|
document.getElementById('member-count').style.display = 'inline-flex';
|
|
}
|
|
|
|
// Description
|
|
document.getElementById('description').textContent = data.description || '';
|
|
|
|
// Invite button
|
|
if (data.invite) {
|
|
const inviteBtn = document.getElementById('invite-btn');
|
|
inviteBtn.href = data.invite;
|
|
inviteBtn.style.display = 'inline-flex';
|
|
}
|
|
|
|
// Website button
|
|
if (data.website) {
|
|
const websiteBtn = document.getElementById('website-btn');
|
|
websiteBtn.href = data.website;
|
|
websiteBtn.style.display = 'inline-flex';
|
|
}
|
|
|
|
// Features
|
|
if (data.features && data.features.length > 0) {
|
|
const featuresSection = document.getElementById('features-section');
|
|
const featuresGrid = document.getElementById('features-grid');
|
|
|
|
data.features.forEach(feature => {
|
|
const card = document.createElement('div');
|
|
card.className = 'feature-card';
|
|
card.innerHTML = `
|
|
<div class="feature-icon">${feature.icon || '✨'}</div>
|
|
<div class="feature-name">${feature.name}</div>
|
|
`;
|
|
featuresGrid.appendChild(card);
|
|
});
|
|
|
|
featuresSection.style.display = 'block';
|
|
}
|
|
|
|
// Social links
|
|
if (data.socials && Object.keys(data.socials).length > 0) {
|
|
const socialsSection = document.getElementById('socials-section');
|
|
|
|
const socialIcons = {
|
|
twitter: '<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>',
|
|
youtube: '<svg width="18" height="18" 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>',
|
|
tiktok: '<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg>',
|
|
instagram: '<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z"/></svg>',
|
|
github: '<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>',
|
|
twitch: '<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714z"/></svg>',
|
|
roblox: '<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M5.164 0L0 18.576 18.836 24 24 5.424zM15.097 15.458l-6.093-1.534 1.534-6.093 6.093 1.534z"/></svg>'
|
|
};
|
|
|
|
Object.entries(data.socials).forEach(([platform, url]) => {
|
|
if (url) {
|
|
const link = document.createElement('a');
|
|
link.className = 'social-link';
|
|
link.href = url;
|
|
link.target = '_blank';
|
|
link.rel = 'noopener noreferrer';
|
|
link.innerHTML = socialIcons[platform] || platform[0].toUpperCase();
|
|
link.title = platform;
|
|
link.onclick = () => trackEvent('social_click');
|
|
socialsSection.appendChild(link);
|
|
}
|
|
});
|
|
|
|
if (socialsSection.children.length > 0) {
|
|
socialsSection.style.display = 'flex';
|
|
}
|
|
}
|
|
|
|
// Show community page
|
|
document.getElementById('loading').style.display = 'none';
|
|
document.getElementById('community').style.display = 'block';
|
|
|
|
} catch (error) {
|
|
console.error('Failed to load community:', error);
|
|
document.getElementById('loading').style.display = 'none';
|
|
document.getElementById('error').style.display = 'flex';
|
|
}
|
|
}
|
|
|
|
function trackEvent(eventType) {
|
|
fetch(`/api/community/${handle}/track`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ event: eventType })
|
|
}).catch(() => {});
|
|
}
|
|
|
|
loadCommunity();
|
|
</script>
|
|
</body>
|
|
</html>
|