diff --git a/facts_script.js b/facts_script.js new file mode 100644 index 0000000..2223f96 --- /dev/null +++ b/facts_script.js @@ -0,0 +1,34 @@ +const [leftArrow, rightArrow] = ['.arrow-button[data-left]', '.arrow-button[data-right]'].map(s => document.querySelector(s)); +const fact = document.getElementById('fact'); + +const facts = [ + 'Czarownice były często oskarżane o praktykowanie magii i czarów, które miały rzekomo wpływać na ludzi, zwierzęta i rośliny.', + 'W XV-XVII wieku w Europie miało miejsce około 40 000-60 000 egzekucji osób oskarżonych o czary, z których większość stanowiły kobiety.', + 'Jednym z najbardziej znanych procesów czarownic w historii były procesy salemzkie w 1692 roku w kolonii Massachusetts, gdzie oskarżono i skazano na śmierć 20 osób.', + 'W czasach polowań na czarownice stosowano różne metody wykrywania czarów, takie jak próba zanurzenia (osoba związana była zanurzana w wodzie, a jej unoszenie się na powierzchni miało świadczyć o winie) czy testy na znaki diabelskie na ciele.', + 'Czarownice często były przedstawiane z czarnym kotem jako swoim zwierzęcym pomocnikiem, którego rolą było przekazywanie wiadomości między czarownicą a diabłem.', + 'Wizerunek czarownicy z okresu polowań na czarownice często łączy się z latającą na miotle, chociaż latające miotły nie były powszechnie uważane za atrybut czarownic w tamtych czasach.', + 'W słowiańskiej mitologii czarownicą była postać nazywana Baba Jaga, starsza kobieta mieszkająca w głębi lasu w chacie na kaczych łapach, która miała zarówno pomocne, jak i szkodliwe moce.', + 'W średniowieczu i renesansie istniały podręczniki do łapania czarownic, takie jak „Malleus Maleficarum” („Młot na czarownice”) napisane przez dwóch niemieckich inkwizytorów Heinricha Kraemera i Jakoba Sprengera w 1486 roku.', + 'W folklorze afrykańskim istnieje wierzenie w czarownice zwane „adze”, które mogą zamieniać się w latające, świetliste stworzenia, takie jak ogniki lub połyskujące owady.', + 'Ostatnią spaloną na stosie „czarownicą” w Europie była Barbara Zdunk.' +] + +let index = 0; + +function previous() { + if (index - 1 < 0) index = facts.length; + + index--; + fact.textContent = facts[index]; +} + +function next() { + if (index + 1 > facts.length - 1) index = -1; + + index++; + fact.textContent = facts[index]; +} + +leftArrow.addEventListener('click', previous); +rightArrow.addEventListener('click', next); \ No newline at end of file diff --git a/index.html b/index.html index c601688..47012f4 100644 --- a/index.html +++ b/index.html @@ -5,32 +5,23 @@ + Strona o wiedźmach -

Strona o wiedźmach

-
-
-

Wiedźmy to w dawnych wierzeniach istoty półdemoniczne - istoty pośrednie między demonami a ludźmi, pozostające w ścisłym związku z ludźmi lub ich duszami. Oprócz relacji z diabłami i potworami, które dawały wiedźmą magiczne zdolności - potrafiły one rzucać uroki, zaklęcia, przepowiadać przyszłość, a nawet rozmawiać ze zmarłymi. Potocznie mówimy tak na kobiety niemiłe i/lub brzydkie. Według dawnych wierzeń ludowych wiedźma to kobieta podlegająca wpływom diabła, mająca moc rzucania uroków.

-

Dzień wiedźmy obchodzimy 16 listopada.

-
-
-

Ciekawostki o wiedźmach

-
    -
  1. Czarownice były często oskarżane o praktykowanie magii i czarów, które miały rzekomo wpływać na ludzi, zwierzęta i rośliny.
    2. -
  2. W XV-XVII wieku w Europie miało miejsce około 40 000-60 000 egzekucji osób oskarżonych o czary, z których większość stanowiły kobiety.
    3. -
  3. Jednym z najbardziej znanych procesów czarownic w historii były procesy salemzkie w 1692 roku w kolonii Massachusetts, gdzie oskarżono i skazano na śmierć 20 osób.
    4. -
  4. W czasach polowań na czarownice stosowano różne metody wykrywania czarów, takie jak próba zanurzenia (osoba związana była zanurzana w wodzie, a jej unoszenie się na powierzchni miało świadczyć o winie) czy testy na znaki diabelskie na ciele.
    5. -
  5. Czarownice często były przedstawiane z czarnym kotem jako swoim zwierzęcym pomocnikiem, którego rolą było przekazywanie wiadomości między czarownicą a diabłem.
    6. -
  6. Wizerunek czarownicy z okresu polowań na czarownice często łączy się z latającą na miotle, chociaż latające miotły nie były powszechnie uważane za atrybut czarownic w tamtych czasach.
    7. -
  7. W słowiańskiej mitologii czarownicą była postać nazywana Baba Jaga, starsza kobieta mieszkająca w głębi lasu w chacie na kaczych łapach, która miała zarówno pomocne, jak i szkodliwe moce.
    8. -
  8. W średniowieczu i renesansie istniały podręczniki do łapania czarownic, takie jak „Malleus Maleficarum” („Młot na czarownice”) napisane przez dwóch niemieckich inkwizytorów Heinricha Kraemera i Jakoba Sprengera w 1486 roku.
    9. -
  9. W folklorze afrykańskim istnieje wierzenie w czarownice zwane „adze”, które mogą zamieniać się w latające, świetliste stworzenia, takie jak ogniki lub połyskujące owady.
    10. -
  10. Ostatnią spaloną na stosie „czarownicą” w Europie była Barbara Zdunk.
    11. -
