Much more button gen stuff
This commit is contained in:
Dan
parent
bdee635df0
commit
79a7557ea5
9 changed files with 1574 additions and 545 deletions
File diff suppressed because it is too large
Load diff
|
|
@ -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 & {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.control-group.collapsed .toggle-icon {
|
||||
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;
|
||||
opacity: 0;
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
BIN
content/media/taskmaster-champion-of-champions-4/canvas.png
Normal file
BIN
content/media/taskmaster-champion-of-champions-4/canvas.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -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!
|
||||
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
3
static/js/gif.js
Normal file
3
static/js/gif.js
Normal file
File diff suppressed because one or more lines are too long
3
static/js/gif.worker.js
Normal file
3
static/js/gif.worker.js
Normal file
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue