notifications

creator/index.php

@@ -99,7 +99,7 @@
 							<h5 class='margin-bottom padding input-description'>Upload custom frame images</h5>
 							<div class='input-grid'>
 								<input type='file' accept='.png, .svg, .jpg, .jpeg, .bmp' placeholder='Via File Upload' class='input' oninput='imageLocal(event, uploadFrameOption);'>
-								<input type='text' placeholder='Via URL' class='input' onchange='imageURL(this.value, uploadFrameOption);'>
+								<input type='url' placeholder='Via URL' class='input' onchange='imageURL(this.value, uploadFrameOption);'>
 							</div>
 						</div>
 					</div>
@@ -159,7 +159,7 @@
 							<h5 class='margin-bottom padding input-description'>Choose/upload your art</h5>
 							<div class='input-grid margin-bottom'>
 								<input type='file' accept='.png, .svg, .jpg, .jpeg, .bmp' placeholder='Via File Upload' class='input' oninput='imageLocal(event, uploadArt, "autoFit");'>
-								<input type='text' placeholder='Via URL' class='input' onchange='imageURL(this.value, uploadArt, "autoFit");'>
+								<input type='url' placeholder='Via URL' class='input' onchange='imageURL(this.value, uploadArt, "autoFit");'>
 							</div>
 							<h5 class='margin-bottom padding input-description'>Or enter a card name (and index)</h5>
 							<div class='input-grid margin-bottom'>
@@ -188,7 +188,7 @@
 							<h5 class='margin-bottom padding input-description'>Choose/upload your set symbol</h5>
 							<div class='input-grid margin-bottom'>
 								<input type='file' accept='.png, .svg, .jpg, .jpeg, .bmp' placeholder='Via File Upload' class='input' oninput='imageLocal(event, uploadSetSymbol, "resetSetSymbol");'>
-								<input type='text' placeholder='Via URL' class='input' onchange='imageURL(this.value, uploadSetSymbol, "resetSetSymbol");'>
+								<input type='url' placeholder='Via URL' class='input' onchange='imageURL(this.value, uploadSetSymbol, "resetSetSymbol");'>
 							</div>
 							<h5 class='margin-bottom padding input-description'>Or enter a set code/rarity</h5>
 							<div class='input-grid margin-bottom'>
@@ -214,7 +214,7 @@
 							<h5 class='margin-bottom padding input-description'>Choose/upload your watermark</h5>
 							<div class='input-grid'>
 								<input type='file' accept='.png, .svg, .jpg, .jpeg, .bmp' placeholder='Via File Upload' class='input' oninput='imageLocal(event, uploadWatermark, "resetWatermark");'>
-								<input type='text' placeholder='Via URL' class='input' onchange='imageURL(this.value, uploadWatermark, "resetWatermark");'>
+								<input type='url' placeholder='Via URL' class='input' onchange='imageURL(this.value, uploadWatermark, "resetWatermark");'>
 								<input type='text' placeholder='Via Set Code' class='input' onchange='getSetSymbolWatermark(this.value);'>
 							</div>
 						</div>

css/style-4.css