-
- Wiedźma +
+

Ładowanie...

+
+
+

Strona o wiedźmach

+

Wiedźmy to w dawnych wierzeniach istoty półdemoniczne - istoty pośrednie między demonami a ludźmi, pozostające w ścisłym związku z ludźmi lub ich duszami. Oprócz relacji z diabłami i potworami, które dawały wiedźmą magiczne zdolności - potrafiły one rzucać uroki, zaklęcia, przepowiadać przyszłość, a nawet rozmawiać ze zmarłymi. Potocznie mówimy tak na kobiety niemiłe i/lub brzydkie. Według dawnych wierzeń ludowych wiedźma to kobieta podlegająca wpływom diabła, mająca moc rzucania uroków.

+

Dzień wiedźmy obchodzimy 16 listopada.

+

Ciekawostki o wiedźmach

+
+
⬅
+

Używaj strzałek, aby zobaczyć ciekawostki o wiedźmach!

+
➡
+
- \ No newline at end of file diff --git a/script.js b/script.js index 006736c..9a3e028 100644 --- a/script.js +++ b/script.js @@ -1,8 +1,4 @@ -const difference = document.getElementById('difference'); -const footer = document.querySelector('footer'); -const witchDayDate = new Date('11/16/2023'); -const now = new Date(); - +const wait = (t) => new Promise(resolve => setTimeout(resolve, t * 1000)); const plurals = { 'dni': { 1: 'dzień', @@ -10,6 +6,13 @@ const plurals = { } } +const loadingContainer = document.getElementById('loading-container'); +const container = document.getElementById('container'); + +const difference = document.getElementById('difference'); +const witchDayDate = new Date('11/16/2023'); +const now = new Date(); + function plural(word, n) { return plurals[word][n] ?? plurals[word]['_'] } @@ -19,14 +22,11 @@ const daysDifference = Math.ceil(timeDifference / (1000 * 60 * 60 * 24)); difference.textContent = `Ten dzień był ${daysDifference} ${plural('dni', daysDifference)} temu.`; -document.addEventListener('contextmenu', e => { - footer.dataset.clicked = footer.dataset.clicked === "false"; +document.addEventListener('DOMContentLoaded', async () => { + await wait(0.5); + loadingContainer.style.opacity = 0; + await wait(0.2); + container.style.opacity = 1; +}) - if (footer.dataset.clicked === "false") - footer.textContent = "A nie mówiłem? Możesz to jeszcze odwrócić." - else - footer.textContent = "Nie próbuj klikać prawego przycisku myszy! 😈" - - document.body.classList.toggle('lighter'); - e.preventDefault(); -}) \ No newline at end of file +document.addEventListener('contextmenu', e => e.preventDefault()) \ No newline at end of file diff --git a/style.css b/style.css index 4dd9ce9..c87d609 100644 --- a/style.css +++ b/style.css @@ -5,6 +5,7 @@ --bg-lighter: rgb(255, 112, 115); --scrollbar: rgb(255, 205, 205); --info-block-bg: #c07f7f; + --second-color: #e7ffc1; --info-block-border: 10px; } @@ -29,52 +30,68 @@ body { margin: 0; } -body.lighter { - background-color: var(--bg-lighter); - filter: invert(); +#loading-container { + transform: translate(-50%, -50%); + transition: ease-in-out .3s; + position: absolute; + color: white; + opacity: 1; + left: 50%; + top: 50%; } -body.lighter>footer { - color: #000; -} - -body h1:first-child { - color: #fff; - text-align: center; +#difference { + color: var(--second-color); } #container { - display: flex; - flex-direction: row; + transition: ease-in-out .3s; justify-content: center; + flex-direction: column; align-items: center; - width: 100%; + display: flex; height: 100%; + width: 100%; + opacity: 0; } -.info-block { +#container>* { + color: white; + text-align: center; background-color: var(--info-block-bg); - border-radius: var(--info-block-border); - height: 50%; - overflow: auto; - padding: 20px; + max-width: 50%; + padding: 15px; + margin: 5px; +} + +#facts-block { + display: flex; + align-items: center; + flex-direction: row; + justify-content: center; + max-width: 50%; +} + +.arrow-button { + width: 50px; margin: 10px; + cursor: pointer; + border-radius: 100%; + color: var(--second-color); +} + +.arrow-button[data-left] { + float: left; +} + +.arrow-button[data-right] { + float: right; } #witch { filter: invert(); } -#information-container { - position: absolute; -} - -footer { - position: absolute; - color: #fff; - bottom: 0; -} - ::-webkit-scrollbar { width: 3px; height: 3px; @@ -110,22 +127,15 @@ footer { } @media screen and (max-width: 978px) { - #container { - flex-direction: column; - overflow-y: hidden; - flex-wrap: wrap; - } - .info-block { max-height: 50%; } - footer { - display: none; + #container>* { + max-width: unset; } - body { - overflow-y: hidden; - overflow-x: auto; + #facts-block { + max-width: unset; } } \ No newline at end of file diff --git a/wiedzma.png b/wiedzma.png deleted file mode 100644 index 0aa8d29..0000000 Binary files a/wiedzma.png and /dev/null differ