3DSflow Banners site - cover maker by @gocario - https://ianburgwin.net/3dsflow/ (OUTDATED - see https://github.com/ihaveamac/3DSFlow-downloader)

cover-maker.php

<div>
	<canvas id="canvasPreview" width="400px" height="222px">No canvas? That's sad...</canvas>
	<p>Please, right click on the preview to download it.</p>
</div>
<div>
	<div>
		<select id="templateType" name="templateType">
			<option value selected disabled>Select a cover!</option>
			<optgroup label="Nintendo 3DS Games">
				<option value="template-basic-banner-fullscreen.png">Generic</option>
				<option value="template-new-banner-fullscreen.png" data-offset-x="10" data-offset-y="10" disabled>Generic New (Not available yet)</option>	
				<option value="template-nnetwork-banner-fullscreen.png">Nintendo Network</option>
				<option value="template-amiibo-banner-fullscreen.png">amiibo</option>
				<option value="template-eshop-banner-fullscreen.png">Nintendo eShop</option>
			</optgroup>
			<optgroup label="Virtual Console">
				<option value="template-VC-generic-banner-fullscreen.png">Generic/Other</option>
				<option value="template-VC-GB-banner-fullscreen.png">Game Boy &amp; Game Boy Color</option>
				<option value="template-VC-GBA-banner-fullscreen.png">Game Boy Advance</option>
				<option value="template-VC-NES-banner-fullscreen.png">Nintendo Entertainment System</option>
				<option value="template-VC-SNES-banner-fullscreen.png">Super NES</option>
				<option value="template-VC-GG-banner-fullscreen.png">Game Gear</option>
			</optgroup>
			<optgroup label="Other">
				<option value="template-system-banner-fullscreen.png">System</option>
				<option value="template-hb-banner-fullscreen.png">Homebrew</option>
			</optgroup>
		</select>
		<input type="button" id="coverGame" name="coverGame" value="Load a cover">
		<input type="button" id="importCoverGame" name="importCoverGame" value="Import a cover">
		<!-- TODO: The template selector of the import -->
	</div>
	<div>
		<label><input type="checkbox" id="demoCheck" name="demoCheck">&nbsp;Add the demo logo</label>
	</div>
	<div class="hidden">
		<!-- To load images -->
		<img id="templatePreview" alt="templatePreview">
		<img id="coverPreview" alt="coverPreview">
		<img id="demoPreview" alt="demoPreview">
		<img id="importCoverPreview" alt="importCoverPreview">
		<form id="fileForm">
			<input type="file" id="fileLoad">
		</form>
	</div>
</div>

<script type="text/javascript">

function el(e){return document.getElementById(e);}
function addEvent(e,ev,f){if(e.addEventListener){e.addEventListener(ev,f,false);return true;}else if(e.attachEvent)e.attachEvent('on'+ev,f);}

addEvent(window, 'load', function() {
	var $canvas = el('canvasPreview');
	var ctx = $canvas.getContext("2d");

	/** Hidden previews **/
	var $templatePreview = el('templatePreview');
	var $coverPreview = el('coverPreview');
	var $importCoverPreview = el('importCoverPreview');
	var $demoPreview = el('demoPreview');
	var COVER_DEFAULT_X = 94, COVER_DEFAULT_Y = 9, COVER_SIZE = 186;
	var coverX = COVER_DEFAULT_X, coverY = COVER_DEFAULT_Y;
	var demoX = COVER_DEFAULT_X, demoY = COVER_DEFAULT_Y;
	var importCover = false;
	var updatePreview = function() {
		ctx.clearRect(0, 0, $canvas.width, $canvas.height);
		ctx.drawImage($templatePreview, 0, 0);
		if (importCover) ctx.drawImage($importCoverPreview, coverX, coverY, COVER_SIZE, COVER_SIZE, COVER_DEFAULT_X, COVER_DEFAULT_Y, COVER_SIZE, COVER_SIZE);
		else ctx.drawImage($coverPreview, coverX, coverY, COVER_SIZE, COVER_SIZE);
		if ($demoCheck.checked)ctx.drawImage($demoPreview, demoX, demoY);
	};
	addEvent($templatePreview, 'load', updatePreview);
	addEvent($coverPreview, 'load', updatePreview);
	addEvent($importCoverPreview, 'load', updatePreview);
	addEvent($demoPreview, 'load', updatePreview);
	/*********************/

	/** Select changes (Template) **/
	var $templateType = el('templateType');
	var templateFolder = "banners/Templates/"; //"//ianburgwin.net/3dsflow/banners/Templates/";
	var updateTemplatePreview = function() {
		$templatePreview.src = templateFolder + $templateType.value;
		coverX = (parseInt($templateType.selectedOptions[0].dataset.offsetX) || COVER_DEFAULT_X);
		coverY = (parseInt($templateType.selectedOptions[0].dataset.offsetY) || COVER_DEFAULT_Y);
	};
	addEvent($templateType, 'change', updateTemplatePreview);
	// updateTemplatePreview();
	/*******************************/

	/** File changes (Cover) **/
	var $coverGame = el('coverGame');
	var $importCoverGame = el('importCoverGame');
	addEvent($coverGame, 'click', function() {
		importCover = false;
		el('fileLoad').click();
	});
	addEvent($importCoverGame, 'click', function() {
		importCover = true;
		el('fileLoad').click();
	});
	addEvent(el('fileLoad'), 'change', function() {
		tempImageReader.readAsDataURL(this.files[0]);
		el('fileForm').reset();
	});
	var tempImageReader = new FileReader();
	addEvent(tempImageReader, 'load', function() {
		if (importCover) $importCoverPreview.src = tempImageReader.result;
		else $coverPreview.src = tempImageReader.result;
	});
	/**************************/

	/** Demo **/
	var $demoCheck = el('demoCheck');
	$demoPreview.src = templateFolder + "!template-demo-logo.png";
	addEvent($demoCheck, 'change', updatePreview);
	/**********/
});
</script>

