340 lines
11 KiB
HTML
340 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Kajetan Pietrzak</title>
|
|
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
|
|
body {
|
|
font-family: "Open Sans", sans-serif;
|
|
font-optical-sizing: auto;
|
|
font-style: normal;
|
|
font-variation-settings:"wdth" 100;
|
|
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 5%;
|
|
-webkit-transform: translate(-50%, 0);
|
|
transform: translate(-50%, 0);
|
|
}
|
|
|
|
* {
|
|
font-size: calc(15px * var(--mnoznik) * 1.2);
|
|
}
|
|
|
|
.footer {
|
|
position: absolute !important;
|
|
left: 50% !important;
|
|
top: 100% !important;
|
|
|
|
-webkit-transform: translate(-50%, -100%) !important;
|
|
transform: translate(-50%, -100%) !important;
|
|
}
|
|
|
|
img {
|
|
transition: 2s;
|
|
}
|
|
|
|
.nazwa-miesiaca {
|
|
color: darkcyan;
|
|
text-align: center;
|
|
font-size: calc(25px * var(--mnoznik) * 1.2);
|
|
margin-top: 2%;
|
|
margin-bottom: 2%;
|
|
}
|
|
|
|
.obrazek {
|
|
border-radius: 5%;
|
|
width: calc(350px * var(--mnoznik));
|
|
margin: calc(10px * var(--mnoznik));
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
img:hover {
|
|
transition: 0.6s;
|
|
transform: rotate(2.5deg);
|
|
}
|
|
|
|
.trm {
|
|
background-color: rgb(0, 255, 255);
|
|
}
|
|
|
|
.tdm {
|
|
width: calc(50px * var(--mnoznik)) !important;
|
|
}
|
|
|
|
.miesiac-kalendarz {
|
|
width: calc(350px * var(--mnoznik));
|
|
margin-left: calc(10px * var(--mnoznik));
|
|
margin-right: calc(10px * var(--mnoznik));
|
|
margin-bottom: calc(10px * var(--mnoznik));
|
|
}
|
|
|
|
#kalendarz-table {
|
|
border-style: dashed;
|
|
border-radius: 10px;
|
|
border-width: 10px !important;
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
}
|
|
|
|
.error {
|
|
background: red;
|
|
color: white;
|
|
padding: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
#ustawienia {
|
|
text-align: center;
|
|
|
|
margin-top: 10px;
|
|
border: 3px solid black !important;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
@media print {
|
|
.nie-drukuj {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<noscript>
|
|
<div class="error">
|
|
Ta strona bazuje na JavaScript (do generowania kalendarza). Włącz JavaScript w przeglądarce.
|
|
</div>
|
|
</noscript>
|
|
|
|
<table id="kalendarz-table">
|
|
<tbody id="tbody">
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
<div id="ustawienia" class="nie-drukuj">
|
|
<br>
|
|
|
|
<div>
|
|
<button onclick="window.print()">Podoba się? Wydrukuj!</button>
|
|
</div>
|
|
|
|
<br>
|
|
|
|
Dostosuj kalendarz do swoich potrzeb!
|
|
|
|
<div>
|
|
Ustaw liczbę kolumn: <span id="collumns">4</span>
|
|
<input style="width: 150px !important;" type="range" min="1" max="5" step="1" value="4" id="iloscKolumn" oninput="aktualizacjaWartosci()">
|
|
Ustaw wielkość (mnożnik): <span id="mnoznik">100%</span>
|
|
<input style="width: 150px !important;" type="range" min="1" max="100" step="0" value="100" id="mnoznikInput" oninput="aktualizacjaWartosci()">
|
|
Ustaw rok:
|
|
<input type="number" min="1900" max="2100" step="1" value="2025" id="year" placeholder="Podaj rok">
|
|
|
|
</div>
|
|
|
|
<div>
|
|
Włącz lub wyłącz miesiące:
|
|
<div id="miesiaceList"></div>
|
|
</div>
|
|
|
|
<div>
|
|
<button onclick="aktualizacjaKalendarza()">Aktualizuj kalendarz!</button>
|
|
</div>
|
|
|
|
<br>
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<footer class="tekst">
|
|
Napisane w całości (HTML, CSS, JavaScript) przez: Kajetan Pietrzak <br> Wszystkie obrazy (poza maj i czerwiec - Google Images), pobrane ze strony: <a href="https://pixabay.com/">pixabay.com</a>
|
|
</footer>
|
|
|
|
<script>
|
|
var wielkosc = -1;
|
|
var wierszy = 0;
|
|
var collumns = 4;
|
|
var mnoznik = 100;
|
|
var year = document.getElementById("year").value;
|
|
|
|
const miesiaceList = document.getElementById("miesiaceList");
|
|
const nazwyMisiacow = ["Styczeń", "Luty", "Marzec", "Kwiecień", "Maj", "Czerwiec", "Lipiec", "Sierpień", "Wrzesień", "Październik", "Listopad", "Grudzień"]
|
|
var stanMiesiacow = [];
|
|
|
|
for(var i = 0; i<12; i++) {
|
|
let checkbox = document.createElement("input");
|
|
checkbox.type = "checkbox";
|
|
checkbox.id = `checkbox${i}`
|
|
checkbox.checked = true;
|
|
stanMiesiacow[`checkbox${i}`] = true;
|
|
|
|
let span = document.createElement("span");
|
|
span.textContent = nazwyMisiacow[i];
|
|
|
|
miesiaceList.appendChild(checkbox);
|
|
miesiaceList.appendChild(span);
|
|
}
|
|
|
|
document.documentElement.style.setProperty("--mnoznik", "1");
|
|
|
|
function aktualizacjaWartosci() {
|
|
collumns = document.getElementById("iloscKolumn").value;
|
|
document.getElementById("collumns").textContent = collumns;
|
|
|
|
mnoznik = document.getElementById("mnoznikInput").value;
|
|
document.getElementById("mnoznik").textContent = mnoznik + "%";
|
|
}
|
|
|
|
function aktualizacjaKalendarza() {
|
|
year = document.getElementById("year").value;
|
|
document.documentElement.style.setProperty("--mnoznik", (mnoznik / 100).toString());
|
|
|
|
for(let i = 0; i<wierszy +1; i++) {
|
|
const kalendarz = document.getElementById(`kalendarz${i}`);
|
|
kalendarz.remove();
|
|
}
|
|
|
|
wielkosc = -1;
|
|
wierszy = 0;
|
|
|
|
dodajWiersz()
|
|
|
|
for(var i in stanMiesiacow) {
|
|
let checkbox = document.getElementById(i);
|
|
if(checkbox.checked) {
|
|
if(stanMiesiacow[i] == true) {
|
|
dodajDoKalendarza(year, parseInt(i.replace(/\D/g, ''), 10)+1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function dodajWiersz() {
|
|
var tbody = document.getElementById("tbody");
|
|
var nowyWiersz = document.createElement("tr");
|
|
nowyWiersz.id = `kalendarz${wierszy}`;
|
|
|
|
tbody.appendChild(nowyWiersz);
|
|
}
|
|
|
|
function dzienTygodnia(rok, miesiac, dzien) {
|
|
return dataZDni(rok, miesiac, dzien).toLocaleDateString("pl-PL", { weekday: 'short' })
|
|
}
|
|
|
|
function dniWMiesiacu(rok, miesiac) {
|
|
return new Date(rok, miesiac, 0).getDate();
|
|
}
|
|
|
|
function dataZDni(rok, miesiac, dzien) {
|
|
return new Date(`${miesiac}/${dzien}/${rok}`)
|
|
}
|
|
|
|
function dodajDoKalendarza(rok, miesiac) {
|
|
wielkosc++;
|
|
if(wielkosc >= collumns) {
|
|
wierszy++;
|
|
wielkosc = 0;
|
|
|
|
dodajWiersz();
|
|
}
|
|
const kalendarz = document.getElementById(`kalendarz${wierszy}`);
|
|
var html = kalendarz.innerHTML;
|
|
miesiac--;
|
|
|
|
var opisy = ["Zima w styczniu maluje na drzewach białe gałązki. Śnieżna pokrywa na drzewach jest podziwiana przez ludzi podczas spacerów",
|
|
"Zima, ferie, wolny czas, zabawy na śniegu, to najlepszy czas dla dzieci, czekają na to co roku.",
|
|
"Fioletowe, żółte, białe krokusy w zanikającym śniegu to znak, że marzec wita wiosnę",
|
|
"Słońce na niebie i kwietniowe żółte forsycje w parkach zapiera dech w piersiach",
|
|
"Majowe niezapominajki bawią swoimi pięknymi kolorami.",
|
|
"Czerwcowy klimat rozpoczynających się wakacji.",
|
|
"Wakacje, lody, kwiaty i owoce, tak wygląda raj na ziemi",
|
|
"Złote kłosy zbóż, złote słońce, końcówka wakacji to sierpniowy znak, że lato odchodzi",
|
|
"Wrzesień przynosi kolory, owoce, warzywa, grzyby i cieniutkie nitki Babiego Lata",
|
|
"Klony, brzozy, dęby w kolorowych liściach żegnają okres wegetacji przechodząc w październiku na spoczynek, by wiosną powrócić swoim pięknem",
|
|
"Mgliście, zimno, dżdżyście jakby ktoś wyłączył kolory, jakoś trzeba przetrwać listopad",
|
|
"Grudzień pachnie śniegiem, choinką, piernikami i pomarańczami."]
|
|
var tytuly = ["Styczniowe śnieżne drzewa",
|
|
"Lutowe ferie szkolne",
|
|
"Krokusy w śniegu",
|
|
"Żółta forsycja jak słońce",
|
|
"Majowe niezapominajki",
|
|
"Czerwcowe wakacje",
|
|
"Lipcowe atrakcje",
|
|
"Sierpień pachnący zbożem",
|
|
"Wrześniowe Babie Lato",
|
|
"Październik pachnący liśćmi",
|
|
"Szary i bury listopad",
|
|
"Grudniowe, rodzinne święta"]
|
|
|
|
html += `
|
|
<td>
|
|
<p class="nazwa-miesiaca">${nazwyMisiacow[miesiac]}</p>
|
|
<img class="obrazek" src="${miesiac}.jpg" title="${tytuly[miesiac]}" alt="${opisy[miesiac]}">
|
|
<table class="miesiac-kalendarz">
|
|
<tr style="background-color: rgb(0, 174, 255); text-align: center;">
|
|
<td class="tdm">Pn</td>
|
|
<td class="tdm">Wt</td>
|
|
<td class="tdm">Śr</td>
|
|
<td class="tdm">Czw</td>
|
|
<td class="tdm">Pt</td>
|
|
<td class="tdm">Sb</td>
|
|
<td class="tdm">Nd</td>
|
|
</tr>
|
|
`;
|
|
|
|
var dzienTotal = 1;
|
|
var dzienMisiaca = 1;
|
|
var tydzien = 1;
|
|
var zaczolem = false;
|
|
var koniec = false;
|
|
|
|
const dniMisiaca = dniWMiesiacu(rok, miesiac+1);
|
|
var zaczynaSieOd = dataZDni(rok, miesiac+1, 1).getDay() -1;
|
|
zaczynaSieOd = (zaczynaSieOd == -1) ? 6 : zaczynaSieOd;
|
|
|
|
for(var tydzien = 1; tydzien<8; tydzien++) { //Maksymalnie 6 tygodni, ale jako, że zaczynam od "1" to i nie może być większe niż 7.
|
|
html += `<tr class="trm">`;
|
|
|
|
for(var dzien = 0; dzien<7; dzien++) {
|
|
if(tydzien == 1 && !zaczolem) {
|
|
if(dzien == zaczynaSieOd) {
|
|
html += `<td>${dzienMisiaca}</td>`
|
|
zaczolem = true;
|
|
} else {
|
|
html += "<td></td>";
|
|
}
|
|
dzienTotal++;
|
|
} else {
|
|
dzienMisiaca++;
|
|
if(dzienMisiaca > dniMisiaca) koniec = true;
|
|
if(koniec) {
|
|
if(dzien == 0) break;
|
|
html += `<td></td>`;
|
|
continue;
|
|
}
|
|
html += `<td>${dzienMisiaca}</td>`;
|
|
}
|
|
}
|
|
|
|
html += "</tr>";
|
|
}
|
|
|
|
html += '</td>';
|
|
|
|
kalendarz.innerHTML = html;
|
|
}
|
|
|
|
dodajWiersz()
|
|
|
|
for(var i = 1; i<13; i++) {
|
|
dodajDoKalendarza(year, i);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |