Josh47_WebDev/byuiars-reop-net
1
1
Fork 0
Code Issues Pull Requests Activity
Files
37ed2e1212a63f7d52ea6a57ea40d6a84c6aaeb8
byuiars-reop-net/mesh/index.html
T

134 lines
6.3 KiB
HTML
Raw Normal View History

Implemented Dark Mode and revised Nav Bar
2025-06-20 13:09:18 -06:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Added info about MediumFast
2026-01-20 15:56:41 -08:00
<title>Rexburg Mesh - BYU-I Amateur Radio Society</title>
Implemented Dark Mode and revised Nav Bar
2025-06-20 13:09:18 -06:00
<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">
Created the rest of the pages and proofread. Staging for production
2025-06-21 02:39:33 -06:00
<a href="/" class="text-xl font-semibold mr-4">BYU-I Amateur Radio Society</a>
Implemented Dark Mode and revised Nav Bar
2025-06-20 13:09:18 -06:00
<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">Rexburg Meshtastic Network</h1>
<p class="mb-4">
Created the rest of the pages and proofread. Staging for production
2025-06-21 02:39:33 -06:00
The BYU-I Amateur Radio Society is working on a Rexburg Meshtastic network! This is a low-power, long-range mesh radio network using LoRa devices to support off-grid communication. It is open for all to use and most nodes are designed to continue working in emergencies and extended power outages.
Implemented Dark Mode and revised Nav Bar
2025-06-20 13:09:18 -06:00
</p>
Created the rest of the pages and proofread. Staging for production
2025-06-21 02:39:33 -06:00
<h2 class="text-xl font-semibold mt-6 mb-2">How to Get Involved</h2>
<ul class="list-disc pl-6 space-y-2">
<li>Purchase a supported LoRa radio (many of our members go with the Heltec V3 or RAK 4631), or check one out at one of our weekly meetings</li>
<li>Flash the latest <a href="https://flasher.meshtastic.org/" class="text-blue-400 underline">Meshtastic firmware</a></li>
Added info about MediumFast
2026-01-20 15:56:41 -08:00
<li>Change your Modem Preset to MediumFast (but don't manually edit the frequency or channel numbers)</li>
Created the rest of the pages and proofread. Staging for production
2025-06-21 02:39:33 -06:00
<li>Join our <a href="https://discord.gg/D9fZ6uWugH" class="text-blue-400 underline">Discord</a> to get help, share your setup, and connect with us</li>
<li>Get your node on the map (if it's stationary) by letting us know about it</li>
</ul>
Implemented Dark Mode and revised Nav Bar
2025-06-20 13:09:18 -06:00
<h2 class="text-xl font-semibold mt-6 mb-2">Current Node Map</h2>
<div class="aspect-w-16 aspect-h-9 mb-4">
<iframe
Created the rest of the pages and proofread. Staging for production
2025-06-21 02:39:33 -06:00
src="https://www.google.com/maps/d/u/1/embed?mid=1P5dIeUwP6589f-JT1CaLcsottrrgGRM&ehbc=2E312F"
Implemented Dark Mode and revised Nav Bar
2025-06-20 13:09:18 -06:00
width="100%"
Created the rest of the pages and proofread. Staging for production
2025-06-21 02:39:33 -06:00
height="560"
Implemented Dark Mode and revised Nav Bar
2025-06-20 13:09:18 -06:00
class="w-full rounded shadow-md"
loading="lazy"
allowfullscreen>
</iframe>
</div>
</main>
<footer class="accent-bg text-white text-center py-4">
Added info about MediumFast
2026-01-20 15:56:41 -08:00
&copy; 2025-<span x-text="new Date().getFullYear()"></span> BYU-Idaho Amateur Radio Society. All rights reserved.
Implemented Dark Mode and revised Nav Bar
2025-06-20 13:09:18 -06:00
</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();
Force banner updates
2025-07-02 14:39:15 -06:00
const bannerResp = await fetch('/assets/banner.json?t=${Date.now()}');
Implemented Dark Mode and revised Nav Bar
2025-06-20 13:09:18 -06:00
this.banner = await bannerResp.json();
},
toggleDarkMode() {
this.darkMode = !this.darkMode;
document.documentElement.classList.toggle('dark');
localStorage.theme = this.darkMode ? 'dark' : 'light';
}
}
}
</script>
</body>
</html>
Reference in New Issue Copy Permalink