dejquery

assets/css/liczby.css

@@ -111,68 +111,76 @@ input[type="number"] {
 
 
 /* Animacje */
-.wsun, .dwsun .okno {
-    animation: Wsun 0.6s ease-in;
+/* AI WYGENEROWAŁO TE KLASY I KEYFRAMEY */
+.pokaz, .dialog-pokaz .okno {
+    animation: Pokaz 0.35s ease-in-out forwards;
 }
 
-@keyframes Wsun {
-    0% {
-        bottom: -40%;
-        opacity: 0;
-    }
-    100% {
-        bottom: 0;
-        opacity: 1;
-    }
-}
-
-.wysun, .dwysun .okno {
-    animation: Wysun 1.5s ease-in;
+.ukryj, .dialog-ukryj .okno {
+    animation: Ukryj 0.35s ease-in-out forwards;
     display: none;
 }
 
-@keyframes Wysun {
-    0% {
-        display: initial;
-        bottom: 0;
-        opacity: 1;
-    }
-    100% {
-        display: initial;
-        bottom: -40%;
-        opacity: 0;
-    }
+.dialog-pokaz {
+    animation: PokazDialog 0.35s ease-in-out forwards;
 }
 
-.dwsun {
-    animation: DWsun 0.6s ease-in;
-}
-
-@keyframes DWsun {
-    0% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 1;
-    }
-}
-
-.dwysun {
-    animation: DWysun 0.6s ease-in;
+.dialog-ukryj {
+    animation: UkryjDialog 0.35s ease-in-out forwards;
     display: none;
+    width: 0 !important;
+    height: 0 !important;
 }
 
-@keyframes DWysun {
+.ukryte, .ukryte * {
+    display: none;
+    width: 0 !important;
+    height: 0 !important;
+}
+
+@keyframes Pokaz {
     0% {
-        display: initial;
-        opacity: 1;
+        opacity: 0;
+        transform: translateY(2rem);
     }
     100% {
-        display: initial;
-        opacity: 0;
+        opacity: 1;
+        transform: translateY(0);
     }
 }
 
+@keyframes Ukryj {
+    0% {
+        opacity: 1;
+        transform: translateY(0);
+        display: initial;
+    }
+    100% {
+        opacity: 0;
+        transform: translateY(2rem);
+        display: initial;
+    }
+}
+
+@keyframes PokazDialog {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes UkryjDialog {
+    0% {
+        opacity: 1;
+        display: initial;
+    }
+    100% {
+        opacity: 0;
+        display: initial;
+    }
+}
 
 
 /* Dialog */

assets/js/liczby.js

@@ -0,0 +1,68 @@
+let cel = 0;
+
+document.addEventListener("DOMContentLoaded", () => {
+});
+
+function pokazKonfiguracje() {
+    /**
+     * @type {HTMLFormElement}
+     */
+    const konfiguracja = document.getElementById('konfiguracja');
+    konfiguracja.className = 'dialog dialog-pokaz';
+
+
+    /**
+     * @type {HTMLInputElement}
+     */
+    const lManual = document.getElementById('l-manual');
+    lManual.checked = false;
+
+    /**
+     * @type {HTMLInputElement}
+     */
+    const lAuto = document.getElementById('l-auto');
+    lAuto.checked = false;
+}
+
+/**
+ * 
+ * @param {FormDataEvent} event 
+ */
+function zacznijGre(event) {
+    document.getElementById('tytul').className = 'ukryj';
+    event.preventDefault();
+}
+
+function pokazNumer() {
+    /**
+     * @type {HTMLFormElement}
+     */
+    const liczba = document.getElementById('liczba');
+    liczba.className = 'dialog dialog-pokaz';
+
+    /**
+     * @type {HTMLInputElement}
+     */
+    const numer = document.getElementById('numer');
+    numer.value = "";
+}
+
+/**
+ * 
+ * @param {FormDataEvent} event 
+ */
+function zamknijNumer(event) {    
+    /**
+     * @type {HTMLFormElement}
+     */
+    const liczba = document.getElementById('liczba');
+    liczba.className = 'dialog dialog-ukryj';
+
+    cel = Number(event.formData.get("liczba"));
+
+    /**
+     * @type {HTMLInputElement}
+     */
+    const numer = document.getElementById('numer');
+    numer.value = "";
+}