commit 9dfebb9fbb0f1f91549dc9304924aa3649c377cd
Author: snowflake <snowflake@cocaine.ninja>
Date:   Thu May 11 16:58:37 2023 +0200

    In it to win it

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..af01b7d
--- /dev/null
+++ b/README.md
@@ -0,0 +1,37 @@
+# pRojeKt Multimediální aplikace
+
+## TO DO list:
+
+**Pheeeewww**
+
+
+
+## Done:
+
+- ~~Vytvořit js funkci, která se zavolá při kliknutí na okénko, tato funkce otevře video přes celou obrazovku a po dohrání videa zavolá další funkci~~
+- ~~Vytvořit container pro video, které bude defaultně hidden a zobrazí se změnou v výše zmíněným javascriptem~~
+- ~~Vytvořit container pro otázku, která přijde po videu, event handler pro dohrání videa~~
+- ~~js na loadění otázek do containeru, otázky jsou uloženy v json souboru~~
+- ~~js funkce na validaci odpovědi - správná opdověd bude vždy první v databázi, zamíchá se pouze pořadí otázek.~~
+- ~~implementace progressbaru~~
+- ~~dostylovat progress bar~~
+- ~~Přidání Ikon jednotlivých lekcí~~
+- ~~Přidání Otázek~~
+- ~~Znemožnit přístup k otázkám, poté co jsou správně zobrazeny~~
+- ~~Nastavení Odezvy za správnou odpověď~~
+- ~~Nastavení designu via CSS~~
+~~**Přidání Videí** ***Cant Stress this enough I guess***~~
+
+### Co nehoří:
+
+- ~~Přidání Zvukových efektů *Snad stihnu*~~
+
+- ~~js na změnu titulního obrázku na Ikonu, přes kterou bylo naposledy přejeto myší.~~
+
+## O co jde?
+
+Námětem je hypermediální aplikace s šachovými tipy, triky a teorií, tedy zajímavé matovací vzorce, vazby, vidlice nebo přetížení a koncovky.
+
+Nechci se zabývat pravidly aj. základy. Je to míněno pro pokročilé a formát by měl být 12x 20-45 sekundové video.
+
+Po okénko se otočí téma, zatmí obrazovka a spustí video, po videu přijde a)b)c)d) otázka možná s obrázkem nebo bez, která při správné odpovědi odemkne další okénko. 
diff --git a/components/cinemaContainer.php b/components/cinemaContainer.php
new file mode 100644
index 0000000..3fcd86e
--- /dev/null
+++ b/components/cinemaContainer.php
@@ -0,0 +1,43 @@
+<div id="cinemaContainer" hidden>
+        <video id="cinemaBox" controls>
+            <source src="resources/video/placeHolder0.webm" type="video/webm">
+            Video is not supported by your browser
+        </video>
+        <div id="skip" class="button"><img src="resources/img/fast-forward.png" alt="Přeskočit video"></div>
+        <div id="close" class="button"><img src="resources/img/x.png" alt="Exit"></div>
+</div>
+
+<script>
+    const video = document.querySelector('video')
+    const cinema = document.querySelector('#cinemaContainer')
+    const skipButton = document.querySelector("#skip")
+
+    video.onended = function(e){
+        if (document.fullscreenElement) {
+        document
+        .exitFullscreen()
+        .then(() => console.log("Document Exited from Full screen mode"))
+        .catch((err) => console.error(err));
+        }
+        exit()
+        
+        questionMode()
+    }
+
+    skipButton.addEventListener("click", (e) => {
+        if (document.fullscreenElement) {
+        document
+        .exitFullscreen()
+        .then(() => console.log("Document Exited from Full screen mode"))
+        .catch((err) => console.error(err));
+        }
+
+        console.log('Skipping the video!')
+
+        video.pause()
+
+        exit()
+
+        questionMode()
+    })
+</script>
\ No newline at end of file
diff --git a/components/footer.php b/components/footer.php
new file mode 100644
index 0000000..a78bb2b
--- /dev/null
+++ b/components/footer.php
@@ -0,0 +1,4 @@
+
+<p>Igor Vujovič</p>
+<p>UK PedF KITTV, Praha <?php echo date("Y")?></p>
+<audio autoplay control><source src="resources/audio/intro.webm" type="audio/webm"></audio>
\ No newline at end of file
diff --git a/components/grid.php b/components/grid.php
new file mode 100644
index 0000000..cb8545f
--- /dev/null
+++ b/components/grid.php
@@ -0,0 +1,73 @@
+<div class="grid">
+    <div id="box-0" class="box" title="Vidlice"></div>
+    <div id="box-1" class="box" title="Přišpendlení"></div>
+    <div id="box-2" class="box" title="Špíz"></div>
+    <div id="box-3" class="box" title="Přetížení"></div>
+    <div id="box-4" class="box" title="Mezi-tah"></div>
+    <div id="box-5" class="box" title="Danajský dar"></div>
+    <div id="box-6" class="box" title="Přitažlivost"></div>
+    <div id="box-7" class="box" title="Povýšení ?"></div>
+    <div id="box-8" class="box" title="Cesta v před"></div>
+    <div id="box-9" class="box" title="Věžová koncovka"></div>
+    <div id="box-10" class="box" title="Dobývání"></div>
+    <div id="box-11" class="box" title="Věž je někdy málo"></div>
+    <div id="title">
+        <div class="fakeScreen">
+            <p class="line1">&#91; CHESS APP v7.0 &#93;<span class="cursor1">_</span></p>
+            <p class="line2">Vyberte úroveň:<span class="cursor2"></span></p>
+            <p class="line3">><span class="cursor3">_</span></p>
+            <p class="line1" id="cheatLine">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
+        </div>
+        <img src="resources/img/topicIcons/King.svg" alt="title picture">
+        <div id="progress">
+                <progress value="0" max="12"></progress>
+        </div>
+    </div>
+</div>
+
+<script>
+    const boxes = document.querySelectorAll(".box")
+    const titleImage = document.querySelector("#title img")
+    const fakeScreen = document.querySelector(".fakeScreen")
+    answerFlag = 0
+
+    boxes.forEach((lesson, index) => {
+        lesson.addEventListener("click", (e) => {
+            let target = e.target
+            cinemaMode(index)
+            answerFlag = 0;
+            answeredQuestions.forEach((answeredQuestion) =>{
+                if(index == answeredQuestion){
+                    answerFlag += 1;
+                }
+            })
+
+            if(answerFlag == 0){
+                loadQuestion(index)
+                target.style.backgroundColor = "orange"
+            }
+        })
+
+        lesson.addEventListener('mouseenter', (e) => {
+            titleImage.src=("resources/img/topicIcons/lesson" + (index + 1) +".svg")
+            fakeScreen.replaceChild(fakeScreen.children[0],fakeScreen.children[0])
+            fakeScreen.replaceChild(fakeScreen.children[1],fakeScreen.children[1])
+            fakeScreen.replaceChild(fakeScreen.children[2],fakeScreen.children[2])
+            fakeScreen.children[0].innerHTML="Compiling... &#91; DONE! &#93;"
+            fakeScreen.children[1].innerHTML="Running " + lesson.title + "..."
+            fakeScreen.children[2].innerHTML="> Click to Continue...<span class=\"cursor3\">_</span>"
+        })
+
+        lesson.addEventListener('mouseleave', (e) => {
+            titleImage.src=("resources/img/topicIcons/King.svg")
+            fakeScreen.replaceChild(fakeScreen.children[0],fakeScreen.children[0])
+            fakeScreen.replaceChild(fakeScreen.children[1],fakeScreen.children[1])
+            fakeScreen.replaceChild(fakeScreen.children[2],fakeScreen.children[2])
+            fakeScreen.children[0].innerHTML="&#91; CHESS APP v7.0 &#93;<span class=\"cursor1\">_</span>"
+            fakeScreen.children[1].innerHTML="Vyberte úroveň:<span class=\"cursor2\"></span>"
+            fakeScreen.children[2].innerHTML="><span class=\"cursor3\">_</span>"
+        })
+    })
+
+
+</script>
diff --git a/components/questionContainer.php b/components/questionContainer.php
new file mode 100644
index 0000000..ac97a71
--- /dev/null
+++ b/components/questionContainer.php
@@ -0,0 +1,80 @@
+<div id="questionContainer" hidden>
+		<div id="questionLine">
+			<h1>Otazka ????</h1>
+			<img src="resources/img/placeholder.png" alt="Question Image">
+		</div>
+        <div id="answerBar">
+            <div class="button" id="answer1">Odpoved1</div>
+            <div class="button" id="answer2">Odpoved2</div>
+            <div class="button" id="answer3">Odpoved3</div>
+            <div class="button" id="answer4">Odpoved4</div>
+        </div>
+    <div id="close" class="button"><img src="resources/img/x.png" alt="Exit"></div>
+</div>
+
+<script>
+    const question = document.querySelector("#questionContainer");
+	const answers = document.querySelector("#answerBar");
+	const quest = document.querySelectorAll('#answerBar div');
+	const answeredQuestions = [];
+	let score = 0
+	let qID = 0
+	let qustions
+	let chose = 0;
+    
+	(async () => {
+		let res = await fetch('/resources/questions.json')
+		res = await res.json()
+		questions = res
+	})()
+
+	function questionFiller(questionId) {
+		qID = questionId
+		let hqid = questionId
+
+		document.querySelector('#questionLine h1').textContent = questions[hqid].title
+		document.querySelector('#questionLine img').src = "resources/img/questions/" + questionId + ".png";
+		quest.forEach((one, index) => {
+			one.textContent = questions[hqid].options[index]
+		})
+	}
+
+	function addPoint(qID){
+		console.log("Point Added, Success!")
+		answeredQuestions.push(qID);
+		score += 1
+		pushScore()
+		console.log("Score is ", score)
+	}
+
+	quest.forEach((answer, index) => {
+        answer.addEventListener("click", (e) => {
+			chose += 1;
+			let dn = "#box-" + qID
+			if(chose == 1){
+				
+				if(answer.id == "answer1"){	
+				document.querySelector(dn).style.backgroundColor = "green"
+				addPoint(qID);
+				answer.classList.add("validateGreen")
+				setTimeout(function() {
+					answer.classList.remove("validateGreen");
+					exit();
+					chose = 0;
+				}, 1250 );
+				}else{
+					document.querySelector(dn).style.backgroundColor = "red"
+					answer.classList.add("validateRed")
+					setTimeout(function() {
+						answer.classList.remove("validateRed");
+						exit();
+						chose = 0;
+					}, 1250 );
+				}		
+			}
+			
+
+			})
+	})
+
+</script>
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..b57be12
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,710 @@
+/*  Font */
+@font-face {
+  font-family: Rubic;
+  src: url(../resources/fonts/Rubik/static/Rubik-Regular.ttf);
+}
+
+/*  Proměnné */
+
+:root {
+  --glow-color: hsl(186, 100%, 69%);
+  --termLength: 17em;
+}
+
+/*  Základ*/
+
+*{
+  font-family: Rubic;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  line-height: 0;
+}
+
+body{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  background-color: black;
+}
+
+section{
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+h1{
+  font-size: 1rem;
+  line-height: normal;
+  inline-size: fit-content;
+  width: 60vw;
+}
+
+video{
+  width: 60vw;
+}
+
+/*  Grid Template */
+
+.grid {
+  display: grid;
+  padding: 3rem;
+  grid-gap: 2em;
+
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-areas:    "t        t"
+                          "d2       d9"
+                          "d11      d6"
+                          "d1       d7"
+                          "d10      d4"
+                          "d12      d3"
+                          "d8       d5";
+}
+
+/* Hidden items */
+
+[hidden]{ /*Pro zobrazeni hidden věcí (Containery na Vido a Otázky), zakomentovat*/
+  display:none !important;
+}
+
+#cinemaContainer, #questionContainer {
+	position: fixed;
+  display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100vw;
+	height: 100vh;
+	z-index: 1;
+	top: 0;
+	left: 0;
+	background: rgba(17, 17, 17, 0.85);
+	z-index: 999;
+	text-align: center;
+  overflow: scroll;
+}
+
+#questionContainer {
+  display: grid;
+  gap: 1em;
+}
+
+#cinemaContainer #cinemaBox {
+  max-width: 100%;
+  border-radius: .45rem;
+}
+
+.button{
+  color: var(--glow-color);
+
+	text-align: center;
+	vertical-align: middle;
+	cursor: pointer;
+	font-size: 25px;
+  border-radius: .45rem;
+
+  border: 1px solid transparent;
+
+	-moz-transition:all .4s ease;
+	-o-transition:all .4s ease;
+	-webkit-transition:all .4s ease;
+	transition:all .4s ease;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0.5em;
+
+}
+
+.button:hover {
+	border: 1px solid var(--glow-color);
+	background-color: black;
+}
+
+
+#close {
+	right: 10px;
+	top: 10px;
+	width: 50px;
+	height: 50px;
+	position: fixed;
+	bottom: 10px;
+}
+
+
+#skip {
+  width: 5em;
+
+  right: 10px;
+  bottom: 10px;
+
+	position: fixed;
+}
+
+.button img{
+  width: 100%;
+  filter: invert(100%);
+}
+
+#questionLine {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--glow-color);
+  border: 1px solid var(--glow-color);
+	background-color: black;
+  border-radius: 0.5em;
+  padding: 1em;
+  line-height: 1rem;
+  gap: 2em;
+}
+
+#questionLine img{
+  width: 30vw;
+}
+
+#answerBar {
+  display: grid;
+  gap: 2em;
+  width: 100%;
+}
+
+#answerBar .button{
+  border: 1px solid var(--glow-color);
+	background-color: black;
+  line-height: 2rem;
+}
+
+#answerBar .button:hover{
+  background-color: orange;
+  color: black;
+}
+
+#answerBar .validateRed {
+  color: white;
+  background-color: red;
+  &:after {
+    font-family:'FontAwesome';
+    content:" \f00d";
+  }
+}
+
+#answerBar .validateRed:hover {
+  color:white;
+  background-color: red;
+}
+
+#answerBar .validateGreen {
+  color: white;
+  background-color: green;
+  &:after {
+    font-family:'FontAwesome';
+    content:" \f00c";
+  }
+}
+
+#answerBar .validateGreen:hover {
+  color:white;
+  background-color: green;
+}
+
+/* individual grid items */
+
+#title {
+  grid-area: t;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  border-radius: 0.45em;
+}
+
+#box-0 {
+  grid-area: d1;
+  background: url("../resources/img/topicIcons/lesson1.svg") no-repeat center;
+}
+
+#box-0:hover{
+  background: url("../resources/img/topicIcons/lesson1black.svg") no-repeat center;
+}
+
+#box-1 {
+  grid-area: d2;
+  background: url("../resources/img/topicIcons/lesson2.svg") no-repeat center;
+}
+
+#box-1:hover{
+  background: url("../resources/img/topicIcons/lesson2black.svg") no-repeat center;
+}
+
+#box-2 {
+  grid-area: d3;
+  background: url("../resources/img/topicIcons/lesson3.svg") no-repeat center;
+}
+
+#box-2:hover{
+  background: url("../resources/img/topicIcons/lesson3black.svg") no-repeat center;
+}
+
+#box-3 {
+  grid-area: d4;
+  background: url("../resources/img/topicIcons/lesson4.svg") no-repeat center;
+}
+
+#box-3:hover{
+  background: url("../resources/img/topicIcons/lesson4black.svg") no-repeat center;
+}
+
+#box-4 {
+  grid-area: d5;
+  background: url("../resources/img/topicIcons/lesson5.svg") no-repeat center;
+}
+
+#box-4:hover{
+  background: url("../resources/img/topicIcons/lesson5black.svg") no-repeat center;
+}
+
+#box-5 {
+  grid-area: d6;
+  background: url("../resources/img/topicIcons/lesson6.svg") no-repeat center;
+}
+
+#box-5:hover{
+  background: url("../resources/img/topicIcons/lesson6black.svg") no-repeat center;
+}
+
+#box-6 {
+  grid-area: d7;
+  background: url("../resources/img/topicIcons/lesson7.svg") no-repeat center;
+}
+
+#box-6:hover{
+  background: url("../resources/img/topicIcons/lesson7black.svg") no-repeat center;
+}
+
+#box-7 {
+  grid-area: d8;
+  background: url("../resources/img/topicIcons/lesson8.svg") no-repeat center;
+}
+
+#box-7:hover{
+  background: url("../resources/img/topicIcons/lesson8black.svg") no-repeat center;
+}
+
+#box-8 {
+  grid-area: d9;
+  background: url("../resources/img/topicIcons/lesson9.svg") no-repeat center;
+}
+
+#box-8:hover{
+  background: url("../resources/img/topicIcons/lesson9black.svg") no-repeat center;
+}
+
+#box-9 {
+  grid-area: d10;
+  background: url("../resources/img/topicIcons/lesson10.svg") no-repeat center;
+}
+
+#box-9:hover{
+  background: url("../resources/img/topicIcons/lesson10black.svg") no-repeat center;
+}
+
+#box-10 {
+  grid-area: d11;
+  background: url("../resources/img/topicIcons/lesson11.svg") no-repeat center;
+}
+
+#box-10:hover{
+  background: url("../resources/img/topicIcons/lesson11black.svg") no-repeat center;
+}
+
+#box-11 {
+  grid-area: d12;
+  background: url("../resources/img/topicIcons/lesson12.svg") no-repeat center;
+}
+
+#box-11:hover{
+  background: url("../resources/img/topicIcons/lesson12black.svg") no-repeat center;
+}
+
+/* Terminal-like Screen */
+
+.fakeScreen {
+  border-radius: 0.45rem;
+}
+
+#title img{
+  width: 28vw;
+}
+
+.fakeScreen p {
+  line-height: 2rem;
+  position: relative;
+  text-align: left;
+  font-size: 1rem;
+  font-family: monospace;
+  white-space: nowrap;
+  overflow: hidden;
+  width: 0;
+}
+
+span {
+  color: var(--glow-color);
+  font-weight: bold;
+}
+
+.line1 {
+  color: #9CD9F0;
+  -webkit-animation: type 1 0.25s steps(20, end) forwards;
+  -moz-animation: type 1s 0.25s steps(20, end) forwards;
+  -o-animation: type 1s 0.25s steps(20, end) forwards;
+  animation: type 1s 0.25s steps(20, end) forwards;
+}
+
+.cursor1 {
+  -webkit-animation: blink 1s 1.25s 1 forwards;
+  -moz-animation: blink 1s 1.25s 1 forwards;
+  -o-animation: blink 1s 1.25s 1 forwards;
+  animation: blink 1s 1.25s 1 forwards;
+}
+
+.line2 {
+  color: #CDEE69;
+  -webkit-animation: type 1s 2.25s steps(20, end) forwards;
+  -moz-animation: type 1s 2.25s steps(20, end) forwards;
+  -o-animation: type 1s 2.25s steps(20, end) forwards;
+  animation: type 1s 2.25s steps(20, end) forwards;
+}
+
+.cursor2 {
+  -webkit-animation: blink 1s 3.25s 2 forwards;
+  -moz-animation: blink 1s 3.25s 2 forwards;
+  -o-animation: blink 1s 3.25s 2 forwards;
+  animation: blink 1s 3.25s 2 forwards;
+}
+
+.line3 {
+  color: var(--glow-color);
+  -webkit-animation: type 1s 3.5s steps(20, end) forwards;
+  -moz-animation: type 1s 3.5s steps(20, end) forwards;
+  -o-animation: type 1s 3.5s steps(20, end) forwards;
+  animation: type 1s 3.5s steps(20, end) forwards;
+}
+
+.cursor3 {
+  -webkit-animation: blink 1s 4.5s infinite;
+  -moz-animation: blink 1s 4.5s infinite;
+  -o-animation: blink 1s 4.5s infinite;
+  animation: blink 1s 4.5s infinite;
+}
+
+@-webkit-keyframes blink {
+  0% {
+    opacity: 0;
+  }
+  40% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@-moz-keyframes blink {
+  0% {
+    opacity: 0;
+  }
+  40% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@-o-keyframes blink {
+  0% {
+    opacity: 0;
+  }
+  40% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes blink {
+  0% {
+    opacity: 0;
+  }
+  40% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes type {
+  to {
+    width: var(--termLength);
+  }
+}
+
+@-moz-keyframes type {
+  to {
+    width: var(--termLength);
+  }
+}
+
+@-o-keyframes type {
+  to {
+    width: var(--termLength);
+  }
+}
+
+@keyframes type {
+  to {
+    width: var(--termLength);
+  }
+}
+
+#progress{
+  display: flex;
+  width: 100%;
+}
+
+progress{
+  position: relative;
+  width: 100%;
+  background-color: var(--glow-color);
+  border-radius: 0.45rem;
+}
+
+/*Glowing box*/
+
+.box {
+  position: relative;
+  color: var(--glow-color);
+  cursor: pointer;
+  border: 0.15em solid var(--glow-color);
+  border-radius: 0.45em;
+  background: none;
+  min-height: 3rem;
+
+  -webkit-box-shadow: inset 0px 0px 0.5em 0px var(--glow-color),
+    0px 0px 0.5em 0px var(--glow-color);
+  -moz-box-shadow: inset 0px 0px 0.5em 0px var(--glow-color),
+    0px 0px 0.5em 0px var(--glow-color);
+  box-shadow: inset 0px 0px 0.5em 0px var(--glow-color),
+    0px 0px 0.5em 0px var(--glow-color);
+  animation: border-flicker 2s linear infinite;
+}
+
+.box::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  opacity: 0.7;
+  filter: blur(1em);
+  transform: translateY(100%) rotateX(90deg) scale(1);
+  background: var(--glow-color);
+  pointer-events: none;
+}
+
+.box::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 0;
+  z-index: -1;
+  background-color: var(--glow-color);
+  box-shadow: 0 0 2em 0.2em var(--glow-color);
+  transition: opacity 100ms linear;
+}
+
+.box:hover {
+  animation: none;
+}
+
+.box:hover:before {
+  filter: blur(1.5em);
+  opacity: 1;
+}
+
+.box:hover:after {
+  opacity: 1;
+}
+
+@keyframes faulty-flicker {
+  0% {
+    opacity: 0.1;
+  }
+  2% {
+    opacity: 0.1;
+  }
+  4% {
+    opacity: 0.5;
+  }
+  19% {
+    opacity: 0.5;
+  }
+  21% {
+    opacity: 0.1;
+  }
+  23% {
+    opacity: 1;
+  }
+  80% {
+    opacity: 0.5;
+  }
+  83% {
+    opacity: 0.4;
+  }
+
+  87% {
+    opacity: 1;
+  }
+}
+
+@keyframes border-flicker {
+  0% {
+    opacity: 0.1;
+  }
+  2% {
+    opacity: 1;
+  }
+  4% {
+    opacity: 0.1;
+  }
+
+  8% {
+    opacity: 1;
+  }
+  70% {
+    opacity: 0.7;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+
+/* Footer Animation -more-like-abomination- */
+footer {
+  position: relative;
+  width: 100vw;
+  margin-top: auto;
+  background: linear-gradient(0deg, #000, #272727);
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  align-self: flex-end;
+  color: var(--glow-color);
+}
+
+footer:before, footer:after {
+  content: '';
+  position: absolute;
+  top: -2px;
+  background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000, #fb0094, 
+    #0000ff, #00ff00,#ffff00, #ff0000);
+  background-size: 400%;
+  width: calc(100%);
+  height: calc(100% + 2px);
+  z-index: -1;
+  animation: steam 20s linear infinite;
+}
+
+@keyframes steam {
+  0% {
+    background-position: 0 0;
+  }
+  50% {
+    background-position: 400% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
+
+footer:after {
+  filter: blur(1rem);
+}
+
+footer p{
+  color: var(--glow-color);
+  line-height: 2em;
+}
+
+#cheatLine{
+  line-height: 0;
+}
+
+/* Responzivita */
+/* media query */
+@media only screen and (min-width: 500px) { 
+      
+  .grid {
+    grid-template-columns: repeat(4, 1fr);
+    grid-auto-rows: 1fr;
+    grid-template-areas:    "t      t       d2      d7"
+                            "t      t       d1      d12"
+                            "d8     d11     d6      d9"
+                            "d5     d10     d3      d4";
+  }
+
+  #answerBar {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  #title img{
+    width: 14vw;
+  }
+
+  .fakeScreen p {
+    font-size: 1.5rem;
+  }
+
+  h1{
+    font-size: 1.5rem;
+  }
+}
\ No newline at end of file
diff --git a/index.php b/index.php
new file mode 100644
index 0000000..612aef2
--- /dev/null
+++ b/index.php
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/x-icon" href="resources/img/favicon.ico">
+    <link rel="stylesheet" href="./css/style.css">
+    <title>Chess App</title>
+</head>
+<body>
+    <?php
+    require_once("./components/cinemaContainer.php")
+    ?>
+    <?php
+    require_once("./components/questionContainer.php")
+    ?>
+    <section>
+        <?php 
+            require_once("./components/grid.php"); 
+        ?>
+    </section>
+    <footer>
+        <?php 
+            require_once("./components/footer.php"); 
+        ?>
+    </footer>
+    <script src="js/main.js"></script>
+</body>
+</html>
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..cec8659
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,105 @@
+function cinemaMode(videoId){
+	let source = document.querySelector("source")
+	source.setAttribute("src", "resources/video/lq" + videoId + ".webm")
+	video.load()
+	video.play()
+	
+	cinema.removeAttribute("hidden")
+}
+
+function loadQuestion(questionId){
+	questionFiller(questionId)
+	shuffleChildren(answers)
+}
+
+function questionMode(){
+	if(window.answerFlag == 0){
+		question.removeAttribute("hidden")
+	}
+}
+
+function exit(){
+	question.setAttribute("hidden", "")
+	cinema.setAttribute("hidden", "")
+	video.pause()
+}
+
+const exitBoxes = document.querySelectorAll("#close")
+exitBoxes.forEach(x => {
+	x.addEventListener("click", (e) => {
+		exit()
+	})
+})
+
+
+function shuffleChildren(parent){
+	var children = parent.children;
+	var frag = document.createDocumentFragment();
+	var randomChild;
+
+	while (children.length) {
+		randomChild = children[Math.floor(Math.random() * children.length)]
+		frag.appendChild(randomChild);
+	}
+
+	parent.appendChild(frag);
+}
+
+function pushScore() {
+	document.querySelector("progress").value = score
+	if(score == document.querySelector("progress").max) {
+		// vyhral jsi, zde udelej co chces
+		// Chci se stát obecně lepším člověkem ;)
+		//alert("Dobrá práce člověče, figurkama umíš tahat na výbornou jako správnej flamendr, ale co na to češi?Stala se z vás ikona této aplikace!")
+		boxes.forEach(
+			(boxRemove) => {
+				boxRemove.remove();
+			}
+		)
+		document.querySelector(".grid").style.display = "flex"
+		document.querySelector("#title").style.width = "100"
+		document.documentElement.style.setProperty('--termLength', 60 + "vw");
+		document.querySelector("audio").remove();
+		fakeScreen.replaceChild(fakeScreen.children[0],fakeScreen.children[0])
+		fakeScreen.replaceChild(fakeScreen.children[1],fakeScreen.children[1])
+		fakeScreen.replaceChild(fakeScreen.children[2],fakeScreen.children[2])
+		fakeScreen.children[0].innerHTML="&#91; RUN ENDED &#93;<span class=\"cursor1\">_</span>"
+		fakeScreen.children[1].innerHTML="Gratuluji!<span class=\"cursor2\"></span>"
+		fakeScreen.children[2].innerHTML=">Bye<span class=\"cursor3\">_</span>"
+		fakeScreen.children[3].innerHTML="<audio autoplay><source src=\"resources/audio/outro.webm\" type=\"audio/webm\"></audio>"
+	}
+}
+
+function audioplayer(){
+	playlist = ["intro","cyber","minute","supremers","violence"]
+	music = document.querySelector("audio");
+	music.play()
+	music.onended = function(e){
+		if(i < 4){
+			i += 1
+		}
+		else{
+			i=0
+		}
+		music.innerHTML="<audio autoplay><source src=\"resources/audio/" + playlist[i] + ".webm\" type=\"audio/webm\"></audio>"
+		music.play()
+	}
+}
+
+const bodyForAudio  = document.querySelector("body");
+
+function onetime(node, type, callback) {
+
+	// create event
+	node.addEventListener(type, function(e) {
+		// remove event
+		e.target.removeEventListener(e.type, arguments.callee);
+		// call handler
+		return callback(e);
+	});
+
+}
+
+onetime(bodyForAudio, "click", audioplayer)
+
+
diff --git a/pages/errors/404.php b/pages/errors/404.php
new file mode 100644
index 0000000..e69de29
diff --git a/resources/audio/cyber.webm b/resources/audio/cyber.webm
new file mode 100644
index 0000000..ef329af
Binary files /dev/null and b/resources/audio/cyber.webm differ
diff --git a/resources/audio/intro.webm b/resources/audio/intro.webm
new file mode 100644
index 0000000..defac5c
Binary files /dev/null and b/resources/audio/intro.webm differ
diff --git a/resources/audio/minute.webm b/resources/audio/minute.webm
new file mode 100644
index 0000000..3997211
Binary files /dev/null and b/resources/audio/minute.webm differ
diff --git a/resources/audio/outro.webm b/resources/audio/outro.webm
new file mode 100644
index 0000000..cfdac91
Binary files /dev/null and b/resources/audio/outro.webm differ
diff --git a/resources/audio/supremers.webm b/resources/audio/supremers.webm
new file mode 100644
index 0000000..fdaea63
Binary files /dev/null and b/resources/audio/supremers.webm differ
diff --git a/resources/audio/violence.webm b/resources/audio/violence.webm
new file mode 100644
index 0000000..d309fe1
Binary files /dev/null and b/resources/audio/violence.webm differ
diff --git a/resources/fonts/Rubik/OFL.txt b/resources/fonts/Rubik/OFL.txt
new file mode 100644
index 0000000..cdb3773
--- /dev/null
+++ b/resources/fonts/Rubik/OFL.txt
@@ -0,0 +1,93 @@
+Copyright 2015 The Rubik Project Authors (https://github.com/googlefonts/rubik)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/resources/fonts/Rubik/README.txt b/resources/fonts/Rubik/README.txt
new file mode 100644
index 0000000..c5792a2
--- /dev/null
+++ b/resources/fonts/Rubik/README.txt
@@ -0,0 +1,77 @@
+Rubik Variable Font
+===================
+
+This download contains Rubik as both variable fonts and static fonts.
+
+Rubik is a variable font with this axis:
+  wght
+
+This means all the styles are contained in these files:
+  Rubik-VariableFont_wght.ttf
+  Rubik-Italic-VariableFont_wght.ttf
+
+If your app fully supports variable fonts, you can now pick intermediate styles
+that aren’t available as static fonts. Not all apps support variable fonts, and
+in those cases you can use the static font files for Rubik:
+  static/Rubik-Light.ttf
+  static/Rubik-Regular.ttf
+  static/Rubik-Medium.ttf
+  static/Rubik-SemiBold.ttf
+  static/Rubik-Bold.ttf
+  static/Rubik-ExtraBold.ttf
+  static/Rubik-Black.ttf
+  static/Rubik-LightItalic.ttf
+  static/Rubik-Italic.ttf
+  static/Rubik-MediumItalic.ttf
+  static/Rubik-SemiBoldItalic.ttf
+  static/Rubik-BoldItalic.ttf
+  static/Rubik-ExtraBoldItalic.ttf
+  static/Rubik-BlackItalic.ttf
+
+Get started
+-----------
+
+1. Install the font files you want to use
+
+2. Use your app's font picker to view the font family and all the
+available styles
+
+Learn more about variable fonts
+-------------------------------
+
+  https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
+  https://variablefonts.typenetwork.com
+  https://medium.com/variable-fonts
+
+In desktop apps
+
+  https://theblog.adobe.com/can-variable-fonts-illustrator-cc
+  https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
+
+Online
+
+  https://developers.google.com/fonts/docs/getting_started
+  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
+  https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
+
+Installing fonts
+
+  MacOS: https://support.apple.com/en-us/HT201749
+  Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
+  Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
+
+Android Apps
+
+  https://developers.google.com/fonts/docs/android
+  https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
+
+License
+-------
+Please read the full license text (OFL.txt) to understand the permissions,
+restrictions and requirements for usage, redistribution, and modification.
+
+You can use them in your products & projects – print or digital,
+commercial or otherwise.
+
+This isn't legal advice, please consider consulting a lawyer and see the full
+license for all details.
diff --git a/resources/fonts/Rubik/Rubik-Italic-VariableFont_wght.ttf b/resources/fonts/Rubik/Rubik-Italic-VariableFont_wght.ttf
new file mode 100644
index 0000000..b072413
Binary files /dev/null and b/resources/fonts/Rubik/Rubik-Italic-VariableFont_wght.ttf differ
diff --git a/resources/fonts/Rubik/Rubik-VariableFont_wght.ttf b/resources/fonts/Rubik/Rubik-VariableFont_wght.ttf
new file mode 100644
index 0000000..ee31e7f
Binary files /dev/null and b/resources/fonts/Rubik/Rubik-VariableFont_wght.ttf differ
diff --git a/resources/fonts/Rubik/static/Rubik-Black.ttf b/resources/fonts/Rubik/static/Rubik-Black.ttf
new file mode 100644
index 0000000..4544103
Binary files /dev/null and b/resources/fonts/Rubik/static/Rubik-Black.ttf differ
diff --git a/resources/fonts/Rubik/static/Rubik-BlackItalic.ttf b/resources/fonts/Rubik/static/Rubik-BlackItalic.ttf
new file mode 100644
index 0000000..e768a5d
Binary files /dev/null and b/resources/fonts/Rubik/static/Rubik-BlackItalic.ttf differ
diff --git a/resources/fonts/Rubik/static/Rubik-Bold.ttf b/resources/fonts/Rubik/static/Rubik-Bold.ttf
new file mode 100644
index 0000000..09c447d
Binary files /dev/null and b/resources/fonts/Rubik/static/Rubik-Bold.ttf differ
diff --git a/resources/fonts/Rubik/static/Rubik-BoldItalic.ttf b/resources/fonts/Rubik/static/Rubik-BoldItalic.ttf
new file mode 100644
index 0000000..4902870
Binary files /dev/null and b/resources/fonts/Rubik/static/Rubik-BoldItalic.ttf differ
diff --git a/resources/fonts/Rubik/static/Rubik-ExtraBold.ttf b/resources/fonts/Rubik/static/Rubik-ExtraBold.ttf
new file mode 100644
index 0000000..5a81746
Binary files /dev/null and b/resources/fonts/Rubik/static/Rubik-ExtraBold.ttf differ
diff --git a/resources/fonts/Rubik/static/Rubik-ExtraBoldItalic.ttf b/resources/fonts/Rubik/static/Rubik-ExtraBoldItalic.ttf
new file mode 100644
index 0000000..3d4a031
Binary files /dev/null and b/resources/fonts/Rubik/static/Rubik-ExtraBoldItalic.ttf differ
diff --git a/resources/fonts/Rubik/static/Rubik-Italic.ttf b/resources/fonts/Rubik/static/Rubik-Italic.ttf
new file mode 100644
index 0000000..ec36c0e
Binary files /dev/null and b/resources/fonts/Rubik/static/Rubik-Italic.ttf differ
diff --git a/resources/fonts/Rubik/static/Rubik-Light.ttf b/resources/fonts/Rubik/static/Rubik-Light.ttf
new file mode 100644
index 0000000..3c3443d
Binary files /dev/null and b/resources/fonts/Rubik/static/Rubik-Light.ttf differ
diff --git a/resources/fonts/Rubik/static/Rubik-LightItalic.ttf b/resources/fonts/Rubik/static/Rubik-LightItalic.ttf
new file mode 100644
index 0000000..eff76bb
Binary files /dev/null and b/resources/fonts/Rubik/static/Rubik-LightItalic.ttf differ
diff --git a/resources/fonts/Rubik/static/Rubik-Medium.ttf b/resources/fonts/Rubik/static/Rubik-Medium.ttf
new file mode 100644
index 0000000..be42fad
Binary files /dev/null and b/resources/fonts/Rubik/static/Rubik-Medium.ttf differ
diff --git a/resources/fonts/Rubik/static/Rubik-MediumItalic.ttf b/resources/fonts/Rubik/static/Rubik-MediumItalic.ttf
new file mode 100644
index 0000000..90939bc
Binary files /dev/null and b/resources/fonts/Rubik/static/Rubik-MediumItalic.ttf differ
diff --git a/resources/fonts/Rubik/static/Rubik-Regular.ttf b/resources/fonts/Rubik/static/Rubik-Regular.ttf
new file mode 100644
index 0000000..2a01688
Binary files /dev/null and b/resources/fonts/Rubik/static/Rubik-Regular.ttf differ
diff --git a/resources/fonts/Rubik/static/Rubik-SemiBold.ttf b/resources/fonts/Rubik/static/Rubik-SemiBold.ttf
new file mode 100644
index 0000000..46d51e1
Binary files /dev/null and b/resources/fonts/Rubik/static/Rubik-SemiBold.ttf differ
diff --git a/resources/fonts/Rubik/static/Rubik-SemiBoldItalic.ttf b/resources/fonts/Rubik/static/Rubik-SemiBoldItalic.ttf
new file mode 100644
index 0000000..fc3571a
Binary files /dev/null and b/resources/fonts/Rubik/static/Rubik-SemiBoldItalic.ttf differ
diff --git a/resources/img/crown.png b/resources/img/crown.png
new file mode 100644
index 0000000..7d98977
Binary files /dev/null and b/resources/img/crown.png differ
diff --git a/resources/img/fast-forward.png b/resources/img/fast-forward.png
new file mode 100644
index 0000000..1d8c2ce
Binary files /dev/null and b/resources/img/fast-forward.png differ
diff --git a/resources/img/favicon.ico b/resources/img/favicon.ico
new file mode 100644
index 0000000..4ef5675
Binary files /dev/null and b/resources/img/favicon.ico differ
diff --git a/resources/img/placeholder.png b/resources/img/placeholder.png
new file mode 100644
index 0000000..fb5a977
Binary files /dev/null and b/resources/img/placeholder.png differ
diff --git a/resources/img/questions/0.png b/resources/img/questions/0.png
new file mode 100644
index 0000000..486ab2a
Binary files /dev/null and b/resources/img/questions/0.png differ
diff --git a/resources/img/questions/1.png b/resources/img/questions/1.png
new file mode 100644
index 0000000..cd87f97
Binary files /dev/null and b/resources/img/questions/1.png differ
diff --git a/resources/img/questions/10.png b/resources/img/questions/10.png
new file mode 100644
index 0000000..e693c72
Binary files /dev/null and b/resources/img/questions/10.png differ
diff --git a/resources/img/questions/11.png b/resources/img/questions/11.png
new file mode 100644
index 0000000..5a1fe17
Binary files /dev/null and b/resources/img/questions/11.png differ
diff --git a/resources/img/questions/2.png b/resources/img/questions/2.png
new file mode 100644
index 0000000..31c9f30
Binary files /dev/null and b/resources/img/questions/2.png differ
diff --git a/resources/img/questions/3.png b/resources/img/questions/3.png
new file mode 100644
index 0000000..be347ba
Binary files /dev/null and b/resources/img/questions/3.png differ
diff --git a/resources/img/questions/4.png b/resources/img/questions/4.png
new file mode 100644
index 0000000..9e418a4
Binary files /dev/null and b/resources/img/questions/4.png differ
diff --git a/resources/img/questions/5.png b/resources/img/questions/5.png
new file mode 100644
index 0000000..5d204b2
Binary files /dev/null and b/resources/img/questions/5.png differ
diff --git a/resources/img/questions/6.png b/resources/img/questions/6.png
new file mode 100644
index 0000000..2550115
Binary files /dev/null and b/resources/img/questions/6.png differ
diff --git a/resources/img/questions/7.png b/resources/img/questions/7.png
new file mode 100644
index 0000000..166aaed
Binary files /dev/null and b/resources/img/questions/7.png differ
diff --git a/resources/img/questions/8.png b/resources/img/questions/8.png
new file mode 100644
index 0000000..42b6f22
Binary files /dev/null and b/resources/img/questions/8.png differ
diff --git a/resources/img/questions/9.png b/resources/img/questions/9.png
new file mode 100644
index 0000000..3deed07
Binary files /dev/null and b/resources/img/questions/9.png differ
diff --git a/resources/img/topicIcons/King.svg b/resources/img/topicIcons/King.svg
new file mode 100644
index 0000000..7157f07
--- /dev/null
+++ b/resources/img/topicIcons/King.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45"><g fill="#61efff" fill-rule="evenodd" stroke="#61efff" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5"><g stroke-linejoin="miter"><path d="m22.5 11.63v-5.63"/><path d="m22.5 25c0 0 4.5-7.5 3-10.5 0 0-1-2.5-3-2.5-2 0-3 2.5-3 2.5-1.5 3 3 10.5 3 10.5" fill="#61efff" stroke-linecap="butt"/></g><path d="m11.5 37c5.5 3.5 15.5 3.5 21 0v-7c0 0 9-4.5 6-10.5-4-6.5-13.5-3.5-16 4v3.5-3.5c-3.5-7.5-13-10.5-16-4-3 6 5 10 5 10v7.5z" fill="#61efff"/><path d="m20 8h5" stroke-linejoin="miter"/></g></svg>
\ No newline at end of file
diff --git a/resources/img/topicIcons/lesson1.svg b/resources/img/topicIcons/lesson1.svg
new file mode 100644
index 0000000..b26f7fc
--- /dev/null
+++ b/resources/img/topicIcons/lesson1.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#61efff" d="M17.156 16.438v41.656L192.78 234.22l-51.436 51.405-11.97 12L140.782 309l106.69 106.688-24.532 24.53 125.75 53.844-53.875-125.718-23.407 23.406-94.72-94.72 48.44-48.436 135.78 135.75-23.97 23.937 125.72 53.876-53.844-125.72-23.968 23.97-135.78-135.75 48.467-48.47 94.72 94.72-23.375 23.406 125.72 53.844-53.876-125.72-24.533 24.533L309.5 140.28l-11.406-11.374-11.97 11.97-51.468 51.436L58.812 16.438H17.157z"/></svg>
\ No newline at end of file
diff --git a/resources/img/topicIcons/lesson10.svg b/resources/img/topicIcons/lesson10.svg
new file mode 100644
index 0000000..0d901df
--- /dev/null
+++ b/resources/img/topicIcons/lesson10.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 512px; width: 512px;"><g class="" transform="translate(0,0)" style=""><path d="M102.78 20.625V113.5L149 165.22v183.03h-25.875L99.53 489.156h319.94L395.874 348.25H370.03V165.22l46.22-51.72V20.625h-53.938v43.97H329.47v-43.97h-53.94v43.97h-32.436v-43.97h-53.938v43.97H156.72v-43.97h-53.94zM263.813 157.72c30.17 0 54.625 24.455 54.625 54.624 0 20.84-11.65 38.946-28.812 48.156l27.625 140.25H210.375L238 260.5c-17.148-9.214-28.813-27.326-28.813-48.156 0-30.17 24.457-54.625 54.625-54.625z" fill="#61efff" fill-opacity="1"/></g></svg>
\ No newline at end of file
diff --git a/resources/img/topicIcons/lesson10black.svg b/resources/img/topicIcons/lesson10black.svg
new file mode 100644
index 0000000..c64c0b5
--- /dev/null
+++ b/resources/img/topicIcons/lesson10black.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 512px; width: 512px;"><g class="" transform="translate(0,0)" style=""><path d="M102.78 20.625V113.5L149 165.22v183.03h-25.875L99.53 489.156h319.94L395.874 348.25H370.03V165.22l46.22-51.72V20.625h-53.938v43.97H329.47v-43.97h-53.94v43.97h-32.436v-43.97h-53.938v43.97H156.72v-43.97h-53.94zM263.813 157.72c30.17 0 54.625 24.455 54.625 54.624 0 20.84-11.65 38.946-28.812 48.156l27.625 140.25H210.375L238 260.5c-17.148-9.214-28.813-27.326-28.813-48.156 0-30.17 24.457-54.625 54.625-54.625z" fill="#000" fill-opacity="1"/></g></svg>
\ No newline at end of file
diff --git a/resources/img/topicIcons/lesson11.svg b/resources/img/topicIcons/lesson11.svg
new file mode 100644
index 0000000..6565271
--- /dev/null
+++ b/resources/img/topicIcons/lesson11.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#61efff" d="M197.746 30.38l-9.898 30.905-40.485 18.194-28.79 28.055 30.855 35.512 47.486-4.596 36.06 8.35 30.83-33.52-4.263-56.7-61.794-26.2zM25.902 133.32c-13.472 25.957-6.665 67.412 30.356 96.746 37.04 29.35 78.807 26.396 100.855 7.223L25.903 133.32zm359.174 68.99l-34.152 11.38 7.217 21.65-227.6 147.94c12.527 4.355 23.416 12.25 31.466 22.484L369.904 270.63l36.303 108.913c16.727.414 31.995 6.866 43.7 17.264l-64.83-194.498zM171.484 248.67c-9.358 9.058-21.296 15.425-34.656 18.715l63.496 49.064L232.3 295.67l-60.816-46.996zM292.66 342.31l-31.976 20.784L317.504 407h32.183c3.296-4.39 7.104-8.377 11.336-11.865L292.66 342.31zM108.166 397.5c-27.997 0-50.5 22.503-50.5 50.5s22.503 50.5 50.5 50.5 50.5-22.503 50.5-50.5-22.503-50.5-50.5-50.5zm296.334 0c-27.997 0-50.5 22.503-50.5 50.5s22.503 50.5 50.5 50.5S455 475.997 455 448s-22.503-50.5-50.5-50.5zM25 425v46h18.66c-2.58-7.196-3.994-14.937-3.994-23s1.415-15.804 3.994-23H25zm147.672 0c2.58 7.196 3.994 14.937 3.994 23s-1.415 15.804-3.994 23h167.322c-2.58-7.196-3.994-14.937-3.994-23s1.415-15.804 3.994-23H172.672zm296.334 0c2.58 7.196 3.994 14.937 3.994 23s-1.415 15.804-3.994 23H487v-46h-17.994zm-360.84 3.166A19.833 19.833 0 0 1 128 448a19.833 19.833 0 0 1-19.834 19.834A19.833 19.833 0 0 1 88.334 448a19.833 19.833 0 0 1 19.832-19.834zm296.334 0A19.833 19.833 0 0 1 424.334 448a19.833 19.833 0 0 1-19.834 19.834A19.833 19.833 0 0 1 384.666 448a19.833 19.833 0 0 1 19.834-19.834z"/></svg>
\ No newline at end of file
diff --git a/resources/img/topicIcons/lesson11black.svg b/resources/img/topicIcons/lesson11black.svg
new file mode 100644
index 0000000..714be18
--- /dev/null
+++ b/resources/img/topicIcons/lesson11black.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M197.746 30.38l-9.898 30.905-40.485 18.194-28.79 28.055 30.855 35.512 47.486-4.596 36.06 8.35 30.83-33.52-4.263-56.7-61.794-26.2zM25.902 133.32c-13.472 25.957-6.665 67.412 30.356 96.746 37.04 29.35 78.807 26.396 100.855 7.223L25.903 133.32zm359.174 68.99l-34.152 11.38 7.217 21.65-227.6 147.94c12.527 4.355 23.416 12.25 31.466 22.484L369.904 270.63l36.303 108.913c16.727.414 31.995 6.866 43.7 17.264l-64.83-194.498zM171.484 248.67c-9.358 9.058-21.296 15.425-34.656 18.715l63.496 49.064L232.3 295.67l-60.816-46.996zM292.66 342.31l-31.976 20.784L317.504 407h32.183c3.296-4.39 7.104-8.377 11.336-11.865L292.66 342.31zM108.166 397.5c-27.997 0-50.5 22.503-50.5 50.5s22.503 50.5 50.5 50.5 50.5-22.503 50.5-50.5-22.503-50.5-50.5-50.5zm296.334 0c-27.997 0-50.5 22.503-50.5 50.5s22.503 50.5 50.5 50.5S455 475.997 455 448s-22.503-50.5-50.5-50.5zM25 425v46h18.66c-2.58-7.196-3.994-14.937-3.994-23s1.415-15.804 3.994-23H25zm147.672 0c2.58 7.196 3.994 14.937 3.994 23s-1.415 15.804-3.994 23h167.322c-2.58-7.196-3.994-14.937-3.994-23s1.415-15.804 3.994-23H172.672zm296.334 0c2.58 7.196 3.994 14.937 3.994 23s-1.415 15.804-3.994 23H487v-46h-17.994zm-360.84 3.166A19.833 19.833 0 0 1 128 448a19.833 19.833 0 0 1-19.834 19.834A19.833 19.833 0 0 1 88.334 448a19.833 19.833 0 0 1 19.832-19.834zm296.334 0A19.833 19.833 0 0 1 424.334 448a19.833 19.833 0 0 1-19.834 19.834A19.833 19.833 0 0 1 384.666 448a19.833 19.833 0 0 1 19.834-19.834z"/></svg>
\ No newline at end of file
diff --git a/resources/img/topicIcons/lesson12.svg b/resources/img/topicIcons/lesson12.svg
new file mode 100644
index 0000000..cfcec5f
--- /dev/null
+++ b/resources/img/topicIcons/lesson12.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 512px; width: 512px;"><g class="" transform="translate(0,0)" style=""><path d="M91.033 22.14v84.368l46.434 57.56v16.166l98.93 44.13 27.29-34.305 65.9 4.01v-30l46.433-57.562v-84.37h-48.916v39.796H297.33V22.14h-49.45v39.794h-29.24V22.14h-49.45v39.794h-29.243V22.14H91.033zm46.434 178.557v195.17h-29.88l-21.792 94.695h295.463l-21.79-94.695h-29.882V370.02l-38.72-24.07-23.712 29.292 28.432 25.737-12.543 13.854L241.5 377.23l33.37-41.222-91.65-56.973 33.288-43.082-79.04-35.256zm155.013 19.11l19.04 34.994 31.005-5.405-17.287-29.588H292.48zm66.682 10.088l17.293 74.527 55.553 2.068-13.442-57.967-59.404-18.628zm-135.47 27.328l-13.034 16.865 37.393 23.244 18.167-20.61-42.526-19.5zm73.115 13.056l-32.66 37.056 65.44 40.68V298.2l-32.78-27.92zm85.154 51.745l-5.16 29.584 33.49 18.158-.093-31.258-28.236-16.485zm79.91 6.928l-23.073 23.197 8.697 33.106 25.717-18.08-11.34-38.223zm-65.85 68.992l-10.97 36.977 24.88 17.49 8.414-32.025-22.323-22.442z" fill="#61efff" fill-opacity="1"/></g></svg>
\ No newline at end of file
diff --git a/resources/img/topicIcons/lesson12black.svg b/resources/img/topicIcons/lesson12black.svg
new file mode 100644
index 0000000..a54b6d2
--- /dev/null
+++ b/resources/img/topicIcons/lesson12black.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 512px; width: 512px;"><g class="" transform="translate(0,0)" style=""><path d="M91.033 22.14v84.368l46.434 57.56v16.166l98.93 44.13 27.29-34.305 65.9 4.01v-30l46.433-57.562v-84.37h-48.916v39.796H297.33V22.14h-49.45v39.794h-29.24V22.14h-49.45v39.794h-29.243V22.14H91.033zm46.434 178.557v195.17h-29.88l-21.792 94.695h295.463l-21.79-94.695h-29.882V370.02l-38.72-24.07-23.712 29.292 28.432 25.737-12.543 13.854L241.5 377.23l33.37-41.222-91.65-56.973 33.288-43.082-79.04-35.256zm155.013 19.11l19.04 34.994 31.005-5.405-17.287-29.588H292.48zm66.682 10.088l17.293 74.527 55.553 2.068-13.442-57.967-59.404-18.628zm-135.47 27.328l-13.034 16.865 37.393 23.244 18.167-20.61-42.526-19.5zm73.115 13.056l-32.66 37.056 65.44 40.68V298.2l-32.78-27.92zm85.154 51.745l-5.16 29.584 33.49 18.158-.093-31.258-28.236-16.485zm79.91 6.928l-23.073 23.197 8.697 33.106 25.717-18.08-11.34-38.223zm-65.85 68.992l-10.97 36.977 24.88 17.49 8.414-32.025-22.323-22.442z" fill="#000" fill-opacity="1"/></g></svg>
\ No newline at end of file
diff --git a/resources/img/topicIcons/lesson1black.svg b/resources/img/topicIcons/lesson1black.svg
new file mode 100644
index 0000000..26bbd88
--- /dev/null
+++ b/resources/img/topicIcons/lesson1black.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="000" d="M17.156 16.438v41.656L192.78 234.22l-51.436 51.405-11.97 12L140.782 309l106.69 106.688-24.532 24.53 125.75 53.844-53.875-125.718-23.407 23.406-94.72-94.72 48.44-48.436 135.78 135.75-23.97 23.937 125.72 53.876-53.844-125.72-23.968 23.97-135.78-135.75 48.467-48.47 94.72 94.72-23.375 23.406 125.72 53.844-53.876-125.72-24.533 24.533L309.5 140.28l-11.406-11.374-11.97 11.97-51.468 51.436L58.812 16.438H17.157z"/></svg>
\ No newline at end of file
diff --git a/resources/img/topicIcons/lesson2.svg b/resources/img/topicIcons/lesson2.svg
new file mode 100644
index 0000000..35e7bec
--- /dev/null
+++ b/resources/img/topicIcons/lesson2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#61efff" d="M323.28 19.97c-60.38.635-112.34 52.183-108.936 119.155L228.5 125.75l12.844 13.594-23.813 22.53c2.144 9.237 5.356 18.665 9.72 28.22-53.554-22.796-66.972-40.137-111.875-94.094-9.347-11.232-18.9-15.48-27.47-16.125-1.07-.08-2.136-.097-3.186-.063-7.355.24-14.127 3.22-19.345 8.032-5.964 5.5-9.72 13.217-9.78 21.656-.064 8.44 3.366 17.974 13.56 27.72 24.537 23.45 52.7 47.2 74.157 71.218 11.654 13.045 21.673 26.464 27.563 40.28l43.03 11.407 5.032 1.313 1.5 5c4.288 14.202 2.314 31.67-12.28 45.78l-3.813 3.657-5.094-1.344-31.72-8.405c-4.518 8.075-10.335 14.956-16.655 21-11.34 10.844-24.32 19.41-36.156 28.97-23.676 19.116-43.444 40.29-41.595 92.155 1.15 32.252 25.42 45.802 46 44.594 10.29-.604 18.976-4.947 24-12.688 5.024-7.74 7.178-19.855.906-38.5-5.565-16.545 2.843-33.48 15.314-45.156 12.47-11.675 30.34-19.41 48.53-15.344 10.053 2.248 16.206 10.77 19.44 19.156 3.23 8.387 4.823 17.816 6.874 27.5 4.1 19.37 9.476 38.69 25.25 49.97 30.32 21.68 61.273 18.168 74.843 6.593 6.787-5.787 9.753-12.75 8.033-22.03-1.72-9.28-9.1-21.564-26.344-34.564-19.716-14.862-24.02-41.538-22.158-67.06 1.864-25.525 9.933-51 20.313-67.783 6.262-10.125 17.31-13.693 29.344-16.875 12.033-3.18 26.08-5.56 40.53-9.25 28.9-7.378 58.494-19.322 76.28-50.656 8.747-15.406 10.772-27.98 9.345-37.094-1.427-9.113-5.998-15.082-12.5-18.656-13.003-7.148-35.813-4.177-54.656 21-13.622 18.2-39.5 26.57-69.158 28.594-9.042.617-18.498.56-28.156-.125 2.49-1.505 4.96-3.118 7.406-4.813l.094-31.187 18.688.03-.03 15.907c31.506-29.7 55.06-74.37 53.123-119.812 18.06 11.88 30.535 27.127 41.97 47.72 3.354-16.526-.232-32.554-8.094-47.97 16.145 6.698 28.583 17.107 41.437 27.094-4.812-20.107-14.792-33.164-29.594-43.28 16.717 1.346 26.148 5.245 40.813 12.748-10.997-24.936-55.215-50.355-98.314-35.218-16.463-7.804-33.215-11.296-49.375-11.125zm-34.56 54.343c10.942 0 19.81 8.867 19.81 19.812s-8.868 19.844-19.81 19.844c-10.945 0-19.814-8.902-19.814-19.845s8.87-19.813 19.813-19.813zm44.655 33.093c10.943 0 19.813 8.868 19.813 19.813 0 10.943-8.87 19.81-19.813 19.81s-19.813-8.868-19.813-19.81c0-10.945 8.87-19.814 19.813-19.814zm-80.03 40.72l14.905 11.28-20.938 27.656-14.906-11.28 20.938-27.657zm28.06 16.78l17.783 5.688-10.094 31.625-17.813-5.69 10.126-31.624zM42.314 204.562c-16.928 20.222-19.804 44.558-18 72.094l30.375-17.062L58 257.75l3.656.97 137 36.31c5.497-6.524 6.25-11.95 5.03-18.28L66.72 240.437l-3.69-.968-1.936-3.282-18.782-31.625zm283.906 105.282c-2.502 5.156-4.897 11.194-6.97 17.75l95.906 25.437c1.933.03 3.623-.02 5.22-.092l52.5 5.937-51.72-22.75c-.725-.647-1.48-1.31-1.812-1.594l-93.125-24.686z"/></svg>
\ No newline at end of file
diff --git a/resources/img/topicIcons/lesson2black.svg b/resources/img/topicIcons/lesson2black.svg
new file mode 100644
index 0000000..1da97a4
--- /dev/null
+++ b/resources/img/topicIcons/lesson2black.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M323.28 19.97c-60.38.635-112.34 52.183-108.936 119.155L228.5 125.75l12.844 13.594-23.813 22.53c2.144 9.237 5.356 18.665 9.72 28.22-53.554-22.796-66.972-40.137-111.875-94.094-9.347-11.232-18.9-15.48-27.47-16.125-1.07-.08-2.136-.097-3.186-.063-7.355.24-14.127 3.22-19.345 8.032-5.964 5.5-9.72 13.217-9.78 21.656-.064 8.44 3.366 17.974 13.56 27.72 24.537 23.45 52.7 47.2 74.157 71.218 11.654 13.045 21.673 26.464 27.563 40.28l43.03 11.407 5.032 1.313 1.5 5c4.288 14.202 2.314 31.67-12.28 45.78l-3.813 3.657-5.094-1.344-31.72-8.405c-4.518 8.075-10.335 14.956-16.655 21-11.34 10.844-24.32 19.41-36.156 28.97-23.676 19.116-43.444 40.29-41.595 92.155 1.15 32.252 25.42 45.802 46 44.594 10.29-.604 18.976-4.947 24-12.688 5.024-7.74 7.178-19.855.906-38.5-5.565-16.545 2.843-33.48 15.314-45.156 12.47-11.675 30.34-19.41 48.53-15.344 10.053 2.248 16.206 10.77 19.44 19.156 3.23 8.387 4.823 17.816 6.874 27.5 4.1 19.37 9.476 38.69 25.25 49.97 30.32 21.68 61.273 18.168 74.843 6.593 6.787-5.787 9.753-12.75 8.033-22.03-1.72-9.28-9.1-21.564-26.344-34.564-19.716-14.862-24.02-41.538-22.158-67.06 1.864-25.525 9.933-51 20.313-67.783 6.262-10.125 17.31-13.693 29.344-16.875 12.033-3.18 26.08-5.56 40.53-9.25 28.9-7.378 58.494-19.322 76.28-50.656 8.747-15.406 10.772-27.98 9.345-37.094-1.427-9.113-5.998-15.082-12.5-18.656-13.003-7.148-35.813-4.177-54.656 21-13.622 18.2-39.5 26.57-69.158 28.594-9.042.617-18.498.56-28.156-.125 2.49-1.505 4.96-3.118 7.406-4.813l.094-31.187 18.688.03-.03 15.907c31.506-29.7 55.06-74.37 53.123-119.812 18.06 11.88 30.535 27.127 41.97 47.72 3.354-16.526-.232-32.554-8.094-47.97 16.145 6.698 28.583 17.107 41.437 27.094-4.812-20.107-14.792-33.164-29.594-43.28 16.717 1.346 26.148 5.245 40.813 12.748-10.997-24.936-55.215-50.355-98.314-35.218-16.463-7.804-33.215-11.296-49.375-11.125zm-34.56 54.343c10.942 0 19.81 8.867 19.81 19.812s-8.868 19.844-19.81 19.844c-10.945 0-19.814-8.902-19.814-19.845s8.87-19.813 19.813-19.813zm44.655 33.093c10.943 0 19.813 8.868 19.813 19.813 0 10.943-8.87 19.81-19.813 19.81s-19.813-8.868-19.813-19.81c0-10.945 8.87-19.814 19.813-19.814zm-80.03 40.72l14.905 11.28-20.938 27.656-14.906-11.28 20.938-27.657zm28.06 16.78l17.783 5.688-10.094 31.625-17.813-5.69 10.126-31.624zM42.314 204.562c-16.928 20.222-19.804 44.558-18 72.094l30.375-17.062L58 257.75l3.656.97 137 36.31c5.497-6.524 6.25-11.95 5.03-18.28L66.72 240.437l-3.69-.968-1.936-3.282-18.782-31.625zm283.906 105.282c-2.502 5.156-4.897 11.194-6.97 17.75l95.906 25.437c1.933.03 3.623-.02 5.22-.092l52.5 5.937-51.72-22.75c-.725-.647-1.48-1.31-1.812-1.594l-93.125-24.686z"/></svg>
\ No newline at end of file
diff --git a/resources/img/topicIcons/lesson3.svg b/resources/img/topicIcons/lesson3.svg
new file mode 100644
index 0000000..5494351
--- /dev/null
+++ b/resources/img/topicIcons/lesson3.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#61efff" d="M242.5 21.5c-25.192 3.245-47.28 32.016-47.28 68.78 0 20.28 7.038 38.25 17.5 50.75l10.25 12.25-15.69 2.94c-6.058 1.128-11.42 3.163-16.25 6.093l50.907 29.343.22.125c10.092 5.547 17.387 12.847 21.687 20.72 4.332 7.932 5.865 16.78 2.562 24.75-3.302 7.97-12.133 13.29-21.687 13.344-9.457.054-20.02-3.703-32.345-11.5-.13-.082-.245-.136-.375-.22l-52.313-30.06c-1.536 4.65-2.918 9.51-4.156 14.56-8.238 33.626-9.925 74.615-10.155 110.407H189.5l.625 8.626 11.28 149.78 96.69.002L308.03 342.5l.564-8.72h42c-.013-36.18-.378-77.737-7.844-111.624-4.05-18.384-10.197-34.295-18.813-45.75-8.615-11.454-19.257-18.706-34.593-21.062l-16-2.438L283.5 140.25c10.008-12.437 16.72-30.183 16.72-49.97-.002-39.2-24.78-68.718-52.5-68.718-2.913 0-4.762-.12-5.22-.062zM20.812 85.78v21.626l200.875 115.5.188.094.188.125c10.573 6.74 18.416 8.805 22.53 8.78 4.115-.022 4.113-.724 4.563-1.81.45-1.09.63-4.324-1.72-8.626-2.348-4.304-7.01-9.363-14.436-13.407l-.094-.032-.094-.06-212-122.19zm396.97 187.626l-15.626 28.22-33.656-19.063c.355 8.144.576 16.234.688 24.187l22.906 13.03-15.47 27.94 114.97 15.124-73.813-89.438z"/></svg>
\ No newline at end of file
diff --git a/resources/img/topicIcons/lesson3black.svg b/resources/img/topicIcons/lesson3black.svg
new file mode 100644
index 0000000..a523b59
--- /dev/null
+++ b/resources/img/topicIcons/lesson3black.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="000" d="M242.5 21.5c-25.192 3.245-47.28 32.016-47.28 68.78 0 20.28 7.038 38.25 17.5 50.75l10.25 12.25-15.69 2.94c-6.058 1.128-11.42 3.163-16.25 6.093l50.907 29.343.22.125c10.092 5.547 17.387 12.847 21.687 20.72 4.332 7.932 5.865 16.78 2.562 24.75-3.302 7.97-12.133 13.29-21.687 13.344-9.457.054-20.02-3.703-32.345-11.5-.13-.082-.245-.136-.375-.22l-52.313-30.06c-1.536 4.65-2.918 9.51-4.156 14.56-8.238 33.626-9.925 74.615-10.155 110.407H189.5l.625 8.626 11.28 149.78 96.69.002L308.03 342.5l.564-8.72h42c-.013-36.18-.378-77.737-7.844-111.624-4.05-18.384-10.197-34.295-18.813-45.75-8.615-11.454-19.257-18.706-34.593-21.062l-16-2.438L283.5 140.25c10.008-12.437 16.72-30.183 16.72-49.97-.002-39.2-24.78-68.718-52.5-68.718-2.913 0-4.762-.12-5.22-.062zM20.812 85.78v21.626l200.875 115.5.188.094.188.125c10.573 6.74 18.416 8.805 22.53 8.78 4.115-.022 4.113-.724 4.563-1.81.45-1.09.63-4.324-1.72-8.626-2.348-4.304-7.01-9.363-14.436-13.407l-.094-.032-.094-.06-212-122.19zm396.97 187.626l-15.626 28.22-33.656-19.063c.355 8.144.576 16.234.688 24.187l22.906 13.03-15.47 27.94 114.97 15.124-73.813-89.438z"/></svg>
\ No newline at end of file
diff --git a/resources/img/topicIcons/lesson4.svg b/resources/img/topicIcons/lesson4.svg
new file mode 100644
index 0000000..7c6ab47
--- /dev/null
+++ b/resources/img/topicIcons/lesson4.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 0h512v512H0z" opacity="0"/><path d="M64.746 18l20.988 21a33 33 0 0 1-15.42 55.27l18.48 18.48A57 57 0 0 0 102.706 22l-4.002-4H64.746zM52.395 28.39A56.82 56.82 0 0 0 38.485 119l88 87.94a79.82 79.82 0 0 1 7.51-26.33L55.454 102a32.87 32.87 0 0 1 .06-46.48A29.53 29.53 0 0 1 70.876 47l-18.48-18.61zm82.47 25.78c.254 2.307.4 4.64.44 7a73.06 73.06 0 0 1-3.58 23.83l72.82 72.82a33 33 0 0 1-22.55 56.18 24.19 24.19 0 0 0 7.06 18.77l4 4a57 57 0 0 0 28.49-96l-86.68-86.6zm136.649 24.892l-.92 48.862 23.996.453.92-48.861-23.996-.454zm81.998 11.493l-27.662 45.174 20.468 12.533 27.66-45.174-20.466-12.533zm60.017 53.888l-44.71 20.744 10.1 21.772 44.712-20.744-10.102-21.772zM180.895 156.85a63.6 63.6 0 0 0-16.23 9.92 61.718 61.718 0 0 0-4.06 3.71 64.09 64.09 0 0 0-4.28 85.78 65 65 0 0 0 4.4 4.87l92.15 92.15a64.41 64.41 0 0 0 13.71 10.45 73.23 73.23 0 0 1-6.59-37.35l-82.27-82.27a40.9 40.9 0 0 1-2.76-3 39.461 39.461 0 0 1-2.39-3.25 40 40 0 0 1 5-50.41c.8-.8 1.63-1.55 2.48-2.26a40 40 0 0 1 17.46-8.55 16.78 16.78 0 0 0-4.33-7.5l-12.29-12.29zm71.34 7.78a73.52 73.52 0 0 1 1.25 26l17.39 6.37a12 12 0 1 0 8.27-22.49v.03l-26.91-9.91zm137.71 52.036l-.728 23.988 45.638 1.387.729-23.988-45.639-1.387zm-61.148 10.85a12 12 0 0 0-11.332 16.064l18.37 50.52a40.19 40.19 0 0 1-9.44 42.08l-.09.09a40.41 40.41 0 0 1-7.56 5.94 16.73 16.73 0 0 0 1.91 2.31l15.14 15.14a64.81 64.81 0 0 0 7.48-6.42l.09-.09a64.27 64.27 0 0 0 15-67.28l-18.42-50.57a11.94 11.94 0 0 0-2.47-4.05 12.07 12.07 0 0 0-7.48-3.67 12 12 0 0 0-1.198-.064zm-15.442 51.734a57 57 0 0 0-20.85 93.75l4.29 4.29 81 81a77.08 77.08 0 0 1 3.14-30.7v-.05l-52.29-52.29-19.22-19.22a33 33 0 0 1 11-53.85c0-.1-.06-.21-.1-.31l.25.25c.66-.26 1.33-.5 2-.72a.93.93 0 0 0 0-.22c-.42.14-.85.27-1.27.42-.1-.6-.31-1.31-.54-1.97l-7.41-20.38zm64.13 17.5l-.06.06a79.64 79.64 0 0 1 .73 11.37 94 94 0 0 1-.75 10.29 80.74 80.74 0 0 1-2 10.14l52.29 52.29 30.91 30.91a33 33 0 0 1-15.42 55.29l18.48 18.48a57 57 0 0 0 13.91-90.74l-17.09-17.09-81-81zm45.03 101.6a55 55 0 0 0-13.85 10.19 57.05 57.05 0 0 0-.06 80.55l4.9 4.91h33.915l-21.875-21.88a33 33 0 0 1 15.45-55.29l-18.48-18.48z" stroke="#61efff" fill="#61efff"/></svg>
\ No newline at end of file
diff --git a/resources/img/topicIcons/lesson4black.svg b/resources/img/topicIcons/lesson4black.svg
new file mode 100644
index 0000000..d86ae36
--- /dev/null
+++ b/resources/img/topicIcons/lesson4black.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 0h512v512H0z" opacity="0"/><path d="M64.746 18l20.988 21a33 33 0 0 1-15.42 55.27l18.48 18.48A57 57 0 0 0 102.706 22l-4.002-4H64.746zM52.395 28.39A56.82 56.82 0 0 0 38.485 119l88 87.94a79.82 79.82 0 0 1 7.51-26.33L55.454 102a32.87 32.87 0 0 1 .06-46.48A29.53 29.53 0 0 1 70.876 47l-18.48-18.61zm82.47 25.78c.254 2.307.4 4.64.44 7a73.06 73.06 0 0 1-3.58 23.83l72.82 72.82a33 33 0 0 1-22.55 56.18 24.19 24.19 0 0 0 7.06 18.77l4 4a57 57 0 0 0 28.49-96l-86.68-86.6zm136.649 24.892l-.92 48.862 23.996.453.92-48.861-23.996-.454zm81.998 11.493l-27.662 45.174 20.468 12.533 27.66-45.174-20.466-12.533zm60.017 53.888l-44.71 20.744 10.1 21.772 44.712-20.744-10.102-21.772zM180.895 156.85a63.6 63.6 0 0 0-16.23 9.92 61.718 61.718 0 0 0-4.06 3.71 64.09 64.09 0 0 0-4.28 85.78 65 65 0 0 0 4.4 4.87l92.15 92.15a64.41 64.41 0 0 0 13.71 10.45 73.23 73.23 0 0 1-6.59-37.35l-82.27-82.27a40.9 40.9 0 0 1-2.76-3 39.461 39.461 0 0 1-2.39-3.25 40 40 0 0 1 5-50.41c.8-.8 1.63-1.55 2.48-2.26a40 40 0 0 1 17.46-8.55 16.78 16.78 0 0 0-4.33-7.5l-12.29-12.29zm71.34 7.78a73.52 73.52 0 0 1 1.25 26l17.39 6.37a12 12 0 1 0 8.27-22.49v.03l-26.91-9.91zm137.71 52.036l-.728 23.988 45.638 1.387.729-23.988-45.639-1.387zm-61.148 10.85a12 12 0 0 0-11.332 16.064l18.37 50.52a40.19 40.19 0 0 1-9.44 42.08l-.09.09a40.41 40.41 0 0 1-7.56 5.94 16.73 16.73 0 0 0 1.91 2.31l15.14 15.14a64.81 64.81 0 0 0 7.48-6.42l.09-.09a64.27 64.27 0 0 0 15-67.28l-18.42-50.57a11.94 11.94 0 0 0-2.47-4.05 12.07 12.07 0 0 0-7.48-3.67 12 12 0 0 0-1.198-.064zm-15.442 51.734a57 57 0 0 0-20.85 93.75l4.29 4.29 81 81a77.08 77.08 0 0 1 3.14-30.7v-.05l-52.29-52.29-19.22-19.22a33 33 0 0 1 11-53.85c0-.1-.06-.21-.1-.31l.25.25c.66-.26 1.33-.5 2-.72a.93.93 0 0 0 0-.22c-.42.14-.85.27-1.27.42-.1-.6-.31-1.31-.54-1.97l-7.41-20.38zm64.13 17.5l-.06.06a79.64 79.64 0 0 1 .73 11.37 94 94 0 0 1-.75 10.29 80.74 80.74 0 0 1-2 10.14l52.29 52.29 30.91 30.91a33 33 0 0 1-15.42 55.29l18.48 18.48a57 57 0 0 0 13.91-90.74l-17.09-17.09-81-81zm45.03 101.6a55 55 0 0 0-13.85 10.19 57.05 57.05 0 0 0-.06 80.55l4.9 4.91h33.915l-21.875-21.88a33 33 0 0 1 15.45-55.29l-18.48-18.48z" stroke="#000" fill="#000"/></svg>
\ No newline at end of file
diff --git a/resources/img/topicIcons/lesson5.svg b/resources/img/topicIcons/lesson5.svg
new file mode 100644
index 0000000..3e5c8ed
--- /dev/null
+++ b/resources/img/topicIcons/lesson5.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 0h512v512H0z" fill="#4a90e2" opacity="0"/><path fill="#61efff" d="M250.322 18.494c-25.06 3.26-47.158 32.267-47.158 69.346 0 20.453 7.06 38.57 17.502 51.166l10.123 12.213-15.59 2.932c-13.676 2.574-23.794 9.896-32.272 21.547-8.48 11.65-14.86 27.7-19.326 46.095-8.23 33.9-9.916 75.216-10.143 111.275h44.007l11.883 159.512h96.37l10.514-159.512h41.88c-.013-36.448-.353-78.316-7.81-112.48-4.042-18.524-10.176-34.575-18.777-46.12-8.6-11.543-19.21-18.81-34.482-21.18l-15.912-2.468 10.037-12.59c9.99-12.533 16.7-30.436 16.7-50.392 0-39.537-24.776-69.268-52.352-69.268-2.915 0-4.754-.135-5.196-.078zm178.608 1.078c-31.872-.534-61.166 26.473-71.084 63.49-4.575 17.073-4.83 35.29-.817 51.108-10.96 1.307-20.99 5.173-29.772 10.996 5.563 3.58 10.537 7.906 14.906 12.814 7.998-4.296 16.716-6.28 27.084-5.492l15.816 1.2-6.615-14.415c-5.86-12.764-7.33-33.55-2.554-51.377 8.122-30.308 31.484-49.75 52.75-49.61 1.416.008 2.825.104 4.22.29l.01.002c.263.037 1.817.567 4.44 1.27 23.73 6.36 38.404 37.853 29.168 72.324-4.66 17.392-15.965 34.567-27.02 42.73l-12.954 9.565 14.73 6.502c13.063 5.765 20.835 13.86 25.885 24.348 5.05 10.487 7.12 23.674 6.846 38.674-.5 27.368-8.862 60.148-17.2 91.362l-36.864-9.88-51.232 153.712-42.69.11-1.23 18.69 57.402-.146 49.914-149.758 37.946 10.166 2.42-9.025c9.022-33.677 19.603-71.135 20.22-104.89.31-16.876-1.89-32.994-8.693-47.124-5.016-10.417-12.696-19.57-23.065-26.622 10.814-11.607 19.228-27.125 23.637-43.58 11.288-42.13-6.228-85.52-42.38-95.21l-.003-.003c-1.106-.296-3.297-1.274-6.81-1.744h-.008l-2.838-.38-.295.146c-1.09-.082-2.185-.226-3.27-.244zm-349.32.46c-4.49.056-9.02.665-13.538 1.876-.095.026-.327.068-.44.094l-.575-.574-5.76 2.377h-.002C27.32 36.99 13.11 77.635 23.69 117.12c4.574 17.073 13.46 32.977 24.845 44.67-9.328 6.978-16.34 15.908-21.053 25.99-6.507 13.924-8.973 29.83-9.11 46.6-.27 33.543 8.753 71.01 17.82 104.845l2.42 9.027 40.02-10.727 51.11 149.454 60.46.153-1.39-18.694-45.7-.116-52.446-153.37-38.73 10.378c-8.028-30.892-15.098-63.467-14.875-90.8.122-14.997 2.417-28.276 7.354-38.84 4.937-10.56 12.24-18.566 23.865-24.15l14.298-6.87-12.94-9.176c-11.456-8.122-23.12-25.39-27.896-43.215-8.66-32.315 3.867-62.596 24.653-71.188l.025-.01c.244-.1 1.86-.42 4.486-1.12h.002l.002-.003c2.966-.796 6.005-1.18 9.072-1.175 21.47.027 44.263 19.06 52.344 49.223 4.66 17.392 3.46 37.92-2.035 50.517l-6.436 14.76 16.01-1.734c13.355-1.447 23.684 1.234 32.868 7.016 4.285-4.866 9.108-9.17 14.46-12.742-.73-.536-1.464-1.062-2.212-1.572-9.55-6.512-20.777-10.598-33.283-11.522 3.562-15.46 3.09-33.105-1.318-49.56-9.878-36.864-39.338-63.538-70.77-63.14z"/></svg>
\ No newline at end of file
diff --git a/resources/img/topicIcons/lesson5black.svg b/resources/img/topicIcons/lesson5black.svg
new file mode 100644
index 0000000..6169871
--- /dev/null
+++ b/resources/img/topicIcons/lesson5black.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 0h512v512H0z" fill="#000" opacity="0"/><path fill="#000" d="M250.322 18.494c-25.06 3.26-47.158 32.267-47.158 69.346 0 20.453 7.06 38.57 17.502 51.166l10.123 12.213-15.59 2.932c-13.676 2.574-23.794 9.896-32.272 21.547-8.48 11.65-14.86 27.7-19.326 46.095-8.23 33.9-9.916 75.216-10.143 111.275h44.007l11.883 159.512h96.37l10.514-159.512h41.88c-.013-36.448-.353-78.316-7.81-112.48-4.042-18.524-10.176-34.575-18.777-46.12-8.6-11.543-19.21-18.81-34.482-21.18l-15.912-2.468 10.037-12.59c9.99-12.533 16.7-30.436 16.7-50.392 0-39.537-24.776-69.268-52.352-69.268-2.915 0-4.754-.135-5.196-.078zm178.608 1.078c-31.872-.534-61.166 26.473-71.084 63.49-4.575 17.073-4.83 35.29-.817 51.108-10.96 1.307-20.99 5.173-29.772 10.996 5.563 3.58 10.537 7.906 14.906 12.814 7.998-4.296 16.716-6.28 27.084-5.492l15.816 1.2-6.615-14.415c-5.86-12.764-7.33-33.55-2.554-51.377 8.122-30.308 31.484-49.75 52.75-49.61 1.416.008 2.825.104 4.22.29l.01.002c.263.037 1.817.567 4.44 1.27 23.73 6.36 38.404 37.853 29.168 72.324-4.66 17.392-15.965 34.567-27.02 42.73l-12.954 9.565 14.73 6.502c13.063 5.765 20.835 13.86 25.885 24.348 5.05 10.487 7.12 23.674 6.846 38.674-.5 27.368-8.862 60.148-17.2 91.362l-36.864-9.88-51.232 153.712-42.69.11-1.23 18.69 57.402-.146 49.914-149.758 37.946 10.166 2.42-9.025c9.022-33.677 19.603-71.135 20.22-104.89.31-16.876-1.89-32.994-8.693-47.124-5.016-10.417-12.696-19.57-23.065-26.622 10.814-11.607 19.228-27.125 23.637-43.58 11.288-42.13-6.228-85.52-42.38-95.21l-.003-.003c-1.106-.296-3.297-1.274-6.81-1.744h-.008l-2.838-.38-.295.146c-1.09-.082-2.185-.226-3.27-.244zm-349.32.46c-4.49.056-9.02.665-13.538 1.876-.095.026-.327.068-.44.094l-.575-.574-5.76 2.377h-.002C27.32 36.99 13.11 77.635 23.69 117.12c4.574 17.073 13.46 32.977 24.845 44.67-9.328 6.978-16.34 15.908-21.053 25.99-6.507 13.924-8.973 29.83-9.11 46.6-.27 33.543 8.753 71.01 17.82 104.845l2.42 9.027 40.02-10.727 51.11 149.454 60.46.153-1.39-18.694-45.7-.116-52.446-153.37-38.73 10.378c-8.028-30.892-15.098-63.467-14.875-90.8.122-14.997 2.417-28.276 7.354-38.84 4.937-10.56 12.24-18.566 23.865-24.15l14.298-6.87-12.94-9.176c-11.456-8.122-23.12-25.39-27.896-43.215-8.66-32.315 3.867-62.596 24.653-71.188l.025-.01c.244-.1 1.86-.42 4.486-1.12h.002l.002-.003c2.966-.796 6.005-1.18 9.072-1.175 21.47.027 44.263 19.06 52.344 49.223 4.66 17.392 3.46 37.92-2.035 50.517l-6.436 14.76 16.01-1.734c13.355-1.447 23.684 1.234 32.868 7.016 4.285-4.866 9.108-9.17 14.46-12.742-.73-.536-1.464-1.062-2.212-1.572-9.55-6.512-20.777-10.598-33.283-11.522 3.562-15.46 3.09-33.105-1.318-49.56-9.878-36.864-39.338-63.538-70.77-63.14z"/></svg>
\ No newline at end of file
diff --git a/resources/img/topicIcons/lesson6.svg b/resources/img/topicIcons/lesson6.svg
new file mode 100644
index 0000000..0e5c89a
--- /dev/null
+++ b/resources/img/topicIcons/lesson6.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 512px; width: 512px;"><path d="M0 0h512v512H0z" fill="#4a90e2" opacity="0"/><path fill="#61efff" d="M336 16l9.605 34.55v36.473l59.786 44.84 69.99 35.85 11.015-33.04-88.81-97.118-19.59 4.898L336 16zm-12.492 20.13L270.455 155.5h28.057l29.093-72.732v-42.54l-4.097-4.1zm67.86 21.415l34.88 35.84-41.643-11.637 6.764-24.203zm-52.93 46.603l-24.14 60.35 50.718 126.795 24.77-148.633-51.347-38.512zM89.606 173.5v142h62v-96h146v96h57.707l-56.8-142H89.605zm-18 9l-46 34.5v117.014l30 10V240.77l16-16V182.5zm98 55v14h110v-14h-110zm0 32v14h110v-14h-110zm0 32v14h110v-14h-110zm-80 32v78.51c2.29-.33 4.624-.51 7-.51 7.913 0 15.395 1.912 22.028 5.277l37.012-83.277h-66.04zm209.057 0l9.004 81.04c5.286-1.963 10.992-3.04 16.94-3.04 5.2 0 10.213.83 14.925 2.348l17.857-80.348h-58.725zm-202.057 96c-17.227 0-31 13.773-31 31s13.773 31 31 31c17.228 0 31-13.773 31-31s-13.772-31-31-31zm228 0c-17.227 0-31 13.773-31 31s13.773 31 31 31c17.228 0 31-13.773 31-31s-13.772-31-31-31zm-228 15c8.837 0 16 7.163 16 16s-7.163 16-16 16c-8.836 0-16-7.163-16-16s7.164-16 16-16zm228 0c8.837 0 16 7.163 16 16s-7.163 16-16 16c-8.836 0-16-7.163-16-16s7.164-16 16-16zm-179.847 7c.548 2.92.847 5.926.847 9s-.3 6.08-.847 9h131.695c-.548-2.92-.848-5.926-.848-9s.3-6.08.848-9H144.758z"/></svg>
\ No newline at end of file
diff --git a/resources/img/topicIcons/lesson6black.svg b/resources/img/topicIcons/lesson6black.svg
new file mode 100644
index 0000000..77a5f2b
--- /dev/null
+++ b/resources/img/topicIcons/lesson6black.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 512px; width: 512px;"><path d="M0 0h512v512H0z" fill="#4a90e2" opacity="0"/><path fill="#000" d="M336 16l9.605 34.55v36.473l59.786 44.84 69.99 35.85 11.015-33.04-88.81-97.118-19.59 4.898L336 16zm-12.492 20.13L270.455 155.5h28.057l29.093-72.732v-42.54l-4.097-4.1zm67.86 21.415l34.88 35.84-41.643-11.637 6.764-24.203zm-52.93 46.603l-24.14 60.35 50.718 126.795 24.77-148.633-51.347-38.512zM89.606 173.5v142h62v-96h146v96h57.707l-56.8-142H89.605zm-18 9l-46 34.5v117.014l30 10V240.77l16-16V182.5zm98 55v14h110v-14h-110zm0 32v14h110v-14h-110zm0 32v14h110v-14h-110zm-80 32v78.51c2.29-.33 4.624-.51 7-.51 7.913 0 15.395 1.912 22.028 5.277l37.012-83.277h-66.04zm209.057 0l9.004 81.04c5.286-1.963 10.992-3.04 16.94-3.04 5.2 0 10.213.83 14.925 2.348l17.857-80.348h-58.725zm-202.057 96c-17.227 0-31 13.773-31 31s13.773 31 31 31c17.228 0 31-13.773 31-31s-13.772-31-31-31zm228 0c-17.227 0-31 13.773-31 31s13.773 31 31 31c17.228 0 31-13.773 31-31s-13.772-31-31-31zm-228 15c8.837 0 16 7.163 16 16s-7.163 16-16 16c-8.836 0-16-7.163-16-16s7.164-16 16-16zm228 0c8.837 0 16 7.163 16 16s-7.163 16-16 16c-8.836 0-16-7.163-16-16s7.164-16 16-16zm-179.847 7c.548 2.92.847 5.926.847 9s-.3 6.08-.847 9h131.695c-.548-2.92-.848-5.926-.848-9s.3-6.08.848-9H144.758z"/></svg>
\ No newline at end of file
diff --git a/resources/img/topicIcons/lesson7.svg b/resources/img/topicIcons/lesson7.svg
new file mode 100644
index 0000000..baa82b6
--- /dev/null
+++ b/resources/img/topicIcons/lesson7.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 512px; width: 512px;"><g class="" transform="translate(0,0)" style=""><path d="M146.063 25.656c-30.86.074-60.556 12.052-85.094 36.313C3.285 119 12.986 194.422 63.905 245.343c12.042 12.04 47.124 35.39 78.75 55.437l36.938-36.967c-23.064-18.33-46.265-37.235-54.375-45.344-38.193-38.193-42.604-75.96-13.44-105.126 29.167-29.166 66.482-24.61 105.126 14.03 8.09 8.09 26.932 31.048 45.22 53.907l37.03-37.03c-20.045-31.623-43.335-66.74-55.375-78.78-30.685-26.483-64.868-39.892-97.718-39.814zM309.375 160.47L273.845 196c13.103 16.54 24.525 31.2 29.5 37.656l31.53-31.53s-10.95-18.314-25.5-41.657zm54.125 33.124c-31.963 73.943-90.175 135.65-167.313 169.22 96.67-10.858 166.86-86.763 167.313-169.22zm58.438 0C378.812 293.36 300.23 376.616 196.155 421.906c130.426-14.648 225.167-117.06 225.78-228.312zm72.53 0C437.49 325.414 333.7 435.407 196.19 495.25c172.33-19.356 297.47-154.66 298.28-301.656zM194.345 275.5l-35.438 35.438c23.348 14.552 41.656 25.5 41.656 25.5l31.532-31.532c-6.443-4.963-21.143-16.33-37.75-29.406z" fill="#61efff" fill-opacity="1"/></g></svg>
\ No newline at end of file
diff --git a/resources/img/topicIcons/lesson7black.svg b/resources/img/topicIcons/lesson7black.svg
new file mode 100644
index 0000000..d241233
--- /dev/null
+++ b/resources/img/topicIcons/lesson7black.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 512px; width: 512px;"><g class="" transform="translate(0,0)" style=""><path d="M146.063 25.656c-30.86.074-60.556 12.052-85.094 36.313C3.285 119 12.986 194.422 63.905 245.343c12.042 12.04 47.124 35.39 78.75 55.437l36.938-36.967c-23.064-18.33-46.265-37.235-54.375-45.344-38.193-38.193-42.604-75.96-13.44-105.126 29.167-29.166 66.482-24.61 105.126 14.03 8.09 8.09 26.932 31.048 45.22 53.907l37.03-37.03c-20.045-31.623-43.335-66.74-55.375-78.78-30.685-26.483-64.868-39.892-97.718-39.814zM309.375 160.47L273.845 196c13.103 16.54 24.525 31.2 29.5 37.656l31.53-31.53s-10.95-18.314-25.5-41.657zm54.125 33.124c-31.963 73.943-90.175 135.65-167.313 169.22 96.67-10.858 166.86-86.763 167.313-169.22zm58.438 0C378.812 293.36 300.23 376.616 196.155 421.906c130.426-14.648 225.167-117.06 225.78-228.312zm72.53 0C437.49 325.414 333.7 435.407 196.19 495.25c172.33-19.356 297.47-154.66 298.28-301.656zM194.345 275.5l-35.438 35.438c23.348 14.552 41.656 25.5 41.656 25.5l31.532-31.532c-6.443-4.963-21.143-16.33-37.75-29.406z" fill="#000" fill-opacity="1"/></g></svg>
\ No newline at end of file
diff --git a/resources/img/topicIcons/lesson8.svg b/resources/img/topicIcons/lesson8.svg
new file mode 100644
index 0000000..2dd6dc5
--- /dev/null
+++ b/resources/img/topicIcons/lesson8.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 512px; width: 512px;"><g class="" transform="translate(0,0)" style=""><path d="M256 29.816l-231 154v106.368l231-154 231 154V183.816zm0 128.043L105 259.783v90.283l151-101.925 151 101.925v-90.283zm0 112l-87 58.725v67.6l87-58 87 58v-67.6zm0 89.957l-87 58v64.368l87-58 87 58v-64.368z" fill="#61efff" fill-opacity="1"/></g></svg>
\ No newline at end of file
diff --git a/resources/img/topicIcons/lesson8black.svg b/resources/img/topicIcons/lesson8black.svg
new file mode 100644
index 0000000..a78132c
--- /dev/null
+++ b/resources/img/topicIcons/lesson8black.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 512px; width: 512px;"><g class="" transform="translate(0,0)" style=""><path d="M256 29.816l-231 154v106.368l231-154 231 154V183.816zm0 128.043L105 259.783v90.283l151-101.925 151 101.925v-90.283zm0 112l-87 58.725v67.6l87-58 87 58v-67.6zm0 89.957l-87 58v64.368l87-58 87 58v-64.368z" fill="#000" fill-opacity="1"/></g></svg>
\ No newline at end of file
diff --git a/resources/img/topicIcons/lesson9.svg b/resources/img/topicIcons/lesson9.svg
new file mode 100644
index 0000000..336ac16
--- /dev/null
+++ b/resources/img/topicIcons/lesson9.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#61efff" d="M224 27.027l14.037 110.54 14.807-103.032L224 27.027zm112.71 21.127l-61.58 92.37 88.4-70.518-26.82-21.852zM125.15 69.012V98.81l77.475 41.715-77.475-71.513zM319 143.088C364.826 255.36 348.206 384 319 493h174V143.088H319zm-78.598 11.463c-.567-.006-1.14 0-1.718.02-12.517.413-26.47 6.774-37.893 17.274-15.774 14.527-23.843 34.25-20.167 49.3-45 12.35-76.594 62.683-81.64 102.18-3.968 37.166 15.322 61.415.558 85.432L40.77 447.54l-20.458 9.997L55.33 496.19h15.686l-17.27-32.17 72.906-38.573c14.698-8.6 16.065-23.74 19.28-41.092 16.147 11.876 33.577 23.202 47.56 32.48-6.36 27.685-38.544 52.854-58.512 79.356h77.827l-2.905-5.21s-39.03-6.813-43.77-7.498c-.15.01-.29.005-.407-.02-.327-.076-.082-.05.408.02 8.143-.477 65.126-51.946 63.53-64.54-13.498-23.115-34.03-44.835-54.974-66.276 1.845-25.475 2.3-52.734 40.75-75.596l110.044-4.566c-.94-22.375-4.53-59.816-10.35-66.018-9.702 7.54-10.872 30.843-11.628 48.637l-79.463-2.283c-8.445-.63-14.943-7.846-21.15-12.822 13.6 1.556 30.02-4.91 43.218-17.024 20.673-19.002 27.286-45.857 14.77-59.982-4.795-5.412-11.97-8.365-20.478-8.46z"/></svg>
\ No newline at end of file
diff --git a/resources/img/topicIcons/lesson9black.svg b/resources/img/topicIcons/lesson9black.svg
new file mode 100644
index 0000000..bfb8c76
--- /dev/null
+++ b/resources/img/topicIcons/lesson9black.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M224 27.027l14.037 110.54 14.807-103.032L224 27.027zm112.71 21.127l-61.58 92.37 88.4-70.518-26.82-21.852zM125.15 69.012V98.81l77.475 41.715-77.475-71.513zM319 143.088C364.826 255.36 348.206 384 319 493h174V143.088H319zm-78.598 11.463c-.567-.006-1.14 0-1.718.02-12.517.413-26.47 6.774-37.893 17.274-15.774 14.527-23.843 34.25-20.167 49.3-45 12.35-76.594 62.683-81.64 102.18-3.968 37.166 15.322 61.415.558 85.432L40.77 447.54l-20.458 9.997L55.33 496.19h15.686l-17.27-32.17 72.906-38.573c14.698-8.6 16.065-23.74 19.28-41.092 16.147 11.876 33.577 23.202 47.56 32.48-6.36 27.685-38.544 52.854-58.512 79.356h77.827l-2.905-5.21s-39.03-6.813-43.77-7.498c-.15.01-.29.005-.407-.02-.327-.076-.082-.05.408.02 8.143-.477 65.126-51.946 63.53-64.54-13.498-23.115-34.03-44.835-54.974-66.276 1.845-25.475 2.3-52.734 40.75-75.596l110.044-4.566c-.94-22.375-4.53-59.816-10.35-66.018-9.702 7.54-10.872 30.843-11.628 48.637l-79.463-2.283c-8.445-.63-14.943-7.846-21.15-12.822 13.6 1.556 30.02-4.91 43.218-17.024 20.673-19.002 27.286-45.857 14.77-59.982-4.795-5.412-11.97-8.365-20.478-8.46z"/></svg>
\ No newline at end of file
diff --git a/resources/img/x.png b/resources/img/x.png
new file mode 100644
index 0000000..0329f79
Binary files /dev/null and b/resources/img/x.png differ
diff --git a/resources/questions.json b/resources/questions.json
new file mode 100644
index 0000000..a8ca2cb
--- /dev/null
+++ b/resources/questions.json
@@ -0,0 +1,123 @@
+[
+        {
+            "_comment": "Vidlice",
+            "title" : "Vidlici na obrázku se říká:", 
+            "options" : [
+                "Centrální Vidlice",
+                "Alapinův gambit",
+                "Rubensteinova past",
+                "En passant"
+            ]
+        },
+        {
+            "_comment": "Přišpendlení",
+            "title" : "Nejlepší tah na této šachovnici, který povede k matu v následujícím tahu je: ",
+            "options" : [
+                "Dxg6+",
+                "SxF6",
+                "SxC6",
+                "SxF7+"
+            ]
+        },
+        {
+            "_comment": "Špíz",
+            "title" : "V této pozici, ze hry Garry Kasparov proti Stefano Tatai 1986.11.29, to byl právě Garry Kasparov využil špízování, aby hru rozhodl a donutil soupeře rezignovat. Která z těchto sérií tahů to byla?",
+            "options" : [
+                "Dg7+, Kxd6, Df8+",
+                "Je4, Sf5, Df7+",
+                "Dxg6, Kxd6, Dxf6+",
+                "Jxc4, Da2+, Kg3"
+            ]
+        },
+        {
+            "_comment": "Přetížení",
+            "title" : "Která z figurek bílého hráče je přetížena?",
+            "options" : [
+                "Jezdec",
+                "Věž",
+                "Královna",
+                "Pěšec"
+            ]
+        },
+        {
+            "_comment": "Mezi-tah",
+            "title" : "V této pozici, by leckdo bez rozmyslu vyměnil střelce za věž, na šachovnici je však mnohem lepší mezi-tah, který?",
+            "options" : [
+                "Db5",
+                "Vxc5",
+                "Dd2",
+                "Vd2"
+            ]
+        },
+        {
+            "_comment": "Danajský dar",
+            "title" : "Danajský dar často vyžaduje vysokou přesnost při dalším postupu, najděte nejlepší tah na této šachovnici, který povede k matu do pár tahů: ",
+            "options" : [
+                "Dh5",
+                "Jg5",
+                "Sd3",
+                "f4"
+            ]
+        },
+        {
+            "_comment": "Přitažlivost",
+            "title" : "Který tah z naší figurky udělá neodolatelnou a tím odstartuje cestu k Matu ve 3 tazích?",
+            "options" : [
+                "Vxg7+",
+                "Vxf7",
+                "Dh7+",
+                "SxF7+"
+            ]
+        },
+        {
+            "_comment": "Povýšení ?",
+            "title" : "Na kterou figurku je ne nejlepší povýšit pěšce v příštím tahu?",
+            "options" : [
+                "Jezdec",
+                "Královna",
+                "Věž",
+                "Střelec"
+            ]
+        },
+        {
+            "_comment": "Cesta vpřed",
+            "title" : "Jediný tah, který zaručeně vede k výhře je:",
+            "options" : [
+                "Kd4",
+                "Kf5",
+                "Kd3",
+                "Kf4"
+            ]
+        },
+        {
+            "_comment": "Věžová koncovka",
+            "title" : "Pozice na obrázku se obecně považuje za:",
+            "options" : [
+                "Remízu",
+                "Výhru Bílého",
+                "Výhru Černého",
+                "Velice otevřenou"
+            ]
+        },
+        {
+            "_comment": "Dobývání",
+            "title" : "Humorný Šach Mat, z této pozice po vynucené sekvenci tahů Rh1+ 2.Kxh1 Rh8+ 3.Kg1 Rh1+ 4.Kxh1 Qh8+ 5.Kg1 Qh2# nazýváme:",
+            "options" : [
+                "Damiánův mat",
+                "Bodenův mat",
+                "Mat Pillsburyho",
+                "Anderssenův"
+            ]
+        },
+        {
+            "_comment": "Věž je někdy málo",
+            "title" : "V pozici Saavedry se NEsetkáme s kterým z následujících konceptů?",
+            "options" : [
+                "Mezitah",
+                "Povýšení na figurku s nižsí hodnotou než dáma",
+                "Vazba",
+                "Špíz angl. [Skewer];"
+            ]
+        }
+]
+
diff --git a/resources/video/lq0.webm b/resources/video/lq0.webm
new file mode 100644
index 0000000..788abb9
Binary files /dev/null and b/resources/video/lq0.webm differ
diff --git a/resources/video/lq1.webm b/resources/video/lq1.webm
new file mode 100644
index 0000000..ee6b305
Binary files /dev/null and b/resources/video/lq1.webm differ
diff --git a/resources/video/lq10.webm b/resources/video/lq10.webm
new file mode 100644
index 0000000..9ffcaea
Binary files /dev/null and b/resources/video/lq10.webm differ
diff --git a/resources/video/lq11.webm b/resources/video/lq11.webm
new file mode 100644
index 0000000..2462ce3
Binary files /dev/null and b/resources/video/lq11.webm differ
diff --git a/resources/video/lq2.webm b/resources/video/lq2.webm
new file mode 100644
index 0000000..e159e0c
Binary files /dev/null and b/resources/video/lq2.webm differ
diff --git a/resources/video/lq3.webm b/resources/video/lq3.webm
new file mode 100644
index 0000000..b595db0
Binary files /dev/null and b/resources/video/lq3.webm differ
diff --git a/resources/video/lq4.webm b/resources/video/lq4.webm
new file mode 100644
index 0000000..d4cb6b6
Binary files /dev/null and b/resources/video/lq4.webm differ
diff --git a/resources/video/lq5.webm b/resources/video/lq5.webm
new file mode 100644
index 0000000..8e2675a
Binary files /dev/null and b/resources/video/lq5.webm differ
diff --git a/resources/video/lq6.webm b/resources/video/lq6.webm
new file mode 100644
index 0000000..7078244
Binary files /dev/null and b/resources/video/lq6.webm differ
diff --git a/resources/video/lq7.webm b/resources/video/lq7.webm
new file mode 100644
index 0000000..1fce882
Binary files /dev/null and b/resources/video/lq7.webm differ
diff --git a/resources/video/lq8.webm b/resources/video/lq8.webm
new file mode 100644
index 0000000..66bcab9
Binary files /dev/null and b/resources/video/lq8.webm differ
diff --git a/resources/video/lq9.webm b/resources/video/lq9.webm
new file mode 100644
index 0000000..5ebf236
Binary files /dev/null and b/resources/video/lq9.webm differ
diff --git a/resources/video/placeHolder0.webm b/resources/video/placeHolder0.webm
new file mode 100755
index 0000000..34edc3f
Binary files /dev/null and b/resources/video/placeHolder0.webm differ
diff --git a/route.php b/route.php
new file mode 100644
index 0000000..6af099a
--- /dev/null
+++ b/route.php
@@ -0,0 +1,32 @@
+<?php
+class Router {
+        public $returned = false;
+
+        function route($method, $url, $filename) {
+                $methods = ['GET', 'POST'];
+                if(in_array($method, $methods)) {
+                        if($_SERVER['REQUEST_METHOD'] == $method) {
+                                if ($_SERVER['REQUEST_URI'] == $url) {
+                                        require_once("./pages/$filename/$filename.php");
+                                        $this->returned = true;
+                                        return;
+                                }
+                        }
+                }
+        }
+
+        function __destruct() {
+                if($_SERVER['REQUEST_METHOD'] == 'GET') {
+                        if(!$this->returned){
+                                $url = explode("/", $_SERVER['REQUEST_URI']);
+                                $url = $url[count($url)-1];
+
+                                if (file_exists("./pages/$url/$url.php")) {
+                                        require_once("./pages/$url/$url.php");
+                                } else {
+                                        require_once("./pages/errors/404.php");
+                                }
+                        }
+                }
+        }
+}
\ No newline at end of file