work on app interface
This commit is contained in:
parent
e2780d17ba
commit
70a76450d5
@ -4,7 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="logo.svg" />
|
<link rel="icon" type="image/svg+xml" href="logo.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Football analysys</title>
|
<title>CoachStats</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|||||||
@ -8,7 +8,7 @@ const App = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<BrowserRouter>
|
<BrowserRouter>
|
||||||
<div className='relative z-0 bg-primary'>
|
<div className='relative z-0 bg-lightgreen'>
|
||||||
<div className='bg-hero-pattern bg-cover bg-no-repeat'>
|
<div className='bg-hero-pattern bg-cover bg-no-repeat'>
|
||||||
<Navbar />
|
<Navbar />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 8.4 KiB After Width: | Height: | Size: 702 KiB |
@ -7,11 +7,18 @@ import { logo, menu, close } from "../assets";
|
|||||||
|
|
||||||
|
|
||||||
const Hero = () => {
|
const Hero = () => {
|
||||||
|
|
||||||
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
const [gameMinute, setGameMinute] = useState('');
|
||||||
|
|
||||||
|
const toggleDropdown = () => setIsOpen(!isOpen);
|
||||||
|
const handleMinuteChange = (e) => setGameMinute(e.target.value);
|
||||||
|
|
||||||
|
|
||||||
//zmienne globalne
|
//zmienne globalne
|
||||||
|
|
||||||
//zmienna mówiąca który przycisk jest aktywny, jest ona wykorzystywana
|
//zmienna mówiąca który przycisk jest aktywny, jest ona wykorzystywana
|
||||||
//przez listener nanoszący zawodników na boisko. 0 - strzelec , 1 - obranca , 2 - napasnik. zmienna przez aktywacje przycskówk bb1,bb2 i bb3
|
//przez listener nanoszący zawodników na boisko. 1 - strzelec , 2 - bramkarz , 3 - obronca, 4 - napasnik. zmienna przez aktywacje przycskówk bb1, bb2, bb3 i bb4
|
||||||
|
|
||||||
let active_bbt = "bbt1";
|
let active_bbt = "bbt1";
|
||||||
let number_of_defenders = 0;
|
let number_of_defenders = 0;
|
||||||
@ -25,34 +32,93 @@ const Hero = () => {
|
|||||||
|
|
||||||
function changePlayer(a){
|
function changePlayer(a){
|
||||||
|
|
||||||
document.getElementById("bbt1").style.background = "white";
|
document.getElementById("bbt1").style.background = "#99FFCC";
|
||||||
document.getElementById("bbt2").style.background = "white";
|
document.getElementById("bbt2").style.background = "#99FFCC";
|
||||||
document.getElementById("bbt3").style.background = "white";
|
document.getElementById("bbt3").style.background = "#99FFCC";
|
||||||
document.getElementById(a).style.background = "grey";
|
document.getElementById("bbt4").style.background = "#99FFCC";
|
||||||
|
document.getElementById(a).style.background = "#00CC66";
|
||||||
|
|
||||||
active_bbt = a
|
active_bbt = a
|
||||||
}
|
}
|
||||||
function changeLeg(a){
|
function changeLeg(a){
|
||||||
|
|
||||||
document.getElementById("bbt4").style.background = "white";
|
document.getElementById("bbt5").style.background = "#99FFCC";
|
||||||
document.getElementById("bbt5").style.background = "white";
|
document.getElementById("bbt6").style.background = "#99FFCC";
|
||||||
document.getElementById("bbt6").style.background = "white";
|
document.getElementById("bbt7").style.background = "#99FFCC";
|
||||||
document.getElementById(a).style.background = "grey";
|
document.getElementById("bbt8").style.background = "#99FFCC";
|
||||||
|
document.getElementById(a).style.background = "#00CC66";
|
||||||
|
|
||||||
Leg_bbt = a
|
Leg_bbt = a
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// function changeTechnique(a){
|
||||||
|
|
||||||
|
// document.getElementById("bbt4").style.background = "#99FFCC";
|
||||||
|
|
||||||
|
// technique_bbt = a
|
||||||
|
// }
|
||||||
|
|
||||||
|
// function is_one_on_one(a){
|
||||||
|
|
||||||
|
// document.getElementById("bbt4").style.background = "#99FFCC";
|
||||||
|
|
||||||
|
// technique_bbt = a
|
||||||
|
// }
|
||||||
|
|
||||||
|
// function is_aerial_won(a){
|
||||||
|
|
||||||
|
// document.getElementById("bbt4").style.background = "#99FFCC";
|
||||||
|
|
||||||
|
// technique_bbt = a
|
||||||
|
// }
|
||||||
|
|
||||||
|
// function is_first_time(a){
|
||||||
|
|
||||||
|
// document.getElementById("bbt4").style.background = "#99FFCC";
|
||||||
|
|
||||||
|
// technique_bbt = a
|
||||||
|
// }
|
||||||
|
|
||||||
|
// function is_redirect(a){
|
||||||
|
|
||||||
|
// document.getElementById("bbt4").style.background = "#99FFCC";
|
||||||
|
|
||||||
|
// technique_bbt = a
|
||||||
|
// }
|
||||||
|
|
||||||
|
// function is_kick_off(a){
|
||||||
|
|
||||||
|
// document.getElementById("bbt4").style.background = "#99FFCC";
|
||||||
|
|
||||||
|
// technique_bbt = a
|
||||||
|
// }
|
||||||
|
|
||||||
|
// function is_follows_dribble(a){
|
||||||
|
|
||||||
|
// document.getElementById("bbt4").style.background = "#99FFCC";
|
||||||
|
|
||||||
|
// technique_bbt = a
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Reset Boiska
|
// Reset Boiska
|
||||||
function resetField() {
|
function resetField() {
|
||||||
var footballField = document.getElementById('footballField');
|
var footballField = document.getElementById('footballField');
|
||||||
var footballs = document.querySelectorAll('.football');
|
var footballs = document.querySelectorAll('.football');
|
||||||
|
var goalkeepers = document.querySelectorAll('.goalkeeper');
|
||||||
var strikers = document.querySelectorAll('.striker')
|
var strikers = document.querySelectorAll('.striker')
|
||||||
var defenders = document.querySelectorAll('.defender')
|
var defenders = document.querySelectorAll('.defender')
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
footballs.forEach(function (ball) {
|
footballs.forEach(function (ball) {
|
||||||
footballField.removeChild(ball);
|
footballField.removeChild(ball);
|
||||||
});
|
});
|
||||||
|
goalkeepers.forEach(function (ball) {
|
||||||
|
footballField.removeChild(ball);
|
||||||
|
});
|
||||||
strikers.forEach(function(ball){
|
strikers.forEach(function(ball){
|
||||||
footballField.removeChild(ball)
|
footballField.removeChild(ball)
|
||||||
})
|
})
|
||||||
@ -78,7 +144,7 @@ const Hero = () => {
|
|||||||
}
|
}
|
||||||
)
|
)
|
||||||
eX = data.response
|
eX = data.response
|
||||||
document.getElementById("ex").innerHTML = "Ex:"+ eX
|
document.getElementById("ex").innerHTML = "Współczynnik xG: "+ eX
|
||||||
} else {
|
} else {
|
||||||
alert('Piłka nie jest obecnie na boisku.');
|
alert('Piłka nie jest obecnie na boisku.');
|
||||||
}
|
}
|
||||||
@ -104,23 +170,35 @@ const Hero = () => {
|
|||||||
ball.style.left = x + 'px';
|
ball.style.left = x + 'px';
|
||||||
ball.style.top = y + 'px';
|
ball.style.top = y + 'px';
|
||||||
footballField.appendChild(ball);
|
footballField.appendChild(ball);
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
alert('Możesz dodać tylko jedną piłkę!');
|
alert('Możesz dodać tylko jedną piłkę!');
|
||||||
}
|
}
|
||||||
// Przypadek kiedy zaznaczamy obronce
|
// Przypadek kiedy zaznaczamy bramkarza
|
||||||
|
} else if (active_bbt == "bbt2") {
|
||||||
|
let existingGoalkeeper = document.querySelector('.goalkeeper');
|
||||||
|
|
||||||
|
if (!existingGoalkeeper) {
|
||||||
|
var ball = document.createElement('div');
|
||||||
|
ball.className = 'goalkeeper';
|
||||||
|
ball.style.left = x + 'px';
|
||||||
|
ball.style.top = y + 'px';
|
||||||
|
footballField.appendChild(ball);
|
||||||
|
} else {
|
||||||
|
alert('Możesz dodać tylko jednego bramkarza!');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
else if(active_bbt == "bbt2"){
|
// Przypadek kiedy zaznaczamy obronce
|
||||||
if(number_of_defenders <= 6){
|
else if(active_bbt == "bbt3"){
|
||||||
|
if(number_of_defenders <= 10){
|
||||||
var ball = document.createElement('div');
|
var ball = document.createElement('div');
|
||||||
ball.className = 'defender';
|
ball.className = 'defender';
|
||||||
ball.style.left = x + 'px';
|
ball.style.left = x + 'px';
|
||||||
ball.style.top = y + 'px';
|
ball.style.top = y + 'px';
|
||||||
footballField.appendChild(ball);
|
footballField.appendChild(ball);
|
||||||
number_of_defenders = number_of_defenders + 1} else {alert("zbyt duza liczba obronców")}
|
number_of_defenders = number_of_defenders + 1} else {alert("zbyt duza liczba obronców")}
|
||||||
}else{
|
}else if(active_bbt == "bbt4"){
|
||||||
// Przypadek kiedy zaznaczamy napastnika
|
// Przypadek kiedy zaznaczamy napastnika
|
||||||
if(number_of_strikers <= 6){
|
if(number_of_strikers <= 10){
|
||||||
var ball = document.createElement('div');
|
var ball = document.createElement('div');
|
||||||
ball.className = 'striker';
|
ball.className = 'striker';
|
||||||
ball.style.left = x + 'px';
|
ball.style.left = x + 'px';
|
||||||
@ -145,27 +223,113 @@ const Hero = () => {
|
|||||||
document.getElementById("bbt3").addEventListener("click",function(){
|
document.getElementById("bbt3").addEventListener("click",function(){
|
||||||
changePlayer("bbt3")
|
changePlayer("bbt3")
|
||||||
},false)
|
},false)
|
||||||
|
|
||||||
document.getElementById("bbt4").addEventListener("click",function(){
|
document.getElementById("bbt4").addEventListener("click",function(){
|
||||||
changeLeg("bbt4")
|
changePlayer("bbt4")
|
||||||
},false)
|
|
||||||
document.getElementById("bbt5").addEventListener("click",function(){
|
|
||||||
changeLeg("bbt5")
|
|
||||||
},false)
|
|
||||||
document.getElementById("bbt6").addEventListener("click",function(){
|
|
||||||
changeLeg("bbt6")
|
|
||||||
},false)
|
},false)
|
||||||
|
// document.getElementById("bbt5").addEventListener("click",function(){
|
||||||
|
// changeLeg("bbt5")
|
||||||
|
// },false)
|
||||||
|
// document.getElementById("bbt6").addEventListener("click",function(){
|
||||||
|
// changeLeg("bbt6")
|
||||||
|
// },false)
|
||||||
|
// document.getElementById("bbt7").addEventListener("click",function(){
|
||||||
|
// changeLeg("bbt7")
|
||||||
|
// },false)
|
||||||
|
// document.getElementById("bbt8").addEventListener("click",function(){
|
||||||
|
// changeLeg("bbt8")
|
||||||
|
// },false)
|
||||||
},[]);
|
},[]);
|
||||||
|
|
||||||
/*zwracany komponent zawierajacy boisko*/
|
/*zwracany komponent zawierajacy boisko*/
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<body>
|
<body>
|
||||||
<div className="container" id = "footballers" >
|
|
||||||
|
<div className="container">
|
||||||
</div>
|
{/* Listy zwijane */}
|
||||||
<div className="container" id = "field">
|
|
||||||
|
<div className="top-bar">
|
||||||
|
{/* new version */}
|
||||||
|
<div className="dropdown">
|
||||||
|
<button onClick={() => setIsOpen(!isOpen)} className="dropbtn">
|
||||||
|
Część ciała
|
||||||
|
</button>
|
||||||
|
{isOpen && (
|
||||||
|
<div className="cho-dropdown_body_part">
|
||||||
|
<a a href="#">Noga Prawa</a>
|
||||||
|
<a a href="#">Noga Lewa</a>
|
||||||
|
<a a href="#">Głowa</a>
|
||||||
|
<a a href="#">Inna</a>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* old version */}
|
||||||
|
{/* <div className="ChoosingPlayer">
|
||||||
|
<button className="cho-shooter" id = "bbt5">Noga Prawa</button>
|
||||||
|
<button className="cho-goalkeeper"id = "bbt6">Noga Lewa</button>
|
||||||
|
<button className="cho-defence" id = "bbt7">Głowa</button>
|
||||||
|
<button className="cho-atack" id = "bbt8">Inna</button>
|
||||||
|
</div> */}
|
||||||
|
|
||||||
|
<div className="dropdown">
|
||||||
|
<button onClick={toggleDropdown} className="dropbtn">Technika strzału</button>
|
||||||
|
{isOpen && (
|
||||||
|
<div className="cho-dropdown_technique_name">
|
||||||
|
<a href="#"> Zwykły </a>
|
||||||
|
<a href="#"> Wolej </a>
|
||||||
|
<a href="#"> Półwolej </a>
|
||||||
|
<a href="#"> Lob </a>
|
||||||
|
<a href="#"> Szczupak </a>
|
||||||
|
<a href="#"> Kopnięcie z góry </a>
|
||||||
|
<a href="#"> Piętka </a>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div className="dropdown">
|
||||||
|
<button onClick={toggleDropdown} className="dropbtn">Typ akcji</button>
|
||||||
|
{isOpen && (
|
||||||
|
<div className="cho-dropdown_type_name">
|
||||||
|
<a href="#"> Atak Pozycyjny </a>
|
||||||
|
<a href="#"> Rzut Wolny </a>
|
||||||
|
<a href="#"> Rzut Karny </a>
|
||||||
|
<a href="#"> Rzut Rozny </a>
|
||||||
|
<a href="#"> Rozpoczęcie </a>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="dropdown">
|
||||||
|
<button onClick={toggleDropdown} className="dropbtn">Pozycja strzelającego</button>
|
||||||
|
{isOpen && (
|
||||||
|
<div className="cho-dropdown_position_name">
|
||||||
|
<a href="#"> Bramkarz </a>
|
||||||
|
<a href="#"> Obrońca </a>
|
||||||
|
<a href="#"> Pomocnik </a>
|
||||||
|
<a href="#"> Napastnik </a>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="cho-minute">
|
||||||
|
<label htmlFor="gameMinute" className="label-large"></label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
id="gameMinute"
|
||||||
|
name="gameMinute"
|
||||||
|
value={gameMinute}
|
||||||
|
onChange={handleMinuteChange}
|
||||||
|
min="0"
|
||||||
|
placeholder="Wpisz minutę"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="main-content" id = "field">
|
||||||
<div className="field" id="footballField">
|
<div className="field" id="footballField">
|
||||||
|
|
||||||
<span className="left">
|
<span className="left">
|
||||||
<span className="halfway-line"></span>
|
<span className="halfway-line"></span>
|
||||||
<span className="centre-circle"></span>
|
<span className="centre-circle"></span>
|
||||||
@ -189,24 +353,39 @@ const Hero = () => {
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="container" id = "submenu" >
|
|
||||||
<button className="reset-button" onClick={resetField}>Reset</button>
|
|
||||||
<button className="info-button" onClick={sentQuestion}>Oblicz ExG</button>
|
{/* <div className="ChoosingPlayer">
|
||||||
<div className="ChoosingPlayer">
|
<button className="cho-one_on_one" id = "bbt8">Sam na sam</button>
|
||||||
<button className="cho-shooter" id = "bbt1">Strzelec</button>
|
|
||||||
<button className="cho-defence" id = "bbt2">Obrońca</button>
|
|
||||||
<button className="cho-atack" id = "bbt3">Atakujący</button>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="ChoosingPlayer">
|
<div className="ChoosingPlayer">
|
||||||
<button className="cho-shooter" id = "bbt4">Noga wiodąca</button>
|
<button className="cho-first_time" id = "bbt12">Pierwszy w meczu</button>
|
||||||
<button className="cho-defence" id = "bbt5">Noga słabsza</button>
|
</div>
|
||||||
<button className="cho-atack" id = "bbt6">Głowa</button>
|
<div className="ChoosingPlayer">
|
||||||
|
<button className="cho-aerial_won" id = "bbt13">Pojedynek powietrzny</button>
|
||||||
|
</div>
|
||||||
|
<div className="ChoosingPlayer">
|
||||||
|
<button className="cho-follows_dribble" id = "bbt14">Drybling</button>
|
||||||
|
</div>
|
||||||
|
<div className="ChoosingPlayer">
|
||||||
|
<button className="cho-redirect" id = "bbt15">Rykoszet</button>
|
||||||
|
</div> */}
|
||||||
|
|
||||||
|
<div className="bottom-bar">
|
||||||
|
|
||||||
|
<button className="cho-shooter" id = "bbt1">Strzelec</button>
|
||||||
|
<button className="cho-goalkeeper" id = "bbt2">Bramkarz</button>
|
||||||
|
<button className="cho-defence" id = "bbt3">Broniący</button>
|
||||||
|
<button className="cho-atack" id = "bbt4">Atakujący</button>
|
||||||
|
<button className="reset-button" onClick={resetField}>Reset</button>
|
||||||
|
<button className="info-button" onClick={sentQuestion}>xG</button>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<b id = "ex" className="Ex">Ex:</b>
|
<b id = "ex" className="Ex">
|
||||||
</div>
|
|
||||||
|
</b>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -29,8 +29,8 @@ const Navbar = () => {
|
|||||||
<nav
|
<nav
|
||||||
className={`${
|
className={`${
|
||||||
styles.paddingX
|
styles.paddingX
|
||||||
} w-full flex items-center py-5 fixed top-0 z-20 ${
|
} w-full flex items-center py-5 fixed top-0 z-20 left-0 ${
|
||||||
scrolled ? "bg-primary" : "bg-transparent"
|
scrolled ? "bg-green" : "bg-green"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<div className='w-full flex items-center max-w-7xl mx-auto'>
|
<div className='w-full flex items-center max-w-7xl mx-auto'>
|
||||||
@ -42,7 +42,10 @@ const Navbar = () => {
|
|||||||
window.scrollTo(0, 0);
|
window.scrollTo(0, 0);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<img src={logo} alt='logo' className='w-9 h-9 object-contain' />
|
<img src={logo} alt='logo' width="100" height="100" className="logo img-fluid"/>
|
||||||
|
<span className="brand-text" style={{ fontSize: '24px', color: '#99FFCC' }}>
|
||||||
|
CoachStats
|
||||||
|
</span>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
<ul className='list-none hidden sm:flex flex-row gap-10'>
|
<ul className='list-none hidden sm:flex flex-row gap-10'>
|
||||||
@ -64,4 +67,4 @@ const Navbar = () => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Navbar;
|
export default Navbar;
|
||||||
|
|||||||
@ -26,18 +26,6 @@ import {
|
|||||||
} from "../assets";
|
} from "../assets";
|
||||||
|
|
||||||
export const navLinks = [
|
export const navLinks = [
|
||||||
{
|
|
||||||
id: "Analiza",
|
|
||||||
title: "Analiza",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "Zawodnicy",
|
|
||||||
title: "zawodnicy",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "log_out",
|
|
||||||
title: "Wyloguj",
|
|
||||||
},
|
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Binary file not shown.
@ -6,23 +6,46 @@
|
|||||||
|
|
||||||
|
|
||||||
.Ex{
|
.Ex{
|
||||||
font-size: 40px;
|
display: block; /* Może być inline-block, jeśli preferujesz */
|
||||||
|
margin: 20px auto; /* Centralnie i z marginesem */
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #4CAF50; /* Przykładowy kolor tła */
|
||||||
|
color: white; /* Kolor tekstu */
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 5px; /* Lekko zaokrąglone rogi */
|
||||||
|
font-size: 20px; /* Duża, czytelna czcionka */
|
||||||
|
font-weight: bold; /* Pogrubienie dla lepszej widoczności */
|
||||||
|
width: 50%; /* Dostosuj szerokość zgodnie z potrzebami */
|
||||||
|
/* Dodatkowe style, takie jak cienie, mogą być dodane */
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
margin: 50px;
|
margin: 50px;
|
||||||
display: grid;
|
display: grid;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: center; /* Center horizontally */
|
||||||
grid-template-rows: auto;
|
grid-template-rows: auto;
|
||||||
grid-template-columns: auto auto auto;
|
grid-template-columns: auto auto auto;
|
||||||
}
|
}
|
||||||
.container {
|
|
||||||
position: relative;
|
.container {
|
||||||
font-size: 5px;
|
display: flex;
|
||||||
margin: 50 px;
|
flex-direction: column;
|
||||||
}
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
position: relative;
|
||||||
|
font-size: 7px;
|
||||||
|
margin: 50 px;
|
||||||
|
}
|
||||||
.container span {
|
.container span {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.field {
|
.field {
|
||||||
--line: 0.3em solid white;
|
--line: 0.3em solid white;
|
||||||
@ -33,15 +56,41 @@
|
|||||||
height: inherit;
|
height: inherit;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background-color:green;
|
background-color:green;
|
||||||
width: 120em;
|
width: 120em;
|
||||||
height: 80em;
|
height: 80em;
|
||||||
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
.subMenu{
|
|
||||||
display: grid;
|
.subMenu {
|
||||||
grid-template-rows: auto auto auto;
|
display: grid;
|
||||||
|
grid-template-rows: auto auto auto;
|
||||||
|
/* Additional styling */
|
||||||
|
position: fixed; /* Fix the menu at the top */
|
||||||
|
top: 0; /* Align to the top of the page */
|
||||||
|
width: 100%; /* Full width */
|
||||||
|
background-color: #f0f0f0; /* Example background color */
|
||||||
|
z-index: 1000; /* Ensure it stays on top of other content */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.top-bar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px;
|
||||||
|
width: 100%; /* Dostosuj szerokość zgodnie z potrzebami */
|
||||||
|
/* Możesz dodać dodatkowe style, jak tło, obramowanie itp. */
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-bar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between; /* Rozmieszcza przyciski równomiernie */
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px;
|
||||||
|
width: 100%; /* Dostosuj szerokość zgodnie z potrzebami */
|
||||||
|
/* Możesz dodać dodatkowe style, jak tło, obramowanie itp. */
|
||||||
|
}
|
||||||
|
|
||||||
.halfway-line {
|
.halfway-line {
|
||||||
width: 60em;
|
width: 60em;
|
||||||
@ -142,7 +191,7 @@
|
|||||||
.football {
|
.football {
|
||||||
width: 2em;
|
width: 2em;
|
||||||
height: 2em;
|
height: 2em;
|
||||||
background-color: #FFD700;
|
background-color: black;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
@ -157,58 +206,265 @@
|
|||||||
.striker{
|
.striker{
|
||||||
width: 2em;
|
width: 2em;
|
||||||
height: 2em;
|
height: 2em;
|
||||||
background-color: rgb(7, 26, 7);
|
background-color: blue;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.goalkeeper{
|
||||||
|
width: 2em;
|
||||||
|
height: 2em;
|
||||||
|
background-color: yellow;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
.reset-button {
|
.reset-button {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
background-color: #FFFFFF;
|
background-color: #FFB266;
|
||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color:#000000;
|
color:#000000;
|
||||||
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-button {
|
.info-button {
|
||||||
position: relative;
|
position: relative;
|
||||||
left: 50%;
|
width: 80px; /* Ustaw szerokość */
|
||||||
padding: 10px;
|
height: 80px; /* Ustaw wysokość (taką samą jak szerokość) */
|
||||||
background-color: #FFFFFF;
|
padding: 0; /* Usuń padding, aby tekst był wyśrodkowany */
|
||||||
border: none;
|
border-radius: 50%; /* To tworzy koło */
|
||||||
cursor: pointer;
|
background-color: #FFFFFF;
|
||||||
color: #000000;
|
border: none;
|
||||||
}
|
cursor: pointer;
|
||||||
|
color: #000000;
|
||||||
|
font-size: 24px;
|
||||||
|
display: flex; /* Umożliwia wyśrodkowanie tekstu */
|
||||||
|
align-items: center; /* Wyśrodkowanie pionowe */
|
||||||
|
justify-content: center; /* Wyśrodkowanie poziome */
|
||||||
|
}
|
||||||
.cho-atack {
|
.cho-atack {
|
||||||
position: relative;
|
position: relative;
|
||||||
;
|
font-size: 16px;
|
||||||
padding: 10px;
|
padding: 16px;
|
||||||
background-color: #FFFFFF;
|
background-color: #99FFCC;
|
||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
}
|
}
|
||||||
.cho-shooter {
|
.cho-shooter {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
padding: 16px;
|
||||||
padding: 10px;
|
background-color: #99FFCC;
|
||||||
background-color: grey;
|
|
||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
.cho-defence {
|
.cho-defence {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
padding: 16px;
|
||||||
padding: 10px;
|
background-color: #99FFCC;
|
||||||
background-color: #FFFFFF;
|
|
||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
.cho-goalkeeper {
|
||||||
|
position: relative;
|
||||||
|
padding: 16px;
|
||||||
|
background-color: #99FFCC;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #000000;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.cho-one_on_one {
|
||||||
|
position: relative;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #99FFCC;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #000000;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cho-first_time {
|
||||||
|
position: relative;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #99FFCC;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #000000;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.cho-aerial_won {
|
||||||
|
position: relative;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #99FFCC;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #000000;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.cho-follows_dribble {
|
||||||
|
position: relative;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #99FFCC;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #000000;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.cho-redirect {
|
||||||
|
position: relative;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #99FFCC;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #000000;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* DROPDOWNS */
|
||||||
|
/* Style the dropdown button */
|
||||||
|
.dropbtn {
|
||||||
|
background-color: #4CAF50;
|
||||||
|
color: white;
|
||||||
|
padding: 16px;
|
||||||
|
font-size: 16px;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dropdown button on hover & focus */
|
||||||
|
.dropbtn:hover, .dropbtn:focus {
|
||||||
|
background-color: #3e8e41;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The container <div> - needed to position the dropdown content */
|
||||||
|
.dropdown {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cho-dropdown_body_part {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
min-width: 160px;
|
||||||
|
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cho-dropdown_body_part a{
|
||||||
|
color: black;
|
||||||
|
padding: 12px 16px;
|
||||||
|
text-decoration: none;
|
||||||
|
display: block;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Change color of dropdown links on hover */
|
||||||
|
.cho-dropdown_body_part a:hover {background-color: #f1f1f1}
|
||||||
|
|
||||||
|
/* Show the dropdown menu on hover */
|
||||||
|
.dropdown:hover .cho-dropdown_body_part {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cho-dropdown_position_name {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
min-width: 160px;
|
||||||
|
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cho-dropdown_position_name a {
|
||||||
|
color: black;
|
||||||
|
padding: 12px 16px;
|
||||||
|
text-decoration: none;
|
||||||
|
display: block;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Change color of dropdown links on hover */
|
||||||
|
.cho-dropdown_position_name a:hover {background-color: #f1f1f1}
|
||||||
|
|
||||||
|
/* Show the dropdown menu on hover */
|
||||||
|
.dropdown:hover .cho-dropdown_position_name {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cho-dropdown_technique_name {
|
||||||
|
position: relative;
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
min-width: 160px;
|
||||||
|
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cho-dropdown_technique_name a {
|
||||||
|
color: black;
|
||||||
|
padding: 12px 16px;
|
||||||
|
text-decoration: none;
|
||||||
|
display: block;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Change color of dropdown links on hover */
|
||||||
|
.cho-dropdown_technique_name a:hover {background-color: #f1f1f1}
|
||||||
|
|
||||||
|
/* Show the dropdown menu on hover */
|
||||||
|
.dropdown:hover .cho-dropdown_technique_name {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cho-dropdown_type_name {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
min-width: 160px;
|
||||||
|
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cho-dropdown_type_name a {
|
||||||
|
color: black;
|
||||||
|
padding: 12px 16px;
|
||||||
|
text-decoration: none;
|
||||||
|
display: block;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Change color of dropdown links on hover */
|
||||||
|
.cho-dropdown_type_name a:hover {background-color: #f1f1f1}
|
||||||
|
|
||||||
|
/* Show the dropdown menu on hover */
|
||||||
|
.dropdown:hover .cho-dropdown_type_name {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* MANUAL INPUT */
|
||||||
|
.cho-minute {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.cho-minute input[type="number"] {
|
||||||
|
padding: 12px 16px;
|
||||||
|
margin-left: 5px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.label-large {
|
||||||
|
font-size: 16px; /* Adjust the size as needed */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user