added caps lock indicator

public/css/style.scss

@@ -1142,6 +1142,26 @@ key {
   }
 }
 
+#capsWarning {
+  background: var(--main-color);
+  color: var(--bg-color);
+  display: table;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  padding: 1rem;
+  border-radius: var(--roundness);
+  /* margin-top: 1rem; */
+  transition: .25s;
+  z-index: 999;
+  pointer-events: none;
+
+  i {
+    margin-right: .5rem;
+  }
+}
+
 
 #wordsInput {
   height: 0;

public/index.html

@@ -535,6 +535,9 @@
   <div id="timerWrapper">
     <div id="timer"></div>
   </div>
+  <div id="capsWarning" class="hidden">
+    <i class="fas fa-lock"></i>Caps Lock
+  </div>
   <div id="centerContent" class="hidden">
     <div id="top">
       <div class="logo">
@@ -1366,4 +1369,4 @@
 <script src="js/account.js?v=43"></script>
 <script src="js/script.js?v=43"></script>
 
-</html>
+</html>

public/js/script.js

@@ -2233,6 +2233,18 @@ function tagsEdit() {
   }
 }
 
+function showCapsWarning() {
+  if ($("#capsWarning").hasClass("hidden")) {
+    $("#capsWarning").removeClass("hidden");
+  }
+}
+
+function hideCapsWarning() {
+  if (!$("#capsWarning").hasClass("hidden")) {
+    $("#capsWarning").addClass("hidden");
+  }
+}
+
 $(document).on("click", "#top .logo", (e) => {
   changePage("test");
 });
@@ -2532,6 +2544,15 @@ $(document).keypress(function (event) {
 
 $(document).keydown((event) => {
   keypressStats.duration.current = performance.now();
+  if ($("#wordsInput").is(":focus")) {
+    try {
+      if (event.originalEvent.getModifierState("CapsLock")) {
+        showCapsWarning();
+      } else {
+        hideCapsWarning();
+      }
+    } catch (e) {}
+  }
 });
 
 $(document).keyup((event) => {