Fix saving and styling bugs
This commit is contained in:
Lily Rose
parent
2d308455b1
commit
b15305dc73
68
index.html
68
index.html
|
|
@ -2,7 +2,7 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<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">
|
||||
<link rel="shortcut icon" href="https://gleam.run/images/lucy/lucy.svg">
|
||||
<title>BGleam</title>
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
padding: 1rem;
|
||||
display: grid;
|
||||
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;
|
||||
align-items: center;
|
||||
align-content: start;
|
||||
|
|
@ -53,26 +53,35 @@
|
|||
white-space: nowrap;
|
||||
}
|
||||
#settings input, #settings select {
|
||||
grid-column-start: maininput;
|
||||
grid-column-end: end;
|
||||
padding: 0.5rem 0.7rem;
|
||||
font-size: 0.9rem;
|
||||
width: 100%;
|
||||
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"] {
|
||||
grid-column: maininput;
|
||||
}
|
||||
#settings input[type="number"] {
|
||||
grid-column: subinput;
|
||||
padding: 0.4rem 0.6rem;
|
||||
padding-right: 0;
|
||||
}
|
||||
#settings input[type="text"] {
|
||||
grid-column: maininput;
|
||||
padding: 0.4rem 0.6rem;
|
||||
}
|
||||
#settings input[type="checkbox"] {
|
||||
grid-column: maininput;
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
}
|
||||
#settings input[type="color"] {
|
||||
height: 2rem;
|
||||
grid-column: subinput;
|
||||
height: 100%;
|
||||
padding: 0.2rem;
|
||||
}
|
||||
#settings .checkboxGroup {
|
||||
|
|
@ -109,9 +118,6 @@
|
|||
#saveSVGButton:hover, #savePNGButton:hover {
|
||||
background-color: #52525e;
|
||||
}
|
||||
#saveSVGButton.disabled, #savePNGButton.disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
#colorSchemeInputs, #vignetteInputs {
|
||||
display: contents;
|
||||
}
|
||||
|
|
@ -186,28 +192,36 @@
|
|||
|
||||
<div id="colorSchemeInputs" class="hidden">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<label for="vignetteEnabledInput">Vignette</label>
|
||||
|
|
@ -215,7 +229,8 @@
|
|||
|
||||
<div id="vignetteInputs" class="hidden">
|
||||
<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>
|
||||
<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 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
|
||||
return { ...props, svg }
|
||||
}
|
||||
renderPreview()
|
||||
|
||||
const generateDownloadUrls = () => {
|
||||
saveSVGButton.classList.add("disabled")
|
||||
savePNGButton.classList.add("disabled")
|
||||
const svgElem = preview.firstChild
|
||||
const svg = (new XMLSerializer()).serializeToString(svgElem)
|
||||
savePNGButton.setAttribute("href", "#")
|
||||
saveSVGButton.setAttribute("href", "#")
|
||||
const { width, height, svg } = renderPreview()
|
||||
const svgBlob = new Blob([svg], { type: "image/svg+xml" })
|
||||
const svgUrl = window.URL.createObjectURL(svgBlob)
|
||||
saveSVGButton.setAttribute("href", svgUrl)
|
||||
saveSVGButton.classList.remove("disabled")
|
||||
const width = svgElem.width.baseVal.value
|
||||
const height = svgElem.height.baseVal.value
|
||||
img.width = width
|
||||
img.height = height
|
||||
canvas.width = width
|
||||
|
|
@ -432,7 +445,6 @@
|
|||
canvas.toBlob(pngBlob => {
|
||||
const pngUrl = window.URL.createObjectURL(pngBlob)
|
||||
savePNGButton.setAttribute("href", pngUrl)
|
||||
savePNGButton.classList.remove("disabled")
|
||||
}, "image/png")
|
||||
}
|
||||
img.src = svgUrl
|
||||
|
|
|
|||
Loading…
Reference in New Issue