Added 3D to discount badges

~ changed discount 4 text to black

diff --git a/templates/gfx.html b/templates/gfx.html
index d5bd5805fd477ae17d490d1e829312359b40fa2c..dd86eeb8789edf01d9a47d75d19a62d0e4121805 100644 (file)
--- a/templates/gfx.html
+++ b/templates/gfx.html
@@ -26,6 +26,34 @@ body {
     75% {transform: rotate(0.75turn) scale(1);}
     100% {transform: rotate(1turn) scale(1.2);}
 }
+@keyframes spin1 {
+    0% {transform: perspective(100px) rotateY( -25deg ) rotateX(-25deg) rotateZ(0turn) scale(1.2);}
+    25% {transform: perspective(100px) rotateY( -25deg ) rotateX(-25deg) rotateZ(0.25turn) scale(1);}
+    50% {transform: perspective(100px) rotateY( -25deg ) rotateX(-25deg) rotateZ(0.5turn) scale(1.2);}
+    75% {transform: perspective(100px) rotateY( -25deg ) rotateX(-25deg) rotateZ(0.75turn) scale(1);}
+    100% {transform: perspective(100px) rotateY( -25deg ) rotateX(-25deg) rotateZ(1turn) scale(1.2);}
+}
+@keyframes spin2 {
+    0% {transform: perspective(100px) rotateY( 20deg ) rotateX(-10deg) rotateZ(0turn) scale(1.2);}
+    25% {transform: perspective(100px) rotateY( 20deg ) rotateX(-10deg) rotateZ(0.25turn) scale(1);}
+    50% {transform: perspective(100px) rotateY( 20deg ) rotateX(-10deg) rotateZ(0.5turn) scale(1.2);}
+    75% {transform: perspective(100px) rotateY( 20deg ) rotateX(-10deg) rotateZ(0.75turn) scale(1);}
+    100% {transform: perspective(100px) rotateY( 20deg ) rotateX(-10deg) rotateZ(1turn) scale(1.2);}
+}
+@keyframes spin3 {
+    0% {transform: perspective(100px) rotateY( -20deg ) rotateX(10deg) rotateZ(0turn) scale(1.2);}
+    25% {transform: perspective(100px) rotateY( -20deg ) rotateX(10deg) rotateZ(0.25turn) scale(1);}
+    50% {transform: perspective(100px) rotateY( -20deg ) rotateX(10deg) rotateZ(0.5turn) scale(1.2);}
+    75% {transform: perspective(100px) rotateY( -20deg ) rotateX(10deg) rotateZ(0.75turn) scale(1);}
+    100% {transform: perspective(100px) rotateY( -20deg ) rotateX(10deg) rotateZ(1turn) scale(1.2);}
+}
+@keyframes spin4 {
+    0% {transform: perspective(100px) rotateY( 25deg ) rotateX(25deg) rotateZ(0turn) scale(1.2);}
+    25% {transform: perspective(100px) rotateY( 25deg ) rotateX(25deg) rotateZ(0.25turn) scale(1);}
+    50% {transform: perspective(100px) rotateY( 25deg ) rotateX(25deg) rotateZ(0.5turn) scale(1.2);}
+    75% {transform: perspective(100px) rotateY( 25deg ) rotateX(25deg) rotateZ(0.75turn) scale(1);}
+    100% {transform: perspective(100px) rotateY( 25deg ) rotateX(25deg) rotateZ(1turn) scale(1.2);}
+}
 @keyframes spinOffset {
     0% {transform: perspective(200px) translate(-50%, -50%) rotateY( 15deg ) rotateZ(0turn) scale(1.2);}
     25% {transform: perspective(250px) translate(-50%, -50%) rotateY( 15deg ) rotateZ(0.25turn) scale(1);}
@@ -38,6 +66,26 @@ body {
     50% {transform: rotate(0.01turn);}
     100% {transform: rotate(-0.01turn);}
 }
+@keyframes spinText1 {
+    0% {transform: perspective(100px) rotateY( 20deg ) rotateX(-10deg) rotateZ(-0.01turn);}
+    50% {transform: perspective(100px) rotateY( 20deg ) rotateX(-10deg) rotateZ(0.01turn);}
+    100% {transform: perspective(100px) rotateY( 20deg ) rotateX(-10deg) rotateZ(-0.01turn);}
+}
+@keyframes spinText2 {
+    0% {transform: perspective(100px) rotateY( -20deg ) rotateZ(-0.01turn);}
+    50% {transform: perspective(100px) rotateY( -20deg ) rotateZ(0.01turn);}
+    100% {transform: perspective(100px) rotateY( -20deg ) rotateZ(-0.01turn);}
+}
+@keyframes spinText3 {
+    0% {transform: perspective(100px) rotateY( 20deg ) rotateZ(-0.01turn);}
+    50% {transform: perspective(100px) rotateY( 20deg ) rotateZ(0.01turn);}
+    100% {transform: perspective(100px) rotateY( 20deg ) rotateZ(-0.01turn);}
+}
+@keyframes spinText4 {
+    0% {transform: perspective(100px) rotateY( -20deg ) rotateX(10deg) rotateZ(-0.01turn);}
+    50% {transform: perspective(100px) rotateY( -20deg ) rotateX(10deg) rotateZ(0.01turn);}
+    100% {transform: perspective(100px) rotateY( -20deg ) rotateX(10deg) rotateZ(-0.01turn);}
+}
 @keyframes spinTextOffset {
     0% {transform: perspective(500px) translateX(-50%) rotateY( -10deg ) rotateZ(-0.01turn);}
     50% {transform: perspective(500px) translateX(-50%) rotateY( -10deg) rotateZ(0.01turn);}
@@ -208,7 +256,7 @@ body {
     width: 12vh;
     height: 12vh;
     padding: 0;
-    animation: spin 12s linear 0s infinite;
+    animation: spin1 12s linear 0s infinite;
     animation-direction: reverse;
 }
 #badge1Text {
@@ -217,7 +265,7 @@ body {
     left: 31.5vh;
     color: yellow;
     width: 22vh;
-    animation: spinText 7s linear 0s infinite;
+    animation: spinText1 7s linear 0s infinite;
     rotate: -0.015turn;
     font-size: 2em;
     text-align: center;
@@ -236,7 +284,7 @@ body {
     width: 10vh;
     height: 10vh;
     padding: 0;
-    animation: spin 10s linear 0s infinite;
+    animation: spin2 10s linear 0s infinite;
 }
 #badge2Text {
     position: absolute;
@@ -244,7 +292,7 @@ body {
     left: 26.5vh;
     color: black;
     width: 20vh;
-    animation: spinText 10s linear 0s infinite;
+    animation: spinText2 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;*/
@@ -262,7 +310,7 @@ body {
     width: 10vh;
     height: 10vh;
     padding: 0;
-    animation: spin 10s linear 0s infinite;
+    animation: spin3 10s linear 0s infinite;
     animation-direction: reverse;
 }
 #badge3Text {
@@ -271,7 +319,7 @@ body {
     left: 33.9vh;
     color: blue;
     width: 20vh;
-    animation: spinText 10s linear 0s infinite;
+    animation: spinText3 10s linear 0s infinite;
     rotate: -0.03turn;
     text-align: center;
     /*text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;*/
@@ -289,15 +337,15 @@ body {
     width: 14vh;
     height: 14vh;
     padding: 0;
-    animation: spin 10s linear 0s infinite;
+    animation: spin4 10s linear 0s infinite;
 }
 #badge4Text {
     position: absolute;
     top: 11.8vh;
     left: 28.4vh;
-    color: var(--blue);
+    color: #00FF00;
     width: 20vh;
-    animation: spinText 10s linear 0s infinite;
+    animation: spinText4 10s linear 0s infinite;
     rotate: 0.025turn;
     font-size: 2.2em;
     line-height: 0.6em;
@@ -344,7 +392,7 @@ body {
     perspective: 400px;
     animation: spinTextOffset 10s linear 0s infinite;
     rotate: 0.025turn;
-    font-size: 7em;
+    font-size: 10em;
     text-align: center;
 }
 #currentPrice {