Adding button generator
This commit is contained in:
Dan
parent
d22d127cac
commit
bdee635df0
11 changed files with 1458 additions and 6 deletions
315
layouts/shortcodes/button-generator.html
Normal file
315
layouts/shortcodes/button-generator.html
Normal file
|
|
@ -0,0 +1,315 @@
|
|||
<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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue