Lekcja 2

assets/css/main.css

@@ -4,6 +4,7 @@
 body {
     padding: 0%;
     margin: 0%;
+    user-select: none;    
 }
 
 a, a:visited {
@@ -13,6 +14,7 @@ a, a:visited {
 }
 
 a:hover, a:focus {
+    outline: none;
     text-underline-offset: 4px;
     text-decoration: underline 2px var(--colorLavender);
     color: var(--colorLavender);
@@ -125,6 +127,7 @@ main {
     padding: 1rem;
     max-width: 1680px;
     width: 90vw;
+    user-select: text;
 }
 
 /* Stopka */
@@ -143,6 +146,15 @@ footer {
 
     margin: .5rem;
     padding: 1rem;
+    padding-bottom: 1.75rem;
+}
+
+footer img {
+    height: 100%;
+}
+
+footer strong {
+    margin-top: .25rem;
 }
 
 footer div {
@@ -150,8 +162,11 @@ footer div {
     flex-direction: column;
 }
 
-footer div div {
+footer div div, .flex-row {
     flex-grow: 1;
+    display: inline-flex;
+    flex-direction: row;
+    gap: 1rem;
 }
 
 footer div div ul {
@@ -164,3 +179,112 @@ footer div div ul {
     gap: .3rem;
     list-style: none;
 }
+
+/* Akordeon */
+.akordeon {
+    width: 100%;
+    display: inline-flex;
+    flex-direction: column;
+}
+
+.akordeon.closed {
+    border-radius: 1rem;
+    background-color: var(--colorSurface0);
+    border: .22rem solid var(--colorSurface2);
+}
+
+.akordeon-header {
+    padding: .35rem;
+}
+
+input, button, .akordeon-header {
+    border-radius: .4rem;
+    border: .2rem solid var(--colorSurface2);
+    background-color: var(--colorSurface1);
+    background: linear-gradient(180deg,
+        var(--colorSurface2) 0%,
+        var(--colorSurface2) 65%,
+        var(--colorSurface1) 100%
+    );
+    color: var(--colorSubtext1);
+
+    font-weight: bold;
+    font-size: 13pt;
+
+    margin: .25rem;
+}
+
+input:focus,
+button:focus,
+.akordeon-header:focus {
+    outline: none;
+    border-color: var(--colorOverlay0);
+}
+
+button {
+    padding-top: .35rem;
+    padding-bottom: .35rem;
+    padding-left: .5rem;
+    padding-right: .5rem;
+}
+
+button:hover, .akordeon-header:hover {
+    cursor: pointer;
+    color: var(--colorText);
+    background-color: var(--colorOverlay0);
+    background: linear-gradient(180deg,
+        var(--colorOverlay0) 0%,
+        var(--colorOverlay0) 65%,
+        var(--colorSurface2) 100%
+    );
+}
+
+button:active {
+    background-color: var(--colorSurface1);
+    background: linear-gradient(180deg,
+        var(--colorSurface1) 0%,
+        var(--colorSurface1) 65%,
+        var(--colorSurface0) 100%
+    );
+    color: var(--colorSubtext1);
+    border-color: var(--colorSurface2);
+    text-shadow: none;
+}
+
+pre {
+    border-radius: .4rem;
+    border: .2rem solid var(--colorSurface2);
+    background-color: var(--colorBase);
+    padding: .5rem;
+    margin: .5rem;
+    overflow: scroll;
+}
+
+.fixed25rem {
+    min-height: 25rem;
+    max-height: 25rem;
+}
+
+input[type="range"] {
+    -webkit-appearance: none;
+    appearance: none;
+    background-color: var(--colorSurface0);
+    height: 1rem;
+    width: 100%;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 1rem;
+    height: 1rem;
+    background: var(--colorMauve);
+    cursor: pointer;
+}
+
+input[type="range"]::-moz-range-thumb {
+    width: 1rem;
+    height: 1rem;
+    background: var(--colorMauve);
+    cursor: pointer;
+}

assets/js/akordeon.js

@@ -0,0 +1,25 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const akordeony = document.getElementsByClassName("akordeon");
+    for (const akordeon of akordeony) {
+        if (akordeon.children.length < 2) {
+            console.warn("Na stronie jest niepoprawnie skonfigurowany akordeon!")
+            continue;
+        }
+        const pierworodny = akordeon.children[0];
+        const nowy = document.createElement("div")
+        nowy.className = "akordeon-header";
+
+        nowy.onclick = () => {
+            const otwarte = akordeon.classList.contains("open");
+            akordeon.classList.remove(otwarte ? "open": "closed");
+            akordeon.classList.add(otwarte ? "closed" : "open");
+            for (const dziecko of akordeon.children) {
+                if (dziecko != nowy) {
+                    dziecko.style.display = otwarte ? "" : "none";
+                }
+            }
+        }
+        akordeon.replaceChild(nowy, pierworodny)
+        nowy.append(pierworodny)
+    }
+})

assets/js/count.js

@@ -0,0 +1,267 @@
+// GoatCounter: https://www.goatcounter.com
+// This file is released under the ISC license: https://opensource.org/licenses/ISC
+;(function() {
+	'use strict';
+
+	window.goatcounter = window.goatcounter || {}
+
+	// Load settings from data-goatcounter-settings.
+	var s = document.querySelector('script[data-goatcounter]')
+	if (s && s.dataset.goatcounterSettings) {
+		try         { var set = JSON.parse(s.dataset.goatcounterSettings) }
+		catch (err) { console.error('invalid JSON in data-goatcounter-settings: ' + err) }
+		for (var k in set)
+			if (['no_onload', 'no_events', 'allow_local', 'allow_frame', 'path', 'title', 'referrer', 'event'].indexOf(k) > -1)
+				window.goatcounter[k] = set[k]
+	}
+
+	var enc = encodeURIComponent
+
+	// Get all data we're going to send off to the counter endpoint.
+	window.goatcounter.get_data = function(vars) {
+		vars = vars || {}
+		var data = {
+			p: (vars.path     === undefined ? goatcounter.path     : vars.path),
+			r: (vars.referrer === undefined ? goatcounter.referrer : vars.referrer),
+			t: (vars.title    === undefined ? goatcounter.title    : vars.title),
+			e: !!(vars.event || goatcounter.event),
+			s: window.screen.width,
+			b: is_bot(),
+			q: location.search,
+		}
+
+		var rcb, pcb, tcb  // Save callbacks to apply later.
+		if (typeof(data.r) === 'function') rcb = data.r
+		if (typeof(data.t) === 'function') tcb = data.t
+		if (typeof(data.p) === 'function') pcb = data.p
+
+		if (is_empty(data.r)) data.r = document.referrer
+		if (is_empty(data.t)) data.t = document.title
+		if (is_empty(data.p)) data.p = get_path()
+
+		if (rcb) data.r = rcb(data.r)
+		if (tcb) data.t = tcb(data.t)
+		if (pcb) data.p = pcb(data.p)
+		return data
+	}
+
+	// Check if a value is "empty" for the purpose of get_data().
+	var is_empty = function(v) { return v === null || v === undefined || typeof(v) === 'function' }
+
+	// See if this looks like a bot; there is some additional filtering on the
+	// backend, but these properties can't be fetched from there.
+	var is_bot = function() {
+		// Headless browsers are probably a bot.
+		var w = window, d = document
+		if (w.callPhantom || w._phantom || w.phantom)
+			return 150
+		if (w.__nightmare)
+			return 151
+		if (d.__selenium_unwrapped || d.__webdriver_evaluate || d.__driver_evaluate)
+			return 152
+		if (navigator.webdriver)
+			return 153
+		return 0
+	}
+
+	// Object to urlencoded string, starting with a ?.
+	var urlencode = function(obj) {
+		var p = []
+		for (var k in obj)
+			if (obj[k] !== '' && obj[k] !== null && obj[k] !== undefined && obj[k] !== false)
+				p.push(enc(k) + '=' + enc(obj[k]))
+		return '?' + p.join('&')
+	}
+
+	// Show a warning in the console.
+	var warn = function(msg) {
+		if (console && 'warn' in console)
+			console.warn('goatcounter: ' + msg)
+	}
+
+	// Get the endpoint to send requests to.
+	var get_endpoint = function() {
+		var s = document.querySelector('script[data-goatcounter]')
+		return (s && s.dataset.goatcounter) ? s.dataset.goatcounter : goatcounter.endpoint
+	}
+
+	// Get current path.
+	var get_path = function() {
+		var loc = location,
+			c = document.querySelector('link[rel="canonical"][href]')
+		if (c) {  // May be relative or point to different domain.
+			var a = document.createElement('a')
+			a.href = c.href
+			if (a.hostname.replace(/^www\./, '') === location.hostname.replace(/^www\./, ''))
+				loc = a
+		}
+		return (loc.pathname + loc.search) || '/'
+	}
+
+	// Run function after DOM is loaded.
+	var on_load = function(f) {
+		if (document.body === null)
+			document.addEventListener('DOMContentLoaded', function() { f() }, false)
+		else
+			f()
+	}
+
+	// Filter some requests that we (probably) don't want to count.
+	window.goatcounter.filter = function() {
+		if ('visibilityState' in document && document.visibilityState === 'prerender')
+			return 'visibilityState'
+		if (!goatcounter.allow_frame && location !== parent.location)
+			return 'frame'
+		if (!goatcounter.allow_local && location.hostname.match(/(localhost$|^127\.|^10\.|^172\.(1[6-9]|2[0-9]|3[0-1])\.|^192\.168\.|^0\.0\.0\.0$)/))
+			return 'localhost'
+		if (!goatcounter.allow_local && location.protocol === 'file:')
+			return 'localfile'
+		if (localStorage && localStorage.getItem('skipgc') === 't')
+			return 'disabled with #toggle-goatcounter'
+		return false
+	}
+
+	// Get URL to send to GoatCounter.
+	window.goatcounter.url = function(vars) {
+		var data = window.goatcounter.get_data(vars || {})
+		if (data.p === null)  // null from user callback.
+			return
+		data.rnd = Math.random().toString(36).substr(2, 5)  // Browsers don't always listen to Cache-Control.
+
+		var endpoint = get_endpoint()
+		if (!endpoint)
+			return warn('no endpoint found')
+
+		return endpoint + urlencode(data)
+	}
+
+	// Count a hit.
+	window.goatcounter.count = function(vars) {
+		var f = goatcounter.filter()
+		if (f)
+			return warn('not counting because of: ' + f)
+		var url = goatcounter.url(vars)
+		if (!url)
+			return warn('not counting because path callback returned null')
+
+		if (!navigator.sendBeacon(url)) {
+			// This mostly fails due to being blocked by CSP; try again with an
+			// image-based fallback.
+			var img = document.createElement('img')
+			img.src = url
+			img.style.position = 'absolute'  // Affect layout less.
+			img.style.bottom = '0px'
+			img.style.width = '1px'
+			img.style.height = '1px'
+			img.loading = 'eager'
+			img.setAttribute('alt', '')
+			img.setAttribute('aria-hidden', 'true')
+
+			var rm = function() { if (img && img.parentNode) img.parentNode.removeChild(img) }
+			img.addEventListener('load', rm, false)
+			document.body.appendChild(img)
+		}
+	}
+
+	// Get a query parameter.
+	window.goatcounter.get_query = function(name) {
+		var s = location.search.substr(1).split('&')
+		for (var i = 0; i < s.length; i++)
+			if (s[i].toLowerCase().indexOf(name.toLowerCase() + '=') === 0)
+				return s[i].substr(name.length + 1)
+	}
+
+	// Track click events.
+	window.goatcounter.bind_events = function() {
+		if (!document.querySelectorAll)  // Just in case someone uses an ancient browser.
+			return
+
+		var send = function(elem) {
+			return function() {
+				goatcounter.count({
+					event:    true,
+					path:     (elem.dataset.goatcounterClick || elem.name || elem.id || ''),
+					title:    (elem.dataset.goatcounterTitle || elem.title || (elem.innerHTML || '').substr(0, 200) || ''),
+					referrer: (elem.dataset.goatcounterReferrer || elem.dataset.goatcounterReferral || ''),
+				})
+			}
+		}
+
+		Array.prototype.slice.call(document.querySelectorAll("*[data-goatcounter-click]")).forEach(function(elem) {
+			if (elem.dataset.goatcounterBound)
+				return
+			var f = send(elem)
+			elem.addEventListener('click', f, false)
+			elem.addEventListener('auxclick', f, false)  // Middle click.
+			elem.dataset.goatcounterBound = 'true'
+		})
+	}
+
+	// Add a "visitor counter" frame or image.
+	window.goatcounter.visit_count = function(opt) {
+		on_load(function() {
+			opt        = opt        || {}
+			opt.type   = opt.type   || 'html'
+			opt.append = opt.append || 'body'
+			opt.path   = opt.path   || get_path()
+			opt.attr   = opt.attr   || {width: '200', height: (opt.no_branding ? '60' : '80')}
+
+			opt.attr['src'] = get_endpoint() + 'er/' + enc(opt.path) + '.' + enc(opt.type) + '?'
+			if (opt.no_branding) opt.attr['src'] += '&no_branding=1'
+			if (opt.style)       opt.attr['src'] += '&style=' + enc(opt.style)
+			if (opt.start)       opt.attr['src'] += '&start=' + enc(opt.start)
+			if (opt.end)         opt.attr['src'] += '&end='   + enc(opt.end)
+
+			var tag = {png: 'img', svg: 'img', html: 'iframe'}[opt.type]
+			if (!tag)
+				return warn('visit_count: unknown type: ' + opt.type)
+
+			if (opt.type === 'html') {
+				opt.attr['frameborder'] = '0'
+				opt.attr['scrolling']   = 'no'
+			}
+
+			var d = document.createElement(tag)
+			for (var k in opt.attr)
+				d.setAttribute(k, opt.attr[k])
+
+			var p = document.querySelector(opt.append)
+			if (!p)
+				return warn('visit_count: element to append to not found: ' + opt.append)
+			p.appendChild(d)
+		})
+	}
+
+	// Make it easy to skip your own views.
+	if (location.hash === '#toggle-goatcounter') {
+		if (localStorage.getItem('skipgc') === 't') {
+			localStorage.removeItem('skipgc', 't')
+			alert('GoatCounter tracking is now ENABLED in this browser.')
+		}
+		else {
+			localStorage.setItem('skipgc', 't')
+			alert('GoatCounter tracking is now DISABLED in this browser until ' + location + ' is loaded again.')
+		}
+	}
+
+	if (!goatcounter.no_onload)
+		on_load(function() {
+			// 1. Page is visible, count request.
+			// 2. Page is not yet visible; wait until it switches to 'visible' and count.
+			// See #487
+			if (!('visibilityState' in document) || document.visibilityState === 'visible')
+				goatcounter.count()
+			else {
+				var f = function(e) {
+					if (document.visibilityState !== 'visible')
+						return
+					document.removeEventListener('visibilitychange', f)
+					goatcounter.count()
+				}
+				document.addEventListener('visibilitychange', f)
+			}
+
+			if (!goatcounter.no_events)
+				goatcounter.bind_events()
+		})
+})();

assets/js/js-podstawy.js

@@ -0,0 +1,147 @@
+const teksty = [
+    `<CiscoIPPhoneText>
+    <Title>Dokumentacja Cisco</Title>
+    <Text>Cisco chyba zdjeło PDFy z dokumentacją dla tych telefonów! Musiałem użyć Wayback Machine żeby napisać ten fragmencik</Text>
+    <Description>O nie! Jesteśmy zgubieni.</Description>
+</CiscoIPPhoneText>`,
+    `How much do YOU thing this advanced operating environment is worth?
+Wait just one minute before you anwser!
+Watch as Windows integrates Lotus 1-2-3 with Miami Vice!
+Now we can take this Ferrari and paste it right into Windows Write.
+Now how much do you think Microsoft Windows is worth?
+Don't anwser!
+Wait until you see Windows Write and Windows Paint and then listen to what else you get at no extra charge:
+the MS-DOS Executive, an appointment callendar,
+a cardfile, a notepad, a clock, a control panel,
+a terminal, print spooler, RAM drive,
+AND, can you believe it; REVERSI!
+That's right! All those features and Reversi, all for just--
+How much did you guess?
+Five hundred? A thousand?! EVEN MORE?!
+NO it's just $99! That's right! It's $99!
+It's an incredible value, but it's true!
+It's Windows from Microsoft! Order today!
+P.O. Box
+286-DOS
+EXCEPT IN NEBRASKA...`,
+    `// https://www.ioccc.org/2024/kurdyukov3/index.html
+
+#include <stdio.h>
+#include <stdlib.h>
+#include <sys/time.h>
+#include <X11/Xlib.h>
+#include <X11/Xutil.h>
+#define H h[c&7]
+#define C(a,b) case a:b; break;
+#define X(n,t,o) C(n,b=(t)c o(t)b)
+#define R b=m[++d]; n=a&127; if(n){ if(n-1)b=m[b&k]+(n>2?n-65:0); \
+if(n-2){ n=b%4*8; b=b/4&k; b=m[b]>>n|m[b+1]*2<<~n%32; } } a>>=7;
+#define Y(n,t,a,b,c,d)X(n,t,a)X(n+1,t,b)X(n+2,t,c)X(n+3,t,d)
+#define B(i,a,j) if(c==i){ m[1]=E.a.x|E.a.y<<14|E.a.j<<28; b
+#define O(n,t) Y(n,t,+,-,|,^)Y(n+4,t,&,*,/,%)\
+Y(n+8,t,<<,>>,==,!=)Y(n+12,t,<,<=,>,>=)
+#define M(x) x##PressMask|x##ReleaseMask|
+#define W(c) m[d]=(m[d]|n c)^(~b&n)c;
+
+int main(int c,char**x){ void*f=c-->1?fopen(x[1],"rb"):0,*h[8]={ stdin,stdout,s\
+tderr} ; unsigned y=0,z=0,a,b=0,d,n=0,k=(1<<24)-1,*m=calloc(k+4,4); struct time\
+val t; char s[33]={ 0} ; Window W=0; GC G=0; Display*D=0; XEvent E; XImage*I=0;
+Atom A=0; if(m&&f){ for(; b<=k&&((a=fgetc(f))<256||(a=x[c][n++]&255)||(n=0,--c))
+; b++)m[b/4]|=a<<b%4*8; ; fclose(f); for(m[1]=b; ; ){ a=m[d=*m&k]; *m+=4; R c=b;
+R d=m[d+1]; switch(a>>9){ default:I?I->data=0:0; return a?1:c; C(1,b=H?c<0?fgetc
+(H):fputc(b,H):-1)C(2,gettimeofday(&t,0); b=t.tv_sec*1000+t.tv_usec/1000)C(3,t.
+tv_sec=0; t.tv_usec=b*1000; select(0,0,0,0,&t))C(4,s[c&31]=b&&b-48>9&&(b|32)-97>
+25&&b-46?95:b)C(5,b=!(H=H?fclose(H),f=0:fopen(s,b?"wb":"rb")))C(6,b=H?c<0?ftell(
+H):fseek(H,(int)b,c/8):-1)C(7,if(!(I||~(-c&-b)>>12)){ XSizeHints h; h.flags=PMi\
+nSize|PMaxSize; h.min_width=h.max_width=c; h.min_height=h.max_height=b; G=XDefa\
+ultGC(D=XOpenDisplay(0),0); W=XCreateSimpleWindow(D,RootWindow(D,0),0,0,c,b,1,0,
+0); XSetStandardProperties(D,W,s,0,0,0,0,&h); XSelectInput(D,W,M(Key)M(Button)P\
+ointerMotionMask); A=XInternAtom(D,"WM_DELETE_WINDOW",0); XSetWMProtocols(D,W,&A
+,1); XMapWindow(D,W); I=XCreateImage(D,DefaultVisual(D,0),24,ZPixmap,0,0,y=c,z=b
+,32,0); } b=I?6:0)C(8,while(b=2,I&&XPending(D)){ XNextEvent(D,&E); c=E.type; if(
+c-ClientMessage||*E.xclient.data.l-A){ b=c==KeyRelease; if(b||c==KeyPress){ m[1]
+=XLookupKeysym(&E.xkey,0); break; } b=c==ButtonRelease; B(ButtonPress||b,xbutton
+,button)+=4; break; } B(MotionNotify,xmotion,x)=6; break; } } else{ b=3; break;
+} } )C(9,b&=k; if(I&&b+y*z<k){ I->data=f=m+b; XPutImage(D,W,G,I,0,0,0,0,y,z); X\
+Sync(D,0); } )C(10,; )O(32,unsigned)O(48,int)O(64,unsigned short)O(80,short)O(96
+,unsigned char)O(112,signed char)} n=a&127; if(n){ c=0; d=n>2?m[d&k]+n-65:d; d=(
+n-2?c=d%4*8,d/4:d)&k; n=-1; n>>=a>>4&24; W(<<c)d++; if(c)W(>>(32-c))} else *m+=b
+?d:0; } } return 1; }`
+];
+
+const rozmiary = {
+    8: "Najmniejszy",
+    12: "Mały",
+    14: "Średni",
+    16: "Duży",
+    20: "Całkiem całkiem",
+    24: "Wielki",
+    36: "Największy"
+};
+
+document.addEventListener("DOMContentLoaded", () => {
+    zad1Zsumuj();
+
+    zad3Inicjalizacja();
+
+    document.getElementById('zad4-tekst').style.fontSize = '30pt';
+    document.getElementById('zad4-tekst').style.margin = '.25rem';
+    document.getElementById('zad4-tekst').style.padding = '.5rem';
+    document.getElementById('zad4-tekst').style.borderRadius = '1rem';
+});
+
+function zad1Zsumuj() {
+    const elX = document.getElementById("zad1-x");
+    const elY = document.getElementById("zad1-y");
+    const elOut = document.getElementById("zad1-output");
+
+    const x = typeof elX.value == "string" ? Number(elX.value) : 0;
+    const y = typeof elY.value == "string" ? Number(elY.value) : 0;
+
+    elOut.innerText = `${x} + ${y} = ${x + y}`
+}
+
+function zad2UstawImie() {
+    const imie = prompt("Podaj imię");
+    const elOut = document.getElementById("zad2-output");
+    if (typeof imie == "null") {
+        elOut.innerText = "Bezimienny";
+    } else {
+        elOut.innerText = imie;
+    }
+}
+
+function zad3Inicjalizacja() {
+    document.getElementById("zad3-tekst").innerText = teksty.at(Math.floor(Math.random() * teksty.length) - 1);
+
+    const elPrzyciski = document.getElementById("zad3-przyciski");
+    for (const rozmiar in rozmiary) {
+        const nazwa = rozmiary[rozmiar]
+        const przycisk = document.createElement("button");
+        przycisk.innerText = nazwa;
+        przycisk.onclick = () => {
+            document.getElementById("zad3-rozmiar").value = rozmiar;
+            zad3ZmienRozmiar();
+        };
+        elPrzyciski.appendChild(przycisk)
+    }
+}
+
+function zad3ZmienRozmiar() {
+    const elRozmiar = document.getElementById("zad3-rozmiar");
+    const rozmiar = typeof elRozmiar.value == "string" ? Number(elRozmiar.value) : 0;
+    document.getElementById("zad3-tekst").style.fontSize = `${rozmiar}pt`;
+    document.getElementById("zad3-output").innerText = rozmiary[rozmiar] ?? `${rozmiar}pt`;
+}
+
+
+function koniec() {
+    const koniec = `To tak tylko między nami:
+    Tą strone zaczynałem robić jakoś po lekcji, zrobiłem do końca 1 i 2, 3 zaczałem
+    W momencie w którym to pisze jest 1:40 w poniedziałek :3.
+    Zarwałem nocke dlatego że Youpiter zrobił w Pythonie program quizowy z chemi dla klasy i chciałem dla zabawy zrobić wersje przeglądarkową ale on już sie tym zajął.
+    No i żeby nie marnować czasu zacząłem robić to zadanie, wiadomo, kto normalny by tak nie zrobił robił?.
+    A, Youpiter coś potem wspomniał o chęci dodania "trząśnięcia" formularzem jak jest podana zła odpowiedź, więc zacząłem pisać keyframey CSSowe pod robienie tego. Ba, ten skrawek CSSa nawet tutaj jest, wkleiłem go do akordeonu.
+    `;
+    alert(koniec);
+}

galeria.html

@@ -7,6 +7,8 @@
         <link href="/favicon.ico" rel="favicon">
         <link href="/assets/css/main.css" rel="stylesheet">
         <link href="/assets/css/galeria.css" rel="stylesheet">
+        <script data-goatcounter="https://darksteveneq.goatcounter.com/count"
+        async src="/assets/js/count.js"></script>
     </head>
     <body>
         <header>
@@ -15,9 +17,7 @@
             <nav>
                 <ul>
                     <li><a href="/index.html">Strona główna</a></li>
-                    <li><a href="/hobby.html">Moje hobby</a></li>
+                    <li><a href="/js-podstawy.html">JS Podstawowe Zad.</a></li>
-                    <li><a href="/galeria.html">Galeria</a></li>
-                    <li><a href="https://nonamesoft.xyz/about">Kontakt</a></li>
                 </ul>
             </nav>
         </header>
@@ -54,6 +54,9 @@
                         <li><a href="/galeria.html">Galeria</a></li>
                         <li><a href="https://nonamesoft.xyz/about">Kontakt</a></li>
                     </ul>
+                    <ul>
+                        <li><a href="/js-podstawy.html">JS Podstawowe Zad.</a></li>
+                    </ul>
                 </div>
                 <strong>Strona &copy; Dark Steveneq, 2025; Nazwę wymyślił Youpiter</strong> <sub>#GradientySąSuper</sub>
             </div>

hobby.html

@@ -6,6 +6,8 @@
         <title>Moje Hobby - MaszToZadanieDomowe.com</title>
         <link href="/favicon.ico" rel="favicon">
         <link href="/assets/css/main.css" rel="stylesheet">
+        <script data-goatcounter="https://darksteveneq.goatcounter.com/count"
+        async src="/assets/js/count.js"></script>
     </head>
     <body>
         <header>
@@ -14,9 +16,7 @@
             <nav>
                 <ul>
                     <li><a href="/index.html">Strona główna</a></li>
-                    <li><a href="/hobby.html">Moje hobby</a></li>
+                    <li><a href="/js-podstawy.html">JS Podstawowe Zad.</a></li>
-                    <li><a href="/galeria.html">Galeria</a></li>
-                    <li><a href="https://nonamesoft.xyz/about">Kontakt</a></li>
                 </ul>
             </nav>
         </header>
@@ -99,6 +99,9 @@
                         <li><a href="/galeria.html">Galeria</a></li>
                         <li><a href="https://nonamesoft.xyz/about">Kontakt</a></li>
                     </ul>
+                    <ul>
+                        <li><a href="/js-podstawy.html">JS Podstawowe Zad.</a></li>
+                    </ul>
                 </div>
                 <strong>Strona &copy; Dark Steveneq, 2025; Nazwę wymyślił Youpiter</strong> <sub>#GradientySąSuper</sub>
             </div>

index.html

@@ -6,6 +6,8 @@
         <title>MaszToZadanieDomowe.com</title>
         <link href="/favicon.ico" rel="favicon">
         <link href="assets/css/main.css" rel="stylesheet">
+        <script data-goatcounter="https://darksteveneq.goatcounter.com/count"
+        async src="/assets/js/count.js"></script>
     </head>
     <body>
         <header>
@@ -13,10 +15,8 @@
             <h1>MaszToZadanieDomowe.com</h1>
             <nav>
                 <ul>
-                    <li><a href="/">Strona główna</a></li>
+                    <li><a href="/index.html">Strona główna</a></li>
-                    <li><a href="/hobby.html">Moje hobby</a></li>
+                    <li><a href="/js-podstawy.html">JS Podstawowe Zad.</a></li>
-                    <li><a href="/galeria.html">Galeria</a></li>
-                    <li><a href="https://nonamesoft.xyz/about">Kontakt</a></li>
                 </ul>
             </nav>
         </header>
@@ -40,18 +40,19 @@
 	    patrzcie jak żre koperek<br>
 	    to będzie zdrowy pieesek<br>
 	    <sub>youpiter podsunął to</sub>
-
-	    <div align=center><a href='https://www.counter12.com'><img src='https://www.counter12.com/img-byy9541ydC16BAZ7-9.gif' border='0' alt='conter12'></a><script type='text/javascript' src='https://www.counter12.com/ad.js?id=byy9541ydC16BAZ7'></script></div>
         </main>
         <footer>
             <div>
                 <div>
                     <ul>
-                        <li><a href="/">Strona główna</a></li>
+                        <li><a href="/index.html">Strona główna</a></li>
-                        <li><a href="/hobby">Moje hobby</a></li>
+                        <li><a href="/hobby.html">Moje hobby</a></li>
-                        <li><a href="/galeria">Galeria</a></li>
+                        <li><a href="/galeria.html">Galeria</a></li>
                         <li><a href="https://nonamesoft.xyz/about">Kontakt</a></li>
                     </ul>
+                    <ul>
+                        <li><a href="/js-podstawy.html">JS Podstawowe Zad.</a></li>
+                    </ul>
                 </div>
                 <strong>Strona &copy; Dark Steveneq, 2025; Nazwę wymyślił Youpiter</strong> <sub>#GradientySąSuper</sub>
             </div>

js-podstawy.html

@@ -0,0 +1,165 @@
+<!DOCTYPE html>
+<html lang="pl">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>JS Podstawowe Zad. - MaszToZadanieDomowe.com</title>
+        <link href="/favicon.ico" rel="favicon">
+        <link href="/assets/css/main.css" rel="stylesheet">
+        <script data-goatcounter="https://darksteveneq.goatcounter.com/count"
+        async src="/assets/js/count.js"></script>
+        <script src="/assets/js/akordeon.js"></script>
+        <script src="/assets/js/js-podstawy.js"></script>
+    </head>
+    <body>
+        <header>
+            <img src="/favicon.ico" width="64" height="64">
+            <h1>MaszToZadanieDomowe.com</h1>
+            <nav>
+                <ul>
+                    <li><a href="/index.html">Strona główna</a></li>
+                    <li><a href="/js-podstawy.html">JS Podstawowe Zad.</a></li>
+                </ul>
+            </nav>
+        </header>
+        <main>
+            <h2>JavaScript Podstawowe Zadania</h2>
+            <hr>
+            <ol>
+                <li>
+                    <h4>Sumowanie liczb</h4>
+                    <hr>
+                    <label for="zad1-x">X:</label>
+                    <input type="number" name="X" id="zad1-x" placeholder="2" oninput="zad1Zsumuj()"><br>
+
+                    <label for="zad1-y">Y: </label>
+                    <input type="number" name="Y" id="zad1-y" placeholder="2" oninput="zad1Zsumuj()"><br>
+
+                    <br>
+                    <hr>
+                    <strong>Wynik:</strong> <span id="zad1-output">2 + 2 = 4</span>
+                </li>
+                <br>
+                <li>
+                    <h4>Wyświetlanie imienia</h4>
+                    <hr>
+                    <strong>Imię:</strong> <span id="zad2-output">Bezimienny</span>
+                    <br>
+                    <button onclick="zad2UstawImie()">Pobierz imię</button>
+                </li>
+                <br>
+                <li>
+                    <h4>Zmiana rozmiaru tekstu</h4>
+                    <hr>
+                    <pre class="fixed25rem" id="zad3-tekst">Przykładowy tekst</pre>
+                    <hr>
+                    <strong>Rozmiar tekstu:</strong> <span id="zad3-output"></span><br>
+                    <input type="range" min="8" max="36" step="1" name="rozmiar" id="zad3-rozmiar" value="14" oninput="zad3ZmienRozmiar()">
+                    <div id="zad3-przyciski" class="flex-row"></div>
+                </li>
+                <br>
+                <li>
+                    <h4>Formatowanie tekstu</h4>
+                    <hr>
+                    <p id="zad4-tekst">Przykładowy tekst</p>
+                    <hr>
+                    <h5>Kolor tekstu</h5>
+                    <div class="flex-row">
+                        <button onclick="document.getElementById('zad4-tekst').style.color = 'var(--colorRed)'">Czerwony</button>
+                        <button onclick="document.getElementById('zad4-tekst').style.color = 'var(--colorText)'">Podstawowy</button>
+                        <button onclick="document.getElementById('zad4-tekst').style.color = 'var(--colorGreen)'">Zielony</button>
+                        <button onclick="document.getElementById('zad4-tekst').style.color = 'var(--colorLavender)'">Lawendowy</button>
+                        <button onclick="document.getElementById('zad4-tekst').style.color = 'var(--colorYellow)'">Żółte</button>
+                    </div>
+                    <h5>Rozmiar tekstu</h5>
+                    <div class="flex-row">
+                        <button onclick="document.getElementById('zad4-tekst').style.fontSize = '30pt'">30pt</button>
+                        <button onclick="document.getElementById('zad4-tekst').style.fontSize = '50pt'">50pt</button>
+                    </div>
+                    <h5>Tło</h5>
+                    <div class="flex-row">
+                        <button onclick="document.getElementById('zad4-tekst').style.backgroundColor = ''">Brak</button>
+                        <button onclick="document.getElementById('zad4-tekst').style.backgroundColor = '#ff0000'">Komunistyczne</button>
+                    </div>
+                    <h5>Ramka</h5>
+                    <div class="flex-row">
+                        <button onclick="document.getElementById('zad4-tekst').style.border = ''">Brak</button>
+                        <button onclick="document.getElementById('zad4-tekst').style.border = '.3rem solid var(--colorOverlay1)'">Ta co wszędzie</button>
+                    </div>
+                    <h5>Tekst</h5>
+                    <div class="flex-row">
+                        <button onclick="document.getElementById('zad4-tekst').innerText = prompt('Nowy tekst')">Zmień tekst</button>
+                        <button onclick="document.getElementById('zad4-tekst').innerText = 'Przykładowy tekst'">Przywróć pierwotny tekst</button>
+                    </div>
+                </li>
+                <br>
+                <li>
+                    <h4>Akordeon</h4>
+                        <div class="akordeon">
+                            <span>Tytuł akordeonu</span>
+                            <pre>
+.wrong {
+  --offset: 5rem;
+  --timing: 3s;
+  --interp: ease;
+
+  position: relative;
+  animation: Wrong var(--timing) var(--interp); /* nwm czy dobre to być */
+}
+@keyframes Wrong { 
+        0% {
+		left: 0%;
+	}
+	14% {
+		left: -var(--offset);
+	}
+        28% {
+		left: var(--offset);
+	}
+	42% {
+		left: -var(--offset);
+	}
+        56% {
+		left: var(--offset);
+	}
+	70% {
+		left: -var(--offset);
+	}
+        84% {
+		left: var(--offset);
+	}
+	98% {
+		left: 0%;
+	}
+}
+                            </pre>
+                        </div>
+                    <hr>
+                </li>
+                <br>
+                <li>
+                    <h4>O autorze</h4>
+                    <hr>
+                    <button onclick="koniec()">"O autorze"</button>
+                </li>
+            </ol>
+        </main>
+        <footer>
+            <div>
+                <div>
+                    <ul>
+                        <li><a href="/index.html">Strona główna</a></li>
+                        <li><a href="/hobby.html">Moje hobby</a></li>
+                        <li><a href="/galeria.html">Galeria</a></li>
+                        <li><a href="https://nonamesoft.xyz/about">Kontakt</a></li>
+                    </ul>
+                    <ul>
+                        <li><a href="/js-podstawy.html">JS Podstawowe Zad.</a></li>
+                    </ul>
+                </div>
+                <strong>Strona &copy; Dark Steveneq, 2025; Nazwę wymyślił Youpiter</strong> <sub>#GradientySąSuper</sub>
+            </div>
+            <img src="/assets/images/blahaj.png">
+        </footer>
+    </body>
+</html>