upgrayedd

data/scripts/darkMode.js

@@ -0,0 +1,7 @@
+rootStyles.setProperty('--background-color', '#1c1c1c');
+rootStyles.setProperty('--background-color-contrast', '#111');
+rootStyles.setProperty('--interactable-color', '#333');
+rootStyles.setProperty('--interactable-selected-color', '#444');
+rootStyles.setProperty('--input-color', '#555');
+rootStyles.setProperty('--font-color', '#fff');
+rootStyles.setProperty('--font-color-contrast', '#eee');

data/scripts/lightMode.js

@@ -0,0 +1,7 @@
+rootStyles.setProperty('--background-color', '#fafafa');
+rootStyles.setProperty('--background-color-contrast', '#222');
+rootStyles.setProperty('--interactable-color', '#aaa');
+rootStyles.setProperty('--interactable-selected-color', '#888');
+rootStyles.setProperty('--input-color', '#ddd');
+rootStyles.setProperty('--font-color', '#000');
+rootStyles.setProperty('--font-color-contrast', '#eee');

data/scripts/main.js

@@ -13,12 +13,13 @@ var selectedMaskImage = 0
 var selectedCardMasterElement
 var selectedTextObject
 var cardTextList = new Array()
-var manaSymbolCodeList = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "w", "u", "b", "r", "g", "2w", "2u", "2b", "2r", "2g", "pw", "pu", "pb", "pr", "pg", "wu", "wb", "ub", "ur", "br", "bg", "rg", "rw", "gw", "gu", "x", "s", "c", "t","untap", "e", "y", "z", "1/2", "inf", "chaos", "plane", "l+", "l-", "l0", "oldtap", "artistbrush", "bar", "whiteBrush", "blackBrush"];
-var manaSymbolImageList = [];
+var manaSymbolCodeList = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "w", "u", "b", "r", "g", "2w", "2u", "2b", "2r", "2g", "pw", "pu", "pb", "pr", "pg", "wu", "wb", "ub", "ur", "br", "bg", "rg", "rw", "gw", "gu", "x", "s", "c", "t","untap", "e", "y", "z", "1/2", "inf", "chaos", "plane", "l+", "l-", "l0", "oldtap", "artistbrush", "bar", "whiteBrush", "blackBrush"]
+var manaSymbolImageList = []
 manaSymbolCodeList.forEach((item, index) => {manaSymbolImageList[index] = new Image(); manaSymbolImageList[index].src = 'data/images/manaSymbols/' + index + '.png'})
 date = new Date()
 var cornerCutout = new Image()
 cornerCutout.src = 'data/images/cornerCutout.png'
