{"id":24,"date":"2026-10-22T18:53:10","date_gmt":"2026-10-22T18:53:10","guid":{"rendered":"https:\/\/matimag.com.pl\/?page_id=24"},"modified":"2026-11-05T20:43:25","modified_gmt":"2026-11-05T19:43:25","slug":"strona-glowna","status":"publish","type":"page","link":"https:\/\/matimag.com.pl\/","title":{"rendered":"Strona g\u0142\u00f3wna"},"content":{"rendered":"\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<meta charset=\"UTF-8\">\n<style>\n  :root { --bg: #000; --panel: #0d0d0d; --txt: #fff; --muted: #888; }\n  * { box-sizing: border-box; margin: 0; padding: 0; }\n  body { background: var(--bg); font-family: sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; }\n  #wp-widget { width: 1300px; height: 800px; background: var(--bg); color: var(--txt); display: flex; overflow: hidden; }\n  .panel-left { width: 50%; height: 100%; padding: 50px; display: flex; flex-direction: column; justify-content: space-between; z-index: 10; background: transparent; }\n  .clocks { width: 50%; display: flex; flex-direction: column; gap: 25px; }\n  .clock { height: 110px; background: var(--panel); border: 2px solid #222; border-radius: 8px; padding: 20px; cursor: pointer; display: flex; flex-direction: column; justify-content: center; }\n  .clock.active { border-color: var(--txt); background: #161616; }\n  .c-label { font-size: 13px; text-transform: uppercase; color: var(--muted); letter-spacing: 1px; margin-bottom: 5px; }\n  .c-time { font-size: 34px; font-weight: bold; }\n  .ticker {  width: 100%; background: var(--panel); border: 1px solid #1c1c1c; border-radius: 6px; padding: 20px; display: flex; justify-content: space-between; }\n  .t-item { display: none; flex-direction: column; }\n  .t-name { font-size: 11px; color: var(--muted); text-transform: uppercase; }\n  .t-val { font-size: 16px; font-weight: 600; margin-top: 4px; }\n  .panel-right { width: 50%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: visible; }\n  canvas { width: 200%; height: 100%; display: block; }\n\n@media (max-width: 768px){\n  #wp-widget{\n    width: 568px;\n  }\n   .c-label{font-size: 8px;}\n  .c-time{ font-size: 12px}\n  .ticker{width:100%; }\n  .t-name{ font-size:6px;}\n  .t-val{ font-size:6px}\n  .panel-right{ width:25%;}\n  canvas{ width:150%;}\n}\n\n<\/style>\n\n\n\n<div id=\"wp-widget\">\n  <div class=\"panel-left\">\n    <div class=\"clocks\">\n      <div class=\"clock active\" id=\"c-cet\" onclick=\"setMode('CET')\">\n        <div class=\"c-label\">Czas CET (Warszawa)<\/div>\n        <div class=\"c-time\" id=\"t-cet\">12:00:00<\/div>\n      <\/div>\n      <div class=\"clock\" id=\"c-gmt\" onclick=\"setMode('GMT-5')\">\n        <div class=\"c-label\">Czas GMT-5 (Nowy Jork)<\/div>\n        <div class=\"c-time\" id=\"t-gmt\">07:00:00<\/div>\n      <\/div>\n    <\/div>\n    <div class=\"ticker\">\n\n      <script type=\"module\" src=\"https:\/\/widgets.tradingview-widget.com\/w\/pl\/tv-ticker-tape.js\"><\/script>\n\n<tv-ticker-tape symbols=\"FX:EURUSD,CMCMARKETS:GOLD,OANDA:GBPUSD,CAPITALCOM:UKOIL\" hide-chart item-size=\"compact\" theme=\"dark\"><\/tv-ticker-tape>\n\n      <div class=\"t-item\"><span class=\"t-name\">Z\u0142oto (XAU)<\/span><span class=\"t-val\" id=\"p-gold\">&#8211;.&#8211;<\/span><\/div>\n      <div class=\"t-item\"><span class=\"t-name\">Ropa Brent<\/span><span class=\"t-val\" id=\"p-oil\">&#8211;.&#8211;<\/span><\/div>\n      <div class=\"t-item\"><span class=\"t-name\">USD \/ PLN<\/span><span class=\"t-val\" id=\"p-usd\">&#8211;.&#8211;<\/span><\/div>\n      <div class=\"t-item\"><span class=\"t-name\">EUR \/ PLN<\/span><span class=\"t-val\" id=\"p-eur\">&#8211;.&#8211;<\/span><\/div>\n    <\/div>\n  <\/div>\n  <div class=\"panel-right\"><canvas id=\"globe\"><\/canvas><\/div>\n<\/div>\n\n<script>\n  let mode = 'CET', baseLon = 0;\n  const targets = { 'CET': 19, 'GMT-5': -74 };\n  const canvas = document.getElementById('globe');\n  const ctx = canvas.getContext('2d');\n\n  const mapImg = new Image();\n  mapImg.crossOrigin = \"anonymous\"; \n  mapImg.src = 'https:\/\/matimag.com.pl\/wp-content\/uploads\/2026\/11\/erth-map-3d.jpg';\n\n  function resize() {\n    canvas.width = canvas.offsetWidth * window.devicePixelRatio;\n    canvas.height = canvas.offsetHeight * window.devicePixelRatio;\n    ctx.scale(window.devicePixelRatio, window.devicePixelRatio);\n  }\n\n  function setMode(m) {\n    mode = m;\n    document.querySelectorAll('.clock').forEach(b => b.classList.remove('active'));\n    document.getElementById(m === 'CET' ? 'c-cet' : 'c-gmt').classList.add('active');\n  }\n\n  function update() {\n    const now = new Date();\n    document.getElementById('t-cet').innerText = now.toLocaleTimeString('pl-PL', { timeZone: 'Europe\/Warsaw', hour12: false });\n    const utc = now.getTime() + (now.getTimezoneOffset() * 60000);\n    const gmtTime = new Date(utc - (3600000 * 5));\n    document.getElementById('t-gmt').innerText = gmtTime.toLocaleTimeString('en-US', { hour12: false });\n\n    let tTime = mode === 'GMT-5' ? gmtTime : new Date(now.toLocaleString('en-US', { timeZone: 'Europe\/Warsaw' }));\n    const hours = tTime.getHours() + tTime.getMinutes() \/ 60 + tTime.getSeconds() \/ 3600;\n    baseLon = ((targets[mode] - (hours - 12) * 15) * Math.PI) \/ 180;\n  }\n\n  function draw() {\n    const w = canvas.width \/ window.devicePixelRatio, h = canvas.height \/ window.devicePixelRatio;\n    \n    \/\/ Przesuni\u0119cie w lewo o 40px wzgl\u0119dem poprzedniej pozycji i do g\u00f3ry o 30px\n    const cx = (w \/ 2) - (w * 0.015) - 0, cy = (h \/ 2) -30;\n    \/\/ Pomniejszenie promienia o 20% (z 0.65 do 0.52)\n    const r = Math.min(w, h) * 0.48; \n    \n    ctx.clearRect(0, 0, w, h);\n\n    ctx.beginPath(); ctx.arc(cx, cy, r, 0, 2 * Math.PI); ctx.fillStyle = '#010101'; ctx.fill();\n\n    if (mapImg.complete && mapImg.naturalWidth !== 0) {\n      ctx.save();\n      ctx.beginPath(); ctx.arc(cx, cy, r, 0, 2 * Math.PI); ctx.clip();\n      \n      let scale = 1.35;\n      let imgW = r * 4 * scale;\n      let imgH = r * 2 * scale;\n      \n      let mapOffset = (((baseLon \/ (2 * Math.PI)) * imgW) % imgW) + 15;\n      let mapX = cx - mapOffset - imgW \/ 2;\n      let mapY = cy - imgH \/ 2;\n      \n      ctx.drawImage(mapImg, mapX, mapY, imgW, imgH);\n      ctx.drawImage(mapImg, mapX + imgW, mapY, imgW, imgH);\n      ctx.drawImage(mapImg, mapX - imgW, mapY, imgW, imgH);\n\n      ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';\n      ctx.fillRect(cx - r, cy - r, r * 2, r * 2);\n\n      const g = ctx.createRadialGradient(cx, cy, r * 0.1, cx, cy, r);\n      g.addColorStop(0, 'rgba(0,0,0,0)');\n      g.addColorStop(0.45, 'rgba(0,0,0,0.15)');\n      g.addColorStop(0.7, 'rgba(0,0,0,0.65)');\n      g.addColorStop(0.9, 'rgba(0,0,0,0.95)');\n      g.addColorStop(1, 'rgba(0,0,0,1)');\n      ctx.fillStyle = g; ctx.fillRect(cx - r, cy - r, r * 2, r * 2);\n      \n      ctx.restore();\n    }\n  }\n\n  function tick() {\n    document.getElementById('p-gold').innerText = `$ ${(2580.40 + Math.random() * 4).toFixed(2)}`;\n    document.getElementById('p-oil').innerText = `$ ${(74.20 + Math.random() * 0.3).toFixed(2)}`;\n    document.getElementById('p-usd').innerText = `${(4.0210 + Math.random() * 0.005).toFixed(4)} z\u0142`;\n    document.getElementById('p-eur').innerText = `${(4.3140 + Math.random() * 0.004).toFixed(4)} z\u0142`;\n  }\n\n  function frame() { update(); draw(); requestAnimationFrame(frame); }\n  window.addEventListener('resize', resize);\n  mapImg.onload = () => { resize(); };\n  resize(); setInterval(tick, 3000); tick(); frame();\n<\/script>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"world-map-wrapper\">\n  <!-- Twoja mapa z czarnym t\u0142em jako baza -->\n  <img decoding=\"async\" src=\"https:\/\/matimag.com.pl\/wp-content\/uploads\/2026\/10\/world-1.jpg\" alt=\"Mapa \u015bwiata strefy czasowe\" class=\"map-bg\">\n\n  <!-- Punkty z zegarami na\u0142o\u017cone na map\u0119 -->\n  <div class=\"time-pin pin-new-york\">\n    <div class=\"pulse-dot\"><\/div>\n    <div class=\"time-label\">Nowy Jork<span id=\"clock-ny\">00:00:00<\/span><\/div>\n  <\/div>\n\n  <div class=\"time-pin pin-london\">\n    <div class=\"pulse-dot\"><\/div>\n    <div class=\"time-label\">Londyn<span id=\"clock-london\">00:00:00<\/span><\/div>\n  <\/div>\n\n  <div class=\"time-pin pin-warsaw\">\n    <div class=\"pulse-dot\"><\/div>\n    <div class=\"time-label\">Warszawa<span id=\"clock-warsaw\">00:00:00<\/span><\/div>\n  <\/div>\n\n  <div class=\"time-pin pin-tokyo\">\n    <div class=\"pulse-dot\"><\/div>\n    <div class=\"time-label\">Tokio<span id=\"clock-tokyo\">00:00:00<\/span><\/div>\n  <\/div>\n\n  <div class=\"time-pin pin-sydney\">\n    <div class=\"pulse-dot\"><\/div>\n    <div class=\"time-label\">Sydney<span id=\"clock-sydney\">00:00:00<\/span><\/div>\n  <\/div>\n<\/div>\n\n<style>\n\/* Stylizacja kontenera mapy *\/\n.world-map-wrapper {\n  position: relative;\n  width: 100%;\n  max-width: 1500px;\n  margin: 0 auto;\n  background-color: #000000;\n  overflow: hidden;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n}\n\n.map-bg {\n  width: 100%;\n  height: auto;\n  display: block;\n}\n\n\/* Style dla pinezek \/ punkt\u00f3w *\/\n.time-pin {\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  transform: translate(-50%, -50%);\n}\n\n\/* Animowana pulsuj\u0105ca kropka w kolorze Twoich kontynent\u00f3w *\/\n.pulse-dot {\n  width: 8px;\n  height: 8px;\n  background: #1A222D;\n  border: 2px solid #ffffff;\n  border-radius: 50%;\n  box-shadow: 0 0 10px rgba(255,255,255,0.8);\n  position: relative;\n}\n\n.pulse-dot::after {\n  content: '';\n  position: absolute;\n  top: -2px;\n  left: -2px;\n  width: 8px;\n  height: 8px;\n  border: 2px solid #ffffff;\n  border-radius: 50%;\n  animation: mapPulse 2s infinite ease-out;\n}\n\n\/* Etykieta z czasem *\/\n.time-label {\n  background: rgba(26, 34, 45, 0.9); \/* Kolor #1A222D z przezroczysto\u015bci\u0105 *\/\n  color: #ffffff;\n  padding: 4px 8px;\n  border-radius: 4px;\n  font-size: 11px;\n  font-weight: bold;\n  text-align: center;\n  margin-top: 6px;\n  white-space: nowrap;\n  border: 1px solid rgba(255,255,255,0.1);\n  box-shadow: 0 4px 10px rgba(0,0,0,0.5);\n}\n\n.time-label span {\n  display: block;\n  font-size: 13px;\n  color: #00ffcc; \/* Wyrazisty kolor dla zegara cyfrowego *\/\n  margin-top: 2px;\n  font-family: monospace;\n}\n\n\/* Koordynaty punkt\u00f3w na mapie w procentach (zapewniaj\u0105 responsywno\u015b\u0107) *\/\n.pin-new-york { top: 40%; left: 28.5%; }\n.pin-london   { top: 31%; left: 48.5%; }\n.pin-warsaw   { top: 32%; left: 54.5%; }\n.pin-tokyo    { top: 40%; left: 83.5%; }\n.pin-sydney   { top: 71%; left: 87.5%; }\n\n\/* Animacja pulsowania kropki *\/\n@keyframes mapPulse {\n  0% { transform: scale(1); opacity: 1; }\n  100% { transform: scale(3); opacity: 0; }\n}\n\n\/* Skalowanie podpis\u00f3w na mniejszych ekranach *\/\n@media (max-width: 768px) {\n  .time-label { font-size: 8px; padding: 2px 4px; }\n  .time-label span { font-size: 9px; }\n  .pulse-dot { width: 5px; height: 5px; }\n}\n<\/style>\n\n<script>\nfunction updateWorldClocks() {\n  const options = {\n    hour: '2-digit',\n    minute: '2-digit',\n    second: '2-digit',\n    hour12: false\n  };\n\n  \/\/ Pobieranie czasu dla poszczeg\u00f3lnych stref czasowych\n  document.getElementById('clock-ny').innerText = new Date().toLocaleTimeString('pl-PL', { ...options, timeZone: 'America\/New_York' });\n  document.getElementById('clock-london').innerText = new Date().toLocaleTimeString('pl-PL', { ...options, timeZone: 'Europe\/London' });\n  document.getElementById('clock-warsaw').innerText = new Date().toLocaleTimeString('pl-PL', { ...options, timeZone: 'Europe\/Warsaw' });\n  document.getElementById('clock-tokyo').innerText = new Date().toLocaleTimeString('pl-PL', { ...options, timeZone: 'Asia\/Tokyo' });\n  document.getElementById('clock-sydney').innerText = new Date().toLocaleTimeString('pl-PL', { ...options, timeZone: 'Australia\/Sydney' });\n}\n\n\/\/ Uruchomienie i od\u015bwie\u017canie co 1 sekund\u0119\nsetInterval(updateWorldClocks, 1000);\nupdateWorldClocks();\n<\/script>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<script type=\"module\" src=\"https:\/\/widgets.tradingview-widget.com\/w\/pl\/tv-economic-map.js\"><\/script>\n\n<tv-economic-map theme=\"dark\" transparent><\/tv-economic-map>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Czas CET (Warszawa) 12:00:00 Czas GMT-5 (Nowy Jork) 07:00:00 Z\u0142oto (XAU)&#8211;.&#8211; Ropa Brent&#8211;.&#8211; USD \/ PLN&#8211;.&#8211; EUR \/ PLN&#8211;.&#8211; Nowy [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-24","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/matimag.com.pl\/index.php?rest_route=\/wp\/v2\/pages\/24","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/matimag.com.pl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/matimag.com.pl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/matimag.com.pl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/matimag.com.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=24"}],"version-history":[{"count":217,"href":"https:\/\/matimag.com.pl\/index.php?rest_route=\/wp\/v2\/pages\/24\/revisions"}],"predecessor-version":[{"id":542,"href":"https:\/\/matimag.com.pl\/index.php?rest_route=\/wp\/v2\/pages\/24\/revisions\/542"}],"wp:attachment":[{"href":"https:\/\/matimag.com.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=24"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}