frames

data/scripts/main.js

@@ -16,6 +16,7 @@ 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 = [];
 manaSymbolCodeList.forEach((item, index) => {manaSymbolImageList[index] = new Image(); manaSymbolImageList[index].src = 'data/images/manaSymbols/' + index + '.png'})
+date = new Date()
 
 function newCanvas(name) {
 	window[name + 'Canvas'] = document.createElement('canvas')
@@ -263,6 +264,14 @@ function loadMaskImages(listOfMasks) {
 function loadFrameImages(listOfFrames) {
 	for (var i = 0; i < listOfFrames.length; i++) {
 		frameImageList.push(new frameImage(...listOfFrames[i], frameImageList.length))
+		if (i == 0) {
+			frameObjectToAdd = frameImageList[frameImageList.length - 1]
+			var frameToInsert = cardMasterList.push(new cardImage(frameObjectToAdd.name, frameObjectToAdd.image.src, frameObjectToAdd.x, frameObjectToAdd.y, frameObjectToAdd.width, frameObjectToAdd.height, 1, [], false))
+			cardMaster.insertBefore(cardMasterList[frameToInsert - 1].cardMasterElement(), cardMaster.children[1])
+			frameObjectToAdd.image.onload = function() {
+				drawCardObjects()
+			}
+		}
 	}
 }
 
@@ -320,6 +329,9 @@ function cardTextEdited() {
 	selectedTextObject.width = document.getElementById('textEditorWidth').value / cardWidth
 	selectedTextObject.height = document.getElementById('textEditorHeight').value / cardHeight
 	drawCardText()
+	if (selectedTextObject.name == 'Power/Toughness') {
+		bottomInfoUpdated()
+	}
 }
 function drawCardText() {
 	textContext.clearRect(0, 0, cardWidth, cardHeight)
@@ -328,7 +340,7 @@ function drawCardText() {
 function writeText(textObjectList, targetContext) {
 	var textCanvasBuffer = 100
 	var rewritingLine = false
-	var textSize
+	var textSize, textFont
 	outerloop:
 	for (var i = 0; i < textObjectList.length; i++) {
 		if (!rewritingLine) {
@@ -343,11 +355,12 @@ function writeText(textObjectList, targetContext) {
 		textParagraphCanvas.height = scaleY(textObjectList[i].height) + 2 * textCanvasBuffer
 		textLineContext.clearRect(0, 0, textLineCanvas.width, textLineCanvas.height)
 		textParagraphContext.clearRect(0, 0, textParagraphCanvas.width, textParagraphCanvas.height)
-		var outline, shadow = 0, oneLine = false, outlineThickness = 2, textAlign = 'left', finishLine = false, paragraphSpace = 0
+		var outline, shadow = 0, oneLine = false, outlineThickness = 2, textAlign = 'left', finishLine = false, paragraphSpace = 0, permanentLineShift = 0, temporaryLineShift = 0
 		textObjectList[i].otherParameters.forEach(item => eval(item))
 		textLineContext.strokeStyle = outline
 		textLineContext.lineWidth = outlineThickness
-		textLineContext.font = textSize + 'px ' + textObjectList[i].font
+		textFont = textObjectList[i].font
+		textLineContext.font = textSize + 'px ' + textFont
 		textLineContext.fillStyle = textObjectList[i].fontColor
 		var textX = textCanvasBuffer
 		var textY = 0
@@ -362,7 +375,7 @@ function writeText(textObjectList, targetContext) {
 					var possibleCodeLower = splitText[n].substr(1, splitText[n].length - 2).toLowerCase()
 					if (possibleCodeLower == 'line' && !oneLine) {
 						finishLine = true
-						paragraphSpace = textSize * 0.35
+						paragraphSpace += textSize * 0.35
 					} else if (possibleCodeLower == 'linenospace' && !oneLine) {
 						finishLine = true
 					} else if ((possibleCodeLower == 'bar' || possibleCodeLower == 'flavor') && !oneLine) {
@@ -370,23 +383,37 @@ function writeText(textObjectList, targetContext) {
 						var barWidth = scaleX(textObjectList[i].width) * 0.95
 						var barHeight = scaleY(0.001)
 						textLineContext.drawImage(manaSymbolImageList[63], textCanvasBuffer + (scaleX(textObjectList[i].width) - barWidth) / 2, textSize * 1.6 + textCanvasBuffer, barWidth, barHeight)
-						paragraphSpace = textSize * 0.8
+						paragraphSpace += textSize * 0.8
 						if (possibleCodeLower == 'flavor') {
-							textLineContext.font = 'italic ' + (textSize * 0.92) + 'px ' + textObjectList[i].font
+							textLineContext.font = 'italic ' + (textSize * 0.92) + 'px ' + textFont
 						}
 					} else if (possibleCodeLower == 'i') {
-						textLineContext.font = 'italic ' + textSize + 'px ' + textObjectList[i].font
+						textLineContext.font = 'italic ' + textSize + 'px ' + textFont
 					} else if (possibleCodeLower == '/i') {
-						textLineContext.font = textSize + 'px ' + textObjectList[i].font
+						textLineContext.font = textSize + 'px ' + textFont
 					} else if (possibleCodeLower.includes('fontsize')) {
 						textSize += parseInt(possibleCodeLower.slice(8, possibleCodeLower.length))
-						textLineContext.font = textSize + 'px ' + textObjectList[i].font
+						textLineContext.font = textSize + 'px ' + textFont
 					} else if (possibleCodeLower == 'left') {
 						textAlign = 'left'
 					} else if (possibleCodeLower == 'center') {
 						textAlign = 'center'
 					} else if (possibleCodeLower == 'right') {
 						textAlign = 'right'
+					} else if (possibleCodeLower.includes('right')) {
+						textX += parseInt(possibleCodeLower.replace('right', ''))
+						currentLineWidth += parseInt(possibleCodeLower.replace('right', ''))
+					} else if (possibleCodeLower.includes('left')) {
+						textX -= parseInt(possibleCodeLower.replace('left', ''))
+						currentLineWidth -= parseInt(possibleCodeLower.replace('left', ''))
+					} else if (possibleCodeLower.includes('up')) {
+						finishLine = true
+						paragraphSpace -= parseInt(possibleCodeLower.replace('up', '')) + textSize
+						temporaryLineShift += currentLineWidth
+					} else if (possibleCodeLower.includes('down')) {
+						finishLine = true
+						paragraphSpace += parseInt(possibleCodeLower.replace('down', '')) - textSize
+						temporaryLineShift += currentLineWidth
 					} else if (possibleCodeLower.includes('outline:')) {
 	                    outline = true;
 	                    textLineContext.strokeStyle = possibleCodeLower.replace('outline:', '').split(',')[0];
@@ -398,8 +425,11 @@ function writeText(textObjectList, targetContext) {
 	                } else if (possibleCodeLower == 'artistbrush') {
 	                	var artistBrushWidth = textSize * 1.2
 						textLineContext.drawImage(manaSymbolImageList[62], textX, textCanvasBuffer + textSize - artistBrushWidth * 0.58, artistBrushWidth, artistBrushWidth * 13 / 21)
-						currentLineX += artistBrushWidth * 1.1
-	                } else if (manaSymbolCodeList.includes(possibleCodeLower.split('/').join(''))) {
+						textX += artistBrushWidth * 1.1
+	                } else if (possibleCodeLower.includes('font')) {
+						textFont = possibleCodeLower.replace('font', '')
+						textLineContext.font = textSize + 'px ' + textFont
+					} else if (manaSymbolCodeList.includes(possibleCodeLower.split('/').join(''))) {
 						//THIS HAS TO BE THE LAST ONE
 						var manaSymbolDiameter = textSize * 0.77
 						textLineContext.drawImage(manaSymbolImageList[manaSymbolCodeList.indexOf(possibleCodeLower.split('/').join(''))], textX, textCanvasBuffer + textSize - manaSymbolDiameter * 0.95, manaSymbolDiameter, manaSymbolDiameter)
@@ -428,11 +458,15 @@ function writeText(textObjectList, targetContext) {
 						textParagraphContext.drawImage(textLineCanvas, 0 + textAlignShift, textY, textLineCanvas.width, textLineCanvas.height)
 						if (n != splitText.length - 1) {
 							textLineContext.clearRect(0, 0, textLineCanvas.width, textLineCanvas.height)
-							textX = textCanvasBuffer
-							currentLineWidth = 0
+							textX = textCanvasBuffer + permanentLineShift + temporaryLineShift
+							currentLineWidth = 0 + permanentLineShift + temporaryLineShift
 							textY += textSize + paragraphSpace
 							paragraphSpace = 0
+							temporaryLineShift = 0
 							finishLine = false
+							if (wordToWrite == " ") {
+								continue innerloop
+							}
 						}
 					}
 					if (shadow > 0) {
@@ -503,11 +537,30 @@ function inputCardArtNameNumber(cardArtNameNumberInput) {
 }
 
 function initialize() {
+	//Card stuff
 	cardMasterList.push(new cardPlaceholder('Card Art Placeholder', cardArt))
 	cardMasterList.push(new cardPlaceholder('Text Placeholder', window['textCanvas']))
 	cardMaster.insertBefore(cardMasterList[0].cardMasterElement(), cardMaster.children[0])
 	cardMaster.insertBefore(cardMasterList[1].cardMasterElement(), cardMaster.children[0])
-	drawCardObjects()
+	document.getElementById('inputInfoNumber').value = date.getFullYear()
+	setTimeout(bottomInfoUpdated, 500)
+	//CSS & HTML stuff
+	window.layerElements = document.querySelectorAll('.layer')
+	window.addEventListener('resize', windowResized)
+	window.addEventListener('scroll', windowScrolled)
+	windowResized()
+}
+
+function windowResized() {
+	window.windowHeight = window.innerHeight
+}
+function windowScrolled() {
+	for (var i = 0; i < layerElements.length; i++) {
+		var positionFromTop = (layerElements[i].getBoundingClientRect().top + layerElements[i].getBoundingClientRect().bottom) / 2
+		if (positionFromTop - windowHeight <= 0) {
+			layerElements[i].classList.add('revealedLayer')
+		}
+	}
 }
 
 function bottomInfoUpdated() {
@@ -529,9 +582,12 @@ function addUploadedFrameImage(imageSource) {
 
 function manaCostUpdated() {
 	manaCostContext.clearRect(0, 0, cardWidth, cardHeight)
-	var manaCostList = document.getElementById('inputManaCost').value.toLowerCase().replace(/{/, ' ').replace(/}/, ' ').split('/').join('').split(' ')
+	var manaCostList = document.getElementById('inputManaCost').value.toLowerCase().replace(/{/g, ' ').replace(/}/g, ' ').split('/').join('').split(' ')
 	var manaSymbolIndex = -1
 	manaCostCanvas.fillStyle = 'black'
+	if (manaCostDirection == 'reverse') {
+		manaCostList.reverse()
+	}
 	for (var i = 0; i < manaCostList.length; i++) {
 		if (manaSymbolCodeList.includes(manaCostList[i])) {
 			manaSymbolIndex += 1
@@ -652,6 +708,8 @@ function inputCardNameNumberTextImport(index) {
     document.getElementById('inputSetRarity').value = beforeAfter(importCardTextResponse, '"rarity":"', '",')[0]
     setSymbol.src = 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + document.getElementById('inputSetCode').value + '&size=large&rarity=' + document.getElementById('inputSetRarity').value
     inputCardArtName(beforeAfter(importCardTextResponse, '"name":"', '",'))
+    manaCostUpdated()
+    drawCardText()
 }
 function importText(text, target) {
     for (var i = 0; i < cardTextList.length; i++) {

data/scripts/versionM15.js

@@ -3,36 +3,51 @@ var versionM15ImageList = [
 ['Blue Frame', 'data/images/m15/m15FrameU.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']],
 ['Black Frame', 'data/images/m15/m15FrameB.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']],
 ['Red Frame', 'data/images/m15/m15FrameR.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']],
-['Green Frame', 'data/images/m15/m15FrameG.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']]
+['Green Frame', 'data/images/m15/m15FrameG.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']],
+['Multicolored Frame', 'data/images/m15/m15FrameM.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']],
+['Artifact Frame', 'data/images/m15/m15FrameA.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']],
+['Vehicle Frame', 'data/images/m15/m15FrameV.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']],
+['Land Frame', 'data/images/m15/m15FrameL.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']],
+['White Nyx Nyx Frame', 'data/images/m15/m15FrameWNyx.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']],
+['Blue Nyx Frame', 'data/images/m15/m15FrameUNyx.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']],
+['Black Nyx Frame', 'data/images/m15/m15FrameBNyx.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']],
+['Red Nyx Frame', 'data/images/m15/m15FrameRNyx.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']],
+['Green Nyx Frame', 'data/images/m15/m15FrameGNyx.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']],
+['Multicolored Nyx Frame', 'data/images/m15/m15FrameMNyx.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']],
+['Artifact Nyx Frame', 'data/images/m15/m15FrameANyx.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']]
 ]
+
 var versionM15MaskList = [['Right Half', 'data/images/maskRightHalf.png'], ['Pinline (m15)', 'data/images/m15/m15MaskPinline.png'], ['Full', 'data/images/maskFull.png']]
+
 if (!loadedVersions.includes('m15')) {
 	loadedVersions.push("m15")
 	loadMaskImages(versionM15MaskList)
 	loadFrameImages(versionM15ImageList)
 }
+
 loadTextOptions([
-new cardText('Card Title', 'Awesome Card Tho!!!', 0.1, 0.1, 0.8, 0.8, 'belerenb', 0.0177, 'black'),
-new cardText('Card Type', '', 0.1, 0.1, 0.8, 0.8, 'belerenb', 0.0177, 'black'),
-new cardText('Rules Text', '', 0.1, 0.1, 0.8, 0.8, 'mplantin', 0.0177, 'black'),
-new cardText('Power/Toughness', '', 0.1, 0.1, 0.8, 0.8, 'mplantin', 0.0177, 'black')
+new cardText('Card Title', '', 126/1500, 188/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'])
 ])
 
-artX = 0
-artY = 0
-artWidth = 1500
-artHeight = 500
+artX = scaleX(115 / 1500)
+artY = scaleY(237 / 2100)
+artWidth = scaleX(1154 / 1500)
+artHeight = scaleY(928 / 2100)
 bottomInfoFunction = 'bottomInfoM15'
 
-manaCostXPath = 'scaleX(0.05) * manaSymbolIndex'
-manaCostYPath = 'scaleY(0.1)'
-manaCostDiameter = 'scaleX(0.05)'
-manaCostShadowOffset = '[scaleX(-0.01), scaleY(0.01)]'
+manaCostXPath = '1316 - 78 * manaSymbolIndex'
+manaCostYPath = '121'
+manaCostDiameter = '70'
+manaCostShadowOffset = '[-2, 6]'
+manaCostDirection = 'reverse'
 
-setSymbolX = [scaleX(0.8), 'right']
-setSymbolY = [scaleY(0.5), 'left']
-setSymbolWidth = scaleX(0.1)
-setSymbolHeight = scaleY(0.1)
+setSymbolX = [scaleX(1382/1500), 'right']
+setSymbolY = [scaleY(1200/2100), 'left']
+setSymbolWidth = scaleX(180/1500)
+setSymbolHeight = scaleY(80/2100)
 
 watermarkX = scaleX(0.5)
 watermarkY = scaleY(0.5)
@@ -41,9 +56,22 @@ watermarkHeight = scaleY(1)
 
 function bottomInfoM15() {
 	bottomInfoContext.clearRect(0, 0, cardWidth, cardHeight)
+	var ptBoxShift = 0
+	for (var i = 0; i < cardTextList.length; i++) {
+		if (cardTextList[i].name == 'Power/Toughness' && cardTextList[i].text != '') {
+			ptBoxShift = 36/2100
+		} else {
+			// console.log(cardTextList[i].name, cardTextList[i].text)
+		}
+	}
 	writeText(
 		[
-			{text: 'EEEEEEEE', x: 0, y: 0.05, width: 0.8, height: 0.05, font: 'mplantin', fontSize: 0.05, fontColor: 'black', otherParameters: ['oneLine=true']},
+			{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: '{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']}
 		], bottomInfoContext)
-	// document.body.appendChild(bottomInfoCanvas)
 }
+
+bottomInfoUpdated()

data/site/styles.css

@@ -37,15 +37,31 @@
 }
 
 :root {
-	--light-color: #eee;
+	--background-color: #fafafa;
+	--background-color-contrast: #222;
+	--interactable-color: #aaa;
+	--interactable-selected-color: #888;
+	--input-color: #ddd;
+	--font-color: #000;
+	--font-color-contrast: #eee;
 }
 
 html {
 	user-select: none;
 	font-size: 20pt;
+	background-color: var(--background-color);
+	color: var(--font-color);
 }
-body {
-	margin: 0px;
+html, body {
+	margin: 0;
+	overflow-x: hidden
+}
+
+.title {
+	text-align: center;
+	color: var(--font-color);
+	font: 2.5rem 'belerenbsc';
+	margin-top: 1rem;
 }
 
 .cardMaster {
@@ -57,7 +73,7 @@ body {
     display: grid;
     grid-template-columns: 2rem auto 2rem;
     align-items: center;
-    background: gray;
+    background-color: var(--input-color);
 }
 .cardMasterElement > .handle {
     cursor: move;
@@ -65,14 +81,14 @@ body {
     text-align: center;
 }
 .cardMasterElementMoving {
-	background-color: #555;
+	background-color: var(--interactable-selected-color);
 }
 .cardMasterElement > .delete {
 	cursor: pointer;
     text-align: center;
 }
 .cardMasterElement.cardMasterElementSelected {
-	background: green;
+	background-color: var(--interactable-color);
 }
 
 .splitGrid {
@@ -84,6 +100,7 @@ body {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
 	grid-auto-rows: min-content;
+	grid-gap: 0.1rem;
 }
 .frameGrid {
 	display: grid;
@@ -117,10 +134,10 @@ img {
 	max-height: 1.5rem;
 }
 #framePicker > div.frameOptionSelected, #maskPicker > div.maskOptionSelected {
-	background-color: green;
+	background-color: var(--interactable-selected-color);
 }
 #maskPicker > div, #framePicker > div {
-	background-color: gray;
+	background-color: var(--interactable-color);
 }
 #maskPicker > div {
 	padding: 0.5rem;
@@ -136,15 +153,20 @@ img {
 }
 #textPicker > div {
 	font: 1rem belerenbsc;
-	background: gray;
+	background-color: var(--interactable-color);
 	padding: 0.5rem;
 }
 #textPicker > div.selectedText {
-	background: green;
+	background-color: var(--interactable-selected-color);
 }
 
 canvas {
-	background: gray;
+	/*background-color: var(--interactable-color);*/
+}
+textarea {
+	resize: vertical;
+	min-height: 4rem;
+	max-height: 12rem;
 }
 
 .hidden {
@@ -157,9 +179,7 @@ canvas {
 	display: grid;
 	grid-template-columns: 750px auto;
 	grid-gap: 1rem;
-	background: #eeeeee;
 	padding: 1rem;
-	margin-bottom: 12rem;
 }
 
 .tabPicker {
@@ -173,13 +193,112 @@ canvas {
 	font: 1rem belerenbsc;
 	text-align: center;
 	padding: 0.5rem;
-	background: gray;
+	background-color: var(--interactable-color);
 }
 .tabPicker > div.tabOptionSelected {
-	background: green;
+	background-color: var(--interactable-selected-color);
 }
 
 input, textarea, button, select {
 	font: 0.8rem mplantin;
 	width: 100%;
+	background-color: var(--input-color);
+	border: none;
+	outline: none;
+	padding: 0.2rem;
+	margin-top: 0.1rem;
+}
+
+@keyframes fade-in {
+	from {opacity: 0;}
+	to {opacity: 1;}
+}
+@keyframes slide-from-left {
+	from {position: relative; left: -100vw;}
+	to {position: relative; left: 0px;}
+}
+@keyframes slide-from-right {
+	from {position: relative; left: 100vw;}
+	to {position: relative; left: 0px;}
+}
+.layer {
+	padding: 5rem;
+}
+.layerTitle {
+	/*color: inherit;*/
+	text-align: center;
+	font: 2rem 'belerenbsc';
+}
+.darkLayer {
+	background-color: var(--background-color-contrast);
+	color: var(--font-color-contrast);
+}
+.layer > div {
+	opacity: 0;
+}
+.layer.revealedLayer > div {
+	opacity: 1;
+}
+.layer.revealedLayer.fadeIn > div {
+	animation: fade-in 2s;
+}
+.mainGrid.fadeIn {
+	animation: fade-in 0.5s;
+}
+.layer.revealedLayer.slideFromLeft > div {
+	animation: slide-from-left 2s;
+}
+.layer.revealedLayer.slideFromRight > div {
+	animation: slide-from-right 2s;
+}
+
+.footer {
+	padding: 2rem;
+	background-color: var(--background-color-contrast);
+	color: var(--font-color-contrast);
+	font: 0.6rem 'open sans';
+	display: grid;
+	grid-template-columns: auto auto auto;
+}
+
+.fiveSampleCards {
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+	margin: 2rem 0;
+}
+.fiveSampleCards > div > img {
+	position: relative;
+	width: 100%;
+}
+.layer.revealedLayer > div > div > div > .sample1 {
+	animation: sample-one 2s;
+	transform: rotate(-10deg) translate(16%, 15%);
+}
+.layer.revealedLayer > div > div > div > .sample2 {
+	animation: sample-two 2s;
+	transform: rotate(-5deg) translate(10%, 4%);
+}
+.layer.revealedLayer > div > div > div > .sample4 {
+	animation: sample-four 2s;
+	transform: rotate(5deg) translate(-10%, 4%);
+}
+.layer.revealedLayer > div > div > div > .sample5 {
+	animation: sample-five 2s;
+	transform: rotate(10deg) translate(-16%, 15%);
+}
+@keyframes sample-one {
+	from {transform: rotate(0deg) translate(0, 0); position: relative; left: 200%;}
+	to {transform: rotate(-10deg) translate(16%, 15%); position: relative; left: 0;}
+}
+@keyframes sample-two {
+	from {transform: rotate(0deg) translate(0, 0); position: relative; left: 100%;}
+	to {transform: rotate(-5deg) translate(10%, 4%); position: relative; left: 0;}
+}
+@keyframes sample-four {
+	from {transform: rotate(0deg) translate(0, 0); position: relative; left: -100%;}
+	to {transform: rotate(5deg) translate(-10%, 4%); position: relative; left: 0;}
+}
+@keyframes sample-five {
+	from {transform: rotate(0deg) translate(0, 0); position: relative; left: -200%;}
+	to {transform: rotate(10deg) translate(-16%, 15%); position: relative; left: 0;}
 }

index.html

@@ -5,9 +5,10 @@
 	<link rel="stylesheet" href="data/site/styles.css">
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<div class='title'>Card Conjurer</div>
 </head>
 <body>
-	<div class='mainGrid'>
+	<div class='mainGrid fadeIn'>
 		<canvas id="previewCanvas"></canvas>
 		<div>
 			<div class='tabPicker'>
@@ -130,7 +131,48 @@
 			</div>
 		</div>
 	</div>
+	<div class='layer darkLayer fadeIn'>
+		<div>
+			<div class='layerTitle'>Welcome to Card Conjurer</div>
+			<div class='fiveSampleCards'>
+				<div><img src='data/site/images/samples/sample1.png' alt='loading sample...' class='sample1'></div>
+				<div><img src='data/site/images/samples/sample2.png' alt='loading sample...' class='sample2'></div>
+				<div><img src='data/site/images/samples/sample3.png' alt='loading sample...' class='sample3'></div>
+				<div><img src='data/site/images/samples/sample4.png' alt='loading sample...' class='sample4'></div>
+				<div><img src='data/site/images/samples/sample5.png' alt='loading sample...' class='sample5'></div>
+			</div>
+		</div>
+	</div>
+	<div class='layer fadeIn'>
+		<div>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt. Id volutpat lacus laoreet non curabitur. Adipiscing tristique risus nec feugiat in fermentum. Vulputate mi sit amet mauris. Morbi tincidunt augue interdum velit euismod in. Amet mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan. Sed felis eget velit aliquet sagittis. Neque ornare aenean euismod elementum nisi quis eleifend. Nisl nunc mi ipsum faucibus vitae. Mattis nunc sed blandit libero volutpat sed cras ornare. Sed vulputate mi sit amet mauris commodo quis imperdiet massa. Condimentum mattis pellentesque id nibh tortor. Leo in vitae turpis massa. Dignissim cras tincidunt lobortis feugiat vivamus. Massa ultricies mi quis hendrerit dolor magna eget est.
+		</div>
+	</div>
+	<div class='layer darkLayer slideFromRight'>
+		<div>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus vitae. Venenatis tellus in metus vulputate eu. Id diam maecenas ultricies mi. Enim nec dui nunc mattis enim ut tellus elementum. Consectetur libero id faucibus nisl tincidunt eget nullam non. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Morbi leo urna molestie at elementum eu facilisis sed odio. Nulla pharetra diam sit amet nisl suscipit. A erat nam at lectus urna duis. Neque viverra justo nec ultrices.
+		</div>
+	</div>
+	<div class='layer slideFromLeft'>
+		<div>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus vitae. Venenatis tellus in metus vulputate eu. Id diam maecenas ultricies mi. Enim nec dui nunc mattis enim ut tellus elementum. Consectetur libero id faucibus nisl tincidunt eget nullam non. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Morbi leo urna molestie at elementum eu facilisis sed odio. Nulla pharetra diam sit amet nisl suscipit. A erat nam at lectus urna duis. Neque viverra justo nec ultrices.
+		</div>
+	</div>
 </body>
+<footer class='footer'>
+	<div>Card Conjurer by Kyle Burton</div>
+	<div>
+		Navigation<br>
+		Card Creator<br>
+		Life Counter<br>
+		Ask Scryfall
+	</div>
+	<div>
+		Legal<br>
+		Terms of Use<br>
+		Disclaimer
+	</div>
+</footer>
 <script defer src="data/scripts/sortable.js"></script>
 <script defer src="data/scripts/main.js"></script>
 <script defer src="data/scripts/versionM15.js"></script>