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" / >
2025-06-21 02:39:33 -06:00
< title > Rexburg Mesh – < / title >
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" >
2025-06-21 02:39:33 -06:00
< a href = "/" class = "text-xl font-semibold mr-4" > BYU-I Amateur Radio Society< / a >
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" >
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.
2025-06-20 13:09:18 -06:00
< / p >
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 >
< 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 >
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
2025-06-21 02:39:33 -06:00
src="https://www.google.com/maps/d/u/1/embed?mid=1P5dIeUwP6589f-JT1CaLcsottrrgGRM& ehbc=2E312F"
2025-06-20 13:09:18 -06:00
width="100%"
2025-06-21 02:39:33 -06:00
height="560"
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" >
© < 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 >
