work on app interface
This commit is contained in:
parent
e2780d17ba
commit
70a76450d5
@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="logo.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Football analysys</title>
|
||||
<title>CoachStats</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
@ -8,7 +8,7 @@ const App = () => {
|
||||
|
||||
return (
|
||||
<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'>
|
||||
<Navbar />
|
||||
</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 |
@ -8,10 +8,17 @@ import { logo, menu, close } from "../assets";
|
||||
|
||||
const Hero = () => {
|
||||
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [gameMinute, setGameMinute] = useState('');
|
||||
|
||||
const toggleDropdown = () => setIsOpen(!isOpen);
|
||||
const handleMinuteChange = (e) => setGameMinute(e.target.value);
|
||||
|
||||
|
||||
//zmienne globalne
|
||||
|
||||
//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 number_of_defenders = 0;
|
||||
@ -25,33 +32,92 @@ const Hero = () => {
|
||||
|
||||
function changePlayer(a){
|
||||
|
||||
document.getElementById("bbt1").style.background = "white";
|
||||
document.getElementById("bbt2").style.background = "white";
|
||||
document.getElementById("bbt3").style.background = "white";
|
||||
document.getElementById(a).style.background = "grey";
|
||||
document.getElementById("bbt1").style.background = "#99FFCC";
|
||||
document.getElementById("bbt2").style.background = "#99FFCC";
|
||||
document.getElementById("bbt3").style.background = "#99FFCC";
|
||||
document.getElementById("bbt4").style.background = "#99FFCC";
|
||||
document.getElementById(a).style.background = "#00CC66";
|
||||
|
||||
active_bbt = a
|
||||
}
|
||||
function changeLeg(a){
|
||||
|
||||
document.getElementById("bbt4").style.background = "white";
|
||||
document.getElementById("bbt5").style.background = "white";
|
||||
document.getElementById("bbt6").style.background = "white";
|
||||
document.getElementById(a).style.background = "grey";
|
||||
document.getElementById("bbt5").style.background = "#99FFCC";
|
||||
document.getElementById("bbt6").style.background = "#99FFCC";
|
||||
document.getElementById("bbt7").style.background = "#99FFCC";
|
||||
document.getElementById("bbt8").style.background = "#99FFCC";
|
||||
document.getElementById(a).style.background = "#00CC66";
|
||||
|
||||
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
|
||||
function resetField() {
|
||||
var footballField = document.getElementById('footballField');
|
||||
var footballs = document.querySelectorAll('.football');
|
||||
var goalkeepers = document.querySelectorAll('.goalkeeper');
|
||||
var strikers = document.querySelectorAll('.striker')
|
||||
var defenders = document.querySelectorAll('.defender')
|
||||
|
||||
|
||||
|
||||
footballs.forEach(function (ball) {
|
||||
footballField.removeChild(ball);
|
||||
});
|
||||
goalkeepers.forEach(function (ball) {
|
||||
footballField.removeChild(ball);
|
||||
});
|
||||
strikers.forEach(function(ball){
|
||||
footballField.removeChild(ball)
|
||||
@ -78,7 +144,7 @@ const Hero = () => {
|
||||
}
|
||||
)
|
||||
eX = data.response
|
||||
document.getElementById("ex").innerHTML = "Ex:"+ eX
|
||||
document.getElementById("ex").innerHTML = "Współczynnik xG: "+ eX
|
||||
} else {
|
||||
alert('Piłka nie jest obecnie na boisku.');
|
||||
}
|
||||
@ -104,23 +170,35 @@ const Hero = () => {
|
||||
ball.style.left = x + 'px';
|
||||
ball.style.top = y + 'px';
|
||||
footballField.appendChild(ball);
|
||||
|
||||
} else {
|
||||
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"){
|
||||
if(number_of_defenders <= 6){
|
||||
}
|
||||
// Przypadek kiedy zaznaczamy obronce
|
||||
else if(active_bbt == "bbt3"){
|
||||
if(number_of_defenders <= 10){
|
||||
var ball = document.createElement('div');
|
||||
ball.className = 'defender';
|
||||
ball.style.left = x + 'px';
|
||||
ball.style.top = y + 'px';
|
||||
footballField.appendChild(ball);
|
||||
number_of_defenders = number_of_defenders + 1} else {alert("zbyt duza liczba obronców")}
|
||||
}else{
|
||||
}else if(active_bbt == "bbt4"){
|
||||
// Przypadek kiedy zaznaczamy napastnika
|
||||
if(number_of_strikers <= 6){
|
||||
if(number_of_strikers <= 10){
|
||||
var ball = document.createElement('div');
|
||||
ball.className = 'striker';
|
||||
ball.style.left = x + 'px';
|
||||
@ -145,27 +223,113 @@ const Hero = () => {
|
||||
document.getElementById("bbt3").addEventListener("click",function(){
|
||||
changePlayer("bbt3")
|
||||
},false)
|
||||
|
||||
document.getElementById("bbt4").addEventListener("click",function(){
|
||||
changeLeg("bbt4")
|
||||
},false)
|
||||
document.getElementById("bbt5").addEventListener("click",function(){
|
||||
changeLeg("bbt5")
|
||||
},false)
|
||||
document.getElementById("bbt6").addEventListener("click",function(){
|
||||
changeLeg("bbt6")
|
||||
changePlayer("bbt4")
|
||||
},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*/
|
||||
|
||||
return (
|
||||
<body>
|
||||
<div className="container" id = "footballers" >
|
||||
|
||||
<div className="container">
|
||||
{/* Listy zwijane */}
|
||||
|
||||
<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 className="container" id = "field">
|
||||
)}
|
||||
</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">
|
||||
|
||||
<span className="left">
|
||||
<span className="halfway-line"></span>
|
||||
<span className="centre-circle"></span>
|
||||
@ -189,23 +353,38 @@ const Hero = () => {
|
||||
</span>
|
||||
</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">
|
||||
<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 className="ChoosingPlayer">
|
||||
<button className="cho-one_on_one" id = "bbt8">Sam na sam</button>
|
||||
</div>
|
||||
<div className="ChoosingPlayer">
|
||||
<button className="cho-shooter" id = "bbt4">Noga wiodąca</button>
|
||||
<button className="cho-defence" id = "bbt5">Noga słabsza</button>
|
||||
<button className="cho-atack" id = "bbt6">Głowa</button>
|
||||
<button className="cho-first_time" id = "bbt12">Pierwszy w meczu</button>
|
||||
</div>
|
||||
<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>
|
||||
<b id = "ex" className="Ex">Ex:</b>
|
||||
</div>
|
||||
<b id = "ex" className="Ex">
|
||||
|
||||
</b>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
);
|
||||
|
||||
@ -29,8 +29,8 @@ const Navbar = () => {
|
||||
<nav
|
||||
className={`${
|
||||
styles.paddingX
|
||||
} w-full flex items-center py-5 fixed top-0 z-20 ${
|
||||
scrolled ? "bg-primary" : "bg-transparent"
|
||||
} w-full flex items-center py-5 fixed top-0 z-20 left-0 ${
|
||||
scrolled ? "bg-green" : "bg-green"
|
||||
}`}
|
||||
>
|
||||
<div className='w-full flex items-center max-w-7xl mx-auto'>
|
||||
@ -42,7 +42,10 @@ const Navbar = () => {
|
||||
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>
|
||||
|
||||
<ul className='list-none hidden sm:flex flex-row gap-10'>
|
||||
|
||||
@ -26,18 +26,6 @@ import {
|
||||
} from "../assets";
|
||||
|
||||
export const navLinks = [
|
||||
{
|
||||
id: "Analiza",
|
||||
title: "Analiza",
|
||||
},
|
||||
{
|
||||
id: "Zawodnicy",
|
||||
title: "zawodnicy",
|
||||
},
|
||||
{
|
||||
id: "log_out",
|
||||
title: "Wyloguj",
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
|
||||
Binary file not shown.
@ -6,24 +6,47 @@
|
||||
|
||||
|
||||
.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 {
|
||||
margin: 50px;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
justify-content: center; /* Center horizontally */
|
||||
grid-template-rows: auto;
|
||||
grid-template-columns: auto auto auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
font-size: 5px;
|
||||
font-size: 7px;
|
||||
margin: 50 px;
|
||||
}
|
||||
.container span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.field {
|
||||
--line: 0.3em solid white;
|
||||
border: var(--line);
|
||||
@ -36,11 +59,37 @@
|
||||
background-color:green;
|
||||
width: 120em;
|
||||
height: 80em;
|
||||
|
||||
justify-content: space-between;
|
||||
}
|
||||
.subMenu{
|
||||
|
||||
.subMenu {
|
||||
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 {
|
||||
@ -142,7 +191,7 @@
|
||||
.football {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
background-color: #FFD700;
|
||||
background-color: black;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
}
|
||||
@ -157,58 +206,265 @@
|
||||
.striker{
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
background-color: rgb(7, 26, 7);
|
||||
background-color: blue;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.goalkeeper{
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
background-color: yellow;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.reset-button {
|
||||
position: relative;
|
||||
margin: 5px;
|
||||
padding: 10px;
|
||||
background-color: #FFFFFF;
|
||||
background-color: #FFB266;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color:#000000;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.info-button {
|
||||
.info-button {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
padding: 10px;
|
||||
width: 80px; /* Ustaw szerokość */
|
||||
height: 80px; /* Ustaw wysokość (taką samą jak szerokość) */
|
||||
padding: 0; /* Usuń padding, aby tekst był wyśrodkowany */
|
||||
border-radius: 50%; /* To tworzy koło */
|
||||
background-color: #FFFFFF;
|
||||
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 {
|
||||
position: relative;
|
||||
;
|
||||
padding: 10px;
|
||||
background-color: #FFFFFF;
|
||||
font-size: 16px;
|
||||
padding: 16px;
|
||||
background-color: #99FFCC;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: #000000;
|
||||
}
|
||||
.cho-shooter {
|
||||
position: relative;
|
||||
|
||||
padding: 10px;
|
||||
background-color: grey;
|
||||
padding: 16px;
|
||||
background-color: #99FFCC;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: #000000;
|
||||
font-size: 16px;
|
||||
}
|
||||
.cho-defence {
|
||||
position: relative;
|
||||
|
||||
padding: 10px;
|
||||
background-color: #FFFFFF;
|
||||
padding: 16px;
|
||||
background-color: #99FFCC;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user