5 changed files with 78 additions and 166 deletions
--- a/facts_script.js
+++ b/facts_script.js
@ -1,56 +0,0 @@
-const $facts = document.getElementById('facts');
-const $fact = document.getElementById('fact');
-
-const factList = [
-    '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 [touchStartX, touchEndX] = [-1, -1];
-let index = 0;
-
-function previous() {
-    if (index - 1 < 0) index = factList.length;
-
-    index--;
-    $fact.textContent = factList[index];
-}
-
-function next() {
-    if (index + 1 > factList.length - 1) index = -1;
-
-    index++;
-    $fact.textContent = factList[index];
-}
-
-function checkDirection() {
-    if (touchEndX < touchStartX) previous()
-    if (touchEndX > touchStartX) next()
-}
-
-document.addEventListener('touchstart', e => {
-    touchStartX = e.changedTouches[0].screenX
-})
-
-document.addEventListener('touchend', e => {
-    touchEndX = e.changedTouches[0].screenX
-    checkDirection()
-})
-
-$facts.addEventListener('wheel', e => {
-    if (e.deltaY > 0) {
-        index++;
-        next()
-    } else {
-        index--;
-        previous()
-    }
-})
--- a/index.html
+++ b/index.html
@ -1,52 +1,36 @@
 <!DOCTYPE html>
 <html lang="pl">
-
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script defer src="script.js"></script>
-    <script defer src="facts_script.js"></script>
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-DKNRQ6ZC7Q"></script>
-    <!-- google analytics -->
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      
-      gtag('js', new Date());
-      gtag('config', 'G-DKNRQ6ZC7Q');
-    </script>
-    <!-- hotjar tracking code -->
-    <script>
-        (function(h,o,t,j,a,r){
-            h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
-            h._hjSettings={hjid:3767475,hjsv:6};
-            a=o.getElementsByTagName('head')[0];
-            r=o.createElement('script');r.async=1;
-            r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
-            a.appendChild(r);
-        })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
-    </script>
    <title>Strona o wiedźmach</title>
 </head>
-
 <body>
-    <div id="loading-container">
-        <h1>Ładowanie...</h1>
-    </div>
+    <h1>Strona o wiedźmach</h1>
    <div id="container">
-        <h1>Strona o wiedźmach</h1>
-        <p>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.</p>
-        <h3>Dzień wiedźmy obchodzimy 16 listopada. <span id="difference"></span></h3>
-        <h1>Ciekawostki o wiedźmach</h1>
-        <div id="facts">
-            <p id="fact">Użyj kółka od myszki bądź - na urządzeniu mobilnym - przesuń w lewo/prawo, aby zobaczyć kolejną/poprzednią ciekawostkę. <b>KURSOR MUSI BYĆ NAKIEROWANY NA CIEKAWOSTKĘ! EVENT JEST ZDEFINIOWANY TYLKO TAM.</b></p>
+        <div class="info-block">
+            <p>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.</p>
+            <h2>Dzień wiedźmy obchodzimy 16 listopada. <span id="difference"></span></h2>
        </div>
+        <div class="info-block">
+            <h1>Ciekawostki o wiedźmach</h1>
+            <ol>
+                <li>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.</li>
+                <li>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.</li>
+                <li>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.</li>
+                <li>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.</li>
+                <li>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.</li>
+                <li>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.</li>
+                <li>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.</li>
+                <li>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.</li>
+                <li>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.</li>
+                <li>Ostatnią spaloną na stosie „czarownicą” w Europie była Barbara Zdunk.</li>
+            </ol>
+        </div>
+        <img src="wiedzma.png" alt="Wiedźma" id="witch">
    </div>
+    <footer>Nie próbuj klikać prawego przycisku myszy! 😈</footer>
 </body>
-
-</html>
+</html>
--- a/script.js
+++ b/script.js
@ -1,4 +1,8 @@
-const wait = (t) => new Promise(resolve => setTimeout(resolve, t * 1000));
+const difference = document.getElementById('difference');
+const footer = document.querySelector('footer');
+const witchDayDate = new Date('11/16/2023');
+const now = new Date();
+
 const plurals = {
    'dni': {
        1: 'dzień',
@ -6,13 +10,6 @@ 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]['_']
 }
@ -22,11 +19,14 @@ const daysDifference = Math.ceil(timeDifference / (1000 * 60 * 60 * 24));

 difference.textContent = `Ten dzień był ${daysDifference} ${plural('dni', daysDifference)} temu.`;

-document.addEventListener('DOMContentLoaded', async () => {
-    await wait(0.5);
-    loadingContainer.style.opacity = 0;
-    await wait(0.2);
-    container.style.opacity = 1;
-})
+document.addEventListener('contextmenu', e => {
+    footer.dataset.clicked = footer.dataset.clicked === "false";

-document.addEventListener('contextmenu', e => e.preventDefault())
+    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();
+})
--- a/style.css
+++ b/style.css
@ -5,7 +5,6 @@
    --bg-lighter: rgb(255, 112, 115);
    --scrollbar: rgb(255, 205, 205);
    --info-block-bg: #c07f7f;
-    --second-color: #e7ffc1;
    --info-block-border: 10px;
 }

@ -30,74 +29,52 @@ body {
    margin: 0;
 }

-#loading-container {
-    transform: translate(-50%, -50%);
-    transition: ease-in-out .3s;
-    position: absolute;
-    color: white;
-    opacity: 1;
-    left: 50%;
-    top: 50%;
+body.lighter {
+    background-color: var(--bg-lighter);
+    filter: invert();
 }

-#difference {
-    color: var(--second-color);
+body.lighter>footer {
+    color: #000;
+}
+
+body h1:first-child {
+    color: #fff;
+    text-align: center;
 }

 #container {
-    transition: ease-in-out .3s;
-    justify-content: center;
-    flex-direction: column;
-    align-items: center;
    display: flex;
-    height: 100%;
-    width: 100%;
-    opacity: 0;
-}
-
-#container>* {
-    color: white;
-    text-align: center;
-    background-color: var(--info-block-bg);
-    max-width: 50%;
-    padding: 15px;
-    margin: 5px;
-}
-
-#facts-block {
-    display: flex;
-    position: relative;
-    align-items: center;
    flex-direction: row;
    justify-content: center;
-    width: 35%;
+    align-items: center;
+    width: 100%;
+    height: 100%;
 }

-#fact {
-    margin: 0 10px 0 10px;
-}
-
-.arrow-button {
-    width: 50px;
+.info-block {
+    background-color: var(--info-block-bg);
+    border-radius: var(--info-block-border);
+    height: 50%;
+    overflow: auto;
+    padding: 20px;
    margin: 10px;
-    cursor: pointer;
-    position: absolute;
-    border-radius: 100%;
-    color: var(--second-color);
-}
-
-.arrow-button[data-left] {
-    left: 0;
-}
-
-.arrow-button[data-right] {
-    right: 0;
 }

 #witch {
    filter: invert();
 }

+#information-container {
+    position: absolute;
+}
+
+footer {
+    position: absolute;
+    color: #fff;
+    bottom: 0;
+}
+
 ::-webkit-scrollbar {
    width: 3px;
    height: 3px;
@ -133,15 +110,22 @@ body {
 }

@media screen and (max-width: 978px) {
+    #container {
+        flex-direction: column;
+        overflow-y: hidden;
+        flex-wrap: wrap;
+    }
+
    .info-block {
-        height: 50%;
+        max-height: 50%;
    }

-    #container>* {
-        max-width: unset;
+    footer {
+        display: none;
    }

-    #facts-block {
-        width: auto;
+    body {
+        overflow-y: hidden;
+        overflow-x: auto;
    }
 }
--- a/wiedzma.png
+++ b/wiedzma.png