First nett3.0 webpage version

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}
+