wip: write new rgb ears build guide for 39c3

assets/css/style.css

@@ -60,6 +60,11 @@
     text-decoration-color: var(--accent-color);
   }
 
+  ul li::marker {
+    color: color-mix(in hsl, var(--accent-color) 50%, var(--fg-color) 50%);
+    font-size: larger;
+  }
+
   .title {
     text-align: center;
   }

rgb-ears-39c3.html

@@ -17,11 +17,11 @@
       }
 
       ol.step-by-step-instructions {
-        margin-top: 1rem;
+        margin-top: 1.5rem;
 
         li {
-          margin-top: 0.5rem;
+          margin-top: 1.5rem;
-          margin-bottom: 1rem;
+          margin-bottom: 1.5rem;
 
           &::marker {
             color: color-mix(in hsl, var(--accent-color) 50%, var(--fg-color) 50%);
@@ -42,6 +42,10 @@
             flex-shrink: 0;
             flex-grow: 0;
           }
+
+          img {
+            margin-bottom: 3rem;
+          }
         }
       }
 
@@ -147,7 +151,15 @@
           The general project assembly looks like this where each of the components must be connected via soldering points.
         </p>
 
-        <div style="display: flex; justify-content: center;">
+        <div style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
+          <img
+            class="hero-img detail-hide-short"
+            style="aspect-ratio: 16/10;"
+            alt="A picture of an assembled set of LED catears"
+            srcset="assets/img/rgb-ears-39c3/22_1280.webp 1280w,
+              assets/img/rgb-ears-39c3/22_1920.webp 1920w,
+              assets/img/rgb-ears-39c3/22_6845.webp 6845w"
+          />
           <pre role="presentation" aria-description="ASCII drawing of the project assembly containing the parts included in the kit.">
 ┌─────┐                          ╭───╮
 │ ESP ├┄┄╼ ╾┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄│   │
@@ -164,17 +176,42 @@
           </p>
           <nav>
             <ol class="toc">
+              <li><a href="#kit-content">Kit Content</a></li>
               <li><a href="#step-1">Flash the microcontroller</a></li>
               <li><a href="#step-2">Solder cables to LED strip</a></li>
               <li><a href="#step-3">Solder cables to pluggable connector</a></li>
               <li><a href="#step-4">Solder cables to Microcontroller</a></li>
-              <li><a href="#step-5">Test It!</a></li>
+              <li><a href="#step-5">Finalize the Assembly</a></li>
-              <li><a href="#step-6">Finalize the Assembly</a></li>
             </ol>
           </nav>
         </div>
       </section>
 
+      <section id="kit-content" class="detail-hide-short">
+        <h2>Kit Content&nbsp<a href="#kit-content">§</a></h2>
+        <p>
+          Out kits contain the following content:
+        </p>
+        <img
+          class="hero-img"
+          style="aspect-ratio: 16/10;"
+          alt="A picture of the kit content layed out on a rat mat. It contains the items listed below"
+          srcset="assets/img/rgb-ears-39c3/1_1280.webp 1280w,
+            assets/img/rgb-ears-39c3/1_1919.webp 1919w,
+            assets/img/rgb-ears-39c3/1_6928.webp 6982w"
+        />
+        <ul>
+          <li>A 3D printed case for the microcontroller, here shown in bright green</li>
+          <li>An ESP microcontroller</li>
+          <li>An RGB LED strip, shown at the very bottom of the picture</li>
+          <li>One pluggable connector with three separate wires connected to each end separated into two pieces and shown at the top of the pictures</li>
+          <li>One 10cm long, clear piece of heatshrink</li>
+          <li>One 10cm long, small, black piece of heatshrink</li>
+          <li>One 10cm long, large, black piece of heatshrink</li>
+          <li>One long cable</li>
+        </ul>
+      </section>
+
 
       <section id="step-1">
         <h2>Flash the microcontroller&nbsp<a href="#step-1">§</a></h2>
@@ -200,7 +237,7 @@
           <li class="detail-hide-short">
             <div>
               <label for="go-to-wled-install">
-                Go to <a href="http://wled-install.github.io" rel="external">WLED-Install</a> and follow the instructions there.
+                Go to <a href="https://install.wled.me/" rel="external">WLED-Install</a> and follow the instructions there.
 
                 <span class="detail-hide-simplified"><br>
                   If your browser supports the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API" rel="external">Web Serial API</a> (i.e. is Chromium based), you can flash the microcontroller directly from it by pressing the <q>Install</q> button.
