Compare commits
No commits in common. "99849e5db99aae6beb87cb4d9d91cd304685fd42" and "61381e2d3c24bcd36410605e4920acea7dd3f3fa" have entirely different histories.
99849e5db9
...
61381e2d3c
316
index.html
316
index.html
|
|
@ -142,62 +142,49 @@
|
|||
<p>Credit to <a href="https://github.com/giacomocavalieri">Jak</a> for the original design idea.</p>
|
||||
</header>
|
||||
<form id="settings" oninput="updatePreview()" onchange="updateSaveHrefs()">
|
||||
<label for="width">Width</label>
|
||||
<input name="widthSlider" type="range" min="200" max="8192" value="1920" oninput="this.form.width.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="widthInput">Width</label>
|
||||
<input id="widthRange" name="widthRange" type="range" min="200" max="8192" value="1920" oninput="this.form.widthInput.value = this.value">
|
||||
<input id="widthInput" name="widthInput" type="number" min="200" max="8192" value="1920" oninput="this.form.widthRange.value = this.value">
|
||||
|
||||
<label for="height">Height</label>
|
||||
<input name="heightSlider" type="range" min="200" max="8192" value="1080" oninput="this.form.height.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="heightInput">Height</label>
|
||||
<input id="heightRange" name="heightRange" type="range" min="200" max="8192" value="1080" oninput="this.form.heightInput.value = this.value">
|
||||
<input id="heightInput" name="heightInput" type="number" min="200" max="8192" value="1080" oninput="this.form.heightRange.value = this.value">
|
||||
|
||||
<label for="logoScale">Logo Scale</label>
|
||||
<input name="logoScaleSlider" type="range" min="0.1" max="8" step=".01" value="0.7" oninput="this.form.logoScale.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="logoScaleInput">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 id="logoScaleInput" name="logoScaleInput" type="number" min="0.1" max="8" step=".01" value="0.7" oninput="this.form.logoScaleRange.value = this.value">
|
||||
|
||||
<label for="logoRotation">Logo Rotation</label>
|
||||
<input name="logoRotationSlider" type="range" min="0" max="360" step=".5" value="348" oninput="this.form.logoRotation.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="logoRotationInput">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 id="logoRotationInput" name="logoRotationInput" type="number" min="0" max="360" step=".5" value="348" oninput="this.form.logoRotationRange.value = this.value">
|
||||
|
||||
<label for="patternScale">Pattern Scale</label>
|
||||
<input name="patternScaleSlider" type="range" min="0.1" max="8" step=".01" value="1" oninput="this.form.patternScale.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="patternScaleInput">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 id="patternScaleInput" name="patternScaleInput" type="number" min="0.1" max="8" step=".01" value="1" oninput="this.form.patternScaleRange.value = this.value">
|
||||
|
||||
<label for="patternSpacing">Pattern Spacing</label>
|
||||
<input name="patternSpacingSlider" type="range" min="1" max="4" step=".01" value="1.1" oninput="this.form.patternSpacing.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="patternSpacingInput">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 id="patternSpacingInput" name="patternSpacingInput" type="number" min="1" max="4" step=".01" value="1.1" oninput="this.form.patternSpacingRange.value = this.value">
|
||||
|
||||
<label for="patternRotation">Pattern Rotation</label>
|
||||
<input name="patternRotationSlider" type="range" min="0" max="360" step=".5" value="325" oninput="this.form.patternRotation.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="patternRotationInput">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 id="patternRotationInput" name="patternRotationInput" type="number" min="0" max="360" step=".5" value="325" oninput="this.form.patternRotationRange.value = this.value">
|
||||
|
||||
<label for="patternLucyRotation">Pattern Lucy Rotation</label>
|
||||
<input name="patternLucyRotationSlider" type="range" min="0" max="360" step=".5" value="17.5" oninput="this.form.patternLucyRotation.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="patternLucyRotationInput">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 id="patternLucyRotationInput" name="patternLucyRotationInput" type="number" min="0" max="360" step=".5" value="17.5" oninput="this.form.patternLucyRotationRange.value = this.value">
|
||||
|
||||
<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>
|
||||
<label for="winkingLucyEnabledInput">Winking Lucy</label>
|
||||
<div class="checkboxGroup">
|
||||
<label for="winkingLucyLEnabled">Left Eye</label>
|
||||
<input id="winkingLucyLEnabled" name="winkingLucyLEnabled" type="checkbox">
|
||||
<label for="winkingLucyLEnabledInput">Left Eye</label>
|
||||
<input id="winkingLucyLEnabledInput" name="winkingLucyLEnabledInput" type="checkbox">
|
||||
|
||||
<label for="winkingLucyREnabled">Right Eye</label>
|
||||
<input id="winkingLucyREnabled" name="winkingLucyREnabled" type="checkbox">
|
||||
<label for="winkingLucyREnabledInput">Right Eye</label>
|
||||
<input id="winkingLucyREnabledInput" name="winkingLucyREnabledInput" type="checkbox">
|
||||
</div>
|
||||
|
||||
<label for="sleepyLucyEnabled">Sleepy Lucy</label>
|
||||
<input id="sleepyLucyEnabled" name="sleepyLucyEnabled" type="checkbox">
|
||||
|
||||
<label for="colorScheme">Color Scheme</label>
|
||||
<select id="colorScheme" name="colorScheme">
|
||||
<label for="colorSchemeInput">Color Scheme</label>
|
||||
<select id="colorSchemeInput" name="colorSchemeInput">
|
||||
<option value="light" selected>Light</option>
|
||||
<option value="dark">Dark</option>
|
||||
<option value="blurple">Blurple</option>
|
||||
|
|
@ -205,57 +192,57 @@
|
|||
</select>
|
||||
|
||||
<div id="colorSchemeInputs" class="hidden">
|
||||
<label for="textPrimaryColor">Text Primary Color</label>
|
||||
<input id="textPrimaryColor" name="textPrimaryColor" type="text" value="#ffaff3" oninput="this.form.textPrimaryColorPicker.value = normalizeColor(this.value)">
|
||||
<input name="textPrimaryColorPicker" type="color" value="#ffaff3" oninput="this.form.textPrimaryColor.value = this.value">
|
||||
<label for="textPrimaryColorInput">Text Primary Color</label>
|
||||
<input id="textPrimaryColorInput" name="textPrimaryColorInput" 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">
|
||||
|
||||
<label for="textShadowColor">Text Shadow Color</label>
|
||||
<input id="textShadowColor" name="textShadowColor" type="text" value="#a6f0fc" oninput="this.form.textShadowColorPicker.value = normalizeColor(this.value)">
|
||||
<input name="textShadowColorPicker" type="color" value="#a6f0fc" oninput="this.form.textShadowColor.value = this.value">
|
||||
<label for="textShadowColorInput">Text Shadow Color</label>
|
||||
<input id="textShadowColorInput" name="textShadowColorInput" 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">
|
||||
|
||||
<label for="lucyColor">Lucy Color</label>
|
||||
<input id="lucyColor" name="lucyColor" type="text" value="#ffaff3" oninput="this.form.lucyColorPicker.value = normalizeColor(this.value)">
|
||||
<input name="lucyColorPicker" type="color" value="#ffaff3" oninput="this.form.lucyColor.value = this.value">
|
||||
<label for="lucyColorInput">Lucy Color</label>
|
||||
<input id="lucyColorInput" name="lucyColorInput" 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">
|
||||
|
||||
<label for="lucyFaceColor">Lucy Face Color</label>
|
||||
<input id="lucyFaceColor" name="lucyFaceColor" type="text" value="#fefefc" oninput="this.form.lucyFaceColorPicker.value = normalizeColor(this.value)">
|
||||
<input name="lucyFaceColorPicker" type="color" value="#fefefc" oninput="this.form.lucyFaceColor.value = this.value">
|
||||
<label for="lucyFaceColorInput">Lucy Face Color</label>
|
||||
<input id="lucyFaceColorInput" name="lucyFaceColorInput" 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">
|
||||
|
||||
<label for="lambdaColor">Lambda Color</label>
|
||||
<input id="lambdaColor" name="lambdaColor" type="text" value="#a6f0fc" oninput="this.form.lambdaColorPicker.value = normalizeColor(this.value)">
|
||||
<input name="lambdaColorPicker" type="color" value="#a6f0fc" oninput="this.form.lambdaColor.value = this.value">
|
||||
<label for="lambdaColorInput">Lambda Color</label>
|
||||
<input id="lambdaColorInput" name="lambdaColorInput" 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">
|
||||
|
||||
<label for="outlineColor">Outline Color</label>
|
||||
<input id="outlineColor" name="outlineColor" type="text" value="#fefefc" oninput="this.form.outlineColorPicker.value = normalizeColor(this.value)">
|
||||
<input name="outlineColorPicker" type="color" value="#fefefc" oninput="this.form.outlineColor.value = this.value">
|
||||
<label for="outlineColorInput">Outline Color</label>
|
||||
<input id="outlineColorInput" name="outlineColorInput" 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">
|
||||
|
||||
<label for="backgroundColor">BG Color</label>
|
||||
<input id="backgroundColor" name="backgroundColor" type="text" value="#fcc3fb" oninput="this.form.backgroundColorPicker.value = normalizeColor(this.value)">
|
||||
<input name="backgroundColorPicker" type="color" value="#fcc3fb" oninput="this.form.backgroundColor.value = this.value">
|
||||
<label for="backgroundColorInput">BG Color</label>
|
||||
<input id="backgroundColorInput" name="backgroundColorInput" 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">
|
||||
|
||||
<label for="backgroundLucyColor">BG Lucy Color</label>
|
||||
<input id="backgroundLucyColor" name="backgroundLucyColor" type="text" value="#fdb7f6" oninput="this.form.backgroundLucyColorPicker.value = normalizeColor(this.value)">
|
||||
<input name="backgroundLucyColorPicker" type="color" value="#fdb7f6" oninput="this.form.backgroundLucyColor.value = this.value">
|
||||
<label for="backgroundLucyColorInput">BG Lucy Color</label>
|
||||
<input id="backgroundLucyColorInput" name="backgroundLucyColorInput" 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">
|
||||
</div>
|
||||
|
||||
<label for="vignetteEnabled">Vignette</label>
|
||||
<input id="vignetteEnabled" name="vignetteEnabled" type="checkbox">
|
||||
<label for="vignetteEnabledInput">Vignette</label>
|
||||
<input id="vignetteEnabledInput" name="vignetteEnabledInput" type="checkbox">
|
||||
|
||||
<div id="vignetteInputs" class="hidden">
|
||||
<label for="vignetteColor">Vignette Color</label>
|
||||
<input id="vignetteColor" name="vignetteColor" type="text" value="#916dab" oninput="this.form.vignetteColorPicker.value = normalizeColor(this.value)">
|
||||
<input name="vignetteColorPicker" type="color" value="#916dab" oninput="this.form.vignetteColor.value = this.value">
|
||||
<label for="vignetteColorInput">Vignette Color</label>
|
||||
<input id="vignetteColorInput" name="vignetteColorInput" 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">
|
||||
|
||||
<label for="vignetteStart">Vignette Start</label>
|
||||
<input name="vignetteStartSlider" type="range" min="0" max="2" step=".01" value="0.3" oninput="this.form.vignetteStart.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="vignetteStartInput">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 id="vignetteStartInput" name="vignetteStartInput" type="number" min="0" max="2" step=".01" value="0.3" oninput="this.form.vignetteStartRange.value = this.value">
|
||||
|
||||
<label for="vignetteEnd">Vignette End</label>
|
||||
<input name="vignetteEndSlider" type="range" min="0" max="2" step=".01" value="0.7" oninput="this.form.vignetteEnd.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="vignetteEndInput">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 id="vignetteEndInput" name="vignetteEndInput" type="number" min="0" max="2" step=".01" value="0.7" oninput="this.form.vignetteEndRange.value = this.value">
|
||||
|
||||
<label for="vignetteBlendMode">Vignette Blend Mode</label>
|
||||
<select id="vignetteBlendMode" name="vignetteBlendMode">
|
||||
<label for="vignetteBlendModeInput">Vignette Blend Mode</label>
|
||||
<select id="vignetteBlendModeInput" name="vignetteBlendModeInput">
|
||||
<option value="normal">Normal</option>
|
||||
<option value="multiply" selected>Multiply</option>
|
||||
<option value="screen">Screen</option>
|
||||
|
|
@ -284,11 +271,7 @@
|
|||
</div>
|
||||
<div id="preview"></div>
|
||||
<script>
|
||||
const createSVG = ({
|
||||
width, height, logoScale, logoRotation, patternScale, patternSpacing, patternRotation,
|
||||
patternLucyRotation, winkingLucyLEnabled, winkingLucyREnabled, sleepyLucyEnabled, flagLucy,
|
||||
colorScheme, vignetteEnabled, vignetteColor, vignetteStart, vignetteEnd, vignetteBlendMode,
|
||||
}) =>
|
||||
const createSVG = ({ width, height, logoScale, logoRotation, patternScale, patternSpacing, patternRotation, patternLucyRotation, winkingLucyLEnabled, winkingLucyREnabled, colorScheme, vignetteEnabled, vignetteColor, vignetteStart, vignetteEnd, vignetteBlendMode }) =>
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}">
|
||||
<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"/>
|
||||
|
|
@ -316,21 +299,15 @@
|
|||
<use href="#lambda" stroke-width="99" transform="translate(702 -12) scale(0.683)"/>
|
||||
<use href="#lambda" transform="translate(10 196) rotate(24)"/>
|
||||
</g>
|
||||
<g transform="translate(518 208) scale(0.13) rotate(31 1000 1000)">${flagLucy !== undefined ? `
|
||||
<mask id="lucy-mask" width="2000" height="2000" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha">
|
||||
<use href="#lucy"/>
|
||||
</mask>
|
||||
<g mask="url(#lucy-mask)">${(h => flagLucy.map((c, i) => `
|
||||
<path fill="${c}" d="M0 ${i * h + 82}h2000v${h}h-2000z" />`).join())(1835 / flagLucy.length)}
|
||||
</g>` : `
|
||||
<use href="#lucy" fill="${colorScheme.lucy}" stroke="none"/>`}
|
||||
<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 transform="translate(518 208) scale(0.13) rotate(31 1000 1000)">
|
||||
<use href="#lucy" fill="${colorScheme.lucy}" stroke="none"/>
|
||||
<path fill="none" stroke="${colorScheme.lucyFace}" stroke-width="80" d="M937 1194c16 69 110 69 126 0"/>
|
||||
${winkingLucyLEnabled ?
|
||||
`<path fill="none" stroke="${colorScheme.lucyFace}" stroke-width="80" d="M603 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="M1397 978.5l-85 50l85 50"/>` :
|
||||
`<circle fill="${colorScheme.lucyFace}" stroke="none" cx="1321.4" cy="1049.6" r="78.571"/>`}
|
||||
</g>
|
||||
<g fill="${colorScheme.textShadow}" stroke="none" transform="translate(-18 13)">
|
||||
<use href="#gleam"/>
|
||||
|
|
@ -353,45 +330,52 @@
|
|||
<use href="#logo" x="50%" y="50%"/>
|
||||
</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({
|
||||
light: {
|
||||
textPrimary: "#ffaff3",
|
||||
textShadow: "#a6f0fc",
|
||||
lucy: "#ffaff3",
|
||||
lucyFace: "#fefefc",
|
||||
lambda: "#a6f0fc",
|
||||
outline: "#fefefc",
|
||||
background: "#fcc3fb",
|
||||
backgroundLucy: "#fdb7f6",
|
||||
textPrimary: colors.faffPink,
|
||||
textShadow: colors.unnamedBlue,
|
||||
lucy: colors.faffPink,
|
||||
lucyFace: colors.white,
|
||||
lambda: colors.unnamedBlue,
|
||||
outline: colors.white,
|
||||
background: colors.lightPink,
|
||||
backgroundLucy: colors.lightishPink,
|
||||
},
|
||||
dark: {
|
||||
textPrimary: "#2f2f2f",
|
||||
textShadow: "#faaff3",
|
||||
lucy: "#ffaff3",
|
||||
lucyFace: "#2f2f2f",
|
||||
lambda: "#2f2f2f",
|
||||
outline: "#fefefc",
|
||||
background: "#2f2f2f",
|
||||
backgroundLucy: "#202020",
|
||||
textPrimary: colors.charcoal,
|
||||
textShadow: colors.faafPink,
|
||||
lucy: colors.faffPink,
|
||||
lucyFace: colors.charcoal,
|
||||
lambda: colors.charcoal,
|
||||
outline: colors.white,
|
||||
background: colors.charcoal,
|
||||
backgroundLucy: colors.blackish,
|
||||
},
|
||||
blurple: {
|
||||
textPrimary: "#b3bbe2",
|
||||
textShadow: "#a2f7e3",
|
||||
lucy: "#b3bbe2",
|
||||
lucyFace: "#ffffff",
|
||||
lambda: "#a2f7e3",
|
||||
outline: "#ffffff",
|
||||
background: "#b8d7e2",
|
||||
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"],
|
||||
textPrimary: colors.blurple,
|
||||
textShadow: colors.turquoise,
|
||||
lucy: colors.blurple,
|
||||
lucyFace: colors.pureWhite,
|
||||
lambda: colors.turquoise,
|
||||
outline: colors.pureWhite,
|
||||
background: colors.lightBlue,
|
||||
backgroundLucy: colors.lightBlurple,
|
||||
}
|
||||
}))
|
||||
|
||||
const form = document.getElementById("settings")
|
||||
|
|
@ -413,46 +397,36 @@
|
|||
|
||||
const getFormData = () => {
|
||||
const formData = new FormData(form)
|
||||
const width = +formData.get("width")
|
||||
const height = +formData.get("height")
|
||||
const logoScale = +formData.get("logoScale")
|
||||
const logoRotation = +formData.get("logoRotation")
|
||||
const patternScale = +formData.get("patternScale")
|
||||
const patternSpacing = +formData.get("patternSpacing")
|
||||
const patternRotation = +formData.get("patternRotation")
|
||||
const patternLucyRotation = +formData.get("patternLucyRotation")
|
||||
const winkingLucyLEnabled = !!formData.get("winkingLucyLEnabled")
|
||||
const winkingLucyREnabled = !!formData.get("winkingLucyREnabled")
|
||||
const sleepyLucyEnabled = !!formData.get("sleepyLucyEnabled")
|
||||
const flagLucyName = `${formData.get("flagLucy")}`
|
||||
const flagLucy = flagLucyName !== "none" ? flagColors.get(flagLucyName) : undefined
|
||||
const colorSchemeName = `${formData.get("colorScheme")}`
|
||||
const width = +formData.get("widthInput")
|
||||
const height = +formData.get("heightInput")
|
||||
const logoScale = +formData.get("logoScaleInput")
|
||||
const logoRotation = +formData.get("logoRotationInput")
|
||||
const patternScale = +formData.get("patternScaleInput")
|
||||
const patternSpacing = +formData.get("patternSpacingInput")
|
||||
const patternRotation = +formData.get("patternRotationInput")
|
||||
const patternLucyRotation = +formData.get("patternLucyRotationInput")
|
||||
const winkingLucyLEnabled = !!formData.get("winkingLucyLEnabledInput")
|
||||
const winkingLucyREnabled = !!formData.get("winkingLucyREnabledInput")
|
||||
const colorSchemeName = `${formData.get("colorSchemeInput")}`
|
||||
const isCustomColorScheme = colorSchemeName === "custom"
|
||||
const colorScheme = isCustomColorScheme ? {
|
||||
textPrimary: `${formData.get("textPrimaryColor")}`,
|
||||
textShadow: `${formData.get("textShadowColor")}`,
|
||||
lucy: `${formData.get("lucyColor")}`,
|
||||
lucyFace: `${formData.get("lucyFaceColor")}`,
|
||||
lambda: `${formData.get("lambdaColor")}`,
|
||||
outline: `${formData.get("outlineColor")}`,
|
||||
background: `${formData.get("backgroundColor")}`,
|
||||
backgroundLucy: `${formData.get("backgroundLucyColor")}`,
|
||||
} : {
|
||||
...colorSchemes.get(colorSchemeName),
|
||||
...(flagLucy === undefined ? {} : { lucyFace: "#151515" })
|
||||
}
|
||||
const vignetteEnabled = !!formData.get("vignetteEnabled")
|
||||
const vignetteColor = `${formData.get("vignetteColor")}`
|
||||
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,
|
||||
}
|
||||
textPrimary: `${formData.get("textPrimaryColorInput")}`,
|
||||
textShadow: `${formData.get("textShadowColorInput")}`,
|
||||
lucy: `${formData.get("lucyColorInput")}`,
|
||||
lucyFace: `${formData.get("lucyFaceColorInput")}`,
|
||||
lambda: `${formData.get("lambdaColorInput")}`,
|
||||
outline: `${formData.get("outlineColorInput")}`,
|
||||
background: `${formData.get("backgroundColorInput")}`,
|
||||
backgroundLucy: `${formData.get("backgroundLucyColorInput")}`,
|
||||
} : colorSchemes.get(colorSchemeName)
|
||||
const vignetteEnabled = !!formData.get("vignetteEnabledInput")
|
||||
const vignetteColor = `${formData.get("vignetteColorInput")}`
|
||||
const vignetteStart = +formData.get("vignetteStartInput")
|
||||
const vignetteEnd = +formData.get("vignetteEndInput")
|
||||
const vignetteBlendMode = `${formData.get("vignetteBlendModeInput")}`
|
||||
const props = { width, height, logoScale, logoRotation, patternScale, patternSpacing, patternRotation, patternLucyRotation, winkingLucyLEnabled, winkingLucyREnabled, colorScheme, vignetteEnabled, vignetteColor, vignetteStart, vignetteEnd, vignetteBlendMode }
|
||||
const svg = createSVG(props)
|
||||
return { ...props, flagLucyName, colorSchemeName, isCustomColorScheme, svg }
|
||||
return { ...props, colorSchemeName, isCustomColorScheme, svg }
|
||||
}
|
||||
|
||||
let curData = getFormData()
|
||||
|
|
|
|||
Loading…
Reference in New Issue