malej Joke snad to bude fungovat

<style>

:root{

--tile-size-desktop: 120px;

--tile-size-mobile: 70px;

--accent-orange: #ff7b1c;

--accent-orange-2: #ff9a3f;

--num-color: #0b0b0b;

--card-bg: rgba(10,15,25,0.95);

--muted: #c7d3de;

--font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;

}

.countdown-block { width:100%; box-sizing:border-box; margin:0 auto; }

.countdown-card{

width:100%;

max-width:900px;

background:var(--card-bg);

border-radius:12px;

padding:12px 18px;

box-shadow:0 16px 50px rgba(0,0,0,0.6);

text-align:center;

color:#fff;

font-family:var(--font-sans);

margin:0 auto;

}

.tiles-row{ display:flex; gap:18px; justify-content:center; align-items:center; flex-wrap:wrap; }

.tile{

border-radius:12px;

background: linear-gradient(180deg,var(--accent-orange),var(--accent-orange-2));

box-shadow: 0 8px 22px rgba(0,0,0,0.45);

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

box-sizing:border-box;

}

.tile .num{ font-weight:900; color:var(--num-color); line-height:1; margin-top:-4px; }

.tile .label{ margin-top:6px; font-size:11px; color: rgba(255,255,255,0.92); text-transform:uppercase; letter-spacing:0.08em; }

.date-line{ margin-top:10px; color:var(--muted); font-size:14px; font-weight:700; }

/* DESKTOP */

.desktop-countdown { display:block; }

.desktop-countdown .countdown-card{ --tile-size: var(--tile-size-desktop); }

.desktop-countdown .tile{ width:var(--tile-size); height:var(--tile-size); min-width:60px; min-height:60px; }

.desktop-countdown .tile .num{ font-size: calc(var(--tile-size) / 2.2); }

/* MOBILE */

.mobile-countdown { display:none; }

.mobile-countdown .countdown-card{ --tile-size: var(--tile-size-mobile); padding:8px 12px; }

.mobile-countdown .tile{ width:var(--tile-size); height:var(--tile-size); min-width:48px; min-height:48px; }

.mobile-countdown .tile .num{ font-size: calc(var(--tile-size) / 2.1); }

.mobile-countdown .date-line{ font-size:13px; color:var(--accent-orange); margin-top:8px; font-weight:700; }

@media (max-width:420px){

.mobile-countdown .tile{ width:60px; height:60px; }

.mobile-countdown .tile .num{ font-size:26px; }

}

/* bezpečnost: pokud nějaký site CSS skrývá blok, JS dá atribut data-force-visible=true */

.desktop-countdown[data-force-visible="true"], .mobile-countdown[data-force-visible="true"] { display:block !important; }

</style>

<div class="tile"><div id="h_desktop" class="num">00</div><div class="label">Hodiny</div></div>

<div class="tile"><div id="m_desktop" class="num">00</div><div class="label">Minuty</div></div>

<div class="tile"><div id="s_desktop" class="num">00</div><div class="label">Vteřiny</div></div>

</div>

</div>

<div class="tile"><div id="h_mobile" class="num">00</div><div class="label">Hodiny</div></div>

<div class="tile"><div id="m_mobile" class="num">00</div><div class="label">Minuty</div></div>

<div class="tile"><div id="s_mobile" class="num">00</div><div class="label">Vteřiny</div></div>

</div>

</div>

