diff --git a/Zadania/Z81 - odwrócona piramida/index.php b/Zadania/Z81 - odwrócona piramida/index.php
new file mode 100644
index 0000000..a8b753a
--- /dev/null
+++ b/Zadania/Z81 - odwrócona piramida/index.php
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+ Z81 - Odwrócona Piramida
+
+
+
+
+ Zadanie Z81
+ Autor: Jakub Grzegorczyk
+
+
+
Napisz program, który dla podanej liczby całkowitej A wyświetla piramidę znaków X o ilości wierszy równej A (maksymalna wartość A = 50).
+
+
+
+
+';
+ echo "A: $a ";
+ for ($i = $a; $i >= 1; $i--) {
+ echo str_repeat('X', $i);
+ echo ' ';
+ }
+ echo '';
+ }
+?>
+
+
diff --git a/Zadania/Z81 - odwrócona piramida/style.css b/Zadania/Z81 - odwrócona piramida/style.css
new file mode 100644
index 0000000..271c842
--- /dev/null
+++ b/Zadania/Z81 - odwrócona piramida/style.css
@@ -0,0 +1,298 @@
+/* === UNIVERSAL SCHOOL TEMPLATE CSS (BLACK & WHITE EDITION) === */
+/* clean, modern, and copy-paste friendly for all projects */
+
+/* === RESET === */
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+/* === VARIABLES === */
+:root {
+ --accent: #000;
+ --border: #000;
+ --bg: #fff;
+ --bg-alt: #f7f7f7;
+ --text: #111;
+ --shadow: rgba(0, 0, 0, 0.15) 3px 3px 6px;
+ --radius: 1em;
+ --max-width: 1300px;
+}
+
+/* === PAGE === */
+body {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Verdana, sans-serif;
+ background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
+ color: var(--text);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-height: 100vh;
+ line-height: 1.6;
+}
+
+/* === HEADER === */
+header {
+ border: 2px solid var(--border);
+ border-radius: var(--radius);
+ padding: 20px 30px;
+ box-shadow: var(--shadow);
+ background: var(--bg);
+ width: 95%;
+ max-width: var(--max-width);
+ text-align: center;
+ margin-top: 25px;
+ transition: box-shadow 0.3s ease, transform 0.2s ease;
+}
+
+header:hover {
+ box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
+ transform: translateY(-2px);
+}
+
+header h1 {
+ font-size: 2.2rem;
+}
+
+header h2 {
+ margin-top: 0.5rem;
+ font-weight: 400;
+ font-size: 1.1rem;
+ color: #444;
+}
+
+/* === BOX === */
+.box {
+ border: 2px solid var(--border);
+ border-radius: var(--radius);
+ padding: 25px 35px;
+ margin-top: 25px;
+ background: var(--bg);
+ box-shadow: var(--shadow);
+ width: 95%;
+ max-width: var(--max-width);
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.box:hover {
+ transform: translateY(-2px);
+ box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
+}
+
+/* === TEXT ELEMENTS === */
+p {
+ margin-bottom: 1rem;
+}
+
+.box > p:last-child {
+ margin-bottom: 0;
+}
+
+h1, h2, h3, h4 {
+ margin-bottom: 0.5rem;
+ font-weight: 600;
+}
+
+a {
+ color: #000;
+ text-decoration: underline;
+ font-weight: 500;
+}
+
+a:hover {
+ opacity: 0.7;
+}
+
+/* === LISTS === */
+ul, ol {
+ margin: 1rem 0 1rem 1.5rem;
+}
+
+li {
+ margin-bottom: 0.4rem;
+}
+
+/* === TABLES === */
+table {
+ width: 100%;
+ border-collapse: collapse;
+ margin: 1rem 0;
+ background: var(--bg);
+ border: 2px solid var(--border);
+ border-radius: 0.6em;
+ overflow: hidden;
+ box-shadow: var(--shadow);
+}
+
+th, td {
+ padding: 10px 12px;
+ border-bottom: 1px solid #ccc;
+}
+
+th {
+ background: var(--bg-alt);
+ font-weight: bold;
+ text-align: left;
+}
+
+tr:hover {
+ background: #f2f2f2;
+}
+
+/* === FORMS === */
+form {
+ display: flex;
+ flex-direction: column;
+ gap: 1.4rem;
+}
+
+.box:has(> form) {
+ padding: 35px 35px;
+}
+
+fieldset {
+ border: 2px solid var(--border);
+ border-radius: 0.8em;
+ padding: 1.2rem 1.5rem;
+ background: var(--bg-alt);
+}
+
+legend {
+ font-weight: bold;
+ color: #000;
+ padding: 0 0.4rem;
+ font-size: 1.05rem;
+}
+
+label {
+ font-weight: 500;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="number"],
+input[type="tel"],
+textarea,
+select {
+ width: 100%;
+ font-size: 1rem;
+ margin-top: 6px;
+ margin-bottom: 8px;
+ border: 2px solid var(--border);
+ border-radius: 0.5em;
+ padding: 0.4rem 0.5rem;
+ transition: all 0.2s ease;
+ background: var(--bg);
+}
+
+textarea {
+ resize: vertical;
+ min-height: 100px;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+ outline: none;
+ border-color: #000;
+ box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
+ background: #f9f9f9;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+ accent-color: #000;
+ transform: scale(1.2);
+ margin-right: 0.3rem;
+}
+
+/* === BUTTONS === */
+button,
+input[type="submit"],
+input[type="button"],
+input[type="reset"] {
+ padding: 10px 20px;
+ border: 2px solid var(--border);
+ border-radius: 0.5em;
+ font-weight: bold;
+ font-size: 1rem;
+ background: linear-gradient(180deg, #fff 0%, #f2f2f2 100%);
+ cursor: pointer;
+ transition: all 0.2s ease;
+ align-self: flex-start;
+}
+
+button {
+ width: 100%;
+}
+
+button:hover,
+input[type="submit"]:hover,
+input[type="button"]:hover,
+input[type="reset"]:hover {
+ background: #eaeaea;
+ box-shadow: rgba(0, 0, 0, 0.25) 3px 3px 6px;
+ transform: translateY(-2px);
+}
+
+button:active,
+input[type="submit"]:active,
+input[type="button"]:active,
+input[type="reset"]:active {
+ transform: translateY(0);
+ box-shadow: rgba(0, 0, 0, 0.15) 1px 1px 3px;
+ background: #f7f7f7;
+}
+
+/* === HR, CODE, ETC. === */
+hr {
+ border: 0;
+ border-top: 2px solid var(--border);
+ margin: 1.5rem 0;
+}
+
+img {
+ max-width: 100%;
+ border-radius: 0.5em;
+}
+
+code, pre {
+ background: #f4f4f4;
+ border: 1px solid #ccc;
+ border-radius: 0.4em;
+ padding: 0.3em 0.5em;
+ font-family: "Courier New", monospace;
+}
+
+pre {
+ padding: 1em;
+ overflow-x: auto;
+}
+
+/* === RESPONSIVE === */
+@media (max-width: 900px) {
+ header, .box {
+ width: 95%;
+ padding: 20px;
+ }
+
+ button {
+ width: 100%;
+ }
+
+ textarea {
+ width: 100%;
+ }
+}
+
+@media (max-width: 600px) {
+ header h1 {
+ font-size: 1.7rem;
+ }
+
+ header h2 {
+ font-size: 0.95rem;
+ }
+}
diff --git a/Zadania/Z82 - prostokąt x/index.php b/Zadania/Z82 - prostokąt x/index.php
new file mode 100644
index 0000000..7498767
--- /dev/null
+++ b/Zadania/Z82 - prostokąt x/index.php
@@ -0,0 +1,54 @@
+
+
+
+
+
+
+ Z82 - Prostoką† X
+
+
+
+
+ Zadanie Z82
+ Autor: Jakub Grzegorczyk
+
+
+
Napisz program, który dla danej liczby A i B wyświetla następujący blok znaków.
+
+Przykład:
+A – ilość znaków w wierszu: 5
+B – ilość wierszy: 3
+Wynik
+XXXXX
+XXXXX
+XXXXX
+
+
+
+
+
+'
+ . "A - ilość znaków w wierszu: $a "
+ . "B - ilość wierszy: $b ";
+ for ($i = 0; $i < $b; $i++) {
+ echo str_repeat('X', $a);
+ echo ' ';
+ }
+ echo '';
+}
+?>
+
+
diff --git a/Zadania/Z82 - prostokąt x/style.css b/Zadania/Z82 - prostokąt x/style.css
new file mode 100644
index 0000000..271c842
--- /dev/null
+++ b/Zadania/Z82 - prostokąt x/style.css
@@ -0,0 +1,298 @@
+/* === UNIVERSAL SCHOOL TEMPLATE CSS (BLACK & WHITE EDITION) === */
+/* clean, modern, and copy-paste friendly for all projects */
+
+/* === RESET === */
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+/* === VARIABLES === */
+:root {
+ --accent: #000;
+ --border: #000;
+ --bg: #fff;
+ --bg-alt: #f7f7f7;
+ --text: #111;
+ --shadow: rgba(0, 0, 0, 0.15) 3px 3px 6px;
+ --radius: 1em;
+ --max-width: 1300px;
+}
+
+/* === PAGE === */
+body {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Verdana, sans-serif;
+ background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
+ color: var(--text);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-height: 100vh;
+ line-height: 1.6;
+}
+
+/* === HEADER === */
+header {
+ border: 2px solid var(--border);
+ border-radius: var(--radius);
+ padding: 20px 30px;
+ box-shadow: var(--shadow);
+ background: var(--bg);
+ width: 95%;
+ max-width: var(--max-width);
+ text-align: center;
+ margin-top: 25px;
+ transition: box-shadow 0.3s ease, transform 0.2s ease;
+}
+
+header:hover {
+ box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
+ transform: translateY(-2px);
+}
+
+header h1 {
+ font-size: 2.2rem;
+}
+
+header h2 {
+ margin-top: 0.5rem;
+ font-weight: 400;
+ font-size: 1.1rem;
+ color: #444;
+}
+
+/* === BOX === */
+.box {
+ border: 2px solid var(--border);
+ border-radius: var(--radius);
+ padding: 25px 35px;
+ margin-top: 25px;
+ background: var(--bg);
+ box-shadow: var(--shadow);
+ width: 95%;
+ max-width: var(--max-width);
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.box:hover {
+ transform: translateY(-2px);
+ box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
+}
+
+/* === TEXT ELEMENTS === */
+p {
+ margin-bottom: 1rem;
+}
+
+.box > p:last-child {
+ margin-bottom: 0;
+}
+
+h1, h2, h3, h4 {
+ margin-bottom: 0.5rem;
+ font-weight: 600;
+}
+
+a {
+ color: #000;
+ text-decoration: underline;
+ font-weight: 500;
+}
+
+a:hover {
+ opacity: 0.7;
+}
+
+/* === LISTS === */
+ul, ol {
+ margin: 1rem 0 1rem 1.5rem;
+}
+
+li {
+ margin-bottom: 0.4rem;
+}
+
+/* === TABLES === */
+table {
+ width: 100%;
+ border-collapse: collapse;
+ margin: 1rem 0;
+ background: var(--bg);
+ border: 2px solid var(--border);
+ border-radius: 0.6em;
+ overflow: hidden;
+ box-shadow: var(--shadow);
+}
+
+th, td {
+ padding: 10px 12px;
+ border-bottom: 1px solid #ccc;
+}
+
+th {
+ background: var(--bg-alt);
+ font-weight: bold;
+ text-align: left;
+}
+
+tr:hover {
+ background: #f2f2f2;
+}
+
+/* === FORMS === */
+form {
+ display: flex;
+ flex-direction: column;
+ gap: 1.4rem;
+}
+
+.box:has(> form) {
+ padding: 35px 35px;
+}
+
+fieldset {
+ border: 2px solid var(--border);
+ border-radius: 0.8em;
+ padding: 1.2rem 1.5rem;
+ background: var(--bg-alt);
+}
+
+legend {
+ font-weight: bold;
+ color: #000;
+ padding: 0 0.4rem;
+ font-size: 1.05rem;
+}
+
+label {
+ font-weight: 500;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="number"],
+input[type="tel"],
+textarea,
+select {
+ width: 100%;
+ font-size: 1rem;
+ margin-top: 6px;
+ margin-bottom: 8px;
+ border: 2px solid var(--border);
+ border-radius: 0.5em;
+ padding: 0.4rem 0.5rem;
+ transition: all 0.2s ease;
+ background: var(--bg);
+}
+
+textarea {
+ resize: vertical;
+ min-height: 100px;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+ outline: none;
+ border-color: #000;
+ box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
+ background: #f9f9f9;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+ accent-color: #000;
+ transform: scale(1.2);
+ margin-right: 0.3rem;
+}
+
+/* === BUTTONS === */
+button,
+input[type="submit"],
+input[type="button"],
+input[type="reset"] {
+ padding: 10px 20px;
+ border: 2px solid var(--border);
+ border-radius: 0.5em;
+ font-weight: bold;
+ font-size: 1rem;
+ background: linear-gradient(180deg, #fff 0%, #f2f2f2 100%);
+ cursor: pointer;
+ transition: all 0.2s ease;
+ align-self: flex-start;
+}
+
+button {
+ width: 100%;
+}
+
+button:hover,
+input[type="submit"]:hover,
+input[type="button"]:hover,
+input[type="reset"]:hover {
+ background: #eaeaea;
+ box-shadow: rgba(0, 0, 0, 0.25) 3px 3px 6px;
+ transform: translateY(-2px);
+}
+
+button:active,
+input[type="submit"]:active,
+input[type="button"]:active,
+input[type="reset"]:active {
+ transform: translateY(0);
+ box-shadow: rgba(0, 0, 0, 0.15) 1px 1px 3px;
+ background: #f7f7f7;
+}
+
+/* === HR, CODE, ETC. === */
+hr {
+ border: 0;
+ border-top: 2px solid var(--border);
+ margin: 1.5rem 0;
+}
+
+img {
+ max-width: 100%;
+ border-radius: 0.5em;
+}
+
+code, pre {
+ background: #f4f4f4;
+ border: 1px solid #ccc;
+ border-radius: 0.4em;
+ padding: 0.3em 0.5em;
+ font-family: "Courier New", monospace;
+}
+
+pre {
+ padding: 1em;
+ overflow-x: auto;
+}
+
+/* === RESPONSIVE === */
+@media (max-width: 900px) {
+ header, .box {
+ width: 95%;
+ padding: 20px;
+ }
+
+ button {
+ width: 100%;
+ }
+
+ textarea {
+ width: 100%;
+ }
+}
+
+@media (max-width: 600px) {
+ header h1 {
+ font-size: 1.7rem;
+ }
+
+ header h2 {
+ font-size: 0.95rem;
+ }
+}
diff --git a/Zadania/Z84 - Samochod/index.php b/Zadania/Z84 - Samochod/index.php
new file mode 100644
index 0000000..903ce00
--- /dev/null
+++ b/Zadania/Z84 - Samochod/index.php
@@ -0,0 +1,80 @@
+
+
+
+
+
+
+
+ Z84 - Samochód
+
+
+
+
+ Zadanie Z84
+ Autor: Jakub Grzegorczyk
+
+
+
Napisz program, który symuluje auto sterowane za pomocą poleceń konsoli. Program powinien posiadać następujące komendy:
+
+ Start — uruchamia auto
+ Stop — zatrzymuje auto
+ Koniec — kończy działanie programu
+ Pomoc — wyświetla pomoc z opisem poszczególnych komend
+
+
Program powinien umieć reagować na sytuacje wyjątkowe. Ponowne użycie komendy „Start” jeśli auto jest uruchomione wyświetla komunikat w stylu: „przecież już jadę ;)”. W przypadku polecenia „Stop” jeśli samochód już stoi zobaczymy komunikat w stylu „O co chodzi? Przecież stoję???”. W przypadku wydania nieznanej komendy należy wyświetlić komunikat w stylu „Nie znam tej komendy”. Program powinien działać w pętli, aż do wydania komendy „Koniec”.
+
+
+
+
+';
+ echo '';
+ switch ($a) {
+ case 'start':
+ if (!$_SESSION['$isStarted']) {
+ $_SESSION['$isStarted'] = true;
+ echo 'Samochód uruchomiony!';
+ } else { echo 'Przecież już jadę :)'; }
+ break;
+ case 'stop':
+ if ($_SESSION['$isStarted']) {
+ $_SESSION['$isStarted'] = false;
+ echo 'Samochód zatrzymany!';
+ } else { echo 'O co chodzi? Przecież stoję???';}
+ break;
+ case 'pomoc':
+ echo 'Dostępne komendy: ' .
+ 'Start - uruchamia auto ' .
+ 'Stop - zatrzymuje auto ' .
+ 'Koniec - kończy działanie programu ' .
+ 'Pomoc - wyświetla tę wiadomość';
+ break;
+ case 'koniec':
+ echo 'Zamykanie programu...';
+ session_destroy();
+ session_start();
+ $_SESSION['isStarted'] = false;
+ break;
+ default:
+ echo 'Nie znam tej komendy';
+ }
+ echo ' ';
+}
+?>
+
+
diff --git a/Zadania/Z84 - Samochod/style.css b/Zadania/Z84 - Samochod/style.css
new file mode 100644
index 0000000..271c842
--- /dev/null
+++ b/Zadania/Z84 - Samochod/style.css
@@ -0,0 +1,298 @@
+/* === UNIVERSAL SCHOOL TEMPLATE CSS (BLACK & WHITE EDITION) === */
+/* clean, modern, and copy-paste friendly for all projects */
+
+/* === RESET === */
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+/* === VARIABLES === */
+:root {
+ --accent: #000;
+ --border: #000;
+ --bg: #fff;
+ --bg-alt: #f7f7f7;
+ --text: #111;
+ --shadow: rgba(0, 0, 0, 0.15) 3px 3px 6px;
+ --radius: 1em;
+ --max-width: 1300px;
+}
+
+/* === PAGE === */
+body {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Verdana, sans-serif;
+ background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
+ color: var(--text);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-height: 100vh;
+ line-height: 1.6;
+}
+
+/* === HEADER === */
+header {
+ border: 2px solid var(--border);
+ border-radius: var(--radius);
+ padding: 20px 30px;
+ box-shadow: var(--shadow);
+ background: var(--bg);
+ width: 95%;
+ max-width: var(--max-width);
+ text-align: center;
+ margin-top: 25px;
+ transition: box-shadow 0.3s ease, transform 0.2s ease;
+}
+
+header:hover {
+ box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
+ transform: translateY(-2px);
+}
+
+header h1 {
+ font-size: 2.2rem;
+}
+
+header h2 {
+ margin-top: 0.5rem;
+ font-weight: 400;
+ font-size: 1.1rem;
+ color: #444;
+}
+
+/* === BOX === */
+.box {
+ border: 2px solid var(--border);
+ border-radius: var(--radius);
+ padding: 25px 35px;
+ margin-top: 25px;
+ background: var(--bg);
+ box-shadow: var(--shadow);
+ width: 95%;
+ max-width: var(--max-width);
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.box:hover {
+ transform: translateY(-2px);
+ box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
+}
+
+/* === TEXT ELEMENTS === */
+p {
+ margin-bottom: 1rem;
+}
+
+.box > p:last-child {
+ margin-bottom: 0;
+}
+
+h1, h2, h3, h4 {
+ margin-bottom: 0.5rem;
+ font-weight: 600;
+}
+
+a {
+ color: #000;
+ text-decoration: underline;
+ font-weight: 500;
+}
+
+a:hover {
+ opacity: 0.7;
+}
+
+/* === LISTS === */
+ul, ol {
+ margin: 1rem 0 1rem 1.5rem;
+}
+
+li {
+ margin-bottom: 0.4rem;
+}
+
+/* === TABLES === */
+table {
+ width: 100%;
+ border-collapse: collapse;
+ margin: 1rem 0;
+ background: var(--bg);
+ border: 2px solid var(--border);
+ border-radius: 0.6em;
+ overflow: hidden;
+ box-shadow: var(--shadow);
+}
+
+th, td {
+ padding: 10px 12px;
+ border-bottom: 1px solid #ccc;
+}
+
+th {
+ background: var(--bg-alt);
+ font-weight: bold;
+ text-align: left;
+}
+
+tr:hover {
+ background: #f2f2f2;
+}
+
+/* === FORMS === */
+form {
+ display: flex;
+ flex-direction: column;
+ gap: 1.4rem;
+}
+
+.box:has(> form) {
+ padding: 35px 35px;
+}
+
+fieldset {
+ border: 2px solid var(--border);
+ border-radius: 0.8em;
+ padding: 1.2rem 1.5rem;
+ background: var(--bg-alt);
+}
+
+legend {
+ font-weight: bold;
+ color: #000;
+ padding: 0 0.4rem;
+ font-size: 1.05rem;
+}
+
+label {
+ font-weight: 500;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="number"],
+input[type="tel"],
+textarea,
+select {
+ width: 100%;
+ font-size: 1rem;
+ margin-top: 6px;
+ margin-bottom: 8px;
+ border: 2px solid var(--border);
+ border-radius: 0.5em;
+ padding: 0.4rem 0.5rem;
+ transition: all 0.2s ease;
+ background: var(--bg);
+}
+
+textarea {
+ resize: vertical;
+ min-height: 100px;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+ outline: none;
+ border-color: #000;
+ box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
+ background: #f9f9f9;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+ accent-color: #000;
+ transform: scale(1.2);
+ margin-right: 0.3rem;
+}
+
+/* === BUTTONS === */
+button,
+input[type="submit"],
+input[type="button"],
+input[type="reset"] {
+ padding: 10px 20px;
+ border: 2px solid var(--border);
+ border-radius: 0.5em;
+ font-weight: bold;
+ font-size: 1rem;
+ background: linear-gradient(180deg, #fff 0%, #f2f2f2 100%);
+ cursor: pointer;
+ transition: all 0.2s ease;
+ align-self: flex-start;
+}
+
+button {
+ width: 100%;
+}
+
+button:hover,
+input[type="submit"]:hover,
+input[type="button"]:hover,
+input[type="reset"]:hover {
+ background: #eaeaea;
+ box-shadow: rgba(0, 0, 0, 0.25) 3px 3px 6px;
+ transform: translateY(-2px);
+}
+
+button:active,
+input[type="submit"]:active,
+input[type="button"]:active,
+input[type="reset"]:active {
+ transform: translateY(0);
+ box-shadow: rgba(0, 0, 0, 0.15) 1px 1px 3px;
+ background: #f7f7f7;
+}
+
+/* === HR, CODE, ETC. === */
+hr {
+ border: 0;
+ border-top: 2px solid var(--border);
+ margin: 1.5rem 0;
+}
+
+img {
+ max-width: 100%;
+ border-radius: 0.5em;
+}
+
+code, pre {
+ background: #f4f4f4;
+ border: 1px solid #ccc;
+ border-radius: 0.4em;
+ padding: 0.3em 0.5em;
+ font-family: "Courier New", monospace;
+}
+
+pre {
+ padding: 1em;
+ overflow-x: auto;
+}
+
+/* === RESPONSIVE === */
+@media (max-width: 900px) {
+ header, .box {
+ width: 95%;
+ padding: 20px;
+ }
+
+ button {
+ width: 100%;
+ }
+
+ textarea {
+ width: 100%;
+ }
+}
+
+@media (max-width: 600px) {
+ header h1 {
+ font-size: 1.7rem;
+ }
+
+ header h2 {
+ font-size: 0.95rem;
+ }
+}
diff --git a/Zadania/Z85 - n pseudolosowych/index.php b/Zadania/Z85 - n pseudolosowych/index.php
new file mode 100644
index 0000000..74817e9
--- /dev/null
+++ b/Zadania/Z85 - n pseudolosowych/index.php
@@ -0,0 +1,53 @@
+
+
+
+
+
+
+
+ Z85 - N Pseudolosowych
+
+
+
+
+ Zadanie Z85
+ Autor: Jakub Grzegorczyk
+
+
+
Napisz program, który dla trzech liczb całkowitym n, min, max wyświetla n liczb pseudolosowych z zakresu .
+
+
+
+
+';
+ if ($n > 0 && $min < $max) {
+ echo 'Wylosowane liczby: ';
+ for ($i = 0; $i < $n; $i++) {
+ echo rand($min, $max) . ', ';
+ }
+ echo ' ';
+ } else {
+ echo 'N jest mniejsze od 0 lub max jest mniejsze od min';
+ }
+ echo '';
+}
+?>
+
+
diff --git a/Zadania/Z85 - n pseudolosowych/style.css b/Zadania/Z85 - n pseudolosowych/style.css
new file mode 100644
index 0000000..271c842
--- /dev/null
+++ b/Zadania/Z85 - n pseudolosowych/style.css
@@ -0,0 +1,298 @@
+/* === UNIVERSAL SCHOOL TEMPLATE CSS (BLACK & WHITE EDITION) === */
+/* clean, modern, and copy-paste friendly for all projects */
+
+/* === RESET === */
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+/* === VARIABLES === */
+:root {
+ --accent: #000;
+ --border: #000;
+ --bg: #fff;
+ --bg-alt: #f7f7f7;
+ --text: #111;
+ --shadow: rgba(0, 0, 0, 0.15) 3px 3px 6px;
+ --radius: 1em;
+ --max-width: 1300px;
+}
+
+/* === PAGE === */
+body {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Verdana, sans-serif;
+ background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
+ color: var(--text);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-height: 100vh;
+ line-height: 1.6;
+}
+
+/* === HEADER === */
+header {
+ border: 2px solid var(--border);
+ border-radius: var(--radius);
+ padding: 20px 30px;
+ box-shadow: var(--shadow);
+ background: var(--bg);
+ width: 95%;
+ max-width: var(--max-width);
+ text-align: center;
+ margin-top: 25px;
+ transition: box-shadow 0.3s ease, transform 0.2s ease;
+}
+
+header:hover {
+ box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
+ transform: translateY(-2px);
+}
+
+header h1 {
+ font-size: 2.2rem;
+}
+
+header h2 {
+ margin-top: 0.5rem;
+ font-weight: 400;
+ font-size: 1.1rem;
+ color: #444;
+}
+
+/* === BOX === */
+.box {
+ border: 2px solid var(--border);
+ border-radius: var(--radius);
+ padding: 25px 35px;
+ margin-top: 25px;
+ background: var(--bg);
+ box-shadow: var(--shadow);
+ width: 95%;
+ max-width: var(--max-width);
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.box:hover {
+ transform: translateY(-2px);
+ box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
+}
+
+/* === TEXT ELEMENTS === */
+p {
+ margin-bottom: 1rem;
+}
+
+.box > p:last-child {
+ margin-bottom: 0;
+}
+
+h1, h2, h3, h4 {
+ margin-bottom: 0.5rem;
+ font-weight: 600;
+}
+
+a {
+ color: #000;
+ text-decoration: underline;
+ font-weight: 500;
+}
+
+a:hover {
+ opacity: 0.7;
+}
+
+/* === LISTS === */
+ul, ol {
+ margin: 1rem 0 1rem 1.5rem;
+}
+
+li {
+ margin-bottom: 0.4rem;
+}
+
+/* === TABLES === */
+table {
+ width: 100%;
+ border-collapse: collapse;
+ margin: 1rem 0;
+ background: var(--bg);
+ border: 2px solid var(--border);
+ border-radius: 0.6em;
+ overflow: hidden;
+ box-shadow: var(--shadow);
+}
+
+th, td {
+ padding: 10px 12px;
+ border-bottom: 1px solid #ccc;
+}
+
+th {
+ background: var(--bg-alt);
+ font-weight: bold;
+ text-align: left;
+}
+
+tr:hover {
+ background: #f2f2f2;
+}
+
+/* === FORMS === */
+form {
+ display: flex;
+ flex-direction: column;
+ gap: 1.4rem;
+}
+
+.box:has(> form) {
+ padding: 35px 35px;
+}
+
+fieldset {
+ border: 2px solid var(--border);
+ border-radius: 0.8em;
+ padding: 1.2rem 1.5rem;
+ background: var(--bg-alt);
+}
+
+legend {
+ font-weight: bold;
+ color: #000;
+ padding: 0 0.4rem;
+ font-size: 1.05rem;
+}
+
+label {
+ font-weight: 500;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="number"],
+input[type="tel"],
+textarea,
+select {
+ width: 100%;
+ font-size: 1rem;
+ margin-top: 6px;
+ margin-bottom: 8px;
+ border: 2px solid var(--border);
+ border-radius: 0.5em;
+ padding: 0.4rem 0.5rem;
+ transition: all 0.2s ease;
+ background: var(--bg);
+}
+
+textarea {
+ resize: vertical;
+ min-height: 100px;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+ outline: none;
+ border-color: #000;
+ box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
+ background: #f9f9f9;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+ accent-color: #000;
+ transform: scale(1.2);
+ margin-right: 0.3rem;
+}
+
+/* === BUTTONS === */
+button,
+input[type="submit"],
+input[type="button"],
+input[type="reset"] {
+ padding: 10px 20px;
+ border: 2px solid var(--border);
+ border-radius: 0.5em;
+ font-weight: bold;
+ font-size: 1rem;
+ background: linear-gradient(180deg, #fff 0%, #f2f2f2 100%);
+ cursor: pointer;
+ transition: all 0.2s ease;
+ align-self: flex-start;
+}
+
+button {
+ width: 100%;
+}
+
+button:hover,
+input[type="submit"]:hover,
+input[type="button"]:hover,
+input[type="reset"]:hover {
+ background: #eaeaea;
+ box-shadow: rgba(0, 0, 0, 0.25) 3px 3px 6px;
+ transform: translateY(-2px);
+}
+
+button:active,
+input[type="submit"]:active,
+input[type="button"]:active,
+input[type="reset"]:active {
+ transform: translateY(0);
+ box-shadow: rgba(0, 0, 0, 0.15) 1px 1px 3px;
+ background: #f7f7f7;
+}
+
+/* === HR, CODE, ETC. === */
+hr {
+ border: 0;
+ border-top: 2px solid var(--border);
+ margin: 1.5rem 0;
+}
+
+img {
+ max-width: 100%;
+ border-radius: 0.5em;
+}
+
+code, pre {
+ background: #f4f4f4;
+ border: 1px solid #ccc;
+ border-radius: 0.4em;
+ padding: 0.3em 0.5em;
+ font-family: "Courier New", monospace;
+}
+
+pre {
+ padding: 1em;
+ overflow-x: auto;
+}
+
+/* === RESPONSIVE === */
+@media (max-width: 900px) {
+ header, .box {
+ width: 95%;
+ padding: 20px;
+ }
+
+ button {
+ width: 100%;
+ }
+
+ textarea {
+ width: 100%;
+ }
+}
+
+@media (max-width: 600px) {
+ header h1 {
+ font-size: 1.7rem;
+ }
+
+ header h2 {
+ font-size: 0.95rem;
+ }
+}
diff --git a/Zadania/Z86 - potencjometr/index.php b/Zadania/Z86 - potencjometr/index.php
new file mode 100644
index 0000000..79a510f
--- /dev/null
+++ b/Zadania/Z86 - potencjometr/index.php
@@ -0,0 +1,55 @@
+
+
+
+
+
+
+
+ Z86 - Potencjometr
+
+
+
+
+ Zadanie Z86
+ Autor: Jakub Grzegorczyk
+
+
+
Napisz program, który dla podanej liczby całkowitej a losuje a liczb w zakresie <1, 9>.i wyświetla je na ekranie w postaci: liczba i liczba znaków ‘|’.
+
+Przykład a=5
+Wylosowane liczby: 5 3 6 3 1
+5|||||
+3|||
+6||||||
+3|||
+1|
+
+
+
+
+
+';
+ $arr = array();
+ for ($i = 0; $i < $a; $i++) {
+ $arr[$i] = rand(1, 9);
+ }
+ $arrString = implode(', ', $arr);
+ echo 'Wylosowane liczby: ' . $arrString . ' ';
+ for ($i = 0; $i < $a; $i++) {
+ echo "$arr[$i] " . str_repeat('| ', $arr[$i]) . ' ';
+ }
+}
+?>
+
+
diff --git a/Zadania/Z86 - potencjometr/style.css b/Zadania/Z86 - potencjometr/style.css
new file mode 100644
index 0000000..271c842
--- /dev/null
+++ b/Zadania/Z86 - potencjometr/style.css
@@ -0,0 +1,298 @@
+/* === UNIVERSAL SCHOOL TEMPLATE CSS (BLACK & WHITE EDITION) === */
+/* clean, modern, and copy-paste friendly for all projects */
+
+/* === RESET === */
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+/* === VARIABLES === */
+:root {
+ --accent: #000;
+ --border: #000;
+ --bg: #fff;
+ --bg-alt: #f7f7f7;
+ --text: #111;
+ --shadow: rgba(0, 0, 0, 0.15) 3px 3px 6px;
+ --radius: 1em;
+ --max-width: 1300px;
+}
+
+/* === PAGE === */
+body {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Verdana, sans-serif;
+ background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
+ color: var(--text);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-height: 100vh;
+ line-height: 1.6;
+}
+
+/* === HEADER === */
+header {
+ border: 2px solid var(--border);
+ border-radius: var(--radius);
+ padding: 20px 30px;
+ box-shadow: var(--shadow);
+ background: var(--bg);
+ width: 95%;
+ max-width: var(--max-width);
+ text-align: center;
+ margin-top: 25px;
+ transition: box-shadow 0.3s ease, transform 0.2s ease;
+}
+
+header:hover {
+ box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
+ transform: translateY(-2px);
+}
+
+header h1 {
+ font-size: 2.2rem;
+}
+
+header h2 {
+ margin-top: 0.5rem;
+ font-weight: 400;
+ font-size: 1.1rem;
+ color: #444;
+}
+
+/* === BOX === */
+.box {
+ border: 2px solid var(--border);
+ border-radius: var(--radius);
+ padding: 25px 35px;
+ margin-top: 25px;
+ background: var(--bg);
+ box-shadow: var(--shadow);
+ width: 95%;
+ max-width: var(--max-width);
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.box:hover {
+ transform: translateY(-2px);
+ box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
+}
+
+/* === TEXT ELEMENTS === */
+p {
+ margin-bottom: 1rem;
+}
+
+.box > p:last-child {
+ margin-bottom: 0;
+}
+
+h1, h2, h3, h4 {
+ margin-bottom: 0.5rem;
+ font-weight: 600;
+}
+
+a {
+ color: #000;
+ text-decoration: underline;
+ font-weight: 500;
+}
+
+a:hover {
+ opacity: 0.7;
+}
+
+/* === LISTS === */
+ul, ol {
+ margin: 1rem 0 1rem 1.5rem;
+}
+
+li {
+ margin-bottom: 0.4rem;
+}
+
+/* === TABLES === */
+table {
+ width: 100%;
+ border-collapse: collapse;
+ margin: 1rem 0;
+ background: var(--bg);
+ border: 2px solid var(--border);
+ border-radius: 0.6em;
+ overflow: hidden;
+ box-shadow: var(--shadow);
+}
+
+th, td {
+ padding: 10px 12px;
+ border-bottom: 1px solid #ccc;
+}
+
+th {
+ background: var(--bg-alt);
+ font-weight: bold;
+ text-align: left;
+}
+
+tr:hover {
+ background: #f2f2f2;
+}
+
+/* === FORMS === */
+form {
+ display: flex;
+ flex-direction: column;
+ gap: 1.4rem;
+}
+
+.box:has(> form) {
+ padding: 35px 35px;
+}
+
+fieldset {
+ border: 2px solid var(--border);
+ border-radius: 0.8em;
+ padding: 1.2rem 1.5rem;
+ background: var(--bg-alt);
+}
+
+legend {
+ font-weight: bold;
+ color: #000;
+ padding: 0 0.4rem;
+ font-size: 1.05rem;
+}
+
+label {
+ font-weight: 500;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="number"],
+input[type="tel"],
+textarea,
+select {
+ width: 100%;
+ font-size: 1rem;
+ margin-top: 6px;
+ margin-bottom: 8px;
+ border: 2px solid var(--border);
+ border-radius: 0.5em;
+ padding: 0.4rem 0.5rem;
+ transition: all 0.2s ease;
+ background: var(--bg);
+}
+
+textarea {
+ resize: vertical;
+ min-height: 100px;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+ outline: none;
+ border-color: #000;
+ box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
+ background: #f9f9f9;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+ accent-color: #000;
+ transform: scale(1.2);
+ margin-right: 0.3rem;
+}
+
+/* === BUTTONS === */
+button,
+input[type="submit"],
+input[type="button"],
+input[type="reset"] {
+ padding: 10px 20px;
+ border: 2px solid var(--border);
+ border-radius: 0.5em;
+ font-weight: bold;
+ font-size: 1rem;
+ background: linear-gradient(180deg, #fff 0%, #f2f2f2 100%);
+ cursor: pointer;
+ transition: all 0.2s ease;
+ align-self: flex-start;
+}
+
+button {
+ width: 100%;
+}
+
+button:hover,
+input[type="submit"]:hover,
+input[type="button"]:hover,
+input[type="reset"]:hover {
+ background: #eaeaea;
+ box-shadow: rgba(0, 0, 0, 0.25) 3px 3px 6px;
+ transform: translateY(-2px);
+}
+
+button:active,
+input[type="submit"]:active,
+input[type="button"]:active,
+input[type="reset"]:active {
+ transform: translateY(0);
+ box-shadow: rgba(0, 0, 0, 0.15) 1px 1px 3px;
+ background: #f7f7f7;
+}
+
+/* === HR, CODE, ETC. === */
+hr {
+ border: 0;
+ border-top: 2px solid var(--border);
+ margin: 1.5rem 0;
+}
+
+img {
+ max-width: 100%;
+ border-radius: 0.5em;
+}
+
+code, pre {
+ background: #f4f4f4;
+ border: 1px solid #ccc;
+ border-radius: 0.4em;
+ padding: 0.3em 0.5em;
+ font-family: "Courier New", monospace;
+}
+
+pre {
+ padding: 1em;
+ overflow-x: auto;
+}
+
+/* === RESPONSIVE === */
+@media (max-width: 900px) {
+ header, .box {
+ width: 95%;
+ padding: 20px;
+ }
+
+ button {
+ width: 100%;
+ }
+
+ textarea {
+ width: 100%;
+ }
+}
+
+@media (max-width: 600px) {
+ header h1 {
+ font-size: 1.7rem;
+ }
+
+ header h2 {
+ font-size: 0.95rem;
+ }
+}
diff --git a/Zadania/Z87 - Suma do A/index.php b/Zadania/Z87 - Suma do A/index.php
new file mode 100644
index 0000000..56ceb73
--- /dev/null
+++ b/Zadania/Z87 - Suma do A/index.php
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+
+ Z87 - Suma do A
+
+
+
+
+ Zadanie Z87
+ Autor: Jakub Grzegorczyk
+
+
+
Napisz program, który dla podanej liczby całkowitej A obliczy sumę liczb od 1 do A włącznie.
+
+
+
+
+';
+ $suma = 0;
+ for ($i = 1; $i <= $a; $i++) {
+ echo $i;
+ if ($i < $a) { echo ' + '; }
+ $suma += $i;
+ }
+ echo ' = ' . $suma . ' ';
+ echo '';
+}
+?>
+
+
diff --git a/Zadania/Z87 - Suma do A/style.css b/Zadania/Z87 - Suma do A/style.css
new file mode 100644
index 0000000..271c842
--- /dev/null
+++ b/Zadania/Z87 - Suma do A/style.css
@@ -0,0 +1,298 @@
+/* === UNIVERSAL SCHOOL TEMPLATE CSS (BLACK & WHITE EDITION) === */
+/* clean, modern, and copy-paste friendly for all projects */
+
+/* === RESET === */
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+/* === VARIABLES === */
+:root {
+ --accent: #000;
+ --border: #000;
+ --bg: #fff;
+ --bg-alt: #f7f7f7;
+ --text: #111;
+ --shadow: rgba(0, 0, 0, 0.15) 3px 3px 6px;
+ --radius: 1em;
+ --max-width: 1300px;
+}
+
+/* === PAGE === */
+body {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Verdana, sans-serif;
+ background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
+ color: var(--text);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-height: 100vh;
+ line-height: 1.6;
+}
+
+/* === HEADER === */
+header {
+ border: 2px solid var(--border);
+ border-radius: var(--radius);
+ padding: 20px 30px;
+ box-shadow: var(--shadow);
+ background: var(--bg);
+ width: 95%;
+ max-width: var(--max-width);
+ text-align: center;
+ margin-top: 25px;
+ transition: box-shadow 0.3s ease, transform 0.2s ease;
+}
+
+header:hover {
+ box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
+ transform: translateY(-2px);
+}
+
+header h1 {
+ font-size: 2.2rem;
+}
+
+header h2 {
+ margin-top: 0.5rem;
+ font-weight: 400;
+ font-size: 1.1rem;
+ color: #444;
+}
+
+/* === BOX === */
+.box {
+ border: 2px solid var(--border);
+ border-radius: var(--radius);
+ padding: 25px 35px;
+ margin-top: 25px;
+ background: var(--bg);
+ box-shadow: var(--shadow);
+ width: 95%;
+ max-width: var(--max-width);
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.box:hover {
+ transform: translateY(-2px);
+ box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
+}
+
+/* === TEXT ELEMENTS === */
+p {
+ margin-bottom: 1rem;
+}
+
+.box > p:last-child {
+ margin-bottom: 0;
+}
+
+h1, h2, h3, h4 {
+ margin-bottom: 0.5rem;
+ font-weight: 600;
+}
+
+a {
+ color: #000;
+ text-decoration: underline;
+ font-weight: 500;
+}
+
+a:hover {
+ opacity: 0.7;
+}
+
+/* === LISTS === */
+ul, ol {
+ margin: 1rem 0 1rem 1.5rem;
+}
+
+li {
+ margin-bottom: 0.4rem;
+}
+
+/* === TABLES === */
+table {
+ width: 100%;
+ border-collapse: collapse;
+ margin: 1rem 0;
+ background: var(--bg);
+ border: 2px solid var(--border);
+ border-radius: 0.6em;
+ overflow: hidden;
+ box-shadow: var(--shadow);
+}
+
+th, td {
+ padding: 10px 12px;
+ border-bottom: 1px solid #ccc;
+}
+
+th {
+ background: var(--bg-alt);
+ font-weight: bold;
+ text-align: left;
+}
+
+tr:hover {
+ background: #f2f2f2;
+}
+
+/* === FORMS === */
+form {
+ display: flex;
+ flex-direction: column;
+ gap: 1.4rem;
+}
+
+.box:has(> form) {
+ padding: 35px 35px;
+}
+
+fieldset {
+ border: 2px solid var(--border);
+ border-radius: 0.8em;
+ padding: 1.2rem 1.5rem;
+ background: var(--bg-alt);
+}
+
+legend {
+ font-weight: bold;
+ color: #000;
+ padding: 0 0.4rem;
+ font-size: 1.05rem;
+}
+
+label {
+ font-weight: 500;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="number"],
+input[type="tel"],
+textarea,
+select {
+ width: 100%;
+ font-size: 1rem;
+ margin-top: 6px;
+ margin-bottom: 8px;
+ border: 2px solid var(--border);
+ border-radius: 0.5em;
+ padding: 0.4rem 0.5rem;
+ transition: all 0.2s ease;
+ background: var(--bg);
+}
+
+textarea {
+ resize: vertical;
+ min-height: 100px;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+ outline: none;
+ border-color: #000;
+ box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
+ background: #f9f9f9;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+ accent-color: #000;
+ transform: scale(1.2);
+ margin-right: 0.3rem;
+}
+
+/* === BUTTONS === */
+button,
+input[type="submit"],
+input[type="button"],
+input[type="reset"] {
+ padding: 10px 20px;
+ border: 2px solid var(--border);
+ border-radius: 0.5em;
+ font-weight: bold;
+ font-size: 1rem;
+ background: linear-gradient(180deg, #fff 0%, #f2f2f2 100%);
+ cursor: pointer;
+ transition: all 0.2s ease;
+ align-self: flex-start;
+}
+
+button {
+ width: 100%;
+}
+
+button:hover,
+input[type="submit"]:hover,
+input[type="button"]:hover,
+input[type="reset"]:hover {
+ background: #eaeaea;
+ box-shadow: rgba(0, 0, 0, 0.25) 3px 3px 6px;
+ transform: translateY(-2px);
+}
+
+button:active,
+input[type="submit"]:active,
+input[type="button"]:active,
+input[type="reset"]:active {
+ transform: translateY(0);
+ box-shadow: rgba(0, 0, 0, 0.15) 1px 1px 3px;
+ background: #f7f7f7;
+}
+
+/* === HR, CODE, ETC. === */
+hr {
+ border: 0;
+ border-top: 2px solid var(--border);
+ margin: 1.5rem 0;
+}
+
+img {
+ max-width: 100%;
+ border-radius: 0.5em;
+}
+
+code, pre {
+ background: #f4f4f4;
+ border: 1px solid #ccc;
+ border-radius: 0.4em;
+ padding: 0.3em 0.5em;
+ font-family: "Courier New", monospace;
+}
+
+pre {
+ padding: 1em;
+ overflow-x: auto;
+}
+
+/* === RESPONSIVE === */
+@media (max-width: 900px) {
+ header, .box {
+ width: 95%;
+ padding: 20px;
+ }
+
+ button {
+ width: 100%;
+ }
+
+ textarea {
+ width: 100%;
+ }
+}
+
+@media (max-width: 600px) {
+ header h1 {
+ font-size: 1.7rem;
+ }
+
+ header h2 {
+ font-size: 0.95rem;
+ }
+}
diff --git a/Zadania/Z88 - Średnia N liczb/index.php b/Zadania/Z88 - Średnia N liczb/index.php
new file mode 100644
index 0000000..86c330d
--- /dev/null
+++ b/Zadania/Z88 - Średnia N liczb/index.php
@@ -0,0 +1,51 @@
+
+
+
+
+
+
+
+ Z88 - Średnia N liczb
+
+
+
+
+ Zadanie Z88
+ Autor: Jakub Grzegorczyk
+
+
+
Napisz program, który pyta o liczbę całkowitą N, a następnie oblicza sumę i średnią N liczb i wyświetla wynik na ekranie.
+
+
+
+
+';
+ $arr = explode(' ', $spaced_numbers);
+ $suma = 0;
+ $liczba = 0;
+ echo 'Suma liczb w tablicy: ';
+ for ($i = 0; $i < $n; $i++) {
+ $suma += (int)$arr[$i];
+ echo $arr[$i];
+ if ($i < $n - 1) { echo ' + '; }
+ }
+ echo " = $suma ";
+ echo "Średnia: " . $suma / $n . " ";
+}
+?>
+
+
diff --git a/Zadania/Z88 - Średnia N liczb/style.css b/Zadania/Z88 - Średnia N liczb/style.css
new file mode 100644
index 0000000..271c842
--- /dev/null
+++ b/Zadania/Z88 - Średnia N liczb/style.css
@@ -0,0 +1,298 @@
+/* === UNIVERSAL SCHOOL TEMPLATE CSS (BLACK & WHITE EDITION) === */
+/* clean, modern, and copy-paste friendly for all projects */
+
+/* === RESET === */
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+/* === VARIABLES === */
+:root {
+ --accent: #000;
+ --border: #000;
+ --bg: #fff;
+ --bg-alt: #f7f7f7;
+ --text: #111;
+ --shadow: rgba(0, 0, 0, 0.15) 3px 3px 6px;
+ --radius: 1em;
+ --max-width: 1300px;
+}
+
+/* === PAGE === */
+body {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Verdana, sans-serif;
+ background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
+ color: var(--text);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-height: 100vh;
+ line-height: 1.6;
+}
+
+/* === HEADER === */
+header {
+ border: 2px solid var(--border);
+ border-radius: var(--radius);
+ padding: 20px 30px;
+ box-shadow: var(--shadow);
+ background: var(--bg);
+ width: 95%;
+ max-width: var(--max-width);
+ text-align: center;
+ margin-top: 25px;
+ transition: box-shadow 0.3s ease, transform 0.2s ease;
+}
+
+header:hover {
+ box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
+ transform: translateY(-2px);
+}
+
+header h1 {
+ font-size: 2.2rem;
+}
+
+header h2 {
+ margin-top: 0.5rem;
+ font-weight: 400;
+ font-size: 1.1rem;
+ color: #444;
+}
+
+/* === BOX === */
+.box {
+ border: 2px solid var(--border);
+ border-radius: var(--radius);
+ padding: 25px 35px;
+ margin-top: 25px;
+ background: var(--bg);
+ box-shadow: var(--shadow);
+ width: 95%;
+ max-width: var(--max-width);
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.box:hover {
+ transform: translateY(-2px);
+ box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
+}
+
+/* === TEXT ELEMENTS === */
+p {
+ margin-bottom: 1rem;
+}
+
+.box > p:last-child {
+ margin-bottom: 0;
+}
+
+h1, h2, h3, h4 {
+ margin-bottom: 0.5rem;
+ font-weight: 600;
+}
+
+a {
+ color: #000;
+ text-decoration: underline;
+ font-weight: 500;
+}
+
+a:hover {
+ opacity: 0.7;
+}
+
+/* === LISTS === */
+ul, ol {
+ margin: 1rem 0 1rem 1.5rem;
+}
+
+li {
+ margin-bottom: 0.4rem;
+}
+
+/* === TABLES === */
+table {
+ width: 100%;
+ border-collapse: collapse;
+ margin: 1rem 0;
+ background: var(--bg);
+ border: 2px solid var(--border);
+ border-radius: 0.6em;
+ overflow: hidden;
+ box-shadow: var(--shadow);
+}
+
+th, td {
+ padding: 10px 12px;
+ border-bottom: 1px solid #ccc;
+}
+
+th {
+ background: var(--bg-alt);
+ font-weight: bold;
+ text-align: left;
+}
+
+tr:hover {
+ background: #f2f2f2;
+}
+
+/* === FORMS === */
+form {
+ display: flex;
+ flex-direction: column;
+ gap: 1.4rem;
+}
+
+.box:has(> form) {
+ padding: 35px 35px;
+}
+
+fieldset {
+ border: 2px solid var(--border);
+ border-radius: 0.8em;
+ padding: 1.2rem 1.5rem;
+ background: var(--bg-alt);
+}
+
+legend {
+ font-weight: bold;
+ color: #000;
+ padding: 0 0.4rem;
+ font-size: 1.05rem;
+}
+
+label {
+ font-weight: 500;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="number"],
+input[type="tel"],
+textarea,
+select {
+ width: 100%;
+ font-size: 1rem;
+ margin-top: 6px;
+ margin-bottom: 8px;
+ border: 2px solid var(--border);
+ border-radius: 0.5em;
+ padding: 0.4rem 0.5rem;
+ transition: all 0.2s ease;
+ background: var(--bg);
+}
+
+textarea {
+ resize: vertical;
+ min-height: 100px;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+ outline: none;
+ border-color: #000;
+ box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
+ background: #f9f9f9;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+ accent-color: #000;
+ transform: scale(1.2);
+ margin-right: 0.3rem;
+}
+
+/* === BUTTONS === */
+button,
+input[type="submit"],
+input[type="button"],
+input[type="reset"] {
+ padding: 10px 20px;
+ border: 2px solid var(--border);
+ border-radius: 0.5em;
+ font-weight: bold;
+ font-size: 1rem;
+ background: linear-gradient(180deg, #fff 0%, #f2f2f2 100%);
+ cursor: pointer;
+ transition: all 0.2s ease;
+ align-self: flex-start;
+}
+
+button {
+ width: 100%;
+}
+
+button:hover,
+input[type="submit"]:hover,
+input[type="button"]:hover,
+input[type="reset"]:hover {
+ background: #eaeaea;
+ box-shadow: rgba(0, 0, 0, 0.25) 3px 3px 6px;
+ transform: translateY(-2px);
+}
+
+button:active,
+input[type="submit"]:active,
+input[type="button"]:active,
+input[type="reset"]:active {
+ transform: translateY(0);
+ box-shadow: rgba(0, 0, 0, 0.15) 1px 1px 3px;
+ background: #f7f7f7;
+}
+
+/* === HR, CODE, ETC. === */
+hr {
+ border: 0;
+ border-top: 2px solid var(--border);
+ margin: 1.5rem 0;
+}
+
+img {
+ max-width: 100%;
+ border-radius: 0.5em;
+}
+
+code, pre {
+ background: #f4f4f4;
+ border: 1px solid #ccc;
+ border-radius: 0.4em;
+ padding: 0.3em 0.5em;
+ font-family: "Courier New", monospace;
+}
+
+pre {
+ padding: 1em;
+ overflow-x: auto;
+}
+
+/* === RESPONSIVE === */
+@media (max-width: 900px) {
+ header, .box {
+ width: 95%;
+ padding: 20px;
+ }
+
+ button {
+ width: 100%;
+ }
+
+ textarea {
+ width: 100%;
+ }
+}
+
+@media (max-width: 600px) {
+ header h1 {
+ font-size: 1.7rem;
+ }
+
+ header h2 {
+ font-size: 0.95rem;
+ }
+}
diff --git a/Zadania/Z89 - N Potęg dwójki/index.php b/Zadania/Z89 - N Potęg dwójki/index.php
new file mode 100644
index 0000000..d91716b
--- /dev/null
+++ b/Zadania/Z89 - N Potęg dwójki/index.php
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
+ Z89 - N potęg dwójki
+
+
+
+
+ Zadanie Z89
+ Autor: Jakub Grzegorczyk
+
+
+
Napisz program, który dla podanej liczby całkowitej N oblicza N kolejnych potęg dwójki.
+
+
+
+
+';
+ for ($i = 1; $i <= $n; $i++) {
+ echo "2$i = " . pow(2, $i) . " ";
+ }
+ echo '';
+}
+?>
+
+
diff --git a/Zadania/Z89 - N Potęg dwójki/style.css b/Zadania/Z89 - N Potęg dwójki/style.css
new file mode 100644
index 0000000..271c842
--- /dev/null
+++ b/Zadania/Z89 - N Potęg dwójki/style.css
@@ -0,0 +1,298 @@
+/* === UNIVERSAL SCHOOL TEMPLATE CSS (BLACK & WHITE EDITION) === */
+/* clean, modern, and copy-paste friendly for all projects */
+
+/* === RESET === */
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+/* === VARIABLES === */
+:root {
+ --accent: #000;
+ --border: #000;
+ --bg: #fff;
+ --bg-alt: #f7f7f7;
+ --text: #111;
+ --shadow: rgba(0, 0, 0, 0.15) 3px 3px 6px;
+ --radius: 1em;
+ --max-width: 1300px;
+}
+
+/* === PAGE === */
+body {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Verdana, sans-serif;
+ background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
+ color: var(--text);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-height: 100vh;
+ line-height: 1.6;
+}
+
+/* === HEADER === */
+header {
+ border: 2px solid var(--border);
+ border-radius: var(--radius);
+ padding: 20px 30px;
+ box-shadow: var(--shadow);
+ background: var(--bg);
+ width: 95%;
+ max-width: var(--max-width);
+ text-align: center;
+ margin-top: 25px;
+ transition: box-shadow 0.3s ease, transform 0.2s ease;
+}
+
+header:hover {
+ box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
+ transform: translateY(-2px);
+}
+
+header h1 {
+ font-size: 2.2rem;
+}
+
+header h2 {
+ margin-top: 0.5rem;
+ font-weight: 400;
+ font-size: 1.1rem;
+ color: #444;
+}
+
+/* === BOX === */
+.box {
+ border: 2px solid var(--border);
+ border-radius: var(--radius);
+ padding: 25px 35px;
+ margin-top: 25px;
+ background: var(--bg);
+ box-shadow: var(--shadow);
+ width: 95%;
+ max-width: var(--max-width);
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.box:hover {
+ transform: translateY(-2px);
+ box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
+}
+
+/* === TEXT ELEMENTS === */
+p {
+ margin-bottom: 1rem;
+}
+
+.box > p:last-child {
+ margin-bottom: 0;
+}
+
+h1, h2, h3, h4 {
+ margin-bottom: 0.5rem;
+ font-weight: 600;
+}
+
+a {
+ color: #000;
+ text-decoration: underline;
+ font-weight: 500;
+}
+
+a:hover {
+ opacity: 0.7;
+}
+
+/* === LISTS === */
+ul, ol {
+ margin: 1rem 0 1rem 1.5rem;
+}
+
+li {
+ margin-bottom: 0.4rem;
+}
+
+/* === TABLES === */
+table {
+ width: 100%;
+ border-collapse: collapse;
+ margin: 1rem 0;
+ background: var(--bg);
+ border: 2px solid var(--border);
+ border-radius: 0.6em;
+ overflow: hidden;
+ box-shadow: var(--shadow);
+}
+
+th, td {
+ padding: 10px 12px;
+ border-bottom: 1px solid #ccc;
+}
+
+th {
+ background: var(--bg-alt);
+ font-weight: bold;
+ text-align: left;
+}
+
+tr:hover {
+ background: #f2f2f2;
+}
+
+/* === FORMS === */
+form {
+ display: flex;
+ flex-direction: column;
+ gap: 1.4rem;
+}
+
+.box:has(> form) {
+ padding: 35px 35px;
+}
+
+fieldset {
+ border: 2px solid var(--border);
+ border-radius: 0.8em;
+ padding: 1.2rem 1.5rem;
+ background: var(--bg-alt);
+}
+
+legend {
+ font-weight: bold;
+ color: #000;
+ padding: 0 0.4rem;
+ font-size: 1.05rem;
+}
+
+label {
+ font-weight: 500;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="number"],
+input[type="tel"],
+textarea,
+select {
+ width: 100%;
+ font-size: 1rem;
+ margin-top: 6px;
+ margin-bottom: 8px;
+ border: 2px solid var(--border);
+ border-radius: 0.5em;
+ padding: 0.4rem 0.5rem;
+ transition: all 0.2s ease;
+ background: var(--bg);
+}
+
+textarea {
+ resize: vertical;
+ min-height: 100px;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+ outline: none;
+ border-color: #000;
+ box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
+ background: #f9f9f9;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+ accent-color: #000;
+ transform: scale(1.2);
+ margin-right: 0.3rem;
+}
+
+/* === BUTTONS === */
+button,
+input[type="submit"],
+input[type="button"],
+input[type="reset"] {
+ padding: 10px 20px;
+ border: 2px solid var(--border);
+ border-radius: 0.5em;
+ font-weight: bold;
+ font-size: 1rem;
+ background: linear-gradient(180deg, #fff 0%, #f2f2f2 100%);
+ cursor: pointer;
+ transition: all 0.2s ease;
+ align-self: flex-start;
+}
+
+button {
+ width: 100%;
+}
+
+button:hover,
+input[type="submit"]:hover,
+input[type="button"]:hover,
+input[type="reset"]:hover {
+ background: #eaeaea;
+ box-shadow: rgba(0, 0, 0, 0.25) 3px 3px 6px;
+ transform: translateY(-2px);
+}
+
+button:active,
+input[type="submit"]:active,
+input[type="button"]:active,
+input[type="reset"]:active {
+ transform: translateY(0);
+ box-shadow: rgba(0, 0, 0, 0.15) 1px 1px 3px;
+ background: #f7f7f7;
+}
+
+/* === HR, CODE, ETC. === */
+hr {
+ border: 0;
+ border-top: 2px solid var(--border);
+ margin: 1.5rem 0;
+}
+
+img {
+ max-width: 100%;
+ border-radius: 0.5em;
+}
+
+code, pre {
+ background: #f4f4f4;
+ border: 1px solid #ccc;
+ border-radius: 0.4em;
+ padding: 0.3em 0.5em;
+ font-family: "Courier New", monospace;
+}
+
+pre {
+ padding: 1em;
+ overflow-x: auto;
+}
+
+/* === RESPONSIVE === */
+@media (max-width: 900px) {
+ header, .box {
+ width: 95%;
+ padding: 20px;
+ }
+
+ button {
+ width: 100%;
+ }
+
+ textarea {
+ width: 100%;
+ }
+}
+
+@media (max-width: 600px) {
+ header h1 {
+ font-size: 1.7rem;
+ }
+
+ header h2 {
+ font-size: 0.95rem;
+ }
+}
diff --git a/Zadania/Z90 - podzielne przez K/index.php b/Zadania/Z90 - podzielne przez K/index.php
new file mode 100644
index 0000000..93fd4cc
--- /dev/null
+++ b/Zadania/Z90 - podzielne przez K/index.php
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+
+ Z90 - Podzielne przez K
+
+
+
+
+ Zadanie Z90
+ Autor: Jakub Grzegorczyk
+
+
+
Napisz program, który dla podanej wartości zmiennej n i k wyświetla wszystkie liczby z przedziału <1, n> podzielne przez k.
+
+
+
+
+';
+ $arr = array();
+ for ($i = 1; $i <= $n; $i++) {
+ if ($i % $k == 0) {$arr[] = $i;}
+ }
+ echo 'N = ' . $n . ' ';
+ echo 'K = ' . $k . ' ';
+ echo 'Liczby podzielne przez ' . $k . ' to : ' . implode(', ', $arr) . ' ';
+}
+?>
+
+
diff --git a/Zadania/Z90 - podzielne przez K/style.css b/Zadania/Z90 - podzielne przez K/style.css
new file mode 100644
index 0000000..271c842
--- /dev/null
+++ b/Zadania/Z90 - podzielne przez K/style.css
@@ -0,0 +1,298 @@
+/* === UNIVERSAL SCHOOL TEMPLATE CSS (BLACK & WHITE EDITION) === */
+/* clean, modern, and copy-paste friendly for all projects */
+
+/* === RESET === */
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+/* === VARIABLES === */
+:root {
+ --accent: #000;
+ --border: #000;
+ --bg: #fff;
+ --bg-alt: #f7f7f7;
+ --text: #111;
+ --shadow: rgba(0, 0, 0, 0.15) 3px 3px 6px;
+ --radius: 1em;
+ --max-width: 1300px;
+}
+
+/* === PAGE === */
+body {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Verdana, sans-serif;
+ background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
+ color: var(--text);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-height: 100vh;
+ line-height: 1.6;
+}
+
+/* === HEADER === */
+header {
+ border: 2px solid var(--border);
+ border-radius: var(--radius);
+ padding: 20px 30px;
+ box-shadow: var(--shadow);
+ background: var(--bg);
+ width: 95%;
+ max-width: var(--max-width);
+ text-align: center;
+ margin-top: 25px;
+ transition: box-shadow 0.3s ease, transform 0.2s ease;
+}
+
+header:hover {
+ box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
+ transform: translateY(-2px);
+}
+
+header h1 {
+ font-size: 2.2rem;
+}
+
+header h2 {
+ margin-top: 0.5rem;
+ font-weight: 400;
+ font-size: 1.1rem;
+ color: #444;
+}
+
+/* === BOX === */
+.box {
+ border: 2px solid var(--border);
+ border-radius: var(--radius);
+ padding: 25px 35px;
+ margin-top: 25px;
+ background: var(--bg);
+ box-shadow: var(--shadow);
+ width: 95%;
+ max-width: var(--max-width);
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.box:hover {
+ transform: translateY(-2px);
+ box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
+}
+
+/* === TEXT ELEMENTS === */
+p {
+ margin-bottom: 1rem;
+}
+
+.box > p:last-child {
+ margin-bottom: 0;
+}
+
+h1, h2, h3, h4 {
+ margin-bottom: 0.5rem;
+ font-weight: 600;
+}
+
+a {
+ color: #000;
+ text-decoration: underline;
+ font-weight: 500;
+}
+
+a:hover {
+ opacity: 0.7;
+}
+
+/* === LISTS === */
+ul, ol {
+ margin: 1rem 0 1rem 1.5rem;
+}
+
+li {
+ margin-bottom: 0.4rem;
+}
+
+/* === TABLES === */
+table {
+ width: 100%;
+ border-collapse: collapse;
+ margin: 1rem 0;
+ background: var(--bg);
+ border: 2px solid var(--border);
+ border-radius: 0.6em;
+ overflow: hidden;
+ box-shadow: var(--shadow);
+}
+
+th, td {
+ padding: 10px 12px;
+ border-bottom: 1px solid #ccc;
+}
+
+th {
+ background: var(--bg-alt);
+ font-weight: bold;
+ text-align: left;
+}
+
+tr:hover {
+ background: #f2f2f2;
+}
+
+/* === FORMS === */
+form {
+ display: flex;
+ flex-direction: column;
+ gap: 1.4rem;
+}
+
+.box:has(> form) {
+ padding: 35px 35px;
+}
+
+fieldset {
+ border: 2px solid var(--border);
+ border-radius: 0.8em;
+ padding: 1.2rem 1.5rem;
+ background: var(--bg-alt);
+}
+
+legend {
+ font-weight: bold;
+ color: #000;
+ padding: 0 0.4rem;
+ font-size: 1.05rem;
+}
+
+label {
+ font-weight: 500;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="number"],
+input[type="tel"],
+textarea,
+select {
+ width: 100%;
+ font-size: 1rem;
+ margin-top: 6px;
+ margin-bottom: 8px;
+ border: 2px solid var(--border);
+ border-radius: 0.5em;
+ padding: 0.4rem 0.5rem;
+ transition: all 0.2s ease;
+ background: var(--bg);
+}
+
+textarea {
+ resize: vertical;
+ min-height: 100px;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+ outline: none;
+ border-color: #000;
+ box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
+ background: #f9f9f9;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+ accent-color: #000;
+ transform: scale(1.2);
+ margin-right: 0.3rem;
+}
+
+/* === BUTTONS === */
+button,
+input[type="submit"],
+input[type="button"],
+input[type="reset"] {
+ padding: 10px 20px;
+ border: 2px solid var(--border);
+ border-radius: 0.5em;
+ font-weight: bold;
+ font-size: 1rem;
+ background: linear-gradient(180deg, #fff 0%, #f2f2f2 100%);
+ cursor: pointer;
+ transition: all 0.2s ease;
+ align-self: flex-start;
+}
+
+button {
+ width: 100%;
+}
+
+button:hover,
+input[type="submit"]:hover,
+input[type="button"]:hover,
+input[type="reset"]:hover {
+ background: #eaeaea;
+ box-shadow: rgba(0, 0, 0, 0.25) 3px 3px 6px;
+ transform: translateY(-2px);
+}
+
+button:active,
+input[type="submit"]:active,
+input[type="button"]:active,
+input[type="reset"]:active {
+ transform: translateY(0);
+ box-shadow: rgba(0, 0, 0, 0.15) 1px 1px 3px;
+ background: #f7f7f7;
+}
+
+/* === HR, CODE, ETC. === */
+hr {
+ border: 0;
+ border-top: 2px solid var(--border);
+ margin: 1.5rem 0;
+}
+
+img {
+ max-width: 100%;
+ border-radius: 0.5em;
+}
+
+code, pre {
+ background: #f4f4f4;
+ border: 1px solid #ccc;
+ border-radius: 0.4em;
+ padding: 0.3em 0.5em;
+ font-family: "Courier New", monospace;
+}
+
+pre {
+ padding: 1em;
+ overflow-x: auto;
+}
+
+/* === RESPONSIVE === */
+@media (max-width: 900px) {
+ header, .box {
+ width: 95%;
+ padding: 20px;
+ }
+
+ button {
+ width: 100%;
+ }
+
+ textarea {
+ width: 100%;
+ }
+}
+
+@media (max-width: 600px) {
+ header h1 {
+ font-size: 1.7rem;
+ }
+
+ header h2 {
+ font-size: 0.95rem;
+ }
+}