From: will <greenwoodw50@gmail.com>
Date: Wed, 28 Aug 2024 15:38:13 +0000 (+0100)
Subject: Aestetic tweaks
X-Git-Url: https://git.ozva.co.uk/?a=commitdiff_plain;h=327cfdb16c1a77cb7f31db45b749ef8ccdbd9635;p=shopping-channel

Aestetic tweaks

+ badge only shows up when showing extra information
+ sigils max opacity set to 0.9
+ sigils start invisible
+ made bottom box top text look better
+ addded some static contact info
+ minor ordering change in interface "products"
---

diff --git a/auth/index.php b/auth/index.php
index ee10732..b502d94 100644
--- a/auth/index.php
+++ b/auth/index.php
@@ -246,12 +246,12 @@ if ($data['showingAll'] == "true") {
 }
 ?>
 				</div><div class='split'>
-					<input type='checkbox' id='extra' name='extra' value='true'<?php echo $checkedExtra; ?>>
-					<label for='extra'> Showing extra information</label><br>
+					<input type='checkbox' id='all' name='all' value='true'<?php echo $checkedAll; ?>>
+					<label for='all'> Showing all components</label><br>
 					<input type='checkbox' id='main' name='main' value='true'<?php echo $checkedMain; ?>>
 					<label for='main'> Showing product information</label><br>
-					<input type='checkbox' id='all' name='all' value='true'<?php echo $checkedAll; ?>>
-					<label for='all'> Showing all components</label>
+					<input type='checkbox' id='extra' name='extra' value='true'<?php echo $checkedExtra; ?>>
+					<label for='extra'> Showing extra information</label>
 				</div>
 			</fieldset>
 
diff --git a/index.html b/index.html
index 29d0234..11f3a4f 100644
--- a/index.html
+++ b/index.html
@@ -118,7 +118,7 @@ body {
 .showExtra > .extra {
 	transform: translateY(0%);
 }
-.main > *, .extra > *:not(.soldBox), .bottom > *, .marquee > * {
+.main > *, .extra > *:not(.soldBox), .bottom > *, .bottom > div > *, .marquee > * {
 	margin: 0;
 	padding: 0.5vh 1vh;
 }
@@ -201,12 +201,40 @@ h2.badge {
 	display: inline-block;
 	vertical-align: top;
 }
+#topTextBox {
+	width: calc(100% - 20px);
+	margin: 5px;
+	margin-bottom: 0;
+	padding: 5px;
+	border-radius: 5px;
+	background-image: linear-gradient(0.25turn, var(--feature-dark), rgba(0,0,0,0)  40%), var(--background);
+	box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.19) 0px 1px 2px;
+}
+#topText {
+	display: inline-block;
+	width: 50%;
+	padding: 0;
+}
+#idText {
+	display: inline-block;
+	width: 50%;
+	padding: 0;
+	text-align: right;
+	font-size: 1.5em;
+	font-weight: bold;
+	font-style: italic;
+	color: var(--feature-dark);
+}
 .marquee {
 	padding: 0;
 	width: 100%;
 	mask-image: linear-gradient(0.25turn, transparent, black 5%, black 95%, transparent);
 	overflow: hidden;
 }
+.marqueeText {
+	white-space: nowrap;
+	overflow: hidden;
+}
 .timer1 {
 	position: absolute;
 	left: 101vh;
@@ -262,6 +290,9 @@ h2.badge {
 .show.banner {
 	width: 50vh;
 }
+.show.sigilBox {
+	opacity: 0.9;
+}
 @keyframes spinBox {
 	0% {transform: translateY(100%);}
 	50% {}
@@ -441,7 +472,7 @@ function update() {
 
 			// Discount badge
 			const badgeContainer = document.getElementsByClassName("badgeContainer")[0];
-			if (discount <= 0.99) {
+			if (discount <= 0.99 && data.showingExtra == "true") {
 				badgeContainer.classList.add("show");
 			} else {
 				badgeContainer.classList.remove("show");
@@ -656,7 +687,9 @@ setInterval(draw, 500)
 
 		<div class="container box bottom">
 			<h3 class="feature timer1 box"></h3>
-			<h2 id="topText"></h2>
+			<div id="topTextBox">
+				<h2 id="topText"></h2><p id="idText">Welcome to <span style="font-family: serif;">XMDV</span> Shopping!</p>
+			</div>
 			<div class="marquee">
 				<h1 class="marqueeText" id="bottomText"></h1>
 			</div>	
@@ -668,7 +701,7 @@ setInterval(draw, 500)
 		<div class="timer2 box"></div>
 		<div class="timer3"></div>
 
-		<div class="container box sigilBox show" id="sigilNE">
+		<div class="container box sigilBox" id="sigilNE">
 			<svg class="sigil" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
 				<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
@@ -680,7 +713,7 @@ setInterval(draw, 500)
 				<circle class="sigilEnd" r="3">
 			</svg>
 		</div>
-		<div class="container box sigilBox show" id="sigilSE">
+		<div class="container box sigilBox" id="sigilSE">
 			<svg class="sigil" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
 				<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
@@ -691,7 +724,7 @@ setInterval(draw, 500)
 				<circle class="sigilEnd" r="3">
 			</svg>
 		</div>
-		<div class="container box sigilBox show" id="sigilSW">
+		<div class="container box sigilBox" id="sigilSW">
 			<svg class="sigil" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
 				<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
@@ -702,7 +735,7 @@ setInterval(draw, 500)
 				<circle class="sigilEnd" r="3">
 			</svg>
 		</div>
-		<div class="container box sigilBox show" id="sigilNW">
+		<div class="container box sigilBox" id="sigilNW">
 			<svg class="sigil" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
 				<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
diff --git a/items.json b/items.json
index 63f0300..4596c7a 100755
--- a/items.json
+++ b/items.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code":"Placeholder item code",
-		"rating":"&#x2726;&#x2726;&#x2726;&#x2726;",
+		"rating":"&starf;&starf;&starf;&starf;&starf;",
 		"subtext":"Test item name",
 		"description":"Test item description",
 		"origionalPrice":0,