update for our registrators

static/styles/main.css

@@ -351,7 +351,7 @@ header img {
   font-weight: 400;
   opacity: 50%;
   font-size: 16px;
-  margin: 10px 0 0 44px;
+  margin: 10px 44px 0 44px;
 }
 
 .whole-width button {
@@ -1823,7 +1823,7 @@ input[type="datetime-local"] {
 }
 
 .speedometr .speed-bg {
-  z-index: 10;
+  z-index: 2;
   position: absolute;
   top: 0;
   left: -20px;
@@ -2164,6 +2164,7 @@ input[type="datetime-local"] {
   width: 100%;
   height: 100%;
   position: absolute;
+  z-index: 2;
   /* border-radius: 29px; */
 }
 
@@ -2677,6 +2678,105 @@ input[type="time"]:focus {
   height: 30px !important;
 }
 
+.heart-container {
+  --heart-color: #8086f9;
+  position: relative;
+  width: 100%;
+  height: 50px;
+  transition: 0.3s;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-weight: 400;
+  font-size: 20px;
+  margin-top: 10px;
+}
+
+.heart-container .checkbox {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  z-index: 20;
+  cursor: pointer;
+}
+
+.heart-container .svg-container {
+  width: 50px;
+  height: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.heart-container .svg-outline,
+.heart-container .svg-filled {
+  fill: var(--heart-color);
+  position: absolute;
+}
+
+.heart-container .svg-filled {
+  animation: keyframes-svg-filled 1s;
+  display: none;
+}
+
+.heart-container .svg-celebrate {
+  position: absolute;
+  animation: keyframes-svg-celebrate 0.5s;
+  animation-fill-mode: forwards;
+  display: none;
+  stroke: var(--heart-color);
+  fill: var(--heart-color);
+  stroke-width: 2px;
+}
+
+.heart-container .checkbox:checked ~ .svg-container .svg-filled {
+  display: block;
+}
+
+.heart-container .checkbox:checked ~ .svg-container .svg-celebrate {
+  display: block;
+}
+
+@keyframes keyframes-svg-filled {
+  0% {
+    transform: scale(0);
+  }
+
+  25% {
+    transform: scale(1.2);
+  }
+
+  50% {
+    transform: scale(1);
+    filter: brightness(1.5);
+  }
+}
+
+@keyframes keyframes-svg-celebrate {
+  0% {
+    transform: scale(0);
+  }
+
+  50% {
+    opacity: 1;
+    filter: brightness(1.5);
+  }
+
+  100% {
+    transform: scale(1.4);
+    opacity: 0;
+    display: none;
+  }
+}
+
+#playback-camera {
+  width: 500px;
+  margin-left: 44px;
+  background: #f7f7fa;
+  display: none;
+}
+
 @media (max-width: 1950px) {
   /* при разрешении монитора до 1950 пикселей */