Skip to content

Commit 5ca2ede

Browse files
Merge pull request #2 from QuasiKili/master
added max width container for white square section in main
2 parents fb34523 + 869918b commit 5ca2ede

File tree

1 file changed

+130
-114
lines changed

1 file changed

+130
-114
lines changed

index.html

Lines changed: 130 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -307,125 +307,141 @@
307307
</div>
308308
</header>
309309
<main>
310-
<section class="installer-section">
311-
<div class="container">
312-
<h2>Install MicroPythonOS</h2>
313-
<p>Click the button below to flash <a href="https://micropythonos.com">MicroPythonOS</a> firmware onto your ESP device using WebSerial. Ensure
314-
your device is connected via USB and you're using a supported browser (e.g., Chrome or Edge).</p>
315-
<p>Don't have a device yet? Buy a supported one, like the <a
316-
href="https://www.waveshare.com/wiki/ESP32-S3-Touch-LCD-2">Waveshare ESP32-S3-Touch-LCD-2</a>.
317-
Or check out <a href="https://docs.micropythonos.com">the docs</a> to see how you can run it on your
318-
desktop PC.</p>
319-
</div>
320-
</section>
321-
322-
<section class="installer-section">
323-
<div class="container">
324-
<h2>Select Version</h2>
325-
<div class="device-selection">
326-
<label><input type="radio" checked="checked" name="device"
327-
value="/manifests/esp32/MicroPythonOS_esp32_0.6.x.json" onchange="updateManifest()">
328-
<p>Unified for all ESP32-S3 devices: Waveshare and Fri3d Camp 2024 Badge: version 0.6.0</p>
329-
</label>
330-
<br />
331-
<button class="old-releases-toggle" onclick="toggleOldReleases()">Show old releases ▼</button>
332-
<div id="oldReleasesSection" class="old-releases-section">
333-
<div class="old-releases-label">These old releases are only here for archival, reverting,
334-
testing or troubleshooting.</div>
335-
<label><input type="radio" name="device" value="/manifests/esp32/MicroPythonOS_esp32_0.5.x.json"
336-
onchange="updateManifest()">
337-
<p>Unified for all ESP32-S3 devices: Waveshare and Fri3d Camp 2024 Badge: version 0.5.2</p>
338-
</label>
339-
<br />
340-
<label><input type="radio" name="device"
341-
value="/manifests/Waveshare/ESP32-S3-Touch-LCD-2/Waveshare_ESP32-S3-Touch-LCD-2_0.4.x.json"
342-
onchange="updateManifest()">
343-
<p>Waveshare ESP32-S3-Touch-LCD-2: version 0.4.0</p>
344-
</label>
345-
<label><input type="radio" name="device"
346-
value="/manifests/Waveshare/ESP32-S3-Touch-LCD-2/Waveshare_ESP32-S3-Touch-LCD-2_0.3.x.json"
347-
onchange="updateManifest()">
348-
<p>Waveshare ESP32-S3-Touch-LCD-2: version 0.3.2</p>
349-
</label>
350-
<label><input type="radio" name="device"
351-
value="/manifests/Waveshare/ESP32-S3-Touch-LCD-2/Waveshare_ESP32-S3-Touch-LCD-2_0.2.x.json"
352-
onchange="updateManifest()">
353-
<p>Waveshare ESP32-S3-Touch-LCD-2: version 0.2.1</p>
354-
</label>
355-
<label><input type="radio" name="device"
356-
value="/manifests/Waveshare/ESP32-S3-Touch-LCD-2/Waveshare_ESP32-S3-Touch-LCD-2_0.1.1.json"
357-
onchange="updateManifest()">
358-
<p>Waveshare ESP32-S3-Touch-LCD-2: version 0.1.1</p>
359-
</label>
360-
<label><input type="radio" name="device"
361-
value="/manifests/Waveshare/ESP32-S3-Touch-LCD-2/Waveshare_ESP32-S3-Touch-LCD-2_0.0.9.json"
362-
onchange="updateManifest()">
363-
<p>Waveshare ESP32-S3-Touch-LCD-2: version 0.0.9</p>
310+
<div class="container">
311+
312+
<section class="installer-section">
313+
<div class="container">
314+
<h2>Install MicroPythonOS</h2>
315+
<p>Click the button below to flash <a href="https://micropythonos.com">MicroPythonOS</a> firmware
316+
onto your ESP device using WebSerial. Ensure
317+
your device is connected via USB and you're using a supported browser (e.g., Chrome or Edge).
318+
</p>
319+
<p>Don't have a device yet? Buy a supported one, like the <a
320+
href="https://www.waveshare.com/wiki/ESP32-S3-Touch-LCD-2">Waveshare
321+
ESP32-S3-Touch-LCD-2</a>.
322+
Or check out <a href="https://docs.micropythonos.com">the docs</a> to see how you can run it on
323+
your
324+
desktop PC.</p>
325+
</div>
326+
</section>
327+
328+
<section class="installer-section">
329+
<div class="container">
330+
<h2>Select Version</h2>
331+
<div class="device-selection">
332+
<label><input type="radio" checked="checked" name="device"
333+
value="/manifests/esp32/MicroPythonOS_esp32_0.6.x.json" onchange="updateManifest()">
334+
<p>Unified for all ESP32-S3 devices: Waveshare and Fri3d Camp 2024 Badge: version 0.6.0</p>
364335
</label>
365336
<br />
366-
<label><input type="radio" name="device"
367-
value="/manifests/Fri3d-Camp/fri3d-2024/fri3d-2024_0.4.x.json"
368-
onchange="updateManifest()">
369-
<p>Fri3d Camp 2024 Badge: version 0.4.0</p>
370-
</label>
371-
<label><input type="radio" name="device"
372-
value="/manifests/Fri3d-Camp/fri3d-2024/fri3d-2024_0.3.x.json"
373-
onchange="updateManifest()">
374-
<p>Fri3d Camp 2024 Badge: version 0.3.2</p>
375-
</label>
376-
<label><input type="radio" name="device"
377-
value="/manifests/Fri3d-Camp/fri3d-2024/fri3d-2024_0.2.x.json"
378-
onchange="updateManifest()">
379-
<p>Fri3d Camp 2024 Badge: version 0.2.1</p>
380-
</label>
381-
<label><input type="radio" name="device"
382-
value="/manifests/Fri3d-Camp/fri3d-2024/fri3d-2024_0.1.1.json"
383-
onchange="updateManifest()">
384-
<p>Fri3d Camp 2024 Badge: version 0.1.1</p>
385-
</label>
337+
<button class="old-releases-toggle" onclick="toggleOldReleases()">Show old releases ▼</button>
338+
<div id="oldReleasesSection" class="old-releases-section">
339+
<div class="old-releases-label">These old releases are only here for archival, reverting,
340+
testing or troubleshooting.</div>
341+
<label><input type="radio" name="device"
342+
value="/manifests/esp32/MicroPythonOS_esp32_0.5.x.json" onchange="updateManifest()">
343+
<p>Unified for all ESP32-S3 devices: Waveshare and Fri3d Camp 2024 Badge: version 0.5.2
344+
</p>
345+
</label>
346+
<br />
347+
<label><input type="radio" name="device"
348+
value="/manifests/Waveshare/ESP32-S3-Touch-LCD-2/Waveshare_ESP32-S3-Touch-LCD-2_0.4.x.json"
349+
onchange="updateManifest()">
350+
<p>Waveshare ESP32-S3-Touch-LCD-2: version 0.4.0</p>
351+
</label>
352+
<label><input type="radio" name="device"
353+
value="/manifests/Waveshare/ESP32-S3-Touch-LCD-2/Waveshare_ESP32-S3-Touch-LCD-2_0.3.x.json"
354+
onchange="updateManifest()">
355+
<p>Waveshare ESP32-S3-Touch-LCD-2: version 0.3.2</p>
356+
</label>
357+
<label><input type="radio" name="device"
358+
value="/manifests/Waveshare/ESP32-S3-Touch-LCD-2/Waveshare_ESP32-S3-Touch-LCD-2_0.2.x.json"
359+
onchange="updateManifest()">
360+
<p>Waveshare ESP32-S3-Touch-LCD-2: version 0.2.1</p>
361+
</label>
362+
<label><input type="radio" name="device"
363+
value="/manifests/Waveshare/ESP32-S3-Touch-LCD-2/Waveshare_ESP32-S3-Touch-LCD-2_0.1.1.json"
364+
onchange="updateManifest()">
365+
<p>Waveshare ESP32-S3-Touch-LCD-2: version 0.1.1</p>
366+
</label>
367+
<label><input type="radio" name="device"
368+
value="/manifests/Waveshare/ESP32-S3-Touch-LCD-2/Waveshare_ESP32-S3-Touch-LCD-2_0.0.9.json"
369+
onchange="updateManifest()">
370+
<p>Waveshare ESP32-S3-Touch-LCD-2: version 0.0.9</p>
371+
</label>
372+
<br />
373+
<label><input type="radio" name="device"
374+
value="/manifests/Fri3d-Camp/fri3d-2024/fri3d-2024_0.4.x.json"
375+
onchange="updateManifest()">
376+
<p>Fri3d Camp 2024 Badge: version 0.4.0</p>
377+
</label>
378+
<label><input type="radio" name="device"
379+
value="/manifests/Fri3d-Camp/fri3d-2024/fri3d-2024_0.3.x.json"
380+
onchange="updateManifest()">
381+
<p>Fri3d Camp 2024 Badge: version 0.3.2</p>
382+
</label>
383+
<label><input type="radio" name="device"
384+
value="/manifests/Fri3d-Camp/fri3d-2024/fri3d-2024_0.2.x.json"
385+
onchange="updateManifest()">
386+
<p>Fri3d Camp 2024 Badge: version 0.2.1</p>
387+
</label>
388+
<label><input type="radio" name="device"
389+
value="/manifests/Fri3d-Camp/fri3d-2024/fri3d-2024_0.1.1.json"
390+
onchange="updateManifest()">
391+
<p>Fri3d Camp 2024 Badge: version 0.1.1</p>
392+
</label>
393+
</div>
386394
</div>
395+
<!-- careful: if the user doesn't select anything and just leaves the default radio button selected, this will not be updated: -->
396+
<esp-web-install-button id="installButton"
397+
manifest="/manifests/esp32/MicroPythonOS_esp32_0.6.x.json"
398+
title="Your browser does not support WebSerial. Please use Chrome or Edge.">
399+
<button slot="activate" class="cta-button">Connect and install</button>
400+
<p slot="unsupported" class="unsupported-msg">
401+
Your browser does not support installing things on ESP devices. Use Google Chrome or
402+
Microsoft
403+
Edge.
404+
</p>
405+
</esp-web-install-button>
387406
</div>
388-
<!-- careful: if the user doesn't select anything and just leaves the default radio button selected, this will not be updated: -->
389-
<esp-web-install-button id="installButton" manifest="/manifests/esp32/MicroPythonOS_esp32_0.6.x.json"
390-
title="Your browser does not support WebSerial. Please use Chrome or Edge.">
391-
<button slot="activate" class="cta-button">Connect and install</button>
392-
<p slot="unsupported" class="unsupported-msg">
393-
Your browser does not support installing things on ESP devices. Use Google Chrome or Microsoft
394-
Edge.
395-
</p>
396-
</esp-web-install-button>
397-
</div>
398-
</section>
399-
<section class="instructions-section">
400-
<div class="container">
401-
<div class="instructions">
402-
<h2>How to Use</h2>
403-
<ol>
404-
<li>Connect the device to your computer via USB.</li>
405-
<li style="color: red;">Put it in bootloader mode (USB device ID 303a:1001):
406-
<ul>
407-
<li>if it already has MicroPythonOS installed, go to Settings - Restart to Bootloader
408-
</li>
409-
<li>to force bootloader mode, keep the IO0 (BOOT) button pressed while plugging in the
410-
USB cable</li>
411-
<li>or keep the IO0 (BOOT) button pressed while briefly pressing the reset button</li>
412-
</ul>
413-
It should show up as "303a:1001 Espressif USB JTAG/serial debug unit Systems Espressif
414-
Device" instead of a regular MicroPython REPL serial device like "303a:4001 Espressif
415-
Systems Espressif Device".
416-
</li>
417-
<li>After connecting it to your computer via USB, start up a webbrowser with WebSerial support
418-
like Chrome, Brave or Edge. If the browser was already running, you probably need to restart
419-
it.</li>
420-
<li>Click the "Install" button above.</li>
421-
<li>Select your device from the browser's serial port prompt.</li>
422-
<li>Follow the pop-up instructions to start the installation.</li>
423-
<li>After it's done, you may need to press the "RST" button on your device to restart normally.
424-
</li>
425-
</ol>
407+
</section>
408+
<section class="instructions-section">
409+
<div class="container">
410+
<div class="instructions">
411+
<h2>How to Use</h2>
412+
<ol>
413+
<li>Connect the device to your computer via USB.</li>
414+
<li style="color: red;">Put it in bootloader mode (USB device ID 303a:1001):
415+
<ul>
416+
<li>if it already has MicroPythonOS installed, go to Settings - Restart to
417+
Bootloader
418+
</li>
419+
<li>to force bootloader mode, keep the IO0 (BOOT) button pressed while plugging in
420+
the
421+
USB cable</li>
422+
<li>or keep the IO0 (BOOT) button pressed while briefly pressing the reset button
423+
</li>
424+
</ul>
425+
It should show up as "303a:1001 Espressif USB JTAG/serial debug unit Systems Espressif
426+
Device" instead of a regular MicroPython REPL serial device like "303a:4001 Espressif
427+
Systems Espressif Device".
428+
</li>
429+
<li>After connecting it to your computer via USB, start up a webbrowser with WebSerial
430+
support
431+
like Chrome, Brave or Edge. If the browser was already running, you probably need to
432+
restart
433+
it.</li>
434+
<li>Click the "Install" button above.</li>
435+
<li>Select your device from the browser's serial port prompt.</li>
436+
<li>Follow the pop-up instructions to start the installation.</li>
437+
<li>After it's done, you may need to press the "RST" button on your device to restart
438+
normally.
439+
</li>
440+
</ol>
441+
</div>
426442
</div>
427-
</div>
428-
</section>
443+
</section>
444+
</div>
429445
</main>
430446
<footer>
431447
<div class="container">

0 commit comments

Comments
 (0)