$data['showingTimer1'] = var_export(!empty($_POST['timer1']), true);
$data['showingTimer2'] = var_export(!empty($_POST['timer2']), true);
$data['showingTimer3'] = var_export(!empty($_POST['timer3']), true);
+ $data['timer3Main'] = var_export(!empty($_POST['timer3Main']), true);
$data['showingBanner'] = var_export(!empty($_POST['banner']), true);
$data['showingSigil'] = [
var_export(!empty($_POST['sigilNE']), true),
</head>
<body>
<form action="./index.php" method="POST">
- <div class="split">
+ <div class="third">
<div class="split entry">
<h1>XMDV Interface</h1>
</div><div class="split entry">
echo "<label for='bottomText'> $line</label></div>";
}
echo "</fieldset>";
+echo "</div><div class='third'>";
echo "<fieldset><legend>Banner text</legend>";
for ($i = 0; $i < count($text['bannerText']); $i++) {
$line = $text['bannerText'][$i];
if ($data['showingTimer3'] == "true") {
$timer3Checked = " checked='checked' ";
}
+$timer3MainChecked = "";
+if ($data['timer3Main'] == "true") {
+ $timer3MainChecked = " checked='checked' ";
+}
$timerOffset = $data["timerOffset"];
?>
<div class="third">
<input type='radio' id='1000' value='1000' name='addTime3'>
<label for='1000'> +10:00</label><br>
<input type='checkbox' id='timer3' name='timer3' value='true'<?php echo $timer3Checked; ?>>
- <label for='timer3'> Showing timer</label>
+ <label for='timer3'> Showing timer</label><br>
+ <input type='checkbox' id='timer3Main' name='timer3Main' value='true'<?php echo $timer3MainChecked; ?>>
+ <label for='timer3Main'> Timer focus</label>
</div>
<input type='number' id='timerOffset' name='timerOffset' min='-5000' max='5000' step='1' value='<?php echo $timerOffset; ?>'>
<label for='timerOffset'> Timer offset (ms)</label>
</fieldset>
- </div><div class="split">
-<?php
-echo "<fieldset><legend>Doomsday clock <em>(Incr. $clockIncrement deg)</em></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.15px'/></svg>";
-for ($i = 0; $i < 360; $i += $clockIncrement) {
- $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='number' name='movementSpeed' id='movementSpeed' value='<?php echo $clock['movementSpeed']; ?>'>
- <label for='movementSpeed'> Movement speed (ms/tick)</label><br>
- <div class="split">
- <input type='radio' value='ease' name='function'>
- <label>Ease function</label>
- </div><div class="split">
- <input type='radio' value='linear' name='function' checked='checked'>
- <label>Linear function</label>
- </div>
- </fieldset>
- <fieldset>
+ <fieldset>
<legend>Lighting</legend>
<div class="split">
<?php
}
?>
</div>
+ </fieldset>
+ </div><div class="third">
+<?php
+echo "<fieldset><legend>Doomsday clock <em>(Incr. $clockIncrement deg)</em></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.15px'/></svg>";
+for ($i = 0; $i < 360; $i += $clockIncrement) {
+ $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='number' name='movementSpeed' id='movementSpeed' value='<?php echo $clock['movementSpeed']; ?>'>
+ <label for='movementSpeed'> Movement speed (ms/tick)</label><br>
+ <div class="split">
+ <input type='radio' value='ease' name='function'>
+ <label>Ease function</label>
+ </div><div class="split">
+ <input type='radio' value='linear' name='function' checked='checked'>
+ <label>Linear function</label>
+ </div>
</fieldset>
</div>
</div>
<li>Make the top banner look better</li>
<li>Add some kind of rating into the item file and make it display</li>
<li>add marquee of the current buyers of the product and figure out how to do this (potentially hard?)</li>
- <li></li>
</ul>
<p>
and then still to do in the admin department: Talk to Joe about the GFX system, ask Ash about the lighting desk sAcn input and to setup things, makerspace the clock, text people about things, arrange screentest with Jack.
<meta http-equiv="refres" content="5">
<style>
body {
- --background: linear-gradient(#FFFFFF, #EEEEEE);
+ --star-light: #FFE0B3;
+ --star-dark: #FFC266;
--dark: #DEDEDE;
--feature-dark: #AAAAEE;
--feature-light: #BBBBEE;
+ --feature-white: #EAEAFA;
+ --background-light: #FFFFFF;
+ --background-dark: #EEEEEE;
--feature-gradient: linear-gradient(var(--feature-dark), var(--feature-light));
+ --background: linear-gradient(var(--background-light), var(--background-dark));
+ --clock: conic-gradient(var(--background-light) 0deg, var(--background-light) 0deg, rgb(0,0,0,0) 0.1deg), rgb(0,0,0,0) 360deg);
font-family: sans-serif;
font-size: 1.6vh;
opacity: 0;
transition: opacity 1.5s;
}
+#raiting {
+ margin: 5px;
+ margin-top: 0;
+ border-radius: 5px;
+ font-size: 2em;
+ line-height: 1em;
+ color: var(--star-dark);
+ text-shadow: -1px -1px 0 var(--star-light), 1px -1px 0 var(--star-light), -1px 1px 0 var(--star-light), 1px 1px 0 var(--star-light), 2px 2px 0 var(--dark);
+ background-image: linear-gradient(var(--background-dark), var(--dark));
+ box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.19) 0px 1px 2px;
+}
.main {
z-index: 0;
}
overflow: hidden;
opacity: 0;
transition: opacity 1.5s, width 1.5s, left 1.5s;
+ background: linear-gradient(var(--feature-white), rgb(0,0,0,0), var(--feature-white)), var(--background);
+ border: 1px solid var(--feature-dark);
}
-.banner.moved {
+.banner.moved, .timer2.moved {
left: 6vh;
}
+.timer3.moved {
+ bottom: calc(50% - 15vh);
+ right: calc(50% - 15vh);
+ width: 30vh;
+ height: 30vh;
+ border-radius: 15vh;
+ font-size: 6em;
+ line-height: 30vh;
+}
.extra {
position: relative;
top: -2vh;
}
.timer2 {
position: absolute;
+ left: calc(48vh + 2px);
+ top: calc(11.5vh + 2px);
+ height: 1.2em;
+ width: 3em;
+ margin: 0;
+ text-align: center;
+ font-size: 2em;
+ font-weight: bold;
+ line-height: 1.2em;
+ border: 2px solid var(--dark);
+ outline: 2px solid var(--feature-dark);
opacity: 0;
- transition: opacity 1.5s;
+ transition: opacity 1.5s, left 1.5s;
}
.timer3 {
position: absolute;
+ bottom: 4vh;
+ right: 4vh;
opacity: 0;
- transition: opacity 1.5s;
+ width: 12vh;
+ height: 12vh;
+ border-radius: 6vh;
+ margin: 0;
+ text-align: center;
+ vertical-align: center;
+ font-size: 2em;
+ font-weight: bold;
+ line-height: 12vh;
+ background-image: var(--background);
+ border: 2px solid var(--feature-dark);
+ outline: 2px solid var(--dark);
+ opacity: 0;
+ transition: opacity 1.5s, bottom 1.5s, right 1.5s, width 1.5s, height 1.5s, border-radius 1.5s, font-size 1.5s, line-height 1.5s, transform 1.5s;
+ animation: spinText 10s linear 0s infinite;
}
.show {
opacity: 1;
}
// helper function for creating time strings
function makeTime(t, o) {
- let current = Math.round((Date.now() + o) / 1000);
- var time = t - current;
- if (Math.sign(time) == -1) {time = 0;}
- var minutes = Math.floor(time / 60);
- var seconds = (time - (minutes * 60));
-
- var minutesString = minutes.toString();
- var secondsString = seconds.toString();
- minutesString = minutesString.padStart(2, "0");
- secondsString = secondsString.padStart(2, "0");
-
- return `${minutesString}:${secondsString}`;
+ let current = Math.round((Date.now() + o) / 1000);
+ var time = t - current;
+ if (Math.sign(time) == -1) {time = 0;}
+ var minutes = Math.floor(time / 60);
+ var seconds = (time - (minutes * 60));
+
+ var minutesString = minutes.toString();
+ var secondsString = seconds.toString();
+ minutesString = minutesString.padStart(2, "0");
+ secondsString = secondsString.padStart(2, "0");
+
+ return `${minutesString}:${secondsString}`;
+}
+function makeSeconds(t, o, d) {
+ let current = Math.round((Date.now() + o) / 1000);
+ var time = t - current;
+ if (Math.sign(time) == -1) {time = 0;}
+ var minutes = Math.floor(time / 60);
+ var seconds = (time - (minutes * 60));
+
+ if (d == true) {
+ if (minutes > 0) {return 360;}
+ else {return Math.round(seconds * (360 / 60))}
+ } else {
+ if (minutes > 0) {return 100;}
+ else {return Math.round(seconds * (100 / 60))}
+ }
}
// handles all updates from the server data that are not required to be instantanious (2 times per second)
function update() {
banner.classList.remove("show");
}
- const side = document.getElementsByClassName("side")[0];
- if (data.showingMain == "true") {
- side.classList.add("show");
- banner.classList.remove("moved");
- } else {
- side.classList.remove("show");
- banner.classList.add("moved");
- }
- if (data.showingExtra == "true" && data.showingMain == "true") {
- side.classList.add("showExtra");
- } else {
- side.classList.remove("showExtra");
- }
-
const timer1 = document.getElementsByClassName("timer1")[0];
timer1.innerHTML = makeTime(data.timer1End, data.timerOffset);
if (data.showingTimer1 == "true") {
} else {
timer2.classList.remove("show");
}
+ var angle = makeSeconds(data.timer2End, data.timerOffset, true);
+ var property = `conic-gradient(rgb(0,0,0,0) 0deg, rgb(0,0,0,0) ${angle}deg, var(--feature-light) ${angle}.1deg, var(--feature-light) 360deg)`;
+ timer2.style.background = `${property}, var(--background)`;
const timer3 = document.getElementsByClassName("timer3")[0];
timer3.innerHTML = makeTime(data.timer3End, data.timerOffset);
} else {
timer3.classList.remove("show");
}
+ if (data.timer3Main == "true") {
+ timer3.classList.add("moved");
+ } else {
+ timer3.classList.remove("moved");
+ }
+ var radius = makeSeconds(data.timer3End, data.timerOffset, false);
+ var property = `linear-gradient(rgb(0,0,0,0) 0%, rgb(0,0,0,0) ${radius}%, var(--feature-light) ${radius}.1%, var(--feature-dark) 100%)`;
+ timer3.style.background = `${property}, var(--background)`;
+
+ const side = document.getElementsByClassName("side")[0];
+ if (data.showingMain == "true") {
+ side.classList.add("show");
+ banner.classList.remove("moved");
+ timer2.classList.remove("moved");
+ } else {
+ side.classList.remove("show");
+ banner.classList.add("moved");
+ timer2.classList.add("moved");
+ }
+ if (data.showingExtra == "true" && data.showingMain == "true") {
+ side.classList.add("showExtra");
+ } else {
+ side.classList.remove("showExtra");
+ }
const badgeContainer = document.getElementsByClassName("badgeContainer")[0];
if (discount <= 0.99) {
.then(data => data.json())
.then(data => {
document.getElementById("code").innerHTML = data[itemId].code;
+ document.getElementById("raiting").innerHTML = data[itemId].rating;
document.getElementById("subtext").innerHTML = data[itemId].subtext;
document.getElementById("description").innerHTML = data[itemId].description;
<div class="container side show">
<div class="box main">
<h1 id="code"></h1>
+ <h3 id="raiting"></h3>
<h2 class="feature" id="subtext"></h2>
<h3 id="description"></h3>
<hr>
<div class="container box bottom">
<h3 class="feature timer1 box"></h3>
- <h3 class="timer2"></h3>
- <h3 class="timer3"></h3>
<h2 id="topText"></h2>
<div class="marquee">
<h1 class="marqueeText" id="bottomText"></h1>
<div class="container box banner">
<h1 id="bannerText"></h1>
</div>
+ <div class="timer2 box"></div>
+ <div class="timer3"></div>
<div class="container box sigilBox show" id="sigilNE">
<svg class="sigil" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
projects / shopping-channel / commitdiff