aktualizacja nazwy
245
app/boisko.html
@ -1,245 +0,0 @@
|
|||||||
<!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 -->
|
|
||||||
|
Before Width: | Height: | Size: 229 B After Width: | Height: | Size: 229 B |
|
Before Width: | Height: | Size: 6.3 KiB After Width: | Height: | Size: 6.3 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 912 B After Width: | Height: | Size: 912 B |
|
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 43 KiB |
|
Before Width: | Height: | Size: 232 KiB After Width: | Height: | Size: 232 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 101 KiB After Width: | Height: | Size: 101 KiB |
|
Before Width: | Height: | Size: 220 KiB After Width: | Height: | Size: 220 KiB |
|
Before Width: | Height: | Size: 303 KiB After Width: | Height: | Size: 303 KiB |
|
Before Width: | Height: | Size: 168 KiB After Width: | Height: | Size: 168 KiB |
|
Before Width: | Height: | Size: 132 KiB After Width: | Height: | Size: 132 KiB |
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 58 KiB After Width: | Height: | Size: 58 KiB |
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 166 KiB After Width: | Height: | Size: 166 KiB |
|
Before Width: | Height: | Size: 49 KiB After Width: | Height: | Size: 49 KiB |
|
Before Width: | Height: | Size: 166 KiB After Width: | Height: | Size: 166 KiB |
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 1.7 MiB After Width: | Height: | Size: 1.7 MiB |
|
Before Width: | Height: | Size: 147 KiB After Width: | Height: | Size: 147 KiB |
|
Before Width: | Height: | Size: 150 KiB After Width: | Height: | Size: 150 KiB |
|
Before Width: | Height: | Size: 128 KiB After Width: | Height: | Size: 128 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 394 KiB After Width: | Height: | Size: 394 KiB |
|
Before Width: | Height: | Size: 380 KiB After Width: | Height: | Size: 380 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 99 B After Width: | Height: | Size: 99 B |
|
Before Width: | Height: | Size: 96 KiB After Width: | Height: | Size: 96 KiB |
|
Before Width: | Height: | Size: 99 B After Width: | Height: | Size: 99 B |
|
Before Width: | Height: | Size: 47 KiB After Width: | Height: | Size: 47 KiB |
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 40 KiB |
|
Before Width: | Height: | Size: 102 KiB After Width: | Height: | Size: 102 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 208 KiB After Width: | Height: | Size: 208 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 90 KiB After Width: | Height: | Size: 90 KiB |
|
Before Width: | Height: | Size: 78 KiB After Width: | Height: | Size: 78 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 550 KiB After Width: | Height: | Size: 550 KiB |
|
Before Width: | Height: | Size: 2.8 MiB After Width: | Height: | Size: 2.8 MiB |
|
Before Width: | Height: | Size: 640 KiB After Width: | Height: | Size: 640 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 8.4 KiB After Width: | Height: | Size: 8.4 KiB |
|
Before Width: | Height: | Size: 713 KiB After Width: | Height: | Size: 713 KiB |
|
Before Width: | Height: | Size: 612 KiB After Width: | Height: | Size: 612 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 741 KiB After Width: | Height: | Size: 741 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 7.6 KiB After Width: | Height: | Size: 7.6 KiB |
|
Before Width: | Height: | Size: 7.8 KiB After Width: | Height: | Size: 7.8 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 4.8 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 909 KiB After Width: | Height: | Size: 909 KiB |
|
Before Width: | Height: | Size: 737 KiB After Width: | Height: | Size: 737 KiB |
|
Before Width: | Height: | Size: 8.4 KiB After Width: | Height: | Size: 8.4 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 5.3 KiB |
|
Before Width: | Height: | Size: 5.4 KiB After Width: | Height: | Size: 5.4 KiB |
|
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB |
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.2 KiB |
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.7 KiB |
|
Before Width: | Height: | Size: 7.9 KiB After Width: | Height: | Size: 7.9 KiB |
|
Before Width: | Height: | Size: 6.4 KiB After Width: | Height: | Size: 6.4 KiB |
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 7.6 KiB After Width: | Height: | Size: 7.6 KiB |
|
Before Width: | Height: | Size: 5.1 KiB After Width: | Height: | Size: 5.1 KiB |
|
Before Width: | Height: | Size: 677 B After Width: | Height: | Size: 677 B |
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 3.3 MiB After Width: | Height: | Size: 3.3 MiB |
|
Before Width: | Height: | Size: 58 KiB After Width: | Height: | Size: 58 KiB |