Josh47_WebDev/byuiars-reop-net
1
1
Fork 0
Code Issues Pull Requests Activity

Initial Page

Browse Source
This commit is contained in:
Joshua L3
2025-06-20 12:53:20 -06:00
commit 9168f0ac9c
3 changed files with 98 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
assets/banner.json Normal file
View File

@@ -0,0 +1,4 @@
{
"title": "Field Day - July 28th",
"content": "Join us at the pavilion at the stake center adjacent to the temple from 11AM - 3:30PM!"
}

7
assets/pages.json Normal file
View File

@@ -0,0 +1,7 @@
[
{ "name": "Home", "path": "/" },
{ "name": "Exams", "path": "/exams.html" },
{ "name": "Net Check-Ins", "path": "/net/index.html" },
{ "name": "Meshtastic", "path": "/mesh/index.html" },
{ "name": "History", "path": "/history.html" }
]

87
index.html Normal file
View File

@@ -0,0 +1,87 @@
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BYU-Idaho Amateur Radio Society</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.4.1/base.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<script src="https://cdn.tailwindcss.com"></script>
<script>
// Dark mode persistence
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>
<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 flex justify-between items-center shadow-md">
<a href="/" class="text-xl font-semibold">BYUIARS</a>
<ul class="flex space-x-4">
<template x-for="page in pages" :key="page.path">
<li>
<a :href="page.path"
:class="{ 'font-bold underline': currentPath === page.path }"
class="hover:opacity-80 transition">
<span x-text="page.name"></span>
</a>
</li>
</template>
</ul>
<!-- Dark mode toggle -->
<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>
</nav>
<!-- Main Content -->
<main class="flex-grow p-6">
<h1 class="text-3xl font-bold mb-4">Welcome to the BYU-Idaho Amateur Radio Society</h1>
<p>This is a placeholder for your page content. Replace this with your actual content per page.</p>
</main>
<!-- Footer -->
<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');
this.banner = await bannerResp.json();
},
toggleDarkMode() {
this.darkMode = !this.darkMode;
document.documentElement.classList.toggle('dark');
localStorage.theme = this.darkMode ? 'dark' : 'light';
}
}
}
</script>
</body>
</html>