Portal internetowy istoria.tv

Instytut Edukacji Elektronicznej jest współwydawcą portalu Istoria.tv – niezwykłego miejsca w sieci, które łączy w sobie cechy portalu tematycznego i telewizji internetowej. To projekt, który doskonale wpisuje się w tempo współczesnego świata, a jednocześnie daje przestrzeń do refleksji i pogłębionej analizy.

W czasach, gdy informacje pojawiają się i znikają w błyskawicznym tempie, Istoria.tv pełni rolę przystani. Gromadzi zarówno aktualne wydarzenia, jak i te odległe w czasie, układając je w formę przejrzystą i dostępną dla każdego odbiorcy. To nie tylko zbiór faktów, ale także przestrzeń dla wszystkich, którzy chcą odkrywać różnorodność i złożoność otaczającego nas świata.

Na Istoria.tv nauka splata się z pasją. To miejsce, gdzie specjaliści, instytucje kultury i historii oraz społeczność pasjonatów mogą nawiązywać dialog, dzielić się doświadczeniem i wspólnie tworzyć nową jakość. Portal i kanał wolne są od polityki, co czyni je przestrzenią skupioną wyłącznie na historii, wiedzy i inspirujących opowieściach.

Misją Istoria.tv jest nie tylko przekazywanie informacji, ale także aktywne współtworzenie treści – artykułów, podcastów i filmów – które angażują i budują społeczność połączoną wspólną pasją do odkrywania świata.

Twórcy zapraszają również do dołączenia do grupy Istoria.tv na Facebooku. Jest to miejsce stworzone z myślą o bezpośredniej komunikacji między twórcami, instytucjami a odbiorcami. To tam można znaleźć zaproszenia na wydarzenia, informacje o nowych projektach i wymieniać się inspirującymi historiami.

Razem możemy odkrywać fascynujące zakamarki przeszłości i współczesności. Istoria.tv to przestrzeń, gdzie historia łączy ludzi, a wspólne poznawanie świata staje się prawdziwą przygodą.

kod HTML do wklejania widgetu istoria.tv:

				
					<div id="htmlContent"></div>
<div id="footer"></div>

<style>
  /* kontener na kolumny */
  #htmlContent .columns {
    display: flex;
    gap: 12px;
    width: 100%;
  }

  #htmlContent .columns .col {
    flex: 1;
    display: flex;
  }

  /* Klikalna karta */
  #htmlContent .cell {
    flex: 1; /* wypełnia wysokość kolumny */
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 12px 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
    transition: background .2s, box-shadow .2s, transform .05s;
    animation: fadeIn .25s ease;
    text-decoration: none;
    color: inherit;
  }
  #htmlContent .cell:hover {
    background: #f7faff;
    box-shadow: 0 1px 6px rgba(0,0,0,.06);
  }

  #htmlContent h5 {
    margin: 0 0 10px;
    font-size: 1rem;
    line-height: 1.3;
  }

  /* minimalistyczny przycisk */
  .btn-minimal {
    display: inline-block; /* tylko tak szeroki jak tekst */
    font-size: 12px;
    padding: 5px 10px;
    border: 1px solid #0077cc;
    border-radius: 5px;
    background: transparent;
    color: #0077cc;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s, color .2s;
    align-self: flex-start; /* nie rozciąga się na całą szerokość */
  }
  .btn-minimal:hover {
    background: #0077cc;
    color: #fff;
  }
  .btn-minimal[disabled] {
    opacity: .5;
    cursor: default;
    pointer-events: none;
  }

  /* bez linku */
  #htmlContent .cell.disabled {
    cursor: default;
    opacity: 0.6;
    pointer-events: none;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* mobile: kolumny jedna pod drugą */
  @media (max-width: 768px) {
    #htmlContent .columns {
      flex-direction: column;
    }
  }

  /* stopka */
  #footer {
    margin-top: 20px;
    font-size: 0.9rem;
    text-align: center;
    color: #555;
  }
  #footer a {
    color: #0077cc;
    text-decoration: none;
    font-weight: 500;
  }
  #footer a:hover {
    text-decoration: underline;
  }
</style>

<script>
async function loadLastTwoFromAB() {
  const url =
    "https://docs.google.com/spreadsheets/d/1ovmc16JfScBkoWXCg-cOLya1e-K4MmCFesgKt3-trug/export?format=tsv&gid=0&cb=" +
    Date.now();

  const res = await fetch(url, { cache: "no-store" });
  if (!res.ok) throw new Error("Błąd pobierania arkusza");
  const tsv = (await res.text()).trim();

  const rows = tsv.split(/\r?\n/);

  const escapeHTML = (s = "") =>
    s.replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));

  const items = [];
  for (let i = rows.length - 1; i >= 0 && items.length < 2; i--) {
    const cols = rows[i].split("\t");
    const A = (cols[0] || "").trim(); // tekst
    const B = (cols[1] || "").trim(); // link
    if (A || B) items.push({ text: A, url: B });
  }

  if (items.length === 0) {
    document.getElementById("htmlContent").innerHTML = "<em>Brak danych w kolumnach A/B</em>";
    return;
  }

  const [latest, previous] = [items[0], items[1]];

  const renderCard = (item) => {
    if (!item) {
      return `<div class="cell disabled"><em>Brak danych</em></div>`;
    }
    const t = escapeHTML(item.text || "");
    const hasUrl = !!item.url;
    const urlEsc = hasUrl ? escapeHTML(item.url) : "";

    if (hasUrl) {
      return `
        <a class="cell" href="${urlEsc}" target="_blank" rel="noopener">
          <h5>${t || "—"}</h5>
          <span class="btn-minimal">Czytaj więcej</span>
        </a>
      `;
    } else {
      return `
        <div class="cell disabled">
          <h5>${t || "—"}</h5>
          <span class="btn-minimal" disabled>Czytaj więcej</span>
        </div>
      `;
    }
  };

  const html = `
    <div class="columns">
      <div class="col">${renderCard(latest)}</div>
      <div class="col">${renderCard(previous)}</div>
    </div>
  `;

  document.getElementById("htmlContent").innerHTML = html;

  // stopka
  document.getElementById("footer").innerHTML = `
    Odwiedź portal ciekawych historii: 
    <a href="https://istoria.tv" target="_blank" rel="noopener">istoria.tv</a>
  `;
}

loadLastTwoFromAB();
</script>

Logo Istoria.tv (czarno-białe)