175 lines
7.9 KiB
HTML
175 lines
7.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="Logopedická hra pre najmenších">
|
|
<meta name="author" content="Adam Reňak">
|
|
<meta name="keywords" content="Adam Reňak, Joj_Dobre, Diplomová práca, Logopedická hra, TUKE">
|
|
<title>Baník Jožino: Logopedická hra - Diplomová práca</title>
|
|
<link rel="stylesheet" type="text/css" href="css/style.css" />
|
|
|
|
<!-- Načítanie fontu Luckiest Guy z Google Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap" rel="stylesheet">
|
|
|
|
<link rel="stylesheet" type="text/css" href="css/pexeso-menu.css" />
|
|
|
|
<link rel="icon" type="image/png" href="images/banik.ico">
|
|
<link rel="shortcut icon" href="images/icons/banik.ico">
|
|
</head>
|
|
|
|
<body>
|
|
<!-- LOADING -->
|
|
<div id="loading-screen" class="loading-screen">
|
|
<div class="loading-content">
|
|
<div class="loading-logo">
|
|
<div class="loading-text-jozino">JOŽINO</div>
|
|
<div class="loading-text-banik">BANÍK</div>
|
|
</div>
|
|
<div class="loading-spinner"></div>
|
|
<div class="loading-message">Načítavam...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<!-- ľavá sekcia -->
|
|
<div class="left-section">
|
|
<!-- Logo sekcia -->
|
|
<div class="logo-container">
|
|
<div class="logo-text">
|
|
<div class="text-jozino">JOŽINO</div>
|
|
<div class="text-banik">BANÍK</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Menu sekcia -->
|
|
<div class="menu-container">
|
|
<nav class="main-menu">
|
|
<ul>
|
|
<li><a href="worldsmenu.html" alt="Spustiť hru" class="menu-button primary"><span>ŠTART</span></a></li>
|
|
<li><a href="#pravidla" alt="Pravidlá" class="menu-button show-rules">PRAVIDLÁ</a></li>
|
|
<li><a href="#projekt" alt="O projekte" class="menu-button show-about">O PROJEKTE</a></li>
|
|
<!--<li><a href="game.html" alt="Banik" class="menu-button"><span>TEST Bana</span></a></li>-->
|
|
<!--<li><a href="pexeso.html" alt="Jozino" class="menu-button"><span>Test PEXESO</span></a></li>-->
|
|
<!--<li><a href="superjozino.html" alt="Jozino" class="menu-button"><span>TEST JOZINO</span></a></li>-->
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Radiálny gradient pozadí objekt pod menu -->
|
|
<div class="radial-background"></div>
|
|
</div>
|
|
|
|
|
|
<!-- pravá sekcia -->
|
|
<div class="right-section">
|
|
<div class="character-container">
|
|
<!-- Obrázok postavičky baníka -->
|
|
<img src="images/banik.png" alt="Jožino Baník" class="character-image">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Modálne okno pre pravidlá -->
|
|
<div id="rules-modal" class="modal">
|
|
<div class="close">X</div>
|
|
<div class="modal-content">
|
|
<h2>Pravidlá hry</h2>
|
|
<div class="modal-arrow-up"></div>
|
|
<div class="modal-text-content">
|
|
<p>
|
|
Vitaj v platforme <strong>Baník Jožino</strong>! Ide o logopedickú hru,
|
|
v ktorej si hravou formou precvičíš slovenské hlásky a slová.
|
|
<br><br>
|
|
<span>Svety a levely:</span><br>
|
|
Platforma obsahuje 16 tematických svetov, každý zameraný na inú
|
|
slovenskú hlásku (R, L, S, Z, C, Š, Ž, Č, D, T, N, Ď, Ť, Ň, K, G).
|
|
V každom svete ťa čaká 16 levelov s postupne rastúcou náročnosťou.
|
|
Za každý level môžeš získať 1 až 3 hviezdy podľa tvojho výkonu.
|
|
<br><br>
|
|
<span>Mini hra Baník:</span><br>
|
|
Si odvážny baník a hľadáš poklady v podzemí. Pohybuješ sa pomocou
|
|
šípok alebo klávesov WASD a kopeš medzerníkom. V hre nájdeš tri druhy
|
|
pokladov: <strong>zlato</strong> (jednoduché nazbieranie),
|
|
<strong>diamant</strong> (spustí rečové cvičenie) a
|
|
<strong>fialový kryštál</strong> (spustí posluchové cvičenie).
|
|
<br><br>
|
|
<span>Mini hra Pexeso:</span><br>
|
|
Klasické pexeso, ale s obrázkami slov. Otáčaj karty a hľadaj
|
|
rovnaké dvojice. Keď nájdeš pár, musíš správne vysloviť slovo na
|
|
karte, aby ti bol bod uznaný.
|
|
<br><br>
|
|
<span>Rečové cvičenie:</span><br>
|
|
Objaví sa slovo s obrázkom a ty ho musíš nahlas vysloviť. Klikni
|
|
na tlačidlo mikrofónu a povedz slovo. Ak ho vyslovíš správne,
|
|
dostaneš zelenú fajku. Máš na to tri pokusy.
|
|
<br><br>
|
|
<span>Posluchové cvičenie:</span><br>
|
|
Vypočuj si dva zvuky a rozhodni, či sú rovnaké alebo rôzne.
|
|
Klikni na správne tlačidlo.
|
|
<br><br>
|
|
<span>Cieľ hry:</span><br>
|
|
Prejsť všetky levely, získať čo najviac hviezd a pritom sa
|
|
zabaviť a zdokonaliť svoju výslovnosť. Veľa šťastia!
|
|
</p>
|
|
</div>
|
|
<div class="modal-arrow-down"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modálne okno pre informacie -->
|
|
<div id="about-modal" class="modal">
|
|
<div class="close">X</div>
|
|
<div class="modal-content">
|
|
<h2>O Projekte</h2>
|
|
<div class="modal-arrow-up"></div>
|
|
<div class="modal-text-content">
|
|
<p>
|
|
<strong>Baník Jožino</strong> je interaktívna logopedická platforma
|
|
vytvorená v rámci diplomovej práce. Je určená deťom s poruchami
|
|
výslovnosti, najmä vo veku do 8 rokov.
|
|
<br><br>
|
|
<span>Cieľ projektu:</span><br>
|
|
Pomôcť deťom s rozvojom správnej výslovnosti hravou a motivujúcou
|
|
formou. Platforma je bezplatná a slúži ako doplnok k odbornej logopedickej
|
|
terapii, nie ako jej náhrada.
|
|
<br><br>
|
|
<span>Obsah platformy:</span><br>
|
|
16 tematických svetov podľa jednotlivých problémových hlások a
|
|
viac než 256 levelov naprieč dvoma rôznymi mini hrami:
|
|
Baník a Pexeso.
|
|
<br><br>
|
|
<span>Technológie:</span><br>
|
|
HTML5, CSS3, JavaScript, Web Speech API (rozpoznávanie reči),
|
|
Howler.js (zvuk), Canvas API (grafika)
|
|
<br><br>
|
|
<span>Autor:</span><br>
|
|
Bc. Adam Reňak
|
|
<br><br>
|
|
<span>Vedúci práce:</span><br>
|
|
Ing. Renát Haluška, PhD.
|
|
<br><br>
|
|
<span>Univerzita:</span><br>
|
|
Technická univerzita v Košiciach<br>
|
|
Fakulta elektrotechniky a informatiky
|
|
<br><br>
|
|
<span>Rok:</span><br>
|
|
2026
|
|
</p>
|
|
</div>
|
|
<div class="modal-arrow-down"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- JavaScript pre interaktivitu -->
|
|
<script src="js/basics/menu.js"></script>
|
|
<script src="js/pexeso/menu-pexeso.js"></script>
|
|
|
|
</body>
|
|
</html>
|
|
|