guziki

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;
+}
+

css/style.css

@@ -63,7 +63,7 @@ header {
 
 
 .up-button button {
-    background:  #FEE715;
+    background:  #0c0c0c;
     color: black;
     padding: 10px 15px;
     font-size: 16px;

index.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <title>Ocena Zachowania</title>
-    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="css/styl.css">
     <link rel="icon" type="image/x-icon" href="ikona.png">
     <style>
         table {
@@ -146,7 +146,7 @@
 
     <!-- Zakładka "Kryteria oceny zachowania" -->
     <div id="criteria" class="tab active">
-        <h2>Kryteria oceny zachowania - <span id="current-date"></span></h2>
+        <h2 id="clear">Kryteria oceny zachowania - <span id="current-date"></span></h2>
         
 
         <div class="select-role">
@@ -196,7 +196,7 @@
             <div class="footer-left">
                 <p>B. Hrynowiecki</p>
                 <p>K. Michalak</p>
-                <p>J. Kukiela Z miłością wpisany na listę</p>
+                <p>J. Kukiela</p>
                 <p>A. Guzik</p>
                 <p>F. Kowalski</p>
                 <p>S. Ptak</p>