export to git

kotec.pl/css/modal.css

@@ -0,0 +1,105 @@
+/* Стилизация модального окна */
+.modal {
+  display: none; /* Начальное состояние: скрыто */
+  position: fixed; /* Отображение поверх содержимого страницы */
+  z-index: 1; /* Размещение окна наверху других элементов */
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto; /* Включение прокрутки при необходимости */
+  background-color: rgba(0, 0, 0, 0.5); /* Непрозрачность фона */
+}
+
+.modal-content {
+  position: relative;
+  z-index: 1;
+  background-color: #fff;
+  margin: 10% auto;
+  padding: 20px;
+  border: 1px solid #888;
+  width: 90%; /* увеличиваем ширину формы */
+  max-width: 1000px;
+  max-height: 1000px;
+}
+
+/* перенесем кнопку закрытия за пределы формы */
+.close {
+  position: absolute;
+  right: 20px;
+  top: 10px;
+  font-size: 28px;
+  font-weight: bold;
+  color: #aaa;
+  cursor: pointer;
+  z-index: 2; /* увеличим z-index, чтобы кнопка была поверх формы */
+}
+
+.close:hover,
+.close:focus {
+  color: #000;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+/* Стилизация полей формы */
+label {
+  display: block;
+  margin-bottom: 10px;
+  width: 100%;
+  font-size: 16px;
+  font-family: Arial, sans-serif;
+  border-radius: 4px;
+}
+
+/* установим серый фон для полей ввода */
+input, textarea{
+  display: block;
+  margin-bottom: 10px;
+  width: 100%;
+  font-size: 16px;
+  font-family: Arial, sans-serif;
+  border-radius: 4px;
+  background-color: #eee;
+  padding: 10px;
+}
+
+
+label {
+  font-weight: bold;
+}
+
+input[type="text"], input[type="email"], textarea {
+  padding: 12px 20px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+
+input[type="submit"] {
+  position: relative;
+  text-decoration-color: rgb(184, 53, 129);
+  font-size: 28px;
+  display: inline-block;
+  padding: 15px 25px;
+  background-color: rgb(184, 53, 129);
+  color: #fff;
+  text-align: center;
+  text-decoration: none;
+  border-radius: 40px;
+  cursor: pointer;
+  transition: background-color 0.3s ease-in-out;
+  border: none;
+}
+
+input[type="submit"]:hover {
+  background-color: #3e8e41;
+}
+
+/* Адаптивность для мобильных устройств */
+@media screen and (max-width: 600px) {
+  .modal-content {
+    margin: 25% auto;
+    width: 90%;
+  }
+}

kotec.pl/css/onas.css

@@ -0,0 +1,80 @@
+.header-section {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  align-items: left;
+  margin: 200px;
+  position: absolute; /* Изменяем на абсолютное позиционирование */
+  top: 15px; /* Устанавливаем отступ сверху */
+  left: 5%; /* Смещаем на 25% от левого края */
+  height: 110px;
+  width: auto;
+  border-radius: 5%;
+}
+
+.header-left {
+  flex-basis: 33%;
+  text-align: left  ;
+}
+
+.header-right {
+  flex-basis: 67%;
+}
+
+#coop {
+  width: calc(33.33% - 40px); /* Ustawiamy szerokość na 1/3 szerokości elementu .header-section minus marginesy */
+  text-align: left;
+  font-size: 3.33vw; /* Ustawiamy font-size na 33.33vw, co odpowiada 1/3 szerokości okna przeglądarki */
+  margin-top: 0;
+  display: inline-block; /* Ustawiamy na inline-block, aby tekst zajął tylko niezbędne miejsce */
+  max-width: 10%; /* Ustawiamy maksymalną szerokość na 100% */
+}
+
+.slogan {
+  font-size: 18px;
+  margin-top: 10px;
+}
+
+.onas {
+  max-width: 100%; /* Ustawiamy maksymalną szerokość obrazka na 100%, aby zmieścił się w dostępnym miejscu */
+}
+
+@media (orientation: portrait) {
+  .header-section {
+    margin: 20px;
+    position: static; /* Возвращаем статическое позиционирование */
+    top: auto; /* Сбрасываем значение отступа сверху */
+    left: auto; /* Сбрасываем значение смещения слева */
+    grid-template-columns: 1fr; /* Устанавливаем одну колонку в сетке */
+    height: auto; /* Сбрасываем фиксированную высоту */
+    width: auto; /* Сбрасываем фиксированную ширину */
+    border-radius: 0; /* Сбрасываем значение border-radius */
+  }
+
+  .header-left {
+    flex-basis: auto; /* Сбрасываем значение flex-basis */
+    text-align: center; /* Центрируем текст */
+  }
+
+  .header-right {
+    flex-basis: auto; /* Сбрасываем значение flex-basis */
+    margin-top: 20px; /* Добавляем отступ сверху */
+  }
+
+  #coop {
+    width: 100%; /* Устанавливаем ширину на 100% */
+    max-width: none; /* Сбрасываем значение максимальной ширины */
+    margin-top: 10px; /* Добавляем отступ сверху */
+    font-size: 72px; /* Уменьшаем размер шрифта */
+    display: block; /* Устанавливаем на блочный элемент */
+    text-align: center; /* Центрируем текст */
+  }
+
+  .slogan {
+    font-size: 14px; /* Уменьшаем размер шрифта */
+    margin-top: 5px; /* Уменьшаем отступ сверху */
+  }
+
+  .onas {
+    max-width: 100%; /* Устанавливаем максимальную ширину на 100% */
+  }
+}

