]> OzVa Git service - shopping-channel/commitdiff
initial
authorOzVa Server <greenwoodw50@gmail.com>
Tue, 6 Aug 2024 12:54:32 +0000 (13:54 +0100)
committerOzVa Server <greenwoodw50@gmail.com>
Tue, 6 Aug 2024 12:54:32 +0000 (13:54 +0100)
auth/index.php [new file with mode: 0644]
autocue/index.html [new file with mode: 0644]
data.json [new file with mode: 0644]
index.html [new file with mode: 0644]
items.json [new file with mode: 0644]
sigil.json [new file with mode: 0644]
star.svg [new file with mode: 0644]
text.json [new file with mode: 0644]

diff --git a/auth/index.php b/auth/index.php
new file mode 100644 (file)
index 0000000..bb2091c
--- /dev/null
@@ -0,0 +1,261 @@
+<?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>
diff --git a/autocue/index.html b/autocue/index.html
new file mode 100644 (file)
index 0000000..f7a2e6e
--- /dev/null
@@ -0,0 +1,50 @@
+<hmtl>
+       <head>
+               <style>
+body {
+       font-family: sans-serif;
+       color: white;
+       background-color: black;
+}
+#slider {
+       position: fixed;
+       top: 10px;
+       left: 10px;
+}
+#notes {
+       margin: 40px;
+}
+               </style>
+               <script>
+var itemId = 0;
+
+function frame() {
+       var slider = document.getElementById("slider");
+       var notes = document.getElementById("notes");
+
+       notes.style.fontSize = `${slider.value}px`
+}
+
+function update() {
+        fetch("../data.json", {cache: "no-store"})
+                .then(data => data.json())
+                .then(data => {
+                       itemId = data.itemId;
+               })
+       fetch("../items.json", {cache: "no-store"})
+                .then(data => data.json())
+                .then(data => {
+                        const noteContainer = document.getElementById("notes");
+                       noteContainer.innerHTML = data[itemId].notes;
+                })
+}
+
+setInterval(frame, 50);
+setInterval(update, 1000);
+               </script>
+       </head>
+       <body>
+               <input type="range" min="30" max="100" value="45" id="slider">
+               <div style="font-size: 50px;" id="notes">some test text!</div>
+       </body>
+</html>
diff --git a/data.json b/data.json
new file mode 100644 (file)
index 0000000..31af23d
--- /dev/null
+++ b/data.json
@@ -0,0 +1 @@
+{"topText":["It's here!"],"bottomText":["It's here!"],"bannerText":"Buy XMDV!","itemId":0,"currency":{"prefix":"\u00a3","postfix":" hairs"},"discount":0,"prefix":"true","round":"true","priceChange":50,"showingExtra":"true","showingTimer":"true","showingBanner":"true","showingSigil":["true","true","false","false"],"timerEnd":1722808645,"timerOffset":-500}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644 (file)
index 0000000..7de0b10
--- /dev/null
@@ -0,0 +1,509 @@
+<!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>
diff --git a/items.json b/items.json
new file mode 100644 (file)
index 0000000..9553927
--- /dev/null
@@ -0,0 +1,35 @@
+[
+       {
+               "code":"Placeholder item code",
+               "subtext":"Test item name",
+               "description":"Test item description",
+               "origionalPrice":0,
+               "extraInfo":{
+                       "stockCount":0,
+                       "soldCount":0
+               },
+               "notes":"<p>[autocue] Showing: test product.<br>Commencing shortly.</p>"
+       },
+       {
+               "code":"Item 1",
+               "subtext":"Gold <em>Stick-Strip</em>&#8482",
+               "description":"50m shiny gold <em>Stick-Strip</em>&#8482! Origional beautiful formula! Cannot be broken! Too beautiful! Stuck!",
+               "origionalPrice":500,
+               "extraInfo":{
+                       "stockCount":100,
+                       "soldCount":20
+               },
+               "notes":"<p>ITEM IS A REEL OF GOLDEN TAPE THAT CANNOT BE TORN</p><ul><li>EMPASIZE AS MUCH AS POSSIBLE HOW BEAUTIFUL IT IS</li></ul>"
+       },
+       {
+               "code":"Item 2",
+               "subtext":"Item subtext",
+               "description":"Product 2 description. It's really long to see if the badge element moves down the page at all. I f**king hate CSS positioning. Oops family show.",
+               "origionalPrice":170,
+               "extraInfo":{
+                       "stockCount":200,
+                       "soldCount":40
+               },
+               "notes":"Some more notes..."
+       }
+]
diff --git a/sigil.json b/sigil.json
new file mode 100644 (file)
index 0000000..d9a05af
--- /dev/null
@@ -0,0 +1,56 @@
+{
+       "square":[
+               "110,10",
+               "90,110",
+                "50,10",
+                "70,110",
+                "30,110",
+                "10,10",
+                "10,30",
+                "90,30",
+                "70,90",
+                "50,90",
+                "30,30",
+                "110,90",
+                "110,70",
+                "30,50",
+                "70,50",
+                "50,50",
+                "90,70",
+                "10,70",
+                "10,50",
+                "30,70",
+                "70,70",
+                "50,70",
+                "90,50",
+                "110,50",
+                "10,90",
+                "90,90",
+                "50,30",
+                "70,30",
+                "30,90",
+                "110,30",
+                "110,110",
+                "30,10",
+                "50,110",
+                "70,10",
+                "90,10",
+                "10,110"
+       ],
+       "phrases":[
+               "anchor",
+               "thebeast",
+               "buyitall",
+               "consumer",
+               "runners",
+               "xmdv",
+               "broadcast",
+               "bleedout",
+               "quant",
+               "bullion",
+               "adarksun",
+               "dollar",
+               "beast"
+       ]
+
+}
diff --git a/star.svg b/star.svg
new file mode 100644 (file)
index 0000000..dab960a
--- /dev/null
+++ b/star.svg
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="400"
+   height="400"
+   viewBox="0 0 105.83333 105.83333"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs1" />
+  <metadata
+     id="metadata1">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <path
+     style="fill:#bd0000;fill-opacity:1;stroke-width:0.264798;stroke-dasharray:none"
+     id="path1"
+     d="M 71.019533,63.52164 69.13196,77.122826 56.678371,71.338072 48.243092,82.173258 40.350345,70.93672 27.627586,76.102627 26.410535,62.425126 12.809349,60.537554 18.594102,48.083965 7.7589164,39.648686 18.995454,31.755938 13.829547,19.03318 27.507048,17.816129 29.394621,4.214943 41.84821,9.9996963 50.283489,-0.83548968 58.176236,10.401048 70.898995,5.2351411 l 1.217051,13.6775009 13.601186,1.887573 -5.784754,12.453589 10.835186,8.435278 -11.236537,7.892748 5.165907,12.722759 z"
+     transform="matrix(1.274966,0,0,1.274966,-9.8923536,1.065222)" />
+</svg>
diff --git a/text.json b/text.json
new file mode 100644 (file)
index 0000000..eeadc99
--- /dev/null
+++ b/text.json
@@ -0,0 +1,28 @@
+{
+       "topText":[
+               "Test top text 1",
+               "Test top text 2",
+               "It's here!"
+       ],
+       "bottomText":[
+               "Something bright and radiant for all of you at home!",
+               "I take your life and raise you 10 over the hour!",
+               "We grab the bullion counterweight and throw ourselves down!",
+               "We have been falling for a looong time people!",
+               "Let me slip into something less spacious!",
+               "Down the side of a large golden pyramid!",
+               "So we dress ourselves in your Ballast!",
+               "I used to be so unimaginably tall!",
+               "It's here!"
+       ],
+       "bannerText":[
+               "Buy XMDV!",
+               "Discounts on XMDV!",
+               "Imagine thinking on a piece of paper!",
+               "Imagine thinking on a dime!",
+               "Imagine thinking on a dollar!",
+               "The quant we created!",
+               "The quant we fear!",
+               "It's here!"
+       ]
+}