Start of the rewrite to a modular system
This commit is contained in:
Dan
parent
2bfdc30caa
commit
4ac45367e5
29 changed files with 4414 additions and 588 deletions
|
|
@ -37,8 +37,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>
|
||||
<script type="module" src="{{ "js/button-generator/main.js" | relURL }}"></script>
|
||||
{{ end }}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -17,591 +17,6 @@
|
|||
</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 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>
|
||||
<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>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>
|
||||
<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>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>
|
||||
<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 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 class="controls-section"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
607
layouts/shortcodes/button-generator.html.backup
Normal file
607
layouts/shortcodes/button-generator.html.backup
Normal file
|
|
@ -0,0 +1,607 @@
|
|||
<div id="button-generator-app">
|
||||
<div class="generator-container">
|
||||
<div class="preview-section">
|
||||
<h3 class="hidden-md-down">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 hidden-md-down">
|
||||
<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 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>
|
||||
<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>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>
|
||||
<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>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>
|
||||
<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 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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue