Let's go gambling!

assets/css/js-warunkowe.css

@@ -1,8 +1,8 @@
-#pornhub-nieaktywne {
+#nieaktywne {
     display: none;
 }
 
-#pornhub * {
+#aktywne * {
     color: #fff;
     font-family: Arial,Helvetica,sans-serif;
     font-size: 12px;
@@ -10,7 +10,7 @@
     padding: 0;
 }
 
-#pornhub {
+#aktywne {
     display: inline-block !important;
     background: #000;
     z-index: 1000002;
@@ -25,7 +25,7 @@
     padding: 0;
 }
 
-#pornhub img {
+#aktywne img {
     color: #fff;
     font-family: Arial,Helvetica,sans-serif;
     font-size: 12px;
@@ -35,7 +35,7 @@
     width: 150px;
 }
 
-#pornhub #pierwszy {
+#aktywne #pierwszy {
     max-width: 750px;
     display: inline-block;
     padding: 4rem 2rem;
@@ -50,7 +50,7 @@
     font-size: 12px;
 }
 
-#pornhub #pierwszy div h3 {
+#aktywne #pierwszy div h3 {
     font-size: 2.5rem;
     margin: 1.5rem 0 1rem;
     font-weight: 700;
@@ -61,7 +61,7 @@
     text-transform: none;
 }
 
-#pornhub #pierwszy div h4 {
+#aktywne #pierwszy div h4 {
     font-size: 1.2rem;
     margin: 1.5rem 0 1rem;
     margin-top: 2.5rem;
@@ -75,14 +75,14 @@
     text-transform: none;
 }
 
-#pornhub #pierwszy div p {
+#aktywne #pierwszy div p {
     font-size: 1.25rem;
     margin: 0;
     color: #ccc;
 }
 
 
-#pornhub span {
+#aktywne span {
     background-color: rgb(0,0,0);
     color: rgb(204,204,204);
     font-family: Arial, Helvetica, sans-serif;
@@ -91,7 +91,7 @@
     font-size: 1rem;
 }
 
-#pornhub button {
+#aktywne button {
     appearance: none;
   vertical-align: top;
   text-decoration: none;
@@ -114,14 +114,14 @@
   border: 3px solid #ff9000;
 }
 
-#pornhub input {
+#aktywne input {
     margin: 0;
     border: 3px solid #ff9000;
     height: .5rem;
     background: #1f1f1f;
 }
 
-#pornhub input::-webkit-slider-thumb {
+#aktywne input::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
     width: 1rem;
@@ -132,10 +132,30 @@
     background-color: #ff9000;
 }
 
-#pornhub input::-moz-range-thumb {
+#aktywne input::-moz-range-thumb {
     width: 1rem;
     height: 1rem;
     border-radius: 100%;
     cursor: pointer;
     background-color: #ff9000;
+}
+
+#zad8-haslo {
+    font-size: larger;
+    width: 100%;
+}
+
+#zad8-lista {
+    height: 6rem;
+}
+
+#zad8-sila {
+    border-radius: .4rem;
+    border: .2rem solid var(--colorSurface2);
+    background-color: var(--colorSurface1);
+    padding: .5rem;
+    margin: .5rem;
+    font-size: 24pt;
+    height: 24pt;
+    user-select: none;
 }

assets/css/liczby.css

