examples/selfcheck.html

   1 <html>
   2 <head>
   3 <meta charset="utf-8"></meta>
   4 <title>RFID SIP2 Selfcheck</title>
   5 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
   6 <link href='http://fonts.googleapis.com/css?family=Roboto&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
   7 <style type="text/css">
   8
   9 body, input {
  10         font-family: 'Roboto', sans-serif;
  11         font-size: 100%;
  12         /* disable selection which brings havoc on touchscreens */
  13         -webkit-user-select: none;
  14         -moz-user-select: -moz-none;
  15         -ms-user-select: none;
  16         user-select: none;
  17 }
  18
  19 body {
  20         background: #f0f0ff;
  21         margin: 2em;
  22 }
  23
  24
  25 .status {
  26         background: #ff8;
  27 }
  28
  29 .da {
  30         background: #fcc;
  31 }
  32
  33 .d7 {
  34         background: #cfc;
  35 }
  36
  37 .page {
  38         border: 2em solid #fff;
  39         border-radius: 1em;
  40         background: #fff;
  41 }
  42
  43 #tags {
  44         position: fixed;
  45         width: 20em;
  46         top: 0;
  47         right: 0;
  48 }
  49
  50 input[type=button] {
  51         display: block;
  52         float: left;
  53         width: 100%;
  54         height: 6em;
  55 }
  56
  57 .button {
  58         margin-top: 1em;
  59         display: block;
  60         width: 100%;
  61         position: absolute;
  62         left: 0;
  63         bottom: 0;
  64 }
  65
  66 #timeout {
  67         display: none;
  68         position: absolute;
  69         top: 50%;
  70         left: 50%;
  71         margin-left: -8em; /* width + 2 * padding / 2 */
  72         margin-top: -2.5em;
  73         width: 12em;
  74         height: 8em;
  75         background: #ff8;
  76         padding: 2em;
  77         border: 0.5em solid #f00;
  78         text-align: center;
  79 }
  80
  81 #working {
  82         display: none;
  83         position: absolute;
  84         top: 50%;
  85         left: 50%;
  86         margin-left: -250px; /* 500 / 2 */
  87         margin-top: -187px;  /* 375 / 2 */
  88 }
  89
  90 </style>
  91 <script type="text/javascript" src="/examples/selfcheck.js"></script>
  92 </head>
  93 <body>
  94
  95 <div id="tags">
  96 RFID reader not found or driver program not started.
  97 </div>
  98
  99
 100 <h1>Knjižnica Filozofskog fakulteta</h1>
 101
 102 <div id="timeout">
 103 Timeout in <span id="tick">99</span> seconds.
 104 <div class="button">
 105 <input type=button value="continue" onClick="start_timeout();">
 106 </div>
 107 </div>
 108
 109
 110 <div id="working">
 111 <img src="/examples/giphy.gif">
 112 </div>
 113
 114
 115 <div class="page" id="start">
 116
 117 <!--
 118 Put borrower card on a reader to borrow books
 119 -->
 120
 121 Ako želite posuditi knjigu, najprije stavite iskaznicu na za to previđeno mjesto.
 122
 123 <hr>
 124
 125 <!--
 126 Select checkin button to return books.
 127 -->
 128
 129 Ako želite vratiti knjigu, pristisnite gumb za povrat.
 130
 131 <div class="button">
 132 <input name=checkin type=button value="Povrat" onClick="change_page('checkin')">
 133 </div>
 134 </div>
 135
 136 <div class="page" id="borrower_info">
 137 <!--
 138 Borrower:
 139 -->
 140 <h2>Informacije o članu</h2>
 141 <div class="borrower_name"></div>
 142 <!--
 143 <div class="borrower_email"></div>
 144 -->
 145 <div class="borrower_number"></div>
 146
 147 <h2>Dokumenti</h2>
 148
 149 <ul>
 150 <li>Hold items: <span class="hold_items">0</span>
 151 <li>Overdue items: <span class="overdue_items">0</span>
 152 <li>Charged items: <span class="charged_items">0</span>
 153 <li>Fine items: <span class="fine_items">0</span>
 154 </ul>
 155
 156 <h2>Dugovanje</h2>
 157
 158 Ostatak: 0,00 kn
 159
 160 <h2>Poruke</h2>
 161
 162 Greeting from Koha.
 163
 164 <div class="button">
 165 <input type="button" value="OK" onClick="change_page(circulation_type)">
 166 </div>
 167
 168 </div>
 169
 170 <div class="page" id="circulation">
 171 <!--
 172 Put books to borrow on reader pad.
 173 -->
 174 Postavite knjige na predviđeno mjesto ispred monitora.
 175
 176 <hr>
 177
 178 <div class="checkout">Posuđeno:</div>
 179 <div class="checkin">Vraćeno:</div>
 180
 181 <ul id="books">
 182 </ul>
 183
 184 Dokumenata: <span id="books_count">0</span>
 185
 186 <div class="button">
 187 <input class="checkout" type="button" value="Informacije o članu" onClick="change_page('borrower_info')">
 188 <input type="button" value="Završi" onClick="change_page('end')">
 189 </div>
 190
 191 </div>
 192
 193 <div class="page" id="end">
 194
 195 Hvala što ste koristili selfcheck sustav.
 196
 197 </div>
 198
 199 <div class="page" id="error">
 200
 201 Greška. Odnesite knjige na pult.
 202
 203 </div>
 204
 205 </body>
 206 </html>