245 lines
6.7 KiB
HTML
245 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>Football Field with Ball</title>
|
|
<style>
|
|
body {
|
|
margin: 100px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: radial-gradient(blue, black);
|
|
--line: 0.3em solid white;
|
|
}
|
|
|
|
.container {
|
|
position: relative;
|
|
width: 120em;
|
|
height: 80em;
|
|
background-color: green;
|
|
font-size: 5px;
|
|
padding: 5em;
|
|
}
|
|
|
|
.container span {
|
|
display: block;
|
|
}
|
|
|
|
.field {
|
|
border: var(--line);
|
|
position: relative;
|
|
overflow: hidden;
|
|
width: inherit;
|
|
height: inherit;
|
|
z-index: 1;
|
|
}
|
|
|
|
.halfway-line {
|
|
width: 60em;
|
|
height: 80em;
|
|
border-right: var(--line);
|
|
}
|
|
|
|
.centre-circle,
|
|
.penalty-arc {
|
|
width: 20em;
|
|
height: 20em;
|
|
border: var(--line);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: 30em;
|
|
}
|
|
|
|
.centre-circle {
|
|
left: calc((120em - 20em - 0.3em) / 2);
|
|
}
|
|
|
|
.centre-mark {
|
|
width: 2em;
|
|
height: 2em;
|
|
background-color: white;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: calc(80em / 2 - 1em);
|
|
left: calc(120em / 2 - 1em + 0.3em / 2);
|
|
}
|
|
|
|
.penalty-mark {
|
|
width: 2em;
|
|
height: 2em;
|
|
background-color: white;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: calc(80em / 2 - 1em);
|
|
left: calc(12em - 2em / 2);
|
|
}
|
|
|
|
.penalty-area {
|
|
width: 18em;
|
|
height: 44em;
|
|
border: var(--line);
|
|
position: absolute;
|
|
top: calc((80em - 44em) / 2);
|
|
left: -0.3em;
|
|
background-color: green;
|
|
}
|
|
|
|
.penalty-arc {
|
|
left: calc(12em - 20em / 2);
|
|
z-index: -1;
|
|
}
|
|
|
|
.goal-area {
|
|
width: 6em;
|
|
height: 20em;
|
|
border: var(--line);
|
|
position: absolute;
|
|
top: calc((80em - 20em) / 2);
|
|
left: -0.3em;
|
|
}
|
|
|
|
.corner-arc {
|
|
border: 1px solid blue;
|
|
position: absolute;
|
|
}
|
|
|
|
.corner-arc::after,
|
|
.corner-arc::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 5em;
|
|
height: 5em;
|
|
border: 0.3em solid white;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.corner-arc::before {
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.corner-arc::after {
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.right {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 50%;
|
|
transform: rotateY(180deg);
|
|
}
|
|
|
|
.football {
|
|
width: 2em;
|
|
height: 2em;
|
|
background-color: #FFD700;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
}
|
|
|
|
.reset-button {
|
|
position: absolute;
|
|
top: -40px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
padding: 10px;
|
|
background-color: #FFFFFF;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.info-button {
|
|
position: absolute;
|
|
top: -80px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
padding: 10px;
|
|
background-color: #FFFFFF;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<button class="reset-button" onclick="resetField()">Reset</button>
|
|
<button class="info-button" onclick="getBallPosition()">Pobierz pozycję piłki</button>
|
|
<div class="field" id="footballField">
|
|
<div class="left">
|
|
<span class="halfway-line"></span>
|
|
<span class="centre-circle"></span>
|
|
<span class="centre-mark"></span>
|
|
<span class="penalty-area"></span>
|
|
<span class="penalty-mark"></span>
|
|
<span class="penalty-arc"></span>
|
|
<span class="goal-area"></span>
|
|
<span class="corner-arc"></span>
|
|
</div>
|
|
|
|
<div class="right">
|
|
<span class="halfway-line"></span>
|
|
<span class="centre-circle"></span>
|
|
<span class="centre-mark"></span>
|
|
<span class="penalty-area"></span>
|
|
<span class="penalty-mark"></span>
|
|
<span class="penalty-arc"></span>
|
|
<span class="goal-area"></span>
|
|
<span class="corner-arc"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function resetField() {
|
|
var footballField = document.getElementById('footballField');
|
|
var footballs = document.querySelectorAll('.football');
|
|
|
|
footballs.forEach(function (ball) {
|
|
footballField.removeChild(ball);
|
|
});
|
|
}
|
|
|
|
function getBallPosition() {
|
|
var ball = document.querySelector('.football');
|
|
|
|
if (ball) {
|
|
var x = ball.style.left;
|
|
var y = ball.style.top;
|
|
alert('Pozycja piłki:\nX: ' + x + '\nY: ' + y);
|
|
} else {
|
|
alert('Piłka nie jest obecnie na boisku.');
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
var footballField = document.getElementById('footballField');
|
|
|
|
footballField.addEventListener('click', function (event) {
|
|
var x = event.clientX - footballField.getBoundingClientRect().left;
|
|
var y = event.clientY - footballField.getBoundingClientRect().top;
|
|
|
|
var existingBall = document.querySelector('.football');
|
|
if (!existingBall) {
|
|
var ball = document.createElement('div');
|
|
ball.className = 'football';
|
|
ball.style.left = x + 'px';
|
|
ball.style.top = y + 'px';
|
|
|
|
footballField.appendChild(ball);
|
|
} else {
|
|
alert('Możesz dodać tylko jedną piłkę!');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|
|
|
|
<!-- https://github.com/zhenfei666/a-football-pitch-CSS-/blob/master/soccer-pitch.html --> |