<meta charset="utf-8"></meta>
<title>RFID SIP2 Selfcheck</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+<link href='http://fonts.googleapis.com/css?family=Roboto&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<style type="text/css">
+
+body, input {
+ font-family: 'Roboto', sans-serif;
+ font-size: 150%;
+ /* disable selection which brings havoc on touchscreens */
+ -webkit-user-select: none;
+ -moz-user-select: -moz-none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+body {
+ background: #f0f0ff;
+ margin: 2em;
+}
+
+
+h1 {
+ position: absolute;
+ top: -0.5em;
+ left: 0.5em;
+ font-size: 100%;
+}
+
.status {
background: #ff8;
}
background: #cfc;
}
-label[for=pull-reader] {
- position: absolute;
- top: 1em;
- right: 1em;
- background: #eee;
-}
-
-,page {
- font-size: 300%;
- border: 10px solid #ccc;
-
+.page {
+ border: 2em solid #fff;
+ border-radius: 1em;
+ background: #fff;
}
-#debug {
+#tags {
position: fixed;
width: 20em;
top: 0;
right: 0;
+ font-size: 50%;
}
input[type=button] {
- padding-top: 2em;
+ display: block;
+ float: left;
+ width: 50%;
+ height: 6em;
+ font-size: 100%;
+}
+
+.button {
+ margin-top: 1em;
display: block;
width: 100%;
- height: 10em;
+ position: absolute;
+ left: 0;
+ bottom: 0;
+}
+
+#timeout {
+ display: none;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ margin-left: -8em; /* width + 2 * padding / 2 */
+ margin-top: -5em;
+ width: 12em;
+ height: 8em;
+ background: #ff8;
+ padding: 2em;
+ border: 0.5em solid #f00;
+ text-align: center;
+ font-size: 100%;
+}
+
+#working {
+ display: none;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ margin-left: -250px; /* 500 / 2 */
+ margin-top: -187px; /* 375 / 2 */
}
</style>
</head>
<body>
-<div id="debug">
-
-<label for=pull-reader>
-<input id=pull-reader type=checkbox checked=1>
-active
-</label>
-
<div id="tags">
RFID reader not found or driver program not started.
</div>
+<h1>Knjižnica Filozofskog fakulteta</h1>
+
+<div id="timeout">
+Timeout in <span id="tick">99</span> seconds.
+<div class="button">
+<input type=button value="continue" onClick="start_timeout();" style="width:100%">
+</div>
+</div>
+
+
+<div id="working">
+<img src="/examples/giphy.gif">
</div>
-<h1>Knjižnica Filozofskog fakulteta</h1>
<div class="page" id="start">
Put borrower card on a reader to borrow books
-->
-Ako želite posuditi knjigu, najprije stavite iskaznicu na za to previđeno mjesto.
+Ako želite posuditi knjigu, najprije stavite iskaznicu na za to predviđeno mjesto.
<hr>
Select checkin button to return books.
-->
-Ako želite vratiti knjigu, pristisnite ovaj gumb.
+Ako želite vratiti knjigu, pritisnite gumb za povrat.
-<input name=checkin type=button value="Povrat" onClick="change_page('checkin')">
+<div class="button">
+<input name=checkin type=button value="Povrat" onClick="change_page('checkin')" style="background: #8f8;">
</div>
-
-<div class="page" id="borrower_check">
-<!--
-Fetching borrower
--->
-Provjera korisničnog računa...
-<p>
-Možete ukloniti iskaznicu.
-<span class="borrower_number"></span>
</div>
<div class="page" id="borrower_info">
+
<!--
Borrower:
-->
<h2>Dokumenti</h2>
<ul>
-<li>Posuđeno: <span class="hold_items">0</span>
-<li>Kašnjenje: <span class="overdue_items">0</span>
-<!-- Koha doesn't support charged items or fine items
-<li>Trenutno rezervacija: 0
-<li>Spremno za podizanje: 0
+<!--
+<li>Hold items: <span class="hold_items">0</span>
+-->
+<li>Posuđeno: <span class="charged_items">0</span>
+<li>Kašnjenja: <span class="overdue_items">0</span>
+<!--
+<li>Fine items: <span class="fine_items">0</span>
-->
</ul>
+<!--
<h2>Dugovanje</h2>
Ostatak: 0,00 kn
Greeting from Koha.
-<input type="button" value="OK" onClick="change_page(circulation_type)">
+-->
+<div class="button">
+<input type="button" value="OK" onClick="change_page(circulation_type)">
+</div>
</div>
-->
Postavite knjige na predviđeno mjesto ispred monitora.
+<hr>
+
<div class="checkout">Posuđeno:</div>
<div class="checkin">Vraćeno:</div>
<ul id="books">
</ul>
-Dokumenata: 0
-
-<div style="display: block">
-<input type="button" value="Završi" onClick="change_page('end')">
+<div class="button">
<input class="checkout" type="button" value="Informacije o članu" onClick="change_page('borrower_info')">
+<input type="button" value="Završi" onClick="change_page('end')" style="float:right; background: #f88;">
</div>
</div>