s478993/mieszkania5
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Folder z plikiem boisko

Browse Source
This commit is contained in:
Adrian Szczeszek 2023-12-02 18:03:46 +01:00
parent f361bbe0b9
commit 09c605a957
1 changed files with 245 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

245
Apka/boisko.html Normal file
View File

@ -0,0 +1,245 @@
<!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 -->