607 lines
20 KiB
HTML
607 lines
20 KiB
HTML
<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>
|