FlaskWebProject/FlaskWebProject/static/style.css

@@ -24,7 +24,7 @@
 	--polska-red: #E30B17;
 	--polska-white: #FFFFFF;
 
-	--polska-section-color: #970000;
+	--polska-section-color: #121623;
 	--section-color: #051839;
 	--pink-highlight: #E1317E;
 	--blue-highlight: #00B9BF;
@@ -95,6 +95,7 @@ body {
 	top: 0;
 }
 
+
 .profile-image img {
 	width: 100%;
 	max-width: 600px;
@@ -220,8 +221,17 @@ header button {
 }
 
 .nav-links li:nth-child(4) a::before {
+	content: "🤝";
+}
+.nav-links li:nth-child(5) a::before {
+	content: "⚽";
+}
+.nav-links li:nth-child(6) a::before {
 	content: "🏆";
 }
+.nav-links li:nth-child(7) a::before {
+	content: "🔎";
+}
 
 .nav-links li {
 	display: block;
@@ -299,6 +309,8 @@ header button {
 	{
 		margin-bottom: 400px;
 	} */
+	 
+		
 	.nav-links {
 		position: absolute;
 		flex-direction: column;
@@ -535,6 +547,7 @@ td {
 	width: 80%;
 	border-radius: var(--border-radius);
 	max-width: 1000px;
+	margin-bottom: 50px;
 }
 .section__matches h2
 {
@@ -655,16 +668,17 @@ body.poland-mode .hamburger {
 	/* 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
+	color: white;
 }
 
 body.poland-mode .stat-box {
@@ -688,8 +702,22 @@ body.poland-mode .stat-box h3 {
 	max-width: 1000px;
 	margin: 0 auto;
 	margin-bottom: 10px;
+	width: 100%;
 }
+.section-stats-center
+{
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 30px;
+	justify-content: center;
+}
+@media (max-width: 1400px) {
 	
+	.section-stats-center
+	{
+		grid-template-columns: 1fr !important;
+	}
+}
 .section-stats h2 {
 	font-size: 2rem;
 	margin-bottom: 1rem;
@@ -701,7 +729,6 @@ body.poland-mode .stat-box h3 {
 	justify-content: space-around;
 	text-align: center;
 	margin-top: 2rem;
-	flex-wrap: wrap;
 	gap: 2rem;
 }
 
@@ -729,21 +756,70 @@ body.poland-mode .stat-box h3 {
 .stat-box p {
 	font-size: 1.1rem;
 }
+.choose-club
+{
+	margin: 10px;
+	padding: 20px;
+	display: flex;
+	gap: 20px;
+	justify-content: space-around;
+}
 
 .choose-club button {
-	height: 50px;
+	width: 100px;
-	width: 50px;
-	background-color: white;
 	border: none;
+	
+	background-color:transparent;
+	border-radius: 50%;
 }
 
 .choose-club button img {
-	height: 40px;
+	width: 100%;
-	width: 40px;
+	height: 100%;
+	background-color:transparent;
+	transition: transform 100ms ease;
 }
 
 .choose-club button img:hover {
-	height: 45px;
+	transform: scale(1.3,1.3) translateY(-10px);
-	width: 45px;
+}
-	background-color: #ffffff7e;
+.club-stats h2{
+	color: var(--barca-gold);
+	text-align: center;
+	border: 5px solid var(--barca-red);
+	background-color: var(--barca-blue);
+	padding: 20px;
+	border-radius: var(--border-radius);
+}
+.stat-box
+{
+	padding: 20px;
+	background-color: var(--barca-blue);
+	display: grid;
+	grid-template-rows: 1fr 1fr;
+	text-align: center;
+}
+.stat-box-special
+{text-align: center;
+	display: block;
+	font-size: 40px;
+	color: var(--barca-gold);
+}
+.club-stats-grid
+{
+	display: grid;
+	margin-bottom: 50px;
+	gap: 10px;
+	grid-template-columns: 1fr 1fr 1fr;
+	grid-template-rows: 1fr 1fr 1fr;
+}
+select
+{
+	color: white;
+	padding: 20px;
+	margin: 10px;
+	font-size: 24px;
+	background-color: var(--barca-blue);
+	border-radius: 10px;
+	border: 2px solid white;
 }

FlaskWebProject/FlaskWebProject/templates/club.html

@@ -22,33 +22,36 @@
 {% for stats in clubs %}
   {% if stats.club == selected_club %}
     <section class="club-stats">
-      <h3>Statystyki dla {{selected_club}}</h3>
+      <h2>Statystyki dla {{selected_club}}</h2>
+      <div class="wybrany{{selected_club}}"></div>
+      <div class="club-stats-grid">
         <div class="stat-box">
-        Gole: {{ stats.goals }}
+          <p>Gole:</p> <span class="stat-box-special"> {{ stats.goals }} </span>
         </div>
         <div class="stat-box">
-        Asysty: {{ stats.assist }}
+          <p>Asysty:</p> <span class="stat-box-special"> {{ stats.assist }} </span>
         </div>
         <div class="stat-box">
-        Występy: {{ stats.goals }}
+          <p>Występy:</p> <span class="stat-box-special"> {{ stats.goals }} </span>
         </div>
         <div class="stat-box">
-        Łączny czas gry: {{ stats.goals }}
+          <p>Łączny czas gry:</p> <span class="stat-box-special"> {{ stats.goals }}</span>
         </div>
         <div class="stat-box">
-        Hat-tricki: {{ stats.goals }}
+          <p>Hat-tricki:</p> <span class="stat-box-special"> {{ stats.goals }}</span>
         </div>
         <div class="stat-box">
-        Zwycięstwa: {{ stats.goals }}
+          <p>Zwycięstwa:</p> <span class="stat-box-special"> {{ stats.goals }}</span>
         </div>
         <div class="stat-box">
-        Porażki: {{ stats.goals }}
+          <p>Porażki:</p> <span class="stat-box-special"> {{ stats.goals }}</span>
         </div>
         <div class="stat-box">
-        Żółte kartki: {{ stats.goals }}
+          <p>Żółte kartki:</p> <span class="stat-box-special"> {{ stats.goals }}</span>
         </div>
         <div class="stat-box">
-        Czerwone kartki: {{ stats.goals }}
+          <p>Czerwone kartki:</p> <span class="stat-box-special"> {{ stats.goals }}</span>
+        </div>
       </div>
     </section>
   {% endif %}

FlaskWebProject/FlaskWebProject/templates/matches.html

@@ -4,7 +4,7 @@
 
 {% block content %}
 <select>
-    <option disabled selected>Wybierz zawodnika</option>
+    <option disabled selected>Wybierz rok</option>
     <option value="{{ url_for('compare', player='Leo Messi') }}">2024/2025</option>
     <option value="{{ url_for('compare', player='Ronaldo') }}">2023/2024</option>
     <option value="{{ url_for('compare', player='Neymar') }}">2022/2023</option>

FlaskWebProject/FlaskWebProject/templates/stats.html

@@ -3,6 +3,8 @@
 {% block title %}Statystyki{% endblock %}
 
 {% block content %}
+<div class="section-stats-center">
+
 	<section class="section-stats">
 		<h2>Ogólne statystyki</h2>
 		<div class="stats">
@@ -99,5 +101,6 @@
 				<p>Czerwone</p>
 			</div>
 		</div>
+</div>
 </section>
 {% endblock %}