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

Fix saving and styling bugs

This commit is contained in:
Lily Rose 2024-04-26 11:51:43 +10:00
parent 2d308455b1
commit b15305dc73
1 changed files with 40 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
index.html
View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=BG, initial-scale=1.0"> <meta name="viewport" content="initial-scale=1.0">
<meta name="color-scheme" content="dark"> <meta name="color-scheme" content="dark">
<link rel="shortcut icon" href="https://gleam.run/images/lucy/lucy.svg"> <link rel="shortcut icon" href="https://gleam.run/images/lucy/lucy.svg">
<title>BGleam</title> <title>BGleam</title>
@ -42,7 +42,7 @@
padding: 1rem; padding: 1rem;
display: grid; display: grid;
grid-gap: 1rem; grid-gap: 1rem;
grid-template-columns: [label] max-content [maininput] 1fr [subinput] 4.2em [end]; grid-template-columns: [label] min-content [maininput] 1fr [subinput] 4.2rem [end];
grid-template-rows: auto; grid-template-rows: auto;
align-items: center; align-items: center;
align-content: start; align-content: start;
@ -53,26 +53,35 @@
white-space: nowrap; white-space: nowrap;
} }
#settings input, #settings select { #settings input, #settings select {
grid-column-start: maininput; font-size: 0.9rem;
grid-column-end: end;
padding: 0.5rem 0.7rem;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
font-size: 0.9rem; }
#settings select {
grid-column-start: maininput;
grid-column-end: end;
padding: 0.4rem 0.6rem;
} }
#settings input[type="range"] { #settings input[type="range"] {
grid-column: maininput; grid-column: maininput;
} }
#settings input[type="number"] { #settings input[type="number"] {
grid-column: subinput; grid-column: subinput;
padding: 0.4rem 0.6rem;
padding-right: 0; padding-right: 0;
} }
#settings input[type="text"] {
grid-column: maininput;
padding: 0.4rem 0.6rem;
}
#settings input[type="checkbox"] { #settings input[type="checkbox"] {
grid-column: maininput;
width: 1.2rem; width: 1.2rem;
height: 1.2rem; height: 1.2rem;
} }
#settings input[type="color"] { #settings input[type="color"] {
height: 2rem; grid-column: subinput;
height: 100%;
padding: 0.2rem; padding: 0.2rem;
} }
#settings .checkboxGroup { #settings .checkboxGroup {
@ -109,9 +118,6 @@
#saveSVGButton:hover, #savePNGButton:hover { #saveSVGButton:hover, #savePNGButton:hover {
background-color: #52525e; background-color: #52525e;
} }
#saveSVGButton.disabled, #savePNGButton.disabled {
pointer-events: none;
}
#colorSchemeInputs, #vignetteInputs { #colorSchemeInputs, #vignetteInputs {
display: contents; display: contents;
} }
@ -186,28 +192,36 @@
<div id="colorSchemeInputs" class="hidden"> <div id="colorSchemeInputs" class="hidden">
<label for="textPrimaryColorInput">Text Primary Color</label> <label for="textPrimaryColorInput">Text Primary Color</label>
<input id="textPrimaryColorInput" name="textPrimaryColorInput" type="color" value="#ffaff3"> <input id="textPrimaryColorInput" name="textPrimaryColorInput" type="text" value="#ffaff3" oninput="this.form.textPrimaryColorPicker.value = this.value">
<input id="textPrimaryColorPicker" name="textPrimaryColorPicker" type="color" value="#ffaff3" oninput="this.form.textPrimaryColorInput.value = this.value">
<label for="textShadowColorInput">Text Shadow Color</label> <label for="textShadowColorInput">Text Shadow Color</label>
<input id="textShadowColorInput" name="textShadowColorInput" type="color" value="#a6f0fc"> <input id="textShadowColorInput" name="textShadowColorInput" type="text" value="#a6f0fc" oninput="this.form.textShadowColorPicker.value = this.value">
<input id="textShadowColorPicker" name="textShadowColorPicker" type="color" value="#a6f0fc" oninput="this.form.textShadowColorInput.value = this.value">
<label for="lucyColorInput">Lucy Color</label> <label for="lucyColorInput">Lucy Color</label>
<input id="lucyColorInput" name="lucyColorInput" type="color" value="#ffaff3"> <input id="lucyColorInput" name="lucyColorInput" type="text" value="#ffaff3" oninput="this.form.lucyColorPicker.value = this.value">
<input id="lucyColorPicker" name="lucyColorPicker" type="color" value="#ffaff3" oninput="this.form.lucyColorInput.value = this.value">
<label for="lucyFaceColorInput">Lucy Face Color</label> <label for="lucyFaceColorInput">Lucy Face Color</label>
<input id="lucyFaceColorInput" name="lucyFaceColorInput" type="color" value="#fefefc"> <input id="lucyFaceColorInput" name="lucyFaceColorInput" type="text" value="#fefefc" oninput="this.form.lucyFaceColorPicker.value = this.value">
<input id="lucyFaceColorPicker" name="lucyFaceColorPicker" type="color" value="#fefefc" oninput="this.form.lucyFaceColorInput.value = this.value">
<label for="lambdaColorInput">Lambda Color</label> <label for="lambdaColorInput">Lambda Color</label>
<input id="lambdaColorInput" name="lambdaColorInput" type="color" value="#a6f0fc"> <input id="lambdaColorInput" name="lambdaColorInput" type="text" value="#a6f0fc" oninput="this.form.lambdaColorPicker.value = this.value">
<input id="lambdaColorPicker" name="lambdaColorPicker" type="color" value="#a6f0fc" oninput="this.form.lambdaColorInput.value = this.value">
<label for="outlineColorInput">Outline Color</label> <label for="outlineColorInput">Outline Color</label>
<input id="outlineColorInput" name="outlineColorInput" type="color" value="#fefefc"> <input id="outlineColorInput" name="outlineColorInput" type="text" value="#fefefc" oninput="this.form.outlineColorPicker.value = this.value">
<input id="outlineColorPicker" name="outlineColorPicker" type="color" value="#fefefc" oninput="this.form.outlineColorInput.value = this.value">
<label for="backgroundColorInput">BG Color</label> <label for="backgroundColorInput">BG Color</label>
<input id="backgroundColorInput" name="backgroundColorInput" type="color" value="#fcc3fb"> <input id="backgroundColorInput" name="backgroundColorInput" type="text" value="#fcc3fb" oninput="this.form.backgroundColorPicker.value = this.value">
<input id="backgroundColorPicker" name="backgroundColorPicker" type="color" value="#fcc3fb" oninput="this.form.backgroundColorInput.value = this.value">
<label for="backgroundLucyColorInput">BG Lucy Color</label> <label for="backgroundLucyColorInput">BG Lucy Color</label>
<input id="backgroundLucyColorInput" name="backgroundLucyColorInput" type="color" value="#fdb7f6"> <input id="backgroundLucyColorInput" name="backgroundLucyColorInput" type="text" value="#fdb7f6" oninput="this.form.backgroundLucyColorPicker.value = this.value">
<input id="backgroundLucyColorPicker" name="backgroundLucyColorPicker" type="color" value="#fdb7f6" oninput="this.form.backgroundLucyColorInput.value = this.value">
</div> </div>
<label for="vignetteEnabledInput">Vignette</label> <label for="vignetteEnabledInput">Vignette</label>
@ -215,7 +229,8 @@
<div id="vignetteInputs" class="hidden"> <div id="vignetteInputs" class="hidden">
<label for="vignetteColorInput">Vignette Color</label> <label for="vignetteColorInput">Vignette Color</label>
<input id="vignetteColorInput" name="vignetteColorInput" type="color" value="#916dab"> <input id="vignetteColorInput" name="vignetteColorInput" type="text" value="#ffaff3" oninput="this.form.vignetteColorPicker.value = this.value">
<input id="vignetteColorPicker" name="vignetteColorPicker" type="color" value="#ffaff3" oninput="this.form.vignetteColorInput.value = this.value">
<label for="vignetteStartInput">Vignette Start</label> <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="vignetteStartRange" name="vignetteStartRange" type="range" min="0" max="2" step=".01" value="0.3" oninput="this.form.vignetteStartInput.value = this.value">
@ -407,22 +422,20 @@
const vignetteEnd = Number(form.vignetteEndInput.value) const vignetteEnd = Number(form.vignetteEndInput.value)
const vignetteBlendMode = form.vignetteBlendModeInput.value const vignetteBlendMode = form.vignetteBlendModeInput.value
const svg = createSVG({ width, height, logoScale, logoRotation, patternScale, patternSpacing, patternRotation, patternLucyRotation, winkingLucyLEnabled, winkingLucyREnabled, colorScheme, vignetteEnabled, vignetteColor, vignetteStart, vignetteEnd, vignetteBlendMode }) const props = { width, height, logoScale, logoRotation, patternScale, patternSpacing, patternRotation, patternLucyRotation, winkingLucyLEnabled, winkingLucyREnabled, colorScheme, vignetteEnabled, vignetteColor, vignetteStart, vignetteEnd, vignetteBlendMode }
const svg = createSVG(props)
preview.innerHTML = svg preview.innerHTML = svg
return { ...props, svg }
} }
renderPreview() renderPreview()
const generateDownloadUrls = () => { const generateDownloadUrls = () => {
saveSVGButton.classList.add("disabled") savePNGButton.setAttribute("href", "#")
savePNGButton.classList.add("disabled") saveSVGButton.setAttribute("href", "#")
const svgElem = preview.firstChild const { width, height, svg } = renderPreview()
const svg = (new XMLSerializer()).serializeToString(svgElem)
const svgBlob = new Blob([svg], { type: "image/svg+xml" }) const svgBlob = new Blob([svg], { type: "image/svg+xml" })
const svgUrl = window.URL.createObjectURL(svgBlob) const svgUrl = window.URL.createObjectURL(svgBlob)
saveSVGButton.setAttribute("href", svgUrl) saveSVGButton.setAttribute("href", svgUrl)
saveSVGButton.classList.remove("disabled")
const width = svgElem.width.baseVal.value
const height = svgElem.height.baseVal.value
img.width = width img.width = width
img.height = height img.height = height
canvas.width = width canvas.width = width
@ -432,7 +445,6 @@
canvas.toBlob(pngBlob => { canvas.toBlob(pngBlob => {
const pngUrl = window.URL.createObjectURL(pngBlob) const pngUrl = window.URL.createObjectURL(pngBlob)
savePNGButton.setAttribute("href", pngUrl) savePNGButton.setAttribute("href", pngUrl)
savePNGButton.classList.remove("disabled")
}, "image/png") }, "image/png")
} }
img.src = svgUrl img.src = svgUrl