Much more button gen stuff

assets/sass/pages/button-generator.scss

@@ -143,7 +143,7 @@
     image-rendering: pixelated;
     image-rendering: -moz-crisp-edges;
     image-rendering: crisp-edges;
-    border: 1px solid rgba(0, 150, 255, 0.4);
+    //border: 1px solid rgba(0, 150, 255, 0.4);
     box-shadow: 0 0 15px rgba(0, 150, 255, 0.2);
   }
 
@@ -159,7 +159,7 @@
       rgba(0, 100, 180, 0.15) 0%,
       rgba(0, 80, 150, 0.1) 100%
     );
-    padding: 1.5rem;
+    padding: 1rem;
     border-radius: 6px;
     border: 1px solid rgba(0, 150, 255, 0.3);
     box-shadow:
@@ -358,23 +358,48 @@
     font-weight: bold;
     transition: transform 0.3s ease;
     color: rgba(0, 150, 255, 0.8);
+  }
 
-    .control-group.collapsed & {
+  .control-group.collapsed .toggle-icon {
-      transform: rotate(180deg);
+    transform: rotate(180deg);
-    }
   }
 
   .control-group-content {
     overflow: hidden;
+    max-height: 2000px;
     transition:
       max-height 0.3s ease,
       opacity 0.3s ease;
+  }
 
