roberteam/lewangoalski
6
2
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

header style and font changes

Browse Source
This commit is contained in:
Maciej Bik
2025-06-03 02:01:19 +02:00
parent 4987dc4cf7
commit bc557b35af
5 changed files with 472 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
FlaskWebProject/FlaskWebProject/static/fonts/Exo2-ExtraBold.ttf Normal file
View File

Binary file not shown.

BIN
FlaskWebProject/FlaskWebProject/static/fonts/Exo2-SemiBold.ttf Normal file
View File

Binary file not shown.

BIN
FlaskWebProject/FlaskWebProject/static/lewandowski_no_bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 351 KiB

589
FlaskWebProject/FlaskWebProject/static/style.css
View File

@@ -1,127 +1,342 @@
* {
box-sizing: border-box;
}
@font-face {
font-family: 'Exo2SemiBold';
src: url('fonts/Exo2-SemiBold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Exo2ExtraBold';
src: url('fonts/Exo2-ExtraBold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
:root {
--barca-blue: #002147;
--barca-red: #A50044;
--barca-gold: #FDB913;
--barca-blue: #002147;
--barca-red: #A50044;
--barca-gold: #FDB913;
--polska-red-dark: #DC143C;
--polska-red: #E30B17;
--polska-white: #FFFFFF;
--polska-red: #E30B17;
--polska-white: #FFFFFF;
--polska-section-color: #05204A;
--section-color: #051839;
--pink-highlight: #E1317E;
--blue-highlight: #00B9BF;
--yellow-highlight: #FFD23F;
--border-radius: 5px;
}
/* Podstawowy styl */
body {
font-family: 'Segoe UI', sans-serif;
font-family: 'Exo2ExtraBold', sans-serif;
margin: 0;
padding: 0;
background: white;
color: #222;
background: linear-gradient(red, white,90deg);
color: black;
transition: all 0s ease;
display: flex;
flex-direction: column;
align-items: stretch; /* Wyśrodkowanie elementów w poziomie */
justify-content: flex-start; /* Ustalamy początek na górze */
align-items: stretch;
/* Wyśrodkowanie elementów w poziomie */
justify-content: flex-start;
/* Ustalamy początek na górze */
min-height: 100vh;
}
/* Header */
.header-content {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 20px 0;
background: var(--section-color);
color: white;
font-size: 15px;
margin: 0 0 20px 0;
z-index: -2;
position: relative;
box-shadow: inset 0px -5px 10px 2px rgba(0, 0, 0, 0.347);
}
.header-content h1
{
border-bottom: 10px solid var(--barca-red);
border-radius: 10px;
padding: 5px;
animation: header-content 1000ms ease;
}
.header-content-special
{
font-size: 50px;
color: var(--barca-gold);
}
.profile-image {
width: 40%;
padding: 20px;
position: relative;
}
.profile-image-cover
{
background: linear-gradient(185deg,transparent 40% 60%, var(--section-color) 85%, var(--section-color) 90% );
position: absolute;
width: 100%;
height: 100%;
left: 0;
top:0;
}
.profile-image img
{
width: 100%;
animation: header-content 300ms ease;
background: linear-gradient(90deg,var(--barca-blue) 50%,var(--barca-red) 50% 100%);
border-radius: var(--border-radius);
}
@keyframes header-content {
0%
{
opacity: 00%;
}
100%
{
opacity: 100%;
}
}
header button {
border: none;
font-size: 16px;
cursor: pointer;
width: 100%;
height: 100%;
border-radius: var(--border-radius);
}
/* Styl nawigacji */
.navbar {
background: linear-gradient(to right,#002147,#A50044);
color: white;
padding: 1rem 1rem;
padding: 2.3rem 1rem;
height: 1.5rem;
position: sticky;
top: 0;
left: 0;
width: 100% - 2rem;
width: 100%;
z-index: 999;
display: flex;
justify-content: space-between;
justify-content: space-around;
align-items: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.logo {
font-size: 1.5rem;
font-weight: bold;
color: var(--barca-gold);
.navbar ul {
display: flex;
align-items: center;
}
.logo
{
display: flex;
align-items: center;
}
.logo-text {
font-size: 1.5rem;
font-weight: bold;
color: var(--barca-gold);
}
.logo-icon
{
font-size: 2.8em;
}
.logo-link
{
text-decoration: none;
}
.nav-links {
display: flex;
gap: 0rem;
list-style: none;
display: flex;
gap: 0rem;
list-style: none;
height: 100%;
}
.nav-links li a{
background-color: rgba(255, 255, 255, 0.05);
padding: 1rem 1.25rem; /* dopasowane do .navbar padding */
height: 100%;
border-radius: 0;
color: var(--barca-gold);
text-decoration: none;
font-weight: 500;
border: none;
cursor: pointer;
transition: 0.3s ease;
align-items: center;
.nav-links li a {
display: block;
color: white;
/* dopasowane do .navbar padding */
font-weight: 500;
border: none;
cursor: pointer;
align-items: center;
text-decoration: none;
border-radius: var(--border-radius);
padding: 10px 20px;
height: 100%;
transition: 100ms ease;
position: relative;
}
li button{
background-color: rgba(255, 255, 255, 0.05);
.nav-links li a::before{
display: flex;
justify-content: center;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0%;
font-size: 25px;
transition: 100ms ease;
}
.nav-links li:hover a::before
{
opacity: 100%;
transform: translateY(-20px);
}
.nav-links li:nth-child(1) a::before
{
content: "🏠";
}
.nav-links li:nth-child(2) a::before
{
content: "📅";
}
.nav-links li:nth-child(3) a::before
{
content: "📊";
}
.nav-links li:nth-child(4) a::before
{
content: "🏆";
}
.nav-links li
{
display: block;
}
.nav-links li:has(button)
{
padding: 20px;
}
.nav-links li button {
width: 1.5em;
height: 1.5em;
padding: 20px;
font-size: 30px;
border-radius: 50%;
padding: 0;
margin: 0;
background-color: var(--bg-color);
border: none;
}
.nav-links li button
{
background-color: var(--barca-blue);
position: relative;
overflow: hidden;
box-shadow: 0px 0px 6px 1px #FDB913;
transition: 100ms ease;
}
.nav-links li button:hover
{
transform: scale(1.1,1.1);
}
.nav-links li button::after
{
content: "";
display: block;
position: absolute;
top: 0;
right: -1px;
background-color: var(--barca-red);
width: 50%;
height: 100%;
}
.nav-links li button::before
{
content: "";
background: url('FC_Barcelona.png');
background-size:contain;
z-index: 1;
display: block;
position: absolute;
top: 5px;
left: 5px;
width: 80%;
height: 80%;
}
.nav-links li a:hover,
.nav-links li button:hover {
background-color: var(--barca-gold, #FDB913);
color: var(--barca-blue, #002147);
.nav-links a:hover {
background-color: var(--barca-gold, #FDB913);
color: var(--barca-blue, #002147);
}
.hamburger {
display: none;
font-size: 2rem;
color: var(--barca-gold);
cursor: pointer;
display: none;
font-size: 2rem;
color: var(--barca-gold);
cursor: pointer;
}
@media (max-width: 768px) {
.nav-links {
display: none;
flex-direction: column;
background-color: #002147;
position: absolute;
top: 2.5rem;
right: 0rem;
padding: 0rem;
gap: 0;
width: 200px;
}
.nav-links li {
width: 100%;
.nav-links {
display: none;
flex-direction: column;
background-color: var(--barca-blue);
position: absolute;
top: 2.5rem;
right: 0rem;
padding: 0rem;
gap: 0;
width: 200px;
}
.nav-links li {
width: 100%;
}
.nav-links li a,
.nav-links li button {
display: block;
width: 100%;
text-align: left;
padding: 1rem;
margin: 0;
border-radius: 0;
/* brak zaokrągleń w mobilnym menu */
}
.nav-links.show {
display: flex;
}
.hamburger {
display: block;
}
}
.nav-links li a,
.nav-links li button {
display: block;
width: 100%;
text-align: left;
padding: 1rem;
margin: 0;
border-radius: 0; /* brak zaokrągleń w mobilnym menu */
}
.nav-links.show {
display: flex;
}
.hamburger {
display: block;
}
}
/* Wyśrodkowanie głównej zawartości */
main {
padding: 0px; /* Maksymalna szerokość treści */
text-align: center; /* Wyśrodkowanie tekstu */
padding: 0px;
/* Maksymalna szerokość treści */
text-align: center;
/* Wyśrodkowanie tekstu */
}
/* Styl dla tabeli */
@@ -131,7 +346,8 @@ table {
margin-top: 20px;
}
th, td {
th,
td {
padding: 10px;
border-bottom: 1px solid #ccc;
text-align: center;
@@ -143,116 +359,183 @@ th, td {
height: 100px;
border-radius: 50%;
display: block;
margin: 0 auto; /* Wyśrodkowanie obrazka */
margin: 0 auto;
/* Wyśrodkowanie obrazka */
}
/* Styl dla trybu polskiego */
body.poland-mode .navbar {
background: linear-gradient(to bottom,#bd4148,#dc1414);
background: linear-gradient(to bottom, #bd4148, #dc1414);
}
body.poland-mode .logo{
body.poland-mode .logo {
color: var(--polska-white)
}
body.poland-mode .nav-links li a{
body.poland-mode .logo-text
{
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;
border: none;
background-color: #007bff;
color: white;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s;
}
header button:hover {
background-color: #0056b3;
body.poland-mode .nav-links li a {
color: white;
}
body.poland-mode .nav-links li a:hover {
color: #220000;
background-color: white;
}
body.poland-mode .nav-links li button::before
{
background: none;
}
body.poland-mode .nav-links li button
{
background-color: red;
box-shadow: 0px 0px 6px 5px rgba(109, 0, 0, 0.219);
position: relative;
overflow: hidden;
}
body.poland-mode .nav-links li button::after
{
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
background-color: white;
width: 100%;
height: 50%;
}
body.poland-mode .profile-image img
{
width: 100%;
animation: header-content 300ms ease;
background: linear-gradient(rgba(255, 255, 255, 0.534) 50%,rgba(255, 0, 0, 0.551) 50% 100%);
border-radius: var(--border-radius);
}
body.poland-mode .header-content-special
{
font-size: 50px;
color: red;
}
body.poland-mode .header-content
{
background-color: var(--polska-section-color)
}
body.poland-mode .header-content h1
{
border-bottom-color: red;
}
body.poland-mode .profile-image-cover
{
background: linear-gradient(185deg,transparent 40% 60%, var(--polska-section-color) 85%, var(--polska-section-color) 90% );
position: absolute;
width: 100%;
height: 100%;
left: 0;
top:0;
}
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 */
/* Style dla listy meczów */
.section-stats {
background: linear-gradient(135deg, #002147, #A50044);
color: white;
border-radius: 20px;
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
padding: 2rem 2rem;
background: linear-gradient(135deg, #002147, #A50044);
color: white;
border-radius: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
padding: 2rem 2rem;
max-width: 1000px;
margin: 0 auto;
margin: 0 auto;
margin-bottom: 10px;
}
}
.section-stats h2 {
font-size: 2rem;
margin-bottom: 1rem;
color: var(--barca-red);
}
font-size: 2rem;
margin-bottom: 1rem;
color: var(--barca-red);
}
.stats {
display: flex;
justify-content: space-around;
text-align: center;
margin-top: 2rem;
flex-wrap: wrap;
gap: 2rem;
display: flex;
justify-content: space-around;
text-align: center;
margin-top: 2rem;
flex-wrap: wrap;
gap: 2rem;
}
.stat-box {
background-color: rgba(255, 255, 255, 0.1);
border: 2px solid var(--barca-gold);
color: white;
padding: 2rem;
border-radius: 15px;
width: 160px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
transition: transform 0.3s ease;
background-color: rgba(255, 255, 255, 0.1);
border: 2px solid var(--barca-gold);
color: white;
padding: 2rem;
border-radius: 15px;
width: 160px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
transition: transform 0.3s ease;
}
.stat-box:hover {
transform: scale(1.1, 1.1);
}
.stat-box h3 {
font-size: 2.5rem;
margin-bottom: 0.5rem;
color: var(--barca-gold);
}
.stat-box p {
font-size: 1.1rem;
font-size: 2.5rem;
margin-bottom: 0.5rem;
color: var(--barca-gold);
}
.choose-club button{
.stat-box p {
font-size: 1.1rem;
}
.choose-club button {
height: 50px;
width: 50px;
background-color: white;
border: none;
}
.choose-club button img{
.choose-club button img {
height: 40px;
width: 40px;
}
.choose-club button img:hover{
.choose-club button img:hover {
height: 45px;
width: 45px;
background-color: #ffffff7e;

64
FlaskWebProject/FlaskWebProject/templates/base.html
View File

@@ -1,47 +1,54 @@
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Lewandowski Stats{% endblock %}</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<meta property="og:title" content="Robert Lewandowski Stats">
<meta property="og:type" content="website" >
<meta property="og:url" content="https://lewy.7o7.cx/" >
<meta property="og:type" content="website">
<meta property="og:url" content="https://lewy.7o7.cx/">
<meta property="og:description" content="Najnowsze informacje o meczach, golach, asystach i innych statystykach">
<meta property="og:image" content="{{ url_for('static', filename='lewandowski.jpg') }}" >
<meta property="og:image:height" content = "143">
<meta property="og:image:width" content = "100">
<meta property="og:image" content="{{ url_for('static', filename='lewandowski.jpg') }}">
<meta property="og:image:height" content="143">
<meta property="og:image:width" content="100">
</head>
<body>
<nav class="navbar">
<div class="logo">Robert Lewandowski</div>
<ul class="nav-links">
<li><a href="/">🏠 Strona główna</a></li>
<li><a href="/mecze">📅 Mecze</a></li>
<li><a href="/statystyki">📊 Statystyki</a></li>
<li><a href="/historia">📊 Osiągnięcia</a></li>
<li><button id="theme-toggle" onclick="toggleTheme()">🌙 / 🌞</button></li>
</ul>
<div class="hamburger">☰</div>
</nav>
<header>
<body>
<header class="base-header">
<nav class="navbar">
<a class="logo-link" href="/"><div class="logo-text">Robert Lewandowski</div></a>
<ul class="nav-links">
<li><a href="/">Strona główna</a></li>
<li><a href="/mecze">Mecze</a></li>
<li><a href="/statystyki">Statystyki</a></li>
<li><a href="/historia">Osiągnięcia</a></li>
<li><button id="theme-toggle" onclick="toggleTheme()"></button></li>
</ul>
<div class="hamburger">☰</div>
</nav>
<div class="header-content">
<center><img src="{{ url_for('static', filename='lewandowski.jpg') }}" alt="Robert Lewandowski" class="profile-image"></center>
<h1>Statystyki Roberta Lewandowskiego</h1>
<div class="profile-image">
<img src="{{ url_for('static', filename='lewandowski_no_bg.png') }}" alt="Robert Lewandowski">
<div class="profile-image-cover"></div>
</div>
<h1>Statystyki <br><span class="header-content-special"> Roberta <br> Lewandowskiego</span></h1>
</div>
<div></div>
</header>
<main>
{% block content %}{% endblock %}
</main>
<script>
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');
hamburger.addEventListener('click', () => {
navLinks.classList.toggle('show');});
</script>
<script>
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');
hamburger.addEventListener('click', () => {
navLinks.classList.toggle('show');
});
</script>
<script>
function toggleTheme() {
const currentMode = document.body.classList.contains('poland-mode') ? 'poland' : 'fcb';
@@ -59,8 +66,9 @@
</script>
<!--!>Footer<-->
<hr style='width: 50%'/>
<hr style='width: 50%' />
{% block footer %}{% endblock %}
</body>
</html>
</html>