From 59d4ef996613db5c037d83254cfc6067b0316653 Mon Sep 17 00:00:00 2001
From: skjaro <jaroslav.drzik@gmail.com>
Date: Mon, 17 Jan 2022 16:40:13 +0100
Subject: [PATCH] First nett3.0 webpage version

---
 app/model/Database/Entity/DictType.php        |  14 +-
 .../Repository/AbstractRepository.php         |  37 ++
 app/modules/Base/templates/@layout.latte      |  75 ++-
 app/modules/Front/Home/HomePresenter.php      |   2 +-
 .../Front/Home/templates/alphabet.latte       | 205 +++++++
 .../Front/Home/templates/default.latte        |  77 ++-
 app/modules/Front/Home/templates/info.latte   |  26 +
 .../Front/Home/templates/interactive.latte    | 107 ++++
 app/modules/Front/Home/templates/ipa.latte    |  68 +++
 app/modules/Front/templates/@layout.latte     |  92 ++--
 www/assets/css/style.css                      | 510 ++++++++++++++++++
 www/assets/images/sound.png                   | Bin 0 -> 1269 bytes
 www/assets/images/spinner.gif                 | Bin 0 -> 737 bytes
 www/assets/images/sprites.png                 | Bin 0 -> 1774 bytes
 14 files changed, 1149 insertions(+), 64 deletions(-)
 create mode 100644 app/modules/Front/Home/templates/alphabet.latte
 create mode 100644 app/modules/Front/Home/templates/info.latte
 create mode 100644 app/modules/Front/Home/templates/interactive.latte
 create mode 100644 app/modules/Front/Home/templates/ipa.latte
 create mode 100644 www/assets/css/style.css
 create mode 100644 www/assets/images/sound.png
 create mode 100644 www/assets/images/spinner.gif
 create mode 100644 www/assets/images/sprites.png

diff --git a/app/model/Database/Entity/DictType.php b/app/model/Database/Entity/DictType.php
index 61789e8..4c6ca39 100644
--- a/app/model/Database/Entity/DictType.php
+++ b/app/model/Database/Entity/DictType.php
@@ -1,17 +1,15 @@
-<?php
+<?php declare(strict_types = 1);
 
 namespace App\Model\Database\Entity;
 
-use App\Model\Database\Entity\Attributes\TCreatedAt;
-use App\Model\Database\Entity\Attributes\TId;
-use App\Model\Database\Entity\Attributes\TUpdatedAt;
-use App\Model\Exception\Logic\InvalidArgumentException;
-use App\Model\Security\Identity;
-use App\Model\Utils\DateTime;
 use Doctrine\ORM\Mapping as ORM;
+use App\Model\Database\Entity\Attributes\TId;
+use Doctrine\Common\Collections\ArrayCollection;
+use Doctrine\Common\Collections\Collection;
 
 /**
- * @ORM\Entity
+ * @ORM\Entity(repositoryClass="App\Model\Database\Repository\DictTypeRepository")
+ * @ORM\HasLifecycleCallbacks
  */
 class DictType extends AbstractEntity 
 {
diff --git a/app/model/Database/Repository/AbstractRepository.php b/app/model/Database/Repository/AbstractRepository.php
index ac8073c..1518a80 100644
--- a/app/model/Database/Repository/AbstractRepository.php
+++ b/app/model/Database/Repository/AbstractRepository.php
@@ -46,4 +46,41 @@ abstract class AbstractRepository extends EntityRepository
 		}, $qb->getQuery()->getArrayResult());
 	}
 
+	/**
+	 * Fetches all records and returns an associative array indexed by key
+	 *
+	 * @param array $criteria
+	 * @param string $key
+	 *
+	 * @throws \Exception|QueryException
+	 * @return array
+	 */
+	public function findAssoc(array $criteria = [],String $key = NULL)
+	{
+		if (!is_array($criteria)) {
+			$key = $criteria;
+			$criteria = [];
+		}
+
+		$qb = $this->createQueryBuilder('e')
+			->resetDQLPart('from')->from($this->getEntityName(), 'e', 'e.' . $key);
+		
+		foreach ($criteria as $k => $v) {
+			if (is_array($v)) {
+				$qb->andWhere(sprintf('e.%s IN(:%s)', $k, $k))->setParameter($k, array_values($v));
+			} else {
+				$qb->andWhere(sprintf('e.%s = :%s', $k, $k))->setParameter($k, $v);
+			}
+		}
+		
+		try {
+			return $qb->getQuery()->getResult();
+
+		} catch (\Exception $e) {
+			throw $this->handleException($e, $qb);
+		}
+	}
+
+
+
 }
diff --git a/app/modules/Base/templates/@layout.latte b/app/modules/Base/templates/@layout.latte
index 6e55eaa..1af88ec 100644
--- a/app/modules/Base/templates/@layout.latte
+++ b/app/modules/Base/templates/@layout.latte
@@ -1,28 +1,65 @@
+{**
+ * @param string   $basePath web base path
+ * @param array    $flashes  flash messages
+ *}
 <!DOCTYPE html>
 <html>
 <head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-	<meta http-equiv="X-UA-Compatible" content="ie=edge">
-	<link rel="shortcut icon" href="{$basePath}/favicon.ico">
+	<meta charset="utf-8">
 
