0
0
mirror of https://github.com/Maks1mS/free-ozon-dpr.git synced 2024-12-23 18:42:59 +03:00

Compare commits

...

4 Commits

Author SHA1 Message Date
799de028da fix favicon 2024-06-09 08:21:13 +03:00
baa73c0c2e fix: hide map while popup is opened 2024-06-09 08:14:56 +03:00
be1acbbbf8 fix: remove padding on mobile 2024-06-09 08:10:27 +03:00
d1085dfcba
feat: add info popup (#2)
* add info popup

* add wikimapia copyright
2024-06-09 08:04:37 +03:00
8 changed files with 114 additions and 4 deletions

9
package-lock.json generated
View File

@ -9,6 +9,7 @@
"version": "0.0.0",
"dependencies": {
"fastest-levenshtein": "^1.0.16",
"js-cookie": "^3.0.5",
"jsdom": "^24.1.0",
"modern-async": "^2.0.0",
"node-fetch": "^3.3.2",
@ -1887,6 +1888,14 @@
"integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
"dev": true
},
"node_modules/js-cookie": {
"version": "3.0.5",
"resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
"integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
"engines": {
"node": ">=14"
}
},
"node_modules/js-yaml": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",

View File

@ -20,6 +20,7 @@
},
"dependencies": {
"fastest-levenshtein": "^1.0.16",
"js-cookie": "^3.0.5",
"jsdom": "^24.1.0",
"modern-async": "^2.0.0",
"node-fetch": "^3.3.2",

View File

@ -31,9 +31,73 @@
.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: 1rem;
font-size: 14pt;
}
.info-popup-content {
max-width: 1000px;
margin: 0 auto;
}
.info-popup-content > footer {
display: flex;
flex-direction: column;
gap: 1rem;
border-top: 1px solid black;
padding: 20px;
}
.info-popup-content > footer > button {
font-size: 14pt;
padding: 10px;
max-width: 300px;
}
</style>
</head>
<body>
<div class="info-popup">
<div class="info-popup-content">
<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>
<div id="map" class="map"></div>
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>

26
src/info-popup.js Normal file
View File

@ -0,0 +1,26 @@
import Cookies from "js-cookie";
import { el } from "./utils.js";
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 map = el("map");
const hidePopupCookie = Cookies.get(HIDE_INFO_POPUP);
if (!hidePopupCookie) {
infoPopup.style.display = "block";
map.style.display = "none";
}
confirmButton.addEventListener("click", function () {
if (noShowCheckbox.checked) {
Cookies.set(HIDE_INFO_POPUP, "true", { expires: 400 });
}
infoPopup.style.display = "none";
map.style.display = "block";
});
});

View File

@ -2,6 +2,7 @@ import "./style.css";
import map from "./map";
import "./info-popup";
import "./popup";
import mergedData from "../merged-data.json";

View File

@ -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`

View File

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

View File

@ -69,5 +69,12 @@ body {
}
#popup-operation-time {
white-space: pre-line
}
white-space: pre-line;
}
.ol-attribution a:hover {
color: var(--ol-brand-color);
text-decoration: underline;
}
.info-popup-content > p { text-align:justify; }