Housekeeping

- Moving to HTMX integration - Improving links for local use - File structure - Hiding clutter
2025-07-25 12:25:02 -05:00 · 2022-11-21 16:17:13 -06:00
parent 70c8990024
commit 432bdc998b
34 changed files with 202 additions and 457 deletions
--- a/.htaccess
+++ b/.htaccess
@@ -1,4 +1,4 @@
-ErrorDocument 404 /404.php
+ErrorDocument 404 core/404.html

 <IfModule mod_headers.c>
 	#Header set Access-Control-Allow-Origin "*"
--- a/about/index.html
+++ b/about/index.html
@@ -1,8 +1,4 @@
-<?php
-$title = 'Card Conjurer - About';
-$desc = 'Card Conjurer has gone through a handful of major remakes. Click here for the full story!';
-include('../globalHTML/header-1.php');
-?>
+<!-- START OF CONTENT -->
 	<h2 class='readable-background header-extension title center'>About Me</h2>
 	<div class='layer center'></div>
 	<div class='layer center'>
@@ -35,4 +31,4 @@ include('../globalHTML/header-1.php');
 			Whether you'd like to see what I'm up to in the Magic world or take a look at some of the cards I've made with Card Conjurer, please consider taking a moment to check out my Twitter <a style='color: #00aced;' href="https://twitter.com/ImKyle4815" target='_blank'>@ImKyle4815</a>!
 		</h4>
 	</div>
