matrix-engine-wgpu 1.1.1 → 1.2.0

package/public/css/style.css

@@ -265,34 +265,65 @@ p {
 }
 
 .btn {
+  font-family: 'Orbitron', sans-serif;
+  font-weight: 600;
+  font-size: 16px;
+  color: #00ffff;
+  text-transform: uppercase;
+  letter-spacing: 1.5px;
+  padding: 12px 24px;
+  background: linear-gradient(145deg, #0f0f0f, #1a1a1a);
+  border: 2px solid #00ffff;
+  border-radius: 12px;
+  box-shadow: 0 0 10px #00ffff44, 0 0 20px #00ffff22 inset;
   cursor: pointer;
-  background: #6e34d9;
-  background-image: -webkit-linear-gradient(top, #6e34d9, #0a027a);
-  background-image: -moz-linear-gradient(top, #6e34d9, #0a027a);
-  background-image: -ms-linear-gradient(top, #6e34d9, #0a027a);
-  background-image: -o-linear-gradient(top, #6e34d9, #0a027a);
-  background-image: linear-gradient(to bottom, #6e34d9, #0a027a);
-  -webkit-border-radius: 28;
-  -moz-border-radius: 28;
-  border-radius: 28px;
-  text-shadow: 0px 0px 14px #ffd52e;
-  -webkit-box-shadow: 0px 1px 26px #666666;
-  -moz-box-shadow: 0px 1px 26px #666666;
-  box-shadow: 0px 1px 26px #666666;
-  color: #ffffff;
-  font-size: 13px;
-  padding: 4px 8px 4px 8px;
-  text-decoration: none;
+  transition: all 0.25s ease-in-out;
+  display: inline-block;
+  text-align: center;
 }
 
 .btn:hover {
-  background: #0a027a;
-  background-image: -webkit-linear-gradient(top, #0a027a, #6e34d9);
-  background-image: -moz-linear-gradient(top, #0a027a, #6e34d9);
-  background-image: -ms-linear-gradient(top, #0a027a, #6e34d9);
-  background-image: -o-linear-gradient(top, #0a027a, #6e34d9);
-  background-image: linear-gradient(to bottom, #0a027a, #6e34d9);
-  text-decoration: none;
+  background: #00ffff22;
+  box-shadow: 0 0 20px #00ffffaa, 0 0 30px #00ffff55 inset;
+  color: #ffffff;
+  transform: scale(1.05);
+}
+
+.btn span::before {
+  content: '▶ ';
+  color: #00ffffaa;
+}
+
+.fancy-label {
+  font-family: 'Orbitron', sans-serif;
+  font-weight: 500;
+  font-size: 14px;
+  color: #00ffff;
+  letter-spacing: 1px;
+  text-shadow: 0 0 4px #00ffffaa;
+  padding: 2px 6px;
+  background-color: #111111cc;
+  border: 1px solid #00ffff66;
+  border-radius: 6px;
+  box-shadow: 0 0 6px #00ffff33;
+  display: inline-block;
+  user-select: none;
+}
+
+.fancy-title {
+  width: 100%;
+  font-family: 'Orbitron', sans-serif;
+  font-weight: 700;
+  font-size: 32px;
+  color: #00ffff;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  background: transparent;
+  text-shadow: 0 0 4px #00ffffaa, 0 0 8px #00ffff55;
+  border: none;
+  padding: 8px 16px;
+  display: inline-block;
+  user-select: none;
 }
 
 .btn2 {
@@ -346,7 +377,7 @@ p {
 }
 
 #messageBox {
-  font-size: xx-large;
+  font-size: large;
   padding: 10%;
   align-items: center;
   text-align: center;
@@ -414,7 +445,7 @@ p {
 }
 
 .animate1 {
-	text-shadow: 0px 4px 4px #282828;
+  text-shadow: 0px 4px 4px #282828;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: black;
 
@@ -427,19 +458,45 @@ p {
 }
 
 @-webkit-keyframes AnimationName {
-  0%{background-position:0% 50%}
-  50%{background-position:100% 50%}
-  100%{background-position:0% 50%}
+  0% {
+    background-position: 0% 50%
+  }
+
+  50% {
+    background-position: 100% 50%
+  }
+
+  100% {
+    background-position: 0% 50%
+  }
 }
+
 @-moz-keyframes AnimationName {
-  0%{background-position:0% 50%}
-  50%{background-position:100% 50%}
-  100%{background-position:0% 50%}
+  0% {
+    background-position: 0% 50%
+  }
+
+  50% {
+    background-position: 100% 50%
+  }
+
+  100% {
+    background-position: 0% 50%
+  }
 }
+
 @keyframes AnimationName {
-  0%{background-position:0% 50%}
-  50%{background-position:100% 50%}
-  100%{background-position:0% 50%}
+  0% {
+    background-position: 0% 50%
+  }
+
+  50% {
+    background-position: 100% 50%
+  }
+
+  100% {
+    background-position: 0% 50%
+  }
 }
 
 
@@ -454,89 +511,181 @@ p {
 }
 
 @-webkit-keyframes bganim {
-  0%{background-position:0% 45%}
-  50%{background-position:100% 56%}
-  100%{background-position:0% 45%}
+  0% {
+    background-position: 0% 45%
+  }
+
+  50% {
+    background-position: 100% 56%
+  }
+
+  100% {
+    background-position: 0% 45%
+  }
 }
+
 @-moz-keyframes bganim {
-  0%{background-position:0% 45%}
-  50%{background-position:100% 56%}
-  100%{background-position:0% 45%}
+  0% {
+    background-position: 0% 45%
+  }
+
+  50% {
+    background-position: 100% 56%
+  }
+
+  100% {
+    background-position: 0% 45%
+  }
 }
+
 @-o-keyframes bganim {
-  0%{background-position:0% 45%}
-  50%{background-position:100% 56%}
-  100%{background-position:0% 45%}
+  0% {
+    background-position: 0% 45%
+  }
+
+  50% {
+    background-position: 100% 56%
+  }
+
+  100% {
+    background-position: 0% 45%
+  }
 }
+
 @keyframes bganim {
-  0%{background-position:0% 45%}
-  50%{background-position:100% 56%}
-  100%{background-position:0% 45%}
-}
+  0% {
+    background-position: 0% 45%
+  }
 
+  50% {
+    background-position: 100% 56%
+  }
+
+  100% {
+    background-position: 0% 45%
+  }
+}
 
-/* The switch - the box around the slider */
 .switch {
   position: relative;
   display: inline-block;
   width: 60px;
-  height: 34px;
+  /* You can adjust */
+  height: 32px;
 }
 
-/* Hide default HTML checkbox */
 .switch input {
   opacity: 0;
   width: 0;
   height: 0;
+  position: absolute;
 }
 
-/* The slider */
+/* Force span to fill the label exactly */
 .sliderSwitch {
   position: absolute;
-  cursor: pointer;
   top: 0;
   left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #ccc;
-  -webkit-transition: .4s;
-  transition: .4s;
+  width: 100%;
+  height: 100%;
+  display: block;
+  background-color: #111;
+  border-radius: 34px;
+  border: 2px solid #00ffee;
+  box-shadow: 0 0 10px #00ffee55;
+  transition: all 0.4s ease;
+  overflow: hidden;
+  z-index: 1;
 }
 
-.sliderSwitch:before {
-  position: absolute;
+/* The circle inside the slider */
+.sliderSwitch::before {
   content: "";
-  height: 26px;
-  width: 26px;
+  position: absolute;
+  width: 24px;
+  height: 24px;
   left: 4px;
   bottom: 4px;
-  background-color: white;
-  -webkit-transition: .4s;
-  transition: .4s;
+  background-color: #00ffee;
+  border-radius: 50%;
+  transition: transform 0.4s ease;
+  z-index: 2;
+  box-shadow: 0 0 10px #00ffee;
 }
 
-input:checked + .sliderSwitch {
-  background-color: #2196F3;
+/* ON state */
+.switch input:checked+.sliderSwitch {
+  background-color: #002233;
+  border-color: #00ff88;
+  box-shadow: 0 0 12px #00ff8844;
 }
 
-input:focus + .sliderSwitch {
-  box-shadow: 0 0 1px #2196F3;
+.switch input:checked+.sliderSwitch::before {
+  transform: translateX(28px);
+  background-color: #00ff88;
+  box-shadow: 0 0 10px #00ff88;
 }
 
-input:checked + .sliderSwitch:before {
-  -webkit-transform: translateX(26px);
-  -ms-transform: translateX(26px);
-  transform: translateX(26px);
+select {
+  appearance: none;
+  /* Remove default arrow */
+  background-color: #111;
+  color: #00ffee;
+  border: 2px solid #00ffee55;
+  border-radius: 8px;
+  padding: 8px 12px;
+  font-size: 16px;
+  font-family: 'Orbitron', sans-serif;
+  /* Optional futuristic font */
+  box-shadow: 0 0 8px #00ffee33;
+  outline: none;
+  transition: 0.3s ease;
+  cursor: pointer;
 }
 
-.sliderSwitch span {
-  width: unset;
+select:hover {
+  border-color: #00ffee;
+  box-shadow: 0 0 12px #00ffeeaa;
 }
-/* Rounded sliders */
-.sliderSwitch.round {
-  border-radius: 34px;
+
+select:focus {
+  border-color: #00ff88;
+  box-shadow: 0 0 16px #00ff88aa;
 }
 
-.sliderSwitch.round:before {
-  border-radius: 50%;
+option {
+  background-color: #111;
+  color: #00ffee;
+  padding: 6px;
+  font-family: 'Orbitron', sans-serif;
+}
+
+#jambTable {
+  position: absolute;
+  display:flex;
+  top: 17%;
+  left: 17%;
+  width: 300px;
+  transform: translate(-50%, -50%) scale(1);
+  background: rgba(0, 0, 0, 0.9);
+  border: 2px solid #0ff;
+  padding: 15px;
+  border-radius: 12px;
+  transform-origin: center center;
+  transition: transform 0.4s ease, opacity 0.3s ease;
+  font-family: 'Orbitron', sans-serif;
+}
+
+/* Visible state */
+#jambTable.show {
+  display: flex;
+  transform: translate(-50%, -50%) scale(1);
+  opacity: 1;
+}
+
+/* Hidden state */
+#jambTable.hide {
+  transform: translate(-50%, -50%) scale(0);
+  opacity: 0;
+  pointer-events: none;
 }