From 09c605a957e5f9ef09182c787b5b042d806bbcb2 Mon Sep 17 00:00:00 2001
From: Adrian Szczeszek <adrszc8@st.amu.edu.pl>
Date: Sat, 2 Dec 2023 18:03:46 +0100
Subject: [PATCH] Folder z plikiem boisko

---
 Apka/boisko.html | 245 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 245 insertions(+)
 create mode 100644 Apka/boisko.html
diff --git a/Apka/boisko.html b/Apka/boisko.html
new file mode 100644
index 0000000..25afe1d
--- /dev/null
+++ b/Apka/boisko.html
@@ -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 -->
