From 5fe58c12952f3632bbbce8ed0be19ff9d0e69081 Mon Sep 17 00:00:00 2001
From: Kyle <41976328+ImKyle4815@users.noreply.github.com>
Date: Tue, 29 Dec 2020 20:48:37 -0800
Subject: [PATCH] set codes

---
 creator/index.php                | 23 +++++++++++++++++++++--
 css/{style-4.css => style-5.css} |  3 +++
 globalHTML/header.php            |  2 +-
 3 files changed, 25 insertions(+), 3 deletions(-)
 rename css/{style-4.css => style-5.css} (99%)

diff --git a/creator/index.php b/creator/index.php
index 84e36ff3..bc1b690c 100644
--- a/creator/index.php
+++ b/creator/index.php
@@ -184,7 +184,7 @@
 						</div>
 					</div>
 					<div id='creator-menu-setSymbol' class='hidden'>
-					<div class='readable-background padding margin-bottom'>
+						<div class='readable-background padding margin-bottom'>
 							<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");'>
@@ -195,7 +195,16 @@
 								<input id='set-symbol-code' type='text' placeholder='Set Code' class='input' oninput='fetchSetSymbol();'>
 								<input id='set-symbol-rarity' type='text' placeholder='Rarity' class='input' oninput='fetchSetSymbol();'>
 							</div>
-							<p class='padding input-description'>(Set Codes are determined by the two-three letter combinations used by <a href='https://gatherer.wizards.com' target='_blank'>Gatherer</a>'s set symbol images)</p>
+							<h5 class='collapsible collapsed padding input-description' onclick='toggleCollapse(event);'>
+								How to find set codes
+							</h5>
+							<div class='padding'>
+								<h5 class='margin-top'>Set codes are the two-three character combinations that represent sets. For sets released after 2015, the three-character set code can be found in the lower left hand corner.</h5>
+								<h5 class='margin-top'>For older sets, the code may be different depending on your use:</h5>
+								<p class='margin-top padding'>Set symbol images are fetched from the <a class='underline' href='https://gatherer.wizards.com/Pages/Default.aspx' target='_blank'>Gatherer</a>. After finding a card with the desired set symbol, right click the set symbol image and open it in a new tab. In the URL you should find the set code, following the 'set='</p>
+								<p class='padding'>For watermarks, please reference <a class='underline' href='https://keyrune.andrewgioia.com/icons.html' target='_blank'>Keyrune</a>.</p>
+								<p class='padding'>Generally, however, the set codes used by <a class='underline' href='https://scryfall.com/sets' target='_blank'>Scryfall</a> are accurate.</p>
+							</div>
 						</div>
 						<div class='readable-background padding'>
 							<h5 class='margin-bottom padding input-description'>Position/scale your Set Symbol (X, Y, Scale)</h5>
@@ -217,6 +226,16 @@
 								<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>
+							<h5 class='collapsible collapsed padding input-description' onclick='toggleCollapse(event);'>
+								How to find set codes
+							</h5>
+							<div class='padding'>
+								<h5 class='margin-top'>Set codes are the two-three character combinations that represent sets. For sets released after 2015, the three-character set code can be found in the lower left hand corner.</h5>
+								<h5 class='margin-top'>For older sets, the code may be different depending on your use:</h5>
+								<p class='margin-top padding'>Set symbol images are fetched from the <a class='underline' href='https://gatherer.wizards.com/Pages/Default.aspx' target='_blank'>Gatherer</a>. After finding a card with the desired set symbol, right click the set symbol image and open it in a new tab. In the URL you should find the set code, following the 'set='</p>
+								<p class='padding'>For watermarks, please reference <a class='underline' href='https://keyrune.andrewgioia.com/icons.html' target='_blank'>Keyrune</a>.</p>
+								<p class='padding'>Generally, however, the set codes used by <a class='underline' href='https://scryfall.com/sets' target='_blank'>Scryfall</a> are accurate.</p>
+							</div>
 						</div>
 						<div class='readable-background padding margin-bottom'>
 							<h5 class='margin-bottom padding input-description'>Select watermark colors (left, right)</h5>
diff --git a/css/style-4.css b/css/style-5.css
similarity index 99%
rename from css/style-4.css
rename to css/style-5.css
index 2784d699..9e89ba54 100644
--- a/css/style-4.css
+++ b/css/style-5.css
@@ -173,6 +173,9 @@ a {
 a:hover {
 	text-decoration: underline;
 }
+a.underline {
+	text-decoration: underline;
+}
 ::selection {
 	color: var(--font-color);
 	background: var(--color-highlight);
diff --git a/globalHTML/header.php b/globalHTML/header.php
index 84ca66a3..3dfad8d1 100644
--- a/globalHTML/header.php
+++ b/globalHTML/header.php
@@ -9,7 +9,7 @@
 	<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-4.css">
+	<link rel="stylesheet" href="/css/style-5.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">