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 ee107328e00ed47959f009fab9cdcbb27579f643..b502d945790d3157dc248c04ed61bf2af2ed2033 100644 (file)
--- 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 29d0234470320cb6fd54f08f52b6cc0523950779..11f3a4fd33496bca33145d610445bf6e1afb84a9 100644 (file)
--- 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 63f0300c04e5a007a211fe47276673ef6f2e2163..4596c7af730e5075e2823156eacfef955f6ff53e 100755 (executable)
--- a/items.json
+++ b/items.json
@@ -1,7 +1,7 @@
 [
        {
                "code":"Placeholder item code",
-               "rating":"✦✦✦✦",
+               "rating":"★★★★★",
                "subtext":"Test item name",
                "description":"Test item description",
                "origionalPrice":0,