(function(){

/* ===== KONFIGURACE ===== */

const TARGET_ISO = "2025-12-24T00:00:00"; // uprav datum

const MOBILE_BREAKPOINT = 768; // px

// kandidáti toolbaru — uprav podle potřeby, první nalezený se použije

const toolbarCandidates = ['.bx-toolbar-items-group','#bx-logo-container','.bx-toolbar','header','.toolbar','.topbar'];

const MAX_TOOLBAR_WAIT_MS = 2000; // jak dlouho čekat na toolbar, pokud se načítá asynchronně

/* ===================== */

// prvky countdownu

const ids = {

d_desktop: document.getElementById('d_desktop'),

h_desktop: document.getElementById('h_desktop'),

m_desktop: document.getElementById('m_desktop'),

s_desktop: document.getElementById('s_desktop'),

date_desktop: document.getElementById('date_desktop'),

d_mobile: document.getElementById('d_mobile'),

h_mobile: document.getElementById('h_mobile'),

m_mobile: document.getElementById('m_mobile'),

s_mobile: document.getElementById('s_mobile'),

date_mobile: document.getElementById('date_mobile'),

block: document.getElementById('countdownBlock'),

wrap_d: document.getElementById('count_desktop'),

wrap_m: document.getElementById('count_mobile')

};

// formátování data

function formatDateOnly(d){

if (isNaN(d)) return '';

const day = d.getDate(), month = d.getMonth()+1, year = d.getFullYear();

return `${day}. ${String(month).padStart(2,'0')}. ${year}`;

}

// countdown logika

const target = new Date(TARGET_ISO);

function pad2(n){ return String(n).padStart(2,'0'); }

function updateAll(){

const now = Date.now();

let diff = Math.floor((target.getTime() - now)/1000);

if (diff < 0) diff = 0;

const days = Math.floor(diff/86400);

const hours = Math.floor((diff%86400)/3600);

const mins = Math.floor((diff%3600)/60);

const secs = diff%60;

const dText = (String(days).length>2?String(days):pad2(days));

const hText = pad2(hours), mText = pad2(mins), sText = pad2(secs);

if (ids.d_desktop) ids.d_desktop.textContent = dText;

if (ids.h_desktop) ids.h_desktop.textContent = hText;

if (ids.m_desktop) ids.m_desktop.textContent = mText;

if (ids.s_desktop) ids.s_desktop.textContent = sText;

if (ids.d_mobile) ids.d_mobile.textContent = dText;

if (ids.h_mobile) ids.h_mobile.textContent = hText;

if (ids.m_mobile) ids.m_mobile.textContent = mText;

if (ids.s_mobile) ids.s_mobile.textContent = sText;

}

// zobrazení správné verze (desktop / mobile)

function applyVisibility(){

const isMobile = (window.innerWidth || document.documentElement.clientWidth) <= MOBILE_BREAKPOINT;

if (ids.wrap_d) { ids.wrap_d.style.display = isMobile ? 'none' : 'block'; ids.wrap_d.setAttribute('data-force-visible', (!isMobile).toString()); }

if (ids.wrap_m) { ids.wrap_m.style.display = isMobile ? 'block' : 'none'; ids.wrap_m.setAttribute('data-force-visible', (isMobile).toString()); }

}

// najdi toolbar podle kandidátů

function findToolbar(){

for (const s of toolbarCandidates){

const el = document.querySelector(s);

if (el) return el;

}

return null;

}

// čekání na toolbar (pokud se načítá později)

function waitForToolbar(timeout = MAX_TOOLBAR_WAIT_MS){

return new Promise(resolve=>{

const found = findToolbar();

if (found) return resolve(found);

let waited = 0;

const step = 120;

const id = setInterval(()=>{

waited += step;

const f = findToolbar();

if (f){ clearInterval(id); return resolve(f); }

if (waited >= timeout){ clearInterval(id); return resolve(null); }

}, step);

});

}

// vloží countdown PO elementu el (insert after)

function insertAfter(el, node){

if (!el || !node) return;

if (el.nextSibling) el.parentNode.insertBefore(node, el.nextSibling);

else el.parentNode.appendChild(node);

}

// ochrana toolbaru: nastavíme mu sticky pokud není fixed/sticky; přidáme spacer

function protectToolbar(toolbarEl){

try {

if (!toolbarEl) return null;

const cs = window.getComputedStyle(toolbarEl);

const pos = cs.position || '';

// pokud toolbar není fixed/sticky, nastavíme sticky (méně invazivní než fixed)

if (pos !== 'fixed' && pos !== 'sticky'){

toolbarEl.style.position = 'sticky';

toolbarEl.style.top = '0';

}

// zajistíme vysoký z-index (aby byl nad countdownem)

const z = parseInt(cs.zIndex,10);

if (isNaN(z) || z < 1000) toolbarEl.style.zIndex = '9999';

// přidej spacer, pokud ještě není (aby layout nepřeskočil)

const spacerId = 'countdown-toolbar-spacer';

let spacer = document.getElementById(spacerId);

if (!spacer){

spacer = document.createElement('div');

spacer.id = spacerId;

// nastavíme výšku spaceru podle toolbaru

const h = toolbarEl.getBoundingClientRect().height || toolbarEl.offsetHeight || 56;

spacer.style.height = h + 'px';

spacer.style.width = '100%';

spacer.style.pointerEvents = 'none';

spacer.style.display = 'block';

// vložíme spacer za toolbar (pokud není countdown umístěn jinde)

insertAfter(toolbarEl, spacer);

} else {

// aktualizuj výšku pokud se změnila

const h = toolbarEl.getBoundingClientRect().height || toolbarEl.offsetHeight || 56;

spacer.style.height = h + 'px';

}

return spacer;

} catch(e){

console.warn('protectToolbar error', e);

return null;

}

// Hlavní funkce: vlož countdown pod toolbar a ochraň toolbar

async function placeCountdown(){

const block = ids.block;

if (!block) return;

// pokud už jsme blok někam přesouvali, vrátíme ho nejdřív do původního místa (bez ztráty)

// (v tomto scénáři předpokládáme pouze jediné vložení)

const toolbar = await waitForToolbar();

if (toolbar){

// vložíme block PŘÍMO PO toolbaru (nevkládáme do body firstChild)

insertAfter(toolbar, block);

// ochraň toolbar (sticky + spacer)

protectToolbar(toolbar);

} else {

// fallback: vložit do body jako první dítě

const b = document.body;

if (b.firstChild) b.insertBefore(block, b.firstChild);

else b.appendChild(block);

}

// inicializace

// nastav text data (datum)

const dateTxt = formatDateOnly(target);

if (ids.date_desktop) ids.date_desktop.textContent = dateTxt;

if (ids.date_mobile) ids.date_mobile.textContent = dateTxt;

// start countdown + visibilty

updateAll();

applyVisibility();

setInterval(updateAll, 1000);

// re-evaluate view on resize / orientation

let rt;

window.addEventListener('resize', ()=>{ clearTimeout(rt); rt = setTimeout(applyVisibility, 120); });

window.addEventListener('orientationchange', ()=>{ setTimeout(applyVisibility, 150); });

// umístit countdown po načtení (pokud je toolbar už), nebo počkat na load

if (document.readyState === 'loading'){

window.addEventListener('DOMContentLoaded', placeCountdown);

window.addEventListener('load', placeCountdown);

} else {

placeCountdown();

}

// v případě, že se toolbar mění dynamicky (ajax), sleduj body krátce

const obs = new MutationObserver((m)=>{

// když se toolbar objeví, umístíme a pak přestaneme pozorovat

if (findToolbar()) { placeCountdown(); obs.disconnect(); }

});

obs.observe(document.body, { childList:true, subtree:true });

// odpojit po max. 4s, už nebudeme zbytečně sledovat

setTimeout(()=>obs.disconnect(), 4000);

// expose utilitu pro manual re-place

window._place_countdown_under_toolbar = placeCountdown;

})();

</script>

Replies (0)