<!DOCTYPE html>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<!-- ════════════════════════════════════════════════════════
	     SEO — META TAGI
	     FIX: wypełniony description (był pusty → błąd PageSpeed)
	     ════════════════════════════════════════════════════════ -->
	<title>Strona Michała – Kalkulatory, Narzędzia i Gry Online</title>
	<meta name="description" content="Darmowe narzędzia online: kalkulator, wyliczanie ocen, generator QR kodów, szyfrowanie, alfabet Morse'a, gry przeglądarkowe i wiele więcej. Strona Michała.">
	<meta name="keywords" content="kalkulator online, wyliczanie ocen, generator QR, szyfrowanie, alfabet morse, narzędzia online, gry online, kalkulator ułamków, kalkulator procentów">
	<meta name="author" content="Michał">
	<meta name="robots" content="index, follow">
	<link rel="canonical" href="https://stronamichala.pages.dev/">

	<!-- ════════════════════════════════════════════════════════
	     SEO — OPEN GRAPH
	     ════════════════════════════════════════════════════════ -->
	<meta property="og:type" content="website">
	<meta property="og:url" content="https://stronamichala.pages.dev/">
	<meta property="og:title" content="Strona Michała – Kalkulatory, Narzędzia i Gry Online">
	<meta property="og:description" content="Darmowe narzędzia online: kalkulator, wyliczanie ocen, generator QR kodów, szyfrowanie, alfabet Morse'a, gry i wiele więcej.">
	<!-- og:image — WAŻNE dla podglądu przy udostępnianiu w SM        -->
	<!-- Musi być plik który NAPRAWDĘ istnieje na serwerze.            -->
	<!-- Użyj icona.png (128x128) jako fallback lub stwórz icona.png -->
	<!-- Minimalne wymiary dla Facebooka: 1200x630px                   -->
	<meta property="og:image" content="https://stronamichala.pages.dev/icona.png">
	<meta property="og:image:width" content="128">
	<meta property="og:image:height" content="128">
	<meta property="og:image:alt" content="Logo Strony Michała — litery MJ">
	<meta property="og:locale" content="pl_PL">
	<meta property="og:locale:alternate" content="en_US">
	<meta property="og:site_name" content="Strona Michała">

	<!-- ════════════════════════════════════════════════════════
	     SEO — TWITTER CARD
	     ════════════════════════════════════════════════════════ -->
	<meta name="twitter:card" content="summary_large_image">
	<meta name="twitter:title" content="Strona Michała – Kalkulatory, Narzędzia i Gry Online">
	<meta name="twitter:description" content="Darmowe narzędzia online: kalkulator, wyliczanie ocen, generator QR, szyfrowanie i wiele więcej.">
	<meta name="twitter:image" content="https://stronamichala.pages.dev/icona.png">

	<!-- ════════════════════════════════════════════════════════
	     SEO — STRUCTURED DATA JSON-LD
	     Pomaga Google zrozumieć strukturę strony (rich snippets)
	     ════════════════════════════════════════════════════════ -->
	<script type="application/ld+json">
	{
	  "@context": "https://schema.org",
	  "@type": "WebSite",
	  "name": "Strona Michała",
	  "url": "https://stronamichala.pages.dev/",
	  "description": "Darmowe narzędzia online: kalkulatory, generator QR, szyfrowanie, gry i wiele więcej.",
	  "inLanguage": ["pl", "en"],
	  "potentialAction": {
	    "@type": "SearchAction",
	    "target": "https://stronamichala.pages.dev/{search_term_string}",
	    "query-input": "required name=search_term_string"
	  }
	}
	</script>

	<!-- Ikony -->
	<link rel="icon" href="icona.png" type="image/png" sizes="128x128">
	<link rel="apple-touch-icon" href="icona.png">

	<!-- ════════════════════════════════════════════════════════
	     WYDAJNOŚĆ — Preconnect
	     FIX: redukuje "drzewo zależności sieciowych"
	     ════════════════════════════════════════════════════════ -->
	<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link rel="dns-prefetch" href="https://code.jquery.com">

	<!-- CSS — jedyna rzecz która powinna blokować rendering -->
	<!-- preload hint: przeglądarka zaczyna pobierać jeszcze zanim
	     zobaczy <link rel="stylesheet"> — skraca 162ms na style.css -->
	<link rel="preload" href="style.css" as="style">
	<link rel="stylesheet" href="style.css" type="text/css">

	<!-- ════════════════════════════════════════════════════════
	     WYDAJNOŚĆ — Google Fonts ASYNCHRONICZNIE
	     Trick: media="print" → onload="this.media='all'" 
	     Przeglądarka pobiera font NON-BLOCKING, potem aktywuje.
	     Eliminuje 553ms blokady woff2 z krytycznej ścieżki.
	     noscript fallback dla użytkowników bez JS.
	     ════════════════════════════════════════════════════════ -->
	<link rel="preload"
	      href="https://fonts.googleapis.com/icon?family=Material+Icons&display=swap"
	      as="style"
	      onload="this.onload=null;this.rel='stylesheet'">
	<noscript>
	  <link rel="stylesheet"
	        href="https://fonts.googleapis.com/icon?family=Material+Icons&display=swap">
	</noscript>

	<!-- ════════════════════════════════════════════════════════
	     WYDAJNOŚĆ — Wszystkie skrypty z defer
	     FIX błędu "Prośby o zablokowanie renderowania — 460ms"
	     defer = pobierz równolegle z HTML, wykonaj PO sparsowaniu
	     Kolejność jest zachowana — jQuery zawsze przed resztą
	     ════════════════════════════════════════════════════════ -->
	<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous" defer></script>
	<script src="0js/easterEggs.js" defer></script>
	<script src="0js/jezyk.js" defer></script>
	<script src="0js/timer.js" defer></script>
	<script src="0js/mode.js" defer></script>
	<script src="0js/index.js" defer></script>
	<script src="0js/snieg.js" defer></script>
	<script src="0js/search.js" defer></script>

	<script defer>
		document.addEventListener('DOMContentLoaded', function() {
			if (typeof PageManager !== 'undefined') {
				PageManager.initialize();
			}

			const menuText = document.getElementById('menuText');
			const menu = document.getElementById('menu');

			if (menuText && menu) {
				menuText.addEventListener('click', function() {
					if (window.innerWidth <= 768) {
						menu.classList.toggle('active');
						const expanded = menu.classList.contains('active');
						menuText.setAttribute('aria-expanded', expanded);
					}
				});

				const menuLinks = document.querySelectorAll('#menu-list a:not(.submenu-toggle)');
				menuLinks.forEach(link => {
					link.addEventListener('click', function() {
						if (window.innerWidth <= 768) {
							menu.classList.remove('active');
							menuText.setAttribute('aria-expanded', 'false');
						}
					});
				});

				const submenuToggles = document.querySelectorAll('.submenu-toggle');
				const menuList = document.getElementById('menu-list');

				function evaluateMenuSpace(actionSource = null) {
					if (window.innerWidth <= 768) return;
					if (actionSource === "RESIZE" || actionSource === "INIT") {
						submenuToggles.forEach(t => {
							t.classList.add('active');
							t.setAttribute('aria-expanded', 'true');
						});
					}
					let bottomPosition = menuList.getBoundingClientRect().bottom;
					while (bottomPosition > window.innerHeight - 20) {
						let activeToggles = Array.from(submenuToggles).filter(t =>
							t.classList.contains('active') && t !== actionSource
						);
						if (activeToggles.length === 0) break;
						let toggleToClose = activeToggles[activeToggles.length - 1];
						toggleToClose.classList.remove('active');
						toggleToClose.setAttribute('aria-expanded', 'false');
						bottomPosition = menuList.getBoundingClientRect().bottom;
					}
				}

				submenuToggles.forEach(toggle => {
					toggle.addEventListener('click', function(e) {
						e.preventDefault();
						this.classList.toggle('active');
						this.setAttribute('aria-expanded', this.classList.contains('active'));
						if (this.classList.contains('active')) evaluateMenuSpace(this);
					});
				});

				window.addEventListener('resize', () => evaluateMenuSpace("RESIZE"));
				evaluateMenuSpace("INIT");
				setTimeout(() => evaluateMenuSpace("INIT"), 150);
			}
		});

		// Console Easter Egg
		const mjAscii = `
███╗   ███╗ ██╗  ██████╗ ██╗  ██╗  █████╗  ██╗
████╗ ████║ ██║ ██╔════╝ ██║  ██║ ██╔══██╗ ██║ ██╗
██╔████╔██║ ██║ ██║      ███████║ ███████║ ██║██╔╝
██║╚██╔╝██║ ██║ ██║      ██╔══██║ ██╔══██║ ████╔╝
██║ ╚═╝ ██║ ██║ ╚██████╗ ██║  ██║ ██║  ██║ ███████╗
╚═╝     ╚═╝ ╚═╝  ╚═════╝ ╚═╝  ╚═╝ ╚═╝  ╚═╝ ╚══════╝`;
		const devMessage = "Cześć! Widzę, że zaglądasz do konsoli. Jesteś ciekawy? To świetnie! Miłego dnia!";
		console.log(`%c${mjAscii}`, "background:linear-gradient(207deg,rgba(131,58,180,1) 0%,rgba(255,0,0,1) 50%,rgb(255,255,0) 100%);-webkit-background-clip:text;color:transparent;font-family:monospace;font-weight:bold;");
		console.log(`%c${devMessage}`, "color:#ffffff;font-family:sans-serif;font-size:14px;font-weight:bold;");
	</script>
	<!-- ════════════════════════════════════════════════════════
	     WYDAJNOŚĆ — Critical CSS inline
	     Style dla elementów widocznych "above the fold":
	     #nazwa, body tło, układ — eliminuje FOUC (flash of unstyled content)
	     Przeglądarka maluje te elementy BEZ czekania na style.css
	     ════════════════════════════════════════════════════════ -->
	<style>
	  /* Tło i font — zapobiegają białemu flashowi */
	  html{background:#f0f2f5}
	  body{margin:0;font-family:'Noto Sans Display','Segoe UI',system-ui,sans-serif;
	       background:#f0f2f5;color:#111827;overflow-x:hidden}
	  /* Nagłówek — największy LCP element */
	  #nazwa{width:100%;height:120px;background:#111;
	         display:flex;align-items:center;justify-content:center;
	         color:#fff;font-size:clamp(14px,4vw,28px);
	         position:relative;z-index:100;user-select:none}
	  /* Układ główny */
	  #glowny{display:flex;flex:1;width:100%;min-height:calc(100vh - 120px)}
	  .sky{position:relative;display:flex;flex-direction:column;flex:1}
	  /* Ikona ładowania zanim ikony Material załadują się */
	  .material-icons{font-family:'Material Icons',sans-serif;font-style:normal;
	                  display:inline-block;line-height:1;visibility:visible}
	</style>
</head>

<!--
     FIX: onload sprawdza typeof zanim wywoła — bezpieczne z defer
-->
<body onload="if(typeof odliczanie==='function')odliczanie(); if(typeof dark==='function')dark();">

	<!-- DOSTĘPNOŚĆ: role="banner" dla głównego nagłówka strony -->
	<section class="sky" role="banner">
		<div id="zegar" onclick="startClockGlitch()" title="Kliknij mnie..." aria-label="Zegar cyfrowy"></div>
		<div id="nazwa">
			<h1 id="h1" data-i18n="Tytuł_strona_glowna">Strona Michała</h1>
		</div>

		<!-- ════════════════════════════════════════════════
		     DOSTĘPNOŚĆ — FIX "Dokument nie ma głównego punktu orientacyjnego"
		     role="main" + aria-label wskazuje Google i czytnikom ekranu
		     główną treść strony
		     ════════════════════════════════════════════════ -->
		<div id="glowny" role="main" aria-label="Główna zawartość strony">

			<div id="controls-wrapper" class="controls-wrapper">

				<!-- DOSTĘPNOŚĆ: label dla pola wyszukiwania -->
				<div class="search-container">
					<label for="searchInput" class="sr-only">Szukaj narzędzi i stron</label>
					<span class="material-icons search-lupa" aria-hidden="true">search</span>
					<input
						type="search"
						id="searchInput"
						placeholder="Szukaj..."
						data-i18n-placeholder="Szukaj_placeholder"
						autocomplete="off"
						style="padding-left:38px;"
					>
					<div id="searchResults" class="search-results" role="listbox" aria-label="Wyniki wyszukiwania"></div>
				</div>

				<div class="mode mode-toggle" title="Shift + D" style="cursor:pointer;display:flex;align-items:center;gap:8px;" role="button" tabindex="0" aria-label="Przełącz tryb ciemny">
					<span class="material-icons" aria-hidden="true">dark_mode</span>
					<span><span data-i18n="Tryb">Tryb ciemny</span>: <span class="change">OFF</span></span>
				</div>

				<!-- ════════════════════════════════════════════════
				     DOSTĘPNOŚĆ — FIX "select bez powiązanego labela"
				     <label for="languageSelect"> + aria-label na select
				     ════════════════════════════════════════════════ -->
				<div class="lang-wrapper" title="Shift + L" style="display:flex;align-items:center;gap:5px;position:relative;">
					<label for="languageSelect" class="sr-only">Wybierz język strony</label>
					<span class="material-icons" aria-hidden="true">language</span>
					<select class="lang" id="languageSelect" onchange="changeLanguage()" style="padding-right:25px;cursor:pointer;" aria-label="Wybierz język strony">
						<option value="pl">Polski</option>
						<option value="en">English</option>
					</select>
					<span class="material-icons" aria-hidden="true" style="position:absolute;right:10px;pointer-events:none;font-size:18px;">arrow_drop_down</span>
				</div>
			</div>

			<!-- Nawigacja z rolą semantyczną -->
			<nav id="menu" role="navigation" aria-label="Menu główne">
				<znacznik id="menuText" style="font-size:45px;font-weight:bold;" role="button" tabindex="0" aria-expanded="false" aria-controls="menu-list">MENU</znacznik>
				<div id="menu-list">
					<a class="odstep-duzy" href="glowa/index2.html" data-i18n="Menu_strona_glowna">Strona główna</a>

					<a class="submenu-toggle" data-i18n="Menu_KAT_Glowne" role="button" tabindex="0" aria-expanded="true">Narzędzia główne:</a>
					<ul class="submenu-list odstep-duzy">
						<li><a href="kalkulator/kalkulator2.html" data-i18n="Menu_kalkulator">Kalkulator</a></li>
						<li><a href="obl_ocen/oceny2.html" data-i18n="Menu_wyliczanie_ocen">Wyliczanie ocen</a></li>
						<li><a href="czas_do/czas2.html" data-i18n="Menu_ile_zostalo_do">Ile zostało do...</a></li>
						<li><a href="los/los.html" data-i18n="Menu_losowanie">Losowanie</a></li>
					</ul>

					<a class="submenu-toggle" data-i18n="Menu_KAT_Tekst" role="button" tabindex="0" aria-expanded="true">Tekst i Pisanie:</a>
					<ul class="submenu-list odstep-duzy">
						<li><a href="klawiatura/pisanie.html" data-i18n="Menu_pisanie">Pisanie</a></li>
						<li><a href="klawiatura/klawiatura.html" data-i18n="Menu_klawisze">Klawiatura</a></li>
						<li><a href="gry/test_myszki.html" data-i18n="Menu_TestMyszki">Test myszki</a></li>
						<li><a href="tekst/statystyka.html" data-i18n="Menu_analizator_tekstu">Analizator tekstu</a></li>
						<li><a href="tekst/tekstgenerator.html" data-i18n="Menu_generator_tekstu">Generator tekstu</a></li>
						<li><a href="tekst/modyfikator.html" data-i18n="Tytuł_modyfikator">Modyfikator Tekstu</a></li>
						<li><a href="szyfr/szyfrowanie.html" data-i18n="Menu_szyfrowanie">Szyfrowanie</a></li>
						<li><a href="tlumacz/tl2.html" data-i18n="Menu_alfabet_morsea">Alfabet Morse'a</a></li>
						<li><a href="tekst/haslogenerator.html" data-i18n="Menu_generator_hasel">Generator haseł</a></li>
					<li><a href="tekst/diff.html" data-i18n="Menu_diff">🔍 Porównywarka tekstu</a></li>
					</ul>

					<a class="submenu-toggle" data-i18n="Menu_KAT_Siec" role="button" tabindex="0" aria-expanded="true">Sieć i Grafika:</a>
					<ul class="submenu-list odstep-duzy">
						<li><a href="qr/qr.html" data-i18n="Menu_generator_qr_kod">Generator QR kod</a></li>
						<li><a href="rgb/rgbkolor.html" data-i18n="Menu_jaki_to_kolor">Jaki to kolor</a></li>
						<li><a href="rgb/gradjent.html" data-i18n="Menu_gradient_css">Gradient CSS</a></li>
						<li><a href="meta_dane/obrazki.html" data-i18n="Menu_analiza_metadanych">Analiza Metadanych</a></li>
						<li><a href="info_przeglądarki/info.html" data-i18n="Menu_informacje_przeglądarki">Analiza Przeglądarki</a></li>
					</ul>

					<a id="obliczeniaText" class="submenu-toggle" data-i18n="Menu_OBL" role="button" tabindex="0" aria-expanded="true">Obliczenia:</a>
					<ul class="submenu-list odstep-duzy">
						<li><a href="mat/nwwinwd.html" data-i18n="Menu_nww_nwd">NWD i NWW</a></li>
						<li><a href="mat/objętość.html" data-i18n="Menu_objentosc">Objętości</a></li>
						<li><a href="mat/pola.html" data-i18n="Menu_pola">Pola</a></li>
						<li><a href="mat/procenty.html" data-i18n="Menu_procenty">Procenty</a></li>
						<li><a href="mat/rozkladncp.html" data-i18n="Menu_rozklad_liczb">Rozkład liczb</a></li>
						<li><a href="mat/ułamki.html" data-i18n="Menu_ulamki">Ułamki</a></li>
						<li><a href="mat/wzory.html" data-i18n="Menu_wzory">Wzory</a></li>
						<li><a href="mat/zamianajednostek.html" data-i18n="Menu_jednostki">Jednostki</a></li>
						<li><a href="mat/przeliczniksystemow.html" data-i18n="Menu_przelicznik">Przelicznik systemów</a></li>
						<li><a href="mat/kalk_dat.html" data-i18n="Menu_kalk_dat">📅 Kalkulator dat</a></li>
						<li><a href="mat/rzymskie.html" data-i18n="Menu_rzymskie">🏛 Liczby rzymskie</a></li>
					</ul>

					<a id="gryText" class="submenu-toggle" data-i18n="Menu_GRY" role="button" tabindex="0" aria-expanded="true">Gry:</a>
					<ul class="submenu-list">
						<li><a href="gry/kolko_i_krzyzyk.html" data-i18n="Menu_kolko_i_krzyzyk">Kółko i krzyżyk</a></li>
						<li><a href="gry/2048.html" data-i18n="Menu_2048">2048</a></li>
						<li><a href="gry/labirynt.html" data-i18n="Menu_labirynt">Labirynt</a></li>
						<li><a href="gry/liczba.html" data-i18n="Menu_zgadnij_cyfre">Zgadnij cyfrę</a></li>
						<li><a href="gry/binarna.html" data-i18n="Menu_zgadnij_cyfre_binarna">Zgadnij cyfrę binarną</a></li>
						<li><a href="gry/wisielec/index.html" data-i18n="Menu_Gra_wisielec">Gra wisielec</a></li>
						<li><a href="gry/ziemia/ziemiam.html" data-i18n="Menu_Obrona_planety">Obrona planety</a></li>
						<li><a href="gry/memory/gra.html" data-i18n="Menu_Minecraft_memory">Minecraft memory</a></li>
						<li><a href="gry/snake.html" data-i18n="Menu_snake">🐍 Snake</a></li>
						<li><a href="gry/sudoku.html" data-i18n="Menu_sudoku">🔢 Sudoku</a></li>
					</ul>
				</div>
			</nav>

			<!-- ════════════════════════════════════════════════
			     SEO — Treść zawsze widoczna w HTML (dla Googlebota)
			     aria-live="polite" informuje czytniki ekranu o zmianach
			     ════════════════════════════════════════════════ -->
			<div id="tekst" aria-live="polite" aria-label="Treść podstrony">
				<h2 style="text-align:center;font-size:clamp(2.5rem,10vw,8rem);font-family:'Arial Black',Gadget,sans-serif;line-height:1.1;margin:0;text-transform:uppercase;letter-spacing:-2px;">
					WITAM NA STRONIE MICHAŁA
				</h2>
				<p style="text-align:center;font-size:1.1rem;margin-top:1.5rem;color:var(--c-text-sub,#666);max-width:600px;margin-left:auto;margin-right:auto;">
					Zbiór darmowych narzędzi online: kalkulatory, generator kodów QR, szyfrowanie,
					alfabet Morse'a, gry przeglądarkowe i wiele więcej.
				</p>
			</div>

		</div><!-- /glowny -->
	</section>

	<!-- Klasa pomocnicza dla dostępności — tylko dla czytników ekranu -->
	<style>
		.sr-only {
			position: absolute;
			width: 1px;
			height: 1px;
			padding: 0;
			margin: -1px;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			white-space: nowrap;
			border: 0;
		}
	</style>
</body>
</html>