From 52fb67d125bf6432608c54b2126c45d574036f53 Mon Sep 17 00:00:00 2001 From: Tomasz Date: Fri, 18 Oct 2024 12:15:36 +0200 Subject: [PATCH 1/2] dodanie przesuwania nakglowak tabelki --- css/style.css | 7 +++++++ index.html | 16 +++++++++++++++- js/script.js | 11 +++++++++++ 3 files changed, 33 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index 6d73449..79d582b 100644 --- a/css/style.css +++ b/css/style.css @@ -143,3 +143,10 @@ 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 */ +} diff --git a/index.html b/index.html index c96e590..fc04c6c 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,23 @@ Ocena Zachowania + - +

Ocena Zachowania

diff --git a/js/script.js b/js/script.js index 7daeaee..c8d716d 100644 --- a/js/script.js +++ b/js/script.js @@ -358,3 +358,14 @@ function generateTable(category) { tbody.appendChild(row); }); } + +//window.onscroll = function() { + // const stickyElements = document.querySelectorAll('.sticky'); + //stickyElements.forEach(element => { + // if (window.pageYOffset > element.offsetTop) { + // element.classList.add('active'); + // } else { + // element.classList.remove('active'); + //} + //}); +//}; From d3d04b837bef7964f8323225ebeac6296af8e7b5 Mon Sep 17 00:00:00 2001 From: Tomasz Date: Fri, 18 Oct 2024 13:35:03 +0200 Subject: [PATCH 2/2] zabawa kolorki i kilka funkcji --- css/style.css | 30 +++++++++++++++++++++++++----- index.html | 31 ++++++++++++++++++------------- 2 files changed, 43 insertions(+), 18 deletions(-) diff --git a/css/style.css b/css/style.css index 79d582b..abd2cde 100644 --- a/css/style.css +++ b/css/style.css @@ -11,6 +11,9 @@ .category-buttons { margin: 10px 0; text-align: center; + background-color: #A9A9A9; + + } .category-buttons button { @@ -18,10 +21,12 @@ padding: 10px 15px; font-size: 16px; cursor: pointer; - background-color: #f2f2f2; - border: 1px solid #ccc; + background-color: lightgray; + border: 1px solid black; border-radius: 4px; transition: background-color 0.3s, color 0.3s, border 0.3s; + + } .category-buttons button.active { @@ -35,20 +40,21 @@ table { width: 100%; border-collapse: collapse; margin-top: 20px; + background-color: whitesmoke; } th, td { - border: 1px solid #ddd; + border: 1px solid grey; padding: 8px; text-align: center; } th { - background-color: #f2f2f2; + background-color: whitesmoke; } tr:nth-child(even) { - background-color: #f9f9f9; + background-color: whitesmoke; } /* Stylizacja kontenera klasy */ @@ -127,6 +133,8 @@ footer.footer { margin: 5px 0; font-size: 14px; color: #333; + + } /* Stylizacja przycisków ogólna */ @@ -150,3 +158,15 @@ input[type="checkbox"] { 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: #ffffff; /* Jasny kolor tekstu dla lepszej czytelności */ + margin: 0; + padding: 0; + font-family: Arial, sans-serif; +} + +.lead { + background-color: #555; +} \ No newline at end of file diff --git a/index.html b/index.html index 96d34dd..94b3f7c 100644 --- a/index.html +++ b/index.html @@ -12,16 +12,18 @@ th { position: sticky; top: 0; - background-color: beige; /* Kolor tła nagłówka */ + background-color: lightgray; /* Kolor tła nagłówka */ z-index: 10; /* Zapewnia, że nagłówek będzie nad innymi elementami */ border: 1px solid #ddd; /* Opcjonalnie: Dodanie obramowania */ padding: 8px; } - + -

Ocena Zachowania

+

Ocena Zachowania

+ +
@@ -168,17 +170,20 @@
-
- + - -
+
+ + +