dandri/trail-mate
1
0
Fork 0
mirror of https://github.com/vicliu624/trail-mate.git synced 2026-08-28 05:24:08 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
dfb08cc2bc9c6477dd98c7b447bb2e41b8a46f2b
trail-mate/site/index.html
T

557 lines
27 KiB
HTML
Raw Blame History

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Trail Mate</title>
<meta
name="description"
content="Trail Mate is an offline-first handheld firmware project for navigation, LoRa messaging, and field communication on ESP32 hardware."
>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=Noto+Sans+SC:wght@400;500;700&family=Zen+Maru+Gothic:wght@400;500;700&display=swap"
rel="stylesheet"
>
<link rel="icon" type="image/png" href="./assets/showcase/brand-logo.png">
<link rel="stylesheet" href="./styles.css">
<script
type="module"
src="https://unpkg.com/esp-web-tools@10/dist/web/install-button.js?module"
></script>
<script type="module" src="./main.js"></script>
</head>
<body>
<div class="page-shell">
<header class="topbar">
<a class="brand" href="./" aria-label="Trail Mate homepage">
<img
class="brand-logo"
src="./assets/showcase/brand-logo.png"
alt="Trail Mate logo"
width="608"
height="400"
>
<span class="brand-text">Trail Mate</span>
</a>
<div class="top-actions" aria-label="Global actions">
<a class="top-link" href="https://github.com/vicliu624/trail-mate" data-i18n="top.github">
GitHub
</a>
<a class="top-link" href="https://github.com/vicliu624/trail-mate/wiki" data-i18n="top.wiki">
Wiki
</a>
<a class="top-link top-link-strong" href="#webflasher" data-i18n="top.flash">
Flash
</a>
<div class="language-toggle" role="group" aria-label="Language">
<button class="lang-button is-active" type="button" data-lang-choice="en" aria-pressed="true">
EN
</button>
<button class="lang-button" type="button" data-lang-choice="zh" aria-pressed="false">
中文
</button>
</div>
</div>
</header>
<div class="content-shell">
<aside class="sidebar" aria-label="Site navigation">
<p class="sidebar-label" data-i18n="side.label">Product Map</p>
<nav class="side-nav">
<a href="#overview" data-i18n="side.overview">Overview</a>
<a href="#capabilities" data-i18n="side.capabilities">Capabilities</a>
<details class="nav-group" open>
<summary data-i18n="side.devices">Devices</summary>
<button class="side-device is-active" type="button" data-device-nav="tlora-pager-sx1262">
<span>T-LoRa Pager SX1262</span>
</button>
<button class="side-device" type="button" data-device-nav="tlora-pager-lr1121">
<span>T-LoRa Pager LR1121</span>
</button>
<button class="side-device" type="button" data-device-nav="tdeck">
<span>T-Deck</span>
</button>
<button class="side-device" type="button" data-device-nav="lilygo-twatch-s3">
<span>T-Watch-S3</span>
</button>
<button class="side-device" type="button" data-device-nav="gat562-mesh-evb-pro">
<span>GAT562 EVB Pro</span>
</button>
</details>
<a href="#features" data-i18n="side.features">Feature Walkthrough</a>
<a href="#languages" data-i18n="side.languages">Language Packs</a>
<a href="#webflasher" data-i18n="side.flasher">Web Flasher</a>
<a href="#docs" data-i18n="side.docs">Docs</a>
</nav>
</aside>
<main class="main-content">
<section class="hero" id="overview">
<div class="hero-copy">
<p class="eyebrow" data-i18n="hero.eyebrow">Offline Maps + LoRa for the Field</p>
<h1>Trail Mate</h1>
<p class="hero-tagline" data-i18n="hero.tagline">
Carry maps, messages, and teammate positions on a small LoRa device.
</p>
<p class="lede" data-i18n="hero.lede">
Trail Mate helps hikers and field groups stay oriented when cell service is gone: browse offline maps
from SD, send LoRa messages, check GPS health, and keep team movement visible on compact handhelds.
</p>
<div class="hero-actions">
<a class="button button-primary" href="#webflasher" data-i18n="hero.primaryAction">
Open Web Flasher
</a>
<a
class="button button-secondary"
href="https://github.com/vicliu624/trail-mate"
data-i18n="hero.secondaryAction"
>
View Repository
</a>
</div>
</div>
<div class="hero-visual">
<div class="hero-screen">
<img
src="./assets/showcase/home-main.png"
alt="Trail Mate main menu screenshot"
loading="eager"
>
</div>
<div class="hero-note hero-note-release">
<p class="feature-kicker" data-i18n="hero.releaseKicker">Latest Release</p>
<p class="hero-note-value" data-release-version>Waiting for first tagged release</p>
</div>
<div class="hero-note hero-note-proof">
<p class="feature-kicker" data-i18n="hero.proofKicker">Device Photos</p>
<p class="hero-note-value" data-i18n="hero.proofText">
Screenshots are grouped by device so you can tell which screens match the hardware you plan to carry.
</p>
</div>
</div>
</section>
<section class="overview-ribbon" aria-label="Project overview">
<p class="overview-copy" data-i18n="overview.copy">
Built for days when a phone is not enough: keep maps on SD, send messages without mobile networks,
record tracks, check signal and GPS, and install extra language packs when you need them.
</p>
<div class="overview-tags" aria-label="Core capabilities">
<span data-i18n="tag.maps">Offline Maps</span>
<span data-i18n="tag.gnss">GNSS Diagnostics</span>
<span data-i18n="tag.chat">Mesh Chat</span>
<span data-i18n="tag.team">Team Mode</span>
<span data-i18n="tag.languages">Language Packs</span>
<span data-i18n="tag.scan">Sub-GHz Scan</span>
<span data-i18n="tag.usb">PC Link</span>
</div>
</section>
<div class="animal-divider animal-divider-teal" aria-hidden="true"></div>
<section class="capability-section" id="capabilities">
<div class="section-heading">
<div>
<p class="eyebrow" data-i18n="capabilities.eyebrow">What It Does</p>
<h2 data-i18n="capabilities.title">Prepare the device before you leave signal behind.</h2>
</div>
<p class="section-note" data-i18n="capabilities.note">
Pick the right hardware, flash the matching firmware, load maps and language packs, then use the
device when the phone network disappears.
</p>
</div>
<div class="capability-grid">
<article class="capability-card capability-device">
<p class="feature-kicker" data-i18n="capabilities.deviceKicker">Devices</p>
<h3 data-i18n="capabilities.deviceTitle">Choose your hardware</h3>
<p data-i18n="capabilities.deviceText">
Each supported board has its own firmware, install notes, and hardware caveats.
</p>
</article>
<article class="capability-card capability-navigation">
<p class="feature-kicker" data-i18n="capabilities.navigationKicker">Navigation</p>
<h3 data-i18n="capabilities.navigationTitle">Maps that work offline</h3>
<p data-i18n="capabilities.navigationText">
Load map tiles from SD, switch layers, check GPS fix quality, and review routes or tracks in the field.
</p>
</article>
<article class="capability-card capability-protocol">
<p class="feature-kicker" data-i18n="capabilities.protocolKicker">LoRa</p>
<h3 data-i18n="capabilities.protocolTitle">Messages without cell service</h3>
<p data-i18n="capabilities.protocolText">
Send direct, channel, or team messages over supported LoRa mesh modes and keep clear feedback when a
send fails.
</p>
</article>
<article class="capability-card capability-install">
<p class="feature-kicker" data-i18n="capabilities.installKicker">Install</p>
<h3 data-i18n="capabilities.installTitle">Flash the right firmware</h3>
<p data-i18n="capabilities.installText">
Supported ESP32 devices can be flashed from the browser; other boards use downloaded firmware files.
</p>
</article>
<article class="capability-card capability-locale">
<p class="feature-kicker" data-i18n="capabilities.localeKicker">Localization</p>
<h3 data-i18n="capabilities.localeTitle">Add languages when needed</h3>
<p data-i18n="capabilities.localeText">
Install fonts, translations, and keyboard layouts from Extensions instead of filling the firmware with
every language.
</p>
</article>
<article class="capability-card capability-field">
<p class="feature-kicker" data-i18n="capabilities.fieldKicker">Field Tools</p>
<h3 data-i18n="capabilities.fieldTitle">Tools for the trip</h3>
<p data-i18n="capabilities.fieldText">
Use track recording, GPS views, signal checks, SSTV, and USB data exchange when the trip calls for more
than chat.
</p>
</article>
</div>
</section>
<div class="animal-divider animal-divider-teal" aria-hidden="true"></div>
<section class="device-section" id="devices">
<div class="section-heading">
<div>
<p class="eyebrow" data-i18n="devices.eyebrow">Devices</p>
<h2 data-i18n="devices.title">Pick the device you are holding.</h2>
</div>
<p class="section-note" data-i18n="devices.note">
Choose the exact hardware before flashing. Some boards look similar but need different firmware.
</p>
</div>
<div class="device-browser">
<div class="device-switcher" role="tablist" aria-label="Supported devices">
<button class="device-tab is-active" type="button" data-device-target="tlora-pager-sx1262">
<span>T-LoRa Pager SX1262</span>
<small>ESP32-S3</small>
</button>
<button class="device-tab" type="button" data-device-target="tlora-pager-lr1121">
<span>T-LoRa Pager LR1121</span>
<small>ESP32-S3</small>
</button>
<button class="device-tab" type="button" data-device-target="tdeck">
<span>T-Deck</span>
<small>ESP32-S3</small>
</button>
<button class="device-tab" type="button" data-device-target="lilygo-twatch-s3">
<span>T-Watch-S3</span>
<small>ESP32-S3</small>
</button>
<button class="device-tab" type="button" data-device-target="gat562-mesh-evb-pro">
<span>GAT562 EVB Pro</span>
<small>nRF52</small>
</button>
</div>
<article class="device-stage" aria-live="polite">
<div class="device-stage-header">
<div>
<p class="feature-kicker" data-device-kicker>ESP32-S3</p>
<h3 data-device-title>LilyGo T-LoRa Pager SX1262</h3>
<p class="device-summary" data-device-summary>
Keyboard Pager with the most complete screenshots and field testing.
</p>
</div>
<div class="device-status-card">
<span data-device-status>Recommended 0.1.30 target</span>
</div>
</div>
<div class="device-showcase">
<figure class="device-main-shot">
<img
src="./assets/showcase/home-main.png"
alt="T-LoRa Pager home launcher"
data-device-main-image
>
<figcaption data-device-main-caption>Home launcher</figcaption>
</figure>
<div class="device-detail-panel">
<p class="feature-kicker" data-i18n="devices.interactionKicker">What To Know</p>
<ul class="device-interactions" data-device-interactions></ul>
</div>
</div>
<div class="device-thumb-grid" data-device-thumbs></div>
</article>
</div>
</section>
<div class="animal-divider animal-divider-teal" aria-hidden="true"></div>
<section class="story-stack" id="features" aria-label="Feature walkthrough">
<article class="story-section">
<div class="story-copy">
<p class="eyebrow" data-i18n="features.navEyebrow">Navigation</p>
<h2 data-i18n="features.navTitle">Carry maps without cell service.</h2>
<p class="story-lede" data-i18n="features.navLead">
Put map tiles on the SD card before the trip, then browse OSM, terrain, and satellite layers from the
device. GPS screens help you understand whether the current fix is trustworthy.
</p>
</div>
<div class="story-media">
<figure class="shot">
<img src="./assets/showcase/nav-map-osm.png" alt="Offline OSM map view" loading="lazy">
</figure>
<figure class="shot">
<img src="./assets/showcase/nav-map-terrain.png" alt="Terrain map layer" loading="lazy">
</figure>
<figure class="shot">
<img src="./assets/showcase/nav-map-satellite.png" alt="Satellite map layer" loading="lazy">
</figure>
<figure class="shot">
<img src="./assets/showcase/nav-skyplot.png" alt="GNSS sky plot screen" loading="lazy">
</figure>
</div>
</article>
<article class="story-section">
<div class="story-copy">
<p class="eyebrow" data-i18n="features.commEyebrow">Communication</p>
<h2 data-i18n="features.commTitle">Stay in touch when phones stop helping.</h2>
<p class="story-lede" data-i18n="features.commLead">
Write messages on the device, retry failed sends from the message bubble, and keep team conversations
separate from ordinary channel traffic.
</p>
</div>
<div class="story-media">
<figure class="shot">
<img src="./assets/showcase/chat-compose.png" alt="Message compose interface" loading="lazy">
</figure>
<figure class="shot">
<img src="./assets/showcase/chat-messages.png" alt="Message history screen" loading="lazy">
</figure>
<figure class="shot">
<img src="./assets/showcase/chat-contacts.png" alt="Contacts screen" loading="lazy">
</figure>
<figure class="shot">
<img src="./assets/showcase/team-map.png" alt="Team map interface" loading="lazy">
</figure>
</div>
</article>
<article class="story-section">
<div class="story-copy">
<p class="eyebrow" data-i18n="features.toolsEyebrow">Field Utilities</p>
<h2 data-i18n="features.toolsTitle">Bring a few field tools with you.</h2>
<p class="story-lede" data-i18n="features.toolsLead">
Use signal scanning, SSTV receive, USB data exchange, and track views when you need to inspect the
environment or recover data.
</p>
</div>
<div class="story-media">
<figure class="shot">
<img src="./assets/showcase/utility-spectrum.png" alt="Sub-GHz energy sweep view" loading="lazy">
</figure>
<figure class="shot">
<img src="./assets/showcase/utility-sstv-page.jpg" alt="SSTV receiver screen" loading="lazy">
</figure>
<figure class="shot">
<img src="./assets/showcase/utility-data-exchange.png" alt="USB data exchange screen" loading="lazy">
</figure>
<figure class="shot">
<img src="./assets/showcase/utility-tracker.png" alt="Tracker overview screen" loading="lazy">
</figure>
</div>
</article>
</section>
<div class="animal-divider animal-divider-teal" aria-hidden="true"></div>
<section class="language-section" id="languages">
<div class="section-heading">
<div>
<p class="eyebrow" data-i18n="languages.eyebrow">Localization</p>
<h2 data-i18n="languages.title">Keep the firmware small, then install the languages you need.</h2>
</div>
<p class="section-note" data-i18n="languages.note">
English is always available. Other fonts, translations, and keyboard layouts can be installed from
Extensions, including the Cyrillic keyboard pack added for 0.1.30.
</p>
</div>
<div class="language-highlights">
<article class="language-highlight">
<p class="feature-kicker" data-i18n="languages.defaultKicker">Built-In Default</p>
<h3 data-i18n="languages.defaultTitle">The device can always fall back to English.</h3>
<p data-i18n="languages.defaultText">
The device can boot, recover, and stay usable even when no external language packs are installed.
</p>
</article>
<article class="language-highlight">
<p class="feature-kicker" data-i18n="languages.catalogKicker">Pack List</p>
<h3>
<span data-pack-count>0</span>
<span data-i18n="languages.bundleSuffix">bundles covering</span>
<span data-locale-count>0</span>
<span data-i18n="languages.localeSuffix">available locales.</span>
</h3>
<p data-i18n="languages.catalogText">
Language packs can include translations, fonts, and keyboard layouts. Install them from the device
instead of rebuilding firmware.
</p>
</article>
<article class="language-highlight">
<p class="feature-kicker" data-i18n="languages.gateKicker">Pack Status</p>
<h3 data-i18n="languages.gateTitle">Review labels stay visible.</h3>
<p data-i18n="languages.gateText">
Some languages are ready for daily use; others still need review from native speakers. The list keeps
that visible.
</p>
</article>
</div>
<div class="language-pack-grid" data-pack-grid>
<article class="language-pack-card language-pack-empty">
<p class="feature-kicker" data-i18n="languages.loadingKicker">Catalog</p>
<h3 data-i18n="languages.loadingTitle">Loading package list...</h3>
<p class="language-pack-summary" data-i18n="languages.loadingText">
Published locale bundles from the current Pages build will appear here.
</p>
</article>
</div>
</section>
<section class="install-section" id="webflasher">
<div class="section-heading">
<div>
<p class="eyebrow" data-i18n="install.eyebrow">Install</p>
<h2 data-i18n="install.title">Web Flasher</h2>
</div>
<p class="section-note" data-i18n="install.note">
Use Google Chrome or Microsoft Edge over HTTPS with a USB data cable.
Pick the card that matches the radio chip on your hardware.
</p>
</div>
<div class="install-grid">
<article class="board-card" data-board-id="tlora-pager-sx1262">
<p class="board-chip">ESP32-S3</p>
<h3>LilyGo T-LoRa Pager SX1262</h3>
<p class="board-copy" data-i18n="install.pagerCopy">SX1262 radio build for the keyboard Pager. Do not use this card for LR1121 hardware.</p>
<div class="board-install" data-install-slot>
<p class="board-hint" data-i18n="install.checking">Checking firmware...</p>
</div>
<a class="release-link" data-release-link href="https://github.com/vicliu624/trail-mate/releases" data-i18n="install.openRelease">
Open latest release
</a>
</article>
<article class="board-card" data-board-id="tlora-pager-lr1121">
<p class="board-chip">ESP32-S3</p>
<h3>LilyGo T-LoRa Pager LR1121</h3>
<p class="board-copy" data-i18n="install.pagerLr1121Copy">LR1121 radio build for the Sub-GHz + 2.4 GHz keyboard Pager. Do not flash this onto SX1262 hardware.</p>
<div class="board-install" data-install-slot>
<p class="board-hint" data-i18n="install.checking">Checking firmware...</p>
</div>
<a class="release-link" data-release-link href="https://github.com/vicliu624/trail-mate/releases" data-i18n="install.openRelease">
Open latest release
</a>
</article>
<article class="board-card" data-board-id="tdeck">
<p class="board-chip">ESP32-S3</p>
<h3>LilyGo T-Deck</h3>
<p class="board-copy" data-i18n="install.tdeckCopy">Keyboard + touch build tuned for the T-Deck layout.</p>
<div class="board-install" data-install-slot>
<p class="board-hint" data-i18n="install.checking">Checking firmware...</p>
</div>
<a class="release-link" data-release-link href="https://github.com/vicliu624/trail-mate/releases" data-i18n="install.openRelease">
Open latest release
</a>
</article>
<article class="board-card" data-board-id="lilygo-twatch-s3">
<p class="board-chip">ESP32-S3</p>
<h3>LilyGo T-Watch-S3</h3>
<p class="board-copy" data-i18n="install.twatchCopy">Touch-first watch build for compact field experiments.</p>
<div class="board-install" data-install-slot>
<p class="board-hint" data-i18n="install.checking">Checking firmware...</p>
</div>
<a class="release-link" data-release-link href="https://github.com/vicliu624/trail-mate/releases" data-i18n="install.openRelease">
Open latest release
</a>
</article>
<article class="board-card board-card-muted">
<p class="board-chip">nRF52</p>
<h3>GAT562 Mesh EVB Pro</h3>
<p class="board-copy" data-i18n="install.gatCopy">
Browser flashing is not available for the nRF52 board yet. Use the downloaded firmware file for manual flashing.
</p>
<div class="board-install">
<p class="board-hint" data-i18n="install.gatHint">
Download the packaged firmware from the latest GitHub release.
</p>
</div>
<a class="release-link" data-release-link href="https://github.com/vicliu624/trail-mate/releases" data-i18n="install.openRelease">
Open latest release
</a>
</article>
</div>
<div class="workflow-note">
<p data-i18n="install.step1">1. Connect the device with a USB data cable.</p>
<p data-i18n="install.step2">2. Put the board into download mode if your hardware requires it.</p>
<p data-i18n="install.step3">3. Choose the correct target and let the browser flash the merged image.</p>
</div>
</section>
<section class="links-section" id="docs">
<article>
<p class="feature-kicker" data-i18n="docs.eyebrow">Read More</p>
<h2 data-i18n="docs.title">Need deeper setup details?</h2>
<p data-i18n="docs.copy">
The wiki has hardware notes, flashing steps, map preparation, configuration help, troubleshooting, and
full release notes.
</p>
<div class="hero-actions">
<a class="button button-secondary" href="https://github.com/vicliu624/trail-mate/wiki" data-i18n="docs.wiki">
Wiki Home
</a>
<a
class="button button-secondary"
href="https://github.com/vicliu624/trail-mate/wiki/2.-Supported-Hardware"
data-i18n="docs.hardware"
>
Supported Hardware
</a>
</div>
</article>
</section>
</main>
</div>
<footer class="site-footer">
<div class="site-footer-card">
<div>
<p class="feature-kicker" data-i18n="footer.eyebrow">Trail Mate Field Notes</p>
<h2 data-i18n="footer.title">For the places where maps and signal both matter.</h2>
<p data-i18n="footer.copy">
Follow the repository for firmware releases, device notes, map and language-pack updates, and field-focused
fixes.
</p>
</div>
<div class="site-footer-links">
<a href="https://github.com/vicliu624/trail-mate" data-i18n="footer.repo">Repository</a>
<a href="https://github.com/vicliu624/trail-mate/releases" data-i18n="footer.releases">Releases</a>
<a href="https://github.com/vicliu624/trail-mate/wiki" data-i18n="footer.wiki">Wiki</a>
</div>
</div>
<div class="animal-footer-art" aria-hidden="true"></div>
</footer>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink