links

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AYVEN - Link In Bio</title>
  
  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-DBF3DLJL2H"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-DBF3DLJL2H');
  </script>

  <!-- Import Fonts -->
  <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:wght@400;500;700;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
  
  <!-- Tailwind CSS CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  
  <style>
    /* --- WINDOWS 95 RETRO THEME CONFIGURATION --- */
    :root {
      --desktop-bg: #008080; 
      --win-face: #c0c0c0;
      --win-text: #000000;
      --title-bg: #000080;
      --title-bg-inactive: #808080;
      --title-text: #ffffff;
      --title-text-inactive: #c0c0c0;
      --border-light: #ffffff;
      --border-dark: #000000;
      --border-mid: #808080;
    }

    /* Override WordPress default margins and display */
    body, html, .wp-site-blocks, .is-layout-flow, .is-layout-constrained, .entry-content, .post-inner { 
      max-width: 100% !important; 
      width: 100% !important;
      padding: 0 !important; 
      margin: 0 !important; 
      background-color: var(--desktop-bg) !important;
    }

    /* Hide standard headers/footers to create an immersive bio experience */
    header, footer, .entry-header, .entry-title, .wp-block-post-title, .site-header, .site-footer {
      display: none !important;
    }

    /* Retro Font Smoothing Reset */
    body, button, input, select, .link-in-bio-container {
      -webkit-font-smoothing: none !important;
      -moz-osx-font-smoothing: none !important;
      text-rendering: optimizeSpeed !important;
      font-family: 'MS Sans Serif', 'Tahoma', 'Geneva', sans-serif !important;
    }

    .link-in-bio-container {
      background-color: var(--desktop-bg);
      color: var(--win-text);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 24px 16px 64px 16px;
      box-sizing: border-box;
      min-height: 100vh;
      width: 100%;
    }

    /* --- AUTHENTIC WIN95 BEVELS --- */
    .win-outset {
      background: var(--win-face);
      border-top: 2px solid var(--border-light);
      border-left: 2px solid var(--border-light);
      border-right: 2px solid var(--border-dark);
      border-bottom: 2px solid var(--border-dark);
      box-shadow: inset -1px -1px var(--border-mid), inset 1px 1px #dfdfdf;
    }

    .win-inset {
      background: #ffffff;
      border-top: 2px solid var(--border-mid);
      border-left: 2px solid var(--border-mid);
      border-right: 2px solid var(--border-light);
      border-bottom: 2px solid var(--border-light);
      box-shadow: inset 1px 1px var(--border-dark), inset -1px -1px #dfdfdf;
    }

    /* --- WINDOW STRUCTURES --- */
    .window {
      width: 100%;
      padding: 3px;
      box-sizing: border-box;
    }

    .title-bar {
      background: var(--title-bg);
      color: var(--title-text);
      padding: 3px 6px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: bold;
      font-size: 13px;
      letter-spacing: 0.5px;
      margin-bottom: 2px;
      user-select: none;
    }

    .title-btn {
      width: 16px;
      height: 14px;
      background: var(--win-face);
      border-top: 1px solid var(--border-light);
      border-left: 1px solid var(--border-light);
      border-right: 1px solid var(--border-dark);
      border-bottom: 1px solid var(--border-dark);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 10px;
      font-weight: bold;
      color: var(--win-text);
      cursor: pointer;
      box-shadow: inset -1px -1px var(--border-mid);
      user-select: none;
    }

    .title-btn:active {
      border-top: 1px solid var(--border-dark);
      border-left: 1px solid var(--border-dark);
      border-right: 1px solid var(--border-light);
      border-bottom: 1px solid var(--border-light);
      box-shadow: inset 1px 1px var(--border-mid);
      padding-top: 1px;
      padding-left: 1px;
    }

    .window-content { 
      padding: 10px; 
    }

    /* --- REUSABLE BUTTONS --- */
    .btn-link {
      text-decoration: none;
      color: var(--win-text) !important;
      display: flex;
      align-items: center;
      padding: 6px 10px;
      font-weight: bold;
      font-size: 14px;
      cursor: pointer;
      box-sizing: border-box;
      background: var(--win-face);
      user-select: none;
    }

    .btn-link:active {
      border-top: 2px solid var(--border-dark);
      border-left: 2px solid var(--border-dark);
      border-right: 2px solid var(--border-light);
      border-bottom: 2px solid var(--border-light);
      box-shadow: inset 1px 1px var(--border-mid);
      padding: 7px 9px 5px 11px;
    }

    .btn-small {
      justify-content: center;
      width: auto;
      min-width: 100px;
      font-size: 12px;
      padding: 4px 12px;
    }

    .notepad-content {
      padding: 12px;
      font-family: 'Courier New', Courier, monospace !important; 
      font-size: 13px;
      line-height: 1.4;
      overflow-y: auto;
    }

    .show-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      border-bottom: 1px dotted var(--border-mid);
      padding-bottom: 8px;
      gap: 10px;
    }

    .show-row a { 
      color: #0000ff !important; 
      text-decoration: underline;
      font-weight: bold;
    }

    /* Flashing Windows 95-style ticket button. */
    .ticket-button {
      color: var(--win-text) !important;
      text-decoration: none !important;
      white-space: nowrap;
      animation: ticket-flash 1.15s steps(1, end) infinite;
    }

    @keyframes ticket-flash {
      0%, 48% {
        background: var(--win-face);
        color: var(--win-text) !important;
        outline: 1px dotted var(--win-text);
        outline-offset: -4px;
      }
      49%, 100% {
        background: var(--title-bg);
        color: var(--title-text) !important;
        outline: 1px dotted var(--title-text);
        outline-offset: -4px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .ticket-button {
        animation: none;
      }
    }

    .social-grid {
      display: flex;
      justify-content: space-between;
      gap: 10px;
    }

    .social-sq {
      flex: 1;
      height: 48px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      font-weight: bold;
    }

   

    /* Animation effects */
    @keyframes spin-slow {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    .spin-slow {
      animation: spin-slow 12s linear infinite;
    }
  </style>
</head>
<body>

  <div class="link-in-bio-container">
    
    <!-- 1. HEADER LOGO AREA -->
    <div class="w-full max-w-[420px] mb-2 mt-0 flex flex-col items-center">

      <!-- LOGO IMAGE -->
      <img id="logo-image" src="https://ayvenmusic.com/wp-content/uploads/2026/06/ayvenlogo1-nobg-cropped.png" alt="AYVEN" class="max-w-[220px] h-auto object-contain select-none" onerror="this.style.display='none'">

    </div>

    <!-- MAIN SINGLE COLUMN CONTAINER -->
    <div class="w-full max-w-[420px] flex flex-col gap-4">
      
      <!-- 2. LISTEN TO NEW SONG WINDOW -->
      <div class="window win-outset">
        <div class="title-bar">
          <span class="flex items-center gap-1.5 select-none font-sans">
            <span class="spin-slow">đŸ’ŋ</span>
            <span>listen to my music !</span>
          </span>
          <div class="title-btn" onclick="playClick()">✕</div>
        </div>
        
        <div class="window-content bg-[#dfdfdf] p-3 flex flex-col gap-3">
          <div class="flex gap-3">
            <!-- Cover Art Box -->
            <img src="https://ayvenmusic.com/wp-content/uploads/2026/06/November-Album-Art.jpg" alt="Cover Art" class="w-[80px] h-[80px] win-inset border border-gray-400 object-cover flex-shrink-0">

            <!-- Static Song details -->
            <div class="flex-grow flex flex-col justify-between font-mono text-[11px] text-black">
              <div>
                <h3 class="text-xs font-bold text-[#000080] border-b border-gray-400 pb-0.5 mb-1 font-sans">
                  SONG DETAILS
                </h3>
                <div class="grid grid-cols-2 gap-x-1 gap-y-0.5 leading-tight">
                  <span class="text-zinc-600">TITLE:</span>
                  <span class="font-bold text-pink-600">NOVEMBER</span>

                  <span class="text-zinc-600">LENGTH:</span>
                  <span class="font-bold">3:35</span>

                  <span class="text-zinc-600">RELEASED:</span>
                  <span class="font-bold text-teal-700">Sept 2025</span>
                </div>
              </div>
            </div>
          </div>

          <!-- Platform Streaming Buttons -->
          <div class="flex flex-col gap-2 mt-1 font-sans">
            <a href="https://open.spotify.com/artist/4sgvvCIHF6QY9jJIsaWDA2?si=E_zHAJbrQnam0ftz929y5w" target="_blank" rel="noopener" class="btn-link win-outset flex items-center justify-between hover:bg-[#c6c6c6]" onclick="playClick()">
              <span class="flex items-center gap-2">
                <img src="https://ayvenmusic.com/wp-content/uploads/2026/06/Spotify_Pixel-removebg-preview_clean.png" alt="Spotify" class="w-5 h-5 object-contain pixel-icon">
                <span class="text-xs font-bold">SPOTIFY</span>
              </span>
              <span class="text-zinc-500 flex items-center">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
                  <polyline points="15 3 21 3 21 9"></polyline>
                  <line x1="10" y1="14" x2="21" y2="3"></line>
                </svg>
              </span>
            </a>

            <a href="https://music.apple.com/us/artist/ayven/1803990083" target="_blank" rel="noopener" class="btn-link win-outset flex items-center justify-between hover:bg-[#c6c6c6]" onclick="playClick()">
              <span class="flex items-center gap-2">
                <img src="https://ayvenmusic.com/wp-content/uploads/2026/06/Apple_Music_Pixel-removebg-preview_clean.png" alt="Apple Music" class="w-5 h-5 object-contain pixel-icon">
                <span class="text-xs font-bold">APPLE MUSIC</span>
              </span>
              <span class="text-zinc-500 flex items-center">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
                  <polyline points="15 3 21 3 21 9"></polyline>
                  <line x1="10" y1="14" x2="21" y2="3"></line>
                </svg>
              </span>
            </a>

            <a href="https://music.youtube.com/@ayvenmusic" target="_blank" rel="noopener" class="btn-link win-outset flex items-center justify-between hover:bg-[#c6c6c6]" onclick="playClick()">
              <span class="flex items-center gap-2">
                <img src="https://ayvenmusic.com/wp-content/uploads/2026/06/YT_Music_Pixel-removebg-preview_clean.png" alt="YouTube Music" class="w-5 h-5 object-contain pixel-icon">
                <span class="text-xs font-bold">YOUTUBE MUSIC</span>
              </span>
              <span class="text-zinc-500 flex items-center">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
                  <polyline points="15 3 21 3 21 9"></polyline>
                  <line x1="10" y1="14" x2="21" y2="3"></line>
                </svg>
              </span>
            </a>

            <a href="https://hyperfollow.com/ayvenmusic" target="_blank" rel="noopener" class="btn-link win-outset flex items-center justify-between hover:bg-[#c6c6c6]" onclick="playClick()">
              <span class="flex items-center gap-2">
                <span>🔷</span>
                <span class="text-xs font-bold">LISTEN ON OTHER</span>
              </span>
              <span class="text-zinc-500 flex items-center">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
                  <polyline points="15 3 21 3 21 9"></polyline>
                  <line x1="10" y1="14" x2="21" y2="3"></line>
                </svg>
              </span>
            </a>
          </div>
        </div>
      </div>

      <!-- 3. UPCOMING SHOWS NOTEPAD WINDOW -->
      <div class="window win-outset">
        <div class="title-bar">
          <span class="flex items-center gap-1.5 select-none font-sans">📄 UPCOMING_SHOWS.txt</span>
          <div class="title-btn" onclick="playClick()">✕</div>
        </div>
        <div class="window-content bg-white p-0">
          
          <!-- Notepad Menu Interface -->
          <div class="flex items-center gap-3 bg-[#dfdfdf] border-b border-gray-400 px-2 py-1 text-xs select-none font-sans">
            <span class="hover:bg-blue-800 hover:text-white px-1 cursor-pointer">File</span>
            <span class="hover:bg-blue-800 hover:text-white px-1 cursor-pointer">Edit</span>
            <span class="hover:bg-blue-800 hover:text-white px-1 cursor-pointer">Search</span>
            <span class="hover:bg-blue-800 hover:text-white px-1 cursor-pointer">Help</span>
          </div>
          
          <div class="notepad-content win-inset">
            <div>
              <div class="text-[11px] text-[#000080] font-sans font-bold border-b border-gray-300 pb-1.5 mb-2 select-none">
                📄 SHOW_DATES.TXT
              </div>
              <div class="flex flex-col gap-2 font-mono text-xs text-black">
                
                <div class="show-row" style="margin-bottom: 0;">
                  <div class="flex flex-col">
                    <span class="font-bold">THURSDAY, OCTOBER 22 - THE VIPER ROOM</span>
                    <span class="text-gray-500 text-[10px]">HOLLYWOOD, CA</span>
                  </div>
                  <!-- TICKET LINK PLACEHOLDER:
                       Replace href="#" with the real ticket URL, then remove
                       "event.preventDefault();" from onclick. -->
                  <a href="#" data-ticket-url="PASTE_TICKET_URL_HERE" class="ticket-button font-bold border border-[#808080] px-2 py-1 win-outset text-xs text-center" onclick="event.preventDefault(); playClick();">GET TIX</a>
                </div>

              </div>
            </div>
          </div>

        </div>
      </div>

      <!-- 4. BUY MERCH WINDOW -->
      <div class="window win-outset hidden" aria-hidden="true">
        <div class="title-bar">
          <span class="flex items-center gap-1.5 select-none font-sans">🛒 BUY_MERCH.exe</span>
          <div class="title-btn" onclick="playClick()">✕</div>
        </div>
        <div class="window-content bg-[#dfdfdf] p-3 font-sans">
          
          <!-- Folder Explorer Directory bar -->
          <div class="flex items-center gap-2 bg-[#dfdfdf] border-b border-gray-400 p-1 mb-3 text-xs select-none">
            <span class="text-gray-500 font-bold ml-1">Address:</span>
            <div class="win-inset bg-white px-2 py-0.5 flex-grow font-mono flex items-center gap-1.5 text-gray-700">
              <span>📁 C:\AYVEN_STORE\CATALOG</span>
            </div>
          </div>

          <div class="flex flex-col gap-3">
            
            <!-- Item 1: Cassette -->
            <a href="https://wordpress.org" target="_blank" rel="noopener" class="win-outset p-3 bg-[#dfdfdf] hover:bg-[#d5d5d5] flex justify-between items-center gap-3 transition-colors cursor-pointer text-left block" style="text-decoration: none;" onclick="playClick()">
              <div class="flex items-center gap-4 w-full">
                <div class="w-16 h-16 win-inset bg-black flex items-center justify-center text-3xl flex-shrink-0">
                  đŸ“ŧ
                </div>
                <div class="flex flex-col">
                  <span class="font-bold text-xs text-black block">LIMITED EDITION CASSETTE</span>
                  <span class="text-[10px] font-mono text-zinc-600 mt-1 block">PRICE: $14.99</span>
                  <span class="text-[9px] font-bold text-blue-700 hover:underline mt-1 block">CLICK TO PREVIEW ITEM →</span>
                </div>
              </div>
            </a>

            <!-- Item 2: Tee -->
            <a href="https://wordpress.org" target="_blank" rel="noopener" class="win-outset p-3 bg-[#dfdfdf] hover:bg-[#d5d5d5] flex justify-between items-center gap-3 transition-colors cursor-pointer text-left block" style="text-decoration: none;" onclick="playClick()">
              <div class="flex items-center gap-4 w-full">
                <div class="w-16 h-16 win-inset bg-black flex items-center justify-center text-3xl flex-shrink-0">
                  👕
                </div>
                <div class="flex flex-col">
                  <span class="font-bold text-xs text-black block">CYBERPUNK NEON LOGO TEE</span>
                  <span class="text-[10px] font-mono text-zinc-600 mt-1 block">PRICE: $24.99</span>
                  <span class="text-[9px] font-bold text-blue-700 hover:underline mt-1 block">CLICK TO PREVIEW ITEM →</span>
                </div>
              </div>
            </a>

            <!-- Item 3: Sticker Pack -->
            <a href="https://wordpress.org" target="_blank" rel="noopener" class="win-outset p-3 bg-[#dfdfdf] hover:bg-[#d5d5d5] flex justify-between items-center gap-3 transition-colors cursor-pointer text-left block" style="text-decoration: none;" onclick="playClick()">
              <div class="flex items-center gap-4 w-full">
                <div class="w-16 h-16 win-inset bg-black flex items-center justify-center text-3xl flex-shrink-0">
                  đŸŽŸī¸
                </div>
                <div class="flex flex-col">
                  <span class="font-bold text-xs text-black block">HOLOGRAPHIC STICKER PACK</span>
                  <span class="text-[10px] font-mono text-zinc-600 mt-1 block">PRICE: $4.99</span>
                  <span class="text-[9px] font-bold text-blue-700 hover:underline mt-1 block">CLICK TO PREVIEW ITEM →</span>
                </div>
              </div>
            </a>

            <!-- VIEW FULL SHOP RED BUTTON -->
            <a href="/shop" target="_blank" rel="noopener" class="win-outset w-full py-2.5 text-center flex justify-center items-center text-white font-bold text-xs hover:bg-red-700 mt-1" style="background-color: #ff0000; color: white !important; text-decoration: none;" onclick="playClick()">
              <span>VIEW FULL SHOP</span>
            </a>

          </div>
        </div>
      </div>

      <!-- 5. BIOGRAPHY WINDOW -->
      <div class="window win-outset hidden" aria-hidden="true">
        <div class="title-bar">
          <span class="flex items-center gap-1.5 select-none font-sans">â„šī¸ ABOUT_ME.txt</span>
          <div class="title-btn" onclick="playClick()">✕</div>
        </div>
        <div class="window-content bg-white p-3 font-mono text-xs">
          <p class="font-bold text-[#000080] mb-2 border-b pb-1 select-none font-sans">
            📁 BLOG_001.TXT
          </p>
          <p class="leading-relaxed text-gray-800">
            Ayven's about me goes here!
          </p>
          <div class="border-t border-gray-200 mt-3 pt-2 text-[10px] text-gray-500 flex justify-between select-none font-sans">
            <span>EST: 2025</span>
            <span>BASED: LOS ANGELES</span>
          </div>
        </div>
      </div>

      <!-- 6. SOCIAL BUTTONS GRID -->
      <div class="social-grid font-sans">
        <a href="https://www.instagram.com/ayven.music/?hl=en" target="_blank" rel="noopener" class="btn-link social-sq win-outset hover:bg-[#d5d5d5]" onclick="playClick()">
          <img src="https://ayvenmusic.com/wp-content/uploads/2026/06/Insta_Pixel-removebg-preview_clean.png" alt="Instagram" class="w-6 h-6 object-contain pixel-icon">
        </a>
        <a href="https://www.youtube.com/@ayvenmusic" target="_blank" rel="noopener" class="btn-link social-sq win-outset hover:bg-[#d5d5d5]" onclick="playClick()">
          <img src="https://ayvenmusic.com/wp-content/uploads/2026/06/YT_Pixel-removebg-preview_clean.png" alt="YouTube" class="w-6 h-6 object-contain pixel-icon">
        </a>
        <a href="https://ko-fi.com/ayvenmusic" target="_blank" rel="noopener" class="btn-link social-sq win-outset hover:bg-[#d5d5d5]" onclick="playClick()">
          <img src="https://ayvenmusic.com/wp-content/uploads/2026/06/KoFi_Pixel-removebg-preview_clean.png" alt="Ko-Fi" class="w-6 h-6 object-contain pixel-icon">
        </a>
      </div>

      <!-- 7. ERROR MESSAGE / SOUNDCLOUD WINDOW -->
      <div class="window win-outset">
        <div class="title-bar">
          <span class="select-none font-sans">Error: end of page</span>
          <div class="title-btn" onclick="playClick()">✕</div>
        </div>
        <div class="window-content bg-[#dfdfdf] p-4 font-sans">
          <div class="flex flex-col items-center justify-center gap-2 text-center w-full">
            <div class="w-9 h-9 bg-red-600 text-white rounded-full flex items-center justify-center font-bold text-xl select-none border-2 border-white shadow mb-1">
              ✕
            </div>
            <div class="flex flex-col items-center">
              <h3 class="m-0 mb-1.5 text-xs font-bold uppercase text-[#000080]">
                SECRET DEMOS
              </h3>
              <a href="https://soundcloud.com/a-a-272836168" target="_blank" rel="noopener" class="btn-link btn-small win-outset text-[11px] px-5 py-1 hover:bg-[#c6c6c6]" style="text-decoration: none;" onclick="playClick()">
                SOUNDCLOUD
              </a>
            </div>
          </div>
        </div>
      </div>

    </div>

    <!-- FOOTER SIGNATURE -->
    <div class="text-[10px] font-mono text-zinc-300 select-none text-center mt-6 flex flex-col gap-0.5">
      <span>Š 2026 AYVEN. ALL RIGHTS RESERVED.</span>
    </div>

  </div>

  <!-- Satisfying Retro Audio Engine (Standard Web Audio API) -->
  <script>
    let audioCtx = null;

    function getAudioContext() {
      if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      }
      return audioCtx;
    }

    function playClick() {
      try {
        const ctx = getAudioContext();
        if (ctx.state === 'suspended') {
          ctx.resume();
        }

        // Quick retro click chime
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.connect(gain);
        gain.connect(ctx.destination);

        osc.type = 'sine';
        osc.frequency.setValueAtTime(1200, ctx.currentTime);
        osc.frequency.exponentialRampToValueAtTime(300, ctx.currentTime + 0.05);

        gain.gain.setValueAtTime(0.08, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.05);

        osc.start();
        osc.stop(ctx.currentTime + 0.05);
      } catch (e) {
        console.log("Audio not allowed yet");
      }
    }

    // Play Startup Chime on first interaction
    window.addEventListener('click', () => {
      try {
        const ctx = getAudioContext();
        if (ctx.state === 'suspended') {
          ctx.resume();
        }
      } catch(e) {}
    }, { once: true });

    // Google Analytics Outbound Link Tracking
    document.addEventListener('DOMContentLoaded', () => {
      const allLinks = document.querySelectorAll('a');
      allLinks.forEach(link => {
        link.addEventListener('click', (e) => {
          const url = link.getAttribute('href');
          
          // Only track external links
          if (url && url.startsWith('http')) {
            if (typeof gtag === 'function') {
              gtag('event', 'outbound_link_click', {
                'link_url': url,
                'link_text': link.innerText.trim().replace(/\s+/g, ' ').substring(0, 50) || 'Image/Icon Link'
              });
            }
          }
        });
      });
    });
  </script>

</body>
</html>
Scroll to Top