history.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>History – BYU-I Amateur Radio Society</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class'
    }
  </script>
  <script>
    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
      document.documentElement.classList.add('dark')
    } else {
      document.documentElement.classList.remove('dark')
    }
  </script>
  <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
  <style>
    .accent-bg { background-color: #006eb6; }
    .banner-bg { background-color: #a2daff; }
  </style>
</head>
<body class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-100 min-h-screen flex flex-col" x-data="appData()" x-init="init()">

  <!-- Banner -->
  <template x-if="banner.title && banner.content">
    <div class="w-full banner-bg text-black text-center py-2 px-4">
      <strong x-text="banner.title"></strong>: <span x-text="banner.content"></span>
    </div>
  </template>

  <!-- Navbar -->
  <nav class="accent-bg text-white px-4 py-3 shadow-md" x-data="{ open: false }">
    <div class="flex flex-wrap items-center justify-between">
      <a href="/" class="text-xl font-semibold mr-4">BYU-I Amateur Radio Society</a>
      <button @click="open = !open" class="sm:hidden text-white ml-auto focus:outline-none">
        <svg x-show="!open" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
        <svg x-show="open" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
      <div class="hidden sm:flex flex-grow justify-center space-x-4">
        <template x-for="page in pages" :key="page.path">
          <a :href="page.path" :class="{ 'font-bold underline': currentPath === page.path }" class="hover:opacity-80 transition">
            <span x-text="page.name"></span>
          </a>
        </template>
      </div>
      <div class="hidden sm:flex ml-auto">
        <button @click="toggleDarkMode" class="ml-4 text-white focus:outline-none" title="Toggle dark mode">
          <svg x-show="!darkMode" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m8.66-8.66h-1M4.34 12H3m15.36 6.36l-.71-.71M6.34 6.34l-.71-.71m12.02 0l-.71.71M6.34 17.66l-.71.71M12 5a7 7 0 100 14 7 7 0 000-14z" />
          </svg>
          <svg x-show="darkMode" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12.79A9 9 0 1111.21 3a7 7 0 009.79 9.79z" />
          </svg>
        </button>
      </div>
    </div>
    <div x-show="open" class="sm:hidden mt-2 space-y-2">
      <template x-for="page in pages" :key="page.path">
        <a :href="page.path" :class="{ 'font-bold underline': currentPath === page.path }" class="block px-2 py-1 hover:bg-white/10">
          <span x-text="page.name"></span>
        </a>
      </template>
      <button @click="toggleDarkMode" class="w-full text-left px-2 py-1 text-white hover:bg-white/10" title="Toggle dark mode">
        <span x-text="darkMode ? '☀️ Light Mode' : '🌙 Dark Mode'"></span>
      </button>
    </div>
  </nav>

  <main class="flex-grow p-6">
    <h1 class="text-3xl font-bold mb-4">Our History</h1>

    <p class="mb-4">
      The BYU-Idaho Amateur Radio Society has a long-standing tradition of service, education, and community involvement. Our roots go back to Rick's College in the mid-1900s, and we're proud to still be here thriving today.
    </p>

    <p class="mb-4">
      This page is a work in progress — check back soon for a more detailed history of our club's leadership, milestones, and notable moments!
    </p>
  </main>

  <footer class="accent-bg text-white text-center py-4">
    &copy; <span x-text="new Date().getFullYear()"></span> BYU-Idaho Amateur Radio Society. All rights reserved.
  </footer>

  <script>
    function appData() {
      return {
        darkMode: document.documentElement.classList.contains('dark'),
        currentPath: window.location.pathname,
        banner: { title: '', content: '' },
        pages: [],
        async init() {
          const navResp = await fetch('/assets/pages.json');
          this.pages = await navResp.json();

          const bannerResp = await fetch('/assets/banner.json?t=${Date.now()}');
          this.banner = await bannerResp.json();
        },
        toggleDarkMode() {
          this.darkMode = !this.darkMode;
          document.documentElement.classList.toggle('dark');
          localStorage.theme = this.darkMode ? 'dark' : 'light';
        }
      }
    }
  </script>
</body>
</html>