opac/extras/selfcheck/index1110.htm

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
   2 <html xmlns='http://www.w3.org/1999/xhtml'>\r
   3   <head>\r
   4         <link rel='stylesheet' type='text/css' href='style.css' />\r
   5         <title>OPAC Self Check-out</title>\r
   6   \r
   7 <script type="text/javascript">\r
   8 function switchTo(str,subpage) {\r
   9         var pages = [];\r
  10         var sidebarLinks = [];\r
  11         pages['step1'] = document.getElementById('step1');\r
  12         pages['step2'] = document.getElementById('step2');\r
  13         pages['step3'] = document.getElementById('step3');\r
  14         pages['step3a'] = document.getElementById('step3a');\r
  15         //pages['step3b'] = document.getElementById('step3b');\r
  16         pages['step3c'] = document.getElementById('step3c');\r
  17         pages['step3d'] = document.getElementById('step3d');\r
  18         pages['step3e'] = document.getElementById('step3e');\r
  19         pages['step3f'] = document.getElementById('step3f');\r
  20         pages['step4'] = document.getElementById('step4');\r
  21         pages['step5'] = document.getElementById('step5');\r
  22         \r
  23         sidebarLinks['sidebar_step3c'] = document.getElementById('sidebar_step3c');\r
  24         sidebarLinks['sidebar_step3d'] = document.getElementById('sidebar_step3d');\r
  25         sidebarLinks['sidebar_step3e'] = document.getElementById('sidebar_step3e');\r
  26         sidebarLinks['sidebar_step3f'] = document.getElementById('sidebar_step3f');\r
  27 \r
  28         for(var i in pages) pages[i].style.display="none";\r
  29         for(var i in sidebarLinks) sidebarLinks[i].className="";\r
  30         \r
  31         if(subpage) {\r
  32                 pages[subpage].style.display="block";\r
  33                 sidebarLinks['sidebar_'+subpage].className="selected";\r
  34         }\r
  35         pages[str].style.display="block";\r
  36         if(str=='step3' && !subpage) pages['step3a'].style.display="block";\r
  37 }\r
  38 </script>\r
  39   </head>\r
  40  \r
  41 <body>\r
  42 <div style="height:66px;background:#ae2c2a;"><div id='header'>\r
  43   <a href='javascript:;'><img src='graphics/KCLS_logo_horiz.gif' /></a>\r
  44   <span style="font-size:36px;color:white;position:relative;top:-10px;left:15px;">CHECK OUT HERE</span>\r
  45 </div></div>\r
  46 \r
  47 <div id='content-wrapper'>\r
  48   <div id='main-content'>\r
  49         <div style='clear:both;'></div>\r
  50 \r
  51   <div id="step1" class="checkout" style="padding-top:15px;">\r
  52         <table cellpadding="0" cellspacing="0" border="0" width="100%"><tr>\r
  53     <td align="center"><h1>Scan your library card barcode<br />OR type your library card number/username</h1></td></tr></table>\r
  54     <table cellpadding="0" cellspacing="0" border="0" style="margin:20px auto;"><tr>\r
  55     <td><img src="graphics/libcard_barcode.jpg" /></td><td style="padding-left:10px;"><span style="font-size:10px;">Example 0017620030</span><br /><input type="text" /></td>\r
  56     <td><a href="javascript:;" onclick="switchTo('step2')" style="position:relative;top:7px;left:5px;"><img src="graphics/gobutton.jpg" /></a></td></tr></table>\r
  57   </div>\r
  58   <div id="step2" class="checkout" style="display:none;padding-top:15px;">\r
  59         <table cellpadding="0" cellspacing="0" border="0" width="100%"><tr>\r
  60     <td align="center"><h1>Enter your PIN or password</h1></td></tr></table>\r
  61     <table cellpadding="0" cellspacing="0" border="0" style="margin:20px auto;"><tr>\r
  62     <td style="padding-left:10px;"><span style="font-size:10px;">Example 0926</span><br /><input type="password" /></td>\r
  63     <td><a href="javascript:;" onclick="switchTo('step3')" style="position:relative;top:7px;left:5px;"><img src="graphics/gobutton.jpg" /></a></td></tr></table>\r
  64   </div>\r
  65   <div id="step3" class="checkout" style="display:none;">\r
  66         <table cellpadding="0" cellspacing="0" border="0" width="694" height="260">\r
  67       <tr><td valign="top" width="444" style="padding:3px;" rowspan="2">\r
  68                 <img src="graphics/barcodedetailbook.jpg" style="float:left;" />\r
  69         <div class="header1">\r
  70           <h2>Scan your library item to begin checkout</h2>\r
  71         </div>\r
  72         <br /><br />\r
  73         <div id="step3a" style="">\r
  74           <a href="javascript:;"><img src="graphics/printlist.jpg" /></a><br /><br />\r
  75           <div class="userid" id="user_id"></div><br />\r
  76           <table cellpadding="5" cellspacing="0" border="0" class="item_table" width="100%">\r
  77                 <tr><td>\r
  78               <table align="center" cellpadding="2" cellspacing="0" border="0">\r
  79                 <tr><td class="label">BARCODE:</td><td name="current_barcode"></td></tr>\r
  80                 <tr><td class="label">TITLE:</td><td name="current_title"></td></tr>\r
  81                 <tr><td class="label">DUE DATE:</td><td name="current_due"></td></tr>\r
  82               </table>\r
  83             </td></tr>\r
  84           </table>\r
  85         </div>\r
  86         \r
  87         <div id="step3c" style="display:none;">\r
  88           <table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td align="center" style="font-weight:bold;font-size:18px;">Fines</td></tr></table><br />\r
  89           <a href="javascript:;"><img src="graphics/printlist.jpg" /></a><br /><br />\r
  90           <table cellpadding="5" cellspacing="0" border="0" class="item_table" width="100%">\r
  91                 <tr><td>\r
  92               <table align="center" cellpadding="2" cellspacing="0" border="0">\r
  93                 <tr><td class="label">TITLE:</td><td name="fines_title"></td></tr>\r
  94                 <tr><td class="label">DUE DATE:</td><td name="fines_due"></td></tr>\r
  95                 <tr><td class="label">DATE RETURN:</td><td name="fines_return"></td></tr>\r
  96                 <tr><td class="label">BALANCE OWED:</td><td name="fines_owed"></td></tr>\r
  97               </table>\r
  98             </td></tr>\r
  99           </table>\r
 100         </div>\r
 101         \r
 102                 <div id="step3d" style="display:none;">\r
 103           <table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td align="center" style="font-weight:bold;font-size:18px;">Items Checked Out</td></tr></table><br />\r
 104           <a href="javascript:;"><img src="graphics/printlist.jpg" /></a><br /><br />\r
 105           <table cellpadding="5" cellspacing="0" border="0" class="item_table" width="100%">\r
 106                 <tr><td>\r
 107               <table align="center" cellpadding="2" cellspacing="0" border="0">\r
 108                 <tr><td class="label">BARCODE:</td><td name="checked_bar"></td></tr>\r
 109                 <tr><td class="label">TITLE:</td><td name="checked_title"></td></tr>\r
 110                 <tr><td class="label">AUTHOR:</td><td name="checked_author"></td></tr>\r
 111                 <tr><td class="label">DUE DATE:</td><td name="checked_due"></td></tr>\r
 112                 <tr><td class="label">FORMAT:</td><td name="checked_format"></td></tr>\r
 113               </table>\r
 114             </td></tr>\r
 115           </table>\r
 116         </div>\r
 117         \r
 118         <div id="step3e" style="display:none;">\r
 119           <table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td align="center" style="font-weight:bold;font-size:18px;">Items Ready for Pickup</td></tr></table><br />\r
 120           <a href="javascript:;"><img src="graphics/printlist.jpg" /></a><br /><br />\r
 121           <table cellpadding="5" cellspacing="0" border="0" class="item_table" width="100%">\r
 122                 <tr><td>\r
 123               <table align="center" cellpadding="2" cellspacing="0" border="0">\r
 124                 <tr><td class="label">TITLE:</td><td name="pickup_title"></td></tr>\r
 125                 <tr><td class="label">FORMAT:</td><td name="pickup_format"></td></tr>\r
 126                 <tr><td class="label">PICKUP LOCATION:</td><td name="pickup_lib"></td></tr>\r
 127                 <tr><td class="label">PICK UP BY:</td><td name="pickup_date"></td></tr>\r
 128               </table>\r
 129             </td></tr>\r
 130           </table>\r
 131         </div>\r
 132         \r
 133         <div id="step3f" style="display:none;">\r
 134           <table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td align="center" style="font-weight:bold;font-size:18px;">Holds</td></tr></table><br />\r
 135           <a href="javascript:;"><img src="graphics/printlist.jpg" /></a><br /><br />\r
 136           <table cellpadding="5" cellspacing="0" border="0" class="item_table" width="100%">\r
 137                 <tr><td>\r
 138               <table align="center" cellpadding="2" cellspacing="0" border="0">\r
 139                 <tr><td class="label">TITLE:</td><td name="holds_title"></td></tr>\r
 140                 <tr><td class="label">AUTHOR:</td><td name="holds_author"></td></tr>\r
 141                 <tr><td class="label">FORMAT:</td><td name="holds_format"></td></tr>\r
 142                 <tr><td class="label">STATUS:</td><td name="holds_status"></td></tr>\r
 143               </table>\r
 144             </td></tr>\r
 145           </table>\r
 146         </div>\r
 147         \r
 148       </td>\r
 149       <td class="sidebar" valign="top" width="226">\r
 150                 <h3 class="top" id="date"></h3>\r
 151         <div class="greet">Hello, <span id="user_name"></span></div>\r
 152         <h3>Your Account</h3>\r
 153         <p id="sidebar_step3c">Fines: <span id="acct_fines"></span><br /><a href="javascript:;" onclick="switchTo('step3','step3c')">View Details</a></p>\r
 154         <p id="sidebar_step3d">(<span id="items_checked"></span>) Items Checked Out<br /><a href="javascript:;" onclick="switchTo('step3','step3d')">View Details</a></p>\r
 155         <p id="sidebar_step3e">(<span id=""items_pickup></span>) Items ready for pickup<br /><a href="javascript:;" onclick="switchTo('step3','step3e')">View Details</a></p>\r
 156         <p id="sidebar_step3f">(<span id="items_hold"></span>) Items on Hold (25 max.)<br /><a href="javascript:;" onclick="switchTo('step3','step3f')">View Details</a></p>\r
 157       </td></tr>\r
 158       <tr><td class="sidebar" valign="bottom">\r
 159         <div style="padding-left:3px;">\r
 160           <div style="float:left;"><a href="javascript:;" onclick="switchTo('step4')"><img src="graphics/finish_printreceipt.jpg" style="float:left;margin-right:3px;" /> <span>Logout</span></a></div>\r
 161           <div style="float:left;width:120px;padding-left:30px;"><a href="javascript:;" onclick="switchTo('step5')"><img src="graphics/finish.jpg" style="float:left;margin-right:3px;" /> <span>Logout<br />without receipt</span></a></div>\r
 162         </div>\r
 163         <div style="clear:both;padding-top:15px;padding-left:3px;">\r
 164           <a href="javascript:;" id="back_button" onclick="switchTo('step3')"><img src="graphics/arrow.gif" /></a> <a href="javascript:;" onclick="switchTo('step3')"><span style="position:relative;top:-4px;left:2px;">Back</span></a>\r
 165         </div>\r
 166       </td></tr>\r
 167     </table>\r
 168   </div>\r
 169   \r
 170   <div id="step4" class="checkout" style="padding-top:15px;display:none;">\r
 171         <table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td align="center"><h1>Checkout Complete.<br />Please take your reciept.</h1></td></tr></table>\r
 172   </div>\r
 173   \r
 174   <div id="step5" class="checkout" style="padding-top:15px;display:none;">\r
 175         <table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td align="center"><h1>Checkout Complete.</h1></td></tr></table>\r
 176   </div>\r
 177   \r
 178 \r
 179         <div style='clear:both;'></div> \r
 180   </div>\r
 181 </div>\r
 182 </body>\r
 183 </html>