commit 1ea37762146c53a412c5cc4205a068ae429aaba9
Author: Jan Šedivý <honza.seeda@gmail.com>
Date:   Mon Mar 25 22:40:43 2019 +0100

    Re #7128 Prototyp uživatelského rozhraní

diff --git a/prototype/admin.html b/prototype/admin.html
new file mode 100644
index 0000000..2d764f5
--- /dev/null
+++ b/prototype/admin.html
@@ -0,0 +1,248 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
+            crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
+            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
+            crossorigin="anonymous"></script>
+
+    <title>Old Babylonian Text Corpus >> PROTOTYP</title>
+    <style>
+        .header-logo {
+            background-color: #006666;
+            color: white;
+            padding: 16px;
+            font-size: 2rem;
+            margin-bottom: 0;
+        }
+
+        .display-4 {
+            font-size: 2.5rem;
+        }
+
+        .display-4 a {
+            color: white;
+        }
+
+        .display-4 a:hover {
+            text-decoration: none;
+        }
+
+        .display-4 a:active {
+            color: white;
+        }
+
+        .display-4 a:visited {
+            color: white;
+        }
+
+        .display-5 {
+            font-size: 2rem;
+            font-weight: 300;
+            line-height: 1.2;
+        }
+
+        .content {
+            margin: 32px 64px;
+        }
+
+        html {
+            position: relative;
+            min-height: 100%;
+        }
+
+        body {
+            /* Margin bottom by footer height + margin */
+            margin-bottom: 96px;
+        }
+
+        .footer {
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            /* Set the fixed height of the footer here */
+            height: 64px;
+            padding: 8px;
+            background-color: #003366;
+            color: rgba(255, 255, 255, .5);
+        }
+
+        .search-options .form-group.row {
+            margin-bottom: 0.5rem;
+        }
+
+        .navbar.navbar-expand-lg {
+            padding-top: 0;
+            padding-bottom: 0;
+        }
+
+        .pagination-header {
+            margin-bottom: 0;
+            margin-top: 1rem;
+        }
+
+        .pagination-header ul {
+            margin-bottom: 0;
+        }
+
+        .linefound {
+            font-weight: bold;
+        }
+
+        .found {
+            font-weight: bold;
+            color: #003366;
+        }
+
+        .page-link {
+            color: #003366;
+        }
+
+        .page-item.active .page-link {
+            background-color: #003366;
+            border-color: #003366;
+        }
+
+        .nav .nav-item a {
+            color: #003366;
+        }
+
+        ul.nav {
+            background-color: #e5e5e5;
+            padding: 0 1rem;
+        }
+    </style>
+</head>
+<body>
+<!--Navbar-->
+<div class="jumbotron jumbotron-fluid header-logo">
+    <div class="container text-center">
+        <div class="display-4"><a href="landing-page.html">Old Babylonian Text Corpus</a></div>
+    </div>
+</div>
+<nav class="navbar navbar-expand-lg navbar-dark bg-primary" style="background-color: #003366 !important;">
+    <ul class="navbar-nav mr-auto">
+        <li class="nav-item">
+            <a class="nav-link" href="search-texts.html">Search & edit texts <span class="sr-only">(current)</span></a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" href="#">Search dictionary</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" href="#">Text catalogue</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" href="#">Catalogue of cuneiform signs</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" href="#">Contact & members</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" href="#">Input new text</a>
+        </li>
+        <li class="nav-item active">
+            <a class="nav-link" href="admin.html">Admin</a>
+        </li>
+    </ul>
+    <span class="navbar-text" style="padding-right: 1rem">
+            User: <strong>Medici</strong>
+        </span>
+    <div class="navbar-nav nav-item">
+        <a class="nav-link" href="#">Logout</a>
+        <a class="nav-link" href="#">Change Password</a>
+    </div>
+</nav>
+
+<ul class="nav">
+    <li class="nav-item"><a href="#" class="nav-link" title="Users">
+        Users </a></li>
+    <li class="nav-item"><a href="#" class="nav-link active" title="Groups">
+        Groups </a></li>
+    <li class="nav-item"><a href="#" class="nav-link" title="Rules">
+        Rules </a></li>
+
+    <li class="nav-item"><a href="#" class="nav-link" title="Book">
+        Book </a></li>
+    <li class="nav-item"><a href="#" class="nav-link" title="Transliteration">
+        Transliteration </a></li>
+    <li class="nav-item"><a href="#" class="nav-link" title="Book type">
+        Book type </a></li>
+    <li class="nav-item"><a href="#" class="nav-link" title="Object type">
+        Object&nbsp;type </a></li>
+    <li class="nav-item"><a href="#" class="nav-link" title="Surface type">
+        Surface&nbsp;type </a></li>
+
+    <li class="nav-item"><a href="#" class="nav-link" title="Museum">
+        Museum </a></li>
+    <li class="nav-item"><a href="#" class="nav-link" title="Origin">
+        Origin </a></li>
+    <li class="nav-item"><a href="#" class="nav-link" title="Upload">
+        Upload&nbsp;texts </a></li>
+    <li class="nav-item"><a href="#" class="nav-link" title="Replace">
+        Mass&nbsp;replace </a></li>
+</ul>
+
+<!--Content-->
+<div class="content">
+    <div class="display-5">Administrace - Role</div>
+
+    <table class="table table-striped" style="margin-top: 2rem">
+        <thead>
+        <tr>
+            <th scope="col">#</th>
+            <th scope="col">Role</th>
+            <th scope="col">Úroveň zabezpečení</th>
+            <th scope="col">Akce</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+            <th scope="row">1</th>
+            <td>admin</td>
+            <td>99</td>
+            <td class="actions">
+                <a href="#">Detail</a>
+                <a href="#">Uprav</a>
+                <a href="#" onclick="return confirm('Opravdu chcete vybranou roli smazat?');">Smaž</a>
+            </td>
+        </tr>
+        <tr>
+            <th scope="row">2</th>
+            <td>anonymous</td>
+            <td>1</td>
+            <td class="actions">
+                <a href="#">Detail</a>
+                <a href="#">Uprav</a>
+                <a href="#" onclick="return confirm('Opravdu chcete vybranou roli smazat?');">Smaž</a>
+            </td>
+        </tr>
+        <tr>
+            <th scope="row">3</th>
+            <td>User</td>
+            <td>20</td>
+            <td class="actions">
+                <a href="#">Detail</a>
+                <a href="#">Uprav</a>
+                <a href="#" onclick="return confirm('Opravdu chcete vybranou roli smazat?');">Smaž</a>
+            </td>
+        </tr>
+        </tbody>
+    </table>
+</div>
+
+<!--Footer-->
+<footer class="footer">
+    <div class="container">
+        <div class="text-center">
+            © Furat Rahman - Faculty of Philosophy - University of West Bohemia in Pilsen and Cuneiform Circle 2002-2005<br>
+            Created by Medici - Faculty of Applied Science - University of West Bohemia in Pilsen
+        </div>
+    </div>
+</footer>
+</body>
+</html>
\ No newline at end of file
diff --git a/prototype/landing-page.html b/prototype/landing-page.html
new file mode 100644
index 0000000..209f4d6
--- /dev/null
+++ b/prototype/landing-page.html
@@ -0,0 +1,175 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+
+    <title>Old Babylonian Text Corpus >> PROTOTYP</title>
+    <style>
+        .header-logo {
+            background-color: #006666;
+            color: white;
+            padding: 16px;
+            font-size: 2rem;
+            margin-bottom: 0;
+        }
+
+        .display-4 {
+            font-size: 2.5rem;
+        }
+
+        .display-4 a {
+            color: white;
+        }
+
+        .display-4 a:hover {
+            text-decoration: none;
+        }
+
+        .display-4 a:active {
+            color: white;
+        }
+
+        .display-4 a:visited {
+            color: white;
+        }
+
+        .display-5 {
+            font-size: 2rem;
+            font-weight: 300;
+            line-height: 1.2;
+        }
+
+        .content {
+            margin: 32px 64px;
+        }
+
+        html {
+            position: relative;
+            min-height: 100%;
+        }
+        body {
+            /* Margin bottom by footer height + margin */
+            margin-bottom: 96px;
+        }
+        .footer {
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            /* Set the fixed height of the footer here */
+            height: 64px;
+            padding: 8px;
+            background-color: #003366;
+            color: rgba(255,255,255,.5);
+        }
+
+        .navbar.navbar-expand-lg {
+            padding-top: 0;
+            padding-bottom: 0;
+        }
+    </style>
+</head>
+<body>
+    <!--Navbar-->
+    <div class="jumbotron jumbotron-fluid header-logo">
+        <div class="container text-center">
+            <div class="display-4"><a href="landing-page.html">Old Babylonian Text Corpus</a></div>
+        </div>
+    </div>
+    <nav class="navbar navbar-expand-lg navbar-dark bg-primary" style="background-color: #003366 !important;">
+        <ul class="navbar-nav mr-auto">
+            <li class="nav-item">
+                <a class="nav-link" href="search-texts.html">Search & edit texts</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#">Search dictionary</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#">Text catalogue</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#">Catalogue of cuneiform signs</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#">Contact & members</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#">Input new text</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="admin.html">Admin</a>
+            </li>
+        </ul>
+        <span class="navbar-text" style="padding-right: 1rem">
+            User: <strong>Medici</strong>
+        </span>
+        <div class="navbar-nav nav-item">
+            <a class="nav-link" href="#">Logout</a>
+            <a class="nav-link" href="#">Change Password</a>
+        </div>
+    </nav>
+
+    <!--Content-->
+    <div class="content">
+        <div class="display-5">Old Babylonian Text Corpus by Cuneiform Circle</div>
+        <hr>
+
+            <div class="row">
+                <div class="col">
+                    <dl class="row">
+                        <dt class="col-sm-3">OB motto</dt>
+                        <dd class="col-sm-9">a-na D:na-bi-um-ma-lik a-wi-lim dam-qí-im ša D:AMAR.UTU ù D:na-bi-um GI.DUB.BA-šu ú-še-še-ru (AbB 3,33,1-4)</dd>
+                    </dl>
+
+                    <div class="alert alert-primary">
+                        If you have interest in Old Babylonian Akkadian Texts, don't hesitate to join us! You are welcome!
+                    </div>
+                </div>
+                <div class="col">
+                        <form method="get" action="/utf/utf/show2boger.php" onclick="this.target='_blank'" target="_blank">
+                            <p class="blue">
+                                <label for="borger">Input Borger's ABZ number:</label>
+                                <input class="td5" type="text" id="borger" name="borger" size="3" value="333">
+                                <input class="tlacitko2" type="submit" value=" find ">
+                            </p>
+                            <p class="blue">
+                                This is a quick search to find variants of signs according to Borger's number from Old Babylonian Graphemic Analyses.
+                                <a class="noline" href="/utf/utf/signs.html" onclick="this.target='_blank'">
+                                    Click here for an advanced search.</a>
+
+                            </p>
+                            <p>
+                                <a class="noline" href="/utf/utf/signs.html" target="blank">
+                                    <img src="http://sp105p02-kbs.ff.zcu.cz/img/gar3.gif" width="335" height="35" alt="signs">
+                                </a>
+                            </p>
+                        </form>
+                </div>
+            </div>
+
+        <hr>
+
+        <p>Cuneiform Circle is a community of scholars engaged in the study of the Old Babylonian Akkadian. Our main goal is to create an Old Babylonian Text Corpus, an Old Babylonian Dictionary, and a List of Old Babylonian Cuneiform Signs.</p>
+
+        <p>The Old Babylonian Text Corpus (OBTC) comprises a large text database of the Old Babylonian Akkadian Language (currently 144097 text lines, letters, documents, legal texts, royal inscriptions, omina, mathematical texts etc.).</p>
+
+        <p><strong>All texts are available for search according to sign-chains (transliteration). The search engine in Old Babylonian Text Corpus verse 1 is available for everybody but the search is restricted to the following texts: Codex Hammurapi and AbB 5. The search in all 144097 lines of OBTC verse 2 is available for members only (see how to become a member) .</strong></p>
+
+        <p><strong>Our service includes unique searchable lists of Old Babylonian Signs Variants as appearing in the hand copies selected for the graphemic analysis.</strong></p>
+
+        <p>The work on the project is in progress. We have started in 1988-89 and have accomplished significant advances since. We are currently working towards improving the quality and scope of our databases. The full access to all materials and sources is given to active members only ( see our policy ).</p>
+    </div>
+
+    <!--Footer-->
+    <footer class="footer">
+        <div class="container">
+            <div class="text-center">
+                © Furat Rahman - Faculty of Philosophy - University of West Bohemia in Pilsen and Cuneiform Circle 2002-2005<br>
+                Created by Medici - Faculty of Applied Science - University of West Bohemia in Pilsen
+            </div>
+        </div>
+    </footer>
+</body>
+</html>
\ No newline at end of file
diff --git a/prototype/search-result.html b/prototype/search-result.html
new file mode 100644
index 0000000..1fd5d94
--- /dev/null
+++ b/prototype/search-result.html
@@ -0,0 +1,317 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
+            crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
+            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
+            crossorigin="anonymous"></script>
+
+    <title>Old Babylonian Text Corpus >> PROTOTYP</title>
+    <style>
+        .header-logo {
+            background-color: #006666;
+            color: white;
+            padding: 16px;
+            font-size: 2rem;
+            margin-bottom: 0;
+        }
+
+        .display-4 {
+            font-size: 2.5rem;
+        }
+
+        .display-4 a {
+            color: white;
+        }
+
+        .display-4 a:hover {
+            text-decoration: none;
+        }
+
+        .display-4 a:active {
+            color: white;
+        }
+
+        .display-4 a:visited {
+            color: white;
+        }
+
+        .display-5 {
+            font-size: 2rem;
+            font-weight: 300;
+            line-height: 1.2;
+        }
+
+        .content {
+            margin: 32px 64px;
+        }
+
+        html {
+            position: relative;
+            min-height: 100%;
+        }
+
+        body {
+            /* Margin bottom by footer height + margin */
+            margin-bottom: 96px;
+        }
+
+        .footer {
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            /* Set the fixed height of the footer here */
+            height: 64px;
+            padding: 8px;
+            background-color: #003366;
+            color: rgba(255, 255, 255, .5);
+        }
+
+        .search-options .form-group.row {
+            margin-bottom: 0.5rem;
+        }
+
+        .navbar.navbar-expand-lg {
+            padding-top: 0;
+            padding-bottom: 0;
+        }
+
+        .pagination-header {
+            margin-bottom: 0;
+            margin-top: 1rem;
+        }
+
+        .pagination-header ul {
+            margin-bottom: 0;
+        }
+
+        .linefound {
+            font-weight: bold;
+        }
+
+        .found {
+            font-weight: bold;
+            color: #003366;
+        }
+
+        .page-link {
+            color: #003366;
+        }
+
+        .page-item.active .page-link {
+            background-color: #003366;
+            border-color: #003366;
+        }
+    </style>
+</head>
+<body>
+<!--Navbar-->
+<div class="jumbotron jumbotron-fluid header-logo">
+    <div class="container text-center">
+        <div class="display-4"><a href="landing-page.html">Old Babylonian Text Corpus</a></div>
+    </div>
+</div>
+<nav class="navbar navbar-expand-lg navbar-dark bg-primary" style="background-color: #003366 !important;">
+    <ul class="navbar-nav mr-auto">
+        <li class="nav-item active">
+            <a class="nav-link" href="search-texts.html">Search & edit texts <span class="sr-only">(current)</span></a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" href="#">Search dictionary</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" href="#">Text catalogue</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" href="#">Catalogue of cuneiform signs</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" href="#">Contact & members</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" href="#">Input new text</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" href="admin.html">Admin</a>
+        </li>
+    </ul>
+    <span class="navbar-text" style="padding-right: 1rem">
+            User: <strong>Medici</strong>
+        </span>
+    <div class="navbar-nav nav-item">
+        <a class="nav-link" href="#">Logout</a>
+        <a class="nav-link" href="#">Change Password</a>
+    </div>
+</nav>
+
+<!--Content-->
+<div class="content">
+    <div class="display-5">Search in texts - Results</div>
+
+    <div class="row h-100 pagination-header">
+        <div class="col my-auto">
+            <nav aria-label="Page navigation example">
+                <ul class="pagination">
+                    <li class="page-item"><a class="page-link" href="#"><span aria-hidden="true">&laquo;</span>
+                        <span class="sr-only">Previous</span></a></li>
+                    <li class="page-item"><a class="page-link" href="#"><span aria-hidden="true">&lsaquo;</span>
+                        <span class="sr-only">Previous</span></a></li>
+                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
+                    <li class="page-item"><a class="page-link" href="#">2</a></li>
+                    <li class="page-item"><a class="page-link" href="#">3</a></li>
+                    <li class="page-item"><a class="page-link" href="#">4</a></li>
+                    <li class="page-item"><a class="page-link" href="#">5</a></li>
+                    <li class="page-item"><a class="page-link" href="#"><span aria-hidden="true">&rsaquo;</span>
+                        <span class="sr-only">Next</span></a></li>
+                    <li class="page-item"><a class="page-link" href="#"><span aria-hidden="true">&raquo;</span>
+                        <span class="sr-only">Next</span></a></li>
+                </ul>
+            </nav>
+        </div>
+        <div class="col text-right my-auto">
+            <span class="text-muted align-middle">
+                Total count: 23655. Showing page 1 of 4731 (5 results per site).
+            </span>
+        </div>
+    </div>
+
+
+
+
+    <hr>
+
+    <a href="transliteration-info.html">
+
+        RIME_04, E4.03.07.0009</a>
+    <div>
+        <span class="lineno">1'.</span>
+        <span class="line">[...] x x [...] </span>
+    </div>
+
+    <!-- main found line -->
+    <div>
+        <span class="lineno linefound">2'.</span>
+        <span class="line">[...] a-bi a-bi-<span class="found">šu</span></span>
+    </div>
+    <!-- end of main found line -->
+
+    <div>
+        <span class="lineno">3'.</span>
+        <span class="line">&lt;diŠ:>?[...]-bi-ga &lt;diŠ:>?ḫa-ar-ḫa-ar &lt;diŠ:>?ma-da-ra &lt;/diŠ:>&lt;/diŠ:>&lt;/diŠ:></span>
+    </div>
+
+
+    <hr>
+
+
+    <a href="transliteration-info.html">
+
+        RIME_04, E4.03.07.0009</a>
+    <div>
+        <span class="lineno">7'.</span>
+        <span class="line">[š]a 60 + 20 + 4 GU₂ ši-bi-ir-tam </span>
+    </div>
+
+    <!-- main found line -->
+    <div>
+        <span class="lineno linefound">8'.</span>
+        <span class="line">iš-ti-a-at <span class="found">šu</span>-uk-lu-ul-tam</span>
+    </div>
+    <!-- end of main found line -->
+
+    <div>
+        <span class="lineno">9'.</span>
+        <span class="line">i-na &lt;on:>E₂.TUR₃.KALAM.MA &lt;/on:></span>
+    </div>
+
+
+    <hr>
+
+
+    <a href="transliteration-info.html">
+
+        RIME_04, E4.03.07.0009</a>
+    <div>
+        <span class="lineno">13'.</span>
+        <span class="line">⌈ša⌉ 60 + ⌈20 + 4⌉ GU₂ ši-bi-ir-tam iš-ti-a-at </span>
+    </div>
+
+    <!-- main found line -->
+    <div>
+        <span class="lineno linefound">14'.</span>
+        <span class="line">[<span class="found">š]u</span>-[u]k-lu-ul-tam</span>
+    </div>
+    <!-- end of main found line -->
+
+    <div>
+        <span class="lineno">15'.</span>
+        <span class="line">[i-n]a &lt;on:>E₂.TUR₃.KALAM.MA &lt;/on:></span>
+    </div>
+
+
+    <hr>
+
+
+    <a href="transliteration-info.html">
+
+        RIME_04, E4.03.07.0009</a>
+    <div>
+        <span class="lineno">16'.</span>
+        <span class="line">[u]š-za-az-zu </span>
+    </div>
+
+    <!-- main found line -->
+    <div>
+        <span class="lineno linefound">17'.</span>
+        <span class="line">[<span class="found">š]u</span>-mi ki-ma &lt;DIŠ:&gt;sa-am-su-i-lu-na</span>
+    </div>
+    <!-- end of main found line -->
+
+    <div>
+        <span class="lineno">18'.</span>
+        <span class="line">[...] x ⌈li-IK⌉-x [...] </span>
+    </div>
+
+
+    <hr>
+
+
+    <a href="transliteration-info.html">
+
+        RIME_04, E4.05.15.0002</a>
+    <div>
+        <span class="lineno">4.</span>
+        <span class="line">DUMU &lt;diŠ:>D:i-pi₂-iq-D:IŠKUR &lt;/diŠ:></span>
+    </div>
+
+    <!-- main found line -->
+    <div>
+        <span class="lineno linefound">5.</span>
+        <span class="line">a-na ba-la-ṭi-<span class="found">šu</span></span>
+    </div>
+    <!-- end of main found line -->
+
+    <div>
+        <span class="lineno">6.</span>
+        <span class="line">[i-qi₂-iš] </span>
+    </div>
+
+
+</div>
+
+<!--Footer-->
+<footer class="footer">
+    <div class="container">
+        <div class="text-center">
+            © Furat Rahman - Faculty of Philosophy - University of West Bohemia in Pilsen and Cuneiform Circle 2002-2005<br>
+            Created by Medici - Faculty of Applied Science - University of West Bohemia in Pilsen
+        </div>
+    </div>
+</footer>
+</body>
+</html>
\ No newline at end of file
diff --git a/prototype/search-texts.html b/prototype/search-texts.html
new file mode 100644
index 0000000..e4fe328
--- /dev/null
+++ b/prototype/search-texts.html
@@ -0,0 +1,719 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
+            crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
+            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
+            crossorigin="anonymous"></script>
+
+    <title>Old Babylonian Text Corpus >> PROTOTYP</title>
+    <style>
+        .header-logo {
+            background-color: #006666;
+            color: white;
+            padding: 16px;
+            font-size: 2rem;
+            margin-bottom: 0;
+        }
+
+        .display-4 {
+            font-size: 2.5rem;
+        }
+
+        .display-4 a {
+            color: white;
+        }
+
+        .display-4 a:hover {
+            text-decoration: none;
+        }
+
+        .display-4 a:active {
+            color: white;
+        }
+
+        .display-4 a:visited {
+            color: white;
+        }
+
+        .display-5 {
+            font-size: 2rem;
+            font-weight: 300;
+            line-height: 1.2;
+        }
+
+        .content {
+            margin: 32px 64px;
+        }
+
+        html {
+            position: relative;
+            min-height: 100%;
+        }
+
+        body {
+            /* Margin bottom by footer height + margin */
+            margin-bottom: 96px;
+        }
+
+        .footer {
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            /* Set the fixed height of the footer here */
+            height: 64px;
+            padding: 8px;
+            background-color: #003366;
+            color: rgba(255, 255, 255, .5);
+        }
+
+        .search-options .form-group.row {
+            margin-bottom: 0.5rem;
+        }
+
+        .navbar.navbar-expand-lg {
+            padding-top: 0;
+            padding-bottom: 0;
+        }
+    </style>
+</head>
+<body>
+<!--Navbar-->
+<div class="jumbotron jumbotron-fluid header-logo">
+    <div class="container text-center">
+        <div class="display-4"><a href="landing-page.html">Old Babylonian Text Corpus</a></div>
+    </div>
+</div>
+<nav class="navbar navbar-expand-lg navbar-dark bg-primary" style="background-color: #003366 !important;">
+    <ul class="navbar-nav mr-auto">
+        <li class="nav-item active">
+            <a class="nav-link" href="search-texts.html">Search & edit texts <span class="sr-only">(current)</span></a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" href="#">Search dictionary</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" href="#">Text catalogue</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" href="#">Catalogue of cuneiform signs</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" href="#">Contact & members</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" href="#">Input new text</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" href="admin.html">Admin</a>
+        </li>
+    </ul>
+    <span class="navbar-text" style="padding-right: 1rem">
+            User: <strong>Medici</strong>
+        </span>
+    <div class="navbar-nav nav-item">
+        <a class="nav-link" href="#">Logout</a>
+        <a class="nav-link" href="#">Change Password</a>
+    </div>
+</nav>
+
+<!--Content-->
+<div class="content">
+    <div class="display-5">Search in transliterations</div>
+    <hr>
+    <form action="search-result.html" method="post" enctype="multipart/form-data">
+        <div class="form-group">
+            <div class="row">
+                <div class="col">
+                    <label for="word1">Word 1:</label>
+                    <input type="text" class="form-control" id="word1">
+                </div>
+                <div class="col">
+                    <label for="word2">Word 2:</label>
+
+                    <div class="input-group">
+
+                        <select name="word2-op" class="form-control">
+                            <option value="">- NOT USED -</option>
+                            <option value="and">AND</option>
+                            <option value="or">OR</option>
+                            <option value="not">AND NOT</option>
+                        </select>
+                        <input id="word2" type="text" class="form-control">
+                    </div>
+                </div>
+                <div class="col">
+                    <label for="word3">Word 3:</label>
+
+                    <div class="input-group">
+
+                        <select name="word3-op" class="form-control">
+                            <option value="">- NOT USED -</option>
+                            <option value="and">AND</option>
+                            <option value="or">OR</option>
+                            <option value="not">AND NOT</option>
+                        </select>
+                        <input id="word3" type="text" class="form-control">
+                    </div>
+                </div>
+            </div>
+            <input name="exact-match" id="exact-match" type="checkbox">
+            <label for="exact-match">Exact Match</label>
+            <br>
+            <input name="work-with-lists" id="work-with-lists" type="checkbox">
+            <label for="work-with-lists">Work with a list of names: </label>
+            <input type="radio" name="list-of-names-radio" id="personal-radio" value="personal">
+            <label for="personal-radio">Personal names</label>
+            <input type="radio" name="list-of-names-radio" id="divine-radio" value="divine">
+            <label for="divine-radio">Divine names</label>
+            <br>
+            <a href="/nobtc/app/webroot/pages/hints-for-search">Hints for search</a>
+            <hr>
+
+            <div class="search-options">
+                <div class="form-group row">
+                    <label for="book" class="col-sm-2 col-form-label">Book</label>
+                    <div class="col-sm-3">
+                        <div class="input-group">
+
+                            <select name="book-op" class="form-control">
+                                <option value="equals">
+                                    equals
+                                </option>
+                                <option value="not equals">
+                                    not equals
+                                </option>
+                                <option value="contains" selected="selected">
+                                    contains
+                                </option>
+                                <option value="begins with">
+                                    begins with
+                                </option>
+                                <option value="ends with">
+                                    ends with
+                                </option>
+                            </select>
+                            <input type="text" id="book" name="book" class="form-control">
+                        </div>
+                    </div>
+                </div>
+                <div class="form-group row">
+                    <label for="museum-no" class="col-sm-2 col-form-label">Museum number</label>
+                    <div class="col-sm-3">
+                        <div class="input-group">
+
+                            <select name="museum-no-op" class="form-control">
+                                <option value="equals">
+                                    equals
+                                </option>
+                                <option value="not equals">
+                                    not equals
+                                </option>
+                                <option value="contains" selected="selected">
+                                    contains
+                                </option>
+                                <option value="begins with">
+                                    begins with
+                                </option>
+                                <option value="ends with">
+                                    ends with
+                                </option>
+                            </select>
+                            <input type="text" name="museum-no" id="museum-no" class="form-control">
+                        </div>
+                    </div>
+                </div>
+                <div class="form-group row">
+                    <label for="id_book_type" class="col-sm-2 col-form-label">Type</label>
+                    <div class="col-sm-3">
+                        <div class="input-group">
+
+                            <select name="book-type-op" class="form-control">
+                                <option value="is">
+                                    is
+                                </option>
+                                <option value="is not">
+                                    is not
+                                </option>
+                            </select>
+                            <select name="id_book_type" id="id_book_type" class="form-control">
+
+                                <option value="0" label="- NOT SELECTED -">
+                                    - NOT SELECTED -
+                                </option>
+                                <option value="1" label="letter">
+                                    letter
+                                </option>
+                                <option value="2" label="document">
+                                    document
+                                </option>
+                                <option value="3" label="epic">
+                                    epic
+                                </option>
+                                <option value="4" label="hymn">
+                                    hymn
+                                </option>
+                                <option value="5" label="incantation">
+                                    incantation
+                                </option>
+                                <option value="6" label="legal text">
+                                    legal text
+                                </option>
+                                <option value="8" label="mathematics">
+                                    mathematics
+                                </option>
+                                <option value="9" label="omina">
+                                    omina
+                                </option>
+                                <option value="10" label="other">
+                                    other
+                                </option>
+                                <option value="11" label="royal inscription">
+                                    royal inscription
+                                </option>
+                                <option value="13" label="school text">
+                                    school text
+                                </option>
+
+                            </select>
+                        </div>
+                    </div>
+                </div>
+                <div class="form-group row">
+                    <label for="id_origin" class="col-sm-2 col-form-label">Origin</label>
+                    <div class="col-sm-3">
+                        <div class="input-group">
+
+                            <select name="origin-op" class="form-control">
+                                <option value="is">
+                                    is
+                                </option>
+                                <option value="is not">
+                                    is not
+                                </option>
+                            </select>
+                            <select name="id_origin" id="id_origin" class="form-control">
+
+                                <option value="0" label="- NOT SELECTED -">
+                                    / - NOT SELECTED -
+                                </option>
+                                <option value="9" label="Tell Ḫarīrī">
+                                    Mari / Tell Ḫarīrī
+                                </option>
+                                <option value="10" label="Išān Baḫriyāt">
+                                    Isin / Išān Baḫriyāt
+                                </option>
+                                <option value="11" label="Nuffar">
+                                    Nippur / Nuffar
+                                </option>
+                                <option value="1" label="Babylon">
+                                    Bābili / Babylon
+                                </option>
+                                <option value="2" label="Tell Inġarra, Tell al-Uḫaimir">
+                                    Kiš / Tell Inġarra, Tell al-Uḫaimir
+                                </option>
+                                <option value="3" label="Abū Ḫaṭab">
+                                    Kisurra / Abū Ḫaṭab
+                                </option>
+                                <option value="4" label="unknown">
+                                    Lagaba / unknown
+                                </option>
+                                <option value="5" label="as-Sankara">
+                                    Larsa / as-Sankara
+                                </option>
+                                <option value="6" label="Tell Harmal">
+                                    Šaduppûm / Tell Harmal
+                                </option>
+                                <option value="12" label="Tell Asmar">
+                                    Ešnunna / Tell Asmar
+                                </option>
+                                <option value="13" label="Tell al-Muqaiyar">
+                                    Ur / Tell al-Muqaiyar
+                                </option>
+                                <option value="14" label="Tulūl al-Ḫumr">
+                                    - / Tulūl al-Ḫumr
+                                </option>
+                                <option value="15" label="Tell Abū Duwari">
+                                    Maškan-šāpir / Tell Abū Duwari
+                                </option>
+                                <option value="16" label="Khafajah">
+                                    / Khafajah
+                                </option>
+                                <option value="17" label="Borsippa, Birs Nimrūd">
+                                    Barsip / Borsippa, Birs Nimrūd
+                                </option>
+                                <option value="18" label="Tell Abū Ḫabba">
+                                    Sippar / Tell Abū Ḫabba
+                                </option>
+                                <option value="19" label="Tell Muḫammad">
+                                    Diniktum? / Tell Muḫammad
+                                </option>
+                                <option value="21" label="Khafajah">
+                                    Dūr-Samsu-iluna / Khafajah
+                                </option>
+                                <option value="22" label="">
+                                    unknown /
+                                </option>
+                                <option value="24" label="Sūsa">
+                                    Šūšan / Sūsa
+                                </option>
+                                <option value="23" label="Warka">
+                                    Uruk / Warka
+                                </option>
+                                <option value="25" label="Ishchali">
+                                    Nērebtum? / Ishchali
+                                </option>
+                                <option value="26" label="Cytheria (island)">
+                                    / Cytheria (island)
+                                </option>
+                                <option value="27" label="Cyprus">
+                                    Iadnāna / Cyprus
+                                </option>
+                                <option value="29" label="Qalʾat Šarqāṭ">
+                                    Aššur / Qalʾat Šarqāṭ
+                                </option>
+                                <option value="28" label="Tell Ḫaddād">
+                                    Mê-Turran / Tell Ḫaddād
+                                </option>
+                                <option value="30" label="Tell Leilān">
+                                    Šubat-Enlil / Tell Leilān
+                                </option>
+                                <option value="31" label="Acem Höyük">
+                                    ? / Acem Höyük
+                                </option>
+                                <option value="32" label="Tell al-ʾAšāra">
+                                    Terqa / Tell al-ʾAšāra
+                                </option>
+                                <option value="33" label="Išān Dhaḫāk">
+                                    / Išān Dhaḫāk
+                                </option>
+                                <option value="34" label="Tell ad-Dibāʾī">
+                                    Zaralulu / Tell ad-Dibāʾī
+                                </option>
+                                <option value="35" label="Tell al-Suleimaḫ">
+                                    Batir? / Tell al-Suleimaḫ
+                                </option>
+                                <option value="36" label="Bardi Sanjian in Bītwāta">
+                                    / Bardi Sanjian in Bītwāta
+                                </option>
+                                <option value="37" label="near Tūz Ḫurmati">
+                                    Ḫuršītum? / near Tūz Ḫurmati
+                                </option>
+                                <option value="38" label="Tell Šamšāra">
+                                    Šušarrā / Tell Šamšāra
+                                </option>
+                                <option value="39" label="Dura-Europos">
+                                    Damara / Dura-Europos
+                                </option>
+                                <option value="20" label="Tell ar-Rimāḫ">
+                                    Qaṭṭarā / Tell ar-Rimāḫ
+                                </option>
+                                <option value="40" label="Tell Açana">
+                                    Alalaḫ / Tell Açana
+                                </option>
+                                <option value="7" label="Rās aš-Šamra">
+                                    Ugarit / Rās aš-Šamra
+                                </option>
+                                <option value="41" label="Tell Mardiḫ">
+                                    Ebla / Tell Mardiḫ
+                                </option>
+                                <option value="42" label="Hillah (near Babylon)">
+                                    / Hillah (near Babylon)
+                                </option>
+                                <option value="43" label="Bismāya">
+                                    Adab / Bismāya
+                                </option>
+                                <option value="44" label="al-Hibā">
+                                    Lagaš / al-Hibā
+                                </option>
+                                <option value="45" label="Tell ed-Dēr">
+                                    Sippar-Iaḫrūrum / Tell ed-Dēr
+                                </option>
+                                <option value="46" label="Tell Dulaiḫim or Tell Muḫaṭṭaṭ">
+                                    Dilbat / Tell Dulaiḫim or Tell Muḫaṭṭaṭ
+                                </option>
+
+                            </select>
+                        </div>
+                    </div>
+                </div>
+                <div class="form-group row">
+                    <label for="reg_no" class="col-sm-2 col-form-label">Registration / Ex. number</label>
+                    <div class="col-sm-3">
+                        <div class="input-group">
+
+                            <select name="reg_no-op" class="form-control">
+                                <option value="equals">
+                                    equals
+                                </option>
+                                <option value="not equals">
+                                    not equals
+                                </option>
+                                <option value="contains" selected="selected">
+                                    contains
+                                </option>
+                                <option value="begins with">
+                                    begins with
+                                </option>
+                                <option value="ends with">
+                                    ends with
+                                </option>
+                            </select>
+                            <input type="text" id="reg_no" name="reg_no" class="form-control">
+                        </div>
+                    </div>
+                </div>
+                <div class="form-group row">
+                    <label for="date" class="col-sm-2 col-form-label">Date</label>
+                    <div class="col-sm-3">
+                        <div class="input-group">
+
+                            <select name="date-op" class="form-control">
+                                <option value="equals">
+                                    equals
+                                </option>
+                                <option value="not equals">
+                                    not equals
+                                </option>
+                                <option value="contains" selected="selected">
+                                    contains
+                                </option>
+                                <option value="begins with">
+                                    begins with
+                                </option>
+                                <option value="ends with">
+                                    ends with
+                                </option>
+                            </select>
+                            <input type="text" id="date" name="date" class="form-control">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <hr>
+
+            <label for="line-count">Representation of search result:</label>
+            <div class="form-inline">
+                <div class="form-group">
+                    <small class="text-muted">
+                        Print
+                    </small>
+                    <select name="line-count" id="line-count" class="form-control form-control-sm mx-sm-3">
+                        <option value="0" selected="selected">0</option>
+                        <option value="1">1</option>
+                        <option value="2">2</option>
+                        <option value="3">3</option>
+                        <option value="5">5</option>
+                        <option value="10">10</option>
+                        <option value="15">15</option>
+                    </select>
+                    <small id="passwordHelpInline" class="text-muted">
+                        lines before and after found line.
+                    </small>
+                </div>
+            </div>
+            <div class="form-inline">
+                <div class="form-group">
+                    <small class="text-muted">
+                        Show
+                    </small>
+                    <select name="r_limit" class="form-control form-control-sm mx-sm-3">
+                        <option value="1">1</option>
+                        <option value="2">2</option>
+                        <option value="3">3</option>
+                        <option value="5" selected="selected">5</option>
+                        <option value="10">10</option>
+                        <option value="15">15</option>
+                        <option value="30">30</option>
+                    </select>
+                    <small class="text-muted">
+                        found transliteration per site.
+                    </small>
+                </div>
+            </div>
+        </div>
+        <div class="form-group row">
+            <div class="col-sm-10">
+                <button type="submit" class="btn btn-outline-dark">Search</button>
+            </div>
+        </div>
+
+    </form>
+
+    <div class="card" style="width: 24.5rem;">
+        <div class="card-body">
+            <div id="keyboard">
+                <div class="display-5" style="margin-bottom: 0.5rem;">Keyboard</div>
+                <div class="cont">
+                    <div id="keyboard-div">
+                        <table>
+                            <tbody>
+                            <tr>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="á"
+                                           onclick="top.keyboard.press('á')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="é"
+                                           onclick="top.keyboard.press('é')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="í"
+                                           onclick="top.keyboard.press('í')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="ú"
+                                           onclick="top.keyboard.press('ú')"></td>
+                                <td></td>
+                                <td></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="Á"
+                                           onclick="top.keyboard.press('Á')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="É"
+                                           onclick="top.keyboard.press('É')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="Í"
+                                           onclick="top.keyboard.press('Í')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="Ú"
+                                           onclick="top.keyboard.press('Ú')"></td>
+                            </tr>
+                            <tr>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="à"
+                                           onclick="top.keyboard.press('à')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="è"
+                                           onclick="top.keyboard.press('è')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="ì"
+                                           onclick="top.keyboard.press('ì')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="ù"
+                                           onclick="top.keyboard.press('ù')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="ò"
+                                           onclick="top.keyboard.press('ò')"></td>
+                                <td></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="À"
+                                           onclick="top.keyboard.press('À')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="È"
+                                           onclick="top.keyboard.press('È')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="Ì"
+                                           onclick="top.keyboard.press('Ì')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="Ù"
+                                           onclick="top.keyboard.press('Ù')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="Ò"
+                                           onclick="top.keyboard.press('Ò')"></td>
+                            </tr>
+                            <tr>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="â"
+                                           onclick="top.keyboard.press('â')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="ê"
+                                           onclick="top.keyboard.press('ê')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="î"
+                                           onclick="top.keyboard.press('î')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="û"
+                                           onclick="top.keyboard.press('û')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="ô"
+                                           onclick="top.keyboard.press('ô')"></td>
+                                <td></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="Â"
+                                           onclick="top.keyboard.press('Â')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="Ê"
+                                           onclick="top.keyboard.press('Ê')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="Û"
+                                           onclick="top.keyboard.press('Û')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="Ô"
+                                           onclick="top.keyboard.press('Ô')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="⌈"
+                                           onclick="top.keyboard.press('⌈')">
+                                    <input class="btn btn-sm btn-outline-dark" type="button" value="⌉"
+                                           onclick="top.keyboard.press('⌉')"></td>
+                            </tr>
+
+
+                            <tr>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="ā"
+                                           onclick="top.keyboard.press('ā')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="ē"
+                                           onclick="top.keyboard.press('ē')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="ī"
+                                           onclick="top.keyboard.press('ī')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="ū"
+                                           onclick="top.keyboard.press('ū')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="ō"
+                                           onclick="top.keyboard.press('ō')"></td>
+                                <td></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="Ā"
+                                           onclick="top.keyboard.press('Ā')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="Ē"
+                                           onclick="top.keyboard.press('Ē')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="Ī"
+                                           onclick="top.keyboard.press('Ī')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="Ū"
+                                           onclick="top.keyboard.press('Ū')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="Ō"
+                                           onclick="top.keyboard.press('Ō')"></td>
+                            </tr>
+                            <tr>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="ʾ"
+                                           onclick="top.keyboard.press('ʾ')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="ʿ"
+                                           onclick="top.keyboard.press('ʿ')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="ṣ"
+                                           onclick="top.keyboard.press('ṣ')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="š"
+                                           onclick="top.keyboard.press('š')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="ṭ"
+                                           onclick="top.keyboard.press('ṭ')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="ḫ"
+                                           onclick="top.keyboard.press('ḫ')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="Ṣ"
+                                           onclick="top.keyboard.press('Ṣ')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="Š"
+                                           onclick="top.keyboard.press('Š')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="Ṭ"
+                                           onclick="top.keyboard.press('Ṭ')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="Ḫ"
+                                           onclick="top.keyboard.press('Ḫ')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="["
+                                           onclick="top.keyboard.press('[')">
+                                    <input class="btn btn-sm btn-outline-dark" type="button" value="]"
+                                           onclick="top.keyboard.press(']')"></td>
+                            </tr>
+                            <tr>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="₁"
+                                           onclick="top.keyboard.press('₁')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="₂"
+                                           onclick="top.keyboard.press('₂')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="₃"
+                                           onclick="top.keyboard.press('₃')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="₄"
+                                           onclick="top.keyboard.press('₄')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="₅"
+                                           onclick="top.keyboard.press('₅')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="₆"
+                                           onclick="top.keyboard.press('₆')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="₇"
+                                           onclick="top.keyboard.press('₇')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="₈"
+                                           onclick="top.keyboard.press('₈')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="₉"
+                                           onclick="top.keyboard.press('₉')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="₀"
+                                           onclick="top.keyboard.press('₀')"></td>
+                                <td><input class="btn btn-sm btn-outline-dark" type="button" value="ｘ"
+                                           onclick="top.keyboard.press('ｘ')"></td>
+                            </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<!--Footer-->
+<footer class="footer">
+    <div class="container">
+        <div class="text-center">
+            © Furat Rahman - Faculty of Philosophy - University of West Bohemia in Pilsen and Cuneiform Circle 2002-2005<br>
+            Created by Medici - Faculty of Applied Science - University of West Bohemia in Pilsen
+        </div>
+    </div>
+</footer>
+</body>
+</html>
\ No newline at end of file
diff --git a/prototype/transliteration-info.html b/prototype/transliteration-info.html
new file mode 100644
index 0000000..bcaab28
--- /dev/null
+++ b/prototype/transliteration-info.html
@@ -0,0 +1,280 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
+            crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
+            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
+            crossorigin="anonymous"></script>
+
+    <title>Old Babylonian Text Corpus >> PROTOTYP</title>
+    <style>
+        .header-logo {
+            background-color: #006666;
+            color: white;
+            padding: 16px;
+            font-size: 2rem;
+            margin-bottom: 0;
+        }
+
+        .display-4 {
+            font-size: 2.5rem;
+        }
+
+        .display-4 a {
+            color: white;
+        }
+
+        .display-4 a:hover {
+            text-decoration: none;
+        }
+
+        .display-4 a:active {
+            color: white;
+        }
+
+        .display-4 a:visited {
+            color: white;
+        }
+
+        .display-5 {
+            font-size: 2rem;
+            font-weight: 300;
+            line-height: 1.2;
+        }
+
+        .display-6 {
+            font-size: 1.5rem;
+            font-weight: 300;
+            line-height: 1.2;
+        }
+
+        .content {
+            margin: 32px 64px;
+        }
+
+        html {
+            position: relative;
+            min-height: 100%;
+        }
+
+        body {
+            /* Margin bottom by footer height + margin */
+            margin-bottom: 96px;
+        }
+
+        .footer {
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            /* Set the fixed height of the footer here */
+            height: 64px;
+            padding: 8px;
+            background-color: #003366;
+            color: rgba(255, 255, 255, .5);
+        }
+
+        .search-options .form-group.row {
+            margin-bottom: 0.5rem;
+        }
+
+        .navbar.navbar-expand-lg {
+            padding-top: 0;
+            padding-bottom: 0;
+        }
+    </style>
+</head>
+<body>
+<!--Navbar-->
+<div class="jumbotron jumbotron-fluid header-logo">
+    <div class="container text-center">
+        <div class="display-4"><a href="landing-page.html">Old Babylonian Text Corpus</a></div>
+    </div>
+</div>
+<nav class="navbar navbar-expand-lg navbar-dark bg-primary" style="background-color: #003366 !important;">
+    <ul class="navbar-nav mr-auto">
+        <li class="nav-item active">
+            <a class="nav-link" href="search-texts.html">Search & edit texts <span class="sr-only">(current)</span></a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" href="#">Search dictionary</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" href="#">Text catalogue</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" href="#">Catalogue of cuneiform signs</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" href="#">Contact & members</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" href="#">Input new text</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" href="admin.html">Admin</a>
+        </li>
+    </ul>
+    <span class="navbar-text" style="padding-right: 1rem">
+            User: <strong>Medici</strong>
+        </span>
+    <div class="navbar-nav nav-item">
+        <a class="nav-link" href="#">Logout</a>
+        <a class="nav-link" href="#">Change Password</a>
+    </div>
+</nav>
+
+<!--Content-->
+<div class="content">
+    <div class="display-5">Transliteration info</div>
+    <hr>
+
+    <div class="display-6">
+        <div class="text-muted">Catalogue information</div>
+    </div>
+    <div>
+
+        <div>
+            <a href="/nobtc/app/webroot/book/edit/5">edit book</a> |
+            <a href="/nobtc/app/webroot/transliteration/edit/34">edit transliteration info</a>
+        </div>
+
+    </div>
+    <div class="container-fluid">
+        <dl class="row">
+
+            <dt class="col-sm-3">Book abrev.</dt>
+            <dd class="col-sm-9">RIME_04</dd>
+
+            <dt class="col-sm-3">Book name</dt>
+            <dd class="col-sm-9">The Royal Inscriptions of Mesopotamia, Early periods</dd>
+
+            <dt class="col-sm-3">Book subtitle</dt>
+            <dd class="col-sm-9">Old Babylonian Period (2003-1595 BC)</dd>
+
+            <dt class="col-sm-3">Book author</dt>
+            <dd class="col-sm-9">Douglas Frayne</dd>
+
+            <dt class="col-sm-3">Place of pub.</dt>
+            <dd class="col-sm-9">Toronto - Buffalo - London</dd>
+
+            <dt class="col-sm-3">Date of pub.</dt>
+            <dd class="col-sm-9">1990</dd>
+
+            <dt class="col-sm-3">Pages</dt>
+            <dd class="col-sm-9">6-829</dd>
+
+            <dt class="col-sm-3">Book desc.</dt>
+            <dd class="col-sm-9">Data input by N. Nováková and L. Pecha, corrections by Jana Kořínková and N. Nováková.</dd>
+
+            <dt class="col-sm-3">Volume</dt>
+            <dd class="col-sm-9">4</dd>
+
+            <dt class="col-sm-3">Volume number</dt>
+            <dd class="col-sm-9"></dd>
+
+            <dt class="col-sm-3">Book type</dt>
+            <dd class="col-sm-9">royal inscription</dd>
+
+            <dt class="col-sm-3">Chapter</dt>
+            <dd class="col-sm-9">E4.03.07.0009</dd>
+
+            <dt class="col-sm-3">Museum</dt>
+            <dd class="col-sm-9">Vorderasiatische Museum, Berlin</dd>
+
+            <dt class="col-sm-3">Museum no.</dt>
+            <dd class="col-sm-9">VAT 1433</dd>
+
+            <dt class="col-sm-3">Reg. (Excavation) no.</dt>
+            <dd class="col-sm-9"></dd>
+
+            <dt class="col-sm-3">Date</dt>
+            <dd class="col-sm-9">Samsu-iluna, year 31</dd>
+
+            <dt class="col-sm-3">Origin (Ancient name / Modern name)</dt>
+            <dd class="col-sm-9"> /</dd>
+
+            <dt class="col-sm-3">Note</dt>
+            <dd class="col-sm-9"></dd>
+
+            <dt class="col-sm-3">References (handcopy)</dt>
+            <dd class="col-sm-9">VAS 16 , no. 156<br></dd>
+
+        </dl>
+    </div>
+
+    <hr>
+    <div class="display-6">
+        <div class="text-muted">Transliteration data</div>
+    </div>
+
+
+    <a href="/nobtc/app/webroot/transliteration/edit_transliteration/34">edit</a>
+
+    <div class="container-fluid">
+            <b>tablet</b> <br>
+            <div class="noname" id="tablet-div">
+
+                <i>obverse</i> <br>
+                1. um-ma &lt;DIŠ:&gt;i-bi₂-i₃-lum            <!--f--> <br>
+                2. a-wi-lu-um            <!--f--> <br>
+                3. mi-i-ma            <!--f--> <br>
+                4. iš-tu ti-in-šu            <!--f--> <br>
+                5. tu-ga-da-u₂            <!--f--> <br>
+                6. KU₃ BI/AM i₃-na ba-ab-ti-im            <!--f--> <br>
+                7. na-a-ti            <!--f--> <br>
+                8. a-ti a-wa-at-ga            <!--f--> <br>
+                <hr>
+                <i>reverse</i> <br>
+                9. i₃-la-ga-na            <!--f--> <br>
+                10. a-na ma-ma-na            <!--f--> <br>
+                11. u₂-la a-ra-ga-am            <!--f--> <br>
+                12. a-na ba-ab-ti-šu x            <!--f--> <br>
+                13. e-ga-la-am ša-al            <!--f--> <br>
+                14. a-wa-at-ga            <!--f--> <br>
+                15. li-ir-ḫi-ṣa-am            <!--f--> <br>
+                16. aš₂-ra-ki-am a-šu-mi            <!--f--> <br>
+                17. ba-ab-ti-šu            <!--f--> <br>
+                18. a-na ar-ši-iḫ            <!--f--> <br>
+                <hr>
+                <i>left edge</i> <br>
+                19. qi₂-bi₂-lu-um            <!--f--> <br>
+                20. pi-laḫ₃ si x            <!--f--> <br>
+                <hr>
+
+            </div>
+            <b>envelope</b> <br>
+            <div class="noname" id="envelope-div">
+                <i>obverse</i> <br>
+                1. DUB &lt;DIŠ:&gt;i-b(i₂-i₃-lum)            <!--f--> <br>
+                2. a-na &lt;DIŠ:&gt;šu-(i₃-li₂)            <!--f--> <br>
+            </div>
+        </div>
+
+    <hr>
+    <div class="display-6">
+        <div class="text-muted">Revision history</div>
+    </div>
+    <div class="container-fluid">
+        <br>
+        2006-01-06 - Imported in June 2006 from OBTC verse 1 <br>
+        2007-01-24 - Edited catalogue information. sk01 <br>
+        2007-06-21 - Edited transliteration. ks01 <br>
+    </div>
+</div>
+
+<!--Footer-->
+<footer class="footer">
+    <div class="container">
+        <div class="text-center">
+            © Furat Rahman - Faculty of Philosophy - University of West Bohemia in Pilsen and Cuneiform Circle 2002-2005<br>
+            Created by Medici - Faculty of Applied Science - University of West Bohemia in Pilsen
+        </div>
+    </div>
+</footer>
+</body>
+</html>
\ No newline at end of file
