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