profile.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Profile | Syntiox</title>
  <meta name="description" content="View this profile on Syntiox." />
  <meta name="theme-color" content="#0071e3" />
  <!-- Preload fonts to avoid FOUT -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&family=Space+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600;700&family=Playfair+Display:ital,wght@0,700;0,800;1,700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />

    <link rel="stylesheet" href="/assets/css/profile.css">
</head>
<body data-template="clean" data-layout="center" data-avatar-size="md"
      data-avatar-shape="circle" data-avatar-pos="center"
      data-link-style="pill" data-link-icon="true" data-font="inter"
      data-animations="on">
  <div id="root">
    <div class="loader-wrap">
      <div class="spinner"></div>
      <span>Loading…</span>
    </div>
  </div>
  <script src="https://www.gstatic.com/firebasejs/10.12.2/firebase-app-compat.js"></script>
  <script src="https://www.gstatic.com/firebasejs/10.12.2/firebase-firestore-compat.js"></script>
  <script>
  (function() {
    'use strict';
    // ── Firebase ─────────────────────────────────
    const FIREBASE_CONFIG = {
      apiKey: "AIzaSyDCQ1yq4ySr0HC4j1ksSWR7lUdPHvD1UCI",
      authDomain: "syntiox-services.firebaseapp.com",
      projectId: "syntiox-services",
      storageBucket: "syntiox-services.firebasestorage.app",
      messagingSenderId: "598071864083",
      appId: "1:598071864083:web:b69d5c4fc85c9a9a1008e6",
      measurementId: "G-NXWXP64BLR"
    };
    if (!firebase.apps.length) firebase.initializeApp(FIREBASE_CONFIG);
    // ── Social icon detection ─────────────────────
    const ICON_MAP = [
      { m:/youtube\.com|youtu\.be/i,   i:'fa-brands fa-youtube',    c:'#ff0000' },
      { m:/github\.com/i,               i:'fa-brands fa-github',     c:'#24292f' },
      { m:/twitter\.com|x\.com/i,       i:'fa-brands fa-x-twitter',  c:'#000' },
      { m:/instagram\.com/i,            i:'fa-brands fa-instagram',  c:'#e1306c' },
      { m:/tiktok\.com/i,               i:'fa-brands fa-tiktok',     c:'#010101' },
      { m:/linkedin\.com/i,             i:'fa-brands fa-linkedin',   c:'#0077b5' },
      { m:/discord\.gg|discord\.com/i,  i:'fa-brands fa-discord',    c:'#5865f2' },
      { m:/twitch\.tv/i,                i:'fa-brands fa-twitch',     c:'#9146ff' },
      { m:/spotify\.com/i,              i:'fa-brands fa-spotify',    c:'#1db954' },
      { m:/whatsapp\.com|wa\.me/i,      i:'fa-brands fa-whatsapp',   c:'#25d366' },
      { m:/t\.me|telegram\./i,          i:'fa-brands fa-telegram',   c:'#0088cc' },
      { m:/facebook\.com/i,             i:'fa-brands fa-facebook',   c:'#1877f2' },
      { m:/patreon\.com/i,              i:'fa-brands fa-patreon',    c:'#ff424d' },
      { m:/reddit\.com/i,               i:'fa-brands fa-reddit',     c:'#ff4500' },
      { m:/pinterest\.com/i,            i:'fa-brands fa-pinterest',  c:'#e60023' },
      { m:/snapchat\.com/i,             i:'fa-brands fa-snapchat',   c:'#ffcc00' },
      { m:/behance\.net/i,              i:'fa-brands fa-behance',    c:'#053eff' },
      { m:/dribbble\.com/i,             i:'fa-brands fa-dribbble',   c:'#ea4c89' },
      { m:/medium\.com/i,               i:'fa-brands fa-medium',     c:'#000' },
      { m:/soundcloud\.com/i,           i:'fa-brands fa-soundcloud', c:'#ff5500' },
    ];
    function detectIcon(url, accent) {
      for (const e of ICON_MAP) if (e.m.test(url)) return { icon: e.i, color: e.c };
      return { icon: 'fa-solid fa-link', color: accent || '#0071e3' };
    }
    // ── Helpers ───────────────────────────────────
    function hexToRgb(hex) {
      hex = hex.replace('#','');
      if (hex.length === 3) hex = hex.split('').map(c=>c+c).join('');
      const n = parseInt(hex,16);
      return `${(n>>16)&255},${(n>>8)&255},${n&255}`;
    }
    function defaultAvatar(name) {
      const c = (name||'?')[0].toUpperCase();
      return `data:image/svg+xml,${encodeURIComponent(
        `<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96"><circle cx="48" cy="48" r="48" fill="#0071e3"/><text x="48" y="64" text-anchor="middle" font-size="40" font-family="Inter,sans-serif" fill="#fff" font-weight="700">${c}</text></svg>`
      )}`;
    }
    function esc(s) {
      return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
    }
    // ── Apply appearance settings ─────────────────
    function applyAppearance(ap) {
      const b = document.body;
      b.dataset.template   = ap.template    || 'clean';
      b.dataset.layout     = ap.layout      || 'center';
      b.dataset.avatarSize = ap.avatarSize  || 'md';
      b.dataset.avatarShape= ap.avatarShape || 'circle';
      b.dataset.avatarPos  = ap.avatarPos   || 'center';
      b.dataset.linkStyle  = ap.linkStyle   || 'pill';
      b.dataset.linkIcon   = (ap.linkShowIcon === false) ? 'false' : 'true';
      b.dataset.font       = ap.fontFamily  || 'inter';
      b.dataset.animations = (ap.enableAnimations === false) ? 'off' : 'on';
      b.dataset.avatarOverlap = (ap.avatarOverlap === true) ? 'true' : 'false';
      const accent = ap.accentColor || '#0071e3';
      b.style.setProperty('--pg-accent', accent);
      b.style.setProperty('--pg-accent-rgb', hexToRgb(accent));
      // Background override
      if (ap.bgType === 'solid' && ap.bgColor && ap.template !== 'brand') {
        b.style.setProperty('--pg-bg', ap.bgColor);
      }
      if (ap.bgType === 'gradient' && ap.bgGradient) {
        b.style.background = ap.bgGradient;
      }
      // Text color override
      if (ap.textColor) {
        b.style.setProperty('--pg-text', ap.textColor);
        b.style.setProperty('--pg-text2', `color-mix(in srgb, ${ap.textColor} 70%, transparent)`);
        b.style.setProperty('--pg-link-text', ap.textColor);
        b.style.setProperty('--pg-badge-text', ap.textColor);
      }
    }
    // ── Render profile ────────────────────────────
    function render(userData) {
      const {
        displayName, username, bio, photoURL, bannerURL,
        links = [], appearance = {}, coins, social = {}, verified = false, profileViews = 0
      } = userData;
      applyAppearance(appearance);
      document.title = `${displayName || username} | Syntiox`;
      const metaDesc = document.querySelector('meta[name="description"]');
      if (metaDesc) metaDesc.content = bio || `${displayName||username}'s profile on Syntiox`;
      const accent  = appearance.accentColor || '#0071e3';
      const pageUrl = `https://syntiox.top/u/${username}`;
      // 📊 Fire analytics view event (non-blocking)
      if (userData.uid) {
        fetch('https://account.syntiox.top/api/analytics', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ uid: userData.uid, type: 'view' }),
        }).catch(() => {});
      }
      // Social platforms config
      const SOCIAL_DEFS = [
        { id:'email',       icon:'fa-solid fa-envelope',       color:'#ea4335', prefix:'mailto:',                   fullValue:true  },
        { id:'phone',       icon:'fa-solid fa-phone',          color:'#25d366', prefix:'tel:',                      fullValue:true  },
        { id:'whatsapp',    icon:'fa-brands fa-whatsapp',      color:'#25d366', prefix:'https://wa.me/',            fullValue:false },
        { id:'telegram',    icon:'fa-brands fa-telegram',      color:'#0088cc', prefix:'https://t.me/',             fullValue:false },
        { id:'linkedin',    icon:'fa-brands fa-linkedin',      color:'#0077b5', prefix:'https://linkedin.com/',     fullValue:false },
        { id:'discord',     icon:'fa-brands fa-discord',       color:'#5865f2', prefix:'https://discord.com/users/',fullValue:false },
        { id:'youtube',     icon:'fa-brands fa-youtube',       color:'#ff0000', prefix:'https://youtube.com/',      fullValue:false },
        { id:'instagram',   icon:'fa-brands fa-instagram',     color:'#e1306c', prefix:'https://instagram.com/',    fullValue:false },
        { id:'twitter',     icon:'fa-brands fa-x-twitter',     color:'#000000', prefix:'https://x.com/',            fullValue:false },
        { id:'facebook',    icon:'fa-brands fa-facebook',      color:'#1877f2', prefix:'https://facebook.com/',     fullValue:false },
        { id:'bluesky',     icon:'fa-solid fa-cloud',          color:'#0085ff', prefix:'https://bsky.app/profile/', fullValue:false },
        { id:'threads',     icon:'fa-brands fa-threads',       color:'#000000', prefix:'https://threads.net/@',     fullValue:false },
        { id:'tiktok',      icon:'fa-brands fa-tiktok',        color:'#010101', prefix:'https://tiktok.com/',       fullValue:false },
        { id:'snapchat',    icon:'fa-brands fa-snapchat',      color:'#ffcc00', prefix:'https://snapchat.com/add/', fullValue:false },
        { id:'reddit',      icon:'fa-brands fa-reddit',        color:'#ff4500', prefix:'https://reddit.com/',       fullValue:false },
      ];
      const socialHtml = SOCIAL_DEFS.filter(s => social[s.id])
        .map(s => {
          const rawUrl = `${s.prefix}${social[s.id]}`;
          const safeUid = userData.uid || '';
          const redirectUrl = `https://account.syntiox.top/api/redirect?uid=${safeUid}&key=Social%3A%20${encodeURIComponent(s.label || s.id)}&url=${encodeURIComponent(rawUrl)}`;
          return `<a class="social-ic" href="${esc(redirectUrl)}" style="background:${s.color};" target="_blank" rel="noopener" title="${s.id}"><i class="${s.icon}"></i></a>`;
        }).join('');
      // Links HTML with server-side redirect tracking
      const linksHtml = links.length > 0 ? `
        <div class="links-section">
          ${links.map(link => {
            const {icon, color} = detectIcon(link.url, accent);
            const safeTitle = link.title || 'Untitled Link';
            const safeUid   = userData.uid || '';
            const redirectUrl = `https://account.syntiox.top/api/redirect?uid=${safeUid}&key=${encodeURIComponent(safeTitle)}&url=${encodeURIComponent(link.url)}`;
            return `
              <a class="link-item" href="${esc(redirectUrl)}" target="_blank" rel="noopener noreferrer">
                <span class="link-icon" style="background:${color};">
                  <i class="${icon}"></i>
                </span>
                <span class="link-title">${esc(safeTitle)}</span>
                <i class="fa-solid fa-chevron-right link-arrow"></i>
              </a>`;
          }).join('')}
        </div>` : '';
      // Short currency formatter (e.g. 1.5K, 50B)
      function formatShortCurrency(value) {
        if (!value) return "0";
        if (value >= 1e9) return (value / 1e9).toFixed(1).replace(/\.0$/, '') + 'B';
        if (value >= 1e6) return (value / 1e6).toFixed(1).replace(/\.0$/, '') + 'M';
        if (value >= 1e3) return (value / 1e3).toFixed(1).replace(/\.0$/, '') + 'K';
        return Number(value).toFixed(2).replace(/\.00$/, ''); // show max 2 decimal places if less than 1K
      }
      // Stats (wallet, coins, views)
      const showViews = appearance.showViewCount !== false;
      const showWallet = appearance.showWalletBalance === true;
      const showCoins = appearance.showCoinsBalance !== false;
      const viewsVal  = userData.profileViews || 0;
      const walletVal = userData.wallet_balance || 0;
      // We do not highlight "USD $" here since the user clarified that's for receipts only.
      const walletFormatted = `USD $${formatShortCurrency(walletVal)}`;
      const statsHtml = ((coins != null && showCoins) || showViews || showWallet) ? `
        <div class="profile-stats">
          ${showWallet ? `<div class="stat-item"><div class="stat-value">${walletFormatted}</div><div class="stat-label">Balance</div></div>` : ''}
          ${(coins != null && showCoins) ? `<div class="stat-item"><div class="stat-value">💰 ${formatShortCurrency(coins)}</div><div class="stat-label">Coins</div></div>` : ''}
          ${showViews ? `<div class="stat-item"><div class="stat-value"><i class="fa-solid fa-eye"></i> ${formatShortCurrency(viewsVal)}</div><div class="stat-label">Views</div></div>` : ''}
        </div>` : '';
      // Verified badge
      const verifiedBadge = verified
        ? `<span class="verified-badge" title="Verified"><i class="fa-solid fa-check"></i></span>`
        : '';
      // Banner
      const bannerHtml = bannerURL
        ? `<img class="profile-banner" src="${esc(bannerURL)}" alt="Banner" referrerpolicy="no-referrer" />`
        : '';
      // Check if owner (via localStorage uid match)
      const storedUid = localStorage.getItem('syntiox_uid');
      const isOwner   = storedUid && userData.uid === storedUid;
      const editBtn   = isOwner
        ? `<div class="edit-profile-bar"><a class="edit-profile-btn" href="https://account.syntiox.top"><i class="fa-solid fa-pencil"></i> Edit Profile</a></div>`
        : '';
      const hasBanner = !!bannerURL;
      document.getElementById('root').innerHTML = `
        ${bannerHtml}
        <div class="page-wrap${hasBanner ? ' has-banner' : ''}">
          <div class="profile-card">
            ${editBtn}
            <div class="profile-header">
              <div class="avatar-wrap">
                <img class="avatar"
                  src="${photoURL || defaultAvatar(displayName)}"
                  alt="${esc(displayName || username)}"
                  referrerpolicy="no-referrer"
                />
                <div class="avatar-ring"></div>
              </div>
              <h1 class="display-name">${esc(displayName || username || 'User')}${verifiedBadge}</h1>
              ${username  ? `<p class="username-handle">@${esc(username)}</p>` : ''}
              ${bio       ? `<p class="bio">${esc(bio)}</p>` : ''}
              ${statsHtml}
            </div>
            ${socialHtml ? `
            <div class="social-row-wrap">
              <div class="social-icons-row">${socialHtml}</div>
            </div>` : ''}
            <div class="share-bar">
              <button class="share-btn" id="btn-copy-link">
                <i class="fa-solid fa-link"></i> Copy Link
              </button>
              ${navigator.share
                ? `<button class="share-btn" id="btn-share"><i class="fa-solid fa-arrow-up-from-bracket"></i> Share</button>`
                : ''}
            </div>
            ${linksHtml}
          </div>
        </div>
        <div class="syntiox-badge">
          <a href="https://syntiox.top" target="_blank" rel="noopener">
            <img src="https://syntiox.top/assets/logo-IcotzT0R.png" alt="Syntiox" />
            Built with Syntiox
          </a>
        </div>
      </div>`;
      // Share handlers
      document.getElementById('btn-copy-link').addEventListener('click', () => {
        navigator.clipboard.writeText(pageUrl).then(() => {
          const btn = document.getElementById('btn-copy-link');
          const orig = btn.innerHTML;
          btn.innerHTML = '<i class="fa-solid fa-check"></i> Copied!';
          setTimeout(() => btn.innerHTML = orig, 2200);
        }).catch(()=>{});
      });
      if (navigator.share) {
        document.getElementById('btn-share')?.addEventListener('click', () =>
          navigator.share({ title: `${displayName}'s profile`, url: pageUrl })
        );
      }
    }
    function renderError(code, msg) {
      document.getElementById('root').innerHTML = `
        <div class="page-wrap">
          <div class="profile-card">
            <div class="error-box">
              <div class="error-code">${code}</div>
              <p>${msg}</p>
              <a href="https://syntiox.top">← Syntiox</a>
            </div>
          </div>
        </div>`;
    }
    // ── Entry ─────────────────────────────────────
    async function main() {
      const params    = new URLSearchParams(window.location.search);
      const pathMatch = window.location.pathname.match(/^\/u\/([^/]+)/);
      const handle    = (pathMatch && pathMatch[1]) || params.get('handle') || params.get('u') || '';
      if (!handle) { renderError('404','No username specified.'); return; }
      try {
        const db    = firebase.firestore();
        const uSnap = await db.collection('usernames').doc(handle.toLowerCase()).get();
        if (!uSnap.exists) { renderError('404',`@${esc(handle)} doesn't exist on Syntiox.`); return; }
        const snap = await db.collection('users').doc(uSnap.data().uid).get();
        if (!snap.exists)               { renderError('404','Profile not found.'); return; }
        if (snap.data().isPublic === false) { renderError('🔒','This profile is private.'); return; }
        render({ ...snap.data(), uid: snap.id });
      } catch(err) {
        console.error('[Profile]', err);
        renderError('⚠','Could not load profile. Try again later.');
      }
    }
    document.readyState === 'loading'
      ? document.addEventListener('DOMContentLoaded', main)
      : main();
  })();
  </script>
</body>
</html>