@@ -237,19 +274,40 @@
         <p>
           One of the most important steps is to electircally connect the microcontroller to the LED strip.
           We will start with the LED side.
-
+        </p>
-          <label class="detail-hide-short"><br>
+        <p class="detail-hide-short detail-hide-simplified">
-            Basically, the LED strip has three connections. One for data, one for ground and one for voltage.
+          Basically, the LED strip has three connections. One for data, one for ground and one for voltage.
-            Each of these three functions requires a separately soldered connection.
+          Each of these three functions requires a separately soldered connection.
-          </label>
+        </p>
+        <p class="detail-hide-short">
+          Make sure to <u>solder to the <b>input</b> side of the LED strip</u>.
         </p>
 
-        <figure class="detail-hide-simplified detail-hide-short">
+        <figure class="detail-hide-short detail-hide-simplified">
-          <span>TODO: Make the images appear horizontally on large screens</span>
+          <img
-          <img src="assets/img/rgb-guide-strip.webp" alt="Picture of the backside of an LED strip with its contacts exposed. Three labeled arrows explain which connector carries what" class="hero-img"/>
+            class="hero-img"
-          <span>TODO: Actually take a picture of the cables too</span>
+            style="aspect-ratio: 16/10;"
-          <img src="assets/img/rgb-guide-strip.webp" alt="Picture of a three-core wire with its insulation stripped off. The three cores are labeled similarly to the picture of the LED strip" class="hero-img" />
+            width=500
+            alt="A picture of the backside of an LED strip exposed. The ou label is visible on the part of it not connected to another strip segment."
+            srcset="assets/img/rgb-ears-39c3/2_1280.webp 1280w,
+              assets/img/rgb-ears-39c3/2_1920.webp 1920w,
+              assets/img/rgb-ears-39c3/2_3032.webp 3032w"
+          />
+          <figcaption>The <u>wrong</u> side of the LED strip demontrated by the <q>ou</q> (out) label being on the outside.</figcaption>
         </figure>
+        <figure class="detail-hide-short detail-hide-simplified">
+          <img
+            class="hero-img"
+            style="aspect-ratio: 16/10;"
+            width=500
+            alt="A picture of the backside of an LED strip exposed. The in label is visible on the part of it not connected to another strip segment."
+            srcset="assets/img/rgb-ears-39c3/3_1280.webp 1280w,
+              assets/img/rgb-ears-39c3/3_1920.webp 1920w,
+              assets/img/rgb-ears-39c3/3_3273.webp 3273w"
+          />
+          <figcaption>The <u>correct</u> side of the LED strip demontrated by the <q>in</q> label being on the outside.</figcaption>
+        </figure>
+
         <ol class="step-by-step-instructions">
 
           <li class="detail-hide-short">
@@ -257,29 +315,57 @@
               <label for="prepare-led-cable">
                 Prepare the long cable for soldering by removing its insulation.
 
-                <span class="detail-hide-simplified"><br>
+                <p class="detail-hide-simplified">
-                  Strip about 1cm of insulation from one end of the long cable using your striping pliers.
+                  Strip about 1cm of insulation from one end of the long cable using your striping pliers.<br>
-                  There are three cores inside it which are individually insulated. Use something less hard (e.g. your fingernails) to carefully remove the indivudal insulation as well and expose the blank connectors.
+                  The three cores inside should be stripped with something softer and finer. Your fingernails are excellent for this purpose.
-                </span>
+                </p>
-                <details style="margin-top: 1rem;">
+                <img
-                  <summary>Picture</summary>
+                  class="hero-img detail-hide-simplified"
-                  <img src="assets/img/:invalid" alt="Picture of a three-core wire with its insulation stripped off. The three cores are labeled similarly to the picture of the LED strip" class="hero-img" />
+                  style="aspect-ratio: 16/10;"
-                </details>
+                  width=500
+                  alt="A picture of one end of the long wire but the insulation has been stripped off"
+                  srcset="assets/img/rgb-ears-39c3/4_1280.webp 1280w,
+                    assets/img/rgb-ears-39c3/4_1920.webp 1920w,
+                    assets/img/rgb-ears-39c3/4_3336.webp 3336w"
+                />
               </label>
               <input type="checkbox" id="prepare-led-cable">
             </div>
           </li>
 
