footer.njk

<footer class="mt-20 border-t border-[var(--border-color)] bg-[var(--bg-footer)] py-12">
  <div class="max-w-7xl mx-auto px-4 flex flex-col md:flex-row justify-between items-center gap-8">

    <div class="flex flex-col items-center md:items-start text-center md:text-left">
      <p class="text-[var(--text-main)] font-bold text-sm uppercase tracking-widest">
        Developer Directory
      </p>

        <p class="mt-1 text-[var(--text-muted)] text-[10px] font-mono uppercase tracking-[0.15em]">
          &copy; <span id="current-year">{% currentYear %}</span> Built with
          <span id="footer-heart" class="transition-colors duration-500">❤️</span>
          by the Open-Source Community
        </p>

      <div class="flex items-center justify-center md:justify-start gap-3 mt-4">
        <a href="https://www.11ty.dev/" target="_blank" class="text-[10px] font-bold px-2 py-1 rounded bg-[var(--bg-card)] border border-[var(--border-color)] text-[var(--text-muted)] hover:text-accent transition-all">🎈 11ty</a>
        <a href="https://tailwindcss.com/" target="_blank" class="text-[10px] font-bold px-2 py-1 rounded bg-[var(--bg-card)] border border-[var(--border-color)] text-[var(--text-muted)] hover:text-accent transition-all">🌊 Tailwind</a>
      </div>
    </div>

    <div class="flex flex-col items-center md:items-end gap-2">
      <div class="flex items-center gap-3">
        <span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
        <span class="text-[var(--text-muted)] text-[10px] font-black uppercase tracking-widest">Build: {{ build.timestamp }}</span>
      </div>

     <div class="flex items-center bg-[var(--bg-card)] border border-[var(--border-color)] rounded-lg overflow-hidden shadow-sm">
      <button onclick="triggerSecretUnlock('gravity')" class="px-3 py-1.5 text-[10px] font-mono hover:bg-red-500/10 transition-colors group/hash">
        <span class="text-[var(--text-muted)] group-hover/hash:text-red-500">Hash:</span>
        <span class="text-accent font-bold underline decoration-dotted">
          <code class="cursor-pointer hover:text-red-500 transition-colors">{{ build.hash }}</code>
        </span>
      </button>

      <a href="{{ build.repoUrl }}/commit/{{ build.hash }}"
         target="_blank"
         rel="noopener"
         class="px-3 py-1.5 border-l border-[var(--border-color)] bg-[var(--bg-footer)] hover:text-accent transition-colors"
         title="View Commit on GitHub">
        <span>↗</span>
      </a>
    </div>
    </div>

  </div>
</footer>

{% include "system-override.njk" %}

{% include "matrix-overlay.njk" %}

{% include "system-log.njk" %}

<script>
  // This turns your Eleventy data into a global JS constant
  const LEVELS = {{ levels | dump | safe }};
</script>

<script src="/assets/js/script.js"></script>