-	<!-- Seo -->
-	<title>{block #title|stripHtml|trim}Webapp Skeleton{/} | Contributte</title>
+	<title>{ifset title}{include title|striptags} | {/ifset}Nette Sandbox</title>
 
-	<!-- Meta -->
-	<meta name="description" n:ifset="#description" content="{include #description}">
-	<meta name="keywords" n:ifset="#keywords" content="{include #keywords}">
-	<meta name="robots" content="index,follow">
-	<meta name="googlebot" content="snippet,archive">
-	<meta name="author" content="f3l1x">
-
-	{block #head}{/}
+	<link rel="stylesheet" href="{$basePath}/css/style.css">
+	<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
+	<meta name="viewport" content="width=device-width">
+	<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
+	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
+	{block head}{/block}
 </head>
+
 <body>
-{block #main}
-	<div class="container">
-		{include #content}
-	</div>
-{/}
+
+<header>
+    <hgroup>
+        <h1>My Dictionary</h1>
+        <h2>multilanguage dictionary with pronunciations</h2>
+    </hgroup>
+    <nav>
+        <ul>
+            <li><a href="{link Homepage:default}">Jednoduchý</a></li>
+            <li><a href="{link Homepage:ipa}">s výslovnosťou</a></li>
+            <li><a href="{link Homepage:interactive}">Interaktívny</a></li>
+            <li><a href="{link Homepage:alphabet}">Abeceda</a></li>
+        </ul>
+    </nav>
+    <a href="#" title="Jaro's Solutions homepage"><img src="logo.gif" alt="Jaro's Solutions" /></a>
+</header>
+
+<article>
+	<h1 n:ifset="$title">{$title}</h1>
+
+	<div n:foreach="$flashes as $flash" n:class="flash, $flash->type">{$flash->message}</div>
+
+	{include content}
+</article>
+
+<section>
+	<h1>Slovníky</h1>
+    <ul>
+	{foreach $translations as $tr}
+        	<li><a href="{link Homepage:select $tr["slug"] }">{$tr["lang"]}</a></li>
+	{/foreach}
+    </ul>
+</section>
+
+<footer>
+	<p>&copy; 2016 Jaro's Solutions - <a href="#">Sitemap</a> </p>
+</footer>
+
+	{block scripts}
+	<script src="https://nette.github.io/resources/js/netteForms.min.js"></script>
+	<script src="{$basePath}/js/nette.ajax.js"></script>
+	<script src="{$basePath}/js/main.js"></script>
+	{/block}
 </body>
 </html>
diff --git a/app/modules/Front/Home/HomePresenter.php b/app/modules/Front/Home/HomePresenter.php
index 3de153d..7845b7e 100644
--- a/app/modules/Front/Home/HomePresenter.php
+++ b/app/modules/Front/Home/HomePresenter.php
@@ -154,7 +154,7 @@ final class HomePresenter extends BaseFrontPresenter
 
     public function beforeRender()
     {
-	    $dicttypes = $this->em->getDictTypeRepository()->findPairs('id');
+	    $dicttypes = $this->em->getDictTypeRepository()->findAssoc([],'id');
 	    $this->template->dicttypes = $dicttypes;
 	    $this->template->dictionaries = $this->dictionaries;
 	    $this->template->translations = $this->translations;
diff --git a/app/modules/Front/Home/templates/alphabet.latte b/app/modules/Front/Home/templates/alphabet.latte
new file mode 100644
index 0000000..b0fdef1
--- /dev/null
+++ b/app/modules/Front/Home/templates/alphabet.latte
@@ -0,0 +1,205 @@
+{layout ../@layout.latte}
+
+{block content}
+<table class="trans">
+<tbody><tr>
+<th>písmeno</th>
+<th>PSP</th>
+<th>alt.</th>
+<th>IPA</th>
+</tr>
+<tr>
+<td><a href="/wiki/B" title="B">B</a> b</td>
+<td>bé</td>
+<td>&nbsp;</td>
+<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/b/</span></td>
+</tr>
+<tr>
+<td><a href="/wiki/C" title="C">C</a> c</td>
+<td>cé</td>
+<td>&nbsp;</td>
+<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/t͡s/</span></td>
+</tr>
+<tr>
+<td><a href="/wiki/%C4%8C" title="Č">Č</a> č</td>
+<td>čé</td>
+<td>&nbsp;</td>
+<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/t͡ʃ/</span></td>
+</tr>
+<tr>
+<td><a href="/wiki/D" title="D">D</a> d</td>
+<td>dé</td>
+<td>&nbsp;</td>
+<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/d/</span></td>
+</tr>
+<tr>
+<td><a href="/wiki/%C4%8E" title="Ď">Ď</a> ď</td>
+<td>ďé</td>
+<td>mäkké dé</td>
+<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/ɟ/</span></td>
+</tr>
+<tr>
+<td>DZ dz</td>
+<td>dzé</td>
+<td>&nbsp;</td>
+<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/d͡z/</span></td>
+</tr>
+<tr>
+<td>DŽ dž</td>
+<td>džé</td>
+<td>&nbsp;</td>
+<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/d͡ʒ/</span></td>
+</tr>
+<tr>
+<td><a href="/wiki/F" title="F">F</a> f</td>
+<td>ef</td>
+<td>&nbsp;</td>
+<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/f/</span></td>
+</tr>
+<tr>
+<td><a href="/wiki/G" title="G">G</a> g</td>
+<td>gé</td>
+<td>&nbsp;</td>
+<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/ɡ/</span></td>
+</tr>
+<tr>
+<td><a href="/wiki/H" title="H">H</a> h</td>
+<td>há</td>
+<td>&nbsp;</td>
+<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/ɦ/</span></td>
+</tr>
+<tr>
+<td><a href="/wiki/CH" class="mw-disambig" title="CH">CH</a> ch</td>
+<td>chá</td>
+<td>&nbsp;</td>
+<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/x/</span></td>
+</tr>
+<tr>
+<td><a href="/wiki/J" title="J">J</a> j</td>
+<td>jé</td>
+<td>&nbsp;</td>
+<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/j/</span></td>
+</tr>
+<tr>
+<td><a href="/wiki/K" title="K">K</a> k</td>
+<td>ká</td>
+<td>&nbsp;</td>
+<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/k/</span></td>
+</tr>
+<tr>
+<td><a href="/wiki/L" title="L">L</a> l</td>
+<td>el</td>
+<td>&nbsp;</td>
+<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/l/</span></td>
+</tr>
+<tr>
+<td><a href="/wiki/%C4%B9" title="Ĺ">Ĺ</a> ĺ</td>
+<td>dlhé el</td>
+<td>&nbsp;</td>
+<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/lː/</span></td>
+</tr>
+<tr>
+<td><a href="/wiki/%C4%BD" title="Ľ">Ľ</a> ľ</td>
+<td>eľ</td>
+<td>mäkké el</td>
+<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/ʎ/</span></td>
+</tr>
+<tr>
+<td><a href="/wiki/M" title="M">M</a> m</td>
+<td>em</td>
+<td>&nbsp;</td>
+<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/m/</span></td>
+</tr>
+<tr>
+<td><a href="/wiki/N" title="N">N</a> n</td>
+<td>en</td>
+<td>&nbsp;</td>
+<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/n/</span></td>
+</tr>
+<tr>
+<td><a href="/wiki/%C5%87" title="Ň">Ň</a> ň</td>
+<td>eň</td>
+<td>mäkké en</td>
+<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/ɲ/</span></td>
+</tr>
+<tr>
+<td><a href="/wiki/P" title="P">P</a> p</td>
+<td>pé</td>
+<td>&nbsp;</td>
+<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/p/</span></td>
+</tr>
+<tr>
+<td><a href="/wiki/Q" title="Q">Q</a> q</td>
+<td>kvé</td>
+<td>&nbsp;</td>
+<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/kv/</span></td>
+</tr>
+<tr>
+<td><a href="/wiki/R" title="R">R</a> r</td>
+<td>er</td>
+<td>&nbsp;</td>
+<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/r/</span></td>
+</tr>
+<tr>
+<td><a href="/wiki/%C5%94" title="Ŕ">Ŕ</a> ŕ</td>
+<td>dlhé er</td>
+<td>&nbsp;</td>
+<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/rː/</span></td>
+</tr>
+<tr>
+<td><a href="/wiki/S" title="S">S</a> s</td>
+<td>es</td>
+<td>&nbsp;</td>
+<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/s/</span></td>
+</tr>
+<tr>
+<td><a href="/wiki/%C5%A0" title="Š">Š</a> š</td>
+<td>eš</td>
+<td>&nbsp;</td>
+<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/ʃ/</span></td>
+</tr>
+<tr>
+<td><a href="/wiki/T" title="T">T</a> t</td>
+<td>té</td>
+<td>&nbsp;</td>
+<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/t/</span></td>
+</tr>
+<tr>
+<td><a href="/wiki/%C5%A4" title="Ť">Ť</a> ť</td>
+<td>ťé</td>
+<td>mäkké té</td>
+<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/c/</span></td>
+</tr>
+<tr>
+<td><a href="/wiki/V" title="V">V</a> v</td>
+<td>vé</td>
+<td>&nbsp;</td>
+<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/v/</span></td>
+</tr>
+<tr>
+<td><a href="/wiki/W" title="W">W</a> w</td>
+<td>dvojité vé</td>
+<td>&nbsp;</td>
+<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/v/</span></td>
+</tr>
+<tr>
+<td><a href="/wiki/X" title="X">X</a> x</td>
+<td>iks</td>
+<td>&nbsp;</td>
+<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/ks/</span></td>
+</tr>
+<tr>
+<td><a href="/wiki/Z" title="Z">Z</a> z</td>
+<td>zé</td>
+<td>zet</td>
+<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/z/</span></td>
+</tr>
+<tr>
+<td><a href="/wiki/%C5%BD" title="Ž">Ž</a> ž</td>
+<td>žé</td>
+<td>žet</td>
+<td><span title="Zápis v Medzinárodnej fonetickej abecede (IPA)" class="IPA">/ʒ/</span></td>
+</tr>
+</tbody>
+</table>
+{/block}
diff --git a/app/modules/Front/Home/templates/default.latte b/app/modules/Front/Home/templates/default.latte
index b2b6471..3c7d75c 100644
--- a/app/modules/Front/Home/templates/default.latte
+++ b/app/modules/Front/Home/templates/default.latte
@@ -1,2 +1,75 @@
-{block #content}
-Welcome
+{block head}
+<script>
+$( document ).ready(function() {
+    console.log( "ready!" );
+    $("tr[id*='term']").on("click",function () { 
+    	var id = this.id + '-info';
+	if ($('#' + id).length == 0) {
+		$(this).after('<tr id=' + '"' + id + '"></tr>');
+    		console.log('Append ' + id);
+		$.ajax({
+   			url: $(this).attr('data-url'),
+			context: $('#' + id)
+		}).done(function (response) {
+			 console.log(response);
+			 $(this).html("<td colspan='4'>" + response + "</td>");
+			 $("img.ajax").on("click", function (event) {
+			    event.preventDefault();
+			    id = $(this).attr("data-sound-id");
+			    var audioElement = document.createElement('audio');
+			    var link = {link Home:play 1234567};
+			    audioElement.setAttribute('src', link.replace('1234567',id));
+			    console.log("Play sound:" + id);
+			    audioElement.play();
+			});
+		});
+
+	}
+    });
+});
+</script>
+{/block}
+{block content}
+<div id="content">
+	<p>Zadaj vyhladavany vyraz.</p>
+
+	<div class="boxes">
+	{form searchForm}
+	<table>
+		<tr>
+			<th>{label string /}</th><th>{label translation /}</th><th>{label clen /}</th>
+		</tr>
+		<tr>
+			<td>{input string}</td><td>{input translation}</td><td>{input clen}</td><td>{input search}</td>
+		</tr>
+	</table>
+
+
+	{ifset $result}
+	{dump $result}
+		<table class="e-table" n:snippet="termsComnainer">	
+		<tr>
+			<th>Vyraz</th><th>Preklad</th><th>Typ</th><th>Member</th>
+		</tr>
+		{foreach $result as $term}
+{dump $term}
+		<tr data-url="{link getInfo! $term->id}" n:snippet="term-$term->id">
+		{if $translation->direction == 1}
+			<td>{$term->string1}{if $term->suffix1}&nbsp;{$term->suffix1->text}{/if}</td>
+			<td>{$term->string2}{if $term->suffix2}&nbsp;{$term->suffix2->text}{/if}</td>
+		{else}
+			<td>{$term->string2}{if $term->suffix2}&nbsp;{$term->suffix2->text}{/if}</td>
+			<td>{$term->string1}{if $term->suffix1}&nbsp;{$term->suffix1->text}{/if}</td>
+		{/if}
+			<td n:attr="title => $term->type ? $dicttypes[$term->type->id]->fullName : null">{$term->type ? $dicttypes[$term->type->id]->shortName : ''}</td>
+			<td>{$term->member}</td>
+
+		</tr>
+		{/foreach}
+		</table>
+		{control paginator}
+	{/ifset}
+	{/form}
+	</div>
+{/block}
+
diff --git a/app/modules/Front/Home/templates/info.latte b/app/modules/Front/Home/templates/info.latte
new file mode 100644
index 0000000..2da4e9a
--- /dev/null
+++ b/app/modules/Front/Home/templates/info.latte
@@ -0,0 +1,26 @@
+<table class="trans1">	
+{var $last = ''}
+{foreach $result as $term}
+{if ($last != $term->string1 && $last != '') }
+				</div>
+			</td>
+		</tr>
+{/if}
+{if $last != $term->string1}
+		<tr>
+			<td>
+				<span class="term">{$term->string1}</span>&nbsp;
+				{foreach $term->pronunciations as $pron}
+					<span class="ipa-{$pron->type->id}">[{$pron->ipa}]</span>
+					<img n:if="$pron->filename" class="sound-ipa ajax" src="/images/sound.png" alt="Prehraj" style="vertical-align: middle;" data-sound-id="{$pron->id}" ></image>
+				{/foreach}
+				<br/>
+				<div style="margin-left: 20px;" class="translations">
+{/if}
+{$last == $term->string1 && trim($last2) != '' && trim($term->string2) != ''  ? ', ' : ''}{$term->string2}{foreach $term->flags as $flag} <span class="flag">{$termFlags[$flag]->code}</span>{/foreach}{ifset $term->type->id}<span class="type"> ({$dicttypes[$term->type->id]->fullName|lower})</span>{/ifset}{**
+	Nutne kvoli newline
+**}
+{? $last = $term->string1}
+{? $last2 = $term->string2}
+{/foreach}
+</table>
diff --git a/app/modules/Front/Home/templates/interactive.latte b/app/modules/Front/Home/templates/interactive.latte
new file mode 100644
index 0000000..8b0cbc8
--- /dev/null
+++ b/app/modules/Front/Home/templates/interactive.latte
@@ -0,0 +1,107 @@
+{block title}Slovnik{/block}
+{layout ../@layout.latte}
+{block head}
+<script>
+$( document ).ready(function() {
+ $("img.ajax").on("click", function (event) {
+    event.preventDefault();
+    id = $(this).attr("data-sound-id");
+    var audioElement = document.createElement('audio');
+    audioElement.setAttribute('src', {link Homepage:play} + "/" + id);
+    console.log("Play sound:" + id);
+    audioElement.play();
+});
+
+$(function() {
+	var select_name = "string";
+	$("input[name=" + select_name + "]").autocomplete({
+		source: function( request, response ) {
+			$.ajax({
+				url: "{!$presenter->link('autocomplete')}",
+				data: {
+					whichData: select_name,
+					typedText: request.term,
+					translation: $("select[name=translation]").val()
+				},
+				success: function( data ) {
+					response( $.map( data, function( item ) {
+						return { label: item, value: item }
+					}));
+				}
+			});
+		},
+		minLength: 3,
+		open: function() {
+			$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
+		},
+		close: function() {
+			$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
+		},
+		select: function(e, ui) {
+			$("#frm-searchForm-string").val(ui.item.value);
+			$("#frm-searchForm").submit();
+		}
+	});
+});
+
+
+
+
+});
+</script>
+{/block}
+
+{block content}
+<div id="content">
+	<h2>Zadaj vyhladavany vyraz.</h2>
+
+	<div class="boxes">
+	{form searchForm}
+	<table>
+		<tr>
+			<th>{label string /}</th><th>{label translation /}</th>
+		</tr>
+		<tr>
+			<td>{input string}</td><td>{input translation}</td><td>{input search}</td>
+		</tr>
+	</table>
+	{ifset $result}
+		<table id="searchBox">
+
+		</table>
+		<table class="trans">
+		<tr>
+			<th>Preklad</th>
+		</tr>
+{var $last = ''}
+{foreach $result as $term}
+{if ($last != $term->string1 && $last != '') }
+				</div>
+			</td>
+		</tr>
+{/if}
+{if $last != $term->string1}
+		<tr>
+			<td>
+				<span class="term">{$term->string1}</span>&nbsp;
+				{foreach $term->pronunciations as $pron}
+					<span class="ipa-{$pron->type->id}">[{$pron->ipa}]</span>
+					<img n:if="$pron->filename" class="sound-ipa ajax" src="/images/sound.png" alt="Prehraj" style="vertical-align: middle;" data-sound-id="{$pron->id}" ></image>
+				{/foreach}
+				<br/>
+				<div style="margin-left: 20px;" class="translations">
+{/if}
+{$last == $term->string1 && trim($last2) != '' && trim($term->string2) != ''  ? ', ' : ''}{$term->string2}{**
+	Nutne kvoli newline
+**}
+{? $last = $term->string1}
+{? $last2 = $term->string2}
+{/foreach}
+		</table>
+	{/ifset}
+	{/form}
+	{control paginator}
+	</div>
+{/block}
+
+
diff --git a/app/modules/Front/Home/templates/ipa.latte b/app/modules/Front/Home/templates/ipa.latte
new file mode 100644
index 0000000..d72ec79
--- /dev/null
+++ b/app/modules/Front/Home/templates/ipa.latte
@@ -0,0 +1,68 @@
+{block title}Slovnik{/block}
+{layout ../@layout.latte}
+{block head}
+<script>
+$( document ).ready(function() {
+ $("img.ajax").on("click", function (event) {
+    event.preventDefault();
+    id = $(this).attr("data-sound-id");
+    var audioElement = document.createElement('audio');
+    var link = {link Homepage:play 123456 };
+    audioElement.setAttribute('src', link.replace('123456',id));
+    console.log("Play sound:" + id);
+    audioElement.play();
+});
+});
+</script>
+{/block}
+
+{block content}
+<div id="content">
+	<h2>Zadaj vyhladavany vyraz.</h2>
+
+	<div class="boxes">
+	{form searchForm}
+	<table>
+		<tr>
+			<th>{label string /}</th><th>{label translation /}</th><th>{label clen /}</th>
+		</tr>
+		<tr>
+			<td>{input string}</td><td>{input translation}</td><td>{input clen}</td><td>{input search}</td>
+		</tr>
+	</table>
+	{ifset $result}
+		<table class="trans">	
+		<tr>
+			<th>Preklad</th>
+		</tr>
+{var $last = ''}
+{foreach $result as $term}
+{if ($last != $term->string1 && $last != '') }
+				</div>
+			</td>
+		</tr>
+{/if}
+{if $last != $term->string1}
+		<tr>
+			<td>
+				<span class="term">{$term->string1}</span>&nbsp;
+				{foreach $term->pronunciations as $pron}
+					<span class="ipa-{$pron->type->id}">[{$pron->ipa}]</span>
+					<img n:if="$pron->filename" class="sound-ipa ajax" src="/images/sound.png" alt="Prehraj" style="vertical-align: middle;" data-sound-id="{$pron->id}" ></image>
+				{/foreach}
+				<br/>
+				<div style="margin-left: 20px;" class="translations">
+{/if}
+{$last == $term->string1 && trim($last2) != '' && trim($term->string2) != ''  ? ', ' : ''}{$term->string2}{**
+	Nutne kvoli newline
+**}
+{? $last = $term->string1}
+{? $last2 = $term->string2}
+{/foreach}
+		</table>
+	{/ifset}
+	{/form}
+	{control paginator}
+	</div>
+{/block}
+
diff --git a/app/modules/Front/templates/@layout.latte b/app/modules/Front/templates/@layout.latte
index ca8db8a..b72cfe3 100644
--- a/app/modules/Front/templates/@layout.latte
+++ b/app/modules/Front/templates/@layout.latte
@@ -1,38 +1,62 @@
-{layout '../../Base/templates/@layout.latte'}
+{**
+ * @param string   $basePath web base path
+ * @param array    $flashes  flash messages
+ *}
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
 
-{block #head}
-	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" defer/>
-	<link rel="stylesheet" href="{$basePath}/assets/front.css" defer/>
-	<script src="{$basePath}/assets/front.js" defer></script>
-{/}
+	<title>{ifset title}{include title|striptags} | {/ifset}Nette Sandbox</title>
 
-{block #main}
-	<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
-		<header class="masthead mb-auto">
-			<div class="inner">
-				<h3 class="masthead-brand">Webapp</h3>
-				<nav class="nav nav-masthead justify-content-center">
-					<a n:class="$presenter->isLinkCurrent(':Front:Home:') ? active, nav-link" n:href=":Front:Home:">Home</a>
-					<a n:class="$presenter->isLinkCurrent(':Admin:Home:') ? active, nav-link" n:href=":Admin:Home:">Admin</a>
-					<a n:class="$presenter->isLinkCurrent(':Pdf:Home:') ? active, nav-link" n:href=":Pdf:Home:">PDF example</a>
-				</nav>
-			</div>
-		</header>
+	<link rel="stylesheet" href="{$basePath}/assets/css/style.css">
+	<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
+	<meta name="viewport" content="width=device-width">
+	<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
+	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
+	{block head}{/block}
+</head>
 
-		<main role="main" class="inner cover">
-			<h1 class="cover-heading">Webapp skeleton.</h1>
-			<p class="lead">This is example project based on <a href="https://nette.org">Nette Framework</a></p>
-			<p class="lead">And also many <a href="https://contributte.org">Contributte + Nettrine</a> packages.</p>
-			<div class="lead">
-				<a href="https://github.com/contributte/webapp-skeleton" class="btn btn-lg btn-secondary">Learn more in docs</a>
-			</div>
-		</main>
+<body>
 
-		<footer class="mastfoot mt-auto">
-			<div class="inner">
-				<p>Cover template for <a href="https://getbootstrap.com/">Bootstrap</a>, by
-					<a href="https://twitter.com/mdo">@mdo</a>.</p>
-			</div>
-		</footer>
-	</div>
-{/}
+<header>
+    <hgroup>
+        <h1>My Dictionary</h1>
+        <h2>multilanguage dictionary with pronunciations</h2>
+    </hgroup>
+    <nav>
+        <ul>
+            <li><a href="{link Home:default}">Jednoduchý</a></li>
+            <li><a href="{link Home:ipa}">s výslovnosťou</a></li>
+            <li><a href="{link Home:interactive}">Interaktívny</a></li>
+            <li><a href="{link Home:alphabet}">Abeceda</a></li>
+        </ul>
+    </nav>
+    <a href="#" title="Jaro's Solutions homepage"><img src="logo.gif" alt="Jaro's Solutions" /></a>
+</header>
+
+<article>
+	<h1 n:ifset="$title">{$title}</h1>
+
+	<div n:foreach="$flashes as $flash" n:class="flash, $flash->type">{$flash->message}</div>
+
+	{include content}
+</article>
+
+<section>
+	<h1>Slovníky</h1>
+    <ul>
+	{foreach $translations as $tr}
+        	<li><a href="{link Home:select $tr["slug"] }">{$tr["lang"]}</a></li>
+	{/foreach}
+    </ul>
+</section>
+
+<footer>
+	<p>&copy; 2022 Jaro's Solutions - <a href="#">Sitemap</a> </p>
+</footer>
+
+	{block scripts}
+	{/block}
+</body>
+</html>
diff --git a/www/assets/css/style.css b/www/assets/css/style.css
new file mode 100644
index 0000000..5fe804b
--- /dev/null
+++ b/www/assets/css/style.css
@@ -0,0 +1,510 @@
+body {
+	font-size: 15px;
+	line-height: 1.6;
+	color: #333;
+	background: white;
+}
+
+h1 {
+	color: #3484D2;
+}
+
+#ajax-spinner {
+	margin: 15px 0 0 15px;
+	padding: 13px;
+	background: white url('../images/spinner.gif') no-repeat 50% 50%;
+	font-size: 0;
+	z-index: 123456;
+	display: none;
+}
+
+div.flash {
+	color: black;
+	background: #FFF9D7;
+	border: 1px solid #E2C822;
+	padding: 1em;
+	margin: 1em 0;
+}
+
+a[href^="#error:"] {
+	background: red;
+	color: white;
+}
+
+form th, form td {
+	vertical-align: top;
+	font-weight: normal;
+}
+
+form th {
+	text-align: right;
+}
+
+form .required label {
+	font-weight: bold;
+}
+
+form .error {
+	color: #D00;
+	font-weight: bold;
+}
+
+table.trans {
+    border-collapse: collapse;
+    width: 100%;
+}
+
+table.trans th, table.trans td {
+    text-align: left;
+    padding: 2px;
+}
+
+table.trans tr:nth-child(even){background-color: #f2f2f2}
+
+table.trans th {
+    background-color: #4CAF50;
+    color: white;
+}
+
+.e-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-family: Arial;
+    font-style: bold;
+}
+
+.e-table td, .e-table th {
+    padding: 10px 20px;
+}
+
+.e-table th {
+    color: #363636;
+    text-align: left;
+    font-family: "Open Sans";
+    font-weight: bold;
+    background: #1d9bd4 none repeat scroll 0 0;
+    border-bottom: 1px solid #146a91;
+    color: #fff;
+    font-weight: 700;
+}
+
+.e-table td {
+    text-align: left;
+    font-family: "Open Sans";
+    font-weight: bold;
+}
+
+.e-table td:first-child {
+    text-align: left;
+}
+
+.e-table tr {
+    border-bottom: 1px solid #b8b8b8;
+}
+
+.e-table tr:nth-child(2n+1) {
+    background: #fff none repeat scroll 0 0;
+}
+.e-table tr:nth-child(2n) {
+    background: #d9d9d9 none repeat scroll 0 0;
+}
+
+.e-table i.icon-check {
+    color: #1d9bd4;
+}
+.e-table i.icon-missing {
+    color: #e40137;
+}
+.e-table .e-centered {
+    text-align: center;
+}
+.e-table.left-align td {
+    text-align: left;
+}
+
+span.term {
+  font-weight: bold;	
+}
+
+
+span.ipa-1 {
+  color: black;
+  font-weight: bold;	
+}
+
+span.ipa-2 {
+  color: red;
+  font-weight: bold;	
+}
+
+span.ipa-3 {
+  color: blue;
+  font-weight: bold;	
+}
+
+span.flag {
+  color: red;
+  font-style: italic;
+}
+
+span.type {
+  color: blue;
+  font-style: italic;
+}
+
+table.trans  tr td {
+    border-bottom: 1px solid #000000;
+}
+
+table.trans1  tr td {
+    border-bottom: 0px solid #000000;
+}
+
+body {
+	background:#fbfdf6;
+	font-family:"Myriad Pro", Myriad, Helvetica, Arial, sans-serif;
+	font-size:90%;
+	color:#968765;
+	margin:20px auto;
+	text-align:center;
+	line-height:1.4em;
+	width:960px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+	font-family:Helvetica, Arial, sans-serif;
+	font-size:1.5em;
+	letter-spacing:-0.06em;
+	text-transform:uppercase;
+	font-weight:normal;
+}
+
+a:link, a:visited {
+	font-family:georgia, times, serif;
+	font-weight:bold;
+	color:#c17086;
+	text-decoration:none;
+	border-bottom:1px solid #91476c;
+	font-size:.8em;
+}
+
+a:hover {
+	border-bottom:1px dotted #91476c;
+}
+
+a img {
+	border:none;
+}
+
+header, section, article, footer {
+	padding:10px 20px 20px;
+	margin:10px;
+	border:1px solid #e7e2d7;
+	border-radius:8px;
+	-webkit-border-radius:.8em;
+	-moz-border-radius:.8em;
+	background:#fff url(../images/sprites.png) repeat-x 0px -120px;
+}
+
+header {
+	display:block;
+	position:relative;
+	text-align:left;
+}
+
+header img {
+	position:absolute;
+	left:20px;
+	top:18px;
+}
+
+header h1 {
+	font-size:2.3em;
+	text-transform:none;
+	letter-spacing:0em;
+	text-align:center;
+}
+
+header h2 {
+	margin:-10px 0px 20px;
+	font-size:1.3em;
+	text-align:center
+}
+
+nav {
+	text-align:center;
+	display:block;
+}
+
+nav ul {
+	padding:0px;
+	list-style-type:none;
+	display:inline;
+}
+
+nav li {
+	margin:0px 10px;
+	padding:0px;
+	list-style-type:none;
+	display:inline;
+}
+
+nav a:link, nav a:visited {
+	font-size:1.4em;
+	font-weight:normal;
+}
+
+section {
+	float:left;
+	width:178px;
+	text-align:left;
+}
+
+section h1, section h2, section h3, section h4, section h5, section h6 {
+	background:transparent url(../images/sprites.png) no-repeat 0px -80px;
+	color:#fff;
+	padding:9px 10px 10px 10px;
+	margin:13px -10px;	
+	text-shadow:0 1px 0 #403232;
+}
+
+section ul {
+	padding:0px;
+	list-style:none;
+	border-top:1px solid #e7e2d7;
+	margin:14px 0px;
+}
+
+section li {
+	margin:0px;
+	padding:0px;
+	list-style:none;
+}
+
+section li a:link, section li a:visited {
+	float:left;
+	width:96%;
+	padding:3px 1%;
+	border-bottom:1px solid #e7e2d7;
+}
+
+section li a:hover {
+	background:#f2f1ec;
+}
+
+article {
+	float:right;
+	width:658px;
+	text-align:left;
+}
+
+article h1 {
+	background:transparent url(../images/sprites.png) no-repeat 0px 0px;
+	color:#fff;
+	padding:7px 10px 12px 30px;
+	margin-left:-30px;
+	text-shadow:0 1px 0 #403232;
+}
+
+article h2, article h3, article h4, article h5, article h6  {
+	background:transparent url(../images/sprites.png) no-repeat 0px -40px;
+	color:#fff;
+	padding:7px 10px 12px 30px;
+	margin-left:-30px;
+	text-shadow:0 1px 0 #913951;
+}
+
+article p:first-of-type {
+	font-family:Helvetica, Arial, serif;
+	text-transform:uppercase;
+	border-top:1px dotted #968765;
+	border-bottom:1px dotted #968765;
+	padding:10px 0px;
+	color:#c17086;
+}
+
+footer {
+	display:block;
+	clear:both !important;
+	width:898px;
+}
+
+footer a {
+	margin:0px 5px;
+}
+
+  .ui-autocomplete {
+    max-height: 400px;
+    overflow-y: auto;
+    /* prevent horizontal scrollbar */
+    overflow-x: hidden;
+  }
+
+  #searchBox {
+    max-height: 400px;
+    overflow-y: auto;
+    /* prevent horizontal scrollbar */
+    overflow-x: hidden;
+  }
+
+
+/*
+ul.ui-autocomplete li.ui-menu-item{text-align:left;}
+*/
+
+.ui-autocomplete {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 1000;
+    float: left;
+    display: none;
+    min-width: 160px;   
+    padding: 4px 0;
+    margin: 0 0 10px 25px;
+    list-style: none;
+    background-color: #ffffff;
+    border-color: #ccc;
+    border-color: rgba(0, 0, 0, 0.2);
+    border-style: solid;
+    border-width: 1px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+    -webkit-background-clip: padding-box;
+    -moz-background-clip: padding;
+    background-clip: padding-box;
+    *border-right-width: 2px;
+    *border-bottom-width: 2px;
+}
+
+.ui-menu-item > a.ui-corner-all {
+    display: block;
+    padding: 3px 15px;
+    clear: both;
+    font-weight: normal;
+    line-height: 18px;
+    color: #555555;
+    white-space: nowrap;
+    text-decoration: none;
+}
+
+.ui-state-hover, .ui-state-active {
+    color: #ffffff;
+    text-decoration: none;
+    background-color: #0088cc;
+    border-radius: 0px;
+    -webkit-border-radius: 0px;
+    -moz-border-radius: 0px;
+    background-image: none;
+}
+
+.pagination {
+  height: 36px;
+  margin: 18px 0;
+  justify-content: center;
+}
+.pagination ul {
+  display: inline-block;
+  *display: inline;
+  /* IE7 inline-block hack */
+
+  *zoom: 1;
+  margin-left: 0;
+  margin-bottom: 0;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+.pagination li {
+  display: inline;
+}
+.pagination a {
+  float: left;
+  padding: 0 14px;
+  line-height: 34px;
+  text-decoration: none;
+  border: 1px solid #ddd;
+  border-left-width: 0;
+}
+.pagination a:hover,
+.pagination .active a {
+  background-color: #f5f5f5;
+}
+.pagination .active a {
+  color: #999999;
+  cursor: default;
+}
+.pagination .disabled span,
+.pagination .disabled a,
+.pagination .disabled a:hover {
+  color: #999999;
+  background-color: transparent;
+  cursor: default;
+}
+.pagination li:first-child a {
+  border-left-width: 1px;
+  -webkit-border-radius: 3px 0 0 3px;
+  -moz-border-radius: 3px 0 0 3px;
+  border-radius: 3px 0 0 3px;
+}
+.pagination li:last-child a {
+  -webkit-border-radius: 0 3px 3px 0;
+  -moz-border-radius: 0 3px 3px 0;
+  border-radius: 0 3px 3px 0;
+}
+.pagination-centered {
+  text-align: center;
+}
+.pagination-right {
+  text-align: right;
+}
+.pager {
+  margin-left: 0;
+  margin-bottom: 18px;
+  list-style: none;
+  text-align: center;
+  *zoom: 1;
+}
+.pager:before,
+.pager:after {
+  display: table;
+  content: "";
+}
+.pager:after {
+  clear: both;
+}
+.pager li {
+  display: inline;
+}
+.pager a {
+  display: inline-block;
+  padding: 5px 14px;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  -webkit-border-radius: 15px;
+  -moz-border-radius: 15px;
+  border-radius: 15px;
+}
+.pager a:hover {
+  text-decoration: none;
+  background-color: #f5f5f5;
+}
+.pager .next a {
+  float: right;
+}
+.pager .previous a {
+  float: left;
+}
+.pager .disabled a,
+.pager .disabled a:hover {
+  color: #999999;
+  background-color: #fff;
+  cursor: default;
+}
diff --git a/www/assets/images/sound.png b/www/assets/images/sound.png
new file mode 100644
index 0000000000000000000000000000000000000000..d3c1095a7e1ec74cf07b4f02a8afc7a9facd51c1
GIT binary patch
literal 1269
zcmV<R1Pc3!P)<h;3K|Lk000e1NJLTq000&M000&U1^@s6#I$TX00009a7bBm000XU
z000XU0RWnu7ytkSr%6OXRCt_)m0O6FRTRg6`|^F~j5D6m8OK3qDAT-+>3B&=C6vf6
z4~AU?p&LS2kPo6zFGZPQ6m%t`)E+bv>Lr4xh%%;-lIG$CXEY*jj7MiiJ)W64=R4oG
zFFkytrcShAy=+*&y*BIrUt92>;dL0&0?b}`C(|cQW~u<&dxpQ;+c~Zj-EqvHAlzux
zVicg%n&l5Y!sAb`XUVKqCW<T~wpf5rqHP&>q@8o0eoWiGpV*ruqT_$Se(cPdJooNL
zJTbME3B5xUN->EA=NukD2!s@fnvk%$hH;&3^lsY7uJd_zgQ$!G_POONcxlHT)?I+o
zr3&TPVvWTaaP}G)C6HPoLy2straD_BcycYfj&<|S75E6)s~Ii4@Z~pb=o1VNM#PcD
zBn}f>Tw-y~<2`r@LMen6sEk5o1Jt+-*{UIehgb3Tz<IIrDp+g3YVWtaQ9pyKLPS(f
zFl9>;CD@9^#wpl2K!OM)BG9O;LS;32j7Cow!<g=07})X*TarX{NbuPQ9%Efo3u6Z>
zR3d{Z8IqxdWZHQA>gm)ALFrONT!^R?Vk(zo;$lQRl#rBSl9It(EK_b>LF2r|tOYNX
z)~_zvw2gI{I#kJE$_Ys+!3@Qi+4a=SZ)D-pCYnOUrLH~-<rtqhoby+QB&0+LiSXdZ
zk0ZDL2ma9G>X>_L3$>BO#3p@uIlaIbQi&-^%{^1Nd&y+-dymrIc7`Y!8KwlGB{ERR
z$Y5qIrVf}RTbD5#35mlc9#^qxmQ1RMe~YmuWYUHOtbTJPbDMM6VS|Y*Hg?#=ruAVp
zdd>o-%i8fYc#pRp?;NgTFh~0-e07}O)0Zg%{>E(1G4thRtbTSrlPiYUIGk~*B%Q})
zb2RINrzjrjr@w!gsPi0`e#=uRCuye^5@2Xl%L>pEyW=1yrq+_1*GO(kj+&Ce96U)`
zpFG3Bi$4?JSQsdz06Eg-b#b9ge(Qb?>^Mj<F~}nW3>_J`)_^Q>R@28>96993A&5+f
z%4U#CUpY-9b_{;rL)W$g<V!JBX9yyNt;E<X&SV(G0B5xvrpNU$k7-CL5ZM4#rO}xH
zg(e(fnznNs-`d6LbHm7>hT3X_i!D|etctOv7;8O_Zmd%DXk+M*T|6ol&=3a5Y>3L}
zH1ihz8s^mN-Si$VpwQH1YVpS5mBV3iKEXPJwJ|nHu(p#EaZI-WP|B}qc%Sw0EmQ>o
zvPz>uiOL4)ve615N9^xCSdU8#K6cp1;K~N;ERIf!7hmH&W5ll-z*@d5eZrzyA8>zO
zf!4@CqO?jk*cGsl;4Bz$-r}sqX^R`<a1Dc)!#nxj820~by8-x#P51H2g6-UUQX!N;
zgbJBWH<?rdAyNr?<M0)St2mr=&{QV*eIsA@cd#AA;0@pu-h3CESH8uXp=QSS8GIlS
z8Hvy`1sjKtU23RCjnqBlf85L${m1waMDeQ5Z<fB#gdq<ueV(W8SW9a-jmFZ*$0h&`
zWIZnGp||}r+B^5K+ZgtNu-6&rW^fu4Cit<10*mTzqxJUX%&n=X5pc!x<d3y+XfV$q
fW9S4CjaL5;AH`pp-O(qt00000NkvXXu0mjf#IRMU

literal 0
HcmV?d00001

diff --git a/www/assets/images/spinner.gif b/www/assets/images/spinner.gif
new file mode 100644
index 0000000000000000000000000000000000000000..185a077d301f7137d221da0ade6a43d3803a9394
GIT binary patch
literal 737
zcmZ?wbhEHb<YVAt*v!Fj@7_HZ7nhEX4kaa}0|yQ)Sg?SBfgvp|?f?J(Kn5mI{Lk&@
z8WQa67~pE8XTZz|RH68jg_VnegFy$R8e}X3i><)P%rko!0<@1$nAsLG*SvM{)7lvk
zaRoYpCW7o00k;d}PB?fjEU=VGa9-rlU?A7(d@|@!i{G*<>O9q*xJ<M>w&z%YwlkWE
zj3xr|KLT$T)SYnPY%CDuNN`SCNUVvHhxQ}~XrG^m>PE>eg4{cRZqx&s$WWjulHjb=
zNUVvK=k_QDXt$!dk@t&$cm>dnaVH!)4;Cm208L~d)<n%Cd!7eqd!xCLwM0PJ0%)S&
z35Syj1&j>9a6Cw?iIJ!FI0a~PqM0cBMUdG7=xaV;%qSEXN+dWxN+8xm&l7u=252*)
z`I>W!fb<Ta8}oo}d{`jK1B@93Vol^cu%{(JyBE!kq9ua-KY(tu1BRnR0VfO4jSn$R
Gv<3h&9PgL_

literal 0
HcmV?d00001

diff --git a/www/assets/images/sprites.png b/www/assets/images/sprites.png
new file mode 100644
index 0000000000000000000000000000000000000000..d737c3207a315ebd136bc86e0c7a9980235972d0
GIT binary patch
literal 1774
zcmeAS@N?(olHy`uVBq!ia0y~yVA{aI!05oi1{86z^EU!gk|nMYCBgY=CFO}lsSJ)O
z`AMk?p1FzXsX?iUDV2pMQ*9U+*d}<oIEGZ*dUIDXU&K-3_`{j6Ihq(Qvp6<6H|$f`
zxT20VWwMt{4b!Uv6U*c22Nq0hi4w4wl%%0Dh2>`A_UhbMtJdALxAEU(Tl~sb@8{RE
zDcio?JALq9o<0MEK*H;Dz4?zs85(Zx{{JEH=g+?@bb6Q=8dR9XfG*_*x)?~a=pbm0
z2nZiU3jlosqZJYu!F&+yaDa&cMmIFDg83jCWFU+N8;owjx{K5O<<HsO{vZ?g_37T{
ztCvn>WH4aoF63fx2szMK?*ep3AmeVeBu0h~t_VSH28Wmf^W@bdBzYMa1R1M0?6-D%
z^D5{>p0qFnLvdjB`(+Fa4n5!g-8}s<_$U*DK%!zCBZJ3=y)^}bK!*!Blj}-QaF81e
z2TZO0{rLH2Gw=C_q49NpULC!3f`MU1b0M>~AIMWTlz@Ko;D-9G3mC?an7-L0g}X5`
zICvfC+s?P<nmK=u;_h4@28J`PZ}-k-Vqh>7+j>nlxxxGY)t|l$2lg;u<6vO$2>L$H
z?&bFUyE@<BS-s+l@9#UkezN`3ud~aqnlL2H%b`YOksAyT<b&GNmw*3vO(Ws&;uTl(
znHbW}u!%7=Xl(tS2h1u*HZ&qqOoOAeTszRQCpd51SGV_JWN4VvP};`8(6FMx)|8on
zp(z3wi2_S~^Cz=1G)!o?ducrbg9_^!V_^KM6aoz;n1pv+$oi@m$-q!_gFtF%IGeS!
z0+<{bEO7<ifhAX8N$KJ-s-ZJ`3j;$(5;KlmptkNJFyD0XV##ee6QY5!3fAf{WmzI4
z0|)nw;9v#@g|@HSh`cFsJp-5tk0JZJOI#9|)ZO-iLP>PH0FZqISsE0Fpd4<tVrMfj
zR8`Dy<miM;S)~(!>TrAhh-nnCOxuVQcPP1i^0l)-^OrP~@&j%3lu-ocOkjY+3IiAo
za!Z55JD?$uU<jPm24r?tArb_Nq3C7Q%&51(wBf)fP0KQh++>f-zXX#gRZH3b^RKN2
w2L6P@kQ~R~1I$t)xMCe!Iey^SU(o~x_f=ubm#xl716E)Rp00i_>zopr0O|0YJ^%m!

literal 0
HcmV?d00001