index.php

<?php
// most of this is probably a bad idea but it works so shut up unless you can make it better :)

if(!isset($_SERVER['HTTPS']) || $_SERVER['HTTPS'] == ""){
    $redirect = "https://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
    header("HTTP/1.1 301 Moved Permanently");
    header("Location: $redirect");
    die;
}

$types = array("USA", "EUR", "GER", "AUS", "JPN", "Homebrew", "Custom", "Templates", "Make");
if (isset($_GET["type"])) {
    if (!in_array($_GET["type"], $types)) {
        header("Location: https://".$_SERVER['HTTP_HOST']."/3dsflow/");
        die;
    }
    $is_region = $_GET["type"] == "USA" || $_GET["type"] == "EUR" || $_GET["type"] == "GER" || $_GET["type"] == "AUS" || $_GET["type"] == "JPN";
}

function listImages($dir) {
    $files = scandir($dir);
    foreach ($files as $file) {
        if ($file[0] != "." && $file[0] != "!" && $file != "header.php") {
            echo '<div class="banner-img col-xs-12 col-sm-4 col-md-3 col-lg-3"><div><a href="'.$dir.'/'.$file.'"><img src="'.$dir.'/'.$file.'"></a></div></div>'."\n";
        }
    }
}
?>
<!DOCTYPE html>
<html>
<head>
    <title>3DSFlow Banners<?php echo ((isset($_GET["type"])) ? " - ".$_GET["type"] : " for the Grid Launcher"); ?></title>
    <link href='https://fonts.googleapis.com/css?family=Ubuntu:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            font-family: 'Ubuntu', sans-serif;
            /*text-align: center;*/
        }
        #types {
            font-size: 20px;
        }
        .banner-img div {
            display: inline-block;
            width: 246px;
            height: 216px;
            overflow: hidden;
            margin: 0 -10px -10px -10px;
        }
        .banner-img div img {
            position: relative;
            left: -77px;
        }
        .navbar {
            border-radius: 0 0 4px 4px;
            border-top: 0;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="navbar navbar-inverse" role="navigation">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/3dsflow/">3DSFlow Banners</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li<?php if ($_GET["type"] == "USA") echo ' class="active"'; ?>><a href="?type=USA">USA</a></li>
                    <li<?php if ($_GET["type"] == "EUR") echo ' class="active"'; ?>><a href="?type=EUR">EUR</a></li>
                    <li<?php if ($_GET["type"] == "GER") echo ' class="active"'; ?>><a href="?type=GER">GER</a></li>
                    <li<?php if ($_GET["type"] == "AUS") echo ' class="active"'; ?>><a href="?type=AUS">AUS</a></li>
                    <li<?php if ($_GET["type"] == "JPN") echo ' class="active"'; ?>><a href="?type=JPN">JPN</a></li>
                    <li<?php if ($_GET["type"] == "Homebrew") echo ' class="active"'; ?>><a href="?type=Homebrew">Homebrew</a></li>
                    <li<?php if ($_GET["type"] == "Custom") echo ' class="active"'; ?>><a href="?type=Custom">Custom</a></li>
                    <li<?php if ($_GET["type"] == "Templates") echo ' class="active"'; ?>><a href="?type=Templates">Templates</a></li>
                    <li<?php if ($_GET["type"] == "Make") echo ' class="active"'; ?>><a href="?type=Make">Make your own!</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </div>
    <p><a href="https://github.com/mashers/3ds_hb_menu/wiki/Banners">How to use Banners</a> &mdash; Click an image to download it!</p>
    <div id="banners">
        <?php
        if (isset($_GET["type"])) {
            if (file_exists("banners/".$_GET["type"]."/header.php")) {
                include("banners/".$_GET["type"]."/header.php");
            }
            echo "<hr>";
            if ($is_region) {
                echo "<div class=\"container\"><h2>Retail</h2>";
                listImages("banners/".$_GET["type"]."/retail");
                echo "</div><div class=\"container\"><h2>Nintendo eShop</h2>";
                listImages("banners/".$_GET["type"]."/eshop");
                echo "</div><div class=\"container\"><h2>Virtual Console</h2>";
                listImages("banners/".$_GET["type"]."/vc");
                echo "</div>";
            } elseif ($_GET["type"] == "Homebrew") {
                echo "<div class=\"container\"><h2>General</h2>";
                listImages("banners/".$_GET["type"]."/general");
                echo "</div><div class=\"container\"><h2>Emulators</h2>";
                listImages("banners/".$_GET["type"]."/emulators");
                echo "</div>";
            } else {
                echo "<div class=\"container\">";
                listImages("banners/".$_GET["type"]);
                echo "</div>";
            }
        }
        ?>
        <hr>
        <div class="container"><p>
                <a href="https://gbatemp.net/threads/gridlauncher-3dsflow-project-box-cover-banners.405303/">GBAtemp thread</a> &mdash; <a href="https://gist.github.com/ihaveamac/b2229c8feb513476e745">Site source code &amp; credits on GitHub Gist</a> &mdash; <a href="https://ianburgwin.net/">ianburgwin.net</a>
            </p></div>
    </div>
</div>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>