commit 9a7b1f4c016cb12f710f196ab820feeee3d1b936
Author: Ondřej Anděl <andelo@students.zcu.cz>
Date:   Mon Mar 15 09:26:43 2021 +0100

    Feature #8269: Vytvoření prvotního vzhledu aplikace

diff --git a/application/index.php b/application/index.php
new file mode 100644
index 0000000..4b4d198
--- /dev/null
+++ b/application/index.php
@@ -0,0 +1,36 @@
+<!doctype html>
+
+<html >
+<head>
+    <meta charset="utf-8">
+    <title>Dalimilova kronika</title>
+
+    <!-- css -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
+    <link rel="stylesheet" href="./view/style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
+    <!-- jQuery library -->
+    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
+
+    <!-- JavaScript -->
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
+
+</head>
+<body>
+<div class="container-fluid">
+    <?php include "./view/header.html" ?>
+    <div class="row app-content">
+        <?php include "./view/menu.php" ?>
+
+        <div class="col-xs-12 col-sm-10 p-4 content d-flex">
+            <?php include "./view/indexContent.html" ?>
+        </div>
+    </div>
+    <?php include "./view/footer.html" ?>
+</div>
+
+<?php include "./view/loginModal.html" ?>
+</body>
+</html>
diff --git a/application/search.php b/application/search.php
new file mode 100644
index 0000000..a3fafb6
--- /dev/null
+++ b/application/search.php
@@ -0,0 +1,36 @@
+<!doctype html>
+
+<html >
+<head>
+    <meta charset="utf-8">
+    <title>Dalimilova kronika</title>
+
+    <!-- css -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
+    <link rel="stylesheet" href="./view/style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
+    <!-- jQuery library -->
+    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
+
+    <!-- JavaScript -->
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
+
+</head>
+<body>
+<div class="container-fluid">
+    <?php include "./view/header.html" ?>
+    <div class="row app-content">
+        <?php include "./view/menu.php" ?>
+
+        <div class="col-xs-12 col-sm-10 p-4 content d-flex">
+            <?php include "./view/searchContent.php" ?>
+        </div>
+    </div>
+    <?php include "./view/footer.html" ?>
+</div>
+
+<?php include "./view/loginModal.html" ?>
+</body>
+</html>
diff --git a/application/view/footer.html b/application/view/footer.html
new file mode 100644
index 0000000..18e422a
--- /dev/null
+++ b/application/view/footer.html
@@ -0,0 +1,7 @@
+<div class="row app-footer">
+    <div class="col-xs-12 col-sm-12 my-auto">
+        <small class="mx-auto">
+            © ZČU, 2021
+        </small>
+    </div>
+</div>
\ No newline at end of file
diff --git a/application/view/header.html b/application/view/header.html
new file mode 100644
index 0000000..fd8dfc4
--- /dev/null
+++ b/application/view/header.html
@@ -0,0 +1,7 @@
+<div class="row app-header">
+    <div class="col-xs-12 col-sm-12 my-auto ">
+        <h1 class="mx-auto title">
+            Dalimilova kronika
+        </h1>
+    </div>
+</div>
diff --git a/application/view/indexContent.html b/application/view/indexContent.html
new file mode 100644
index 0000000..c1b98e0
--- /dev/null
+++ b/application/view/indexContent.html
@@ -0,0 +1,8 @@
+<p>
+    Dvě existující, už vytvořené samostatné databáze slov a jejich tvarů ze všech pramenů Dalimilovy kroniky (tj. staročeské památky z období 14., 15. století).
+    Kronika vypráví ve staročeštině o dějinách naší země, je to první česky psaná kronika.
+    Zkoumání jejího jazyka dovoluje popsat hlavní vývojové tendence češtiny v tzv. staročeském období (14., 15. století)
+    a pochopit stav češtiny i její vývoj v současnosti. Databáze byly vytvořeny jako podpora pro zpracování tiskové podoby indexu
+    všech slov a tvarů doložených v dochovaných pramenech. Index (celkem 3 díly) vyšel postupně v letech 2012–2020 jako výsledek
+    řešení tří vědeckých projektů v rámci Fakulty pedagogické.
+</p>
\ No newline at end of file
diff --git a/application/view/loginModal.html b/application/view/loginModal.html
new file mode 100644
index 0000000..e3a3f51
--- /dev/null
+++ b/application/view/loginModal.html
@@ -0,0 +1,35 @@
+
+<div id="login-modal" class="modal fade" role="dialog">
+    <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title">Přihlásit se</h4>
+                <button type="button" class="close" data-dismiss="modal">&times;</button>
+            </div>
+            <div class="modal-body">
+                <div class="container">
+                    <div class="row">
+                        <div class="col-xs-12 col-sm-5">
+                            <label for="nick">Přihlašovací jméno</label>
+                        </div>
+                        <div class="col-xs-12 col-sm-7">
+                            <input type="text" id="nick">
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-xs-12 col-sm-5">
+                            <label for="password">Heslo</label>
+                        </div>
+                        <div class="col-xs-12 col-sm-7">
+                            <input type="password" id="password">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">Přihlásit se</button>
+                <button type="button" class="btn btn-default" data-dismiss="modal">Zavřít</button>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/application/view/menu.php b/application/view/menu.php
new file mode 100644
index 0000000..9d871e0
--- /dev/null
+++ b/application/view/menu.php
@@ -0,0 +1,10 @@
+<div class="col-xs-12 col-sm-2 menu">
+    <h4 class="pt-4 px-4">
+        Menu
+    </h4>
+    <div class="d-flex flex-column">
+        <a class="px-4 py-1 <?php echo (strstr($_SERVER['PHP_SELF'], '/index.php') ? 'active' : '');?>" href="index.php">Úvodní info</a>
+        <a class="px-4 py-1 <?php echo (strstr($_SERVER['PHP_SELF'],'/search.php') ? 'active' : '');?>" href="search.php">Vyhledávání</a>
+        <a class="px-4 py-1 <?php echo (strstr($_SERVER['PHP_SELF'],'/login.php') ? 'active' : '');?>" href="#" data-toggle="modal" data-target="#login-modal">Přihlášení</a>
+    </div>
+</div>
\ No newline at end of file
diff --git a/application/view/searchContent.php b/application/view/searchContent.php
new file mode 100644
index 0000000..f88933f
--- /dev/null
+++ b/application/view/searchContent.php
@@ -0,0 +1,71 @@
+<div class="search-filters container">
+    <div class="row">
+        <div class="mr-3">
+            <label for="lemma" class="mr-2">Lemma</label>
+            <input type="text" id="lemma">
+        </div>
+        <div class="mr-3">
+            <label for="wordshape" class="mr-2">Tvar slova</label>
+            <input type="text" id="wordshape">
+        </div>
+        <div class="mr-3">
+            <label for="wordclass" class="mr-2">Slovní druh</label>
+            <select id="wordclass">
+                <option>Substantivum</option>
+                <option>Adjektivum</option>
+                <option>Pronominum</option>
+                <option>Numeralium</option>
+                <option>Verbum</option>
+                <option>Adverbium</option>
+                <option>Prepozice</option>
+                <option>konjunkce</option>
+                <option>Partikule</option>
+                <option>Interjekce</option>
+            </select>
+        </div>
+        <div class="mr-3">
+            <label for="source" class="mr-2">Rukopisný pramen</label>
+            <input type="text" id="source">
+        </div>
+        <div class="mr-3">
+            <label for="location" class="mr-2">Lokace</label>
+            <input type="text" id="location">
+        </div>
+    </div>
+</div>
+
+<div class="search-results my-4">
+    <table class="table table-striped">
+        <thead>
+        <tr>
+            <th scope="col">Lemma</th>
+            <th scope="col">Prefix</th>
+            <th scope="col">Slovo</th>
+            <th scope="col">Suffix</th>
+            <th scope="col">Koncovka</th>
+            <th scope="col"></th>
+        </tr>
+        </thead>
+        <tbody id="search-table">
+            <script>
+                const data = [{"id":1,"context":"","date":"2013-08-22 00:00:00","description":"","description2":"","description3":"","ending":"e","finished":true,"namedentity":0,"position1":"45","position2":"19","positiondetail":"","prefix":"","suffix":"","word":"abaty\u0161e","lemma_id":1,"tag_id":1},{"id":2,"context":"","date":"2013-08-22 00:00:00","description":"","description2":"","description3":"","ending":"e","finished":true,"namedentity":0,"position1":"45","position2":"20","positiondetail":"","prefix":"","suffix":"","word":"abaty\u0161e","lemma_id":1,"tag_id":2},{"id":24,"context":"","date":"2013-05-29 00:00:00","description":"","description2":"\\N","description3":"\\N","ending":"","finished":true,"namedentity":1,"position1":"100","position2":"07","positiondetail":"","prefix":"","suffix":"","word":"Albrecht","lemma_id":7,"tag_id":8},{"id":3,"context":"","date":"2013-08-22 00:00:00","description":"","description2":"","description3":"","ending":"\u011b","finished":true,"namedentity":0,"position1":"45","position2":"19","positiondetail":"","prefix":"","suffix":"","word":"abaty\u0161\u011b","lemma_id":1,"tag_id":1},{"id":4,"context":"","date":"2013-05-27 00:00:00","description":"","description2":"","description3":"","ending":"a","finished":true,"namedentity":1,"position1":"96","position2":"15","positiondetail":"","prefix":"","suffix":"","word":"Adalfa","lemma_id":2,"tag_id":3},{"id":5,"context":"","date":"2013-05-27 00:00:00","description":"","description2":"\\N","description3":"\\N","ending":"a","finished":true,"namedentity":1,"position1":"96","position2":"15","positiondetail":"","prefix":"","suffix":"","word":"Adolfa","lemma_id":3,"tag_id":3},{"id":25,"context":"","date":"2013-05-28 00:00:00","description":"","description2":"","description3":"","ending":"a","finished":true,"namedentity":1,"position1":"99","position2":"04","positiondetail":"","prefix":"","suffix":"","word":"Albrechta","lemma_id":7,"tag_id":3},{"id":6,"context":"","date":"2013-05-31 00:00:00","description":"","description2":"\\N","description3":"\\N","ending":"\u011b","finished":true,"namedentity":1,"position1":"104","position2":"24","positiondetail":"","prefix":"","suffix":"\u00e9\u0159","word":"Ajn\u0161tejn\u00e9\u0159\u011b","lemma_id":4,"tag_id":3},{"id":7,"context":"","date":"2013-05-27 00:00:00","description":"","description2":"","description3":"","ending":"u","finished":true,"namedentity":0,"position1":"96","position2":"10","positiondetail":"","prefix":"","suffix":"\u00f3v","word":"Albertovu","lemma_id":5,"tag_id":4},{"id":38,"context":"z","date":"2013-03-28 00:00:00","description":"","description2":"\\N","description3":"\\N","ending":"a","finished":true,"namedentity":1,"position1":"39","position2":"05","positiondetail":"","prefix":"","suffix":"","word":"Aldenburka","lemma_id":12,"tag_id":7}]
+                let result = "";
+                data.forEach((item) => {
+                    result += "<tr>";
+                    result += "<td>" + item.lemma_id + "</td>";
+                    result += "<td>" + item.prefix + "</td>";
+                    result += "<td>" + item.word + "</td>";
+                    result += "<td>" + item.suffix + "</td>";
+                    result += "<td>" + item.ending + "</td>";
+                    result += "<td class=\"action-td\">" +
+                            "<button class=\"btn\"><i class=\"fa fa-search\"></i></button>" +
+                        "</td>";
+                    result += "</tr>";
+                });
+                document.getElementById("search-table").innerHTML = result;
+            </script>
+        </tbody>
+    </table>
+</div>
+
+
diff --git a/application/view/style.css b/application/view/style.css
new file mode 100644
index 0000000..45fd80c
--- /dev/null
+++ b/application/view/style.css
@@ -0,0 +1,75 @@
+html, body, .container-fluid {
+  height: 100%;
+}
+
+.app-header {
+  background-image: linear-gradient(#A8A4A2, #4B4B4B);
+  height: 15%;
+}
+
+.app-header .title {
+  width: max-content;
+  font-family: "Lucida Calligraphy", cursive;
+}
+
+.app-content {
+  height: 80%;
+}
+
+.app-content .menu {
+  background-color: #a8a4a2;
+  border-right: #4B4B4B solid 2px;
+}
+
+.app-content .menu a {
+  color: #4B4B4B;
+  background-color: transparent;
+}
+
+.app-content .menu a:hover,
+.app-content .menu a:focus {
+  color: #a8a4a2;
+  background-color: #707070;
+  text-decoration: none;
+  border-radius: 15px 50px 50px 15px;
+}
+
+.app-content .menu .active{
+  color: #a8a4a2;
+  background-color: #4B4B4B;
+  text-decoration: none;
+  border-radius: 15px 50px 50px 15px;
+}
+
+.app-content .content {
+  background-color: #c9c5c2;
+  height: 100%;
+  flex-direction: column;
+}
+
+.app-footer {
+  text-align: center;
+  background-image: linear-gradient(#4B4B4B,#A8A4A2);
+  height: 5%;
+}
+
+.modal-body {
+  background-color: #c9c5c2;
+}
+
+.modal-header, .modal-footer {
+  background-color: #A8A4A2;
+}
+
+.modal-header .modal-title {
+  color: #4B4B4B;
+}
+
+.app-content .content .search-results {
+  height: 100%;
+  overflow: auto;
+}
+
+.app-content .content .search-results .action-td{
+  width: 1%;
+}
