Plain installer page
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Jackson AndresandClaude Opus 5.5 committed
1 parent
f13dfd350b
commit
fb1ad1df1a
2 files changed
+56
-125
No files matched your search
@@ -48,10 +48,9 @@ jobs:
|
||||
BUILD_DIR: ${{ steps.build.outputs.name }}
|
||||
VERSION: ${{ steps.version.outputs.version }}
|
||||
run: |
|
||||
mkdir -p site/fonts
|
||||
mkdir -p site
|
||||
cp -r "$BUILD_DIR" site/firmware
|
||||
rm -f site/firmware/*.elf
|
||||
cp wizard/fonts/*.woff2 wizard/fonts/OFL.txt site/fonts/
|
||||
sed "s/__VERSION__/$VERSION/g" installer/index.html > site/index.html
|
||||
ls -R site
|
||||
|
||||
|
||||
+55
-123
@@ -7,138 +7,70 @@
|
||||
<meta name="description" content="Install the follow-me stair light on an Apollo MTR-1 from your browser.">
|
||||
<script type="module" src="https://unpkg.com/esp-web-tools@10.4.0/dist/web/install-button.js?module"></script>
|
||||
<style>
|
||||
@font-face{font-family:"IBM Plex Sans";font-weight:100 700;font-display:swap;src:url(fonts/plex-sans.woff2) format("woff2")}
|
||||
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(fonts/plex-mono-400.woff2) format("woff2")}
|
||||
@font-face{font-family:"IBM Plex Mono";font-weight:500 600;font-display:swap;src:url(fonts/plex-mono-500.woff2) format("woff2")}
|
||||
:root{
|
||||
--bg:#0a0a0b; --panel:#0e0e10;
|
||||
--ink:#ece8df; --ink-2:rgba(236,232,223,.62); --ink-3:rgba(236,232,223,.36); --ink-4:rgba(236,232,223,.14);
|
||||
--line:rgba(236,232,223,.1); --line-2:rgba(236,232,223,.2);
|
||||
--warm:#ffb35a; --warm-2:#ffd6a0;
|
||||
--sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
|
||||
--mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
|
||||
color-scheme:dark;
|
||||
/* ESP Web Tools dialogs */
|
||||
--improv-primary-color:var(--warm);
|
||||
--improv-text-color:var(--ink);
|
||||
--mdc-theme-primary:var(--warm);
|
||||
--mdc-theme-on-primary:#1b1006;
|
||||
--mdc-theme-surface:#141416;
|
||||
--mdc-dialog-heading-ink-color:var(--ink);
|
||||
--mdc-dialog-content-ink-color:var(--ink-2);
|
||||
--bg:#ffffff; --text:#1f1f1f; --muted:#5f5f5f; --line:#e2e2e2; --accent:#b35c00; --warn-bg:#fff5e8;
|
||||
--button:#1f1f1f; --button-text:#ffffff;
|
||||
color-scheme:light dark;
|
||||
}
|
||||
*{box-sizing:border-box}
|
||||
html{background:var(--bg)}
|
||||
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.6 var(--sans);-webkit-font-smoothing:antialiased;
|
||||
background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
|
||||
background-size:48px 48px;background-position:-1px -1px}
|
||||
a{color:var(--warm-2);text-decoration:none;border-bottom:1px solid rgba(255,214,160,.3)}
|
||||
a:hover{border-bottom-color:var(--warm-2)}
|
||||
.wrap{max-width:720px;margin:0 auto;padding:0 16px}
|
||||
header.bar{display:flex;align-items:center;justify-content:space-between;padding:22px 0;border-bottom:1px solid var(--line)}
|
||||
.brand{font:500 13px/1 var(--mono);letter-spacing:.32em}
|
||||
.ver{font:11px/1 var(--mono);letter-spacing:.12em;color:var(--ink-3)}
|
||||
|
||||
.hero{padding:56px 0 8px}
|
||||
.kicker{font:11px/1 var(--mono);letter-spacing:.16em;color:var(--ink-3);margin-bottom:16px}
|
||||
h1{font:600 clamp(30px,6vw,44px)/1.08 var(--sans);letter-spacing:-.02em;margin:0 0 16px}
|
||||
.lede{color:var(--ink-2);font-size:16.5px;max-width:560px;margin:0}
|
||||
|
||||
/* the strip: a lit window gliding along a row of LEDs */
|
||||
.strip{display:grid;grid-template-columns:repeat(36,1fr);gap:clamp(3px,1vw,7px);margin:40px 0 8px;position:relative}
|
||||
.strip i{aspect-ratio:1;border-radius:50%;background:var(--ink-4)}
|
||||
.strip .glow{position:absolute;inset:-6px auto -6px 0;width:22%;border-radius:999px;
|
||||
background:radial-gradient(closest-side,rgba(255,214,160,.95),rgba(255,179,90,.55) 55%,transparent);
|
||||
filter:blur(3px);mix-blend-mode:screen;animation:walk 9s cubic-bezier(.45,0,.55,1) infinite alternate}
|
||||
@keyframes walk{0%,8%{left:0}92%,100%{left:78%}}
|
||||
@media (prefers-reduced-motion:reduce){.strip .glow{animation:none;left:39%}}
|
||||
|
||||
.card{background:var(--panel);border:1px solid var(--line);margin:40px 0 0;padding:28px 24px}
|
||||
.card h2{font:600 20px/1.2 var(--sans);margin:0 0 6px}
|
||||
.card .sub{color:var(--ink-3);font-size:13.5px;margin:0 0 20px}
|
||||
ol.steps{list-style:none;counter-reset:s;margin:0 0 24px;padding:0;border-top:1px solid var(--line)}
|
||||
ol.steps li{counter-increment:s;display:grid;grid-template-columns:36px 1fr;padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
|
||||
ol.steps li::before{content:counter(s,decimal-leading-zero);font:12px/1.9 var(--mono);color:var(--ink-3)}
|
||||
ol.steps b{color:var(--ink);font-weight:500}
|
||||
|
||||
.go{display:inline-flex;align-items:center;gap:10px;border:0;background:var(--ink);color:#111;padding:14px 22px;
|
||||
font:500 15px/1 var(--sans);letter-spacing:.01em;cursor:pointer;border-radius:3px}
|
||||
.go:hover{background:#fff}
|
||||
.go:focus-visible{outline:2px solid var(--warm);outline-offset:3px}
|
||||
.warn{border-left:2px solid var(--warm);padding:8px 0 8px 14px;margin:22px 0 0;font-size:13.5px;color:var(--warm-2)}
|
||||
.note{border-left:2px solid var(--line-2);padding:8px 0 8px 14px;margin:0;font-size:14px;color:var(--ink-2)}
|
||||
esp-web-install-button[install-unsupported] .go,esp-web-install-button[install-supported] .note{display:none}
|
||||
|
||||
section.next{margin:48px 0 0}
|
||||
section.next h2,.links h2{font:11px/1 var(--mono);letter-spacing:.16em;color:var(--ink-3);margin:0 0 14px;font-weight:400}
|
||||
section.next p{color:var(--ink-2);margin:0 0 10px}
|
||||
code{font:13px var(--mono);color:var(--ink);background:rgba(255,255,255,.05);padding:1px 5px;border-radius:2px}
|
||||
|
||||
.links{margin:48px 0 0;padding-top:24px;border-top:1px solid var(--line)}
|
||||
.links ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:4px 24px}
|
||||
.links li{padding:6px 0;font-size:14px}
|
||||
footer{margin:48px 0 0;padding:20px 0 40px;border-top:1px solid var(--line);font:11.5px/1.7 var(--mono);color:var(--ink-3)}
|
||||
footer a{color:var(--ink-2);border-bottom-color:var(--line-2)}
|
||||
@media (max-width:520px){.card{padding:22px 16px}.hero{padding-top:40px}}
|
||||
@media (prefers-color-scheme:dark){
|
||||
:root{--bg:#121212; --text:#e8e8e8; --muted:#a0a0a0; --line:#2e2e2e; --accent:#ffb35a; --warn-bg:#2a2016;
|
||||
--button:#e8e8e8; --button-text:#121212}
|
||||
}
|
||||
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif}
|
||||
main{max-width:640px;margin:0 auto;padding:48px 16px 64px}
|
||||
h1{font-size:28px;line-height:1.2;margin:0 0 12px}
|
||||
h2{font-size:19px;margin:40px 0 10px}
|
||||
p{margin:0 0 12px}
|
||||
.muted{color:var(--muted)}
|
||||
ol{padding-left:22px;margin:0 0 20px}
|
||||
li{margin:0 0 6px}
|
||||
a{color:var(--accent)}
|
||||
code{font:14px ui-monospace,Menlo,monospace}
|
||||
.install{margin:24px 0 0}
|
||||
.install button{border:0;border-radius:6px;background:var(--button);color:var(--button-text);font:600 16px/1 system-ui,sans-serif;padding:13px 20px;cursor:pointer}
|
||||
esp-web-install-button[install-unsupported] button{display:none}
|
||||
.warn{background:var(--warn-bg);border-left:3px solid var(--accent);padding:10px 14px;margin:20px 0 0;font-size:15px}
|
||||
footer{border-top:1px solid var(--line);margin-top:48px;padding-top:16px;font-size:14px;color:var(--muted)}
|
||||
footer ul{list-style:none;padding:0;margin:0 0 12px}
|
||||
footer li{display:inline;margin-right:16px}
|
||||
/* ESP Web Tools dialogs */
|
||||
esp-web-install-button{--improv-primary-color:var(--accent);--mdc-theme-primary:var(--accent)}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<header class="bar">
|
||||
<span class="brand">FOLLOW-ME</span>
|
||||
<span class="ver">VERSION __VERSION__</span>
|
||||
</header>
|
||||
<main>
|
||||
<h1>Follow-Me installer</h1>
|
||||
<p>Follow-me is a stair light. A radar sensor at the stairs tracks where each person is. An LED strip along the stairs lights the part next to that person, and the lit part moves with them.</p>
|
||||
<p class="muted">This page installs follow-me on an Apollo MTR-1. Version __VERSION__.</p>
|
||||
|
||||
<section class="hero">
|
||||
<div class="kicker">STAIR LIGHT · APOLLO MTR-1 · WLED</div>
|
||||
<h1>A stair light that follows you.</h1>
|
||||
<p class="lede">A radar sensor at the stairs tracks where each person is. An LED strip along the stairs lights the part next to that person, and the lit part moves with them, up or down.</p>
|
||||
<div class="strip" aria-hidden="true">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<span class="glow"></span>
|
||||
</div>
|
||||
</section>
|
||||
<h2>Install</h2>
|
||||
<p class="muted">Use Chrome or Edge on a computer. Phones and other browsers cannot connect to the sensor over USB.</p>
|
||||
<ol>
|
||||
<li>Connect the MTR-1 to this computer with a USB-C data cable. A charge-only cable does not work.</li>
|
||||
<li>Click <b>Install Follow-Me</b> and pick the sensor from the list.</li>
|
||||
<li>When the install is complete, enter your Wi-Fi name and password.</li>
|
||||
<li>Click <b>Visit device</b> to open the sensor's web page.</li>
|
||||
</ol>
|
||||
<esp-web-install-button class="install" manifest="firmware/manifest.json">
|
||||
<button slot="activate">Install Follow-Me</button>
|
||||
<p slot="unsupported">This browser cannot install firmware. Open this page in Chrome or Edge on a computer.</p>
|
||||
<p slot="not-allowed">The installer works only over HTTPS. Open this page from its https:// address.</p>
|
||||
</esp-web-install-button>
|
||||
<p class="warn">Installing erases the sensor. A sensor that already has a follow-me setup must go through the setup wizard again. To keep the setup, update the sensor from ESPHome instead.</p>
|
||||
|
||||
<section class="card">
|
||||
<h2>Install on an Apollo MTR-1</h2>
|
||||
<p class="sub">Use Chrome or Edge on a computer. Phones and other browsers cannot connect to the sensor over USB.</p>
|
||||
<ol class="steps">
|
||||
<li><span>Connect the MTR-1 to this computer with a <b>USB-C data cable</b>. A charge-only cable does not work.</span></li>
|
||||
<li><span>Click <b>Install Follow-Me</b> and pick the sensor from the list.</span></li>
|
||||
<li><span>When the install is complete, enter your <b>Wi-Fi</b> name and password.</span></li>
|
||||
<li><span>Click <b>Visit device</b> to open the sensor's web page.</span></li>
|
||||
</ol>
|
||||
<esp-web-install-button manifest="firmware/manifest.json">
|
||||
<button slot="activate" class="go">Install Follow-Me →</button>
|
||||
<p slot="unsupported" class="note">This browser cannot install firmware. Open this page in Chrome or Edge on a computer.</p>
|
||||
<p slot="not-allowed" class="note">The installer works only over HTTPS. Open this page from its https:// address.</p>
|
||||
</esp-web-install-button>
|
||||
<div class="warn">Installing erases the sensor. A sensor that already has a follow-me setup must go through the setup wizard again. To keep the setup, update the sensor from ESPHome instead.</div>
|
||||
</section>
|
||||
|
||||
<section class="next">
|
||||
<h2>NEXT: SET UP YOUR STAIRS</h2>
|
||||
<p>On the sensor's web page, click <b>Set up Follow-Me</b>. The setup wizard asks for the shape of your stairs, has you walk them once, and lines up the LED strip. It takes about ten minutes.</p>
|
||||
<p>If the Wi-Fi step did not appear, connect your phone to the <code>Apollo MTR1 Hotspot</code> network and enter your Wi-Fi there.</p>
|
||||
<p>WLED needs some settings changed first. The wizard checks them and can change them for you.</p>
|
||||
</section>
|
||||
|
||||
<section class="links">
|
||||
<h2>MORE</h2>
|
||||
<ul>
|
||||
<li><a href="https://git.outer-haven.io/JacksoTheGreat/follow-me-stairs">Source and documentation</a></li>
|
||||
<li><a href="https://git.outer-haven.io/JacksoTheGreat/follow-me-stairs/src/branch/main/docs/settings.md">Every setting explained</a></li>
|
||||
<li><a href="https://github.com/RandomPedestrian07/follow-me-stairs">GitHub mirror</a></li>
|
||||
<li><a href="https://apolloautomation.com/products/mtr-1">Apollo MTR-1</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
<h2>After installing</h2>
|
||||
<p>On the sensor's web page, click <b>Set up Follow-Me</b>. The setup wizard asks for the shape of your stairs, has you walk them once, and lines up the LED strip.</p>
|
||||
<p>If the Wi-Fi step did not appear, connect your phone to the <code>Apollo MTR1 Hotspot</code> network and enter your Wi-Fi there.</p>
|
||||
<p>WLED needs some settings changed first. The wizard checks them and can change them for you.</p>
|
||||
|
||||
<footer>
|
||||
MIT license. IBM Plex fonts: <a href="fonts/OFL.txt">SIL Open Font License 1.1</a>.<br>
|
||||
Installer by <a href="https://esphome.github.io/esp-web-tools/">ESP Web Tools</a>. Firmware built with <a href="https://esphome.io">ESPHome</a>.
|
||||
<ul>
|
||||
<li><a href="https://git.outer-haven.io/JacksoTheGreat/follow-me-stairs">Source and documentation</a></li>
|
||||
<li><a href="https://git.outer-haven.io/JacksoTheGreat/follow-me-stairs/src/branch/main/docs/settings.md">Settings</a></li>
|
||||
<li><a href="https://github.com/RandomPedestrian07/follow-me-stairs">GitHub mirror</a></li>
|
||||
</ul>
|
||||
MIT license. Installer by <a href="https://esphome.github.io/esp-web-tools/">ESP Web Tools</a>.
|
||||
</footer>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user