wgranie boiska html
This commit is contained in:
parent
b327147e83
commit
562e5e9a43
|
|
@ -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 -->
|
||||
|
Can't render this file because it is too large.
|
|
Can't render this file because it is too large.
|
|
Can't render this file because it is too large.
|
File diff suppressed because it is too large
Load Diff
|
Can't render this file because it is too large.
|
Loading…
Reference in New Issue