fclose($file);
$text = json_decode($text, true);
+$file = fopen("../clock.json", "r") or die("unable to open file!");
+$data = fread($file, filesize("../clock.json"));
+fclose($file);
+$clock = json_decode($data, true);
+
$file = fopen("../data.json", "r") or die("unable to open file!");
$data = fread($file, filesize("../data.json"));
fclose($file);
$file = fopen("../data.json", "w");
fwrite($file, $json);
fclose($file);
+
+ $clock['currentPosition'] = (int)$_POST["doomsday"];
+
+ $json = json_encode($clock);
+ $file = fopen("../clock.json", "w");
+ fwrite($file, $json);
+ fclose($file);
}
?>
<html>
margin: 10px;
vertical-align: top;
}
+.entry {
+ width: 50%;
+ margin: 0;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
fieldtext > .split {
width: 50%;
margin: 0;
}
-@media screen and (max-width: 800px) {
+.clock {
+ position: relative;
+ width: 100%;
+ aspect-ratio: 1;
+}
+.clock > div {
+ position: absolute;
+ top: 25%;
+ left: 25%;
+ width: 50%;
+ height: 50%;
+ overflow: scroll;
+}
+.clockButton {
+ position: absolute;
+ margin: 0;
+}
+<?php
+for ($i = 0; $i < 360; $i += 10) {
+ $radius = 45;
+ $x = $radius * cos(deg2rad($i)) + 50;
+ $y = $radius * sin(deg2rad($i)) + 50;
+ echo ".angle$i {top: calc($y% - 7px); left: calc($x% - 7px);}";
+}
+?>
+@media screen and (max-width: 1130px) {
.split {
width: calc(100% - 20px);
}
</style>
</head>
<body>
-
+ <form action="./index.php" method="POST">
<div class="split">
- <h1>Interface</h1>
- <form action="./index.php" method="POST">
+ <div class="split entry">
+ <h1>XMDV Interface</h1>
+ </div><div class="split entry">
+ <p style="margin: 0; text-align: right;">
+ XMDV Shopping is created by William Greenwood<br>
+ <a href="../">GFX Overlay</a> - <a href="../autocue/">Autocue</a> - <a href="https://git.ozva.co.uk/?p=shopping-channel">Source repository</a>
+ </p>
+ </div>
+ <fieldset>
+ <legend>Products</legend>
+ <div class='split'>
<?php
-echo "<fieldset><legend>Products</legend>";
for ($i = 0; $i < count($items); $i++) {
- $description = $items[$i]["description"];
+ $subtext = $items[$i]["subtext"];
$checked = "";
if ($data['itemId'] == $i) {
}
echo "<input type='radio' id='$i' value='$i' name='item'$checked>";
- echo "<label for='$i'> $description</label><br>";
+ echo "<label for='$i'> $subtext</label><br>";
}
-
$checked = "";
if ($data['showingExtra'] == "true") {
- $checked = " checked='checked' ";
+ $checked = " checked='checked' ";
}
-echo "<input type='checkbox' id='extra' name='extra' value='true'$checked>";
-echo "<label for='extra'> Showing extra information</label>";
-echo "</fieldset>";
+?>
+ </div><div class='split'>
+ <input type='checkbox' id='extra' name='extra' value='true'<?php echo $checked; ?>>
+ <label for='extra'> Showing extra information</label>
+ </div>
+ </fieldset>
-echo "<fieldset><legend>Pricing</legend>";
+ <fieldset>
+ <legend>Pricing</legend>
+ <div class='split'>
+<?php
$preChecked = "";
$postChecked = "";
if ($data['prefix'] == "true") {
}
$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' ";
+ $checked = " checked='checked' ";
}
-echo "<input type='checkbox' id='round' name='round' value='true'$checked>";
-echo "<label for='round'> Round prices</label>";
+?>
-echo "</fieldset>";
+ <input type='radio' id='prefix' name='prefix' value='true'<?php echo $preChecked; ?>>
+ <input type='text' id='prefix' name='prefixString' value='<?php echo $prefix; ?>'>
+ <label for='prefix'> Prefix</label><br>
+
+ <input type='radio' id='postfix' name='prefix' value='false'<?php echo $postChecked; ?>>
+ <input type='text' id='postfix' name='postfixString' value='<?php echo $postfix; ?>'>
+ <label for='postfix'> Postfix</label><br>
+
+ </div><div class='split'>
+
+ <input type='number' name='discount' id='discount' value='<?php echo $data['discount']; ?>'>
+ <label for='discount'> Discount (%)</label><br>
-echo "<fieldset><legend>Info text</legend>";
-echo "<div class='split'>";
+ <input type='number' name='priceChange' id='priceChange' value='<?php echo $data['priceChange']; ?>'>
+ <label for='priceChange'> Discount change (%/s)</label><br>
+
+ <input type='checkbox' id='round' name='round' value='true'<?php echo $checked; ?>>
+ <label for='round'> Round prices</label>
+ </div>
+ </fieldset>
+
+ <fieldset>
+ <legend>Top text</legend>
+<?php
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 class='split entry' style='margin: 0;'><input type='checkbox' id='topText' value='$i' name='topText[]'$checked>";
+ echo "<label for='topText'> $line</label></div>";
}
-echo "</div>";
-echo "<div class='split'>";
+echo "</fieldset>";
+echo "<fieldset><legend>Bottom text</legend>";
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 class='split entry'><input type='checkbox' id='bottomText' value='$i' name='bottomText[]'$checked>";
+ echo "<label for='bottomText'> $line</label></div>";
}
-
-echo "</div>";
+echo "</fieldset>";
+echo "<fieldset><legend>Banner text</legend>";
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>";
+ echo "<div class='split entry' style='margin: 0;'><input type='radio' id='$i' value='$i' name='bannerText'$checked>";
+ echo "<label for='$i'> $line</label></div>";
}
$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>";
+?>
+ <input type='checkbox' id='banner' name='banner' value='true'<?php echo $checked; ?>>
+ <label for='banner'>Show banner</label>
+ </fieldset>
-echo "<fieldset><legend>Sigil display</legend>";
-echo "<div class='split'>";
+ <fieldset>
+ <legend>Sigil display</legend>
+ <div class='split'>
+<?php
$checked = "";
if ($data['showingSigil'][3] == "true") {
$checked = " checked='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>";
+?>
+ <input type='checkbox' id='sigilSE' name='sigilSE' value='true'<?php echo $checked; ?>>
+ <label for='sigilSW'>Bottom right (SE)</label><br>
+ </div>
+ </fieldset>
+ <fieldset>
+ <legend>Timer</legend>
+ <div class="split entry"><input type='radio' id='0000' value='0000' name='addTime'>
+ <label for='0000'> Reset</label></div>
+ <div class="split entry"><input type='radio' id='0030' value='0030' name='addTime'>
+ <label for='0030'> +00:30</label></div>
+ <div class="split entry"><input type='radio' id='0100' value='0100' name='addTime'>
+ <label for='0100'> +01:00</label></div>
+ <div class="split entry"><input type='radio' id='0200' value='0200' name='addTime'>
+ <label for='0200'> +02:00</label></div>
+ <div class="split entry"><input type='radio' id='0500' value='0500' name='addTime'>
+ <label for='0500'> +05:00</label></div>
+ <div class="split entry"><input type='radio' id='1000' value='1000' name='addTime'>
+ <label for='1000'> +10:00</label></div>
+<?php
$checked = "";
if ($data['showingTimer'] == "true") {
$checked = " checked='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 "<fieldset><legend>Doomsday clock</legend>";
+echo "<div class=clock>";
+echo "<svg class='clockFace' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><circle r='45' cx='50' cy='50' fill='none' stroke='#a0a0a0' stroke-width='0.2px'/></svg>";
+for ($i = 0; $i < 360; $i += 10) {
+ $checked = "";
+ if ($clock['currentPosition'] == $i) {
+ $checked = " checked='checked' ";
+ }
+ echo "<input type='radio' class='clockButton angle$i' value='$i' name='doomsday'$checked>";
+}
+?>
+ <div>
+ <fieldset>
+ <legend>Movement</legend>
+ <input type="checkbox">
+ <label>Movement setting here!</label><br>
+ <input type="checkbox">
+ <label>Movement setting here!</label><br>
+ <input type="checkbox">
+ <label>Movement setting here!</label><br>
+ <input type="checkbox">
+ <label>Movement setting here!</label>
+ </fieldset>
+ <fieldset>
+ <legend>Lighting</legend>
+ <input type="checkbox">
+ <label>Lighting setting here!</label><br>
+ <input type="checkbox">
+ <label>Lighting setting here!</label><br>
+ <input type="checkbox">
+ <label>Lighting setting here!</label>
+ </fieldset>
+ </div>
+ </div>
+ </fieldset>
+ <br>
+ <input style="vertical-align: top;" type="submit" name="update" value="Update">
+ <details style="display: inline-block;">
+ <summary>Current data</summary>
<?php echo "<pre>" . var_export($data, true) . "</pre>" ?>
- </p>
+<?php echo "<pre>" . var_export($clock, true) . "</pre>" ?>
+ </details>
</div>
+ </form>
</body>
</html>
}
</style>
<script>
+// independantly itterated counters for the bottom (marquee) text and the text displayed above it
+// this changes at the end of each marquee cycle
var topTextCounter = 0;
var bottomTextCounter = 0;
+
var marqueeOffset = 100.;
+
+// current item number. used to work out which item from the static item file to pick
var itemId = 0;
-var prefix = true;
+
+// bool for whether the price is rounded to the nearest 100th
var round = true;
+
+// whether to display the price with a pre or postfix and what each fix string is
+var prefix = true;
var prefixString = "";
var postfixString = "";
+
+// 2 discount variables are tracked for smooth transitions between them
+// "newDiscount" is the requested discount from the server. "discount" is the current client discount
+// "priceCange" is the current requested discount change measured in %/s at which the "discount" is animated
var discount = 1;
var newDiscount = 1;
var priceChange = 0;
-const shuffle = str => [...str].sort(()=>Math.random()-.5).join('');
+
+// helper function for creating price strings
function makePrice(price) {
if (round == "true") {price = Math.round(price * 100) / 100;}
if (prefix == "true") {
return `${price}${postfixString}`;
}
}
+// handles all updates from the server data that are not required to be instantanious (2 times per second)
function update() {
fetch("./data.json", {cache: "no-store"})
.then(data => data.json())
.then(data => {
itemId = data.itemId;
+ // calculate the current time string from the difference between current and provided unix timestamp
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");
+ //handle all optional elements showing/hiding
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");
}
+
+ const extra = document.getElementsByClassName("side")[0];
if (data.showingExtra == "true") {
extra.classList.add("showExtra");
} else {
extra.classList.remove("showExtra");
}
+
+ const banner = document.getElementsByClassName("banner")[0];
if (data.showingBanner == "true") {
if (!banner.classList.contains("show")) {
document.getElementById("bannerText").innerHTML = data.bannerText;
} else {
banner.classList.remove("show");
}
+
+ const badgeContainer = document.getElementsByClassName("badgeContainer")[0];
if (discount <= 0.99) {
badgeContainer.classList.add("show");
} else {
}
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");
}
+ const sigilSE = document.getElementById("sigilSE");
if (data.showingSigil[1] == "true") {
sigilSE.classList.add("show");
} else {
sigilSE.classList.remove("show");
}
+ const sigilSW = document.getElementById("sigilSW");
if (data.showingSigil[2] == "true") {
sigilSW.classList.add("show");
} else {
sigilSW.classList.remove("show");
}
+ const sigilNW = document.getElementById("sigilNW");
if (data.showingSigil[3] == "true") {
sigilNW.classList.add("show");
} else {
sigilNW.classList.remove("show");
}
- prefix = data.prefix;
+ // set variables for the frame process to allow it to function without requesting data 200x per second
round = data.round;
+
+ prefix = data.prefix;
prefixString = data.currency.prefix;
postfixString = data.currency.postfix;
+
priceChange = data.priceChange / 100;
newDiscount = data.discount / 100;
});
+ // get the requested item data
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 {
}
});
}
+// function handles all animated events that are required to look smooth (marquee movement / price changes) (200 times per second)
function frame() {
+ // move the current discount towards the target distance at the supplied rate
if (Math.abs(discount - newDiscount) <= priceChange / 200) {
discount = newDiscount;
} else if (discount > newDiscount) {
discount += priceChange / 200;
}
+ const topTextElement = document.getElementById("topText")
+ const bottomTextElement = document.getElementById("bottomText")
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;
+ // only fetch data where neccicary or where the page has just loaded
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;}
+ if (topTextCounter >= data.topText.length) {
+ topTextCounter = 0;
+ }
+
+ bottomTextElement.innerHTML = data.bottomText[bottomTextCounter];
bottomTextCounter += 1;
- if (bottomTextCounter >= data.bottomText.length) {bottomTextCounter = 0;}
+ if (bottomTextCounter >= data.bottomText.length) {
+ bottomTextCounter = 0;
+ }
});
+ // create a canvas element to measure the size of text precicely
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
-
+
var style = window.getComputedStyle(marqueeElement, null).getPropertyValue("font-size");
var fontSize = parseFloat(style);
marqueeOffset = -1 * text.width;
}
}
+// function handles the periodic drawing of the sigils (2 per second)
function draw() {
fetch("./sigil.json", {cache: "no-store"})
.then(data => data.json())
.then(data => {
+ // itterate through each of the sigils
for (let sigilIndex = 0; sigilIndex < document.getElementsByClassName("sigil").length; sigilIndex ++) {
const sigilCap = document.getElementsByClassName("sigilCap")[sigilIndex];
const sigilLine = document.getElementsByClassName("sigilLine")[sigilIndex];
})
}
setInterval(frame, 5);
-setInterval(update, 200);
-setInterval(draw, 1000)
+setInterval(update, 500);
+setInterval(draw, 500)
</script>
</head>
- <body onload="frame();update();">
+ <body onload="frame();update();draw();">
+
<canvas id="canvas" style="display: none;"></canvas>
+
<div class="container side">
<div class="box main">
<h1 id="code"></h1>
<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>
<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"/>
+ <path class="sigilGrid" d="
+ M 10,10 v 100 m 20,-100 v 100 m 20,-100 v 100 m 20,-100 v 100 m 20,-100 v 100 m 20,-100 v 100 m 20,-100
+ M 10,10 h 100 m -100,20 h 100 m -100,20 h 100 m -100,20 h 100 m -100,20 h 100 m -100,20 h 100 m -100,20
+ " />
+
<line class="sigilCap"/>
<polyline class="sigilLine"/>
<circle class="sigilEnd" r="3">
</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">
+ <path class="sigilGrid" d="
+ M 10,10 v 100 m 20,-100 v 100 m 20,-100 v 100 m 20,-100 v 100 m 20,-100 v 100 m 20,-100 v 100 m 20,-100
+ M 10,10 h 100 m -100,20 h 100 m -100,20 h 100 m -100,20 h 100 m -100,20 h 100 m -100,20 h 100 m -100,20
+ " />
+ <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">
+ <path class="sigilGrid" d="
+ M 10,10 v 100 m 20,-100 v 100 m 20,-100 v 100 m 20,-100 v 100 m 20,-100 v 100 m 20,-100 v 100 m 20,-100
+ M 10,10 h 100 m -100,20 h 100 m -100,20 h 100 m -100,20 h 100 m -100,20 h 100 m -100,20 h 100 m -100,20
+ " />
+ <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">
+ <path class="sigilGrid" d="
+ M 10,10 v 100 m 20,-100 v 100 m 20,-100 v 100 m 20,-100 v 100 m 20,-100 v 100 m 20,-100 v 100 m 20,-100
+ M 10,10 h 100 m -100,20 h 100 m -100,20 h 100 m -100,20 h 100 m -100,20 h 100 m -100,20 h 100 m -100,20
+ " />
+ <line class="sigilCap"/>
+ <polyline class="sigilLine"/>
+ <circle class="sigilEnd" r="3">
</svg>
</div>
</body>
projects / shopping-channel / commitdiff