@@ -264,8 +264,8 @@ a:hover {
 .circle {
 	z-index: 5;
 	position: fixed;
-	right: 2rem;
+	right: 0;
-	top: 2rem;
+	top: 0;
 	padding: 0;
 	background: var(--color-primary);
 	border-radius: 100%;
@@ -278,8 +278,8 @@ a:hover {
 }
 .hamburger.opened + .circle {
 	padding: var(--window-diagonal-size);
-	right: calc(2rem - var(--window-diagonal-size));
+	right: calc(0px - var(--window-diagonal-size));
-	top: calc(2rem - var(--window-diagonal-size));
+	top: calc(0px - var(--window-diagonal-size));
 	transition: 0.75s cubic-bezier(.53,.47,.76,-0.52);
 }
 /*Menus*/
@@ -311,6 +311,32 @@ a:hover {
 .main-menu > h2 {
 	margin-top: 4rem;
 }
+/*notifications*/
+.notification-container {
+	position: fixed;
+	z-index: 10;
+	bottom: 0;
+	left: 1.5rem;
+	width: calc(100vw - 3rem);
+	max-height: 75vh;
+	overflow-y: scroll;
+	transition: 0.5s;
+}
+.notification {
+	border-top: 0.25rem solid var(--color-selected);
+	background: var(--input-background);
+	display: grid;
+	grid-template-columns: auto 2rem;
+	transition: 0.5s;
+}
+.notification > h3 {
+	text-align: center;
+	user-select: none;
+	cursor: pointer;
+}
+.notification.hidden {
+	opacity: 0;
+}
 /*Inputs*/
 .input {
 	box-sizing: border-box;
@@ -354,7 +380,7 @@ a:hover {
 input[type=checkbox].input {
 	/*nothing for now*/
 }
-.input:not([type=text]):not([type=number]) {
+.input:not([type=text]):not([type=number]):not([type=url]) {
 	cursor: pointer;
 }
 textarea.input {

globalHTML/footer.php

@@ -1,4 +1,4 @@
-	<footer>
+	<footer class='readable-background'>
 		<div>
 			<h4>Card Conjurer</h4>
 			<h5><a href='https://twitter.com/ImKyle4815' target='_blank'>Twitter</a></h5>

globalHTML/header.php

@@ -9,19 +9,18 @@
 	<meta name="mobile-web-app-capable" content="yes">
 	<meta name="apple-mobile-web-app-status-bar-style" content="black">
 	<link rel="stylesheet" href="/css/reset.css">
-	<link rel="stylesheet" href="/css/style-3.css">
+	<link rel="stylesheet" href="/css/style-4.css">
 	<link rel="shortcut icon" href="/favicon.ico">
 	<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
 	<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
 	<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
 	<link rel="manifest" href="/site.webmanifest">
 	<script src='/js/themes.js'></script>
-	<script defer src='/js/main.js'></script>
+	<script defer src='/js/main-1.js'></script>
 </head>
 <body>
-	<!-- <script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script> --> <!--https://stackoverflow.com/questions/2898740/iphone-safari-web-app-opens-links-in-new-window-->
 	<div class='background'></div>
-	<header>
+	<header class='readable-background'>
 		<h1 class='title center'>CARD CONJURER</h1>
 	</header>
 	<div>
@@ -37,7 +36,6 @@
 				<h3><a href='/'>Home</a></h3>
 				<h3><a href='/creator'>Card Creator</a></h3>
 				<h3><a href='/old'>Old Card Creator</a></h3>
-				<!-- <h3><a href='/'>Card Gallery</a></h3> -->
 				<h3><a href='/askurza'>Ask Urza 2.0</a></h3>
 				<h3><a href='/about'>About Me</a></h3>
 				<h3><a href='/theme'>Theme Editor</a></h3>
@@ -49,4 +47,5 @@
 				<h3><a href='mailto:cardconjurermtg@gmail.com' target='_blank'>Email</a></h3>
 			</div>
 		</div>
+		<div class='notification-container'></div>
 	</div>

js/creator.js

@@ -217,7 +217,8 @@ function loadManaSymbols(manaSymbolPaths, size = [1, 1]) {
 		var manaSymbol = {};
 		manaSymbol.name = item.split('.')[0];
 		if (manaSymbol.name.includes('/')) {
-			manaSymbol.name = manaSymbol.name.split('/')[1];
+			manaSymbol.name = manaSymbol.name.split('/');
+			manaSymbol.name = manaSymbol.name[manaSymbol.name.length - 1];
 		}
 		manaSymbol.width = size[0];
 		manaSymbol.height = size[1];
@@ -226,9 +227,6 @@ function loadManaSymbols(manaSymbolPaths, size = [1, 1]) {
 		var manaSymbolPath = '/img/manaSymbols/' + item;
 		if (!manaSymbolPath.includes('.png')) {
 			manaSymbolPath += '.svg';
-			// manaSymbol.image.onload = function() {
-			// 	console.log(this);
-			// }
 		}
 		manaSymbol.image.src = fixUri(manaSymbolPath);
 		manaSymbols.push(manaSymbol);
@@ -939,8 +937,8 @@ function drawCard() {
 }
 //DOWNLOADING
 async function downloadCard() {
-	if (card.infoArtist.replace(/ /g, '') == '' && !card.artSource.includes('/img/blank.png')) {
+	if (card.infoArtist.replace(/ /g, '') == '' && !card.artSource.includes('/img/blank.png') && !card.artZoom == 0) {
-		alert('You must credit an artist before downloading!' + ' ' + card.artSource);
+		notify('You must credit an artist before downloading!');
 	} else {
 		var download = document.createElement('a');
 		var imageName = card.text.title.text;
@@ -1177,7 +1175,6 @@ function imageURL(url, destination, otherParams) {
 	if (params.get('noproxy') != '') {
 		imageurl = 'https://cors-anywhere.herokuapp.com/' + url;
 	}
-	console.log(imageurl)
 	destination(imageurl, otherParams);
 }
 async function imageLocal(event, destination, otherParams) {
@@ -1206,7 +1203,7 @@ function fetchScryfallData(cardName, callback = console.log) {
 			callback(JSON.parse(this.responseText));
 			// JSON.parse(this.responseText);
 		} else if (this.readyState == 4 && this.status == 404) {
-			alert('No cards found for "' + cardName + '"');
+			notify('No cards found for "' + cardName + '"');
 		}
 	}
 	xhttp.open('GET', 'https://api.scryfall.com/cards/search?order=released&unique=art&q=name%3D' + cardName.replace(/ /g, '_'), true);

js/frames/groupPlaneswalker.js

@@ -3,3 +3,4 @@ loadFramePacks([
 	{name:'Nickname Frames', value:'PlaneswalkerNickname'},
 	{name:'Tall Frames', value:'PlaneswalkerTall'}
 ])
+notify('When you load a Planeswalker frame version, a "Planeswalker" tab will appear. This tab controls the placement and loyalty costs for Planeswalker abilities.')

js/frames/groupSaga.js

@@ -5,3 +5,4 @@ loadFramePacks([
 	{name:'Inner Crowns', value:'M15InnerCrowns'},
 	{name:'Holo Stamps', value:'M15HoloStamps'}
 ])
+notify('When you load the Saga frame version, a "Saga" tab will appear. This tab controls the placement and chapter counts for Saga chapters.')

js/frames/manaSymbolsM21.js

@@ -2,6 +2,6 @@
 if (!card.manaSymbols.includes('/js/frames/manaSymbolsM21.js')) {
 	card.manaSymbols.push('/js/frames/manaSymbolsM21.js');
 }
-if (findManaSymbolIndex('fw') == -1) {
+if (findManaSymbolIndex('m21w') == -1) {
 	loadManaSymbols(['m21/m21w.png', 'm21/m21u.png', 'm21/m21b.png', 'm21/m21r.png', 'm21/m21g.png', 'm21/m210.png', 'm21/m211.png', 'm21/m212.png', 'm21/m213.png', 'm21/m214.png', 'm21/m215.png', 'm21/m216.png', 'm21/m217.png', 'm21/m218.png', 'm21/m219.png', 'm21/m21x.png', 'm21/dark/dm21w.png', 'm21/dark/dm21u.png', 'm21/dark/dm21b.png', 'm21/dark/dm21r.png', 'm21/dark/dm21g.png', 'm21/dark/dm210.png', 'm21/dark/dm211.png', 'm21/dark/dm212.png', 'm21/dark/dm213.png', 'm21/dark/dm214.png', 'm21/dark/dm215.png', 'm21/dark/dm216.png', 'm21/dark/dm217.png', 'm21/dark/dm218.png', 'm21/dark/dm219.png', 'm21/dark/dm21x.png']);
 }

js/frames/packFutureRegular.js

@@ -34,6 +34,7 @@ document.querySelector('#loadFrameVersion').onclick = async function() {
 	//sets card version
 	card.version = 'futureRegular';
 	loadScript('/js/frames/manaSymbolsFuture.js');
+	notify('The Future version adds special mana symbols. To use them, place an "F" before the following mana symbols: wubrg, 0-20, x, and hybrid mana symbols.');
 	//art bounds
 	card.artBounds = {x:0.086, y:0.0843, width:0.8714, height:0.5853};
 	autoFitArt();

js/frames/packM21.js

@@ -29,6 +29,7 @@ document.querySelector('#loadFrameVersion').onclick = async function() {
 	//sets card version
 	card.version = 'm21';
 	loadScript('/js/frames/manaSymbolsM21.js');
+	notify('The M21 version adds special mana symbols. To use them, place an "M21" or "DM21" before the following mana symbols: wubrg, 0-9, and x.');
 	//art bounds
 	card.artBounds = {x:0.0767, y:0.1129, width:0.8476, height:0.4429};
 	autoFitArt();

js/frames/versionSaga.js

@@ -8,7 +8,7 @@ if (!loadedVersions.includes('/js/frames/versionSaga.js')) {
 	newHTML.classList.add('hidden');
 	newHTML.innerHTML = `
 	<div class='readable-background padding'>
-		<h5 class='padding margin-bottom input-description'>Adjust the height (first input) and loyalty chapter count (second input) of each Saga ability</h5>
+		<h5 class='padding margin-bottom input-description'>Adjust the height (first input) and chapter count (second input) of each Saga ability</h5>
 		<h5 class='padding margin-bottom input-description'>First Ability:</h5>
 		<div class='padding input-grid margin-bottom'>
 			<input id='saga-height-0' type='number' class='input' oninput='sagaEdited();' min='0'>

js/main-1.js

@@ -0,0 +1,32 @@
+function toggleMenu() {
+	if (document.querySelector('.hamburger').classList.contains('opened')) {
+		document.querySelector('.hamburger').classList.remove('opened');
+		Array.from(document.querySelectorAll('.menu-visible')).forEach(element => element.classList.remove('menu-visible'));
+	} else {
+		document.documentElement.style.setProperty('--window-diagonal-size', (Math.floor(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2)) + 100) + 'px');
+		document.querySelector('.hamburger').classList.add('opened');
+		document.querySelector('.menu').classList.add('menu-visible');
+	}
+}
+function notify(message = '') {
+	var notification = document.createElement('div');
+	notification.classList = 'notification padding';
+	var notificationMessage = document.createElement('h4');
+	notificationMessage.innerHTML = message;
+	notification.appendChild(notificationMessage);
+	var close = document.createElement('h3');
+	close.innerHTML = 'X';
+	close.onclick = closeNotification;
+	notification.appendChild(close);
+	document.querySelector('.notification-container').appendChild(notification);
+}
+function closeNotification(event) {
+	var target = event.target.closest('.notification');
+	target.classList.add('hidden');
+	setTimeout(function(){target.remove();}, 500);
+}
+window.onload = function() {
+	Array.from(document.querySelectorAll('input')).forEach(element => {
+		element.autocomplete = 'off';
+	});
+}

js/main.js

@@ -1,10 +0,0 @@
-function toggleMenu() {
-	if (document.querySelector('.hamburger').classList.contains('opened')) {
-		document.querySelector('.hamburger').classList.remove('opened');
-		Array.from(document.querySelectorAll('.menu-visible')).forEach(element => element.classList.remove('menu-visible'));
-	} else {
-		document.documentElement.style.setProperty('--window-diagonal-size', (Math.floor(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2)) + 100) + 'px');
-		document.querySelector('.hamburger').classList.add('opened');
-		document.querySelector('.menu').classList.add('menu-visible');
-	}
-}

theme/index.php

@@ -15,7 +15,7 @@
 			<option value='/img/gradientBackground.svg'>Plain</option>
 		</select>
 		<h4>Enter a background image (URL ONLY)</h4>
-		<input id='background-url' class='input' type='text' placeholder='Enter a URL' onchange='changeThemeVar(this.value, "background");'>
+		<input id='background-url' class='input' type='url' placeholder='Enter a URL' onchange='changeThemeVar(this.value, "background");'>
 		<h4>Shift the Background's Hue</h4>
 		<input id='hue-rotate' class='input' type='range' min='0' max='360' step='1' oninput='changeThemeVar(this.value, "huerotate");'>
 		<h4>Enable Rainbow-Mode</h4>