add: initial commit
This commit is contained in:
sadorowo
GitHub
commit
606588c856
BIN
background.png
Normal file
BIN
background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 MiB |
36
index.html
Normal file
36
index.html
Normal file
@ -0,0 +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>
|
||||||
|
<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>
|
||||||
|
<img src="wiedzma.png" alt="Wiedźma" id="witch">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<footer>Nie próbuj klikać prawego przycisku myszy! 😈</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
32
script.js
Normal file
32
script.js
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
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ń',
|
||||||
|
_: 'dni'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function plural(word, n) {
|
||||||
|
return plurals[word][n] ?? plurals[word]['_']
|
||||||
|
}
|
||||||
|
|
||||||
|
const timeDifference = Math.abs(now - witchDayDate);
|
||||||
|
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();
|
||||||
|
})
|
||||||
110
style.css
Normal file
110
style.css
Normal file
@ -0,0 +1,110 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;900&display=swap');
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--bg: rgb(104, 46, 46);
|
||||||
|
--bg-lighter: rgb(255, 112, 115);
|
||||||
|
--scrollbar: rgb(255, 205, 205);
|
||||||
|
--info-block-bg: #c07f7f;
|
||||||
|
--info-block-border: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
user-select: none;
|
||||||
|
-webkit-user-drag: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Merriweather', serif;
|
||||||
|
background: url(background.png) no-repeat center center fixed;
|
||||||
|
background-color: var(--bg);
|
||||||
|
transition: ease-in-out .2s;
|
||||||
|
background-size: cover;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.lighter {
|
||||||
|
background-color: var(--bg-lighter);
|
||||||
|
filter: invert();
|
||||||
|
}
|
||||||
|
|
||||||
|
body.lighter>footer {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
body h1:first-child {
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-block {
|
||||||
|
background-color: var(--info-block-bg);
|
||||||
|
border-radius: var(--info-block-border);
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
max-height: 40vw;
|
||||||
|
overflow: auto;
|
||||||
|
padding: 20px;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#witch {
|
||||||
|
filter: invert();
|
||||||
|
}
|
||||||
|
|
||||||
|
#information-container {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
position: absolute;
|
||||||
|
color: #fff;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 3px;
|
||||||
|
height: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-button {
|
||||||
|
width: 0px;
|
||||||
|
height: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--scrollbar);
|
||||||
|
border-radius: 50px;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: #666666;
|
||||||
|
border-radius: 50px;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track:hover {
|
||||||
|
background: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track:active {
|
||||||
|
background: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-corner {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
BIN
wiedzma.png
Normal file
BIN
wiedzma.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
Loading…
Reference in New Issue
Block a user