Add pride flag lucy
This commit is contained in:
Lily Rose
parent
16c67b3b2e
commit
99849e5db9
110
index.html
110
index.html
|
|
@ -174,6 +174,16 @@
|
|||
<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>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">
|
||||
<label for="winkingLucyLEnabled">Left Eye</label>
|
||||
|
|
@ -276,8 +286,8 @@
|
|||
<script>
|
||||
const createSVG = ({
|
||||
width, height, logoScale, logoRotation, patternScale, patternSpacing, patternRotation,
|
||||
patternLucyRotation, winkingLucyLEnabled, winkingLucyREnabled, sleepyLucyEnabled,
|
||||
colorScheme, vignetteEnabled, vignetteColor, vignetteStart, vignetteEnd, vignetteBlendMode
|
||||
patternLucyRotation, winkingLucyLEnabled, winkingLucyREnabled, sleepyLucyEnabled, flagLucy,
|
||||
colorScheme, vignetteEnabled, vignetteColor, vignetteStart, vignetteEnd, vignetteBlendMode,
|
||||
}) =>
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}">
|
||||
<defs>
|
||||
|
|
@ -306,8 +316,14 @@
|
|||
<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)">
|
||||
<use href="#lucy" fill="${colorScheme.lucy}" stroke="none"/>
|
||||
<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 ? `
|
||||
|
|
@ -337,52 +353,45 @@
|
|||
<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: colors.faffPink,
|
||||
textShadow: colors.unnamedBlue,
|
||||
lucy: colors.faffPink,
|
||||
lucyFace: colors.white,
|
||||
lambda: colors.unnamedBlue,
|
||||
outline: colors.white,
|
||||
background: colors.lightPink,
|
||||
backgroundLucy: colors.lightishPink,
|
||||
textPrimary: "#ffaff3",
|
||||
textShadow: "#a6f0fc",
|
||||
lucy: "#ffaff3",
|
||||
lucyFace: "#fefefc",
|
||||
lambda: "#a6f0fc",
|
||||
outline: "#fefefc",
|
||||
background: "#fcc3fb",
|
||||
backgroundLucy: "#fdb7f6",
|
||||
},
|
||||
dark: {
|
||||
textPrimary: colors.charcoal,
|
||||
textShadow: colors.faafPink,
|
||||
lucy: colors.faffPink,
|
||||
lucyFace: colors.charcoal,
|
||||
lambda: colors.charcoal,
|
||||
outline: colors.white,
|
||||
background: colors.charcoal,
|
||||
backgroundLucy: colors.blackish,
|
||||
textPrimary: "#2f2f2f",
|
||||
textShadow: "#faaff3",
|
||||
lucy: "#ffaff3",
|
||||
lucyFace: "#2f2f2f",
|
||||
lambda: "#2f2f2f",
|
||||
outline: "#fefefc",
|
||||
background: "#2f2f2f",
|
||||
backgroundLucy: "#202020",
|
||||
},
|
||||
blurple: {
|
||||
textPrimary: colors.blurple,
|
||||
textShadow: colors.turquoise,
|
||||
lucy: colors.blurple,
|
||||
lucyFace: colors.pureWhite,
|
||||
lambda: colors.turquoise,
|
||||
outline: colors.pureWhite,
|
||||
background: colors.lightBlue,
|
||||
backgroundLucy: colors.lightBlurple,
|
||||
}
|
||||
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"],
|
||||
}))
|
||||
|
||||
const form = document.getElementById("settings")
|
||||
|
|
@ -415,6 +424,8 @@
|
|||
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 isCustomColorScheme = colorSchemeName === "custom"
|
||||
const colorScheme = isCustomColorScheme ? {
|
||||
|
|
@ -426,7 +437,10 @@
|
|||
outline: `${formData.get("outlineColor")}`,
|
||||
background: `${formData.get("backgroundColor")}`,
|
||||
backgroundLucy: `${formData.get("backgroundLucyColor")}`,
|
||||
} : colorSchemes.get(colorSchemeName)
|
||||
} : {
|
||||
...colorSchemes.get(colorSchemeName),
|
||||
...(flagLucy === undefined ? {} : { lucyFace: "#151515" })
|
||||
}
|
||||
const vignetteEnabled = !!formData.get("vignetteEnabled")
|
||||
const vignetteColor = `${formData.get("vignetteColor")}`
|
||||
const vignetteStart = +formData.get("vignetteStart")
|
||||
|
|
@ -434,11 +448,11 @@
|
|||
const vignetteBlendMode = `${formData.get("vignetteBlendMode")}`
|
||||
const props = {
|
||||
width, height, logoScale, logoRotation, patternScale, patternSpacing, patternRotation,
|
||||
patternLucyRotation, winkingLucyLEnabled, winkingLucyREnabled, sleepyLucyEnabled,
|
||||
colorScheme, vignetteEnabled, vignetteColor, vignetteStart, vignetteEnd, vignetteBlendMode
|
||||
patternLucyRotation, winkingLucyLEnabled, winkingLucyREnabled, sleepyLucyEnabled, flagLucy,
|
||||
colorScheme, vignetteEnabled, vignetteColor, vignetteStart, vignetteEnd, vignetteBlendMode,
|
||||
}
|
||||
const svg = createSVG(props)
|
||||
return { ...props, colorSchemeName, isCustomColorScheme, svg }
|
||||
return { ...props, flagLucyName, colorSchemeName, isCustomColorScheme, svg }
|
||||
}
|
||||
|
||||
let curData = getFormData()
|
||||
|
|
|
|||
Loading…
Reference in New Issue