--- /dev/null
+<?php
+error_reporting(E_ALL);
+ini_set('display_errors', 'On');
+
+$file = fopen("../items.json", "r") or die("unable to open file!");
+$items = fread($file, filesize("../items.json"));
+fclose($file);
+$items = json_decode($items, true);
+
+$file = fopen("../text.json", "r") or die("unable to open file!");
+$text = fread($file, filesize("../text.json"));
+fclose($file);
+$text = json_decode($text, true);
+
+$file = fopen("../data.json", "r") or die("unable to open file!");
+$data = fread($file, filesize("../data.json"));
+fclose($file);
+$data = json_decode($data, true);
+
+if (!empty($_POST['update'])) {
+ $data['itemId'] = (int)$_POST['item'];
+
+ $data['showingExtra'] = var_export(!empty($_POST['extra']), true);
+ $data['showingTimer'] = var_export(!empty($_POST['timer']), true);
+ $data['showingBanner'] = var_export(!empty($_POST['banner']), true);
+ $data['showingSigil'] = [
+ var_export(!empty($_POST['sigilNE']), true),
+ var_export(!empty($_POST['sigilSE']), true),
+ var_export(!empty($_POST['sigilSW']), true),
+ var_export(!empty($_POST['sigilNW']), true)
+ ];
+ $data['round'] = var_export(!empty($_POST['round']), true);
+
+ $data['timerOffset'] = (int)$_POST['timerOffset'];
+ $data['priceChange'] = (int)$_POST['priceChange'];
+ $data['discount'] = (int)$_POST['discount'];
+ $data['prefix'] = $_POST['prefix'];
+
+ $data['currency']['prefix'] = $_POST['prefixString'];
+ $data['currency']['postfix'] = $_POST['postfixString'];
+
+ $getTopText = function ($x) use ($text) {return $text['topText'][(int)$x];};
+ $getBottomText = function ($x) use ($text) {return $text['bottomText'][(int)$x];};
+
+ if (!empty($_POST['topText'])) {
+ $data['topText'] = array_map($getTopText, $_POST['topText']);
+ } else {
+ $data['topText'] = [];
+ }
+ if (!empty($_POST['bottomText'])) {
+ $data['bottomText'] = array_map($getBottomText, $_POST['bottomText']);
+
+ } else {
+ $data['bottomText'] = [];
+ }
+
+ $data['bannerText'] = $text['bannerText'][(int)$_POST['bannerText']];
+
+ if (!empty($_POST['addTime'])) {
+ $minutes = (int)substr($_POST['addTime'], 0, 2);
+ $seconds = (int)substr($_POST['addTime'], 2, 4) + ($minutes * 60);
+ $data['timerEnd'] = time() + $seconds;
+ }
+
+ $json = json_encode($data);
+ $file = fopen("../data.json", "w");
+ fwrite($file, $json);
+ fclose($file);
+}
+?>
+<html>
+ <head>
+ <style>
+h1 {
+ margin: 0;
+}
+.split {
+ display: inline-block;
+ width: calc(50% - 20px);
+ margin: 10px;
+ vertical-align: top;
+}
+fieldtext > .split {
+ width: 50%;
+ margin: 0;
+}
+@media screen and (max-width: 800px) {
+ .split {
+ width: calc(100% - 20px);
+ }
+}
+ </style>
+ </head>
+ <body>
+
+ <div class="split">
+ <h1>Interface</h1>
+ <form action="./index.php" method="POST">
+<?php
+echo "<fieldset><legend>Products</legend>";
+for ($i = 0; $i < count($items); $i++) {
+ $description = $items[$i]["description"];
+ $checked = "";
+
+ if ($data['itemId'] == $i) {
+ $checked = " checked='checked' ";
+ }
+
+ echo "<input type='radio' id='$i' value='$i' name='item'$checked>";
+ echo "<label for='$i'> $description</label><br>";
+}
+
+$checked = "";
+if ($data['showingExtra'] == "true") {
+ $checked = " checked='checked' ";
+}
+echo "<input type='checkbox' id='extra' name='extra' value='true'$checked>";
+echo "<label for='extra'> Showing extra information</label>";
+echo "</fieldset>";
+
+echo "<fieldset><legend>Pricing</legend>";
+
+$preChecked = "";
+$postChecked = "";
+if ($data['prefix'] == "true") {
+ $preChecked = " checked='checked' ";
+} else {
+ $postChecked = " checked='checked' ";
+}
+$prefix = $data['currency']['prefix'];
+$postfix = $data['currency']['postfix'];
+echo "<input type='radio' id='prefix' name='prefix' value='true'$preChecked>";
+echo "<input type='text' id='prefix' name='prefixString' value='$prefix'>";
+echo "<label for='prefix'> Prefix</label><br>";
+
+echo "<input type='radio' id='postfix' name='prefix' value='false'$postChecked>";
+echo "<input type='text' id='postfix' name='postfixString' value='$postfix'>";
+echo "<label for='postfix'> Postfix</label><br>";
+
+$discount = $data['discount'];
+echo "<input type='number' name='discount' id='discount' value='$discount'>";
+echo "<label for='discount'> Discount (%)</label><br>";
+
+$change = $data['priceChange'];
+echo "<input type='number' name='priceChange' id='priceChange' value='$change'>";
+echo "<label for='priceChange'> Discount change (%/s)</label><br>";
+
+$checked = "";
+if ($data['round'] == "true") {
+ $checked = " checked='checked' ";
+}
+echo "<input type='checkbox' id='round' name='round' value='true'$checked>";
+echo "<label for='round'> Round prices</label>";
+
+echo "</fieldset>";
+
+echo "<fieldset><legend>Info text</legend>";
+echo "<div class='split'>";
+for ($i = 0; $i < count($text['topText']); $i++) {
+ $line = $text['topText'][$i];
+ $checked = "";
+ if (in_array($line, $data['topText'])) {
+ $checked = " checked='checked' ";
+ }
+ echo "<input type='checkbox' id='topText' value='$i' name='topText[]'$checked>";
+ echo "<label for='topText'> $line</label><br>";
+}
+echo "</div>";
+echo "<div class='split'>";
+for ($i = 0; $i < count($text['bottomText']); $i++) {
+ $line = $text['bottomText'][$i];
+ $checked = "";
+ if (in_array($line, $data['bottomText'])) {
+ $checked = " checked='checked' ";
+ }
+ echo "<input type='checkbox' id='bottomText' value='$i' name='bottomText[]'$checked>";
+ echo "<label for='bottomText'> $line</label><br>";
+}
+
+echo "</div>";
+for ($i = 0; $i < count($text['bannerText']); $i++) {
+ $line = $text['bannerText'][$i];
+ $checked = "";
+ if ($data['bannerText'] == $line) {
+ $checked = " checked='checked' ";
+ }
+ echo "<input type='radio' id='$i' value='$i' name='bannerText'$checked>";
+ echo "<label for='$i'> $line</label><br>";
+}
+$checked = "";
+if ($data['showingBanner'] == "true") {
+ $checked = " checked='checked' ";
+}
+echo "<input type='checkbox' id='banner' name='banner' value='true'$checked>";
+echo "<label for='banner'>Show banner</label>";
+echo "</fieldset>";
+
+echo "<fieldset><legend>Sigil display</legend>";
+echo "<div class='split'>";
+$checked = "";
+if ($data['showingSigil'][3] == "true") {
+ $checked = " checked='checked' ";
+}
+echo "<input type='checkbox' id='sigilNW' name='sigilNW' value='true'$checked>";
+echo "<label for='sigilNW'>Top left (NW)</label><br>";
+$checked = "";
+if ($data['showingSigil'][2] == "true") {
+ $checked = " checked='checked' ";
+}
+echo "<input type='checkbox' id='sigilSW' name='sigilSW' value='true'$checked>";
+echo "<label for='sigilSW'>Bottom left (SW)</label><br>";
+echo "</div><div class='split'>";
+$checked = "";
+if ($data['showingSigil'][0] == "true") {
+ $checked = " checked='checked' ";
+}
+echo "<input type='checkbox' id='sigilNE' name='sigilNE' value='true'$checked>";
+echo "<label for='sigilNE'>Top right (NE)</label><br>";
+$checked = "";
+if ($data['showingSigil'][1] == "true") {
+ $checked = " checked='checked' ";
+}
+echo "<input type='checkbox' id='sigilSE' name='sigilSE' value='true'$checked>";
+echo "<label for='sigilSW'>Bottom right (SE)</label><br>";
+echo "</div>";
+echo "</fieldset>";
+
+echo "<fieldset><legend>Timer</legend>";
+echo "<input type='radio' id='0000' value='0000' name='addTime'>";
+echo "<label for='0000'> Reset</label><br>";
+echo "<input type='radio' id='0030' value='0030' name='addTime'>";
+echo "<label for='0030'> +00:30</label><br>";
+echo "<input type='radio' id='0100' value='0100' name='addTime'>";
+echo "<label for='0100'> +01:00</label><br>";
+echo "<input type='radio' id='0200' value='0200' name='addTime'>";
+echo "<label for='0200'> +02:00</label><br>";
+echo "<input type='radio' id='0500' value='0500' name='addTime'>";
+echo "<label for='0500'> +05:00</label><br>";
+echo "<input type='radio' id='1000' value='1000' name='addTime'>";
+echo "<label for='1000'> +10:00</label><br>";
+$checked = "";
+if ($data['showingTimer'] == "true") {
+ $checked = " checked='checked' ";
+}
+$timerOffset = $data["timerOffset"];
+echo "<input type='number' id='timerOffset' name='timerOffset' min='-5000' max='5000' step='1' value='$timerOffset'>";
+echo "<label for='timerOffset'> Timer offset (ms)</label>";
+echo "<br><input type='checkbox' id='timer' name='timer' value='true'$checked>";
+echo "<label for='timer'> Showing timer</label>";
+echo "</fieldset>";
+?>
+ <br><input type="submit" name="update" value="Update">
+ </form>
+ </div><div class="split">
+ <h1>Current data</h1>
+ <p>
+<?php echo "<pre>" . var_export($data, true) . "</pre>" ?>
+ </p>
+ </div>
+ </body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="refres" content="5">
+ <style>
+:root {
+ --background: linear-gradient(#FFFFFF, #EEEEEE);
+ --dark: #DEDEDE;
+ --feature-dark: #AAAAEE;
+ --feature-light: #BBBBEE;
+ --feature-gradient: linear-gradient(var(--feature-dark), var(--feature-light));
+
+ font-family: sans-serif;
+ font-size: 1.6vh;
+ color: black;
+}
+@keyframes spin {
+ 0% {transform: rotate(0turn) scale(1.2);}
+ 50% {transform: rotate(0.25turn) scale(1);}
+ 100% {transform: rotate(0.5turn) scale(1.2);}
+}
+@keyframes spinText {
+ 0% {transform: rotate(-0.01turn);}
+ 50% {transform: rotate(0.01turn);}
+ 100% {transform: rotate(-0.01turn);}
+}
+.container {
+ position: absolute;
+ border-radius: 1vh;
+}
+.box {
+ border-radius: 1vh;
+ box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
+ background-image: var(--background);
+}
+.side {
+ left: 6vh;
+ top: 6vh;
+ width: 40vh;
+}
+.main {
+ z-index: 0;
+}
+.banner {
+ left: 48vh;
+ top: 6vh;
+ height: 2em;
+ width: 0vh;
+ padding: 0.5vh;
+ overflow: hidden;
+ opacity: 0;
+ transition: opacity 1.5s, width 1.5s;
+}
+.extra {
+ position: relative;
+ top: -2vh;
+ z-index: -1;
+ transform: translateY(-100%);
+ padding-top: 2vh;
+ background-image: var(--feature-gradient);
+ transition: transform 1.5s;
+}
+.showExtra > .extra {
+ transform: translateY(0%);
+}
+.main > *, .extra > *, .bottom > *, .marquee > * {
+ margin: 0;
+ padding: 0.5vh 1vh;
+}
+.banner > h1 {
+ width: 49vh;
+ margin: 0;
+ font-size: 2em;
+ line-height: 1;
+ font-style: italic;
+ font-weight: normal;
+ text-align: center;
+}
+.sigilBox {
+ opacity: 0;
+ transition: opacity 10s;
+}
+.sigil {
+ width: 20vh;
+ height: 20vh;
+}
+#sigilNE {
+ right: 4vh;
+ top: 4vh;
+}
+#sigilSE {
+ right: 4vh;
+ bottom: 4vh;
+}
+#sigilSW {
+ left: 4vh;
+ bottom: 4vh;
+}
+#sigilNW {
+ left: 4vh;
+ top: 4vh;
+}
+.badgeContainer {
+ position: relative;
+ padding: 0;
+}
+.badge {
+ position: absolute;
+ top: -2vh;
+ left: 32vh;
+ width: 10vh;
+ height: 10vh;
+ padding: 0;
+ animation: spin 10s linear 0s infinite;
+}
+h2.badge {
+ top: -1vh;
+ left: 26.5vh;
+ color: white;
+ width: 20vh;
+ animation: spinText 10s linear 0s infinite;
+ rotate: 0.025turn;
+ text-align: center;
+ text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
+}
+.badgeContainer {
+ transform: translateX(12vh) scale(0%);
+ transition: transform 1.5s;
+}
+.main > hr, .extra > hr {
+ margin: 0.5vh 1vh;
+ padding: 0;
+ border-color: var(--dark);
+}
+.feature {
+ border-top: 2px solid var(--dark);
+ border-bottom: 2px solid var(--dark);
+ background-image: var(--feature-gradient);
+}
+.bottom {
+ left: 6vh;
+ bottom: 6vh;
+ width: 100vh;
+}
+.bottom > *:not(#timer) {
+ display: inline-block;
+ vertical-align: top;
+}
+.marquee {
+ padding: 0;
+ width: 100%;
+ mask-image: linear-gradient(0.25turn, transparent, black 5%, black 95%, transparent);
+ overflow: hidden;
+}
+.timer {
+ position: absolute;
+ left: 101vh;
+ padding: 0.5vh;
+ opacity: 0;
+ text-align: center;
+ border: 2px solid var(--dark);
+ border-radius: calc(1vh - 2px);
+ transition: opacity 1.5s;
+}
+.show {
+ opacity: 1;
+}
+.show.badgeContainer {
+ transform: translateX(0vh) scale(100%);
+}
+.show.banner {
+ width: 50vh;
+}
+@keyframes spinBox {
+ 0% {transform: translateY(100%);}
+ 50% {}
+ 100% {}
+
+}
+line, polyline, circle {
+ fill: none;
+ stroke: var(--feature-dark);
+ stroke-width: 3;
+}
+circle {
+ fill: #F2F2F2;
+}
+.sigilGrid {
+ stroke: var(--dark);
+ stroke-width: 1;
+}
+ </style>
+ <script>
+var topTextCounter = 0;
+var bottomTextCounter = 0;
+var marqueeOffset = 100.;
+var itemId = 0;
+var prefix = true;
+var round = true;
+var prefixString = "";
+var postfixString = "";
+var discount = 1;
+var newDiscount = 1;
+var priceChange = 0;
+const shuffle = str => [...str].sort(()=>Math.random()-.5).join('');
+function makePrice(price) {
+ if (round == "true") {price = Math.round(price * 100) / 100;}
+ if (prefix == "true") {
+ return `${prefixString}${price}`;
+ } else {
+ return `${price}${postfixString}`;
+ }
+}
+function update() {
+ fetch("./data.json", {cache: "no-store"})
+ .then(data => data.json())
+ .then(data => {
+ itemId = data.itemId;
+
+ var timerTime = Math.round(timerTime / 1000);
+ let currentTime = Math.round((Date.now() + data.timerOffset) / 1000);
+ var timerTime = data.timerEnd - currentTime;
+ if (Math.sign(timerTime) == -1) {timerTime = 0;}
+
+ var minutes = Math.floor(timerTime / 60);
+ var seconds = (timerTime - (minutes * 60));
+
+ var minutesString = minutes.toString();
+ var secondsString = seconds.toString();
+
+ minutesString = minutesString.padStart(2, "0");
+ secondsString = secondsString.padStart(2, "0");
+
+ const timer = document.getElementsByClassName("timer")[0];
+ const extra = document.getElementsByClassName("side")[0];
+ const banner = document.getElementsByClassName("banner")[0];
+ const badgeContainer = document.getElementsByClassName("badgeContainer")[0];
+
+ timer.innerHTML = `${minutesString}:${secondsString}`;
+
+ if (data.showingTimer == "true") {
+ timer.classList.add("show");
+ } else {
+ timer.classList.remove("show");
+ }
+ if (data.showingExtra == "true") {
+ extra.classList.add("showExtra");
+ } else {
+ extra.classList.remove("showExtra");
+ }
+ if (data.showingBanner == "true") {
+ if (!banner.classList.contains("show")) {
+ document.getElementById("bannerText").innerHTML = data.bannerText;
+ }
+ banner.classList.add("show");
+ } else {
+ banner.classList.remove("show");
+ }
+ if (discount <= 0.99) {
+ badgeContainer.classList.add("show");
+ } else {
+ badgeContainer.classList.remove("show");
+ }
+
+ const sigilNE = document.getElementById("sigilNE");
+ const sigilSE = document.getElementById("sigilSE");
+ const sigilSW = document.getElementById("sigilSW");
+ const sigilNW = document.getElementById("sigilNW");
+ if (data.showingSigil[0] == "true") {
+ sigilNE.classList.add("show");
+ } else {
+ sigilNE.classList.remove("show");
+ }
+ if (data.showingSigil[1] == "true") {
+ sigilSE.classList.add("show");
+ } else {
+ sigilSE.classList.remove("show");
+ }
+ if (data.showingSigil[2] == "true") {
+ sigilSW.classList.add("show");
+ } else {
+ sigilSW.classList.remove("show");
+ }
+ if (data.showingSigil[3] == "true") {
+ sigilNW.classList.add("show");
+ } else {
+ sigilNW.classList.remove("show");
+ }
+
+ prefix = data.prefix;
+ round = data.round;
+ prefixString = data.currency.prefix;
+ postfixString = data.currency.postfix;
+ priceChange = data.priceChange / 100;
+ newDiscount = data.discount / 100;
+ });
+
+ fetch("./items.json", {cache: "no-store"})
+ .then(data => data.json())
+ .then(data => {
+ document.getElementById("code").innerHTML = data[itemId].code;
+ document.getElementById("subtext").innerHTML = data[itemId].subtext;
+ document.getElementById("description").innerHTML = data[itemId].description;
+ let discountPricePlan = (data[itemId].origionalPrice * discount * 1.1) / 12
+ document.getElementById("currentPrice").innerHTML = `<em>Now only:</em> ${makePrice(data[itemId].origionalPrice * discount)}`;
+ document.getElementById("monthlyPrice").innerHTML = `12 monthly payments of <b>${makePrice(discountPricePlan)}</b>`;
+ document.getElementById("badgeText").innerHTML = `${Math.round((1 - discount) * 100)}% OFF`;
+ if (discount <= 0.99) {
+ document.getElementById("origionalPrice").innerHTML = `<s><em>WAS:</em> ${makePrice(data[itemId].origionalPrice)}</s>`;
+ } else {
+ document.getElementById("origionalPrice").innerHTML = `<em>NOW:</em> ${makePrice(data[itemId].origionalPrice)}`;
+ }
+ });
+}
+function frame() {
+
+ if (Math.abs(discount - newDiscount) <= priceChange / 200) {
+ discount = newDiscount;
+ } else if (discount > newDiscount) {
+ discount -= priceChange / 200;
+ } else {
+ discount += priceChange / 200;
+ }
+
+
+ const marqueeContainer = document.getElementsByClassName("marquee")[0];
+ const marqueeElement = document.getElementsByClassName("marqueeText")[0];
+ const topTextElement = document.getElementById("topText")
+ const bottomTextElement = document.getElementById("bottomText")
+
+ marqueeElement.style.transform = `translateX(${marqueeOffset}px)`;
+ marqueeOffset += 0.2;
+
+ if (marqueeOffset >= marqueeContainer.offsetWidth || (topTextElement.innerHTML == "" && bottomTextElement.innerHTML == "")) {
+ fetch("./data.json", {cache: "no-store"})
+ .then(data => data.json())
+ .then(data => {
+ topTextElement.innerHTML = data.topText[topTextCounter];
+ bottomTextElement.innerHTML = data.bottomText[bottomTextCounter];
+ topTextCounter += 1;
+ if (topTextCounter >= data.topText.length) {topTextCounter = 0;}
+ bottomTextCounter += 1;
+ if (bottomTextCounter >= data.bottomText.length) {bottomTextCounter = 0;}
+ });
+
+ const canvas = document.getElementById("canvas");
+ const ctx = canvas.getContext("2d");
+
+ var style = window.getComputedStyle(marqueeElement, null).getPropertyValue("font-size");
+ var fontSize = parseFloat(style);
+
+ ctx.font = `bold ${fontSize}px sans-serif`;
+ let text = ctx.measureText(marqueeElement.innerHTML);
+
+ marqueeOffset = -1 * text.width;
+ }
+}
+function draw() {
+ fetch("./sigil.json", {cache: "no-store"})
+ .then(data => data.json())
+ .then(data => {
+
+ for (let sigilIndex = 0; sigilIndex < document.getElementsByClassName("sigil").length; sigilIndex ++) {
+ const sigilCap = document.getElementsByClassName("sigilCap")[sigilIndex];
+ const sigilLine = document.getElementsByClassName("sigilLine")[sigilIndex];
+ const sigilEnd = document.getElementsByClassName("sigilEnd")[sigilIndex];
+
+ let phrase = data.phrases[Math.floor(Math.random()*data.phrases.length)];
+ let pointString = "";
+
+ for (let i = 0; i < phrase.length; i++) {
+ let point = phrase.charCodeAt(i) - 97;
+ if (i == 0) {
+ var startPoint = data.square[point];
+ }
+ else if (i == phrase.length - 1) {
+ var endPoint = data.square[point];
+ }
+ pointString += `${data.square[point]} `;
+ }
+
+ startPoint = startPoint.split(",");
+ endPoint = endPoint.split(",");
+
+ sigilCap.setAttribute("x1", Number(startPoint[0]) - 5)
+ sigilCap.setAttribute("y1", startPoint[1])
+ sigilCap.setAttribute("x2", Number(startPoint[0]) + 5)
+ sigilCap.setAttribute("y2", startPoint[1])
+ sigilLine.setAttribute("points", pointString);
+ sigilEnd.setAttribute("cx", endPoint[0]);
+ sigilEnd.setAttribute("cy", endPoint[1]);
+ }
+ })
+}
+setInterval(frame, 5);
+setInterval(update, 200);
+setInterval(draw, 1000)
+ </script>
+ </head>
+ <body onload="frame();update();">
+ <canvas id="canvas" style="display: none;"></canvas>
+ <div class="container side">
+ <div class="box main">
+ <h1 id="code"></h1>
+ <h2 class="feature" id="subtext"></h2>
+ <h3 id="description"></h3>
+ <hr>
+ <h4 id="origionalPrice"></h4>
+ <div class="badgeContainer">
+ <img class="badge" src="./star.svg"></img>
+ <h2 class="badge" id="badgeText">5000000000% OFF</h2>
+ </div>
+ <h3 id="discount"></h3>
+
+ </div>
+ <div class="box extra">
+ <h2 style="margin-top: 1vh;"id="currentPrice"></h4>
+ <p id="monthlyPrice"></p>
+
+ </div>
+ </div>
+ <div class="container box bottom">
+ <h3 class="feature timer box"></h3>
+ <h2 id="topText"></h2>
+ <div class="marquee">
+ <h1 class="marqueeText" id="bottomText"></h1>
+ </div>
+ </div>
+ <div class="container box banner">
+ <h1 id="bannerText"></h1>
+ </div>
+ <div class="container box sigilBox show" id="sigilNE">
+ <svg class="sigil" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+<line class="sigilGrid" x1="30" y1="10" x2="30" y2="110"/>
+<line class="sigilGrid" x1="50" y1="10" x2="50" y2="110"/>
+<line class="sigilGrid" x1="70" y1="10" x2="70" y2="110"/>
+<line class="sigilGrid" x1="10" y1="10" x2="10" y2="110"/>
+<line class="sigilGrid" x1="90" y1="10" x2="90" y2="110"/>
+<line class="sigilGrid" x1="110" y1="10" x2="110" y2="110"/>
+<line class="sigilGrid" x1="10" y1="10" x2="110" y2="10"/>
+<line class="sigilGrid" x1="10" y1="30" x2="110" y2="30"/>
+<line class="sigilGrid" x1="10" y1="50" x2="110" y2="50"/>
+<line class="sigilGrid" x1="10" y1="70" x2="110" y2="70"/>
+<line class="sigilGrid" x1="10" y1="90" x2="110" y2="90"/>
+<line class="sigilGrid" x1="10" y1="110" x2="110" y2="110"/>
+ <line class="sigilCap"/>
+ <polyline class="sigilLine"/>
+ <circle class="sigilEnd" r="3">
+ </svg>
+ </div>
+ <div class="container box sigilBox show" id="sigilSE">
+ <svg class="sigil" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+<line class="sigilGrid" x1="30" y1="10" x2="30" y2="110"/>
+<line class="sigilGrid" x1="50" y1="10" x2="50" y2="110"/>
+<line class="sigilGrid" x1="70" y1="10" x2="70" y2="110"/>
+<line class="sigilGrid" x1="10" y1="10" x2="10" y2="110"/>
+<line class="sigilGrid" x1="90" y1="10" x2="90" y2="110"/>
+<line class="sigilGrid" x1="110" y1="10" x2="110" y2="110"/>
+<line class="sigilGrid" x1="10" y1="10" x2="110" y2="10"/>
+<line class="sigilGrid" x1="10" y1="30" x2="110" y2="30"/>
+<line class="sigilGrid" x1="10" y1="50" x2="110" y2="50"/>
+<line class="sigilGrid" x1="10" y1="70" x2="110" y2="70"/>
+<line class="sigilGrid" x1="10" y1="90" x2="110" y2="90"/>
+<line class="sigilGrid" x1="10" y1="110" x2="110" y2="110"/>
+ <line class="sigilCap"/>
+ <polyline class="sigilLine"/>
+ <circle class="sigilEnd" r="3">
+ </svg>
+ </div>
+ <div class="container box sigilBox show" id="sigilSW">
+ <svg class="sigil" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+<line class="sigilGrid" x1="30" y1="10" x2="30" y2="110"/>
+<line class="sigilGrid" x1="50" y1="10" x2="50" y2="110"/>
+<line class="sigilGrid" x1="70" y1="10" x2="70" y2="110"/>
+<line class="sigilGrid" x1="10" y1="10" x2="10" y2="110"/>
+<line class="sigilGrid" x1="90" y1="10" x2="90" y2="110"/>
+<line class="sigilGrid" x1="110" y1="10" x2="110" y2="110"/>
+<line class="sigilGrid" x1="10" y1="10" x2="110" y2="10"/>
+<line class="sigilGrid" x1="10" y1="30" x2="110" y2="30"/>
+<line class="sigilGrid" x1="10" y1="50" x2="110" y2="50"/>
+<line class="sigilGrid" x1="10" y1="70" x2="110" y2="70"/>
+<line class="sigilGrid" x1="10" y1="90" x2="110" y2="90"/>
+<line class="sigilGrid" x1="10" y1="110" x2="110" y2="110"/>
+ <line class="sigilCap"/>
+ <polyline class="sigilLine"/>
+ <circle class="sigilEnd" r="3">
+ </svg>
+ </div>
+ <div class="container box sigilBox show" id="sigilNW">
+ <svg class="sigil" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+<line class="sigilGrid" x1="30" y1="10" x2="30" y2="110"/>
+<line class="sigilGrid" x1="50" y1="10" x2="50" y2="110"/>
+<line class="sigilGrid" x1="70" y1="10" x2="70" y2="110"/>
+<line class="sigilGrid" x1="10" y1="10" x2="10" y2="110"/>
+<line class="sigilGrid" x1="90" y1="10" x2="90" y2="110"/>
+<line class="sigilGrid" x1="110" y1="10" x2="110" y2="110"/>
+<line class="sigilGrid" x1="10" y1="10" x2="110" y2="10"/>
+<line class="sigilGrid" x1="10" y1="30" x2="110" y2="30"/>
+<line class="sigilGrid" x1="10" y1="50" x2="110" y2="50"/>
+<line class="sigilGrid" x1="10" y1="70" x2="110" y2="70"/>
+<line class="sigilGrid" x1="10" y1="90" x2="110" y2="90"/>
+<line class="sigilGrid" x1="10" y1="110" x2="110" y2="110"/>
+ <line class="sigilCap"/>
+ <polyline class="sigilLine"/>
+ <circle class="sigilEnd" r="3">
+ </svg>
+ </div>
+ </body>
+</html>