kolejne zmiany

css/style.css

@@ -15,24 +15,27 @@ header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    background-color: darkgrey; /* Kolor tła nagłówka */
+    background-color:  #101820; /* Kolor tła nagłówka */
-    padding: 10px; /* Padding wewnętrzny dla lepszego wyglądu */
+    padding: px; /* Padding wewnętrzny dla lepszego wyglądu */
     color: whitesmoke; /* Kolor tekstu */
-}
+    padding-bottom: 10px;
-.up-button {
+    padding-top: 10px;
-    display: flex;
+    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: #A9A9A9;
+    background-color: s;
 
    
 }
@@ -47,31 +50,37 @@ header {
     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: seagreen;
+    background-color: #FEE715;
-    color: white;
+    color: black;
-    border: 1px solid seagreen;
+    font-weight: bold;
+    border: 1px solid #FEE715;
 }
 
-.up-button {
+
-    margin: 10px 0;
-    text-align: left;
-    user-select: none;
-}
 
 .up-button button {
-    background-color: seagreen;
+    background:  #FEE715;
-    color: white;
+    color: black;
-    border: 1px solid seagreen;
-    margin: 5px;
     padding: 10px 15px;
     font-size: 16px;
+    font-weight: bold;
     cursor: pointer;
-    border-radius: 10px;
+    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.9;
     transition: 0.4s;
@@ -82,6 +91,26 @@ header {
     opacity: 0.4;
 }
 
+.button1 button {
+    background-color: #FEE715;
+    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;
+}
+
+.button1 button:active {
+    opacity: 0.7;
+}
+
 .tag {
     color: white;
     user-select: none;
@@ -96,11 +125,11 @@ header {
     margin-left: 20px; /* Możesz dostosować margines według potrzeb */
 }
 
-.select-role,
 .select-class {
     margin: 10px 0; /* Dostosuj odstęp między elementami */
 }
 
+
 /* Stylizacja tabeli */
 table {
     width: 100%;
@@ -161,14 +190,15 @@ body {
     font-family: Arial, sans-serif;
     margin: 20px;
     background-color: gray;
+    user-select: none;
 }
 
 /* Stylizacja stopki */
 footer.footer {
     width: 100%;
-    padding: 20px 0;
+    padding: 5px 0;
-    background-color: whitesmoke;
+    background-color: #101820;
-    color: black;
+    color: white;
 }
 
 .footer-container {
@@ -202,9 +232,10 @@ footer.footer {
 .footer-left p,
 .footer-right p {
     margin: 5px 0;
-    font-size: 14px;
+    font-size: 10px;
-    color: black;
+    font-weight: bold;
-    background-color: whitesmoke;
+    color: whitesmoke;
+    background-color: #101820;
     
     
 }

index.html

@@ -33,7 +33,7 @@
         </div>
         <h1 id="header-title" class="header-title">Ocena Zachowania</h1>
     </header>
-    <div id="up-button-container" class="up-button" class="sa">
+    <div id="up-button-container" class="button1" class="sa">
         <button class="active" onclick="changeDay(-1)">Poprzedni Dzień</button>
         <button class="active" onclick="changeDay(1)">Następny Dzień</button>
     </div>