initial commit, refactor

2023-11-24 12:45:09 +00:00 · 2023-11-24 12:45:09 +00:00 · 6e6a704bcd
commit 6e6a704bcd
parent 9ab1a74bc1
5 changed files with 112 additions and 77 deletions
--- a/facts_script.js
+++ 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);
--- a/index.html
+++ b/index.html
@ -5,32 +5,23 @@
    <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>
    <title>Strona o wiedźmach</title>
 </head>
 <body>
-    <h1>Strona o wiedźmach</h1>
-    <div id="container">
-        <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 id="loading-container">
+        <h1>Ładowanie...</h1>
+    </div>
+    <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-block">
+            <div class="arrow-button" data-left>⬅</div>
+            <p id="fact">Używaj strzałek, aby zobaczyć ciekawostki o wiedźmach!</p>
+            <div class="arrow-button" data-right>➡</div>
+        </div>
    </div>
-    <footer>Nie próbuj klikać prawego przycisku myszy! 😈</footer>
 </body>
 </html>
--- 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();
-})
+document.addEventListener('contextmenu', e => e.preventDefault())
--- 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;
    }
 }
--- a/wiedzma.png
+++ b/wiedzma.png