ritual.sh/layouts/shortcodes/button-generator.html

<div id="button-generator-app">
  <div class="generator-container">
    <div class="preview-section">
      <h3>Preview</h3>
      <div class="preview-container">
        <div class="preview-wrapper">
          <canvas id="button-canvas" width="88" height="31"></canvas>
        </div>
      </div>
      <button id="download-button" class="btn-primary">Download Button</button>

      <div class="presets-container">
        <h3>Presets</h3>
        <button id="preset-random" class="btn-secondary">Random Button</button>
        <button id="preset-classic" class="btn-secondary">Classic Style</button>
        <button id="preset-modern" class="btn-secondary">Modern Style</button>
      </div>
    </div>

    <div class="controls-section">
      <div class="control-group">
        <h3 class="control-group-header">
          <span>Text Line 1</span>
          <span class="toggle-icon">−</span>
        </h3>
        <div class="control-group-content">
          <label for="button-text">Text</label>
          <input
            type="text"
            id="button-text"
            value="RITUAL.SH"
            maxlength="20"
          />

          <label class="checkbox-label">
            <input type="checkbox" id="text-enabled" checked />
            <span>Enable Text Line 1</span>
          </label>

          <label for="font-size"
            >Font Size: <span id="font-size-value">14</span>px</label
          >
          <input type="range" id="font-size" min="6" max="24" value="14" />

          <label for="text-x"
            >Horizontal Position: <span id="text-x-value">50</span>%</label
          >
          <input type="range" id="text-x" min="0" max="100" value="50" />

          <label for="text-y"
            >Vertical Position: <span id="text-y-value">35</span>%</label
          >
          <input type="range" id="text-y" min="0" max="100" value="35" />

          <label for="text-color-type">Text Color Type</label>
          <select id="text-color-type">
            <option value="solid">Solid Color</option>
            <option value="gradient">Gradient</option>
          </select>

          <div id="text-solid-color">
            <label for="text-color">Text Color</label>
            <input type="color" id="text-color" value="#ffffff" />
          </div>

          <div id="text-gradient-color" style="display: none">
            <label for="text-gradient-color1">Gradient Color 1</label>
            <input type="color" id="text-gradient-color1" value="#ffffff" />

            <label for="text-gradient-color2">Gradient Color 2</label>
            <input type="color" id="text-gradient-color2" value="#00ffff" />

            <label for="text-gradient-angle"
              >Gradient Angle:
              <span id="text-gradient-angle-value">0</span>°</label
            >
            <input
              type="range"
              id="text-gradient-angle"
              min="0"
              max="360"
              value="0"
            />
          </div>

          <label class="checkbox-label">
            <input type="checkbox" id="text-outline" />
            <span>Outline</span>
          </label>
          <input
            type="color"
            id="outline-color"
            value="#000000"
            style="display: none"
          />

          <label for="font-family">Font</label>
          <select id="font-family">
            <option value="Lato">Lato</option>
            <option value="Roboto">Roboto</option>
            <option value="Open Sans">Open Sans</option>
            <option value="Montserrat">Montserrat</option>
            <option value="Oswald">Oswald</option>
            <option value="Bebas Neue">Bebas Neue</option>
            <option value="Roboto Mono">Roboto Mono</option>
            <option value="VT323">VT323</option>
            <option value="Press Start 2P">Press Start 2P</option>
            <option value="DSEG7-Classic">DSEG7</option>
          </select>

          <div class="checkbox-row">
            <label class="checkbox-label">
              <input type="checkbox" id="font-bold" />
              <span>Bold</span>
            </label>
            <label class="checkbox-label">
              <input type="checkbox" id="font-italic" />
              <span>Italic</span>
            </label>
          </div>
        </div>
      </div>

      <div class="control-group">
        <h3 class="control-group-header">
          <span>Text Line 2</span>
          <span class="toggle-icon">−</span>
        </h3>
        <div class="control-group-content">
          <label for="button-text2">Text</label>
          <input type="text" id="button-text2" value="" maxlength="20" />

          <label class="checkbox-label">
            <input type="checkbox" id="text2-enabled" />
            <span>Enable Text Line 2</span>
          </label>

          <label for="font-size2"
            >Font Size: <span id="font-size2-value">12</span>px</label
          >
          <input type="range" id="font-size2" min="6" max="24" value="12" />

          <label for="text2-x"
            >Horizontal Position: <span id="text2-x-value">50</span>%</label
          >
          <input type="range" id="text2-x" min="0" max="100" value="50" />

          <label for="text2-y"
            >Vertical Position: <span id="text2-y-value">65</span>%</label
          >
          <input type="range" id="text2-y" min="0" max="100" value="65" />

          <label for="text2-color-type">Text Color Type</label>
          <select id="text2-color-type">
            <option value="solid">Solid Color</option>
            <option value="gradient">Gradient</option>
          </select>

          <div id="text2-solid-color">
            <label for="text2-color">Text Color</label>
            <input type="color" id="text2-color" value="#ffffff" />
          </div>

          <div id="text2-gradient-color" style="display: none">
            <label for="text2-gradient-color1">Gradient Color 1</label>
            <input type="color" id="text2-gradient-color1" value="#ffffff" />

            <label for="text2-gradient-color2">Gradient Color 2</label>
            <input type="color" id="text2-gradient-color2" value="#00ffff" />

            <label for="text2-gradient-angle"
              >Gradient Angle:
              <span id="text2-gradient-angle-value">0</span>°</label
            >
            <input
              type="range"
              id="text2-gradient-angle"
              min="0"
              max="360"
              value="0"
            />
          </div>

          <label class="checkbox-label">
            <input type="checkbox" id="text2-outline" />
            <span>Outline</span>
          </label>
          <input
            type="color"
            id="outline2-color"
            value="#000000"
            style="display: none"
          />

          <label for="font-family2">Font</label>
          <select id="font-family2">
            <option value="Lato">Lato</option>
            <option value="Roboto">Roboto</option>
            <option value="Open Sans">Open Sans</option>
            <option value="Montserrat">Montserrat</option>
            <option value="Oswald">Oswald</option>
            <option value="Bebas Neue">Bebas Neue</option>
            <option value="Roboto Mono">Roboto Mono</option>
            <option value="VT323">VT323</option>
            <option value="Press Start 2P">Press Start 2P</option>
            <option value="DSEG7-Classic">DSEG7</option>
          </select>

          <div class="checkbox-row">
            <label class="checkbox-label">
              <input type="checkbox" id="font-bold2" />
              <span>Bold</span>
            </label>
            <label class="checkbox-label">
              <input type="checkbox" id="font-italic2" />
              <span>Italic</span>
            </label>
          </div>
        </div>
      </div>

      <div class="control-group">
        <h3 class="control-group-header">
          <span>Background</span>
          <span class="toggle-icon">−</span>
        </h3>
        <div class="control-group-content">
          <label for="bg-type">Background Type</label>
          <select id="bg-type">
            <option value="solid">Solid Color</option>
            <option value="gradient">Gradient</option>
            <option value="texture">Texture</option>
          </select>

          <div id="solid-controls">
            <label for="bg-color">Background Color</label>
            <input type="color" id="bg-color" value="#0066cc" />
          </div>

          <div id="gradient-controls" style="display: none">
            <label for="gradient-color1">Color 1</label>
            <input type="color" id="gradient-color1" value="#0066cc" />

            <label for="gradient-color2">Color 2</label>
            <input type="color" id="gradient-color2" value="#00ccff" />

            <label for="gradient-angle"
              >Angle: <span id="gradient-angle-value">90</span>°</label
            >
            <input
              type="range"
              id="gradient-angle"
              min="0"
              max="360"
              value="90"
            />
          </div>

          <div id="texture-controls" style="display: none">
            <label for="texture-type">Texture Pattern</label>
            <select id="texture-type">
              <option value="dots">Dots</option>
              <option value="grid">Grid</option>
              <option value="diagonal">Diagonal Lines</option>
              <option value="checkerboard">Checkerboard</option>
              <option value="noise">Noise</option>
              <option value="stars">Stars</option>
            </select>

            <label for="texture-color1">Base Color</label>
            <input type="color" id="texture-color1" value="#0066cc" />

            <label for="texture-color2">Pattern Color</label>
            <input type="color" id="texture-color2" value="#0099ff" />

            <label for="texture-scale"
              >Pattern Scale: <span id="texture-scale-value">50</span>%</label
            >
            <input
              type="range"
              id="texture-scale"
              min="10"
              max="100"
              value="50"
            />
          </div>
        </div>
      </div>

      <div class="control-group">
        <h3 class="control-group-header">
          <span>Border</span>
          <span class="toggle-icon">−</span>
        </h3>
        <div class="control-group-content">
          <label for="border-width"
            >Border Width: <span id="border-width-value">2</span>px</label
          >
          <input type="range" id="border-width" min="0" max="5" value="2" />

          <label for="border-color">Border Color</label>
          <input type="color" id="border-color" value="#000000" />

          <label for="border-style">Border Style</label>
          <select id="border-style">
            <option value="solid">Solid</option>
            <option value="inset">Inset (3D)</option>
            <option value="outset">Outset (3D)</option>
            <option value="ridge">Ridge</option>
          </select>
        </div>
      </div>
    </div>
  </div>
</div>