kotec.pl/css/styles.css

@@ -0,0 +1,319 @@
+#div1 {
+    background-color: hsl(180, 42%, 21%, 0.3); /* противоположный цвет */
+    height: 100px;
+}
+
+#div2 {
+    background-color: white;
+    height: 100px;
+}
+
+footer {
+    background-color: hsl(0, 42%, 16%, 0.3); /* более темный цвет */
+    color: white;
+    height: 50px;
+    text-align: center;
+    padding-top: 20px;
+}
+
+body {
+    background-color: hsl(0, 42%, 21%, 0.3);
+    background-repeat: no-repeat;
+    background-size: 150%;
+    --bs-backdrop-opacity: 50;
+    font-family: "Monospace", Times, serif;
+    margin: 0;
+	padding: 0;
+}
+
+#logo {
+    display: inline-block;
+    margin: 15px;
+    position: absolute; /* Изменяем на абсолютное позиционирование */
+    top: 15px; /* Устанавливаем отступ сверху */
+    left: 5%; /* Смещаем на 25% от левого края */
+    height: 110px;
+    width: auto;
+    border-radius: 5%;
+}
+
+#links {
+    position: absolute;
+    right: 10%;
+    top: 5%;
+}
+
+a:link {
+    color: rgb(184, 53, 129);
+    background-color: transparent;
+    text-decoration: none;
+}
+
+a:visited {
+    color: rgb(184, 53, 129);
+    background-color: transparent;
+    text-decoration: none;
+}
+
+a:hover {
+    color: rgb(184, 53, 129);
+    background-color: transparent;
+    text-decoration: underline;
+}
+
+a:active {
+    color: rgb(184, 53, 129);
+    background-color: transparent;
+    text-decoration: underline;
+}
+
+.o_nas {
+    display: inline-block;
+    padding: 15px 25px;
+    background-color: #fff; /* Устанавливаем цвет заливки кнопки */
+    color: #000; /* Устанавливаем цвет текста на кнопке */
+    font-size: 18px; /* Устанавливаем размер шрифта */
+    text-align: center;
+    text-decoration: none;
+    border: 1px solid #000; /* Устанавливаем границу кнопки */
+    border-radius: 40px; /* Закругляем углы кнопки */
+    transition: background-color 0.3s ease-in-out; /* Добавляем плавный переход при наведении на кнопку */
+}
+
+.o_nas:hover {
+    background-color: #f2f2f2; /* Изменяем цвет заливки при наведении на кнопку */
+}
+
+.o_nas:active {
+    background-color: #e2e2e2; /* Изменяем цвет заливки при нажатии на кнопку */
+}
+
+.kotakt {
+    position: relative;
+    text-decoration-color: rgb(184, 53, 129);
+    font-size: 4.5em;
+    display: inline-block;
+    padding: 15px 25px;
+    background-color: rgb(184, 53, 129); /* Устанавливаем яркий цвет заливки */
+    color: #fff; /* Устанавливаем цвет текста на кнопке */
+    font-size: 28px; /* Устанавливаем размер шрифта */
+    text-align: center;
+    text-decoration: none;
+    border-radius: 40px; /* Закругляем углы кнопки */
+    transition: background-color 0.3s ease-in-out; /* Добавляем плавный переход при наведении на кнопку */
+
+}
+
+.kotakt:hover {
+  /* Ustawienia wyglądu przycisku */
+  padding: 10px 20px;
+  background-color: #ff007f;
+  color: #ffffff;
+  font-size: 28px;
+  border: none;
+  cursor: pointer;
+  /* Definicja animacji pulsowania */
+  animation-name: pulsowanie;
+  animation-duration: 1s;
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+}
+
+/* Definicja keyframes dla animacji pulsowania */
+@keyframes pulsowanie {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+W powyższym przykładzie, przycisk o id "kotakt" zostanie animowany przy użyciu zdefiniowanej animacji "pulsowanie". Animacja będzie trwała 1 sekundę, będzie miała funkcję czasową "ease-in-out" (co oznacza, że będzie miała łagodne przyśpieszenie na początku i na końcu), będzie powtarzała się w nieskończoność (dzięki ustawieniu "animation-iteration-count" na "infinite") i będzie powodowała pulsowanie przycisku w skali, zmieniając jego rozmiar od 100% do 120% i z powrotem do 100% w trakcie jednej sekundy. Możesz dostosować parametry animacji, takie jak czas trwania, funkcja czasowa czy skala, aby uzyskać pożądany efekt.
+
+
+.kotakt:active {
+    /* Изменяем цвет обводки при нажатии на кнопку */
+    background-color: #ff0055;
+}
+
+#nav:link {
+    color: #rgb(184, 53, 129);
+}
+
+#coop {
+    text-align: center;
+}
+
+#text {
+    font-size: 1.4em;
+    position: absolute;
+    color: #424649;
+    top: 100%;
+    left: 25%;
+    width: 50%;
+    height: 180%;
+    text-align: justify;
+}
+
+header {
+    position: static;
+    top: 0;
+    left: 0;
+    right: 0;
+    background-color: #fff;
+    padding: 10px;
+    z-index: 999; /* Чтобы header был поверх остального контента */
+}
+
+.dropdown {
+    display: none; /* Полностью скрываем элемент с классом "dropdown" */
+}
+
+@media (orientation: portrait) {
+    #logo {
+        margin: 0;
+    }
+
+    /* Стили для выпадающего списка на маленьких экранах */
+    .dropdown {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+    }
+
+    .dropdown-toggle {
+        background-color: transparent;
+        color: #fff;
+        font-size: 32px;
+        padding: 20px;
+        border: none;
+        cursor: pointer;
+        margin-left: auto;
+        width: 100px;
+        height: 100px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .dropdown-toggle:hover {
+        background-color: rgba(0, 0, 0, 0.1); /* Add a slight hover effect */
+    }
+
+    .dropdown-toggle:before { /* Add a "<" or ">" sign using pseudo-element */
+        content: "<";
+        font-size: 48px;
+    }
+
+    .dropdown.open .dropdown-toggle:before { /* Change sign to ">" when menu is open */
+        content: ">";
+    }
+
+    .dropdown-menu {
+        display: none;
+        position: absolute;
+        top: 100%;
+        right: 0;
+        z-index: 1;
+        min-width: 320px;
+        padding: 10px 0;
+        margin: 0;
+        background-color: #fff;
+        border: 1px solid #ced4da;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    .dropdown.open .dropdown-menu {
+            display: block;
+    }
+
+    .dropdown-item {
+        display: block;
+        padding: 20px;
+        font-size: 32px;
+        color: #333;
+        text-decoration: none;
+        cursor: pointer;
+    }
+
+    .dropdown-item:hover {
+        background-color: #f8f9fa;
+    }
+
+    #links {
+        display: none;
+    }
+
+    nav {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        gap: 5px;
+    }
+
+    nav a {
+        font-size: 1.5em;
+    }
+    body {
+        background-color: hsl(0, 42%, 21%, 0.3);
+        background-repeat: no-repeat;
+        background-size: 150%;
+        --bs-backdrop-opacity: 50;
+        font-family: "Monospace", Times, serif;
+    }
+
+    #links {
+        position: absolute;
+        right: 5%; /* смещаем вправо */
+        top: 3%; /* смещаем вверх */
+    }
+
+    a:link,
+    a:visited,
+    a:hover,
+    a:active {
+        color: rgb(184, 53, 129);
+        background-color: transparent;
+        text-decoration: none;
+    }
+
+    #o_nas {
+        position: relative;
+        font-size: 2em; /* уменьшаем размер шрифта */
+        text-decoration-color: rgb(184, 53, 129);
+    }
+
+    #kotakt {
+        position: relative;
+        left: 15%; /* смещаем влево */
+        text-decoration-color: rgb(184, 53, 129);
+        font-size: 2em; /* уменьшаем размер шрифта */
+    }
+
+    #nav:link {
+        color: rgb(184, 53, 129);
+    }
+
+    #coop {
+        text-align: center;
+    }
+
+    #text {
+        font-size: 1em; /* уменьшаем размер шрифта */
+        position: relative;
+        color: #424649;
+        top: 20%; /* смещаем вверх */
+        left: 5%; /* смещаем влево */
+        width: 90%; /* изменяем ширину */
+        height: auto; /* автоматическая высота */
+        text-align: justify;
+    }
+    /* Добавляем стили для увеличения высоты header на мобильных устройствах */
+    .header {
+        height: 1200px; /* Устанавливаем желаемую высоту */
+    }
+}

