Random zápatí backup

<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script type="text/javascript" src='https://cdn.myshoptet.com/usr/code2.kubanavratil.com/user/documents/upload/roastory/roastory_scripts_alt_2.js'></script>
<script type="text/javascript" src='https://cdn.myshoptet.com/usr/code2.kubanavratil.com/user/documents/upload/2026/propojení produktů_1.js'></script>
<script>
$(document).ready(function() {
const quantityOptions = [
{ qty: 6, label: "-3%" },
{ qty: 12, label: "-5%" },
{ qty: 18, label: "-8%" }
];
const $quantityWrapper = $('.p-add-to-cart-wrapper .quantity');
if (!$quantityWrapper.length) return;
const $container = $('<div class="bulk-quantity-buttons"></div>');
quantityOptions.forEach(option => {
const $btn = $('<button type="button" class="bulk-btn"></button>');
$btn.text(option.qty);
$btn.attr('data-qty', option.qty);
if (option.label) {
$btn.attr('data-badge', option.label);
}
$container.append($btn);
});
$quantityWrapper.after($container);
$(document).on('click', '.bulk-btn', function() {
const qty = $(this).data('qty');
$('.p-add-to-cart-wrapper .quantity input')
.val(qty)
.trigger('change');
$('.bulk-btn').removeClass('active');
$(this).addClass('active');
});
});
</script>

<script>
$(function () {

$('.surcharge-list').each(function (i) {

var $row = $(this);
var $select = $row.find('select');
if (!$select.length) return;

var paramName = $select.data('parameter-name') || 'Vyberte';
var modalId = 'customModal_' + i;

// === BUTTON ===
var $btn = $('<button type="button" class="open-modal-btn">')
.text(paramName);

$row.find('td').prepend($btn);

// === MODAL ===
var $modal = $(`
<div class="custom-modal" id="${modalId}">
<div class="custom-modal-overlay"></div>
<div class="custom-modal-content">
<button type="button" class="modal-close">×</button>
<div class="options-wrapper"></div>
</div>
</div>
`);

// === OPTIONS ===
$select.find('option').each(function () {
var $opt = $(this);

if ($opt.data('choose')) return;

var value = $opt.val();
var text = $opt.text();

var safeClass = text
.toLowerCase()
.replace(/[^\w]+/g, '-')
.replace(/^-|-$/g, '');

var $item = $(`
<div class="option-item ${safeClass}" data-value="${value}">
<span class="option-label">${text}</span>
</div>
`);

$modal.find('.options-wrapper').append($item);
});

$('body').append($modal);

// === OPEN ===
$btn.on('click', function () {
$modal.addClass('active');
});

// === CLOSE ===
$modal.on('click', '.modal-close, .custom-modal-overlay', function () {
$modal.removeClass('active');
});

// === OPTION CLICK ===
$modal.on('click', '.option-item', function () {

var value = $(this).data('value');

// --- SET VALUE ---
$select.val(value);
$select.find('option[value="' + value + '"]').prop('selected', true);

// --- TRIGGER SHOPTET PROPERLY ---
if ($select[0]) {
$select[0].dispatchEvent(new Event('input', { bubbles: true }));
$select[0].dispatchEvent(new Event('change', { bubbles: true }));
}

// --- FALLBACK EVENT (Shoptet sometimes needs this) ---
setTimeout(function () {
document.dispatchEvent(new CustomEvent('ShoptetSurchargesPriceUpdated'));
}, 50);

// --- UPDATE BUTTON TEXT ---
$btn.text($(this).text());

// --- CLOSE MODAL ---
$modal.removeClass('active');

});

});

});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script>
(function() {
const T = Math.PI * 2;
const BOX_SIZE = 90;
const CW = 2000;

function applyMirage(imgEl) {
const wrapper = document.createElement('div');
wrapper.style.cssText = 'position:relative; display:inline-block; line-height:0;';
imgEl.parentNode.insertBefore(wrapper, imgEl);
wrapper.appendChild(imgEl);
imgEl.style.display = 'block'; // ← removes inline descender gap

const canvas = document.createElement('canvas');
canvas.width = CW;
canvas.style.cssText = 'position:absolute; top:0; left:0; width:100%; height:100%;';
wrapper.appendChild(canvas);

const ctx = canvas.getContext('2d');

let cRect = canvas.getBoundingClientRect();
let CH = CW;
let sx = CW / cRect.width;
let sy = CH / cRect.height;

const m = { x: CW/2, y: CH/2, s: 1.5, x2: CW/2, y2: CH/2 };
const xTo = gsap.quickTo(m, 'x', { duration: 1, ease: 'expo' });
const yTo = gsap.quickTo(m, 'y', { duration: 1, ease: 'expo' });
const sTo = gsap.quickTo(m, 's', { duration: 2, ease: 'power2' });

let boxes = [];
let running = false;

function init() {
if (running) return;
running = true;

CH = Math.round(CW * (imgEl.naturalHeight / imgEl.naturalWidth));
canvas.height = CH;
imgEl.style.opacity = '0';

m.y = CH / 2;
m.y2 = CH / 2;

cRect = canvas.getBoundingClientRect();
sx = CW / cRect.width;
sy = CH / cRect.height;

boxes = [];
for (let x = 0; x <= CW; x += BOX_SIZE)
for (let y = 0; y <= CH; y += BOX_SIZE)
boxes.push({ x, y, d: 0, s: 0 });

gsap.ticker.add(update);
}

const img = new Image();
img.crossOrigin = 'anonymous';
img.onload = init;
img.src = imgEl.src;

function update() {
const d = Math.hypot(m.x - m.x2, m.y - m.y2);
sTo(d / CW * 2);
ctx.clearRect(0, 0, CW, CH);
ctx.drawImage(img, 0, 0, CW, CH, 0, 0, CW, CH);
boxes.forEach(drawBox);
ctx.globalAlpha = 1;
boxes.forEach(drawDot);
}

function drawBox(c) {
c.d = Math.hypot(c.x - m.x, c.y - m.y);
c.s = 1 - gsap.utils.clamp(0, 1, c.d / CW / m.s);
if (c.s < 0.001) return;
const bs = BOX_SIZE * c.s;
ctx.drawImage(img, c.x + bs/2, c.y + bs/2, BOX_SIZE - bs, BOX_SIZE - bs, c.x, c.y, BOX_SIZE, BOX_SIZE);
}

function drawDot(c) {
ctx.fillStyle = '#fff'; // ← set explicitly on every draw
ctx.beginPath();
ctx.arc(c.x, c.y, BOX_SIZE * 0.15 * c.s, 0, T);
ctx.fill();
}

canvas.addEventListener('pointermove', (e) => {
cRect = canvas.getBoundingClientRect();
sx = CW / cRect.width;
sy = CH / cRect.height;
m.x2 = (e.clientX - cRect.left) * sx;
m.y2 = (e.clientY - cRect.top) * sy;
xTo(m.x2);
yTo(m.y2);
});

window.addEventListener('resize', () => {
cRect = canvas.getBoundingClientRect();
sx = CW / cRect.width;
sy = CH / cRect.height;
});
}

function run() {
const images = document.querySelectorAll('img.mirage');
if (images.length === 0) {
console.warn('Mirage: no img.mirage elements found');
return;
}
images.forEach(applyMirage);
}

if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', run);
} else {
run();
}
})();
</script>