Centered Style

This commit is contained in:
Pc
2025-04-09 18:26:13 +02:00
parent b5ebcfbe68
commit ca58821361
3 changed files with 115 additions and 105 deletions

View File

@@ -17,8 +17,7 @@
<SuppressCollectPythonCloudServiceFiles>true</SuppressCollectPythonCloudServiceFiles>
<Name>FlaskWebProject</Name>
<RootNamespace>FlaskWebProject</RootNamespace>
<InterpreterId>
</InterpreterId>
<InterpreterId>MSBuild|env|$(MSBuildProjectFullPath)</InterpreterId>
</PropertyGroup>
<PropertyGroup Condition=" '$(Configuration)' == 'Debug' ">
<DebugSymbols>true</DebugSymbols>
@@ -71,6 +70,17 @@
<Content Include="FlaskWebProject\static\scripts\_references.js" />
<Content Include="FlaskWebProject\templates\index.html" />
</ItemGroup>
<ItemGroup>
<Interpreter Include="env\">
<Id>env</Id>
<Version>3.13</Version>
<Description>env (Python 3.13 (64-bit))</Description>
<InterpreterPath>Scripts\python.exe</InterpreterPath>
<WindowsInterpreterPath>Scripts\pythonw.exe</WindowsInterpreterPath>
<PathEnvironmentVariable>PYTHONPATH</PathEnvironmentVariable>
<Architecture>X64</Architecture>
</Interpreter>
</ItemGroup>
<Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\Python Tools\Microsoft.PythonTools.Web.targets" />
<!-- Specify pre- and post-build commands in the BeforeBuild and
AfterBuild targets below. -->

View File

@@ -1,140 +1,138 @@
/* Podstawowy styl */
/* Podstawowy styl */
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background: #f7f7f7;
color: #222;
transition: all 0.3s ease;
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background: #f7f7f7;
color: #222;
transition: all 0s ease;
display: flex;
flex-direction: column;
align-items: center; /* Wyśrodkowanie elementów w poziomie */
justify-content: flex-start; /* Ustalamy początek na górze */
min-height: 100vh;
}
/* Styl nawigacji */
nav {
background: #d32f2f;
padding: 10px;
display: flex;
justify-content: space-around;
color: white;
background: #d32f2f;
padding: 0px;
display: flex;
justify-content: center; /* Wyśrodkowanie linków */
width: 100%;
color: white;
}
nav a, nav button {
color: white;
text-decoration: none;
font-weight: bold;
background: none;
border: none;
cursor: pointer;
}
nav a, nav button {
color: white;
text-decoration: none;
font-weight: bold;
background: none;
border: none;
cursor: pointer;
margin: 0 15px; /* Odstęp między elementami */
}
/* Wyśrodkowanie głównej zawartości */
main {
padding: 20px;
padding: 0px;
width: 100%;
max-width: 980px; /* Maksymalna szerokość treści */
text-align: center; /* Wyśrodkowanie tekstu */
}
/* Styl dla tabeli */
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
padding: 10px;
border-bottom: 1px solid #ccc;
text-align: center;
padding: 10px;
border-bottom: 1px solid #ccc;
text-align: center;
}
/* Styl dla zdjęcia */
.photo {
width: 200px;
border-radius: 50%;
display: block;
margin: 20px auto;
width: 100px;
height: 100px;
border-radius: 50%;
display: block;
margin: 0 auto; /* Wyśrodkowanie obrazka */
}
/* Styl dla trybu ciemnego */
body.dark-mode {
background: #121212;
color: #e0e0e0;
background: #121212;
color: #e0e0e0;
}
body.dark-mode nav {
background: #333;
}
body.dark-mode nav {
background: #333;
}
body.dark-mode table {
color: #e0e0e0;
}
body.dark-mode table {
color: #e0e0e0;
}
body.dark-mode h1 {
color: #eaeaea;
}
body.dark-mode h1 {
color: #eaeaea;
}
body.dark-mode header button {
background-color: #444;
color: #eaeaea;
}
body.dark-mode header button {
background-color: #444;
color: #eaeaea;
}
body.dark-mode header button:hover {
background-color: #666;
}
body.dark-mode header button:hover {
background-color: #666;
}
body.dark-mode ul li {
background-color: #333;
}
body.dark-mode ul li {
background-color: #333;
}
body.dark-mode ul li:hover {
background-color: #444;
}
/* Dodatkowe style */
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.dark-mode ul li:hover {
background-color: #444;
}
/* 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;
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;
}
header button:hover {
background-color: #0056b3;
}
/* Style dla listy meczów */
ul {
list-style: none;
padding: 0;
list-style: none;
padding: 0;
display: flex;
flex-direction: column;
align-items: center; /* Wyśrodkowanie listy */
}
ul li {
background-color: #eaeaea;
margin-bottom: 10px;
padding: 10px;
border-radius: 5px;
transition: background-color 0.3s;
}
ul li {
background-color: #eaeaea;
margin-bottom: 10px;
padding: 10px;
border-radius: 5px;
transition: background-color 0.3s;
width: 90%; /* Szerokość li z marginesem */
max-width: 800px; /* Maksymalna szerokość elementu */
}
ul li:hover {
background-color: #d1d1d1;
}
ul li:hover {
background-color: #d1d1d1;
}

View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
@@ -15,8 +15,10 @@
</nav>
<header>
<img src="{{ url_for('static', filename='lewandowski.jpg') }}" alt="Robert Lewandowski" style="width: 200px; height: auto; border-radius: 50%;">
<h1>Statystyki Roberta Lewandowskiego</h1>
<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>
</header>
<main>