kotec.pl/index.html

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Kotec</title>
+    <link rel="stylesheet" href="css/styles.css">
+    <link rel="stylesheet" href="css/onas.css">
+    <link rel="stylesheet" href="css/modal.css">
+</head>
+<body>
+<div id="header">
+    <a href="#"><img id="logo" src="images/logo.png"></a>
+    <div id="links">
+        <nav>
+            <a href="#o_nas" class="o_nas">O nas</a>
+            <a href="#o_nas" class="o_nas">blog</a>
+            <a class="kotakt" onclick="openModal()">KOTakt</a>
+        </nav>
+    </div>
+    <div class="dropdown">
+        <button class="dropdown-toggle" type="button" id="dropdownMenuButton">
+
+        </button>
+        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+            <li class="dropdown-item"><a href="#onas">O nas</a></li>
+            <li class="dropdown-item"><a href="#kontakt">KOTakt</a></li>
+        </ul>
+    </div>
+    <div class="header-section">
+      <div class="header-left">
+        <h1 id="coop">Kooperatywa technologiczna Kotec</h1>
+        <p class="slogan">autonomia cyfrowa</p>
+          <a class="kotakt" onclick="openModal()">KOTakt</a>
+      </div>
+      <div class="header-right">
+        <a href="#"><img class="onas" src="images/onas.png"></a>
+      </div>
+    </div>
+</div>
+
+  <!-- Dodajemy zawartość okna modalnego -->
+<div id="myModal" class="modal">
+  <div class="modal-content">
+    <span class="close" onclick="closeModal()">&times;</span>
+      <form class="modal-image" id="orderForm" action="send_order.php" method="post">
+        <!-- Добавляем текстовые подсказки к полям -->
+        <label for="name">Imię:</label>
+        <input type="text" id="name" name="name" placeholder="Mruczek">
+        <label for="email">E-mail:</label>
+        <input type="email" id="email" name="email" placeholder="mruczekpurrfectmail@kotec.pl">
+        <label for="phone">Numer telefonu / Nickname na Telegramie:</label>
+        <input type="text" id="phone" name="phone" placeholder="+48 107 111 116 / @mruczek">
+        <label for="problem">Opis problemu:</label>
+        <textarea id="problem" name="problem" placeholder="Rozwój nowego systemu zarządzania projektami, który umożliwi biznesmenowi-kociakowi bardziej efektywne zarządzanie swoim zespołem i skróci czas realizacji projektów."></textarea>
+        <!-- Добавляем кнопку для отправки формы -->
+        <input type="submit" value="Wyślij zamówienie">
+      </form>
+  </div>
+</div>
+
+<div id="text"><br>
+<div id="div1">
+    <h3 id="onas">O nas</h3><br>
+Jesteśmy kolektywem technologicznym nastawionym na autonomię cyfrową. Uważamy, że wolne oprogramowanie i federacja są drogą do bardzo potrzebnej nam transformacji technologii. Sprzeciwiamy się monopolizacji Internetu i big tech oraz inwigilacji. Opieramy swoje działania na ekonomii solidarnościowej, czyli wzajemnej pomocy i transparentności. Ważne jest dla nas tworzenie bezpiecznego, stabilnego zatrudnienia dla członków.
+<br><br><br></div><div id="div2">
+<h3>Czym się zajmujemy</h3><br>
+Oferujemy szeroki zakres usług informatycznych i wsparcia technologicznego, zwłaszcza dla artystów, grup aktywistycznych, organizacji non-profit i innych spółdzielni, które chcą uniezależnić się od korporacyjnych narzędzi.
+<br><br><b>Nasze umiejętności:</b><br>
+- hosting między innymi w oparciu o <a href="https://coopcloud.tech">Co-op Cloud</a><br>
+- grafika komputerowa<br>
+- naprawa sprzętów elektronicznych<br>
+- udostępnianie narzędzi do organizacji pracy (Nextcloud, Kanboard, Matrix i <a href="https://recipes.coopcloud.tech">wiele innych</a>)<br>
+- tłumaczenia (francuski, angielski, rosyjski)<br>
+- zarządzanie serwerami Linux<br>
+- projektowanie i druk 3D<br>
+i wiele innych
+<br><br><br><br></div><footer>
+<h5 id="kontakt">Skontaktuj się z nami pod adresem: KOTakt@kotec.pl</h5></footer>
+</div>
+<script src="js/script.js"></script>
+<script src="js/modal.js"></script>
+</body>
+</html>