+let rootStyles = document.documentElement.style
 
 function newCanvas(name) {
 	window[name + 'Canvas'] = document.createElement('canvas')
@@ -99,6 +100,7 @@ class cardPlaceholder {
 		uniqueNumberTracker += 1
 	}
 	draw() {
+		mainContext.globalAlpha = 1
 		mainContext.drawImage(this.whatToDraw, scaleX(this.x), scaleY(this.y), scaleX(this.width) * this.zoom, scaleY(this.height) * this.zoom)
 		if (this.whatToDraw == textCanvas) {
 			mainContext.drawImage(manaCostCanvas, 0, 0, cardWidth, cardHeight)
@@ -202,7 +204,9 @@ function drawCardObjects() {
 			}
 		}
 	}
+	mainContext.globalAlpha = parseInt(document.getElementById('inputWatermarkOpacity').value) / 100
 	mainContext.drawImage(watermarkCanvas, 0, 0, cardWidth, cardHeight)
+	mainContext.globalAlpha = 1
 	mainContext.drawImage(setSymbol, setSymbolDrawX, setSymbolDrawY, setSymbolDrawWidth, setSymbolDrawHeight)
 	mainContext.drawImage(bottomInfoCanvas, 0, 0, cardWidth, cardHeight)
 	mainContext.globalCompositeOperation = 'destination-over'
@@ -287,7 +291,7 @@ function loadFrameImages(listOfFrames) {
 }
 
 //Loads up anything that uses Sortable.js
-var sortable = Sortable.create(cardMaster, {animation: 150, ghostClass: 'cardMasterElementMoving', handle: '.handle'});
+var sortable = Sortable.create(cardMaster, {animation: 150, ghostClass: 'cardMasterElementMoving', handle: '.handle'})
 
 function deleteCardObject(event) {
 	cardMaster.removeChild(document.getElementById('uniqueNumber' + parseInt(event.target.parentElement.id.replace('uniqueNumber', ''))))
@@ -344,10 +348,14 @@ function cardTextEdited() {
 		bottomInfoUpdated()
 	}
 }
-function drawCardText() {
+function drawCardTextReal() {
 	textContext.clearRect(0, 0, cardWidth, cardHeight)
 	writeText(cardTextList, textContext)
 }
+function drawCardText() {
+    clearTimeout(updateTextDelay)
+    updateTextDelay = setTimeout(drawCardTextReal, 250)
+}
 function writeText(textObjectList, targetContext) {
 	var textCanvasBuffer = 100
 	var rewritingLine = false
@@ -426,11 +434,11 @@ function writeText(textObjectList, targetContext) {
 						paragraphSpace += parseInt(possibleCodeLower.replace('down', '')) - textSize
 						temporaryLineShift += currentLineWidth
 					} else if (possibleCodeLower.includes('outline:')) {
-	                    outline = true;
-	                    textLineContext.strokeStyle = possibleCodeLower.replace('outline:', '').split(',')[0];
-	                    textLineContext.lineWidth = parseInt(possibleCodeLower.replace('outline:', '').split(',')[1]);
+	                    outline = true
+	                    textLineContext.strokeStyle = possibleCodeLower.replace('outline:', '').split(',')[0]
+	                    textLineContext.lineWidth = parseInt(possibleCodeLower.replace('outline:', '').split(',')[1])
 	                } else if (possibleCodeLower.includes('shadow')) {
-	                    shadow = parseInt(possibleCodeLower.replace('shadow', ''));
+	                    shadow = parseInt(possibleCodeLower.replace('shadow', ''))
 	                } else if (possibleCodeLower.includes('fontcolor')) {
 	                	textLineContext.fillStyle = possibleCodeLower.slice(9, possibleCodeLower.length)
 	                } else if (possibleCodeLower == 'artistbrush') {
@@ -486,7 +494,7 @@ function writeText(textObjectList, targetContext) {
 	                    textLineContext.fillStyle = textObjectList[i].fontColor
 					}
 					if (outline != undefined) {
-						lineContext.strokeText(wordToWrite, textX, textCanvasBuffer + textSize)
+						textLineContext.strokeText(wordToWrite, textX, textCanvasBuffer + textSize)
 					}
 					textLineContext.fillText(wordToWrite, textX, textCanvasBuffer + textSize)
 					currentLineWidth += currentWordWidth
@@ -502,13 +510,13 @@ function writeText(textObjectList, targetContext) {
 }
 
 function uploadImage(event, destination) {
-	var input = event.target;
-	var reader = new FileReader();
+	var input = event.target
+	var reader = new FileReader()
 	reader.onload = function() {
-		var dataURL = reader.result;
-		destination.src = dataURL;
+		var dataURL = reader.result
+		destination.src = dataURL
 	}
-	reader.readAsDataURL(input.files[0]);
+	reader.readAsDataURL(input.files[0])
 }
 
 function cardArtUpdated() {
@@ -531,7 +539,7 @@ function inputCardArtName(cardArtNameInput) {
 				cardArtUrlList[i] = savedArtList[i].split('","border_crop":')[0]
 			}
 			for (i = 0; i < savedArtList.length; i ++) {
-				cardArtArtistList[i] = savedArtList[i].slice(savedArtList[i].indexOf('"artist":"') + 10, savedArtList[i].indexOf('","artist_id'));
+				cardArtArtistList[i] = savedArtList[i].slice(savedArtList[i].indexOf('"artist":"') + 10, savedArtList[i].indexOf('","artist_id'))
 			}
 			inputCardArtNameNumber(1)
 		} else if (this.readyState == 4 && this.status == 404) {
@@ -554,6 +562,7 @@ function initialize() {
 	cardMaster.insertBefore(cardMasterList[0].cardMasterElement(), cardMaster.children[0])
 	cardMaster.insertBefore(cardMasterList[1].cardMasterElement(), cardMaster.children[0])
 	document.getElementById('inputInfoNumber').value = date.getFullYear()
+	window.updateTextDelay = setTimeout(drawCardTextReal, 250)
 	setTimeout(bottomInfoUpdated, 500)
 	//CSS & HTML stuff
 	window.layerElements = document.querySelectorAll('.layer')
@@ -579,12 +588,12 @@ function bottomInfoUpdated() {
 }
 
 function uploadLocalFrameImage(event) {
-	var input = event.target;
-	var reader = new FileReader();
+	var input = event.target
+	var reader = new FileReader()
 	reader.onload = function() {
 		addUploadedFrameImage(reader.result)
 	}
-	reader.readAsDataURL(input.files[0]);
+	reader.readAsDataURL(input.files[0])
 }
 
 function addUploadedFrameImage(imageSource) {
@@ -677,7 +686,8 @@ function inputCardNameNumberTextImport(index) {
     importText(beforeAfter(importCardTextResponse, '"type_line":"', '",'), 'Card Type')
     importText(beforeAfter(importCardTextResponse, '"oracle_text":"', '",').replace(/\\n/g, '\n').replace(/ \\"/g, ' \u201C').replace(/\\"/g, '\u201D').replace(/\(/g, '{i}(').replace(/\)/g, '){/i}'), 'Rules Text')
     if (importCardTextResponse.includes('"power":"')) {
-        importText(beforeAfter(importCardTextResponse, '"power":"', '",') + '/' + beforeAfter(importCardTextResponse, '"toughness":"', '",'), 'Power Toughness')
+    	console.log('hmmm')
+        importText(beforeAfter(importCardTextResponse, '"power":"', '",') + '/' + beforeAfter(importCardTextResponse, '"toughness":"', '",'), 'Power/Toughness')
     } else {
         importText('', 'Power Toughness')
     }
@@ -704,7 +714,7 @@ function inputCardNameNumberTextImport(index) {
                 importText(abilityList[i].split(/: (.+)?/)[1], stringVersion + ' Ability')
                 document.getElementById('inputPlaneswalker' + (i + 1) + 'Icon').value = abilityList[i].split(/: (.+)?/)[0]
             } else {
-                importText('{left24}' + abilityList[i], stringVersion + ' Ability');
+                importText('{left24}' + abilityList[i], stringVersion + ' Ability')
                 document.getElementById('inputPlaneswalker' + (i + 1) + 'Icon').value = ''
             }
             if (document.getElementById('inputPlaneswalker' + (i + 1)).value < 1) {
@@ -733,9 +743,9 @@ function importText(text, target) {
 }
 function beforeAfter(targetString, beforeString, afterString) {
     if (targetString.includes(beforeString) && targetString.includes(afterString)) {
-        return targetString.split(beforeString)[1].split(afterString)[0];
+        return targetString.split(beforeString)[1].split(afterString)[0]
     } else {
-        return '';
+        return ''
     }
 }
 
@@ -746,7 +756,31 @@ function toggleTabs(clickedElement, targetId) {
 	document.getElementById(targetId).classList.remove('hidden')
 }
 
+function downloadCardImage(linkElement) {
+	if (document.getElementById("inputInfoArtist").value.replace(/ /g, "") != "") {
+		linkElement.download = cardTextList[0].name.toLowerCase().replace(/ /g, "_") + ".png"
+		if (linkElement.download == ".png") {
+			linkElement.download = "card.png"
+		}
+	} else {
+		event.preventDefault()
+		alert("You must properly credit an artist before downloading!")
+	}
+	var cardImageData = mainCanvas.toDataURL()
+	if (cardImageData == undefined) {
+		alert("Sorry, but it seems that you cannot download your card. Please try using a different browser/device.")
+	}
+	linkElement.href = cardImageData
+}
 
+function loadScript(scriptPath){
+	var script = document.createElement('script')
+	script.setAttribute('type','text/javascript')
+	script.setAttribute('src', scriptPath)
+	if (typeof script != 'undefined') {
+		document.getElementsByTagName('head')[0].appendChild(script)
+	}
+}
 
 
 

data/scripts/versionM15.js

@@ -8,16 +8,38 @@ var versionM15ImageList = [
 ['Artifact Frame', 'data/images/m15/m15FrameA.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)', 'Title (m15)', 'Type (m15)', 'Rules (m15)', 'Frame (m15)', 'Border (m15)']],
 ['Vehicle Frame', 'data/images/m15/m15FrameV.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)', 'Title (m15)', 'Type (m15)', 'Rules (m15)', 'Frame (m15)', 'Border (m15)']],
 ['Land Frame', 'data/images/m15/m15FrameL.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)', 'Title (m15)', 'Type (m15)', 'Rules (m15)', 'Frame (m15)', 'Border (m15)']],
+['White Power/Toughness', 'data/images/m15/m15PTW.png', 1142/1500, 1856/2100, 287/1500, 157/2100, ['Full']],
+['Blue Power/Toughness', 'data/images/m15/m15PTU.png', 1142/1500, 1856/2100, 287/1500, 157/2100, ['Full']],
+['Black Power/Toughness', 'data/images/m15/m15PTB.png', 1142/1500, 1856/2100, 287/1500, 157/2100, ['Full']],
+['Red Power/Toughness', 'data/images/m15/m15PTR.png', 1142/1500, 1856/2100, 287/1500, 157/2100, ['Full']],
+['Green Power/Toughness', 'data/images/m15/m15PTG.png', 1142/1500, 1856/2100, 287/1500, 157/2100, ['Full']],
+['Multicolored Power/Toughness', 'data/images/m15/m15PTM.png', 1142/1500, 1856/2100, 287/1500, 157/2100, ['Full']],
+['Artifact Power/Toughness', 'data/images/m15/m15PTA.png', 1142/1500, 1856/2100, 287/1500, 157/2100, ['Full']],
+['White Legend Crown', 'data/images/m15/m15CrownW.png', 38/1500, 29/2100, 1422/1500, 341/2100, ['Full']],
+['Blue Legend Crown', 'data/images/m15/m15CrownU.png', 38/1500, 29/2100, 1422/1500, 341/2100, ['Full']],
+['Black Legend Crown', 'data/images/m15/m15CrownB.png', 38/1500, 29/2100, 1422/1500, 341/2100, ['Full']],
+['Red Legend Crown', 'data/images/m15/m15CrownR.png', 38/1500, 29/2100, 1422/1500, 341/2100, ['Full']],
+['Green Legend Crown', 'data/images/m15/m15CrownG.png', 38/1500, 29/2100, 1422/1500, 341/2100, ['Full']],
+['Multicolored Legend Crown', 'data/images/m15/m15CrownM.png', 38/1500, 29/2100, 1422/1500, 341/2100, ['Full']],
+['Artifact Legend Crown', 'data/images/m15/m15CrownA.png', 38/1500, 29/2100, 1422/1500, 341/2100, ['Full']],
+['Land Legend Crown', 'data/images/m15/m15CrownL.png', 38/1500, 29/2100, 1422/1500, 341/2100, ['Full']],
+['Midnight Frame', 'data/images/m15/m15Midnight.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)', 'Title (m15)', 'Type (m15)', 'Rules (m15)', 'Frame (m15)', 'Border (m15)']],
 ['White Nyx Nyx Frame', 'data/images/m15/m15FrameWNyx.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)', 'Title (m15)', 'Type (m15)', 'Rules (m15)', 'Frame (m15)', 'Border (m15)']],
 ['Blue Nyx Frame', 'data/images/m15/m15FrameUNyx.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)', 'Title (m15)', 'Type (m15)', 'Rules (m15)', 'Frame (m15)', 'Border (m15)']],
 ['Black Nyx Frame', 'data/images/m15/m15FrameBNyx.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)', 'Title (m15)', 'Type (m15)', 'Rules (m15)', 'Frame (m15)', 'Border (m15)']],
 ['Red Nyx Frame', 'data/images/m15/m15FrameRNyx.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)', 'Title (m15)', 'Type (m15)', 'Rules (m15)', 'Frame (m15)', 'Border (m15)']],
 ['Green Nyx Frame', 'data/images/m15/m15FrameGNyx.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)', 'Title (m15)', 'Type (m15)', 'Rules (m15)', 'Frame (m15)', 'Border (m15)']],
 ['Multicolored Nyx Frame', 'data/images/m15/m15FrameMNyx.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)', 'Title (m15)', 'Type (m15)', 'Rules (m15)', 'Frame (m15)', 'Border (m15)']],
