diff --git a/index.html b/index.html index 037820e..287b3ff 100644 --- a/index.html +++ b/index.html @@ -18,8 +18,11 @@ /> + +
+
-
+
-
+
-
+
-
+
-
+
-
+
- - + + + + + +
+ +
+
+ Exported image +
+ +
+ +
+
diff --git a/script.js b/script.js index 9e47708..88f5885 100644 --- a/script.js +++ b/script.js @@ -15,6 +15,9 @@ let drake; const mainContainer = document.querySelector("main"); const imagesBar = document.querySelector("#images-bar"); const dynamicStyles = document.querySelector("#dynamic-styles"); +const exportContainer = document.querySelector("#export-container"); +const exportedImage = document.querySelector("#exported-image"); +const blackout = document.querySelector("#blackout"); document.querySelectorAll(".tooltip").forEach((tooltip, index) => { const defaultColor = defaultColors[index]; @@ -94,6 +97,7 @@ function addRow(tierName = "New tier", defaultColor = "#778899") { // Options (i.e. right) const optionsDiv = document.createElement("div"); optionsDiv.className = "tier-options"; + optionsDiv.dataset.html2canvasIgnore = ""; const optionsContainer = document.createElement("div"); optionsContainer.className = "options-container"; @@ -235,3 +239,27 @@ function dynamicStyle(checkbox) { dynamicStyles.innerHTML = dynamicStyles.innerHTML.replace(importText, ""); } } + +async function exportImage() { + const canvas = await html2canvas(mainContainer, { + scale: 1.5, + windowWidth: 1080, + }); + exportedImage.src = canvas.toDataURL(); + + exportContainer.dataset.visibility = "visible"; + blackout.dataset.visibility = "visible"; +} + +function saveImage() { + const downloadLink = document.createElement("a"); + downloadLink.href = exportedImage.src; + downloadLink.download = "image.png"; + + downloadLink.click(); +} + +function hideBlackout() { + blackout.dataset.visibility = "hidden"; + exportContainer.dataset.visibility = "hidden"; +} diff --git a/styles.css b/styles.css index f7bcfad..bcdc323 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,6 @@ +@import "./styles/blackout.css"; +@import "./styles/export.css"; + :root { --black: #000; --white: #fff; @@ -149,10 +152,10 @@ p { border-bottom: 1px solid var(--buttons-color); } -#buttons-container button { +.button { border: none; border-radius: 3px; - height: 30px; + min-height: 30px; min-width: 100px; margin: 10px; color: var(--button-text); @@ -160,7 +163,7 @@ p { transition: ease 200ms; } -#buttons-container button:hover { +.button:hover { background-color: var(--button-hover); cursor: pointer; } diff --git a/styles/blackout.css b/styles/blackout.css new file mode 100644 index 0000000..89064d4 --- /dev/null +++ b/styles/blackout.css @@ -0,0 +1,15 @@ +#blackout { + position: fixed; + opacity: 0; + z-index: 1; + transition: opacity 300ms; + background-color: #000; + width: 100%; + height: 100%; + pointer-events: none; +} + +#blackout[data-visibility="visible"] { + opacity: 0.5; + pointer-events: all; +} diff --git a/styles/export.css b/styles/export.css new file mode 100644 index 0000000..7e4f2b8 --- /dev/null +++ b/styles/export.css @@ -0,0 +1,47 @@ +.export-container { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + opacity: 0; + z-index: 2; + transition: opacity 300ms; + box-sizing: border-box; + border-radius: 10px; + background-color: var(--white); + padding: 20px; + width: 100%; + pointer-events: none; +} + +.export-container[data-visibility="visible"] { + opacity: 1; + pointer-events: all; +} + +.exported-image-container { + max-height: 512px; + overflow-y: auto; +} + +.exported-image-container img { + vertical-align: top; + width: 100%; +} + +.export-button-container { + display: flex; + justify-content: center; + margin-top: 20px; +} + +.export-button-container button { + margin: 0; + padding: 10px 15px; +} + +@media (width >= 786px) { + .export-container { + max-width: 786px; + } +}