+          <li>
+            <div>
+              <label for="expose-led-contacts">
+                <span>Expose the contacts of the LED strip.</span>
+
+                <p class="detail-hide-simplified">
+                  Peel back the protective paper from the <q>in</q> end of the LED strip.
+                  Also peel back the glue covering the protectors but only from the contacts, not from the whole strip segments.
+                </p>
+              </label>
+              <input type="checkbox" id="expose-led-contacts">
+            </div>
+          </li>
+
           <li>
             <div>
               <label for="solder-to-led-strip">
                 Solder the three cable cores to their corresponding connectors on the LED strip.
                 We use these combinations:
-                <dl class="key-value" style="margin-top: 1ch;">
+                <dl class="key-value" style="margin-block: 1rem;">
                   <dt>Red</dt><dd>+5V</dd>
-                  <dt>Green</dt><dd>Data</dd>
+                  <dt>Yellow</dt><dd>Data</dd>
                   <dt>Black</dt><dd>Ground</dd>
                 </dl>
+                <img
+                  class="hero-img detail-hide-simplified detail-hide-short"
+                  style="aspect-ratio: 16/10;"
+                  width=500
+                  alt="A picture of the long wire soldered to the LED strip"
+                  srcset="assets/img/rgb-ears-39c3/5_1280.webp 1280w,
+                    assets/img/rgb-ears-39c3/5_1920.webp 1920w,
+                    assets/img/rgb-ears-39c3/5_3200.webp 3200w"
+                />
               </label>
               <input type="checkbox" id="solder-to-led-strip">
             </div>
@@ -288,16 +374,23 @@
           <li class="detail-hide-short">
             <div>
               <label for="solder-heatshrink-to-led-strip">
-                Put a heatshrink over the connectors. TODO: Specify which heatshrink
+                Put a <u>2cm</u> piece of the <u>large black heatshrink</u> over the soldered connection.
 
-                <span class="detail-hide-simplified"><br>
+                <p class="detail-hide-simplified">
-                  Cut a TODO cm long part off the heatshrink and pull it over the soldered connections.
+                  You need to cut the 2cm piece off the included heatshrink yourself.
-                  Once it is centered, apply heat with your heatgun to hold everything in place.
+                  To apply it, place it over the soldering point so that all bits of connective material are covered but so that you hide as few LEDs as you can manage.
-                  <details style="margin-top: 1rem;">
+                  In that position, use your heat gun to fix everything into place.
-                    <summary>Picture</summary>
+                </p>
-                    <img src="assets/img/rgb-guide-soldered-isolated-strip.jpeg" alt="Picture of one end of the LED strip with a cable connected and heatshrink applied to the connection" class="hero-img"/>
+
-                  </details>
+                <img
-                </span>
+                  class="hero-img detail-hide-simplified"
+                  style="aspect-ratio: 16/10;"
+                  width=500
+                  alt="A picture of the led-to-cable-connection but with a heatshrink over the soldering points"
+                  srcset="assets/img/rgb-ears-39c3/12_1280.webp 1280w,
+                    assets/img/rgb-ears-39c3/12_1920.webp 1920w,
+                    assets/img/rgb-ears-39c3/12_6133.webp 6133w"
+                />
               </label>
               <input type="checkbox" id="solder-heatshrink-to-led-strip">
             </div>
@@ -316,22 +409,59 @@
           <li class="detail-hide-short">
             <div>
               <label for="prepare-led-cable2">
-                Remove the insulation from the free side of the long cable as well as one of the connector cables.
+                Remove the insulation from the unsoldered end of the long cable and grab the <u>male end of the plugs</u><span class="detail-hide-simplified">&nbsp(the one with the pins)</span>.
               </label>
               <input type="checkbox" id="prepare-led-cable2">
             </div>
           </li>
 
+          <li>
+            <div>
+              <label for="prepare-heatshrinks-on-connector">
+                <span>
+                Put the remainder of the large black heatshrink on the long cable.
+                Also put one equally long piece of the small black heatshrink on each of the pluggable connectors cables.
+                Do this <u>without applying heat</u>.
+                </span>
+
+                <p class="detail-hide-simplified detail-hide-short">
+                  The small heatshrinks need to be put in place now because they cannot be applied after soldering.
+                </p>
+
+                <img
+                  class="hero-img detail-hide-simplified detail-hide-short"
+                  style="aspect-ratio: 16/10;"
+                  width=500
+                  alt="A picture of the heatshrinks prepared as described"
+                  srcset="assets/img/rgb-ears-39c3/9_1280.webp 1280w,
+                    assets/img/rgb-ears-39c3/9_1920.webp 1920w,
+                    assets/img/rgb-ears-39c3/9_5824.webp 5842w"
+                />
+              </label>
+              <input type="checkbox" id="prepare-heatshrinks-on-connector">
+            </div>
+          </li>
+
           <li>
             <div>
               <label for="solder-to-connector">
                 Solder all the cable cores together in pairs.
                 We use these combinations:
                 <dl class="key-value" style="margin-top: 1ch;">
-                  <dt>Red (long cable)</dt><dd>TODO (connector)</dd>
+                  <dt>Red</dt><dd>Red</dd>
-                  <dt>Green (long cable)</dt><dd>TODO (connector)</dd>
+                  <dt>Black</dt><dd>Black</dd>
-                  <dt>Black (long cable)</dt><dd>TODO (connector)</dd>
+                  <dt>Yellow</dt><dd>White</dd>
                 </dl>
+
+                <img
+                  class="hero-img detail-hide-simplified detail-hide-short"
+                  style="aspect-ratio: 16/10; margin-top: 1rem;"
+                  width=500
+                  alt="A picture of the pluggable connector cables soldered to the cores of the long cable"
+                  srcset="assets/img/rgb-ears-39c3/10_1280.webp 1280w,
+                    assets/img/rgb-ears-39c3/10_1920.webp 1920w,
+                    assets/img/rgb-ears-39c3/10_4960.webp 4960w"
+                />
               </label>
               <input type="checkbox" id="solder-to-connector">
             </div>
@@ -340,9 +470,29 @@
           <li>
             <div>
               <label for="heatshrink-to-connector-long-cable-side">
-                TODO: how long of which heatshrink<br>
+                <span>Apply the prepared heatshrinks.</span>
-                Put a heatshrink over the connection.<br>
+                <span class="detail-hide-short">
-                Make sure that you wrap each cable core in heatshrink individually <b>and then</b> put an additional heatshrink over the whole connection as a whole.
+                  Make sure that you wrap each cable core in heatshrink individually <b>and then</b> put an additional heatshrink over the whole connection as a whole.
+                </span>
+
+                <img
+                  class="hero-img detail-hide-simplified detail-hide-short"
+                  style="aspect-ratio: 16/10; margin-top: 1rem;"
+                  width=500
+                  alt="A picture of the connection between long cable and plug where each core is protected by an individual heatshrink"
+                  srcset="assets/img/rgb-ears-39c3/11_1280.webp 1280w,
+                    assets/img/rgb-ears-39c3/11_1920.webp 1920w,
+                    assets/img/rgb-ears-39c3/11_5984.webp 5984w"
+                />
+                <img
+                  class="hero-img detail-hide-simplified detail-hide-short"
+                  style="aspect-ratio: 16/10; margin-top: 1rem;"
+                  width=500
+                  alt="A picture of the connection between long cable and plug where the connection is protected as a whole by one heatshrink"
+                  srcset="assets/img/rgb-ears-39c3/13_1280.webp 1280w,
+                    assets/img/rgb-ears-39c3/13_1920.webp 1920w,
+                    assets/img/rgb-ears-39c3/13_5888.webp 5888w"
+                />
               </label>
               <input type="checkbox" id="heatshrink-to-connector-long-cable-side">
             </div>
@@ -355,114 +505,164 @@
       <section id="step-4">
         <h2>Solder Pluggable Connector to Microcontroller&nbsp<a href="#step-4">§</a></h2>
         <p>
-          Now you need to solder the other part of the pluggable connector to your microcontroller.
+          Now you need to solder the other (female) part of the pluggable connector to your microcontroller.
         </p>
-        <p>
+        <div style="display: flex; flex-grow: 1; flex-wrap: wrap;">
-          TODO: Replace picture with actual ESP
+          <img
-        </p>
+            class="detail-hide-short detail-hide-short detail-hide-simplified"
-        <img src="assets/img/rgb-guide-esp-labeled.jpeg" alt="Picture of the microcontroller with labeled arrows pointing to the relevant contacts" class="hero-img detail-hide-short"/>
+            style="aspect-ratio: 1/1; flex-basis: 300px;"
-
+            width=300
+            alt="The front side of the included microcontroller"
+            srcset="assets/img/rgb-ears-39c3/14_1280.webp 1280w,
+              assets/img/rgb-ears-39c3/14_1920.webp 1920w,
+              assets/img/rgb-ears-39c3/14_2641.webp 2641w"
+          />
+          <img
+            class="detail-hide-short detail-hide-simplified"
+            style="aspect-ratio: 1/1; max-width: 300px;"
+            width=300
+            alt="The backside of the included microcontroller"
+            srcset="assets/img/rgb-ears-39c3/15_1280.webp 1280w,
+              assets/img/rgb-ears-39c3/15_1920.webp 1920w,
+              assets/img/rgb-ears-39c3/15_2757.webp 2757w"
+          />
+        </div>
         <ol class="step-by-step-instructions">
 
           <li>
             <div>
-              <label for="solder-ground-to-esp">
+              <label for="solder-plug-to-esp">
-                Solder <u>ground (black core)</u> to the microcontrollers <u>ground rail</u>.
+                Solder the female side of the pluggable connector to the microcontroller.
+
+                <dl class="key-value" style="margin-block: 1rem;">
+                  <dt>Red</dt><dd>5V</dd>
+                  <dt>Black</dt><dd>Ground</dd>
+                  <dt>White</dt><dd>GPIO 2</dd>
+                </dl>
+
+                <img
+                  class="detail-hide-simplified detail-hide-short"
+                  style="aspect-ratio: 16/10;"
+                  width=500
+                  alt="Picture of the cables of the pluggable connector soldered to the microcontroller"
+                  srcset="assets/img/rgb-ears-39c3/16_1280.webp 1280w,
+                    assets/img/rgb-ears-39c3/16_1920.webp 1920w,
+                    assets/img/rgb-ears-39c3/16_3064.webp 3064w"
+                />
               </label>
-              <input type="checkbox" id="solder-ground-to-esp">
+              <input type="checkbox" id="solder-plug-to-esp">
-            </div>
-          </li>
-
-          <li>
-            <div>
-              <label for="solder-power-to-esp">
-                Solder <u>charge (red core)</u> to the microcontrollers <u>+5V rail</u>.
-              </label>
-              <input type="checkbox" id="solder-power-to-esp">
-            </div>
-          </li>
-
-          <li>
-            <div>
-              <label for="solder-data-to-esp">
-                Solder <u>data (green core)</u> to the microcontrollers <u>GPIO 2</u> connector.<br>
-                <span class="detail-hide-simplified detail-hide-short">You can actually use any GPIO port but number two is the default configuration from WLED so for an easier setup experience, we recommend just sticking with it.</span>
-              </label>
-              <input type="checkbox" id="solder-data-to-esp">
-            </div>
-          </li>
-
-        </ol>
-      </section>
-
-
-      <section id="step-5">
-        <h2>Test It!&nbsp<a href="#step-5">§</a></h2>
-        <p>
-          Test the whole assembly by connecting the microcontroller to USB-C power.
-          The LEDs strip should turn on and glow in a warm orange tone.
-        </p>
-        <ol class="step-by-step-instructions">
-          <li>
-            <div>
-              <label for="test-assembly">
-                Test that LEDs turn on when power is connected to the microcontroller.
-              </label>
-              <input type="checkbox" id="test-assembly">
             </div>
           </li>
         </ol>
       </section>
 
 
-      <section id="step-6">
+      <section id="step-5">
         <h2>Finalize the Assembly&nbsp<a href="#step-6">§</a></h2>
         <ol class="step-by-step-instructions">
 
           <li>
             <div>
               <label for="place-esp-in-case">
-                Place the microcontroller in the included case.
+                <span>Place the microcontroller in the included case.</span>
 
-                <details class="detail-hide-short" style="margin-top: 1rem;">
+                <img
-                  <summary>Picture</summary>
+                  class="hero-img detail-hide-short"
-                  <img src="" alt="A picture of the microcontroller and how it is placed in its case." class="hero-image">
+                  style="aspect-ratio: 16/10; margin-top: 1rem;"
-                </details>
+                  width=500
+                  alt="Picture of the microcontroller nested into the open case"
+                  srcset="assets/img/rgb-ears-39c3/17_1280.webp 1280w,
+                    assets/img/rgb-ears-39c3/17_1920.webp w,
+                    assets/img/rgb-ears-39c3/17_6477.webp 6477w"
+                />
               </label>
               <input type="checkbox" id="place-esp-in-case">
             </div>
           </li>
 