-    .control-group.collapsed & {
+  .control-group.collapsed .control-group-content {
-      max-height: 0;
+    max-height: 0;
-      opacity: 0;
+    opacity: 0;
-      pointer-events: none;
+    pointer-events: none;
-    }
+  }
+
+  .info-text {
+    font-size: 0.85rem;
+    color: rgba(150, 200, 255, 0.7);
+    font-style: italic;
+    margin-bottom: 1rem;
+    padding: 0.5rem;
+    background: rgba(0, 100, 180, 0.1);
+    border-left: 3px solid rgba(0, 150, 255, 0.5);
+    border-radius: 2px;
+  }
+
+  h4 {
+    margin-top: 1.5rem;
+    margin-bottom: 0.75rem;
+    color: rgba(100, 180, 255, 0.85);
+    font-family: Verdana, "Trebuchet MS", Tahoma, sans-serif;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    font-size: 0.9rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid rgba(0, 150, 255, 0.3);
   }
 
   .checkbox-row {

assets/sass/pages/resources.scss

@@ -703,26 +703,26 @@
     &::before {
       content: "";
       position: absolute;
-      left: -4rem;
+      left: -2rem;
       top: 50%;
       transform: translateY(-50%);
       width: 3rem;
       height: 3px;
       background: linear-gradient(90deg, transparent, #0096ff);
-      box-shadow: 0 0 10px rgba(0, 150, 255, 0.8);
+      //box-shadow: 0 0 10px rgba(0, 150, 255, 0.8);
     }
 
     // Orange line on the right
     &::after {
       content: "";
       position: absolute;
-      right: -4rem;
+      right: -2rem;
       top: 50%;
       transform: translateY(-50%);
       width: 3rem;
       height: 3px;
       background: linear-gradient(90deg, #ff7800, transparent);
-      box-shadow: 0 0 10px rgba(255, 120, 0, 0.8);
+      //box-shadow: 0 0 10px rgba(255, 120, 0, 0.8);
     }
 
     @include media-up(md) {
@@ -730,15 +730,15 @@
 
       &::before,
       &::after {
-        width: 5rem;
+        width: 6rem;
       }
 
       &::before {
-        left: -6rem;
+        left: -2rem;
       }
 
       &::after {
-        right: -6rem;
+        right: -2rem;
       }
     }
   }

content/resources/button-generator/index.md

@@ -10,7 +10,7 @@ draft: false
 
 Welcome to my 88x31 button creator, this is a pretty rough and ready implementation so it could be buggy, please let me know if you find any issues.
 
-Currently this only supports static images and exports as png due to the basic `canvas` tag limitations. I have approximate plans for how to make this export gifs and potentially make animated buttons, please look forward to it.
+This supports gif despite the basic `canvas` tag limitation courtesy of [gif.js](https://github.com/jnordberg/gif.js) - none of this would be possible without that project.
 
 Big thanks to [neonaut's 88x31 archive](https://neonaut.neocities.org/cyber/88x31) and everyone who made the buttons that appear there. You should check it out if you need inspiration for your button!
 

layouts/_default/baseof.html

@@ -36,6 +36,7 @@
 
     <!-- Button Generator - only load if page content contains button-generator shortcode -->
     {{ if or (findRE "{{<\\s*button-generator" .RawContent) (findRE "{{%\\s*button-generator" .RawContent) }}
+    <script src="{{ "js/gif.js" | relURL }}"></script>
     {{ $buttonGenerator := resources.Get "js/button-generator.js" | resources.Minify | resources.Fingerprint }}
     <script src="{{ $buttonGenerator.RelPermalink }}" integrity="{{ $buttonGenerator.Data.Integrity }}"></script>
     {{ end }}

layouts/shortcodes/button-generator.html

@@ -121,6 +121,62 @@
         </div>
       </div>
 
+      <div class="control-group">
+        <h3 class="control-group-header">
+          <span>Text Line 1 Animation</span>
+          <span class="toggle-icon">−</span>
+        </h3>
+        <div class="control-group-content">
+          <label class="checkbox-label">
+            <input type="checkbox" id="animate-text-wave" />
+            <span>Wave Animation</span>
+          </label>
+          <div id="wave-controls" style="display: none">
+            <label for="wave-amplitude"
+              >Amplitude: <span id="wave-amplitude-value">3</span>px</label
+            >
+            <input
+              type="range"
+              id="wave-amplitude"
+              min="0"
+              max="10"
+              value="3"
+              step="0.5"
+            />
+
+            <label for="wave-speed"
+              >Speed: <span id="wave-speed-value">1.0</span>x</label
+            >
+            <input
+              type="range"
+              id="wave-speed"
+              min="0.5"
+              max="3"
+              value="1.0"
+              step="0.1"
+            />
+          </div>
+
+          <label class="checkbox-label">
+            <input type="checkbox" id="animate-text-rainbow" />
+            <span>Rainbow Text</span>
+          </label>
+          <div id="rainbow-text-controls" style="display: none">
+            <label for="text-rainbow-speed"
+              >Speed: <span id="text-rainbow-speed-value">1.0</span>x</label
+            >
+            <input
+              type="range"
+              id="text-rainbow-speed"
+              min="0.5"
+              max="5"
+              value="1.0"
+              step="0.1"
+            />
+          </div>
+        </div>
+      </div>
+
       <div class="control-group">
         <h3 class="control-group-header">
           <span>Text Line 2</span>
@@ -219,6 +275,62 @@
         </div>
       </div>
 
+      <div class="control-group">
+        <h3 class="control-group-header">
+          <span>Text Line 2 Animation</span>
+          <span class="toggle-icon">−</span>
+        </h3>
+        <div class="control-group-content">
+          <label class="checkbox-label">
+            <input type="checkbox" id="animate-text-wave2" />
+            <span>Wave Animation</span>
+          </label>
+          <div id="wave-controls2" style="display: none">
+            <label for="wave-amplitude2"
+              >Amplitude: <span id="wave-amplitude2-value">3</span>px</label
+            >
+            <input
+              type="range"
+              id="wave-amplitude2"
+              min="0"
+              max="10"
+              value="3"
+              step="0.5"
+            />
+
+            <label for="wave-speed2"
+              >Speed: <span id="wave-speed2-value">1.0</span>x</label
+            >
+            <input
+              type="range"
+              id="wave-speed2"
+              min="0.5"
+              max="3"
+              value="1.0"
+              step="0.1"
+            />
+          </div>
+
+          <label class="checkbox-label">
+            <input type="checkbox" id="animate-text-rainbow2" />
+            <span>Rainbow Text</span>
+          </label>
+          <div id="rainbow-text2-controls" style="display: none">
+            <label for="text-rainbow-speed2"
+              >Speed: <span id="text-rainbow-speed2-value">1.0</span>x</label
+            >
+            <input
+              type="range"
+              id="text-rainbow-speed2"
+              min="0.5"
+              max="5"
+              value="1.0"
+              step="0.1"
+            />
+          </div>
+        </div>
+      </div>
+
       <div class="control-group">
         <h3 class="control-group-header">
           <span>Background</span>
@@ -287,6 +399,37 @@
         </div>
       </div>
 
+      <div class="control-group">
+        <h3 class="control-group-header">
+          <span>Background Animation</span>
+          <span class="toggle-icon">−</span>
+        </h3>
+        <div class="control-group-content">
+          <label class="checkbox-label">
+            <input type="checkbox" id="animate-bg-rainbow" />
+            <span>Rainbow Flash</span>
+          </label>
+          <div id="rainbow-bg-controls" style="display: none">
+            <label for="rainbow-speed"
+              >Speed: <span id="rainbow-speed-value">0.5</span>x</label
+            >
+            <input
+              type="range"
+              id="rainbow-speed"
+              min="0.1"
+              max="3"
+              value="0.5"
+              step="0.1"
+            />
+          </div>
+
+          <label class="checkbox-label">
+            <input type="checkbox" id="animate-bg-rainbow-gradient" />
+            <span>Rainbow Gradient</span>
+          </label>
+        </div>
+      </div>
+
       <div class="control-group">
         <h3 class="control-group-header">
           <span>Border</span>
@@ -310,6 +453,155 @@
           </select>
         </div>
       </div>
+
+      <div class="control-group">
+        <h3 class="control-group-header">
+          <span>Special Effects</span>
+          <span class="toggle-icon">−</span>
+        </h3>
+        <div class="control-group-content">
+          <p class="info-text">
+            Almost all animations should stack, so pick as many as you want.
+          </p>
+
+          <label class="checkbox-label">
+            <input type="checkbox" id="animate-glitch" />
+            <span>Glitch Effect</span>
+          </label>
+          <div id="glitch-controls" style="display: none">
+            <label for="glitch-intensity"
+              >Intensity: <span id="glitch-intensity-value">3</span></label
+            >
+            <input
+              type="range"
+              id="glitch-intensity"
+              min="1"
+              max="10"
+              value="3"
+            />
+          </div>
+
+          <label class="checkbox-label">
+            <input type="checkbox" id="animate-pulse" />
+            <span>Pulse Effect</span>
+          </label>
+          <div id="pulse-controls" style="display: none">
+            <label for="pulse-scale"
+              >Scale: <span id="pulse-scale-value">1.1</span>x</label
+            >
+            <input
+              type="range"
+              id="pulse-scale"
+              min="1.0"
+              max="1.3"
+              value="1.1"
+              step="0.05"
+            />
+          </div>
+
+          <label class="checkbox-label">
+            <input type="checkbox" id="animate-shimmer" />
+            <span>Shimmer Effect</span>
+          </label>
+
+          <label class="checkbox-label">
+            <input type="checkbox" id="animate-scanline" />
+            <span>Scanline Effect</span>
+          </label>
+          <div id="scanline-controls" style="display: none">
+            <label for="scanline-intensity"
+              >Intensity: <span id="scanline-intensity-value">0.3</span></label
+            >
+            <input
+              type="range"
+              id="scanline-intensity"
+              min="0.1"
+              max="1"
+              value="0.3"
+              step="0.1"
+            />
+
+            <label for="scanline-speed"
+              >Speed: <span id="scanline-speed-value">1.0</span>x</label
+            >
+            <input
+              type="range"
+              id="scanline-speed"
+              min="0.5"
+              max="3"
+              value="1.0"
+              step="0.1"
+            />
+          </div>
+
+          <label class="checkbox-label">
+            <input type="checkbox" id="animate-rgb-split" />
+            <span>RGB Split Effect</span>
+          </label>
+          <div id="rgb-split-controls" style="display: none">
+            <label for="rgb-split-intensity"
+              >Intensity: <span id="rgb-split-intensity-value">2</span>px</label
+            >
+            <input
+              type="range"
+              id="rgb-split-intensity"
+              min="1"
+              max="5"
+              value="2"
+              step="0.5"
+            />
+          </div>
+
+          <label class="checkbox-label">
+            <input type="checkbox" id="animate-noise" />
+            <span>Noise Effect</span>
+          </label>
+          <div id="noise-controls" style="display: none">
+            <label for="noise-intensity"
+              >Intensity: <span id="noise-intensity-value">0.1</span></label
+            >
+            <input
+              type="range"
+              id="noise-intensity"
+              min="0.05"
+              max="0.5"
+              value="0.1"
+              step="0.05"
+            />
+          </div>
+          {{/*
+          <label class="checkbox-label">
+            <input type="checkbox" id="animate-rotate" />
+            <span>Rotate Effect</span>
+          </label>
+          <div id="rotate-controls" style="display: none">
+            <label for="rotate-angle"
+              >Max Angle: <span id="rotate-angle-value">5</span>°</label
+            >
+            <input
+              type="range"
+              id="rotate-angle"
+              min="2"
+              max="15"
+              value="5"
+              step="1"
+            />
+
+            <label for="rotate-speed"
+              >Speed: <span id="rotate-speed-value">1.0</span>x</label
+            >
+            <input
+              type="range"
+              id="rotate-speed"
+              min="0.5"
+              max="3"
+              value="1.0"
+              step="0.1"
+            />
+          </div>
+          */}}
+        </div>
+      </div>
     </div>
   </div>
 </div>