431 lines
27 KiB
HTML
431 lines
27 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<link rel="preconnect" href="https://avtopost.kultmost.ru">
|
||
<link rel="dns-prefetch" href="https://avtopost.kultmost.ru">
|
||
<link rel="manifest" href="/manifest.json">
|
||
<link rel="icon" type="image/ico" href="/static/favicon.ico">
|
||
<link rel="icon" type="image/ico" sizes="256x256" href="/static/favicon.ico">
|
||
<link rel="apple-touch-icon" type="image/ico" href="/static/favicon.ico">
|
||
<meta name="theme-color" content="#5F1798"/>
|
||
<title>{% block title %}{% endblock %}</title>
|
||
{% block head %}{% endblock %}
|
||
<style>
|
||
{% raw %}
|
||
h1,h2,h3,p {
|
||
max-width: 100%;
|
||
overflow-wrap: break-word;
|
||
word-break: break-word;
|
||
}
|
||
html{display: flex;justify-content: center;}
|
||
input, button {touch-action: manipulation;}
|
||
picture{cursor: zoom-in;}
|
||
.ba { cursor: pointer; box-shadow: 0 4px 14px -4px rgba(95,23,152,.5); transition: transform .18s, box-shadow .18s, background .18s; }
|
||
.ba:hover { background: #6d1ba9; transform: translateY(-2px); box-shadow: 0 10px 24px -6px rgba(95,23,152,.6); }
|
||
.ba:active { transform: translateY(0); box-shadow: 0 4px 12px -4px rgba(95,23,152,.5); }
|
||
@media (prefers-reduced-motion: reduce) { .ba:hover, .ba:active { transform: none; } }
|
||
*{margin:unset;box-sizing:border-box;position:relative;transition:300ms}button,input{all:unset}button,a{cursor:pointer}input{cursor:auto}button>span{text-wrap:nowrap}@font-face{font-family:"Inter";font-style:normal;font-weight:100;font-display:swap;src:url(/static/Inter-Thin.woff2) format("woff2")}@font-face{font-family:"Inter";font-style:normal;font-weight:200;font-display:swap;src:url(/static/Inter-ExtraLight.woff2) format("woff2")}@font-face{font-family:"Inter";font-style:normal;font-weight:300;font-display:swap;src:url(/static/Inter-Light.woff2) format("woff2")}@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(/static/Inter-Regular.woff2) format("woff2")}@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(/static/Inter-Medium.woff2) format("woff2")}@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(/static/Inter-SemiBold.woff2) format("woff2")}@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url(/static/Inter-Bold.woff2) format("woff2")}@font-face{font-family:"Inter";font-style:normal;font-weight:800;font-display:swap;src:url(/static/Inter-ExtraBold.woff2) format("woff2")}@font-face{font-family:"Inter";font-style:normal;font-weight:900;font-display:swap;src:url(/static/Inter-Black.woff2) format("woff2")}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/KFOmCnqEu92Fr1Mu4mxK.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/KFOlCnqEu92Fr1MmEU9fCRc4EsA.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/KFOlCnqEu92Fr1MmEU9fABc4EsA.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/KFOlCnqEu92Fr1MmEU9fChc4EsA.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/KFOlCnqEu92Fr1MmWUlfCRc4EsA.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/KFOlCnqEu92Fr1MmWUlfABc4EsA.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-display:swap;src:url(/static/fonts/KFOlCnqEu92Fr1MmYUtfCRc4EsA.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-display:swap;src:url(/static/fonts/KFOlCnqEu92Fr1MmYUtfABc4EsA.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-display:swap;src:url(/static/fonts/KFOlCnqEu92Fr1MmYUtfChc4EsA.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-display:swap;src:url(/static/fonts/KFOlCnqEu92Fr1MmYUtfBBc4.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}::-webkit-scrollbar{height:5px}::-webkit-scrollbar-track{background:#0000}::-webkit-scrollbar-thumb{background:#BDBDBD}::-webkit-scrollbar-thumb:hover{background:#323d5b;border-radius:10px}body{scrollbar-width:none;max-width:1600px;display:grid;justify-content:center}body::-webkit-scrollbar{display:none}:root{font-family:Inter,sans-serif;font-feature-settings:"liga" 1,"calt" 1}a{text-decoration:none}*,::before,::after{box-sizing:border-box}.modal{transition:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000c;display:flex;justify-content:center;align-items:center}.close{position:fixed;top:20px;right:30px;color:#fff;font-size:40px;cursor:pointer}#modalLink{transition:none;display:flex;position:fixed;bottom:13px;justify-content:center;width:335px;border-radius:1em;height:38px;gap:5px;align-items:center;background:#5F1798}
|
||
{% endraw %}
|
||
</style>
|
||
<style>
|
||
{% raw %}
|
||
.toast-container {position: fixed;top: 16px;right: 16px;display: flex;flex-direction: column;gap: 10px;z-index: 9999;pointer-events: none;}.toast {pointer-events: auto;width: 365px;max-width: calc(100vw - 40px);background: linear-gradient(90deg,#5f1798,#652895);color: #fff;border-radius: 10px;box-shadow: 0 8px 24px rgba(0,0,0,0.18);overflow: hidden;transform: translateX(110%);opacity: 0;transition: transform 360ms cubic-bezier(.2,.9,.3,1), opacity 260ms;display: flex;flex-direction: column;}.toast.show {transform: translateX(0);opacity: 1;}.toast .accent {height: 6px;width: 100%;}.toast.info .accent { background: linear-gradient(90deg,#0066ff,#3aa0ff); }.toast.error .accent { background: linear-gradient(90deg,#ff3b30,#ff7b7b); }.toast-header {padding: 10px 12px;font-size:18px;font-weight: 500;display:flex;align-items:center;justify-content:space-between;gap:8px;}.toast-body {padding: 10px 12px 14px;font-size:14px;}.toast-actions {display:flex;gap:8px;}.toast-close {background: transparent;border: none;font-weight:700;cursor:pointer;color: #666;padding:4px;border-radius:6px;}.toast-close:active { transform: scale(.98); }
|
||
{% endraw %}
|
||
</style>
|
||
<style>
|
||
{%raw%}
|
||
.offer-label{display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none;font-size:15px;color:#333}.offer-checkbox{appearance:none;-webkit-appearance:none;width:22px;height:22px;border:2px solid #ccc;border-radius:6px;background-color:#fff;margin:0;flex-shrink:0;transition:all .25s ease;cursor:pointer;box-shadow:0 1px 3px #00000014}.offer-checkbox:hover{background-color:#5e17988f;box-shadow:0 0 0 3px #5F179826}.offer-checkbox:checked{background-color:#5F1798;box-shadow:0 0 0 3px #5F179826}.offer-checkbox:checked::after{content:'';display:block;width:100%;height:100%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M20.285 6.293a1 1 0 00-1.414 0L9 16.172 5.129 12.3a1 1 0 00-1.414 1.414l4.95 4.95a1 1 0 001.414 0l10.586-10.586a1 1 0 000-1.414z'/%3E%3C/svg%3E");background-size:14px;background-position:center;background-repeat:no-repeat}.offer-label:hover .offer-checkbox{border-color:#5F1798}.offer-checkbox:disabled{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed}.dd-modal-backdrop{position:fixed;inset:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:1999}.dd-modal{background:#fff;padding:16px;border-radius:8px;min-width:320px;max-width:90%;box-shadow:0 6px 24px #0003}.dd-modal .dd-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.dd-modal .dd-body{max-height:50vh;overflow:auto;margin-bottom:12px}.dd-modal .dd-actions{text-align:right}.dd-actions > button{border-radius:5px;background:#5F1798;color:#fff;padding:8px 15px}.dd-modal button{cursor:pointer}.dd-close{background:transparent;border:0;font-size:18px}.dd-option{display:flex;align-items:center;gap:8px;padding:6px 4px;border-radius:4px}.dd-option:hover{background:#f4f4f4}
|
||
{% endraw %}
|
||
</style>
|
||
<style>
|
||
.b {
|
||
cursor: pointer;
|
||
transition: transform 0.1s linear, box‑shadow 0.1s linear;
|
||
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||
}
|
||
|
||
.b:active {
|
||
transform: scale(0.9);
|
||
box-shadow: 5px 5px 5px rgba(95, 23, 152, 0.32);
|
||
}
|
||
.some-class{ display: flex;
|
||
height: 24px;
|
||
gap: 7px;
|
||
align-items: center;}
|
||
#modalToolTip {
|
||
display: none;z-index: 2000;
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: auto;
|
||
align-items: center;
|
||
background-color: rgba(0,0,0,0.4);
|
||
}
|
||
|
||
.modal-content {
|
||
background-color: #fefefe;
|
||
margin: 15% auto;
|
||
padding: 20px;
|
||
border: 1px solid #888;
|
||
width: 80%;
|
||
border-radius: 10px;
|
||
overflow: auto;
|
||
max-height: 98%;
|
||
}
|
||
|
||
.close {
|
||
color: white;
|
||
float: right;
|
||
font-size: 28px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.close:hover,
|
||
.close:focus {
|
||
color: rgb(211, 211, 211);
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
}
|
||
.dd-option>span{display: flex;
|
||
justify-content: space-between;align-items: center;
|
||
width: 100%;}
|
||
</style>
|
||
</head>
|
||
<body {% if request.cookies.zoom%}style="zoom: {{ request.cookies.zoom }}%"{%endif%} onload="adjustBodyStyle()">
|
||
<script>
|
||
function setSecureCookie(name, value, days = 7) {const date = new Date();date.setTime(date.getTime() + (days * 86400000));document.cookie = `${name}=${encodeURIComponent(value)}; expires=${date.toUTCString()}; path=/; SameSite=Strict; Secure`;}
|
||
var userAgent = navigator.userAgent;var isFirefox = userAgent.indexOf("Firefox") !== -1;function isOldFirefox() {var match = userAgent.match(/Firefox\/(\d+)/);return match && parseInt(match[1], 10) < 126;};function iOS() {return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) || (userAgent.includes("Mac") && "ontouchend" in document);};function adjustBodyStyle() {var body = document.body;var width;if (iOS()) {width = screen.width;} else {width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 360;};const zoom = (width < 700) ? width * 100 / 400 : (width < 900) ? width * 100 / 800 : width * 100 / 1600;if (isFirefox && isOldFirefox()) {body.style.MozTransform = `scale(${zoom}%)`;body.style.MozTransformOrigin = '0% 0%';body.style.width = (width < 901) ? '360px' : '1600px';body.style.position = 'absolute';};setSecureCookie("zoom", zoom, 7);body.style.zoom = `${zoom}%`;};adjustBodyStyle();window.addEventListener('resize', adjustBodyStyle, { passive: true });
|
||
</script>
|
||
{% block content %}{% endblock %}
|
||
<div id="modal" class="modal" style="display: none;cursor: zoom-out;">
|
||
<span class="close" onclick="closeModalPic()">×</span>
|
||
<div style="width: 100%;height: 100%; position: absolute;" onclick="closeModalPic()"></div>
|
||
<img id="modalImg" alt="" src="/static/painter.svg" onclick="closeModalPic()" style="height: 100%;position: absolute;left: 0;transition: none;min-width: 100%;object-fit: scale-down;" />
|
||
<a id="modalLink" style="color: white;text-align: center;display: none;">
|
||
<span id="modalLinkText"></span>
|
||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#FFFFFF"><path d="m256-240-56-56 384-384H240v-80h480v480h-80v-344L256-240Z"/></svg>
|
||
</a>
|
||
</div>
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
document.querySelectorAll('picture').forEach(picture => {
|
||
picture.addEventListener('click', function() {
|
||
const img = picture.querySelector('img');
|
||
const modalImg = document.getElementById('modalImg');
|
||
const modal = document.getElementById('modal');
|
||
const modalLink = document.getElementById('modalLink');
|
||
const modalLinkText = document.getElementById('modalLinkText');
|
||
let node = picture.parentElement;
|
||
while (node) {
|
||
if (node.tagName && node.tagName.toLowerCase() === 'a') {
|
||
return;
|
||
}
|
||
node = node.parentElement;
|
||
}
|
||
if (img.dataset.src){
|
||
modalImg.src = img.dataset.src;
|
||
} else {
|
||
modalImg.src = img.src;
|
||
}
|
||
if (picture.dataset.link && picture.dataset.label) {
|
||
modalLink.href = picture.dataset.link;
|
||
modalLinkText.textContent = picture.dataset.label;
|
||
modalLink.style.display = 'flex';
|
||
} else {
|
||
modalLink.style.display = 'none';
|
||
}
|
||
modal.style.display = 'flex';
|
||
|
||
});
|
||
});
|
||
});
|
||
function closeModalPic() {const modalImg = document.getElementById('modalImg');modalImg.src = '';document.getElementById('modal').style.display = 'none';}
|
||
</script>
|
||
<script>
|
||
{% raw %}
|
||
function showToast(e={}){let{message:t="",status:a="info",duration:l=4e3}=e,n=document.querySelector(".toast-container");n||((n=document.createElement("div")).className="toast-container",document.body.appendChild(n));let s=document.createElement("div");s.className=`toast ${a}`;let d=document.createElement("div");d.className="accent";let c=document.createElement("div");c.className="toast-header";let i=document.createElement("div");i.textContent=t;let o=document.createElement("button");o.className="toast-close",o.innerHTML="✕",c.appendChild(i),c.appendChild(o),s.appendChild(d),s.appendChild(c),n.appendChild(s),requestAnimationFrame(()=>s.classList.add("show"));let r=!1,p=()=>{r||(r=!0,s.classList.remove("show"),setTimeout(()=>{s.parentNode&&s.parentNode.removeChild(s)},380))};return o.addEventListener("click",p),s.addEventListener("click",e=>{e.target===s&&p()}),l>0&&setTimeout(p,l),{close:p}}
|
||
{% endraw %}
|
||
{% if notify %}
|
||
showToast({message: '{{notify.text}}', status: '{{notify.status}}', duration:{{notify.duration}}});
|
||
{% endif %}
|
||
</script>
|
||
<div id="shareModal"
|
||
style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);align-items:center;justify-content:center;z-index: 3000;">
|
||
<div style="background:#fff;padding:16px;border-radius:8px;min-width:260px;"><button id="closeModal"
|
||
style="float:right">×</button>
|
||
<h3>Поделиться</h3>
|
||
<div id="socialLinks" style="display:flex;gap:8px;margin-top:8px;flex-wrap: wrap;">
|
||
<!-- <a id="tw" href="#" target="_blank" rel="noopener"><img /></a> --><a id="fb" href="#" target="_blank"
|
||
rel="noopener"><img loading="lazy" alt="share link facebook" src="/static/icons/facebook.svg"></a><a id="vk" href="#" target="_blank"
|
||
rel="noopener"><img loading="lazy" alt="share link vk" src="/static/icons/vk.svg"></a><a id="tg" href="#" target="_blank"
|
||
rel="noopener"><img loading="lazy" alt="share link telegram" src="/static/icons/telegram.svg"></a><a id="ok" href="#" target="_blank"
|
||
rel="noopener"><img loading="lazy" alt="share link ok" src="/static/icons/ok.svg"></a><a id="wa" href="#" target="_blank"
|
||
rel="noopener"><img loading="lazy" alt="share link wapp" src="/static/icons/wapp.svg"></a><a id="inst" href="#" target="_blank"
|
||
rel="noopener"><img loading="lazy" alt="share link instagram" src="/static/icons/instagram.svg"></a><button id="copyBtn"
|
||
style="display: flex;align-items: center;gap: 5px;">Скопировать ссылку<img loading="lazy" alt="copy link for share"
|
||
src="/static/icons/copy.svg"> <span id="copyMsg"
|
||
style="margin-left:8px;color:green;display:none;">Скопировано!</span></button></div>
|
||
</div>
|
||
</div>
|
||
<script defer src="/static/script/share.js"></script>
|
||
<script>document.addEventListener('DOMContentLoaded', () => {
|
||
const shareModal = document.getElementById('shareModal');
|
||
const closeshareModal = document.getElementById('closeModal');
|
||
const fb = document.getElementById('fb');
|
||
const vk = document.getElementById('vk');
|
||
const tg = document.getElementById('tg');
|
||
const ok = document.getElementById('ok');
|
||
const wa = document.getElementById('wa');
|
||
const inst = document.getElementById('inst');
|
||
const copyBtn = document.getElementById('copyBtn');
|
||
const copyMsg = document.getElementById('copyMsg');
|
||
function buildShareUrl(platform, url, text = '') {
|
||
const u = encodeURIComponent(url);
|
||
const t = encodeURIComponent(text);
|
||
switch (platform) {
|
||
case 'tw': return `https://twitter.com/intent/tweet?url=${u}&text=${t}`;
|
||
case 'vk': return `https://vk.com/share.php?url=${u}&title=${t}`;
|
||
case 'tg': return `https://telegram.me/share/url?url=${u}&text=${t}`;
|
||
case 'fb': return `https://www.facebook.com/sharer/sharer.php?u=${u}"e=${t}`;
|
||
case 'ok': return `https://connect.ok.ru/offer?url=${u}&title=${t}`;
|
||
case 'wa': return `https://api.whatsapp.com/send?text=${t} ${u}`;
|
||
case 'inst': return `https://www.instagram.com/?url=${u}`;
|
||
default: return '#';
|
||
}
|
||
}
|
||
const shareBtns = document.querySelectorAll('#shareBtn');
|
||
shareBtns.forEach(btn => {
|
||
btn.addEventListener('click', async () => {
|
||
const link = window.location.origin + btn.dataset.link || window.location.href;
|
||
const text = btn.dataset.text || document.title;
|
||
const image = btn.dataset.image;
|
||
const imagetext = btn.dataset.imagetext || '';
|
||
let blob = null;
|
||
let file = null;
|
||
let objectUrl = null;
|
||
try {
|
||
if (image) {
|
||
const imageUrl = window.location.origin + image;
|
||
// В обработчике кнопки
|
||
const blob = await imageWithTextBlob(imageUrl, imagetext, {
|
||
textColor: '#5F1798',
|
||
});
|
||
console.log(`Generated blob for "${imagetext}" | size: ${blob.size} | url: ${imageUrl}`);
|
||
const filename = `shared-image-${Date.now()}.png`;
|
||
file = new File([blob], filename, { type: blob.type });
|
||
// Создаём object URL только если хотим (необязательно для navigator.share)
|
||
objectUrl = URL.createObjectURL(file);
|
||
if (navigator.canShare && navigator.canShare({ files: [file] })) {
|
||
await navigator.share({
|
||
title: text,
|
||
text: text,
|
||
url: link,
|
||
files: [file],
|
||
});
|
||
} else {
|
||
await navigator.share({
|
||
title: text,
|
||
text: '',
|
||
url: link,
|
||
});
|
||
}
|
||
} else {
|
||
await navigator.share({ title: text, text: '', url: link });
|
||
}
|
||
} catch (err) {
|
||
openshareModal(link, text);
|
||
} finally {
|
||
// Очистка
|
||
try {
|
||
if (objectUrl) {
|
||
URL.revokeObjectURL(objectUrl);
|
||
objectUrl = null;
|
||
}
|
||
} catch (e) { /* ignore */ }
|
||
// Удаляем ссылки, чтобы GC мог собрать объекты
|
||
blob = null;
|
||
file = null;
|
||
}
|
||
});
|
||
});
|
||
function openshareModal(link, text) {
|
||
vk.href = buildShareUrl('vk', link, text);
|
||
tg.href = buildShareUrl('tg', link, text);
|
||
fb.href = buildShareUrl('fb', link, text);
|
||
ok.href = buildShareUrl('ok', link, text);
|
||
wa.href = buildShareUrl('wa', link, text);
|
||
inst.href = buildShareUrl('inst', link, text);
|
||
shareModal.style.display = 'flex';
|
||
copyBtn.dataset.link = link;
|
||
shareModal.style.display = 'flex'
|
||
}
|
||
closeshareModal.addEventListener('click', () => {
|
||
shareModal.style.display = 'none';
|
||
});
|
||
shareModal.addEventListener('click', (e) => {
|
||
if (e.target === shareModal) shareModal.style.display = 'none';
|
||
});
|
||
async function copyToClipboard(text) {
|
||
try {
|
||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||
await navigator.clipboard.writeText(text);
|
||
} else {
|
||
const ta = document.createElement('textarea');
|
||
ta.value = text;
|
||
ta.style.position = 'fixed';
|
||
ta.style.left = '-9999px';
|
||
document.body.appendChild(ta);
|
||
ta.select();
|
||
document.execCommand('copy');
|
||
document.body.removeChild(ta);
|
||
}
|
||
showCopyMessage();
|
||
} catch (e) {
|
||
showToast({message: 'Не удалось скопировать ссылку', status: 'error'});
|
||
}
|
||
}
|
||
function showCopyMessage() {
|
||
copyMsg.style.display = 'inline';
|
||
setTimeout(() => copyMsg.style.display = 'none', 2000);
|
||
}
|
||
copyBtn.addEventListener('click', () => {
|
||
const link = copyBtn.dataset.link || window.location.href;
|
||
copyToClipboard(link);
|
||
});
|
||
});</script>
|
||
<script>
|
||
let deferredPrompt = null;
|
||
let hasUserInteracted = false;
|
||
let promptTimeout = null;
|
||
|
||
if ('serviceWorker' in navigator) {
|
||
navigator.serviceWorker.register('/sw.js').then(reg => {
|
||
reg.addEventListener('updatefound', () => {
|
||
const newWorker = reg.installing;
|
||
newWorker.addEventListener('statechange', () => {
|
||
if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
|
||
console.log('New Service Worker ready');
|
||
}
|
||
});
|
||
});
|
||
});
|
||
|
||
navigator.serviceWorker.addEventListener('message', event => {
|
||
if (event.data.type === 'SW_UPDATED') {
|
||
console.log('New Service Worker activated – reloading...');
|
||
window.location.reload();
|
||
}
|
||
});
|
||
}
|
||
|
||
window.addEventListener('beforeinstallprompt', (e) => {
|
||
e.preventDefault();
|
||
deferredPrompt = e;
|
||
console.log('beforeinstallprompt: готово к установке');
|
||
});
|
||
|
||
|
||
const markInteractionAndTryShow = () => {
|
||
if (hasUserInteracted) return;
|
||
hasUserInteracted = true;
|
||
|
||
document.removeEventListener('click', markInteractionAndTryShow);
|
||
document.removeEventListener('keydown', markInteractionAndTryShow);
|
||
document.removeEventListener('touchstart', safeTouchHandler);
|
||
|
||
tryShowInstallPrompt();
|
||
};
|
||
|
||
let touchMoved = false;
|
||
const safeTouchHandler = (e) => {
|
||
if (e.touches.length > 1) return;
|
||
document.addEventListener('touchmove', () => touchMoved = true, { once: true });
|
||
document.addEventListener('touchend', () => {
|
||
if (!touchMoved) markInteractionAndTryShow();
|
||
touchMoved = false;
|
||
}, { once: true });
|
||
};
|
||
|
||
document.addEventListener('click', markInteractionAndTryShow, { passive: true });
|
||
document.addEventListener('keydown', markInteractionAndTryShow, { passive: true });
|
||
document.addEventListener('touchstart', safeTouchHandler, { passive: true });
|
||
|
||
let scrollAllowed = false;
|
||
const scrollHandler = () => {
|
||
if (scrollAllowed && !hasUserInteracted) markInteractionAndTryShow();
|
||
};
|
||
document.addEventListener('scroll', scrollHandler, { passive: true });
|
||
|
||
document.addEventListener('click', () => scrollAllowed = true, { once: true });
|
||
document.addEventListener('touchstart', () => scrollAllowed = true, { once: true });
|
||
|
||
function tryShowInstallPrompt() {
|
||
if (!deferredPrompt) {
|
||
console.log('Промпт ещё не готов');
|
||
return;
|
||
}
|
||
if (promptTimeout) return;
|
||
|
||
promptTimeout = setTimeout(() => {
|
||
console.log('Показываем install-промпт');
|
||
deferredPrompt.prompt();
|
||
|
||
deferredPrompt.userChoice.then((choiceResult) => {
|
||
if (choiceResult.outcome === 'accepted') {
|
||
console.log('PWA установлен!');
|
||
} else {
|
||
console.log('Установка отклонена');
|
||
}
|
||
deferredPrompt = null;
|
||
promptTimeout = null;
|
||
});
|
||
}, 1500);
|
||
}
|
||
</script>
|
||
<script defer src="/static/script/select.js"></script>
|
||
<div id="dd-modal-root"></div>
|
||
|
||
<div id="modalToolTip">
|
||
<div class="modal-content">
|
||
<span id="closeToolTipBtn" class="close">×</span>
|
||
<p id="modalToolTipText" style="overflow: hidden;white-space: pre-line;"></p>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
const modal = document.getElementById('modalToolTip');
|
||
const modalText = document.getElementById('modalToolTipText');
|
||
const closeBtn = document.getElementById('closeToolTipBtn');
|
||
|
||
document.addEventListener('click', (event) => {
|
||
if (event.target.classList.contains('tooltip-trigger')) {
|
||
modalText.textContent = event.target.getAttribute('data-tooltip');
|
||
modal.style.display = 'flex';
|
||
}
|
||
});
|
||
|
||
closeBtn.onclick = () => {
|
||
modal.style.display = 'none';
|
||
};
|
||
|
||
window.onclick = (event) => {
|
||
if (event.target === modal) {
|
||
modal.style.display = 'none';
|
||
}
|
||
};
|
||
|
||
document.addEventListener('mouseenter', (event) => {
|
||
if (event.target.classList.contains('tooltip-trigger')) {
|
||
modalText.textContent = event.target.getAttribute('data-tooltip');
|
||
modal.style.display = 'block';
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|