lily
/
bgleam
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: lily:61381e2d3c24bcd36410605e4920acea7dd3f3fa
Branches Tags
lily:main
..
compare: lily:99849e5db99aae6beb87cb4d9d91cd304685fd42
Branches Tags
lily:main

2 Commits
61381e2d3c ... 99849e5db9

Author SHA1 Message Date
Lily Rose 99849e5db9 Add pride flag lucy 2024-04-26 19:57:05 +10:00
Lily Rose 16c67b3b2e Add sleepy lucy 2024-04-26 18:32:12 +10:00
1 changed files with 171 additions and 145 deletions
Show Stats Expand all files Collapse all files

316
index.html
View File

@ -142,49 +142,62 @@
<p>Credit to <a href="https://github.com/giacomocavalieri">Jak</a> for the original design idea.</p> <p>Credit to <a href="https://github.com/giacomocavalieri">Jak</a> for the original design idea.</p>
</header> </header>
<form id="settings" oninput="updatePreview()" onchange="updateSaveHrefs()"> <form id="settings" oninput="updatePreview()" onchange="updateSaveHrefs()">
<label for="widthInput">Width</label> <label for="width">Width</label>
<input id="widthRange" name="widthRange" type="range" min="200" max="8192" value="1920" oninput="this.form.widthInput.value = this.value"> <input name="widthSlider" type="range" min="200" max="8192" value="1920" oninput="this.form.width.value = this.value">
<input id="widthInput" name="widthInput" type="number" min="200" max="8192" value="1920" oninput="this.form.widthRange.value = this.value"> <input id="width" name="width" type="number" min="200" max="8192" value="1920" oninput="this.form.widthSlider.value = this.value">
<label for="heightInput">Height</label> <label for="height">Height</label>
<input id="heightRange" name="heightRange" type="range" min="200" max="8192" value="1080" oninput="this.form.heightInput.value = this.value"> <input name="heightSlider" type="range" min="200" max="8192" value="1080" oninput="this.form.height.value = this.value">
<input id="heightInput" name="heightInput" type="number" min="200" max="8192" value="1080" oninput="this.form.heightRange.value = this.value"> <input id="height" name="height" type="number" min="200" max="8192" value="1080" oninput="this.form.heightSlider.value = this.value">
<label for="logoScaleInput">Logo Scale</label> <label for="logoScale">Logo Scale</label>
<input id="logoScaleRange" name="logoScaleRange" type="range" min="0.1" max="8" step=".01" value="0.7" oninput="this.form.logoScaleInput.value = this.value"> <input name="logoScaleSlider" type="range" min="0.1" max="8" step=".01" value="0.7" oninput="this.form.logoScale.value = this.value">
<input id="logoScaleInput" name="logoScaleInput" type="number" min="0.1" max="8" step=".01" value="0.7" oninput="this.form.logoScaleRange.value = this.value"> <input id="logoScale" name="logoScale" type="number" min="0.1" max="8" step=".01" value="0.7" oninput="this.form.logoScaleSlider.value = this.value">
<label for="logoRotationInput">Logo Rotation</label> <label for="logoRotation">Logo Rotation</label>
<input id="logoRotationRange" name="logoRotationRange" type="range" min="0" max="360" step=".5" value="348" oninput="this.form.logoRotationInput.value = this.value"> <input name="logoRotationSlider" type="range" min="0" max="360" step=".5" value="348" oninput="this.form.logoRotation.value = this.value">
<input id="logoRotationInput" name="logoRotationInput" type="number" min="0" max="360" step=".5" value="348" oninput="this.form.logoRotationRange.value = this.value"> <input id="logoRotation" name="logoRotation" type="number" min="0" max="360" step=".5" value="348" oninput="this.form.logoRotationSlider.value = this.value">
<label for="patternScaleInput">Pattern Scale</label> <label for="patternScale">Pattern Scale</label>
<input id="patternScaleRange" name="patternScaleRange" type="range" min="0.1" max="8" step=".01" value="1" oninput="this.form.patternScaleInput.value = this.value"> <input name="patternScaleSlider" type="range" min="0.1" max="8" step=".01" value="1" oninput="this.form.patternScale.value = this.value">
<input id="patternScaleInput" name="patternScaleInput" type="number" min="0.1" max="8" step=".01" value="1" oninput="this.form.patternScaleRange.value = this.value"> <input id="patternScale" name="patternScale" type="number" min="0.1" max="8" step=".01" value="1" oninput="this.form.patternScaleSlider.value = this.value">
<label for="patternSpacingInput">Pattern Spacing</label> <label for="patternSpacing">Pattern Spacing</label>
<input id="patternSpacingRange" name="patternSpacingRange" type="range" min="1" max="4" step=".01" value="1.1" oninput="this.form.patternSpacingInput.value = this.value"> <input name="patternSpacingSlider" type="range" min="1" max="4" step=".01" value="1.1" oninput="this.form.patternSpacing.value = this.value">
<input id="patternSpacingInput" name="patternSpacingInput" type="number" min="1" max="4" step=".01" value="1.1" oninput="this.form.patternSpacingRange.value = this.value"> <input id="patternSpacing" name="patternSpacing" type="number" min="1" max="4" step=".01" value="1.1" oninput="this.form.patternSpacingSlider.value = this.value">
<label for="patternRotationInput">Pattern Rotation</label> <label for="patternRotation">Pattern Rotation</label>
<input id="patternRotationRange" name="patternRotationRange" type="range" min="0" max="360" step=".5" value="325" oninput="this.form.patternRotationInput.value = this.value"> <input name="patternRotationSlider" type="range" min="0" max="360" step=".5" value="325" oninput="this.form.patternRotation.value = this.value">
<input id="patternRotationInput" name="patternRotationInput" type="number" min="0" max="360" step=".5" value="325" oninput="this.form.patternRotationRange.value = this.value"> <input id="patternRotation" name="patternRotation" type="number" min="0" max="360" step=".5" value="325" oninput="this.form.patternRotationSlider.value = this.value">
<label for="patternLucyRotationInput">Pattern Lucy Rotation</label> <label for="patternLucyRotation">Pattern Lucy Rotation</label>
<input id="patternLucyRotationRange" name="patternLucyRotationRange" type="range" min="0" max="360" step=".5" value="17.5" oninput="this.form.patternLucyRotationInput.value = this.value"> <input name="patternLucyRotationSlider" type="range" min="0" max="360" step=".5" value="17.5" oninput="this.form.patternLucyRotation.value = this.value">
<input id="patternLucyRotationInput" name="patternLucyRotationInput" type="number" min="0" max="360" step=".5" value="17.5" oninput="this.form.patternLucyRotationRange.value = this.value"> <input id="patternLucyRotation" name="patternLucyRotation" type="number" min="0" max="360" step=".5" value="17.5" oninput="this.form.patternLucyRotationSlider.value = this.value">
<label for="winkingLucyEnabledInput">Winking Lucy</label> <label>Flag Lucy</label>
<select id="flagLucy" name="flagLucy">
<option value="none" selected>None</option>
<option value="pride">Pride (rainbow)</option>
<option value="trans">Trans Pride</option>
<option value="lesbian">Lesbian Pride</option>
<option value="gay">Gay Pride</option>
<option value="bi">Bi Pride</option>
</select>
<label>Winking Lucy</label>
<div class="checkboxGroup"> <div class="checkboxGroup">
<label for="winkingLucyLEnabledInput">Left Eye</label> <label for="winkingLucyLEnabled">Left Eye</label>
<input id="winkingLucyLEnabledInput" name="winkingLucyLEnabledInput" type="checkbox"> <input id="winkingLucyLEnabled" name="winkingLucyLEnabled" type="checkbox">
<label for="winkingLucyREnabledInput">Right Eye</label> <label for="winkingLucyREnabled">Right Eye</label>
<input id="winkingLucyREnabledInput" name="winkingLucyREnabledInput" type="checkbox"> <input id="winkingLucyREnabled" name="winkingLucyREnabled" type="checkbox">
</div> </div>
<label for="colorSchemeInput">Color Scheme</label> <label for="sleepyLucyEnabled">Sleepy Lucy</label>
<select id="colorSchemeInput" name="colorSchemeInput"> <input id="sleepyLucyEnabled" name="sleepyLucyEnabled" type="checkbox">
<label for="colorScheme">Color Scheme</label>
<select id="colorScheme" name="colorScheme">
<option value="light" selected>Light</option> <option value="light" selected>Light</option>
<option value="dark">Dark</option> <option value="dark">Dark</option>
<option value="blurple">Blurple</option> <option value="blurple">Blurple</option>
@ -192,57 +205,57 @@
</select> </select>
<div id="colorSchemeInputs" class="hidden"> <div id="colorSchemeInputs" class="hidden">
<label for="textPrimaryColorInput">Text Primary Color</label> <label for="textPrimaryColor">Text Primary Color</label>
<input id="textPrimaryColorInput" name="textPrimaryColorInput" type="text" value="#ffaff3" oninput="this.form.textPrimaryColorPicker.value = normalizeColor(this.value)"> <input id="textPrimaryColor" name="textPrimaryColor" type="text" value="#ffaff3" oninput="this.form.textPrimaryColorPicker.value = normalizeColor(this.value)">
<input id="textPrimaryColorPicker" name="textPrimaryColorPicker" type="color" value="#ffaff3" oninput="this.form.textPrimaryColorInput.value = this.value"> <input name="textPrimaryColorPicker" type="color" value="#ffaff3" oninput="this.form.textPrimaryColor.value = this.value">
<label for="textShadowColorInput">Text Shadow Color</label> <label for="textShadowColor">Text Shadow Color</label>
<input id="textShadowColorInput" name="textShadowColorInput" type="text" value="#a6f0fc" oninput="this.form.textShadowColorPicker.value = normalizeColor(this.value)"> <input id="textShadowColor" name="textShadowColor" type="text" value="#a6f0fc" oninput="this.form.textShadowColorPicker.value = normalizeColor(this.value)">
<input id="textShadowColorPicker" name="textShadowColorPicker" type="color" value="#a6f0fc" oninput="this.form.textShadowColorInput.value = this.value"> <input name="textShadowColorPicker" type="color" value="#a6f0fc" oninput="this.form.textShadowColor.value = this.value">
<label for="lucyColorInput">Lucy Color</label> <label for="lucyColor">Lucy Color</label>
<input id="lucyColorInput" name="lucyColorInput" type="text" value="#ffaff3" oninput="this.form.lucyColorPicker.value = normalizeColor(this.value)"> <input id="lucyColor" name="lucyColor" type="text" value="#ffaff3" oninput="this.form.lucyColorPicker.value = normalizeColor(this.value)">
<input id="lucyColorPicker" name="lucyColorPicker" type="color" value="#ffaff3" oninput="this.form.lucyColorInput.value = this.value"> <input name="lucyColorPicker" type="color" value="#ffaff3" oninput="this.form.lucyColor.value = this.value">
<label for="lucyFaceColorInput">Lucy Face Color</label> <label for="lucyFaceColor">Lucy Face Color</label>
<input id="lucyFaceColorInput" name="lucyFaceColorInput" type="text" value="#fefefc" oninput="this.form.lucyFaceColorPicker.value = normalizeColor(this.value)"> <input id="lucyFaceColor" name="lucyFaceColor" type="text" value="#fefefc" oninput="this.form.lucyFaceColorPicker.value = normalizeColor(this.value)">
<input id="lucyFaceColorPicker" name="lucyFaceColorPicker" type="color" value="#fefefc" oninput="this.form.lucyFaceColorInput.value = this.value"> <input name="lucyFaceColorPicker" type="color" value="#fefefc" oninput="this.form.lucyFaceColor.value = this.value">
<label for="lambdaColorInput">Lambda Color</label> <label for="lambdaColor">Lambda Color</label>
<input id="lambdaColorInput" name="lambdaColorInput" type="text" value="#a6f0fc" oninput="this.form.lambdaColorPicker.value = normalizeColor(this.value)"> <input id="lambdaColor" name="lambdaColor" type="text" value="#a6f0fc" oninput="this.form.lambdaColorPicker.value = normalizeColor(this.value)">
<input id="lambdaColorPicker" name="lambdaColorPicker" type="color" value="#a6f0fc" oninput="this.form.lambdaColorInput.value = this.value"> <input name="lambdaColorPicker" type="color" value="#a6f0fc" oninput="this.form.lambdaColor.value = this.value">
<label for="outlineColorInput">Outline Color</label> <label for="outlineColor">Outline Color</label>
<input id="outlineColorInput" name="outlineColorInput" type="text" value="#fefefc" oninput="this.form.outlineColorPicker.value = normalizeColor(this.value)"> <input id="outlineColor" name="outlineColor" type="text" value="#fefefc" oninput="this.form.outlineColorPicker.value = normalizeColor(this.value)">
<input id="outlineColorPicker" name="outlineColorPicker" type="color" value="#fefefc" oninput="this.form.outlineColorInput.value = this.value"> <input name="outlineColorPicker" type="color" value="#fefefc" oninput="this.form.outlineColor.value = this.value">
<label for="backgroundColorInput">BG Color</label> <label for="backgroundColor">BG Color</label>
<input id="backgroundColorInput" name="backgroundColorInput" type="text" value="#fcc3fb" oninput="this.form.backgroundColorPicker.value = normalizeColor(this.value)"> <input id="backgroundColor" name="backgroundColor" type="text" value="#fcc3fb" oninput="this.form.backgroundColorPicker.value = normalizeColor(this.value)">
<input id="backgroundColorPicker" name="backgroundColorPicker" type="color" value="#fcc3fb" oninput="this.form.backgroundColorInput.value = this.value"> <input name="backgroundColorPicker" type="color" value="#fcc3fb" oninput="this.form.backgroundColor.value = this.value">
<label for="backgroundLucyColorInput">BG Lucy Color</label> <label for="backgroundLucyColor">BG Lucy Color</label>
<input id="backgroundLucyColorInput" name="backgroundLucyColorInput" type="text" value="#fdb7f6" oninput="this.form.backgroundLucyColorPicker.value = normalizeColor(this.value)"> <input id="backgroundLucyColor" name="backgroundLucyColor" type="text" value="#fdb7f6" oninput="this.form.backgroundLucyColorPicker.value = normalizeColor(this.value)">
<input id="backgroundLucyColorPicker" name="backgroundLucyColorPicker" type="color" value="#fdb7f6" oninput="this.form.backgroundLucyColorInput.value = this.value"> <input name="backgroundLucyColorPicker" type="color" value="#fdb7f6" oninput="this.form.backgroundLucyColor.value = this.value">
</div> </div>
<label for="vignetteEnabledInput">Vignette</label> <label for="vignetteEnabled">Vignette</label>
<input id="vignetteEnabledInput" name="vignetteEnabledInput" type="checkbox"> <input id="vignetteEnabled" name="vignetteEnabled" type="checkbox">
<div id="vignetteInputs" class="hidden"> <div id="vignetteInputs" class="hidden">
<label for="vignetteColorInput">Vignette Color</label> <label for="vignetteColor">Vignette Color</label>
<input id="vignetteColorInput" name="vignetteColorInput" type="text" value="#916dab" oninput="this.form.vignetteColorPicker.value = normalizeColor(this.value)"> <input id="vignetteColor" name="vignetteColor" type="text" value="#916dab" oninput="this.form.vignetteColorPicker.value = normalizeColor(this.value)">
<input id="vignetteColorPicker" name="vignetteColorPicker" type="color" value="#916dab" oninput="this.form.vignetteColorInput.value = this.value"> <input name="vignetteColorPicker" type="color" value="#916dab" oninput="this.form.vignetteColor.value = this.value">
<label for="vignetteStartInput">Vignette Start</label> <label for="vignetteStart">Vignette Start</label>
<input id="vignetteStartRange" name="vignetteStartRange" type="range" min="0" max="2" step=".01" value="0.3" oninput="this.form.vignetteStartInput.value = this.value"> <input name="vignetteStartSlider" type="range" min="0" max="2" step=".01" value="0.3" oninput="this.form.vignetteStart.value = this.value">
<input id="vignetteStartInput" name="vignetteStartInput" type="number" min="0" max="2" step=".01" value="0.3" oninput="this.form.vignetteStartRange.value = this.value"> <input id="vignetteStart" name="vignetteStart" type="number" min="0" max="2" step=".01" value="0.3" oninput="this.form.vignetteStartSlider.value = this.value">
<label for="vignetteEndInput">Vignette End</label> <label for="vignetteEnd">Vignette End</label>
<input id="vignetteEndRange" name="vignetteEndRange" type="range" min="0" max="2" step=".01" value="0.7" oninput="this.form.vignetteEndInput.value = this.value"> <input name="vignetteEndSlider" type="range" min="0" max="2" step=".01" value="0.7" oninput="this.form.vignetteEnd.value = this.value">
<input id="vignetteEndInput" name="vignetteEndInput" type="number" min="0" max="2" step=".01" value="0.7" oninput="this.form.vignetteEndRange.value = this.value"> <input id="vignetteEnd" name="vignetteEnd" type="number" min="0" max="2" step=".01" value="0.7" oninput="this.form.vignetteEndSlider.value = this.value">
<label for="vignetteBlendModeInput">Vignette Blend Mode</label> <label for="vignetteBlendMode">Vignette Blend Mode</label>
<select id="vignetteBlendModeInput" name="vignetteBlendModeInput"> <select id="vignetteBlendMode" name="vignetteBlendMode">
<option value="normal">Normal</option> <option value="normal">Normal</option>
<option value="multiply" selected>Multiply</option> <option value="multiply" selected>Multiply</option>
<option value="screen">Screen</option> <option value="screen">Screen</option>
@ -271,7 +284,11 @@
</div> </div>
<div id="preview"></div> <div id="preview"></div>
<script> <script>
const createSVG = ({ width, height, logoScale, logoRotation, patternScale, patternSpacing, patternRotation, patternLucyRotation, winkingLucyLEnabled, winkingLucyREnabled, colorScheme, vignetteEnabled, vignetteColor, vignetteStart, vignetteEnd, vignetteBlendMode }) => const createSVG = ({
width, height, logoScale, logoRotation, patternScale, patternSpacing, patternRotation,
patternLucyRotation, winkingLucyLEnabled, winkingLucyREnabled, sleepyLucyEnabled, flagLucy,
colorScheme, vignetteEnabled, vignetteColor, vignetteStart, vignetteEnd, vignetteBlendMode,
}) =>
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}"> `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}">
<defs> <defs>
<path id="lucy" d="M905.5 137.63c41.483-73.507 147.51-73.507 189 0l217.42 385.27c26.9 47.672 73.23 81.278 126.9 92.095l434.05 87.471c82.87 16.699 115.52 117.34 58.4 179.4l-299.67 325.58a188.15 188.15 0 0 0-48.49 149.06l50.83 439.33c9.69 83.71-75.98 146.04-152.89 110.88l-402.64-184.05a188.55 188.55 0 0 0-156.82 0l-402.63 184.05c-76.916 35.15-162.58-27.17-152.9-110.88l50.837-439.33c6.292-54.37-11.413-108.78-48.488-149.06l-299.68-325.58c-57.118-62.055-24.463-162.7 58.403-179.4l434.05-87.471c53.674-10.817 100-44.423 126.9-92.095z"/> <path id="lucy" d="M905.5 137.63c41.483-73.507 147.51-73.507 189 0l217.42 385.27c26.9 47.672 73.23 81.278 126.9 92.095l434.05 87.471c82.87 16.699 115.52 117.34 58.4 179.4l-299.67 325.58a188.15 188.15 0 0 0-48.49 149.06l50.83 439.33c9.69 83.71-75.98 146.04-152.89 110.88l-402.64-184.05a188.55 188.55 0 0 0-156.82 0l-402.63 184.05c-76.916 35.15-162.58-27.17-152.9-110.88l50.837-439.33c6.292-54.37-11.413-108.78-48.488-149.06l-299.68-325.58c-57.118-62.055-24.463-162.7 58.403-179.4l434.05-87.471c53.674-10.817 100-44.423 126.9-92.095z"/>
@ -299,15 +316,21 @@
<use href="#lambda" stroke-width="99" transform="translate(702 -12) scale(0.683)"/> <use href="#lambda" stroke-width="99" transform="translate(702 -12) scale(0.683)"/>
<use href="#lambda" transform="translate(10 196) rotate(24)"/> <use href="#lambda" transform="translate(10 196) rotate(24)"/>
</g> </g>
<g transform="translate(518 208) scale(0.13) rotate(31 1000 1000)"> <g transform="translate(518 208) scale(0.13) rotate(31 1000 1000)">${flagLucy !== undefined ? `
<use href="#lucy" fill="${colorScheme.lucy}" stroke="none"/> <mask id="lucy-mask" width="2000" height="2000" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha">
<path fill="none" stroke="${colorScheme.lucyFace}" stroke-width="80" d="M937 1194c16 69 110 69 126 0"/> <use href="#lucy"/>
${winkingLucyLEnabled ? </mask>
`<path fill="none" stroke="${colorScheme.lucyFace}" stroke-width="80" d="M603 978.5l85 50l-85 50"/>` : <g mask="url(#lucy-mask)">${(h => flagLucy.map((c, i) => `
`<circle fill="${colorScheme.lucyFace}" stroke="none" cx="678.6" cy="1049.6" r="78.571"/>`} <path fill="${c}" d="M0 ${i * h + 82}h2000v${h}h-2000z" />`).join())(1835 / flagLucy.length)}
${winkingLucyREnabled ? </g>` : `
`<path fill="none" stroke="${colorScheme.lucyFace}" stroke-width="80" d="M1397 978.5l-85 50l85 50"/>` : <use href="#lucy" fill="${colorScheme.lucy}" stroke="none"/>`}
`<circle fill="${colorScheme.lucyFace}" stroke="none" cx="1321.4" cy="1049.6" r="78.571"/>`} <path fill="none" stroke="${colorScheme.lucyFace}" stroke-width="80" d="M937 1194c16 69 110 69 126 0"/>${sleepyLucyEnabled ? `
<path fill="none" stroke="${colorScheme.lucyFace}" stroke-width="80" d="M607 994c16 69 110 69 126 0"/>
<path fill="none" stroke="${colorScheme.lucyFace}" stroke-width="80" d="M1267 994c16 69 110 69 126 0"/>` : `${winkingLucyLEnabled ? `
<path fill="none" stroke="${colorScheme.lucyFace}" stroke-width="80" d="M613 978.5l85 50l-85 50"/>` : `
<circle fill="${colorScheme.lucyFace}" stroke="none" cx="678.6" cy="1049.6" r="78.571"/>`}${winkingLucyREnabled ? `
<path fill="none" stroke="${colorScheme.lucyFace}" stroke-width="80" d="M1387 978.5l-85 50l85 50"/>` : `
<circle fill="${colorScheme.lucyFace}" stroke="none" cx="1321.4" cy="1049.6" r="78.571"/>`}`}
</g> </g>
<g fill="${colorScheme.textShadow}" stroke="none" transform="translate(-18 13)"> <g fill="${colorScheme.textShadow}" stroke="none" transform="translate(-18 13)">
<use href="#gleam"/> <use href="#gleam"/>
@ -330,52 +353,45 @@
<use href="#logo" x="50%" y="50%"/> <use href="#logo" x="50%" y="50%"/>
</svg>` </svg>`
const colors = {
faffPink: "#ffaff3",
unnamedBlue: "#a6f0fc",
white: "#fefefc",
lightPink: "#fcc3fb",
lightishPink: "#fdb7f6",
charcoal: "#2f2f2f",
blackish: "#202020",
faafPink: "#faaff3",
blurple: "#b3bbe2",
turquoise: "#a2f7e3",
pureWhite: "#ffffff",
lightBlue: "#b8d7e2",
lightBlurple: "#b5c5e2",
}
const colorSchemes = new Map(Object.entries({ const colorSchemes = new Map(Object.entries({
light: { light: {
textPrimary: colors.faffPink, textPrimary: "#ffaff3",
textShadow: colors.unnamedBlue, textShadow: "#a6f0fc",
lucy: colors.faffPink, lucy: "#ffaff3",
lucyFace: colors.white, lucyFace: "#fefefc",
lambda: colors.unnamedBlue, lambda: "#a6f0fc",
outline: colors.white, outline: "#fefefc",
background: colors.lightPink, background: "#fcc3fb",
backgroundLucy: colors.lightishPink, backgroundLucy: "#fdb7f6",
}, },
dark: { dark: {
textPrimary: colors.charcoal, textPrimary: "#2f2f2f",
textShadow: colors.faafPink, textShadow: "#faaff3",
lucy: colors.faffPink, lucy: "#ffaff3",
lucyFace: colors.charcoal, lucyFace: "#2f2f2f",
lambda: colors.charcoal, lambda: "#2f2f2f",
outline: colors.white, outline: "#fefefc",
background: colors.charcoal, background: "#2f2f2f",
backgroundLucy: colors.blackish, backgroundLucy: "#202020",
}, },
blurple: { blurple: {
textPrimary: colors.blurple, textPrimary: "#b3bbe2",
textShadow: colors.turquoise, textShadow: "#a2f7e3",
lucy: colors.blurple, lucy: "#b3bbe2",
lucyFace: colors.pureWhite, lucyFace: "#ffffff",
lambda: colors.turquoise, lambda: "#a2f7e3",
outline: colors.pureWhite, outline: "#ffffff",
background: colors.lightBlue, background: "#b8d7e2",
backgroundLucy: colors.lightBlurple, backgroundLucy: "#b5c5e2",
} },
}))
const flagColors = new Map(Object.entries({
pride: ["#f57189", "#ffb783", "#f0e68e", "#a3eb9e", "#a0d9e2", "#c1adf8"],
trans: ["#5bcefa", "#f5a9b8", "#ffffff", "#f5a9b8", "#5bcefa"],
lesbian: ["#d52d00", "#ff9a56", "#ffffff", "#d362a4", "#a30262"],
gay: ["#3d8a72", "#a8e5c3", "#ffffff", "#83addf", "#372274"],
bi: ["#d60270", "#9b4f96", "#0038a8"],
})) }))
const form = document.getElementById("settings") const form = document.getElementById("settings")
@ -397,36 +413,46 @@
const getFormData = () => { const getFormData = () => {
const formData = new FormData(form) const formData = new FormData(form)
const width = +formData.get("widthInput") const width = +formData.get("width")
const height = +formData.get("heightInput") const height = +formData.get("height")
const logoScale = +formData.get("logoScaleInput") const logoScale = +formData.get("logoScale")
const logoRotation = +formData.get("logoRotationInput") const logoRotation = +formData.get("logoRotation")
const patternScale = +formData.get("patternScaleInput") const patternScale = +formData.get("patternScale")
const patternSpacing = +formData.get("patternSpacingInput") const patternSpacing = +formData.get("patternSpacing")
const patternRotation = +formData.get("patternRotationInput") const patternRotation = +formData.get("patternRotation")
const patternLucyRotation = +formData.get("patternLucyRotationInput") const patternLucyRotation = +formData.get("patternLucyRotation")
const winkingLucyLEnabled = !!formData.get("winkingLucyLEnabledInput") const winkingLucyLEnabled = !!formData.get("winkingLucyLEnabled")
const winkingLucyREnabled = !!formData.get("winkingLucyREnabledInput") const winkingLucyREnabled = !!formData.get("winkingLucyREnabled")
const colorSchemeName = `${formData.get("colorSchemeInput")}` const sleepyLucyEnabled = !!formData.get("sleepyLucyEnabled")
const flagLucyName = `${formData.get("flagLucy")}`
const flagLucy = flagLucyName !== "none" ? flagColors.get(flagLucyName) : undefined
const colorSchemeName = `${formData.get("colorScheme")}`
const isCustomColorScheme = colorSchemeName === "custom" const isCustomColorScheme = colorSchemeName === "custom"
const colorScheme = isCustomColorScheme ? { const colorScheme = isCustomColorScheme ? {
textPrimary: `${formData.get("textPrimaryColorInput")}`, textPrimary: `${formData.get("textPrimaryColor")}`,
textShadow: `${formData.get("textShadowColorInput")}`, textShadow: `${formData.get("textShadowColor")}`,
lucy: `${formData.get("lucyColorInput")}`, lucy: `${formData.get("lucyColor")}`,
lucyFace: `${formData.get("lucyFaceColorInput")}`, lucyFace: `${formData.get("lucyFaceColor")}`,
lambda: `${formData.get("lambdaColorInput")}`, lambda: `${formData.get("lambdaColor")}`,
outline: `${formData.get("outlineColorInput")}`, outline: `${formData.get("outlineColor")}`,
background: `${formData.get("backgroundColorInput")}`, background: `${formData.get("backgroundColor")}`,
backgroundLucy: `${formData.get("backgroundLucyColorInput")}`, backgroundLucy: `${formData.get("backgroundLucyColor")}`,
} : colorSchemes.get(colorSchemeName) } : {
const vignetteEnabled = !!formData.get("vignetteEnabledInput") ...colorSchemes.get(colorSchemeName),
const vignetteColor = `${formData.get("vignetteColorInput")}` ...(flagLucy === undefined ? {} : { lucyFace: "#151515" })
const vignetteStart = +formData.get("vignetteStartInput") }
const vignetteEnd = +formData.get("vignetteEndInput") const vignetteEnabled = !!formData.get("vignetteEnabled")
const vignetteBlendMode = `${formData.get("vignetteBlendModeInput")}` const vignetteColor = `${formData.get("vignetteColor")}`
const props = { width, height, logoScale, logoRotation, patternScale, patternSpacing, patternRotation, patternLucyRotation, winkingLucyLEnabled, winkingLucyREnabled, colorScheme, vignetteEnabled, vignetteColor, vignetteStart, vignetteEnd, vignetteBlendMode } const vignetteStart = +formData.get("vignetteStart")
const vignetteEnd = +formData.get("vignetteEnd")
const vignetteBlendMode = `${formData.get("vignetteBlendMode")}`
const props = {
width, height, logoScale, logoRotation, patternScale, patternSpacing, patternRotation,
patternLucyRotation, winkingLucyLEnabled, winkingLucyREnabled, sleepyLucyEnabled, flagLucy,
colorScheme, vignetteEnabled, vignetteColor, vignetteStart, vignetteEnd, vignetteBlendMode,
}
const svg = createSVG(props) const svg = createSVG(props)
return { ...props, colorSchemeName, isCustomColorScheme, svg } return { ...props, flagLucyName, colorSchemeName, isCustomColorScheme, svg }
} }
let curData = getFormData() let curData = getFormData()