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;}
 }