kotec.pl/js/modal.js

@@ -0,0 +1,19 @@
+// Funkcja do otwierania okna modalnego
+function openModal() {
+  document.getElementById("myModal").style.display = "block";
+}
+
+// Funkcja do zamykania okna modalnego
+function closeModal() {
+  document.getElementById("myModal").style.display = "none";
+}
+
+// Obsługa wysyłki formularza
+document.getElementById("orderForm").addEventListener("submit", function(event) {
+  // Blokujemy domyślne zachowanie formularza (przeładowanie strony)
+  event.preventDefault();
+
+  // Tutaj można dodać kod do wysłania formularza, np. za pomocą AJAX
+  // Po udanej wysyłce można zamknąć okno modalne
+  closeModal();
+});

kotec.pl/js/script.js

@@ -0,0 +1,17 @@
+// Обработчик события клика на кнопке выпадающего списка
+document.querySelector('.dropdown-toggle').addEventListener('click', function() {
+    // Получаем элемент выпадающего списка
+    var dropdownMenu = document.querySelector('.dropdown-menu');
+    // Получаем родительский элемент .dropdown
+    var dropdown = document.querySelector('.dropdown');
+    // Проверяем текущее состояние списка
+    if (dropdownMenu.style.display === 'block') {
+        // Если список открыт, то закрываем его и удаляем класс .open
+        dropdownMenu.style.display = 'none';
+        dropdown.classList.remove('open');
+    } else {
+        // Если список закрыт, то открываем его и добавляем класс .open
+        dropdownMenu.style.display = 'block';
+        dropdown.classList.add('open');
+    }
+});