wgranie boiska html

This commit is contained in:
unknown 2023-12-04 11:06:06 +01:00
parent b327147e83
commit 562e5e9a43
7 changed files with 252 additions and 2116 deletions

245
app/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 -->

View File

Can't render this file because it is too large.

View File

Can't render this file because it is too large.

View File

Can't render this file because it is too large.

File diff suppressed because it is too large Load Diff

View File

Can't render this file because it is too large.