diff --git a/css/styl.css b/css/styl.css
new file mode 100644
index 0000000..5ca4639
--- /dev/null
+++ b/css/styl.css
@@ -0,0 +1,275 @@
+/* Podstawowe style dla zakładek */
+.tab {
+ display: none;
+}
+
+.tab.active {
+ display: block;
+}
+header {
+ display: flex;
+ justify-content: space-between;
+ align-items: right;
+}
+.header-box {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background-color: #101820; /* Kolor tła nagłówka */
+ padding: px; /* Padding wewnętrzny dla lepszego wyglądu */
+ color: whitesmoke; /* Kolor tekstu */
+ padding-bottom: 10px;
+ padding-top: 10px;
+ border-radius: 2px;
+}
+
+.header-title {
+ margin-left: auto; /* Przesuwa tytuł na prawo */
+ user-select: none;
+ margin-right: 25px;
+ margin-top: 0px;
+ margin-bottom: 0px;
+}
+
+/* Style dla przycisków kategorii */
+.category-buttons {
+ margin: 10px 0;
+ text-align: center;
+ background-color: s;
+
+
+}
+
+.category-buttons button {
+ margin: 5px;
+ padding: 10px 15px;
+ font-size: 16px;
+ cursor: pointer;
+ background-color: lightgray;
+ border: 1px solid black;
+ border-radius: 4px;
+ transition: background-color 0.3s, color 0.3s, border 0.3s;
+ user-select: none;
+ font-weight: bold;
+}
+
+.category-buttons button.active {
+ background-color: #FEE715;
+ color: black;
+ font-weight: bold;
+ border: 10px solid #FEE715;
+}
+
+
+
+.up-button button {
+ background: #FEE715;
+ color: black;
+ padding: 10px 15px;
+ font-size: 16px;
+ font-weight: bold;
+ cursor: pointer;
+ border-radius: 4px;
+ text-align: left;
+ user-select: none;
+ margin-left: 15px;
+ display: inline-block;
+ outline: 0;
+ border: 0;
+ box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 0px 0px, rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset;
+}
+
+
+
+.up-button button:hover {
+ opacity: 0.8;
+ transition: 0.4s;
+
+}
+
+.up-button button:active {
+ opacity: 0.4;
+}
+
+.button1 button {
+ float: right;
+ background-color: #dbdbdb;
+ color: color;
+ border: none;
+ margin: 5px;
+ padding: 10px 15px;
+ font-size: 16px;
+ font-weight: bold;
+ cursor: pointer;
+ border-radius: 4px;
+ margin-left: 12.5px;
+ user-select: none;
+ margin-top: 15px;
+ margin-left: 15px;
+}
+
+#clear {
+ clear: both;
+}
+
+.button1 button:hover {
+ opacity: 0.8;
+ transition: 0.2s;
+}
+
+.button1 button:active {
+ opacity: 0.5;
+}
+
+.tag {
+ color: white;
+ user-select: none;
+}
+
+.container {
+ display: flex;
+ flex-direction: column; /* Elementy jeden pod drugim */
+ align-items: flex-start; /* Ustawia elementy po lewej stronie */
+ margin-left: 20px; /* Możesz dostosować margines według potrzeb */
+}
+
+.select-class {
+ margin: 10px 0; /* Dostosuj odstęp między elementami */
+}
+
+
+/* Stylizacja tabeli */
+table {
+ clear: both;
+ width: 100%;
+ border-collapse: collapse;
+ margin-top: 20px;
+ background-color: whitesmoke;
+ user-select: none;
+}
+
+th, td {
+ border: 1px solid grey;
+ padding: 8px;
+ text-align: center;
+}
+
+th {
+ background-color: whitesmoke;
+}
+
+tr:nth-child(even) {
+ background-color: whitesmoke;
+}
+
+/* Stylizacja kontenera klasy */
+.select-class {
+ text-align: center;
+}
+
+.select-role {
+ text-align: center;
+ user-select: none;
+}
+
+.select-class select {
+ padding: 5px;
+ font-size: 16px;
+ border: 1px solid lightgray;
+ border-radius: 4px;
+ user-select: none;
+}
+
+.select-role select {
+ padding: 5px;
+ font-size: 16px;
+ border: 1px solid lightgray;
+ border-radius: 4px;
+}
+
+/* Stylizacja nagłówków */
+h1, h2, h3 {
+ text-align: center;
+ color: whitesmoke;
+ user-select: none;
+}
+
+/* Dodatkowe style dla układu */
+body {
+ font-family: Arial, sans-serif;
+ margin: 20px;
+ background-color: gray;
+ user-select: none;
+}
+
+/* Stylizacja stopki */
+footer.footer {
+ width: 100%;
+ padding: 5px 0;
+ background-color: #101820;
+ color: white;
+}
+
+.footer-container {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+}
+
+.footer-left, .footer-right {
+ width: 100%;
+}
+
+.footer-left {
+ text-align: left;
+}
+
+.footer-right {
+ text-align: right;
+}
+
+.footer-line {
+ border: none;
+ border-top: 2px solid black;
+ margin: 20px 0;
+ width: 100%;
+}
+
+/* Dodatkowe style dla estetyki */
+.footer-left p,
+.footer-right p {
+ margin: 5px 0;
+ font-size: 10px;
+ font-weight: bold;
+ color: whitesmoke;
+ background-color: #101820;
+
+
+}
+
+/* Stylizacja checkboxów */
+input[type="checkbox"] {
+ transform: scale(1.2);
+ cursor: pointer;
+}
+.sticky {
+ position: sticky;
+ top: 0;
+ background-color: white; /* lub inny kolor, aby tło było widoczne */
+ z-index: 1000; /* zapewnia, że będzie na wierzchu */
+ border-bottom: 1px solid #ccc; /* opcjonalnie, aby oddzielić od treści */
+}
+
+.dark-background {
+ background-color: #2e2e2e; /* Ciemnoszare tło */
+ color: black; /* Jasny kolor tekstu dla lepszej czytelności */
+ margin: 0;
+ padding: 0;
+ font-family: Arial, sans-serif;
+}
+.lead {
+ background-color: #555;
+}
+
diff --git a/css/style.css b/css/style.css
index 145cfff..0e06f3b 100644
--- a/css/style.css
+++ b/css/style.css
@@ -63,7 +63,7 @@ header {
.up-button button {
- background: #FEE715;
+ background: #0c0c0c;
color: black;
padding: 10px 15px;
font-size: 16px;
diff --git a/index.html b/index.html
index ff65835..10515d5 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
Ocena Zachowania
-
+