c2023
/
p22.10
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

zabawa kolorki i kilka funkcji

This commit is contained in:
Tomasz 2024-10-18 13:35:03 +02:00
parent 7e0dcc5287
commit d3d04b837b
2 changed files with 43 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
css/style.css
View File

@ -11,6 +11,9 @@
.category-buttons { .category-buttons {
margin: 10px 0; margin: 10px 0;
text-align: center; text-align: center;
background-color: #A9A9A9;
} }
.category-buttons button { .category-buttons button {
@ -18,10 +21,12 @@
padding: 10px 15px; padding: 10px 15px;
font-size: 16px; font-size: 16px;
cursor: pointer; cursor: pointer;
background-color: #f2f2f2; background-color: lightgray;
border: 1px solid #ccc; border: 1px solid black;
border-radius: 4px; border-radius: 4px;
transition: background-color 0.3s, color 0.3s, border 0.3s; transition: background-color 0.3s, color 0.3s, border 0.3s;
} }
.category-buttons button.active { .category-buttons button.active {
@ -35,20 +40,21 @@ table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
margin-top: 20px; margin-top: 20px;
background-color: whitesmoke;
} }
th, td { th, td {
border: 1px solid #ddd; border: 1px solid grey;
padding: 8px; padding: 8px;
text-align: center; text-align: center;
} }
th { th {
background-color: #f2f2f2; background-color: whitesmoke;
} }
tr:nth-child(even) { tr:nth-child(even) {
background-color: #f9f9f9; background-color: whitesmoke;
} }
/* Stylizacja kontenera klasy */ /* Stylizacja kontenera klasy */
@ -127,6 +133,8 @@ footer.footer {
margin: 5px 0; margin: 5px 0;
font-size: 14px; font-size: 14px;
color: #333; color: #333;
} }
/* Stylizacja przycisków ogólna */ /* Stylizacja przycisków ogólna */
@ -150,3 +158,15 @@ input[type="checkbox"] {
z-index: 1000; /* zapewnia, że będzie na wierzchu */ z-index: 1000; /* zapewnia, że będzie na wierzchu */
border-bottom: 1px solid #ccc; /* opcjonalnie, aby oddzielić od treści */ 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;
}

31
index.html
View File

@ -12,16 +12,18 @@
th { th {
position: sticky; position: sticky;
top: 0; 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 */ z-index: 10; /* Zapewnia, że nagłówek będzie nad innymi elementami */
border: 1px solid #ddd; /* Opcjonalnie: Dodanie obramowania */ border: 1px solid #ddd; /* Opcjonalnie: Dodanie obramowania */
padding: 8px; padding: 8px;
} }
</style> </style>
</head> </head>
<body> <body class="dark-background">
<h1>Ocena Zachowania</h1> <h1 class="lead" style="font-size: 48px;"><em>Ocena Zachowania</em></h1>
<div> <div>
<button onclick="showTab('criteria')">Ocena z zachowania</button> <button onclick="showTab('criteria')">Ocena z zachowania</button>
@ -168,17 +170,20 @@
<div id="stats-output"></div> <div id="stats-output"></div>
</div> </div>
<footer class="footer">
<div class="footer-left">
<p>B. Hrynowiecki</p>
<p>K. Michalak</p>
<p>F. Kowalski</p>
</div>
<hr class="footer-line"> <hr class="footer-line">
<div class="footer-right"> <footer class="footer">
<p>Led and Authored by M. Pabiszczak</p> <div class="footer-left">
</div> <p>B. Hrynowiecki</p>
</footer> <p>K. Michalak</p>
<p>F. Kowalski</p>
<p>S. Ptak</p>
<p>M. Marszalik</p>
</div>
<div class="footer-right">
<p>M. Pabiszczak</p>
</div>
</footer>
<!-- Przeniesienie skryptu na koniec body --> <!-- Przeniesienie skryptu na koniec body -->
<script src="js/script.js"></script> <script src="js/script.js"></script>