feat: add info popup (#2)

* add info popup * add wikimapia copyright
2025-10-21 01:17:31 +03:00 · 2024-06-09 08:04:37 +03:00
parent 9215bc9522
commit d1085dfcba
7 changed files with 100 additions and 3 deletions
--- a/src/index.html
+++ b/src/index.html
@@ -31,9 +31,66 @@
      .ol-overlay-container > #popup {
        display: unset;
      }
+
+      .info-popup {
+        display: none;
+        position: absolute;
+        top: 0;
+        z-index: 999;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: white;
+        padding: 5rem;
+        font-size: 14pt;
+      }
+
+      .info-popup > footer {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        border-top: 1px solid black;
+        padding: 20px;
+      }
+
+      .info-popup > footer > button {
+        font-size: 14pt;
+        padding: 10px;
+        max-width: 300px;
+      }
    </style>
  </head>
  <body>
+    <div class="info-popup">
+      <h1>Важная информация перед использованием сайта</h1>
+      <h2>Пожалуйста, прочитайте внимательно</h2>
+      <p>
+        На сайте собраны данные о пунктах выдачи заказов (ПВЗ) от разных служб доставок, чтобы вам было удобнее выбирать. <b>Создатели сайта не несут ответственности за точность информации о пунктах выдачи.</b> Информация собирается из открытых источников. Для каждого ПВЗ указан источник, откуда была взята информация, чтобы вы смогли сами проверить.
+      </p>
+      <p>
+        <b>Как пользоваться?</b>
+        <ol>
+          <li>Найдите удобный для вас пункт выдачи заказов на карте.</li>
+          <li>Сканируйте QR-код или переходите по ссылке, чтобы добавить адрес пункта выдачи.</li>
+          <li>В приложении новый пункт выдачи отобразится как "обл. Ростовская, Пункт Партнёра XXXXXX". Не переживайте – это нормально. Просто сделайте заказ на этот адрес.</li>
+          <li>Когда получите уведомление о готовности заказа, приходите в выбранный вами пункт выдачи. Чтобы забрать заказ необходимо будет показать штрих-код из приложения.</li>
+        </ol>
+      </p>
+      <p>Сайт не является коммерческим и не связан ни с одной из служб доставки или с OZON.</p>
+      <p>Все товарные знаки, логотипы и обозначения, упомянутые на сайте, являются собственностью их соответствующих владельцев.</p>
+      <p>Проект является проектом с открытым исходным кодом. Если хотите посмотреть исходный код или поучаствовать в проекте - <a href="https://github.com/Maks1mS/free-ozon-dpr">вот ссылка</a>.</p>
+      <p>Нашли ошибку? Знаете как улучшить сайт? Хотите добавить пункт, который отсутствует? <a href="https://forms.yandex.ru/u/6654bafa90fa7b1b58c67eff/">Напишите нам</a> или создайте Issue на GitHub.</p>
+      <p>Для улучшения работы сайта и анализа трафика мы используем Яндекс Метрику.</p>
+      <p>Мы используем cookie-файлы. Вы можете прочитать подробнее о cookie-файлах или изменить настройки браузера. Продолжая пользоваться сайтом без изменения настроек, вы даёте согласие на использование ваших cookie-файлов.</p>
+      <footer>
+        <label>
+          <input type="checkbox" name="no-show">
+            Больше не показывать
+          </label>
+        <button>Я прочитал и понял прочитанное</button>
+      </footer>
+    </div>
+
    <div id="map" class="map"></div>
    <div id="popup" class="ol-popup">
      <a href="#" id="popup-closer" class="ol-popup-closer">✖</a>
--- a/src/info-popup.js
+++ b/src/info-popup.js
@@ -0,0 +1,22 @@
+import Cookies from "js-cookie";
+
+const HIDE_INFO_POPUP = "hideInfoPopup";
+
+document.addEventListener("DOMContentLoaded", function () {
+    const infoPopup = document.querySelector(".info-popup");
+    const noShowCheckbox = document.querySelector('input[name="no-show"]');
+    const confirmButton = document.querySelector('.info-popup footer button');
+
+    const hidePopupCookie = Cookies.get(HIDE_INFO_POPUP);
+    if (!hidePopupCookie) {
+        infoPopup.style.display = "block";
+      }
+
+    confirmButton.addEventListener("click", function () {
+        if (noShowCheckbox.checked) {
+          Cookies.set(HIDE_INFO_POPUP, "true", { expires: 400 });
+        }
+
+        infoPopup.style.display = "none";
+      });
+});
--- a/src/main.js
+++ b/src/main.js
@@ -2,6 +2,7 @@ import "./style.css";

 import map from "./map";

+import "./info-popup";
 import "./popup";

 import mergedData from "../merged-data.json";
--- a/src/map.js
+++ b/src/map.js
@@ -12,8 +12,10 @@ const MAP_ZOOM = 8.5;

 const customTileSource = new TileLayer({
    source: new XYZ({
-        // url: 'https://tile-server.ozon.ru/tile/default/{z}/{x}/{y}.png'
-
+        attributionsCollapsible: false,
+        attributions: [
+            '&#169; <a href="https://wikimapia.org/">Wikimapia</a>'
+        ],
        tileUrlFunction: ([z, x, y]) => {
            const s = x % 4 + (y % 4) * 4
            return `https://i${s}.wikimapia.org/?x=${x}&y=${y}&zoom=${z}&type=map&lng=1`
--- a/src/style.css
+++ b/src/style.css
@@ -69,5 +69,10 @@ body {
 }

 #popup-operation-time {
-  white-space: pre-line
+  white-space: pre-line;
+}
+
+.ol-attribution a:hover {
+  color: var(--ol-brand-color);
+  text-decoration: underline;
 }