jared/web
1
0
Fork 0
forked from ctmesh/web
Code Pull Requests Activity

changes & fixes. fewer buttons, fix scrolling issue with page top cut off, rejigger resources pages with resources on top, other minor cosmetics.

Browse Source
This commit is contained in:
Noah
2026-02-10 13:33:37 -05:00
parent 6acb31e2a9
commit bc23226733
4 changed files with 92 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored Normal file
View File

Binary file not shown.

141
index.html
View File

@ -6,14 +6,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<!-- Site Description & Keywords --> <!-- Site Description & Keywords -->
<meta name="description" content="A Connecticut Meshtastic User Group. Join the local community to connect, share, and explore with fellow enthusiasts."> <meta name="description" content="A Connecticut mesh technologies user group. Join the local community to connect, share, and explore with fellow enthusiasts.">
<meta name="keywords" content="CT Mesh, Meshtastic, Connecticut, CT, community, user group, Discord, map"> <meta name="keywords" content="CT Mesh, Meshtastic, MeshCore, Connecticut, CT, community, mesh networking, user group, Discord, map">
<meta name="author" content="CT Mesh"> <meta name="author" content="CT Mesh">
<link rel="shortcut icon" type="image/x-icon" href="favicon.png?3"> <link rel="shortcut icon" type="image/x-icon" href="favicon.png?3">
<!-- Open Graph / Facebook --> <!-- Open Graph / Facebook -->
<meta property="og:title" content="CT Mesh"> <meta property="og:title" content="CT Mesh">
<meta property="og:description" content="A Connecticut Meshtastic User Group. Join the local community to connect, share, and explore with fellow enthusiasts."> <meta property="og:description" content="A Connecticut mesh technologies user group. Join the local community to connect, share, and explore with fellow enthusiasts.">
<meta property="og:image" content="favicon.png?3"> <meta property="og:image" content="favicon.png?3">
<meta property="og:url" content="https://ctmesh.org"> <meta property="og:url" content="https://ctmesh.org">
<meta property="og:type" content="website"> <meta property="og:type" content="website">
@ -21,7 +21,7 @@
<!-- Twitter --> <!-- Twitter -->
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="CT Mesh"> <meta name="twitter:title" content="CT Mesh">
<meta name="twitter:description" content="A Connecticut Meshtastic User Group. Join the local community to connect, share, and explore with fellow enthusiasts."> <meta name="twitter:description" content="A Connecticut mesh technologies user group. Join the local community to connect, share, and explore with fellow enthusiasts.">
<meta name="twitter:image" content="favicon.png?3"> <meta name="twitter:image" content="favicon.png?3">
<!-- Fonts and Icons --> <!-- Fonts and Icons -->
@ -48,7 +48,7 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%; width: 100%;
height: 100%; min-height: 100%;
} }
body { body {
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
@ -77,9 +77,9 @@
background-color: #EBEBEB; background-color: #EBEBEB;
border-radius: 30px; border-radius: 30px;
padding: 3em 3em 2em 3em; padding: 3em 3em 2em 3em;
margin: 1em; margin: 2em;
width: min(100%, 900px); width: min(100%, 700px);
max-width: 900px; max-width: 700px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
color: #000000; color: #000000;
position: relative; position: relative;
@ -122,7 +122,7 @@
.btn { .btn {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 12px;
background-color: #67EA94; background-color: #67EA94;
color: #000000; color: #000000;
border: none; border: none;
@ -151,10 +151,38 @@
height: 30px; height: 30px;
filter: brightness(0); filter: brightness(0);
} }
.btn-discord { .btn-discord,
background-color: #7289da; .btn-discord:visited {
background-color: #5865F2;
color: #ffffff; color: #ffffff;
} }
.btn-discord img {
filter: brightness(0) invert(1);
}
.btn-meshcore,
.btn-meshcore:visited {
background-color: #2B3A4E;
color: #ffffff;
}
.btn-meshcore img {
filter: brightness(0) invert(1);
}
a.btn[target="_blank"]::after {
content: "";
width: 16px;
height: 16px;
margin-left: auto;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5L8.5 3.5M5 3.5h3.5V7'/%3E%3C/svg%3E") no-repeat center;
background-size: contain;
flex-shrink: 0;
opacity: 0.4;
}
.btn-discord::after {
display: none;
}
.btn-meshcore::after {
filter: invert(1) !important;
}
.btn-group { .btn-group {
display: flex; display: flex;
gap: 1em; gap: 1em;
@ -232,23 +260,20 @@
} }
.btn-group { .btn-group {
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: center;
} }
.section-title { .section-title {
text-align: center; text-align: center;
} }
.btn { .btn {
width: 100%; width: 340px;
justify-content: center; max-width: 100%;
justify-content: flex-start;
padding: 0.8em 1em; padding: 0.8em 1em;
font-size: 16px; font-size: 16px;
text-align: center; text-align: left;
max-width: 100%;
flex: none; flex: none;
} }
.btn-text {
align-items: center;
}
} }
/* Further adjustments for devices with a viewport width of 480px or less */ /* Further adjustments for devices with a viewport width of 480px or less */
@ -256,8 +281,6 @@
.splash-box { .splash-box {
padding: 1.5em; padding: 1.5em;
margin: 1em; margin: 1em;
width: 90%;
min-width: 250px;
} }
.logo { .logo {
width: 120px; width: 120px;
@ -282,7 +305,7 @@
<img src="logo_sm.png" alt="CT Mesh Logo" class="logo" /> <img src="logo_sm.png" alt="CT Mesh Logo" class="logo" />
<div class="text-content"> <div class="text-content">
<h1>CT Mesh</h1> <h1>CT Mesh</h1>
<p class="sub-header">Connecticut Meshtastic User Group</p> <p class="sub-header">Connecticut Mesh Technologies User Group</p>
<a href="mailto:noah@ctmesh.org" rel="nofollow noindex"><img src="email.svg" alt="Email" /></a> <a href="mailto:noah@ctmesh.org" rel="nofollow noindex"><img src="email.svg" alt="Email" /></a>
</div> </div>
</div> </div>
@ -290,10 +313,10 @@
<div class="section"> <div class="section">
<div class="btn-group"> <div class="btn-group">
<a href="https://discord.gg/m4F328as3K" target="_blank" class="btn btn-discord"> <a href="https://discord.gg/m4F328as3K" target="_blank" class="btn btn-discord">
<img src="discord.svg" alt="Discord Icon" /> <img src="discord.svg" alt="Discord" />
<div class="btn-text"> <div class="btn-text">
Join our Discord Join our Discord
<small>Join the community</small> <small>Chat with the community</small>
</div> </div>
</a> </a>
</div> </div>
@ -302,38 +325,24 @@
<p class="section-title">Meshtastic</p> <p class="section-title">Meshtastic</p>
<div class="btn-group"> <div class="btn-group">
<a href="https://meshtastic.org/" target="_blank" class="btn"> <a href="https://meshtastic.org/" target="_blank" class="btn">
<img src="meshtastic.svg" alt="Meshtastic Icon" /> <img src="meshtastic.svg" alt="Meshtastic" />
<div class="btn-text"> <div class="btn-text">
Meshtastic Meshtastic
<small>Learn more!</small> <small>About the project</small>
</div>
</a>
<a href="https://malla.ctmesh.org/" target="_blank" class="btn">
<img src="info.svg" alt="Info Icon" />
<div class="btn-text">
Web Dashboard
<small>Network metrics & analytics</small>
</div> </div>
</a> </a>
<a href="https://map.ctmesh.org/?lat=41.734429390721&lng=287.3501586914063&zoom=10" target="_blank" class="btn"> <a href="https://map.ctmesh.org/?lat=41.734429390721&lng=287.3501586914063&zoom=10" target="_blank" class="btn">
<img src="map.svg" alt="Map Icon" /> <img src="map.svg" alt="Map" />
<div class="btn-text"> <div class="btn-text">
CT Map Node Map
<small>Nodes seen by CT Mesh</small> <small>CT Mesh nodes</small>
</div> </div>
</a> </a>
<a href="https://meshtastic.liamcottle.net/?lat=26.58852714730864&lng=285.11718750000006&zoom=2" target="_blank" class="btn"> <a href="meshtastic-resources.html" class="btn">
<img src="globe.svg" alt="Globe Icon" /> <img src="info.svg" alt="Guides & Tools" />
<div class="btn-text"> <div class="btn-text">
Global Map Guides & Tools
<small>Nodes around the world</small> <small>Channels, MQTT, setup</small>
</div>
</a>
<a href="resources.html" class="btn">
<img src="info.svg" alt="Info Icon" />
<div class="btn-text">
Meshtastic Resources
<small>Channels, MQTT, tools</small>
</div> </div>
</a> </a>
</div> </div>
@ -341,39 +350,25 @@
<div class="section"> <div class="section">
<p class="section-title">MeshCore</p> <p class="section-title">MeshCore</p>
<div class="btn-group"> <div class="btn-group">
<a href="https://meshcore.co.uk/" target="_blank" class="btn"> <a href="https://meshcore.co.uk/" target="_blank" class="btn btn-meshcore">
<img src="meshcore.svg" alt="MeshCore Logo" /> <img src="meshcore.svg" alt="MeshCore" />
<div class="btn-text"> <div class="btn-text">
Official MeshCore Website MeshCore
<small>Project website</small> <small>About the project</small>
</div> </div>
</a> </a>
<a href="https://meshcore-map.ctmesh.org/" target="_blank" class="btn"> <a href="https://meshcore-map.ctmesh.org/" target="_blank" class="btn btn-meshcore">
<img src="map.svg" alt="Map Icon" /> <img src="map.svg" alt="Map" />
<div class="btn-text"> <div class="btn-text">
MeshCore Map Node Map
<small>Live node map</small> <small>Live MeshCore nodes</small>
</div> </div>
</a> </a>
<a href="https://meshcore-wardrive.ctmesh.org/" target="_blank" class="btn"> <a href="meshcore-resources.html" class="btn btn-meshcore">
<img src="map.svg" alt="Map Icon" /> <img src="info.svg" alt="Guides & Tools" />
<div class="btn-text"> <div class="btn-text">
MeshCore Wardrive Guides & Tools
<small>Coverage maps</small> <small>Wardrive, MQTT, setup</small>
</div>
</a>
<a href="https://meshcore-wardrive.ctmesh.org/wardrive" target="_blank" class="btn">
<img src="wheel.svg" alt="Wheel Icon" />
<div class="btn-text">
Wardrive Contribution
<small>Upload wardrive data</small>
</div>
</a>
<a href="meshcore-resources.html" class="btn">
<img src="info.svg" alt="Info Icon" />
<div class="btn-text">
MeshCore Resources
<small>Tools and maps</small>
</div> </div>
</a> </a>
</div> </div>

19
meshcore-resources.html
View File

@ -74,7 +74,7 @@
} }
.note { .note {
background: #F5F5F5; background: #F5F5F5;
border-left: 4px solid #67EA94; border-left: 4px solid #2B3A4E;
border-radius: 8px; border-radius: 8px;
padding: 0.75em 1em; padding: 0.75em 1em;
margin: 0.75em 0 0.5em; margin: 0.75em 0 0.5em;
@ -98,8 +98,8 @@
position: absolute; position: absolute;
top: 0.75em; top: 0.75em;
right: 0.75em; right: 0.75em;
background-color: #67EA94; background-color: #2B3A4E;
color: #000000; color: #ffffff;
border: none; border: none;
border-radius: 10px; border-radius: 10px;
padding: 0.4em 0.75em; padding: 0.4em 0.75em;
@ -112,8 +112,8 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 8px; gap: 8px;
background-color: #67EA94; background-color: #2B3A4E;
color: #000000; color: #ffffff;
border: none; border: none;
padding: 0.75em 1.5em; padding: 0.75em 1.5em;
border-radius: 15px; border-radius: 15px;
@ -122,8 +122,10 @@
font-size: 15px; font-size: 15px;
text-decoration: none; text-decoration: none;
} }
.back-link { .back-link,
.back-link:visited {
margin-top: 1.5em; margin-top: 1.5em;
color: #ffffff;
} }
@media (max-width: 800px) { @media (max-width: 800px) {
body { body {
@ -156,7 +158,8 @@
<p><em>These tools use data reported to our MQTT server by nodes across the state.</em></p> <p><em>These tools use data reported to our MQTT server by nodes across the state.</em></p>
<ul> <ul>
<li><a href="https://meshcore-map.ctmesh.org/" target="_blank">MeshCore Map</a> <strong>NEW!</strong> - live map showing MeshCore nodes</li> <li><a href="https://meshcore-map.ctmesh.org/" target="_blank">MeshCore Map</a> <strong>NEW!</strong> - live map showing MeshCore nodes</li>
<li><a href="https://meshcore-wardrive.ctmesh.org/" target="_blank">MeshCore Wardriving Map</a> <strong>NEW!</strong> - coverage maps for MeshCore (you can also contribute!). <em>Note: a new app is in testing and may supersede this.</em></li> <li><a href="https://meshcore-wardrive.ctmesh.org/" target="_blank">MeshCore Wardriving Map</a> <strong>NEW!</strong> - coverage maps for MeshCore. <em>Note: a new app is in testing and may supersede this.</em></li>
<li><a href="https://meshcore-wardrive.ctmesh.org/wardrive" target="_blank">Wardrive Contribution</a> - upload your wardrive data to improve coverage maps</li>
</ul> </ul>
</div> </div>
@ -180,7 +183,7 @@ MCTOMQTT_MQTT3_USERNAME=meshdev
MCTOMQTT_MQTT3_PASSWORD=large4cats</pre> MCTOMQTT_MQTT3_PASSWORD=large4cats</pre>
</div> </div>
<a class="btn back-link" href="index.html">Back to CT Mesh</a> <a class="btn back-link" href="index.html">&larr; Back to CT Mesh</a>
</div> </div>
<script> <script>
const copyButtons = document.querySelectorAll("[data-copy-target]"); const copyButtons = document.querySelectorAll("[data-copy-target]");

25
resources.html → meshtastic-resources.html
View File

@ -151,6 +151,18 @@
<div class="content-box"> <div class="content-box">
<h1>Meshtastic Resources</h1> <h1>Meshtastic Resources</h1>
<h2>Community-run Web Tools</h2>
<div class="community-tools">
<p><em>These tools use data reported to our MQTT server by nodes across the state.</em></p>
<ul>
<li><a href="https://map.ctmesh.org/?lat=41.6558113360196&lng=287.3377990722657&zoom=10" target="_blank">Meshtastic Map</a> - live map of Meshtastic nodes CT Mesh has heard</li>
<li><a href="https://meshtastic.liamcottle.net/?lat=26.58852714730864&lng=285.11718750000006&zoom=2" target="_blank">Global Map</a> - Meshtastic nodes around the world</li>
<li><a href="https://malla.ctmesh.org/" target="_blank">Malla</a> - deeper packet-level metrics and mesh performance insights fed from MQTT</li>
<li><a href="https://potato.ctmesh.org/" target="_blank">PotatoMesh</a> <strong>NEW!</strong> - packet, chat, node list, and map fed from RF on Box Mountain</li>
<li><a href="https://meshinfo.ctmesh.org/" target="_blank">MeshInfo</a> <em>legacy, partially broken</em> - MQTT gateway setup info, secondary map, graphs, message history, etc.</li>
</ul>
</div>
<h2>Mesh Channels</h2> <h2>Mesh Channels</h2>
<h3>Default (Primary) Channel</h3> <h3>Default (Primary) Channel</h3>
<p><em>Most CT chatter occurs on the default LongFast channel.</em></p> <p><em>Most CT chatter occurs on the default LongFast channel.</em></p>
@ -186,21 +198,10 @@
<p><strong>Note:</strong> CT Mesh's MQTT server is bridged and uplinks to the MQTT servers for both <a href="https://meshtastic.liamcottle.net" target="_blank">meshtastic.liamcottle.net</a> and <a href="https://meshmap.net" target="_blank">meshmap.net</a>.</p> <p><strong>Note:</strong> CT Mesh's MQTT server is bridged and uplinks to the MQTT servers for both <a href="https://meshtastic.liamcottle.net" target="_blank">meshtastic.liamcottle.net</a> and <a href="https://meshmap.net" target="_blank">meshmap.net</a>.</p>
<h2>Community-run Web Tools</h2>
<div class="community-tools">
<p><em>These tools use data reported to our MQTT server by nodes across the state.</em></p>
<ul>
<li><a href="https://map.ctmesh.org/?lat=41.6558113360196&lng=287.3377990722657&zoom=10" target="_blank">Meshtastic Map</a> - live map of Meshtastic nodes CT Mesh has heard</li>
<li><a href="https://malla.ctmesh.org/" target="_blank">Malla</a> - deeper packet-level metrics and mesh performance insights fed from MQTT</li>
<li><a href="https://potato.ctmesh.org/" target="_blank">PotatoMesh</a> <strong>NEW!</strong> - packet, chat, node list, and map fed from RF on Box Mountain</li>
<li><a href="https://meshinfo.ctmesh.org/" target="_blank">MeshInfo</a> <em>legacy, partially broken</em> - MQTT gateway setup info, secondary map, graphs, message history, etc.</li>
</ul>
</div>
<h2>Infrastructure Nodes</h2> <h2>Infrastructure Nodes</h2>
<p><strong>Important:</strong> Infrastructure roles like <code>ROUTER</code>, <code>REPEATER</code>, <code>ROUTER_CLIENT</code>, or <code>ROUTER_LATE</code> are rarely appropriate. Unless your node is sitting on top of one of the tallest buildings in Hartford with clear line-of-sight across the region, using these roles will hurt more than help. For almost everyone, the correct choice is <code>CLIENT</code>. If you think you've got a node that truly warrants an infrastructure role, reach out first - we'd rather make sure it benefits the mesh than inadvertently weakens it.</p> <p><strong>Important:</strong> Infrastructure roles like <code>ROUTER</code>, <code>REPEATER</code>, <code>ROUTER_CLIENT</code>, or <code>ROUTER_LATE</code> are rarely appropriate. Unless your node is sitting on top of one of the tallest buildings in Hartford with clear line-of-sight across the region, using these roles will hurt more than help. For almost everyone, the correct choice is <code>CLIENT</code>. If you think you've got a node that truly warrants an infrastructure role, reach out first - we'd rather make sure it benefits the mesh than inadvertently weakens it.</p>
<a class="btn back-link" href="index.html">Back to CT Mesh</a> <a class="btn back-link" href="index.html">&larr; Back to CT Mesh</a>
</div> </div>
<script> <script>
const copyButtons = document.querySelectorAll("[data-copy-target]"); const copyButtons = document.querySelectorAll("[data-copy-target]");