@@ -0,0 +1,166 @@
+@import url(baza.css);
+
+html {
+    background: var(--colorCrust);
+    overflow: hidden !important;
+}
+
+header {
+    padding: 1rem 1.5rem;
+    border-bottom: solid 3px var(--colorBase);
+}
+
+a {
+    color: var(--colorText) !important;
+    text-decoration-color: transparent !important;
+}
+
+a:hover {
+    text-decoration-color: var(--colorText) !important;
+}
+
+
+/* Tytułowe */
+#tytul {
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: space-between;
+    position: fixed;
+    top: 4rem;
+    width: 100vw;
+    height: calc(100vh - 4rem);
+    text-align: center;
+
+    background: linear-gradient(180deg,
+        transparent 0%,
+        transparent 10%,
+        var(--colorSurface0) 20%,
+        var(--colorSurface1) 30%,
+        var(--colorSurface0) 70%,
+        var(--colorSurface0) 100%
+    );
+}
+
+#tytul div h1 {
+    font-size: 96pt !important;
+    margin-top: 13rem;
+}
+
+#tytul div button {
+    position: relative;
+    color: var(--colorText);
+    text-shadow: 1px 1px 2px var(--colorBase), 0 0 1px var(--colorBase), 0 0 0.2px var(--colorBase);
+    box-shadow: 4px 10px 10px var(--colorBase);
+    background-color: var(--colorPeach);
+    background: linear-gradient(180deg,
+        var(--colorPeach) 0%,
+        var(--colorYellow) 35%,
+        var(--colorPeach) 65%,
+        var(--colorPeach) 100%
+    );
+    border-color: var(--colorText);
+    padding: 1rem;
+    border-width: .5rem;
+    font-size: 56pt;
+    margin-bottom: 4rem;
+
+    animation: ZacznijTracic 5s ease-in-out infinite;
+}
+
+@keyframes ZacznijTracic {
+    0% {
+        top: 0;
+    }
+    40% {
+        top: -2rem;
+        scale: 1.01;
+    }
+    60% {
+        top: -2rem;
+        scale: 1.01;
+    }
+    100% {
+        top: 0;
+    }
+}
+
+
+
+/* Animacje */
+.wsun {
+    animation: Wsun 0.6s ease-in;
+}
+
+@keyframes Wsun {
+    0% {
+        bottom: -40%;
+        opacity: 0;
+    }
+    100% {
+        bottom: 0;
+        opacity: 1;
+    }
+}
+
+.wysun {
+    animation: Wysun 1.5s ease-in;
+}
+
+@keyframes Wysun {
+    0% {
+        bottom: 0;
+        opacity: 1;
+    }
+    100% {
+        bottom: -40%;
+        opacity: 0;
+    }
+}
+
+.dwsun {
+    animation: DWsun 0.6s ease-in;
+}
+
+@keyframes DWsun {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+.dwysun {
+    animation: DWysun 0.6s ease-in;
+}
+
+@keyframes DWysun {
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+
+
+/* Dialog */
+.dialog {
+    position: fixed;
+    top: 3rem;
+    left: 0;
+    z-index: 100002;
+    background-color: rgba(30, 30, 46, 0.9);
+    width: 100vw;
+    height: calc(100vh - 3rem);
+}
+
+.okno {
+    padding: .5rem;
+    background: var(--colorMantle);
+    margin: auto;
+    width: 40rem;
+    height: 20rem;
+}
+

assets/css/main.css

@@ -7,7 +7,7 @@
 		background-position: 0% 50%;
 	}
 	50% {
-		background-position: 400% 200%;
+		background-position: 100% 100%;
 	}
 	100% {
 		background-position: 0% 50%;
@@ -24,7 +24,7 @@ html {
         var(--colorBlue) 100%
     );
 	background-size: 1000vw 1000vh;
-    animation: GradientScroll 40s ease infinite;
+    animation: GradientScroll 5s ease infinite;
 }
 
 /* Header */

assets/js/js-warunkowe.js

@@ -1,6 +1,7 @@
 document.addEventListener("DOMContentLoaded", () => {
     zad4SprawdzParzystosc();
     zad7Przesun();
+    zad8Przelicz();
 })
 
 function zad4SprawdzParzystosc() {
@@ -21,5 +22,67 @@ function zad7Koniec() {
     } else if (wiek < 11) {
         alert("Jesteś dzieckiem! Akysz, nie niszcz sobie życia");
     }
-    document.getElementById('pornhub').id = 'pornhub-nieaktywne';
+    document.getElementById('aktywne').id = 'nieaktywne';
+}
+
+
+function regexDlugosc(str, patern) {
+    const wynik = str.match(patern);
+    if (wynik == null) {
+        return 0;
+    }
+    return wynik.length;
+}
+
+function zad8Przelicz() {
+    /**
+     * @type {string}
+     */
+    const haslo = document.getElementById("zad8-haslo").value ?? "";
+    const lista = document.getElementById("zad8-lista");
+    const sila = document.getElementById("zad8-sila");
+
+    lista.innerHTML = "";
+
+    let maleLitery = regexDlugosc(haslo, /[a-z]/g);
+    let duzeLitery = regexDlugosc(haslo, /[A-Z]/g);
+    let cyfry = regexDlugosc(haslo, /[0-9]/g);
+    let znakiSpecialne = regexDlugosc(haslo, /[!-/]|[;-@]|[\[-`]|[{-~]|ą|ę|ś|ż|ź|ó/g);
+    
+    if (maleLitery + duzeLitery + cyfry + znakiSpecialne < 8) {
+        const element = document.createElement("li");
+        element.appendChild(document.createTextNode("Twoje hasło musi zawierać minimum 8 znaków"));
+        lista.appendChild(element);
+    } else if (maleLitery >= 1 && duzeLitery >= 1 && cyfry >= 1 && znakiSpecialne >= 1) {
+        lista.append(document.createTextNode("Twoje hasło jest wystarczająco silne 💪"));
+    }
+    if (maleLitery < 1) {
+        const element = document.createElement("li");
+        element.appendChild(document.createTextNode("Twoje hasło musi zawierać minimum jedną małą litere"));
+        lista.appendChild(element);
+    }
+    if (duzeLitery < 1) {
+        const element = document.createElement("li");
+        element.appendChild(document.createTextNode("Twoje hasło musi zawierać minimum jedną dużą litere"));
+        lista.appendChild(element);
+    }
+    if (cyfry < 1) {
+        const element = document.createElement("li");
+        element.appendChild(document.createTextNode("Twoje hasło musi zawierać minimum jedną cyfre"));
+        lista.appendChild(element);
+    }
+    if (znakiSpecialne < 1) {
+        const element = document.createElement("li");
+        element.appendChild(document.createTextNode("Twoje hasło musi zawierać minimum jeden znak specjalny"));
+        lista.appendChild(element);
+    }
+
+    let algorytm = Math.floor(Math.ceil(maleLitery / 3.5) + Math.ceil(duzeLitery / 2.5) + Math.ceil(cyfry / 0.75) + znakiSpecialne * 2);
+    if (algorytm > 10) {
+        algorytm = 10;
+    }
+    sila.innerText = "";
+    for (let i = 0; i < algorytm; i++) {
+        sila.innerText += "🏋️";
+    }
 }

assets/js/js-wspolne.js

@@ -9,14 +9,20 @@ class Obliczanie extends HTMLElement {
 
     wylicz() {
         let operacja = this.dzialanie;
+        let pelne = true;
         for (const znak in this.elementy)
         {
             const element = this.shadow.getElementById(znak);
-            if (element == null) {
-                return;
+            if (element == null || element.value == "") {
+                pelne = false;
+                continue;
             }
             operacja = operacja.replaceAll(znak, element == null ? "" : element.value);
         }
+        if (!pelne) {
+            this.wynik.innerText = operacja;
+            return;
+        }
         try {
             this.wynik.innerText = eval(operacja);
         } catch {

assets/js/nawigacja.js

@@ -8,6 +8,7 @@ const linki = [
     [
         { nazwa: "JS. Podstawowe Zad.", link: "/js-podstawy.html" },
         { nazwa: "JS. Zad. Warunkowe", link: "/js-warunkowe.html" },
+        { nazwa: "Liczby", link: "/liczby.html" },
     ]
 ];