style poland-mode

FlaskWebProject/FlaskWebProject/static/style.css

@@ -24,8 +24,8 @@ body {
 
 /* Styl nawigacji */
 .navbar {
-  	background: linear-gradient(to right, #002147, #A50044);
-	/*background: linear-gradient(to right, #E30B17, #FFFFFF);*/
+
+	background: linear-gradient(to right,#002147,#A50044);
   	color: white;
   	padding: 1rem 1rem;
 	height: 1.5rem;
@@ -52,8 +52,7 @@ body {
   list-style: none;
 }
 
-.nav-links li a,
-.nav-links li button {
+.nav-links li a{
   background-color: rgba(255, 255, 255, 0.05);
   padding: 1rem 1.25rem; /* dopasowane do .navbar padding */
   height: 100%;
@@ -66,6 +65,10 @@ body {
   transition: 0.3s ease;
   align-items: center;
 }
+li button{
+	background-color: rgba(255, 255, 255, 0.05);
+	border: none;
+}
 
 .nav-links li a:hover,
 .nav-links li button:hover {
@@ -143,41 +146,42 @@ th, td {
 	margin: 0 auto; /* Wyśrodkowanie obrazka */
 }
 
-/* Styl dla trybu ciemnego */
-body.dark-mode {
-	background: #121212;
-	color: #e0e0e0;
+/* Styl dla trybu polskiego */
+body.poland-mode .navbar {
+	background: linear-gradient(to bottom,#bd4148,#dc1414);
 }
 
-	body.dark-mode nav {
-		background: #333;
-	}
-
-	body.dark-mode table {
-		color: #e0e0e0;
-	}
-
-	body.dark-mode h1 {
-		color: #eaeaea;
-	}
-
-	body.dark-mode header button {
-		background-color: #444;
-		color: #eaeaea;
-	}
-
-		body.dark-mode header button:hover {
-			background-color: #666;
-		}
-
-	body.dark-mode ul li {
-		background-color: #333;
-	}
-
-		body.dark-mode ul li:hover {
-			background-color: #444;
-		}
-
+body.poland-mode .logo{
+	color: var(--polska-white)
+}
+body.poland-mode .nav-links li a{
+	color: white;
+}
+body.poland-mode .nav-links li button:hover,
+body.poland-mode .nav-links li a:hover{
+	background-color: #e96161;
+	color:#220000
+}
+body.poland-mode .hamburger{
+	color: white;
+}
+@media (max-width: 768px) {
+  body.poland-mode .nav-links {
+	background-color: var(--polska-red);/*Ale oczopląs*/
+  }
+}
+body.poland-mode .section-stats{
+	background: linear-gradient(to bottom,#bd4148,#dc1414);
+}
+body.poland-mode .section-stats h2{
+	color:#220000
+}
+body.poland-mode .stat-box{
+	border-color: white;
+}
+body.poland-mode .stat-box h3{
+	color: white;
+}
 /* Przyciski i elementy */
 header button {
 	padding: 10px 15px;

FlaskWebProject/FlaskWebProject/templates/base.html

@@ -21,7 +21,7 @@
         <li><a href="/mecze">📅 Mecze</a></li>
         <li><a href="/statystyki">📊 Statystyki</a></li>
 		<li><a href="/statystyki">📊 Statystyki</a></li>
-        <!--<li><button id="theme-toggle" onclick="toggleTheme()">🌙 / 🌞</button></li>-->
+        <li><button id="theme-toggle" onclick="toggleTheme()">🌙 / 🌞</button></li>
 		</ul>
 		<div class="hamburger">☰</div>
     </nav>
@@ -44,16 +44,16 @@
 	</script>
     <script>
         function toggleTheme() {
-            const currentMode = document.body.classList.contains('dark-mode') ? 'dark' : 'light';
-            const newMode = currentMode === 'light' ? 'dark' : 'light';
-            document.body.classList.toggle('dark-mode');
+            const currentMode = document.body.classList.contains('poland-mode') ? 'poland' : 'fcb';
+            const newMode = currentMode === 'fcb' ? 'poland' : 'fcb';
+            document.body.classList.toggle('poland-mode');
             localStorage.setItem('theme', newMode);
         }
 
         window.onload = function () {
             const savedTheme = localStorage.getItem('theme');
-            if (savedTheme === 'dark') {
-                document.body.classList.add('dark-mode');
+            if (savedTheme === 'poland') {
+                document.body.classList.add('poland-mode');
             }
         }
     </script>