sadorowo/witch-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

initial commit, refactor

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

37
index.html
View File

@ -5,32 +5,23 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<script defer src="script.js"></script> <script defer src="script.js"></script>
<script defer src="facts_script.js"></script>
<title>Strona o wiedźmach</title> <title>Strona o wiedźmach</title>
</head> </head>
<body> <body>
<h1>Strona o wiedźmach</h1> <div id="loading-container">
<div id="container"> <h1>Ładowanie...</h1>
<div class="info-block"> </div>
<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> <div id="container">
<h2>Dzień wiedźmy obchodzimy 16 listopada. <span id="difference"></span></h2> <h1>Strona o wiedźmach</h1>
</div> <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>
<div class="info-block"> <h3>Dzień wiedźmy obchodzimy 16 listopada. <span id="difference"></span></h3>
<h1>Ciekawostki o wiedźmach</h1> <h1>Ciekawostki o wiedźmach</h1>
<ol> <div id="facts-block">
<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> <div class="arrow-button" data-left>⬅</div>
<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> <p id="fact">Używaj strzałek, aby zobaczyć ciekawostki o wiedźmach!</p>
<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> <div class="arrow-button" data-right>➡</div>
<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> </div>
<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> </div>
<footer>Nie próbuj klikać prawego przycisku myszy! 😈</footer>
</body> </body>
</html> </html>

30
script.js
View File

@ -1,8 +1,4 @@
const difference = document.getElementById('difference'); const wait = (t) => new Promise(resolve => setTimeout(resolve, t * 1000));
const footer = document.querySelector('footer');
const witchDayDate = new Date('11/16/2023');
const now = new Date();
const plurals = { const plurals = {
'dni': { 'dni': {
1: 'dzień', 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) { function plural(word, n) {
return plurals[word][n] ?? plurals[word]['_'] 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.`; difference.textContent = `Ten dzień był ${daysDifference} ${plural('dni', daysDifference)} temu.`;
document.addEventListener('contextmenu', e => { document.addEventListener('DOMContentLoaded', async () => {
footer.dataset.clicked = footer.dataset.clicked === "false"; await wait(0.5);
loadingContainer.style.opacity = 0;
await wait(0.2);
container.style.opacity = 1;
})
if (footer.dataset.clicked === "false") document.addEventListener('contextmenu', e => e.preventDefault())
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();
})

88
style.css
View File

@ -5,6 +5,7 @@
--bg-lighter: rgb(255, 112, 115); --bg-lighter: rgb(255, 112, 115);
--scrollbar: rgb(255, 205, 205); --scrollbar: rgb(255, 205, 205);
--info-block-bg: #c07f7f; --info-block-bg: #c07f7f;
--second-color: #e7ffc1;
--info-block-border: 10px; --info-block-border: 10px;
} }
@ -29,52 +30,68 @@ body {
margin: 0; margin: 0;
} }
body.lighter { #loading-container {
background-color: var(--bg-lighter); transform: translate(-50%, -50%);
filter: invert(); transition: ease-in-out .3s;
position: absolute;
color: white;
opacity: 1;
left: 50%;
top: 50%;
} }
body.lighter>footer { #difference {
color: #000; color: var(--second-color);
}
body h1:first-child {
color: #fff;
text-align: center;
} }
#container { #container {
display: flex; transition: ease-in-out .3s;
flex-direction: row;
justify-content: center; justify-content: center;
flex-direction: column;
align-items: center; align-items: center;
width: 100%; display: flex;
height: 100%; height: 100%;
width: 100%;
opacity: 0;
} }
.info-block { #container>* {
color: white;
text-align: center;
background-color: var(--info-block-bg); background-color: var(--info-block-bg);
border-radius: var(--info-block-border); max-width: 50%;
height: 50%; padding: 15px;
overflow: auto; margin: 5px;
padding: 20px; }
#facts-block {
display: flex;
align-items: center;
flex-direction: row;
justify-content: center;
max-width: 50%;
}
.arrow-button {
width: 50px;
margin: 10px; margin: 10px;
cursor: pointer;
border-radius: 100%;
color: var(--second-color);
}
.arrow-button[data-left] {
float: left;
}
.arrow-button[data-right] {
float: right;
} }
#witch { #witch {
filter: invert(); filter: invert();
} }
#information-container {
position: absolute;
}
footer {
position: absolute;
color: #fff;
bottom: 0;
}
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 3px; width: 3px;
height: 3px; height: 3px;
@ -110,22 +127,15 @@ footer {
} }
@media screen and (max-width: 978px) { @media screen and (max-width: 978px) {
#container {
flex-direction: column;
overflow-y: hidden;
flex-wrap: wrap;
}
.info-block { .info-block {
max-height: 50%; max-height: 50%;
} }
footer { #container>* {
display: none; max-width: unset;
} }
body { #facts-block {
overflow-y: hidden; max-width: unset;
overflow-x: auto;
} }
} }

BIN
wiedzma.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 70 KiB