First nett3.0 webpage version

2022-01-17 16:40:13 +01:00
parent c801608fe8
commit 59d4ef9966
14 changed files with 1149 additions and 64 deletions
--- 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 
 {
--- 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);
+		}
+	}
+
+
+
 }
--- 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>
--- 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;
--- a/app/modules/Front/Home/templates/alphabet.latte
+++ 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}
--- 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}
+
--- a/app/modules/Front/Home/templates/info.latte
+++ 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>
--- a/app/modules/Front/Home/templates/interactive.latte
+++ 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}
+
+
--- a/app/modules/Front/Home/templates/ipa.latte
+++ 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}
+
--- 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>
+	<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>
+
+<body>
+
+<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>
-			</div>
-		</header>
+    <a href="#" title="Jaro's Solutions homepage"><img src="logo.gif" alt="Jaro's Solutions" /></a>
+</header>

-		<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>
+<article>
+	<h1 n:ifset="$title">{$title}</h1>

-		<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>
-{/}
+	<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>
--- a/www/assets/css/style.css
+++ 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;
+}
--- a/www/assets/images/sound.png
+++ b/www/assets/images/sound.png
--- a/www/assets/images/spinner.gif
+++ b/www/assets/images/spinner.gif
--- a/www/assets/images/sprites.png
+++ b/www/assets/images/sprites.png