-['Artifact Nyx Frame', 'data/images/m15/m15FrameANyx.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)', 'Title (m15)', 'Type (m15)', 'Rules (m15)', 'Frame (m15)', 'Border (m15)']]
+['Artifact Nyx Frame', 'data/images/m15/m15FrameANyx.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)', 'Title (m15)', 'Type (m15)', 'Rules (m15)', 'Frame (m15)', 'Border (m15)']],
+['White Nyx Legend Crown', 'data/images/m15/m15CrownWNyx.png', 39/1500, 29/2100, 1422/1500, 341/2100, ['Full', 'Nyx Crown (m15)', 'Nyx Crown Outer (m15)', 'Nyx Crown Inner (m15)', 'Nyx Crown Shadowless (m15)']],
+['Blue Nyx Legend Crown', 'data/images/m15/m15CrownUNyx.png', 39/1500, 29/2100, 1422/1500, 341/2100, ['Full', 'Nyx Crown (m15)', 'Nyx Crown Outer (m15)', 'Nyx Crown Inner (m15)', 'Nyx Crown Shadowless (m15)']],
+['Black Nyx Legend Crown', 'data/images/m15/m15CrownBNyx.png', 39/1500, 29/2100, 1422/1500, 341/2100, ['Full', 'Nyx Crown (m15)', 'Nyx Crown Outer (m15)', 'Nyx Crown Inner (m15)', 'Nyx Crown Shadowless (m15)']],
+['Red Nyx Legend Crown', 'data/images/m15/m15CrownRNyx.png', 39/1500, 29/2100, 1422/1500, 341/2100, ['Full', 'Nyx Crown (m15)', 'Nyx Crown Outer (m15)', 'Nyx Crown Inner (m15)', 'Nyx Crown Shadowless (m15)']],
+['Green Nyx Legend Crown', 'data/images/m15/m15CrownGNyx.png', 39/1500, 29/2100, 1422/1500, 341/2100, ['Full', 'Nyx Crown (m15)', 'Nyx Crown Outer (m15)', 'Nyx Crown Inner (m15)', 'Nyx Crown Shadowless (m15)']],
+['Multicolored Nyx Legend Crown', 'data/images/m15/m15CrownMNyx.png', 39/1500, 29/2100, 1422/1500, 341/2100, ['Full', 'Nyx Crown (m15)', 'Nyx Crown Outer (m15)', 'Nyx Crown Inner (m15)', 'Nyx Crown Shadowless (m15)']]
 ]
 