-<?php include('../globalHTML/footer.php'); ?>
+<!-- END OF CONTENT -->
--- a/askurza/index.html
+++ b/askurza/index.html
@@ -1,8 +1,4 @@
-<?php
-$title = 'Ask Urza 2.0';
-$desc = 'Select random loyalty abilities from across all of Magic’s past planeswalkers. Gain 3 life? What a dud... Two extra turns? Yes please! Urza can do it all';
-include('../globalHTML/header-1.php');
-?>
+<!-- START OF CONTENT -->
    <h2 class='readable-background header-extension title center margin-bottom-large'>Ask Urza 2.0</h2>
    <style>
        .askUrzaGrid {
@@ -86,4 +82,4 @@ include('../globalHTML/header-1.php');
        </h5>
    </div>
    <script defer src="/askurza/askUrza.js"></script>
-<?php include('../globalHTML/footer.php'); ?>
+<!-- END OF CONTENT -->
--- a/converter/index.html
+++ b/converter/index.html
@@ -1,8 +1,4 @@
-<?php
-$title = 'MPC to Regular Converter';
-$desc = 'Generate random strands of phyrexian text for use with Card Conjurer, the custom Magic: The Gathering card creator';
-include('../globalHTML/header-1.php');
-?>
+<!-- START OF CONTENT -->
    <h2 class='readable-background header-extension title center margin-bottom-large'>MPC to Regular Converter</h2>
    <style>
        
@@ -25,4 +21,4 @@ include('../globalHTML/header-1.php');
        </h4>
    </div>
    <script defer src="/converter/converter.js"></script>
-<?php include('../globalHTML/footer.php'); ?>
+<!-- END OF CONTENT -->
--- a/core/404.html
+++ b/core/404.html
@@ -1,4 +1,4 @@
-<?php include('globalHTML/header-1.php'); ?>
+<!-- START OF CONTENT -->
 	<title>404 - Card Conjurer</title>
 	<div class='layer center'>
 		<h2 class='padding margin-bottom' style='font-size: 10rem;'>404</h2>
@@ -7,4 +7,4 @@
 	<div class='layer center'>
 		<h4 class='padding'>The page you seek is as lost as Fblthp.</h4>
 	</div>
-<?php include('globalHTML/footer.php'); ?>
+<!-- END OF CONTENT -->
--- a/core/CNAME
+++ b/core/CNAME
--- a/core/android-chrome-192x192.png
+++ b/core/android-chrome-192x192.png
--- a/core/android-chrome-512x512.png
+++ b/core/android-chrome-512x512.png
--- a/core/apple-touch-icon.png
+++ b/core/apple-touch-icon.png
--- a/core/favicon-16x16.png
+++ b/core/favicon-16x16.png
--- a/core/favicon-32x32.png
+++ b/core/favicon-32x32.png
--- a/core/favicon.ico
+++ b/core/favicon.ico
--- a/core/site.webmanifest
+++ b/core/site.webmanifest
@@ -0,0 +1,12 @@
+{
+"name":"Card Conjurer",
+"short_name":"CC",
+"icons":[
+	{"src":"/core/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},
+	{"src":"/core/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}
+],
+"theme_color":"#080808",
+"background_color":"#080808",
+"display":"standalone",
+"start_url":"/creator/index.html"
+}
--- a/core/sitemap.xml
+++ b/core/sitemap.xml
--- a/creator/index.html
+++ b/creator/index.html
@@ -1,8 +1,4 @@
-<?php
-$title = 'Card Conjurer - Creator';
-$desc = 'Create custom Magic: The Gathering cards on any web-enabled device. Make creatures, tokens, planeswalkers, and more in showcase frames and high resolutions';
-include('../globalHTML/header-1.php');
-?>
+<!-- START OF CONTENT -->
 	<link rel="preload" href="/fonts/beleren-b.ttf" as="font" type="font/ttf" crossorigin="anonymous" as='font'>
 	<link rel="preload" href="/fonts/beleren-bsc.ttf" as="font" type="font/ttf" crossorigin="anonymous" as='font'>
 	<link rel="preload" href="/fonts/gotham-medium.ttf" as="font" type="font/ttf" crossorigin="anonymous" as='font'>
@@ -812,4 +808,4 @@ include('../globalHTML/header-1.php');
 	</div>
 	<script defer src='/js/creator-23.js'></script>
 	<script defer src='/js/frameSearch.js'></script>
-<?php include('../globalHTML/footer.php'); ?>
+<!-- END OF CONTENT -->
--- a/css/style-9.css
+++ b/css/style-9.css
@@ -1,103 +1,103 @@
 /*fonts*/
@font-face {
 	font-family: gothammedium;
-	src: url("/fonts/gotham-medium.ttf") format('truetype');
+	src: url("../fonts/gotham-medium.ttf") format('truetype');
 }
@font-face {
 	font-family: belerenb;
-	src: url("/fonts/beleren-b.ttf") format('truetype');
+	src: url("../fonts/beleren-b.ttf") format('truetype');
 }
@font-face {
 	font-family: belerenbsc;
-	src: url("/fonts/beleren-bsc.ttf") format('truetype');
+	src: url("../fonts/beleren-bsc.ttf") format('truetype');
 }
@font-face {
 	font-family: matrix;
-	src: url("/fonts/matrix.ttf") format('truetype');
+	src: url("../fonts/matrix.ttf") format('truetype');
 }
@font-face {
 	font-family: matrixb;
-	src: url("/fonts/matrix-b.ttf") format('truetype');
+	src: url("../fonts/matrix-b.ttf") format('truetype');
 }
@font-face {
 	font-family: matrixbsc;
-	src: url("/fonts/Matrix Bold Small Caps.ttf") format('truetype');
+	src: url("../fonts/Matrix Bold Small Caps.ttf") format('truetype');
 }
@font-face {
 	font-family: mplantin;
-	src: url("/fonts/mplantin.ttf") format('truetype');
+	src: url("../fonts/mplantin.ttf") format('truetype');
 }
@font-face {
 	font-family: mplantini;
-	src: url("/fonts/mplantin-i.ttf") format('truetype');
+	src: url("../fonts/mplantin-i.ttf") format('truetype');
 }
@font-face {
 	font-family: plantinsemibold;
-	src: url("/fonts/plantin-semibold.otf") format('opentype');
+	src: url("../fonts/plantin-semibold.otf") format('opentype');
 }
@font-face {
 	font-family: plantinsemibolditalic;
-	src: url("/fonts/Plantin-SemiboldItalic.otf") format('opentype');
+	src: url("../fonts/Plantin-SemiboldItalic.otf") format('opentype');
 }
@font-face {
 	font-family: goudymedieval;
-	src: url("/fonts/goudy-medieval.ttf") format('truetype');
+	src: url("../fonts/goudy-medieval.ttf") format('truetype');
 }
@font-face {
 	font-family: phyrexianold;
-	src: url("/fonts/phyrexian.ttf") format('truetype');
+	src: url("../fonts/phyrexian.ttf") format('truetype');
 }
@font-face {
 	font-family: phyrexian;
-	src: url("/fonts/phy.woff2") format("woff2");
+	src: url("../fonts/phy.woff2") format("woff2");
 }
@font-face {
 	font-family: Montserrat-SemiBold;
-	src: url("/fonts/Montserrat-SemiBold.ttf") format('truetype');
+	src: url("../fonts/Montserrat-SemiBold.ttf") format('truetype');
 }
@font-face {
 	font-family: Montserrat-Medium;
-	src: url("/fonts/Montserrat-Medium.ttf") format('truetype');
+	src: url("../fonts/Montserrat-Medium.ttf") format('truetype');
 }
@font-face {
 	font-family: Acme-Regular;
-	src: url("/fonts/Acme-Regular.ttf") format('truetype');
+	src: url("../fonts/Acme-Regular.ttf") format('truetype');
 }
@font-face {
 	font-family: fritz-quadrata;
-	src: url("/fonts/fritz-quadrata.ttf") format('truetype');
+	src: url("../fonts/fritz-quadrata.ttf") format('truetype');
 }
@font-face {
 	font-family: japanese-title;
-	src: url("/fonts/NudMotoyaExAporo_W6.ttf") format('truetype');
+	src: url("../fonts/NudMotoyaExAporo_W6.ttf") format('truetype');
 }
@font-face {
 	font-family: japanese;
-	src: url('/fonts/2012c863631ba71f874aba70590795a1.otf') format('opentype');
+	src: url('../fonts/2012c863631ba71f874aba70590795a1.otf') format('opentype');
 }
@font-face {
 	font-family: invocation;
-	src: url('/fonts/invocation.ttf') format('truetype');
+	src: url('../fonts/invocation.ttf') format('truetype');
 }
@font-face {
 	font-family: invocation-text;
-	src: url('/fonts/shango-gothic-bold.ttf') format('truetype');
+	src: url('../fonts/shango-gothic-bold.ttf') format('truetype');
 }
@font-face {
 	font-family: souvenir;
-	src: url('/fonts/Souvenir-Itc-T-OT-Bold.otf') format('opentype');
+	src: url('../fonts/Souvenir-Itc-T-OT-Bold.otf') format('opentype');
 }
@font-face {
 	font-family: palatino;
-	src: url('/fonts/Palatino Font.ttf') format('truetype');
+	src: url('../fonts/Palatino Font.ttf') format('truetype');
 }
@font-face {
 	font-family: amanda;
-	src: url('/fonts/Amanda Std Regular.otf') format('opentype');
+	src: url('../fonts/Amanda Std Regular.otf') format('opentype');
 }
 /*Variables*/
 :root {
-	--site-background: url('/img/lowpolyBackground.svg');
+	--site-background: url('../img/lowpolyBackground.svg');
 	--color-primary: #35603E;
 	--color-selected: #ae9;
 	--color-highlight: #8f8;
--- a/data/site/favicons/site.webmanifest
+++ b/data/site/favicons/site.webmanifest
@@ -1 +1 @@
-{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
+{"name":"","short_name":"","icons":[{"src":"/core/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/core/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
--- a/gallery/index.html
+++ b/gallery/index.html
@@ -1,8 +1,4 @@
-<?php
-$title = 'Card Conjurer - Gallery';
-$desc = 'See examples of available frames';
-include('../globalHTML/header-1.php');
-?>
+<!-- START OF CONTENT -->
 	<h2 class='readable-background header-extension title center'>Available Frames</h2>
 	<h4 class='readable-background header-extension center'>What they're called, and where to find them</h4>
 	<div class='layer'>
@@ -233,4 +229,4 @@ include('../globalHTML/header-1.php');
 		populateGroup("tokenGrid", tokenTemplates);
 		// populateGroup("otherGrid", otherTemplates);
 	</script>
-<?php include('../globalHTML/footer.php'); ?>
+<!-- END OF CONTENT -->
--- a/globalHTML/footer.html
+++ b/globalHTML/footer.html
@@ -1,3 +1,4 @@
+	<!--
 	<footer class='readable-background'>
 		<div>
 			<h4>Card Conjurer</h4>
@@ -20,8 +21,9 @@
 		<div>
 			<h4>Legal</h4>
 			<h5><a href='/legal'>Terms and Conditions</a></h5>
-			<p>We are neither affiliated with, sponsored by, nor endorsed by Wizards of the Coast. Fonts, Mana symbols, card images, and other related images are trademarks and copyrights of Wizards of the Coast, LLC, a subsidiary of Hasbro, Inc.<br>We are neither affiliated with, sponsored by, nor endorsed by Legend Story Studios. Fonts, icons, card images, and other related images are trademarks and copyrights of Legend Story Studios.<br>We are neither affiliated with, sponsored by, nor endorsed by Scryfall LLC.<br>All user-uploaded material is property of the original artist, and it is the user's responsibility to ensure that these materials are properly credited.<br>All other content Copyright © <?php echo date("Y"); ?> Card Conjurer.<br>For more information on the Disclaimer or Terms and Conditions, please click the link above.</p>
+			<p>We are neither affiliated with, sponsored by, nor endorsed by Wizards of the Coast. Fonts, Mana symbols, card images, and other related images are trademarks and copyrights of Wizards of the Coast, LLC, a subsidiary of Hasbro, Inc.<br>We are neither affiliated with, sponsored by, nor endorsed by Legend Story Studios. Fonts, icons, card images, and other related images are trademarks and copyrights of Legend Story Studios.<br>We are neither affiliated with, sponsored by, nor endorsed by Scryfall LLC.<br>All user-uploaded material is property of the original artist, and it is the user's responsibility to ensure that these materials are properly credited.<br>All other content Copyright © <script> document.write(new Date().toLocaleDateString()); </script> Card Conjurer.<br>For more information on the Disclaimer or Terms and Conditions, please click the link above.</p>
 		</div>
 	</footer>
+	-->
 </body>
 </html>
--- a/globalHTML/header-1.php
+++ b/globalHTML/header-1.php
@@ -3,21 +3,19 @@
 <head>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<meta name="description" content="<?php echo $desc; ?>">
 	<meta name="keywords" content="mtg, magic, card, creator, custom, maker">
 	<meta name="apple-mobile-web-app-capable" content="yes">
 	<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-9.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">
+	<link rel="shortcut icon" href="/core/favicon.ico">
+	<link rel="apple-touch-icon" sizes="180x180" href="/core/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="/core/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="/core/favicon-16x16.png">
+	<link rel="manifest" href="/core/site.webmanifest">
 	<script src='/js/themes.js'></script>
 	<script defer src='/js/main-1.js'></script>
-	<title><?php echo $title; ?></title>
 </head>
 <body>
 	<div class='background'></div>
@@ -25,7 +23,11 @@
 		<h1 class='title center'>CARD CONJURER</h1>
 	</header>
 	<div>
-		<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" class='hamburger' onclick='toggleMenu()'>
+		<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1"
+		    xmlns="http://www.w3.org/2000/svg"
+		    xmlns:xlink="http://www.w3.org/1999/xlink"
+		    xml:space="preserve" xmlns:serif="http://www.serif.com/"
+		    class='hamburger' onclick='toggleMenu()'>
 		    <path class='line1' d="M10,18L90,18L10,82" />
 		    <path class='line3' d="M10,82L90,82L10,18" />
 		    <path class='line2' d="M10,50L90,50" />
@@ -43,11 +45,6 @@
 				<h3><a href='/gallery'>Gallery</a></h3>
 				<h3><a href='/theme'>Theme Editor</a></h3>
 				<h3><a href='/legal'>Legal</a></h3>
-				<h2>External Links</h2>
-				<h3><a href='https://twitter.com/ImKyle4815' target='_blank'>Twitter</a></h3>
-				<h3><a href='https://www.patreon.com/KyleBurton' target='_blank'>Patreon</a></h3>
-				<h2>Contact</h2>
-				<h3><a href='mailto:cardconjurermtg@gmail.com' target='_blank'>Email</a></h3>
 			</div>
 		</div>
 		<div class='notification-container'></div>
--- a/index.html
+++ b/index.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="keywords" content="mtg, magic, card, creator, custom, maker">
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<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-9.css">
+	<link rel="shortcut icon" href="core/favicon.ico">
+	<link rel="apple-touch-icon" sizes="180x180" href="core/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="core/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="core/favicon-16x16.png">
+	<link rel="manifest" href="core/site.webmanifest">
+	<script src='js/themes.js'></script>
+	<script src='js/htmx.min.js'></script>
+	<script defer src='js/main-1.js'></script>
+</head>
+<body>
+	<div class='background'></div>
+	<header class='readable-background'>
+		<h1 class='title center'>CARD CONJURER</h1>
+	</header>
+	<div>
+		<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1"
+		    xmlns="http://www.w3.org/2000/svg"
+		    xmlns:xlink="http://www.w3.org/1999/xlink"
+		    xml:space="preserve" xmlns:serif="http://www.serif.com/"
+		    class='hamburger' onclick='toggleMenu()'>
+		    <path class='line1' d="M10,18L90,18L10,82" />
+		    <path class='line3' d="M10,82L90,82L10,18" />
+		    <path class='line2' d="M10,50L90,50" />
+		</svg>
+		<div class='circle'></div>
+		<div class='menu menu-hidden'>
+			<div class='main-menu'>
+				<h2>Navigation</h2>
+				<h3><a href="#" hx-get="index.html" hx-target="#content" hx-trigger="click" onclick='toggleMenu()'>Home</a></h3>
+				<h3><a href="#" hx-get="creator/index.html" hx-target="#content" hx-trigger="click" onclick='toggleMenu()'>Card Creator</a></h3>
+				<h3><a href="#" hx-get="print/index.html" hx-target="#content" hx-trigger="click" onclick='toggleMenu()'>Printing Tool</a></h3>
+				<h3><a href="#" hx-get="askurza/index.html" hx-target="#content" hx-trigger="click" onclick='toggleMenu()'>Ask Urza 2.0</a></h3>
+				<h3><a href="#" hx-get="phyrexian/index.html" hx-target="#content" hx-trigger="click" onclick='toggleMenu()'>Phyrexian Generator</a></h3>
+				<h3><a href='#' hx-get="about/index.html" hx-target="#content" hx-trigger="click" onclick='toggleMenu()'>About Me</a></h3>
+				<h3><a href='#' hx-get="gallery/index.html" hx-target="#content" hx-trigger="click" onclick='toggleMenu()'>Gallery</a></h3>
+				<h3><a href='#' hx-get="theme/index.html" hx-target="#content" hx-trigger="click" onclick='toggleMenu()'>Theme Editor</a></h3>
+				<h3><a href='#' hx-get="legal/index.html" hx-target="#content" hx-trigger="click" onclick='toggleMenu()'>Legal</a></h3>
+			</div>
+		</div>
+		<div class='notification-container'></div>
+	</div>
+
+	<div id="content">
+		<div class='layer center'></div>
+		<div class='layer center'>
+			<h1>Welcome to Card Conjurer</h1>
+			<h3>The custom Magic: The Gathering card creator</h3>
+		</div>
+		<div class='layer center'></div>
+		<div class='layer readable-background center'>
+			<div class='sample-grid'>
+				<div class='animated-scene'><img src='img/samples/sample1.png' class='animated-card-1'></div>
+				<div class='vertical-center'>
+					<h1 class='padding margin-bottom'>Choose from a Variety of Card Frames</h1>
+					<h3 class='padding margin-bottom'>Card Conjurer offers Expeditions, Inventions, Showcase Frames, and so much more. <a href="#" hx-get="creator" hx-target="#content" hx-trigger="click">Take a look</a>!</h3>
+				</div>
+			</div>
+		</div>
+		<div class='layer center'>
+			<div class='sample-grid right'>
+				<div class='vertical-center'>
+					<h1 class='padding margin-bottom'>Customize to Your Heart's Content</h1>
+					<h3 class='padding margin-bottom'>With Card Conjurer's level of customization, you'll have endless options when designing your dream cards. <a href="#" hx-get="creator" hx-target="#content" hx-trigger="click">Try it out</a>!</h3>
+				</div>
+				<div class='animated-scene'><img src='img/samples/sample2.png' class='animated-card-1 animation-delay-2'></div>
+			</div>
+		</div>
+		<div class='layer readable-background center'>
+			<div class='sample-grid'>
+				<div class='animated-scene'><img src='img/samples/sample3.png' class='animated-card-1 animation-delay-4'></div>
+				<div class='vertical-center'>
+					<h1 class='padding margin-bottom'>Bling Out Existing Favorites</h1>
+					<h3 class='padding margin-bottom'>Easily import vital information from existing cards, then redesign them. <a href="#" hx-get="creator" hx-target="#content" hx-trigger="click">Go on, do it</a>!</h3>
+				</div>
+			</div>
+		</div>
+		<div class='layer center'>
+			<h1 class='margin-bottom'>Ready?</h1>
+			<a href="#" hx-get="creator" hx-target="#content" hx-trigger="click"><h1>Get Started</h1></a>
+		</div>
+	</div>
+
+</body>
+</html>
--- a/index.php
+++ b/index.php
@@ -1,43 +0,0 @@
-<?php
-$title = 'Card Conjurer - Welcome';
-$desc = 'Create custom Magic: The Gathering cards on any web-enabled device. Make creatures, tokens, planeswalkers, and more in showcase frames and high resolutions';
-include('globalHTML/header-1.php');
-?>
-	<div class='layer center'></div>
-	<div class='layer center'>
-		<h1>Welcome to Card Conjurer</h1>
-		<h3>The custom Magic: The Gathering card creator</h3>
-	</div>
-	<div class='layer center'></div>
-	<div class='layer readable-background center'>
-		<div class='sample-grid'>
-			<div class='animated-scene'><img src='/img/samples/sample1.png' class='animated-card-1'></div>
-			<div class='vertical-center'>
-				<h1 class='padding margin-bottom'>Choose from a Variety of Card Frames</h1>
-				<h3 class='padding margin-bottom'>Card Conjurer offers Expeditions, Inventions, Showcase Frames, and so much more. <a href='/creator/'>Take a look</a>!</h3>
-			</div>
-		</div>
-	</div>
-	<div class='layer center'>
-		<div class='sample-grid right'>
-			<div class='vertical-center'>
-				<h1 class='padding margin-bottom'>Customize to Your Heart's Content</h1>
-				<h3 class='padding margin-bottom'>With Card Conjurer's level of customization, you'll have endless options when designing your dream cards. <a href='/creator/'>Try it out</a>!</h3>
-			</div>
-			<div class='animated-scene'><img src='/img/samples/sample2.png' class='animated-card-1 animation-delay-2'></div>
-		</div>
-	</div>
-	<div class='layer readable-background center'>
-		<div class='sample-grid'>
-			<div class='animated-scene'><img src='/img/samples/sample3.png' class='animated-card-1 animation-delay-4'></div>
-			<div class='vertical-center'>
-				<h1 class='padding margin-bottom'>Bling Out Existing Favorites</h1>
-				<h3 class='padding margin-bottom'>Easily import vital information from existing cards, then redesign them. <a href='/creator/'>Go on, do it</a>!</h3>
-			</div>
-		</div>
-	</div>
-	<div class='layer center'>
-		<h1 class='margin-bottom'>Ready?</h1>
-		<a href='/creator/'><h1>Get Started</h1></a>
-	</div>
-<?php include('globalHTML/footer.php'); ?>
--- a/js/creator-23.js
+++ b/js/creator-23.js
@@ -8,12 +8,14 @@ if (debugging) {

 //To save the server from being overloaded? Maybe?
 function fixUri(input) {
+	/* --- DISABLED FOR LOCAL VERSION --
 	var prefix = 'https://card-conjurer.storage.googleapis.com';//'https://raw.githubusercontent.com/ImKyle4815/cardconjurer/remake';
 	if (input.includes(prefix) || input.includes('http') || input.includes('data:image') || window.location.href.includes('localhost')) {
 		return input;
 	} else {
 		return prefix + input; //input.replace('/img/frames', prefix + '/img/frames');
-	}
+	} */
+	return input
 }
 function setImageUrl(image, source) {
 	image.crossOrigin = 'anonymous';
--- a/js/htmx.min.js
+++ b/js/htmx.min.js
--- a/js/themes.js
+++ b/js/themes.js
@@ -10,7 +10,7 @@ if (localStorage.getItem('theme')) {

 function updateCSS() {
 	if (!root.getPropertyValue('--site-background').includes(theme.background)) {
-		root.setProperty('--site-background', 'url("' + (theme.background || '/img/lowpolyBackground.svg') + '")');
+		root.setProperty('--site-background', 'url("' + (theme.background || '../img/lowpolyBackground.svg') + '")');
 	}
 	// root.setProperty("--color-primary", theme.SOMETHING);
 	// root.setProperty("--color-selected", theme.SOMETHING);
@@ -38,7 +38,7 @@ function rainbowMode() {
 }

 function resetTheme() {
-	theme = {huerotate:0, background:'/img/lowpolyBackground.svg', readablebrightness:0.3, rainbow:0};
+	theme = {huerotate:0, background:'../img/lowpolyBackground.svg', readablebrightness:0.3, rainbow:0};
 	localStorage.setItem('theme', JSON.stringify(theme));
 	updateCSS();
 	if (window.location.href.includes('/theme/')) {
--- a/legal/index.html
+++ b/legal/index.html
@@ -1,8 +1,4 @@
-<?php
-$title = 'Card Conjurer - Legal';
-$desc = 'One does not simply make custom cards. Inform yourself on any rules and restrictions by reading these terms and conditions.';
-include('../globalHTML/header-1.php');
-?>
+<!-- START OF CONTENT -->
 	<h2 class='readable-background header-extension title center margin-bottom-large'>Terms and Conditions</h2>
 	<div class='main-content'>
 		<div class='readable-background layer margin-bottom-large'>
@@ -62,4 +58,4 @@ include('../globalHTML/header-1.php');
 			</h5>
 		</div>
 	</div>
-<?php include('../globalHTML/footer.php'); ?>
+<!-- END OF CONTENT -->
--- a/old/delete.html
+++ b/old/delete.html
@@ -1,282 +0,0 @@
-<!DOCTYPE html5>
-<html>
-<head>
-    <script async src="/data/scripts/localStorage.js"></script>
-    <link rel="stylesheet" href="/data/styles/main.css">
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="apple-touch-icon" sizes="180x180" href="/data/site/favicons/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/data/site/favicons/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/data/site/favicons/favicon-16x16.png">
-    <link rel="manifest" href="/data/site/favicons/site.webmanifest">
-</head>
-<link rel="preload" href="/data/fonts/gotham-medium.ttf" as="font" type="font/ttf" crossorigin="anonymous">
-<link rel="preload" href="/data/fonts/beleren-b.ttf" as="font" type="font/ttf" crossorigin="anonymous">
-<link rel="preload" href="/data/fonts/beleren-bsc.ttf" as="font" type="font/ttf" crossorigin="anonymous">
-<link rel="preload" href="/data/fonts/matrix.ttf" as="font" type="font/ttf" crossorigin="anonymous">
-<link rel="preload" href="/data/fonts/mplantin.ttf" as="font" type="font/ttf" crossorigin="anonymous">
-<link rel="preload" href="/data/fonts/mplantin-i.ttf" as="font" type="font/ttf" crossorigin="anonymous">
-<link rel="preload" href="/data/fonts/goudy-medieval.ttf" as="font" type="font/ttf" crossorigin="anonymous">
-<body>
-	<title>Card Conjurer</title>
-	<div class='title layer'>Card Conjurer</div>
-	<script>
-		alert("The old version of Card Conjurer will be taken offline at some point in the future, as early as April 2021. Sorry for the inconvenience.")
-		var cardWidth = 1500, cardHeight = 2100
-		if (window.location.search != "") {
-	        var parameters = window.location.search.replace('?', '').split('&');
-	        for (var i = 0; i < parameters.length; i ++) {
-	            var targetParameter = parameters[i].split('=');
-	            if (targetParameter[0] == 'scale') {
-	                cardWidth *= parseFloat(targetParameter[1]);
-	                cardHeight = cardWidth / 5 * 7;
-	            }
-	        }
-	    }
-	</script>
-	<div class='mainGrid'>
-		<canvas id="previewCanvas"></canvas>
-		<div>
-			<div class='tabPicker' id='tabPicker'>
-				<div onclick='toggleTabs(this, "frameTab")' class='selected interactable'>Frame</div>
-				<div onclick='toggleTabs(this, "textTab")' class='interactable'>Text</div>
-				<div onclick='toggleTabs(this, "artTab")' class='interactable'>Art</div>
-				<div onclick='toggleTabs(this, "setSymbolTab")' class='interactable'>Set Symbol</div>
-				<div onclick='toggleTabs(this, "watermarkTab")' class='interactable'>Watermark</div>
-				<div onclick='toggleTabs(this, "collectorTab")' class='interactable'>Collector</div>
-				<div onclick='toggleTabs(this, "importTab")' class='interactable'>Import/Save</div>
-				<div onclick='{toggleTabs(this, "tutorialTab"); if (document.getElementById("tutorial").src == "") {document.getElementById("tutorial").src = "https://www.youtube.com/embed/UrNk6I55S0Q"}}' class='interactable'>Tutorial</div>
-			</div>
-			<div id='tabOptions'>
-				<div id='frameTab'>
-					<div class="splitGrid">
-						<div>
-							Select a frame version:<br>
-							<select id="inputFrameVersion" onchange="loadVersion(this.value)">
-								<option disabled value=''>Standard Frames</option>
-				                <option value="m15">Regular</option>
-				                <option value="token">Tokens</option>
-				                <option value="m15Planeswalker">M15 Planeswalker</option>
-				                <option value="saga">Sagas</option>
-				                <option disabled value=''>Special Frames</option>
-				                <option value="m15Promo">Promo (Tall-Art)</option>
-				                <option value="m15Textless">Textless/Fullart</option>
-				                <option value="expedition">Zendikar Expeditions</option>
-				                <option value="modal">Modal (Front only)</option>
-				                <option value="short">Short Modal</option>
-				                <option disabled value=''>Standalone Frames</option>
-				                <option value="storybook">Eldraine Storybook</option>
-				                <option value="ixalan">Ixalan Maps</option>
-				                <option value="unstable">Unstable Basics</option>
-				                <option value="future">Future Shifted</option>
-				                <option disabled value=''>Old Frames</option>
-				                <option value="seventh">Seventh Edition</option>
-				                <option value="seventhTextless">Textless Seventh Edition</option>
-				                <option value="legends">Legends Multicolored</option>
-				                <option disabled value=''>Misc. Frames</option>
-				                <option value="planechase">Planechase</option>
-				                <option value="bleedEdge">1/8th Inch Bleed Edge</option>
-				            </select>
-						</div>
-						<div>
-							Load a frame pack:<br>
-							<select id="inputFramePack" onchange="loadScript('/data/scripts/versions/' + document.getElementById('inputFrameVersion').value + '/' + this.value + '.js')">
-				                <option value="regular">Regular</option>
-				            </select>
-						</div>
-					</div>
-					<div class="splitGrid">
-				        <div id="framePicker" class="frameGrid"></div>
-				        <div id="maskPicker"></div>
-				    </div>
-				    
-				    <div class='autoGrid'>
-					    <button onclick='addSelectedFrame()'>Add</button>
-					    <button onclick='addSelectedFrame(["Right Half"])'>Add To Right Half</button>
-					    <button onclick='addSelectedFrame(["Middle Third"])'>Add To Middle Third</button>
-					</div>
-					<div id='previewSelectedFrame'>
-				    	(Selected: None)
-				    </div>
-					<div id="cardMaster">
-
-				    </div>
-				    <div id='cardMasterElementEditor' class='hidden'>
-				    	X: <input id='cardMasterElementEditorX' type='number' oninput='cardMasterElementEdited()'>
-				    	Y: <input id='cardMasterElementEditorY' type='number' oninput='cardMasterElementEdited()'>
-				    	Scale: <input id='cardMasterElementEditorScale' type='number' oninput='cardMasterElementEdited()'>
-				    	Opacity: <input id='cardMasterElementEditorOpacity' type='number' min='0' max='100' oninput='cardMasterElementEdited()'>
-				    	Erase: <input id='cardMasterElementEditorErase' type='checkbox' onchange='cardMasterElementEdited()'>
-				    </div><br>
-				    <div>Upload your own frame images:</div>
-			        <div class="autoGrid">
-			            <input type="file" accept="image/*" onchange="uploadLocalFrameImage(event)" placeholder="Via File Upload">
-			            <input type="text" placeholder="Via URL" onchange="addUploadedFrameImage('https://cors-anywhere.herokuapp.com/' + this.value)">
-			        </div>
-				</div>
-				<div id='textTab' class='hidden'>
-					<input type="text" placeholder="Mana Cost" id="inputManaCost" oninput="manaCostUpdated()" value="">
-					<div id='textPicker'></div>
-					<div id='textEditor'>
-						Text: <textarea id='textEditorText' oninput='cardTextEdited()'></textarea>
-						X: <input id='textEditorX' type='number' oninput='cardTextEdited()'>
-						Y: <input id='textEditorY' type='number' oninput='cardTextEdited()'>
-						Width: <input id='textEditorWidth' type='number' oninput='cardTextEdited()'>
-						Height: <input id='textEditorHeight' type='number' oninput='cardTextEdited()'>
-					</div>
-					<div id='textCodeReference'>
-
-					</div>
-				</div>
-				<div id='artTab' class='hidden'>
-					<div class="splitGrid">
-			            <div>
-			                <input type="file" accept="image/*" onchange="uploadImage(event, cardArt)" placeholder="Via File Upload">
-			                <input type="text" placeholder="Via URL" onchange="cardArt.src = 'https://cors-anywhere.herokuapp.com/' + this.value">
-			                <input type="text" id="inputCardArtName" onchange="inputCardArtName(this.value)" placeholder="Via Card Name">
-			                <input type="number" id="inputCardArtNameNumber" onchange="inputCardArtNameNumber(this.value)" value="" min="1" max="1" placeholder="Which Art From Card Name">
-			                <input type="text" placeholder="Artist's Name" id="inputInfoArtist2" oninput="artistNameUpdated(this.value)" value="">
-			            </div>
-			            <div>
-			                <div>X, Y, &amp; Zoom:</div>
-			                <input type="number" value="0" id="inputCardArtX" oninput="cardArtUpdated()">
-			                <input type="number" value="0" id="inputCardArtY" oninput="cardArtUpdated()">
-			                <input type="number" value="100" step="0.1" min="0" id="inputCardArtZoom" oninput="cardArtUpdated()">
-			            </div>
-			        </div>
-			        <div>
-				    	To hide the art, set the Zoom value to 0.
-				    </div>
-				</div>
-				<div id='collectorTab' class='hidden'>
-					<div>
-						<div class="autoGrid">
-					        <input type="text" placeholder="Number" id="inputInfoNumber" oninput="bottomInfoUpdated()" value="">
-					        <input type="text" placeholder="Rarity" id="inputInfoRarity" oninput="bottomInfoUpdated()" value="P">
-					        <input type="text" placeholder="Set" id="inputInfoSet" oninput="bottomInfoUpdated()" value="MTG">
-					        <input type="text" placeholder="Language" id="inputInfoLanguage" oninput="bottomInfoUpdated()" value="EN">
-					        <input type="text" placeholder="Artist's Name" id="inputInfoArtist" oninput="artistNameUpdated(this.value)" value="">
-					    </div>
-					    Remember that you must properly credit the artist before downloading your card!
-					</div>
-				</div>
-				<div id='setSymbolTab' class='hidden'>
-					<div class="splitGrid">
-						<div>
-					        <input type="file" accept="image/*" onchange="uploadImage(event, setSymbol)" placeholder="Via File Upload">
-					        <input type="text" placeholder="Via URL" onchange="setSymbol.src = 'https://cors-anywhere.herokuapp.com/' + this.value">
-					        <input type="text" id="inputSetCode" placeholder="Via Set Code" onchange="setSymbolFromGatherer()">
-					        <input type="text" id="inputSetRarity" placeholder="Rarity" onchange="setSymbolFromGatherer()">
-					    </div>
-					    <div>
-					    	<div>X, Y, &amp; Zoom:</div>
-			                <input type="number" value="0" id="inputSetSymbolX" oninput="setSymbol.onload()">
-			                <input type="number" value="0" id="inputSetSymbolY" oninput="setSymbol.onload()">
-			                <input type="number" value="100" step="0.1" min="0" id="inputSetSymbolZoom" oninput="setSymbol.onload()">
-					    </div>
-				    </div>
-				    <div>
-				    	To hide the set symbol, set the Zoom value to 0.
-				    </div>
-				</div>
-				<div id='watermarkTab' class='hidden'>
-					<div class="autoGrid">
-			            <input type="file" accept="image/*" onchange="uploadImage(event, watermark)" placeholder="Via File Upload">
-			            <input type="text" placeholder="Via URL" onchange="watermark.src = 'https://cors-anywhere.herokuapp.com/' + this.value">
-			            <input type="text" placeholder="Via Set Code" onchange="cropSVG(this.value, watermark)">
-			            <select id="inputWatermarkPrimary" onchange="watermarkUpdated()">
-			                <option value="none">None</option>
-			                <option value="default">Default</option>
-			                <option value="#ccc8b1" selected="selected">White</option>
-			                <option value="#b0c3d5">Blue</option>
-			                <option value="#b3b3b3">Black</option>
-			                <option value="#ddac9b">Red</option>
-			                <option value="#b9c8b5">Green</option>
-			                <option value="#e4d49b">Gold</option>
-			                <option value="#b4bec6">Artifact/Colorless</option>
-			                <option value="#cfc8be">Land</option>
-			                <option value="#ffffff">True White</option>
-			            </select>
-			            <select id="inputWatermarkSecondary" onchange="watermarkUpdated()">
-			                <option value="none">None</option>
-			                <option value="default">Default</option>
-			                <option value="#ccc8b1">White</option>
-			                <option value="#b0c3d5">Blue</option>
-			                <option value="#b3b3b3">Black</option>
-			                <option value="#ddac9b">Red</option>
-			                <option value="#b9c8b5">Green</option>
-			                <option value="#e4d49b">Gold</option>
-			                <option value="#b4bec6">Artifact/Colorless</option>
-			                <option value="#cfc8be">Land</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'>
-					<div>
-						Import a real card:
-				        <input type="text" class="input text" id="inputCardNameTextImport" onchange="inputCardNameTextImport(this.value)" placeholder="Via Card Name">
-				        Select which card to import:
-				        <input type="number" class="input number" id="inputCardNameNumberTextImport" onchange="inputCardNameNumberTextImport(this.value)" value="1" min="1" max="1">
-				    </div><br>
-					<div>
-						Load a saved card:
-						<select id="inputCardToImport" onchange="importSavedCard(this.value)">
-							<option disabled selected='selected'>None selected</option>
-						</select>
-						<button onclick='saveCard()'>Save current card</button>
-						<button onclick='deleteCard()'>Delete selected card</button>
-					</div><br>
-					<div>
-						Cards are saved to your browser's local storage. If you plan on clearing site data or switching devices, you can download your saved cards here:
-						<button onclick='downloadSavedCards()'>Download all saved cards</button>
-						And upload your saved cards file here:
-						<input oninput='uploadSavedCards(event)' type='file'>
-					</div>
-				</div>
-				<div id='tutorialTab' class='hidden' style='width: 100%; height: 56.25%;'>
-					<iframe width='1920' height='1080' allowfullscreen style='width: 100%; height:100%; border: none;' id='tutorial'></iframe>
-				</div>
-			</div>
-			<div class='downloadCardImage'>
-				<a onclick="downloadCardImage(this)" id="downloadCardImage" href="" target="_blank" download="card.png">Download</a>
-			</div>
-		</div>
-	</div>
-	<div class='animated layer slideFromRight'>
-		<!-- <div class='cardLayerGrid'>
-			<blockquote class="twitter-tweet" data-theme="dark"><p lang="en" dir="ltr">Eldrazi Titans, Zendikar Rising Showcase. Now THIS would be an epic Secret Lair 👀<a href="https://twitter.com/hashtag/mtg?src=hash&amp;ref_src=twsrc%5Etfw">#mtg</a> <a href="https://twitter.com/hashtag/mtgproxy?src=hash&amp;ref_src=twsrc%5Etfw">#mtgproxy</a> <a href="https://twitter.com/hashtag/cardconjurer?src=hash&amp;ref_src=twsrc%5Etfw">#cardconjurer</a> <a href="https://t.co/TXDCeZyBDY">pic.twitter.com/TXDCeZyBDY</a></p>&mdash; 𝐊𝐲𝐥𝐞 𝐁𝐮𝐫𝐭𝐨𝐧 🧙‍♂️ (@ImKyle4815) <a href="https://twitter.com/ImKyle4815/status/1309512231659417603?ref_src=twsrc%5Etfw">September 25, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
-			<div> -->
-				<div class='title'>
-					Share Your Cards!
-				</div>
-				<div class="justify">
-					I'd love to see what custom cards you're making, and I'm sure others would too! Post a picture on Twitter with <a style='color: #00aced;' href="https://twitter.com/search?q=%23CardConjurer&src=typed_query&f=live" target='_blank'>#CardConjurer</a>, or just check out what others have made!
-				</div>
-			<!-- </div>
-		</div> -->
-	</div>
-    <div class='animated layer slideFromLeft'>
-        <div class='cardLayerGrid'>
-            <div>
-                <div class='title'>
-                    How You Can Help
-                </div>
-                <div class="justify">
-                    As a student on a tight budget, it can be hard to afford Magic. If you've enjoyed using Card Conjurer and would like to help me attend a draft or continue working on Card Conjurer, you can make a small donation via <a style='color: #3b7bbf;' href="https://www.paypal.me/kyleburtondonate" target='_blank'>PayPal</a>. If you prefer other methods of supporting, I have a <a style='color: #28abdf;' href="https://ko-fi.com/kyleburton" target='_blank'>Ko-Fi</a> and <a style='color: #f96854;' href="https://www.patreon.com/KyleBurton" target='_blank'>Patreon</a> as well. Any assistance is greatly appreciated!
-                </div>
-            </div>
-        </div>
-    </div>
-    <script defer src="/data/scripts/sortable.js"></script>
-	<script defer src="/data/scripts/main.js"></script>
-	<script defer src="/data/scripts/versions/m15/version.js"></script>
-	<script defer src="/data/scripts/localCardStorage.js"></script>
-	<div class='notificationContainer'></div>
-</body>
-<footer id='footer'>
-	<script async src='/data/scripts/footer.js'></script>
-	<script defer src="/data/scripts/animations.js"></script>
-</footer>
-<html>
--- a/phyrexian/index.html
+++ b/phyrexian/index.html
@@ -1,8 +1,4 @@
-<?php
-$title = 'Phyrexian Text Generator';
-$desc = 'Generate random strands of phyrexian text for use with Card Conjurer, the custom Magic: The Gathering card creator';
-include('../globalHTML/header-1.php');
-?>
+<!-- START OF CONTENT -->
    <h2 class='readable-background header-extension title center margin-bottom-large'>Phyrexian Text Generator</h2>
    <style>
        textarea.input.phyrexian-textarea {
@@ -38,4 +34,4 @@ include('../globalHTML/header-1.php');
        </h4>
    </div>
    <script defer src="/phyrexian/phyrexian.js"></script>
-<?php include('../globalHTML/footer.php'); ?>
+<!-- END OF CONTENT -->
--- a/print/index.html
+++ b/print/index.html
@@ -1,8 +1,4 @@
-<?php
-$title = 'Print Page Setup';
-$desc = 'Upload card images and download a fully prepared page for printing';
-include('../globalHTML/header-1.php');
-?>
+<!-- START OF CONTENT -->
    <h2 class='readable-background header-extension title center margin-bottom-large'>Printing Tool</h2>
    <div class='readable-background padding layer margin-bottom-large'>
 		<h4 class='collapsible collapsed center padding margin-bottom' onclick='toggleCollapse(event);'>Configure Page Settings</h4>
@@ -75,4 +71,4 @@ include('../globalHTML/header-1.php');
    </div>
 	<script defer src='https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js'></script>
    <script defer src="/print/print.js"></script>
-<?php include('../globalHTML/footer.php'); ?>
+<!-- END OF CONTENT -->
--- a/serve.py
+++ b/serve.py
@@ -0,0 +1,24 @@
+# Python 3 server example
+from http.server import SimpleHTTPRequestHandler, HTTPServer
+import os
+
+NAME = "localhost"
+PORT = 8080
+DIRECTORY = os.getcwd()
+
+
+class Handler(SimpleHTTPRequestHandler):
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, directory=DIRECTORY, **kwargs)
+
+if __name__ == "__main__":
+    webServer = HTTPServer((NAME, PORT), Handler)
+    print("Server started http://%s:%s" % (NAME, PORT))
+
+    try:
+        webServer.serve_forever()
+    except KeyboardInterrupt:
+        pass
+
+    webServer.server_close()
+    print("Server stopped.")
--- a/site.webmanifest
+++ b/site.webmanifest
@@ -1,12 +0,0 @@
-{
-"name":"Card Conjurer",
-"short_name":"CC",
-"icons":[
-	{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},
-	{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}
-],
-"theme_color":"#080808",
-"background_color":"#080808",
-"display":"standalone",
-"start_url":"/creator/index.php"
-}
--- a/test.html
+++ b/test.html
@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<title>Testing the download attribute on anchor tags</title>
-</head>
-<body>
-	<a download='test.png' target='_blank' href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAnUlEQVRoQ+3YQQ6AQAzDwPTn+/PyhRipN3NGAmatHJhkN9fXm+snZPwQYuyJ9Fqm1VslMa2ey7R6K9NCVqaFuFytnsu0eitXC1mZFuJytXou0+qtXC1kZVqIy9XquSYv5z/o9vUv9PdOP4TIeSJAy7QAVkwLaJkWwDItgmVaRMvVAlqmBbBcLYJlWkTL1QJapgWwXC2CZVpEy9UCWh8I1YloPStTxAAAAABJRU5ErkJggg=='>Click me to download</a>
-	<br><br>
-	<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAnUlEQVRoQ+3YQQ6AQAzDwPTn+/PyhRipN3NGAmatHJhkN9fXm+snZPwQYuyJ9Fqm1VslMa2ey7R6K9NCVqaFuFytnsu0eitXC1mZFuJytXou0+qtXC1kZVqIy9XquSYv5z/o9vUv9PdOP4TIeSJAy7QAVkwLaJkWwDItgmVaRMvVAlqmBbBcLYJlWkTL1QJapgWwXC2CZVpEy9UCWh8I1YloPStTxAAAAABJRU5ErkJggg=='>
-</body>
-</html>
--- a/theme/index.html
+++ b/theme/index.html
@@ -1,8 +1,4 @@
-<?php
-$title = 'Card Conjurer - Theme Editor';
-$desc = 'Customize your experience by adjusting the look of Card Conjurer. Upload a background, adjust the lightness, or maybe discover what rainbow-mode is!';
-include('../globalHTML/header-1.php');
-?>
+<!-- START OF CONTENT -->
 	<h2 class='readable-background header-extension title center'>Theme Editor</h2>
 	<div class='layer center'></div>
 	<div class='layer center'>
@@ -14,8 +10,8 @@ include('../globalHTML/header-1.php');
 		<h3>Background</h3>
 		<h4>Choose a background</h4>
 		<select class='input' onchange='changeThemeVar(this.value, "background");'>
-			<option value='/img/lowpolyBackground.svg'>Lowpoly</option>
-			<option value='/img/gradientBackground.svg'>Plain</option>
+			<option value='../img/lowpolyBackground.svg'>Lowpoly</option>
+			<option value='../img/gradientBackground.svg'>Plain</option>
 		</select>
 		<h4>Enter a background image (URL ONLY)</h4>
 		<input id='background-url' class='input' type='url' placeholder='Enter a URL' onchange='changeThemeVar(this.value, "background");'>
@@ -28,5 +24,5 @@ include('../globalHTML/header-1.php');
 		<input id='readable-brightness' class='input' type='range' min='0' max='1' step='0.01' oninput='changeThemeVar(this.value, "readablebrightness");'>
 		<button class='input margin-top' onclick='resetTheme();'>Reset Theme to Default</button>
 	</div>
-	<script defer src='/js/themeEditor.js'></script>
-<?php include('../globalHTML/footer.php'); ?>
+	<script defer src='../js/themeEditor.js'></script>
+<!-- END OF CONTENT -->
--- a/tutorial/index.html
+++ b/tutorial/index.html
@@ -1,8 +1,4 @@
-<?php
-$title = 'Card Conjurer - Tutorials';
-$desc = 'Written guides on how to create a variety of custom Magic: The Gathering cards on Card Conjurer';
-include('../globalHTML/header-1.php');
-?>
+<!-- START OF CONTENT -->
 	<div class='layer center'>
 		<h2>Written Guides</h2>
 	</div>
@@ -54,4 +50,4 @@ include('../globalHTML/header-1.php');
 			</div>
 		</div>
 	</div>
-<?php include('../globalHTML/footer.php'); ?>
+<!-- END OF CONTENT -->