+          <li>
+            <div>
+              <label for="prepare-heatshrinks-on-led-strip">
+                <span>Cut off <u>two 1cm long pieces of the clear heatshrink</u> and put them on long cable of the LED strip <b>without heating</b>.</span>
+                <img
+                  class="hero-img detail-hide-short detail-hide-simplified"
+                  style="aspect-ratio: 16/10; margin-top: 1rem;"
+                  width=500
+                  alt="Picture of the microcontroller nested into the open case"
+                  srcset="assets/img/rgb-ears-39c3/19_1280.webp 1280w,
+                    assets/img/rgb-ears-39c3/19_1920.webp 1920w,
+                    assets/img/rgb-ears-39c3/19_7352.webp 7352w"
+                />
+              </label>
+              <input type="checkbox" id="prepare-heatshrinks-on-led-strip">
+            </div>
+          </li>
+
           <li>
             <div>
               <label for="glue-leds-to-catears">
-                Attach the LED strip onto your favourite pair of catears.
+                <span>Attach the LED strip onto your favourite pair of catears.</span>
                 <span class="detail-hide-short">
                   The end of the LED strip should align with the outer corner of one of the ears.
+                  After you have aligned the first part, glue the remaining strip firmly onto the ears.
                 </span>
 
-                <span class="detail-hide-simplified detail-hide-short"><br>
+                <p class="detail-hide-simplified detail-hide-short">
                   The strip contains its own glue strip on the bottom.
                   To use it, peel off the protective cover (without also removing the glue coating) and start attaching it to your catears.
-                </span>
+                </p>
+
+                <img
+                  class="hero-img detail-hide-short"
+                  style="aspect-ratio: 16/10;"
+                  width=500
+                  alt="Picture of one cat ear with the LED strip partially applied. The image is focused on the alignment of the LED strip with the catear."
+                  srcset="assets/img/rgb-ears-39c3/20_1280.webp 1280w,
+                    assets/img/rgb-ears-39c3/20_1919.webp 1919w,
+                    assets/img/rgb-ears-39c3/20_5944.webp 5944w"
+                />
 
-                <details class="detail-hide-short" style="margin-top: 1rem;">
-                  <summary>Picture</summary>
-                  <img src="todo://" alt="Front and central picture of the LED strip glued to catears. The alignment of the strip is highlighted." class="hero-image">
-                </details>
               </label>
               <input type="checkbox" id="glue-leds-to-catears">
             </div>
           </li>
 
+          <li>
+            <div>
+              <label for="heatshrink-fasten-led-strip"
+                <span>
+                  To secure the LED strip, pull the two 1cm pieces of clear heatshrink over the ends and apply them there.
+                  Additionally, use the larger part of the clear heatshrink to secure the long cable to one of the ear holders.
+                </span>
+                <p class="detail-hide-short">
+                  Be careful to not apply too much heat. Otherwise, the plastic of the catears themselves might start to melt.
+                </p>
+                <img
+                  class="hero-img detail-hide-short"
+                  style="aspect-ratio: 16/10; margin-top: 1rem;"
+                  width=500
+                  alt="Picture of one cat ear with the LED strip partially applied. The image is focused on the alignment of the LED strip with the catear."
+                  srcset="assets/img/rgb-ears-39c3/21_1280.webp 1280w,
+                    assets/img/rgb-ears-39c3/21_1920.webp 1920w,
+                    assets/img/rgb-ears-39c3/21_7960.webp 7960w"
+                />
+              </label>
+              <input type="checkbox" id="heatshrink-fasten-led-strip">
+            </div>
+          </li>
+
         </ol>
+
+        <p>
+          Congratulations! You now have a freely customizable pair of RGB catears :3
+        </p>
+        <p>
+          Don't feel pressured to wear cat ears &ndash; you're perfectly fine without them.<br>
+          And remember: Trans rights are human rights.
+        </p>
       </section>
     </main>
     <footer>
-      <p>
-        Don't feel pressured to wear cat ears &ndash; you're perfectly fine without them.<br>
-        And remember: Trans rights are human rights.
-      </p>
       <p>
         Find us in the fediverse at <a href="https://chaos.social/@c3cat">c3cat@chaos.social</a>.
       </p>