-var versionM15MaskList = [['Right Half', 'data/images/maskRightHalf.png'], ['Pinline (m15)', 'data/images/m15/m15MaskPinline.png'], ['Full', 'data/images/maskFull.png'], ['Border (m15)', 'data/images/m15/m15MaskBorder.png'], ['Title (m15)', 'data/images/m15/m15MaskTitle.png'], ['Type (m15)', 'data/images/m15/m15MaskType.png'], ['Rules (m15)', 'data/images/m15/m15MaskRules.png'], ['Frame (m15)', 'data/images/m15/m15MaskFrame.png']]
+var versionM15MaskList = [['Right Half', 'data/images/maskRightHalf.png'], ['Pinline (m15)', 'data/images/m15/m15MaskPinline.png'], ['Full', 'data/images/maskFull.png'], ['Border (m15)', 'data/images/m15/m15MaskBorder.png'], ['Title (m15)', 'data/images/m15/m15MaskTitle.png'], ['Type (m15)', 'data/images/m15/m15MaskType.png'], ['Rules (m15)', 'data/images/m15/m15MaskRules.png'], ['Frame (m15)', 'data/images/m15/m15MaskFrame.png'], ['Nyx Crown (m15)', 'data/images/m15/m15MaskNyxCrown.png'], ['Nyx Crown Outer (m15)', 'data/images/m15/m15MaskNyxCrownOuter.png'], ['Nyx Crown Inner (m15)', 'data/images/m15/m15MaskNyxCrownInner.png'], ['Nyx Crown Shadowless (m15)', 'data/images/m15/m15MaskNyxCrownShadowless.png']]
 
 if (!loadedVersions.includes('m15')) {
 	loadedVersions.push("m15")
@@ -29,13 +51,14 @@ loadTextOptions([
 new cardText('Card Title', '', 126/1500, 187/2100, 1248/1500, 80/2100, 'belerenb', 80/2100, 'black', ['oneLine=true']),
 new cardText('Card Type', '', 126/1500, 1263/2100, 1248/1500, 68/2100, 'belerenb', 68/2100, 'black', ['oneLine=true']),
 new cardText('Rules Text', '', 135/1500, 1372/2100, 1230/1500, 624/2100, 'mplantin', 74/2100, 'black'),
-new cardText('Power/Toughness', '', 0.1, 0.1, 0.8, 0.8, 'mplantin', 0.0177, 'black', ['oneLine=true'])
+new cardText('Power/Toughness', '', 1190/1500, 1950/2100, 210/1500, 78/2100, 'belerenbsc', 78/2100, 'black', ['oneLine=true,textAlign="center"'])
 ])
 
-artX = scaleX(115 / 1500)
-artY = scaleY(237 / 2100)
-artWidth = scaleX(1270 / 1500)//1384
-artHeight = scaleY(928 / 2100)//1164
+artX = scaleX(111 / 1500)
+artY = scaleY(233 / 2100)
+artWidth = scaleX(1278 / 1500)
+artHeight = scaleY(936 / 2100)
+
 bottomInfoFunction = 'bottomInfoM15'
 
 manaCostXPath = '1316 - 78 * manaSymbolIndex'
@@ -50,9 +73,9 @@ setSymbolWidth = scaleX(180/1500)
 setSymbolHeight = scaleY(80/2100)
 
 watermarkX = scaleX(0.5)
-watermarkY = scaleY(0.5)
-watermarkWidth = scaleX(1)
-watermarkHeight = scaleY(1)
+watermarkY = scaleY(1630/2100)
+watermarkWidth = scaleX(1140/1500)
+watermarkHeight = scaleY(484/2100)
 
 function bottomInfoM15() {
 	bottomInfoContext.clearRect(0, 0, cardWidth, cardHeight)
@@ -67,7 +90,7 @@ function bottomInfoM15() {
 	writeText(
 		[
 			{text: document.getElementById('inputInfoNumber').value, x: 97/1500, y: 1990/2100, width: 1306/1500, height: 36/2100, font: 'gothammedium', fontSize: 36/2100, fontColor: 'white', otherParameters: ['oneLine=true']},
-			{text: document.getElementById('inputInfoSet').value + '\u2605' + document.getElementById('inputInfoLanguage').value + ' {artistbrush}{up' + scaleY(36/2100) + '}' + document.getElementById('inputInfoRarity').value + '  {down' + scaleY(72/2100) + '}{up' + scaleY(36/2100) + '}{fontbelerenbsc}' + document.getElementById('inputInfoArtist').value, x: 97/1500, y: 2026/2100, width: 1306/1500, height: 36/2100, font: 'gothammedium', fontSize: 36/2100, fontColor: 'white', otherParameters: ['oneLine=true']},
+			{text: document.getElementById('inputInfoSet').value + '{right' + scaleX(0.005) + '}\u2605{right' + scaleX(0.005) + '}' + document.getElementById('inputInfoLanguage').value + ' {artistbrush}{up' + scaleY(36/2100) + '}' + document.getElementById('inputInfoRarity').value + '  {down' + scaleY(72/2100) + '}{up' + scaleY(36/2100) + '}{fontbelerenbsc}' + document.getElementById('inputInfoArtist').value, x: 97/1500, y: 2026/2100, width: 1306/1500, height: 36/2100, font: 'gothammedium', fontSize: 36/2100, fontColor: 'white', otherParameters: ['oneLine=true']},
 			{text: '{right}\u2122 & \u00a9 ' + date.getFullYear() + ' Wizards of the Coast', x: 97/1500, y: 1990/2100 + ptBoxShift, width: 1306/1500, height: 35/2100, font: 'mplantin', fontSize: 35/2100, fontColor: 'white', otherParameters: ['oneLine=true']},
 			{text: '*Not for Sale*', x: 97/1500, y: 2056/2100, width: 1306/1500, height: 30/2100, font: 'gothammedium', fontSize: 30/2100, fontColor: 'white', otherParameters: ['oneLine=true']},
 			{text: '{right}CardConjurer.com', x: 97/1500, y: 2020/2100 + ptBoxShift, width: 1306/1500, height: 30/2100, font: 'mplantin', fontSize: 30/2100, fontColor: 'white', otherParameters: ['oneLine=true']}

data/site/styles.css

@@ -56,6 +56,10 @@ html, body {
 	margin: 0;
 	overflow-x: hidden
 }
+a {
+	font: inherit;
+	color: inherit;
+}
 
 .title {
 	text-align: center;
@@ -201,6 +205,7 @@ textarea {
 
 input, textarea, button, select {
 	font: 0.8rem mplantin;
+	color: var(--font-color);
 	width: 100%;
 	background-color: var(--input-color);
 	border: none;
@@ -302,3 +307,9 @@ input, textarea, button, select {
 	from {transform: rotate(0deg) translate(0, 0); position: relative; left: -200%;}
 	to {transform: rotate(10deg) translate(-16%, 15%); position: relative; left: 0;}
 }
+
+#inputColorPalette {
+	font: inherit;
+	width: 10rem;
+	textAlign: left;
+}

index.html

@@ -120,6 +120,7 @@
 			                <option value="#cfc8be">Artifact/Colorless</option>
 			                <option value="#ffffff">True White</option>
 			            </select>
+			            <input id='inputWatermarkOpacity' type="number" placeholder="Opacity" oninput="watermarkUpdated()" min='0' max='100' value='100'>
 			        </div>
 				</div>
 				<div id='importTab' class='hidden'>
@@ -129,6 +130,7 @@
 			        <input type="number" class="input number" id="inputCardNameNumberTextImport" onchange="inputCardNameNumberTextImport(this.value)" value="1" min="1" max="1">
 				</div>
 			</div>
+			<a onclick="downloadCardImage(this)" id="downloadCardImage" href="" target="_blank" download="card.png">Download</a>
 		</div>
 	</div>
 	<div class='layer darkLayer fadeIn'>
@@ -160,7 +162,13 @@
 	</div>
 </body>
 <footer class='footer'>
-	<div>Card Conjurer by Kyle Burton</div>
+	<div>
+		Card Conjurer by Kyle Burton<br>
+		<select id='inputColorPalette' onchange='loadScript("data/scripts/" + this.value + ".js")'>
+	        <option value='lightMode'>Light Mode</option>
+	        <option value='darkMode'>Dark Mode</option>
+      	</select>
+    </div>
 	<div>
 		Navigation<br>
 		Card Creator<br>