src="data:text/html;charset=utf-8,<!DOCTYPE html><html lang='pl'><head><meta charset='UTF-8'><meta name='viewport' content='width=device-width, initial-scale=1.0'><title>K Master</title><style>body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background-color:#f0f3f6;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;margin:0;padding:20px 0;color:#333}.container{background:white;padding:25px 30px;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.08);text-align:center;max-width:820px;width:100%}h1{margin-top:0;color:#2c3e50;font-size:28px;letter-spacing:1px}.select-lesson{margin-bottom:20px}button.btn{background-color:#3498db;color:white;border:none;padding:10px 18px;margin:0 5px;font-size:15px;border-radius:6px;cursor:pointer;transition:background 0.2s;font-weight:600}button.btn:hover{background-color:#2980b9}button.btn.active{background-color:#27ae60}.keyboard-container{background:#2c3e50;padding:15px;border-radius:10px;margin:15px auto;display:inline-block;box-shadow:inset 0 0 8px rgba(0,0,0,0.3)}.row{display:flex;justify-content:center;margin-bottom:6px}.row:last-child{margin-bottom:0}.key{border-radius:4px;width:42px;height:42px;margin:2px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:bold;background:#34495e;color:#bdc3c7;box-shadow:0 3px 0 #1a252f;transition:all 0.1s;user-select:none}.key.tab{width:62px}.key.caps{width:72px}.key.enter{width:82px}.key.shift-l{width:92px}.key.shift-r{width:102px}.key.space{width:260px}.key.disabled{opacity:0.4}.key.active{background-color:#f1c40f !important;color:#2c3e50 !important;transform:translateY(-2px);box-shadow:0 5px 0 #d35400 !important;opacity:1 !important}.key.correct{background-color:#2ecc71 !important;color:white !important;box-shadow:0 2px 0 #27ae60 !important}.key.wrong{background-color:#e74c3c !important;color:white !important;box-shadow:0 2px 0 #c0392b !important}.progress{font-size:15px;color:#555;font-weight:500}.hands-container{display:flex;justify-content:center;gap:60px;margin-top:15px}.hand-svg{width:180px;height:140px}.finger{fill:#bdc3c7;transition:fill 0.2s ease,transform 0.2s ease}.hand-base{fill:#95a5a6}.finger.active{fill:#e67e22 !important;filter:drop-shadow(0px 0px 4px #e67e22)}.results{display:none;background:#e8f8f5;border:2px solid #2ecc71;border-radius:8px;padding:15px;margin-top:15px}.grade{font-size:42px;font-weight:bold;color:#27ae60;margin:5px 0}</style></head><body><div class='container'><h1>K Master</h1><div class='select-lesson'><button class='btn active' onclick='startLesson(1)'>Lekcja 1 (Lewa ręka: ASDF)</button><button class='btn' onclick='startLesson(2)'>Lekcja 2 (Obie ręce: ASDF JKL;)</button></div><div class='progress' id='progress'>Naciśnij podświetlony klawisz, aby rozpocząć...</div><div class='keyboard-container'><div class='row'><div class='key' id='key-q'>Q</div><div class='key' id='key-w'>W</div><div class='key' id='key-e'>E</div><div class='key' id='key-r'>R</div><div class='key' id='key-t'>T</div><div class='key' id='key-y'>Y</div><div class='key' id='key-u'>U</div><div class='key' id='key-i'>I</div><div class='key' id='key-o'>O</div><div class='key' id='key-p'>P</div></div><div class='row'><div class='key caps disabled'>CAPS</div><div class='key' id='key-a'>A</div><div class='key' id='key-s'>S</div><div class='key' id='key-d'>D</div><div class='key' id='key-f'>F</div><div class='key' id='key-g'>G</div><div class='key' id='key-h'>H</div><div class='key' id='key-j'>J</div><div class='key' id='key-k'>K</div><div class='key' id='key-l'>L</div><div class='key' id='key-semicolon'>;</div><div class='key enter disabled'>ENTER</div></div><div class='row'><div class='key shift-l disabled'>SHIFT</div><div class='key' id='key-z'>Z</div><div class='key' id='key-x'>X</div><div class='key' id='key-c'>C</div><div class='key' id='key-v'>V</div><div class='key' id='key-b'>B</div><div class='key' id='key-n'>N</div><div class='key' id='key-m'>M</div><div class='key shift-r disabled'>SHIFT</div></div><div class='row'><div class='key space' id='key-space'>SPACJA</div></div></div><div class='hands-container'><svg class='hand-svg' viewBox='0 0 150 120'><path class='hand-base' d='M 30,110 Q 75,90 120,110 L 110,60 Q 75,50 30,60 Z'/><rect id='finger-l-pinky' class='finger' x='15' y='30' width='14' height='40' rx='7'/><rect id='finger-l-ring' class='finger' x='35' y='15' width='14' height='50' rx='7'/><rect id='finger-l-middle' class='finger' x='55' y='5' width='14' height='60' rx='7'/><rect id='finger-l-index' class='finger' x='75' y='15' width='14' height='50' rx='7'/><rect id='finger-l-thumb' class='finger' x='105' y='45' width='14' height='35' rx='7' transform='rotate(30 112 62)'/><text x='75' y='115' font-size='12' text-anchor='middle' fill='#7f8c8d'>Lewa Dłoń</text></svg><svg class='hand-svg' viewBox='0 0 150 120'><path class='hand-base' d='M 30,110 Q 75,90 120,110 L 120,60 Q 75,50 40,60 Z'/><rect id='finger-r-thumb' class='finger' x='30' y='45' width='14' height='35' rx='7' transform='rotate(-30 37 62)'/><rect id='finger-r-index' class='finger' x='60' y='15' width='14' height='50' rx='7'/><rect id='finger-r-middle' class='finger' x='80' y='5' width='14' height='60' rx='7'/><rect id='finger-r-ring' class='finger' x='100' y='15' width='14' height='50' rx='7'/><rect id='finger-r-pinky' class='finger' x='120' y='30' width='14' height='40' rx='7'/><text x='75' y='115' font-size='12' text-anchor='middle' fill='#7f8c8d'>Prawa Dłoń</text></svg></div><div class='results' id='results'><h2>Podsumowanie Lekcji</h2><p>Twoja ocena:</p><div class='grade' id='grade-val'>6</div><p id='stats-text'>Prędkość: 0 CPM | Dokładność: 100%</p><button class='btn' onclick='restartCurrentLesson()'>Spróbuj ponownie</button></div></div><script>const lesson1Keys=['a','s','d','f',' '];const lesson2Keys=['a','s','d','f','j','k','l',';',' '];const TOTAL_CHARS=60;const keyFingerMap={'a':'finger-l-pinky','s':'finger-l-ring','d':'finger-l-middle','f':'finger-l-index','j':'finger-r-index','k':'finger-r-middle','l':'finger-r-ring',';':'finger-r-pinky',' ':'finger-l-thumb'};let currentLesson=1;let sequence=[];let currentIndex=0;let startTime=null;let errors=0;let isFinished=false;function playErrorSound(){try{const audioCtx=new(window.AudioContext||window.webkitAudioContext)();const oscillator=audioCtx.createOscillator();const gainNode=audioCtx.createGain();oscillator.type='sawtooth';oscillator.frequency.setValueAtTime(140,audioCtx.currentTime);gainNode.gain.setValueAtTime(0.15,audioCtx.currentTime);gainNode.gain.exponentialRampToValueAtTime(0.01,audioCtx.currentTime+0.15);oscillator.connect(gainNode);gainNode.connect(audioCtx.destination);oscillator.start();oscillator.stop(audioCtx.currentTime+0.15)}catch(e){}}function getKeyElement(char){if(char===' ')return document.getElementById('key-space');if(char===';')return document.getElementById('key-semicolon');return document.getElementById('key-'+char)}function startLesson(lessonNum){currentLesson=lessonNum;const buttons=document.querySelectorAll('.select-lesson .btn');buttons[0].classList.toggle('active',lessonNum===1);buttons[1].classList.toggle('active',lessonNum===2);const activeLessonKeys=(lessonNum===1)?lesson1Keys:lesson2Keys;const allKeys=document.querySelectorAll('.key');allKeys.forEach(k=>{const id=k.id.replace('key-','');const char=(id==='space')?' ':(id==='semicolon')?';':id;if(activeLessonKeys.includes(char)){k.classList.remove('disabled')}else{k.classList.add('disabled')}});const pool=activeLessonKeys;sequence=[];for(let i=0;i<TOTAL_CHARS;i++){const randomChar=pool[Math.floor(Math.random()*pool.length)];sequence.push(randomChar)}currentIndex=0;errors=0;startTime=null;isFinished=false;document.getElementById('results').style.display='none';updateProgress();highlightCurrentKeyAndFinger()}function restartCurrentLesson(){startLesson(currentLesson)}function updateProgress(){document.getElementById('progress').innerText=`Postęp: ${currentIndex} / ${TOTAL_CHARS}`}function highlightCurrentKeyAndFinger(){document.querySelectorAll('.key').forEach(k=>k.classList.remove('active'));document.querySelectorAll('.finger').forEach(f=>f.classList.remove('active'));if(currentIndex<sequence.length){const currentChar=sequence[currentIndex];const keyEl=getKeyElement(currentChar);if(keyEl)keyEl.classList.add('active');const fingerId=keyFingerMap[currentChar];if(fingerId){const fingerEl=document.getElementById(fingerId);if(fingerEl)fingerEl.classList.add('active')}}}window.addEventListener('keydown',(e)=>{if(isFinished)return;let pressedKey=e.key.toLowerCase();if(e.key===' '){e.preventDefault()}const expectedChar=sequence[currentIndex];const targetElement=getKeyElement(expectedChar);if(!startTime){startTime=new Date()}if(pressedKey===expectedChar){if(targetElement){targetElement.classList.add('correct');setTimeout(()=>targetElement.classList.remove('correct'),150)}currentIndex++;updateProgress();if(currentIndex>=sequence.length){finishLesson()}else{highlightCurrentKeyAndFinger()}}else{errors++;playErrorSound();if(targetElement){targetElement.classList.add('wrong');setTimeout(()=>targetElement.classList.remove('wrong'),200)}}});function finishLesson(){isFinished=true;const endTime=new Date();const durationInSeconds=(endTime-startTime)/1000;const durationInMinutes=durationInSeconds/60;const cpm=Math.round(TOTAL_CHARS/durationInMinutes);const accuracy=Math.max(0,Math.round(((TOTAL_CHARS-errors)/TOTAL_CHARS)*100));let grade=1;if(cpm>=120)grade=6;else if(cpm>=90)grade=5;else if(cpm>=65)grade=4;else if(cpm>=45)grade=3;else if(cpm>=30)grade=2;else grade=1;document.querySelectorAll('.key').forEach(k=>k.classList.remove('active'));document.querySelectorAll('.finger').forEach(f=>f.classList.remove('active'));document.getElementById('grade-val').innerText=grade;document.getElementById('stats-text').innerText=`Czas: ${Math.round(durationInSeconds)}s | Prędkość: ${cpm} zn/min | Dokładność: ${accuracy}%`;document.getElementById('results').style.display='block'}startLesson(1);</script></body></html>"
width="100%"
height="700px"
style="border: none; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
</iframe>
