initial commit, refactor

This commit is contained in:
sadorowo 2023-11-24 12:45:09 +00:00
parent 9ab1a74bc1
commit 6e6a704bcd
5 changed files with 112 additions and 77 deletions

34
facts_script.js Normal file
View File

@ -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);

View File

@ -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="loading-container">
<h1>Ładowanie...</h1>
</div>
<div id="container">
<div class="info-block">
<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>
<h2>Dzień wiedźmy obchodzimy 16 listopada. <span id="difference"></span></h2>
</div>
<div class="info-block">
<h3>Dzień wiedźmy obchodzimy 16 listopada. <span id="difference"></span></h3>
<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 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>
<img src="wiedzma.png" alt="Wiedźma" id="witch">
</div>
<footer>Nie próbuj klikać prawego przycisku myszy! 😈</footer>
</body>
</html>

View File

@ -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";
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('DOMContentLoaded', async () => {
await wait(0.5);
loadingContainer.style.opacity = 0;
await wait(0.2);
container.style.opacity = 1;
})
document.addEventListener('contextmenu', e => e.preventDefault())

View File

@ -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;
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 70 KiB