c

css/style.css

@@ -15,23 +15,27 @@ header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    background-color: cornflowerblue; /* Kolor tła nagłówka */
-    padding: 10px; /* Padding wewnętrzny dla lepszego wyglądu */
-    color: white; /* Kolor tekstu */
-}
-.up-button {
-    display: flex;
+    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: #A9A9A9;
+    background-color: s;
 
    
 }
@@ -45,38 +49,80 @@ header {
     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: #4CAF50;
-    color: white;
-    border: 1px solid #4CAF50;
+    background-color: #FEE715;
+    color: black;
+    font-weight: bold;
+    border: 1px solid #FEE715;
 }
 
-.up-button {
-    margin: 10px 0;
-    text-align: left;
-}
+
 
 .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 {
+    background-color: #FEE715;
+    color: color;
+    border: none;
     margin: 5px;
     padding: 10px 15px;
     font-size: 16px;
+    font-weight: bold;
     cursor: pointer;
-    background-color: #f2f2f2;
-    border: 1px solid #ccc;
     border-radius: 4px;
-    transition: background-color 0.3s, color 0.3s, border 0.3s;
+    margin-left: 12.5px;
+    user-select: none;
+    margin-top: 15px;
+    margin-left: 15px;
 }
 
-.up-button button.active {
-    background-color: #4CAF50;
-    color: white;
-    border: 1px solid #4CAF50;
+.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 */
@@ -84,17 +130,18 @@ 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%;
     border-collapse: collapse;
     margin-top: 20px;
     background-color: whitesmoke;
+    user-select: none;
 }
 
 th, td {
@@ -118,40 +165,45 @@ tr:nth-child(even) {
 
 .select-role {
     text-align: center;
+    user-select: none;
 }
 
 .select-class select {
     padding: 5px;
     font-size: 16px;
-    border: 1px solid #ccc;
+    border: 1px solid lightgray;
     border-radius: 4px;
+    user-select: none;
 }
 
 .select-role select {
     padding: 5px;
     font-size: 16px;
-    border: 1px solid #ccc;
+    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: #fafafa;
+    background-color: gray;
+    user-select: none;
 }
 
 /* Stylizacja stopki */
 footer.footer {
     width: 100%;
-    padding: 20px 0;
-    background-color: #fafafa;
-    color: #555;
+    padding: 5px 0;
+    background-color: #101820;
+    color: white;
 }
 
 .footer-container {
@@ -176,7 +228,7 @@ footer.footer {
 
 .footer-line {
     border: none;
-    border-top: 2px solid #ddd;
+    border-top: 2px solid black;
     margin: 20px 0;
     width: 100%;
 }
@@ -185,21 +237,14 @@ footer.footer {
 .footer-left p,
 .footer-right p {
     margin: 5px 0;
-    font-size: 14px;
-    color: #333;
+    font-size: 10px;
+    font-weight: bold;
+    color: whitesmoke;
+    background-color: #101820;
     
     
 }
 
-/* Stylizacja przycisków ogólna */
-button {
-    outline: none;
-}
-
-button:hover {
-    opacity: 0.8;
-}
-
 /* Stylizacja checkboxów */
 input[type="checkbox"] {
     transform: scale(1.2);
@@ -220,7 +265,7 @@ input[type="checkbox"] {
     padding: 0;
     font-family: Arial, sans-serif;
 }
-
 .lead {
     background-color: #555;
 }
+

data/criteria.json

@@ -74,7 +74,7 @@
         },
         {
             "id": 19,
-            "name": "aktywny udział w organizowaniu imprez klasowych, szkolnych, uroczystości okolicznościowych ( każdorazowo)"
+            "name": "aktywny udział w organizowaniu imprez klasowych, szkolnych, uroczystości okolicznościowych (każdorazowo)"
         },
         {
             "id": 20,
@@ -98,7 +98,7 @@
         },
         {
             "id": 25,
-            "name": "udział w akcjach charytatywnych ( każdorazowo)"
+            "name": "udział w akcjach charytatywnych (każdorazowo)"
         },
         {
             "id": 26,
@@ -170,7 +170,7 @@
         },
         {
             "id": "konkursy-olimpiady",
-            "name": "udział w konkursach, olimpiadach przedmiotowych ( każdorazowo)",
+            "name": "Udział w konkursach, olimpiadach przedmiotowych (każdorazowo)",
             "criteria_ids": [
                 4,
                 5,
@@ -185,7 +185,7 @@
         },
         {
             "id": "konkursy-szkolne",
-            "name": "udział w konkursach szkolnych (każdorazowo)",
+            "name": "Udział w konkursach szkolnych (każdorazowo)",
             "criteria_ids": [
                 13,
                 14
@@ -193,7 +193,7 @@
         },
         {
             "id": "reprezentowanie-szkoły",
-            "name": "reprezentowanie szkoły w zawodach sportowych indywidualnie i w zespole:",
+            "name": "Reprezentowanie szkoły w zawodach sportowych indywidualnie i w zespole:",
             "criteria_ids": [
                 15,
                 16,
@@ -239,7 +239,7 @@
     ],
     "roles": {
         "teacher": {
-            "name": "Teacher",
+            "name": "Nauczyciel",
             "criteria_ids": [
                 1,
                 2,
@@ -266,7 +266,7 @@
             ]
         },
         "homeroom_teacher": {
-            "name": "Homeroom Teacher",
+            "name": "Wychowawca Klasy",
             "criteria_ids": [
                 1,
                 2,
@@ -279,7 +279,7 @@
             ]
         },
         "principal": {
-            "name": "Principal",
+            "name": "Dyrektor",
             "criteria_ids": [
                 8,
                 9,
@@ -288,14 +288,14 @@
             ]
         },
         "student": {
-            "name": "Student",
+            "name": "Uczeń",
             "criteria_ids": [
                 12,
                 13
             ]
         },
         "patryk": {
-            "name": "patryk",
+            "name": "Mpabi",
             "criteria_ids": [
                 15,
                 16

index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <title>Ocena Zachowania</title>
     <link rel="stylesheet" href="css/style.css">
+    <link rel="icon" type="image/x-icon" href="ikona.png">
     <style>
         table {
             width: 100%;
@@ -19,45 +20,21 @@
         }
     </style>
 </head>
-<<<<<<< HEAD
 <body class="dark-background">
 
-    <h1 class="lead" style="font-size: 48px;"><em>Ocena Zachowania</em></h1>
-
-
-
-    <div>
-        <button onclick="showTab('criteria')">Ocena z zachowania</button>
-        <button onclick="showTab('stats')">Statystyka</button>
-        <button onclick="showTab('points')">Ustal punkty</button>
-=======
-<body>
     <header class="header-box">
         <div class="up-button">
             <button class="active" onclick="showTab('criteria')">Ocena z zachowania</button>
             <button class="active" onclick="showTab('stats')">Statystyka</button>
             <button class="active" onclick="showTab('points')">Ustal punkty</button>
->>>>>>> g/tom
         </div>
         <h1 id="header-title" class="header-title">Ocena Zachowania</h1>
-</header>
-    <div id="up-button-container" class="up-button" class="sa">
+    </header>
+    <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>
-<div id="select-role-container" class="select-role" style="display: none;">
-    <p>Wybierz rolę:</p>
-    <select id="select-role" class="select-role">
-        <!-- Opcje będą ładowane dynamicznie -->
-    </select>
-</div>
+    </div>
 
-<div id="select-class-container" class="select-class" style="display: none;">
-    <p>Wybierz klasę:</p>
-    <select class="select-class" id="select-class-select">
-        <!-- Opcje będą ładowane dynamicznie -->
-    </select>
-</div>
     <!-- Zakładka "Ustal punkty" -->
     <div id="points" class="tab">
         <h2>Ustal punkty dla kryteriów</h2>
@@ -148,61 +125,32 @@
     </div>
 
     <!-- Zakładka "Kryteria oceny zachowania" -->
-<div id="criteria" class="tab active">
+    <div id="criteria" class="tab active">
         <h2>Kryteria oceny zachowania - <span id="current-date"></span></h2>
         
-    <!-- Tabela uczniów -->
-    <table id="student-table">
-        <thead>
-            <tr>
-                <th>Imię i Nazwisko</th>
-                <!-- Dynamiczne kolumny będą generowane przez JavaScript -->
-            </tr>
-        </thead>
-        <tbody>
-            <!-- Wiersze uczniów będą generowane przez JavaScript -->
-        </tbody>
-    </table>
 
-    <div class="category-buttons">
+        <div class="select-role">
+            <p class="tag">Wybierz role:</p>
+            <select onchange="changeRole()" id="select-role" class="select-role">
+
+            </select>
+        </div>
+
+        <div class="select-class" id="select-class-container">
+            <p class="tag">Wybierz klasę:</p>
+            <select class="select-class" id="select-class-select">
+                <!-- Opcje będą ładowane dynamicznie -->
+            </select>
+        </div>
+
+        <div class="category-buttons" id="category-buttons-box">
             <button data-category="frekwencja" onclick="showInnerTab('frekwencja')">Frekwencja</button>
             <button data-category="olimpiady" onclick="showInnerTab('olimpiady')">Olimpiady</button>
             <button data-category="konkursy" onclick="showInnerTab('konkursy')">Konkursy Szkolne</button>
             <button data-category="reprezentacja" onclick="showInnerTab('reprezentacja')">Reprezentacja Szkoły</button>
             <button data-category="aktywnosc" onclick="showInnerTab('aktywnosc')">Aktywność</button>
         </div>
-</div>
 
-<!-- Zakładka "Statystyka" -->
-<div id="stats" class="tab">
-    <h2>Statystyka dla wszystkich dni</h2>
-    <div id="stats-output"></div>
-</div>
-
-<!-- Zakładka "Ustal punkty" -->
-<div id="points" class="tab">
-    <h2>Ustal punkty dla kryteriów</h2>
-    <table>
-        <thead>
-            <tr>
-                <th>Kryterium</th>
-                <th>Punkty</th>
-            </tr>
-        </thead>
-        <tbody>
-            <!-- Wiersze dla wszystkich kryteriów -->
-            <tr>
-                <td>Frekwencja 95-100%</td>
-                <td><input type="number" id="frekwencja-punkty" value="30" onchange="calculateStats()"></td>
-            </tr>
-            <tr>
-                <td>Brak godzin nieusprawiedliwionych</td>
-                <td><input type="number" id="brak_godzin-punkty" value="20" onchange="calculateStats()"></td>
-            </tr>
-            <!-- Dodaj pozostałe wiersze kryteriów tutaj -->
-        </tbody>
-    </table>
-</div>
         <!-- Tabela uczniów -->
         <table id="student-table">
             <thead>
@@ -232,7 +180,8 @@
                 <p>F. Kowalski</p>
                 <p>S. Ptak</p>
                 <p>B. Bohdan</p>
-                <p>P. Maciejeski</p>
+                <P>T. Zadworny</P>
+                <p>J. Tocziew</p>
             </div>
             <div class="footer-right">
                 <p>M. Pabiszczak</p>