clementinecomputing
/
popufare


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857
							<!--

  Copyright (c) 2019 Clementine Computing LLC.

  This file is part of PopuFare.

  PopuFare is free software: you can redistribute it and/or modify
  it under the terms of the GNU Affero General Public License as published by
  the Free Software Foundation, either version 3 of the License, or
  (at your option) any later version.

  PopuFare is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU Affero General Public License for more details.

  You should have received a copy of the GNU Affero General Public License
  along with PopuFare.  If not, see <https://www.gnu.org/licenses/>.

-->

<meta charset='utf-8'/>
<html>

  <head>

    <link rel="stylesheet" href="css/diustyles.css">
    <link rel="stylesheet" href="css/grids.css">


  </head>

  <body id='body'>

    <div id='ui_test'>
      X
    </div>

    <!-- ************************* -->
    <!-- ******            ******* -->
    <!-- ******  Watchdog  ******* -->
    <!-- ******            ******* -->
    <!-- ************************* -->

    <div id='ui_watchdog' style='display:none;'>

      <div style='width:100%; height:100%;'>

        <div class='pure-g row' style='width:100%; height:100%;' >
          <div class='pure-u-1-6 col' style=' position:absolute; top:10vh; margin-left:10vw; '>
            <button onmousedown='_beep();' class='bdropinp bkeyHuge' id='ui_watchdog_btn'>Watchdog Timer Expired! <br> Press Button to Reset UI </button>
          </div>
        </div>

      </div>

    </div>

    <!-- ************************* -->
    <!-- ******            ******* -->
    <!-- ******    Login   ******* -->
    <!-- ******            ******* -->
    <!-- ************************* -->


    <div id='ui_login' >

      <br>

      <div class='pure-g row'>

        <div class='pure-u-1-3 col'> <button onmousedown='_beep();' class='bdropinp bkeyw' id='ui_login_login'>Login</button> </div>
        <div class='pure-u-1-3 col'>
          <button class='bdisp bkeyTime' id='ui_login_time' style='color:#773333; font-family: monospace; font-size: 6.5vh;' >
            02:34
          </button>
        </div>
        <!--
        <div class='pure-u-1-6 col'> </div>
        <div class='pure-u-1-6 col'> </div>
        -->
        <div class='pure-u-1-3 col'> <button onmousedown='_beep();' class='bdropinp bkeyw' id='ui_login_configuration'>Config</button> </div>

      </div>

      <div class='pure-g'>

        <button class='invisiblock' id='ui_login_blockwindow'> </button>

        <div id='ui_login_status' class='textwindow'>
          <div class='textrow'>Tunnel: . GPRS: . Eq# . #Msg: .</div><br>
          <div class='textrow'>Last Token Read (.): ""</div><br>
          <div class='textrow'>GPS: .</div><br>
          <br>
          <div class='textrow'>Package    Version        Installed</div>

        </div>

      </div>

    </div>

    <!-- **************************** -->
    <!-- ******               ******* -->
    <!-- ****** Configuration ******* -->
    <!-- ******               ******* -->
    <!-- **************************** -->


    <div id='ui_configuration' style='display:none;' >

      <br>

      <div class='pure-g row4'>

        <div class='pure-u-1-3 col'> <button onmousedown='_beep();' class='bdropinp bkeym' id='ui_configuration_back'>Back</button> </div>
        <div class='pure-u-1-3 col'> <button class='bdisp' style='font-size:7vh;'>Configuration</button> </div>

        <!--
          <div class='pure-u-1-3 col'> <button onmousedown='_beep();' class='bdropinp bkeym' id='ui_configuration_eqnum'>Eq. Num</button> </div>
        -->

        <div class='pure-u-1-3 col'> </div>

      </div>

      <br>
      <br>
      <br>

      <div class='pure-g row4'>

        <div class='pure-u-1-6 col'> <button class='bdisp' style='font-size:5vh;'>Volume</button> </div>
        <div class='pure-u-2-3 col'>
          <input
            id='ui_configuration_volume'
            type='range'
            value='1.0'
            min="0"
            max="1.0"
            step=".025"
            onchange='_slider_change("configuration.volume");'
            oninput='_slider_change("configuration.volume");' >
        </div>
        <div class='pure-u-1-6 col'> <button class='bdisp' style='font-size:5vh;' id='ui_configuration_displayvolume'>100%</button> </div>


      </div>

      <br>
      <br>


      <div class='pure-g row4'>

        <div class='pure-u-1-3 col'> </div>
        <div class='pure-u-1-3 col'> <button class='bdropinp bkeym' id='ui_configuration_volumetest'>Test</button> </div>
        <div class='pure-u-1-3 col'>  </div>

      </div>


    </div>

    <!-- ********************************* -->
    <!-- ******                    ******* -->
    <!-- ******  Equipment Number  ******* -->
    <!-- ******                    ******* -->
    <!-- ********************************* -->


    <div id='ui_eqnum' style='display:none;'>

      <br>

      <div class='pure-g row4'>

        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_eqnum_1'>1</button> </div>
        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_eqnum_2'>2</button> </div>
        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_eqnum_3'>3</button> </div>

        <div class='pure-u-1-6 col'>
          <p><button onmousedown='_beep();' class='bdisp' id='ui_eqnum_eqnum_text' style='display:block;'>Eq. Num</button></p>
        </div>

        <div class='pure-u-1-6 col'> 
          <button class="bdropinp bkeyw" id='ui_eqnum_eqnum' style='display:block;'></button>
        </div>


      </div>

      <br>

      <div class='pure-g row4'>
        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_eqnum_4'>4</button> </div>
        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_eqnum_5'>5</button> </div>
        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_eqnum_6'>6</button> </div>
      </div>

      <br>

      <div class='pure-g row4'>

        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_eqnum_7'>7</button> </div>
        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_eqnum_8'>8</button> </div>
        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_eqnum_9'>9</button> </div>

        <div class='pure-u-1-6 col'> </div>
        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkeyw' id='ui_eqnum_ok'>Ok</button> </div>

      </div>

      <br>

      <div class='pure-g row4'>

        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_eqnum_clr'>Clr</button> </div>
        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_eqnum_0'>0</button> </div>
        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_eqnum_bksp'>Bksp</button> </div>

        <div class='pure-u-1-6 col'> </div>
        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkeyw' id='ui_eqnum_cancel'>Cancel</button> </div>

      </div>

    </div> <!-- ui_eqnum -->
 

    <!-- ************************** -->
    <!-- ******             ******* -->
    <!-- ****** Diagnostics ******* -->
    <!-- ******             ******* -->
    <!-- ************************** -->


    <div id='ui_diagnostic' style='display:none;' >

      <br>

      <div class='pure-g row4'>

        <div class='pure-u-1-3 col'> <button onmousedown='_beep();' class='bdropinp bkeyw' id='ui_diagnostic_mainscreen'>Main Screen</button> </div>
        <div class='pure-u-1-3 col'> <button onmousedown='_beep();' class='bdropinp bkeyw' id='ui_diagnostic_reset'>Reset</button> </div>
        <div class='pure-u-1-3 col'> <button onmousedown='_beep();' class='bdropinp bkeyw' id='ui_diagnostic_reboot'>Reboot</button> </div>

      </div>

      <div class='pure-g row4'>

        <div class='pure-u-1-3 col'> <button onmousedown='_beep();' class='bdropinp bkeyw' id='ui_diagnostic_custom0'>eth0 up</button> </div>
        <div class='pure-u-1-3 col'> <button onmousedown='_beep();' class='bdropinp bkeyw' id='ui_diagnostic_custom1'>eth0 down</button> </div>
        <div class='pure-u-1-3 col'> <button onmousedown='_beep();' class='bdropinp bkeyw' id='ui_diagnostic_custom2'>eth0 info</button> </div>

      </div>

      <div class='pure-g row4'>

        <div class='pure-u-1-3 col'> <button onmousedown='_beep();' class='bdropinp bkeyw' id='ui_diagnostic_custom3'>speak test</button> </div>
        <div class='pure-u-1-3 col'> <button onmousedown='_beep();' class='bdropinp bkeyw' id='ui_diagnostic_custom4'>nop</button> </div>

        <div class='pure-u-1-3 col'> <button onmousedown='_beep();' class='bdropinp bkeym' id='ui_configuration_eqnum'>Eq. Num</button> </div>

        <div class='pure-u-1-3 col'> <button onmousedown='_beep();' style='display:none;' class='bdropinp bkeyw' id='ui_diagnostic_custom5'>nop</button> </div>


      </div>

      <br>
      <br>
      <br>

      <div class='pure-g'>

        <button class='invisiblock' id='ui_diagnostic_window'> </button>

        <textarea class='statuslogin' type='textarea' id='ui_diagnostic_view' rows='10' cols='80' disabled readonly>
        Diagnostic window...
        </textarea>

      </div>

    </div>


    <!-- ************************* -->
    <!-- ******            ******* -->
    <!-- ******   Driver   ******* -->
    <!-- ******            ******* -->
    <!-- ************************* -->

    <div id='ui_driver' style='display:none;'>

      <br>

      <div class='pure-g row4'>

        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_driver_1'>1</button> </div>
        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_driver_2'>2</button> </div>
        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_driver_3'>3</button> </div>

        <!-- ## -->
        <div class='pure-u-1-6 col'> <p><button onmousedown='_beep();' class='bdisp' style='display:block;' id='ui_driver_drivertext'>Driver</button></p> </div>

        <div class='pure-u-1-6 col'> 
          <!-- <button onmousedown='_beep();' class="bdrop bfieldinp bkeyw" id='ui_driver_driver' style='display:block;'></button> -->
          <button class="bdropinp bkeyw" id='ui_driver_driver' style='display:block;'></button>
        </div>

      </div>

      <br>

      <div class='pure-g row4'>

        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_driver_4'>4</button> </div>
        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_driver_5'>5</button> </div>
        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_driver_6'>6</button> </div>

        <div class='pure-u-1-6 col' style='text-align:center;'>
          <p><button onmousedown='_beep();' class='bdisp' style='display:none;' id='ui_driver_pin_text'>Pin</button></p>
        </div>

        <div class='pure-u-1-6 col'> 
          <!-- <button onmousedown='_beep();' class="bdrop bfieldinp bkeyw" id='ui_driver_pin' style='display:none;'></button> -->
          <button class="bdropinp bkeyw" id='ui_driver_pin' style='display:none;'></button>
        </div>

      </div>

      <br>

      <div class='pure-g row4'>

        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_driver_7'>7</button> </div>
        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_driver_8'>8</button> </div>
        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_driver_9'>9</button> </div>

        <div class='pure-u-1-6 col'> </div>
        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkeyw' id='ui_driver_ok'>Ok</button> </div>

      </div>

      <br>

      <div class='pure-g row4'>

        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_driver_clr'>Clr</button> </div>
        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_driver_0'>0</button> </div>
        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_driver_bksp'>Bksp</button> </div>

        <div class='pure-u-1-6 col'> </div>
        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkeyw' id='ui_driver_cancel'>Cancel</button> </div>

      </div>

    </div> <!-- ui_driver -->

    <!-- ************************* -->
    <!-- ******            ******* -->
    <!-- ******   Driver   ******* -->
    <!-- ******   Verify   ******* -->
    <!-- ******            ******* -->
    <!-- ************************* -->

    <div id='ui_driververify' style='display:none;'>

      <div style='width:100%; height:100%;'>

        <div class='pure-g row' style='width:100%; height:100%;' >
          <div class='pure-u-1-6 col' style=' position:absolute; top:10vh; margin-left:10vw; '>
            <button class='bstatus bkeyHuge' id='ui_driververify_btn'>Verifying Driver</button>
          </div>
        </div>

      </div>

      <!--

      <br>
      <div class='pure-g'> </div>
      <br> <br> <br>
      <div class='pure-g'> </div>
      <br> <br> <br>

      <div class='pure-g'>
        <div class='pure-u-1-6'> <button class='bstatus'>Verifying Driver</button> </div>
      </div>

      <br> <br> <br> 

      -->

    </div>


    <!-- ************************* -->
    <!-- ******            ******* -->
    <!-- ******   Driver   ******* -->
    <!-- ******  Incorrect ******* -->
    <!-- ******   Login    ******* -->
    <!-- ******            ******* -->
    <!-- ************************* -->

    <div id='ui_driverincorrect' style='display:none;'>

      <div style='width:100%; height:100%;'>

        <div class='pure-g row' style='width:100%; height:100%;' >
          <div class='pure-u-1-6 col' style=' position:absolute; top:10vh; margin-left:10vw; '>
            <button onmousedown='_beep();' class='bdropinp bkeyHuge' id='ui_driverincorrect_btn'>Incorrect Login</button>
          </div>
        </div>

      </div>

    </div>

    <!-- ************************* -->
    <!-- ******            ******* -->
    <!-- ******   Paddle   ******* -->
    <!-- ******            ******* -->
    <!-- ************************* -->


    <div id='ui_paddle' style='display:none;'>

      <br>

      <div class='pure-g row4'>

        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_paddle_1'>1</button> </div>
        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_paddle_2'>2</button> </div>
        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_paddle_3'>3</button> </div>

        <div class='pure-u-1-6 col'>
          <p><button onmousedown='_beep();' class='bdisp' id='ui_paddle_paddle_text' style='display:block;'>Paddle</button></p>
        </div>

        <div class='pure-u-1-6 col'> 
          <button class="bdropinp bkeyw" id='ui_paddle_paddle' style='display:block;'></button>
        </div>


      </div>

      <br>

      <div class='pure-g row4'>
        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_paddle_4'>4</button> </div>
        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_paddle_5'>5</button> </div>
        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_paddle_6'>6</button> </div>
      </div>

      <br>

      <div class='pure-g row4'>

        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_paddle_7'>7</button> </div>
        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_paddle_8'>8</button> </div>
        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_paddle_9'>9</button> </div>

        <div class='pure-u-1-6 col'> </div>
        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkeyw' id='ui_paddle_ok'>Ok</button> </div>

      </div>

      <br>

      <div class='pure-g row4'>

        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_paddle_clr'>Clr</button> </div>
        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_paddle_0'>0</button> </div>
        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_paddle_bksp'>Bksp</button> </div>

        <div class='pure-u-1-6 col'> </div>
        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkeyw' id='ui_paddle_cancel'>Cancel</button> </div>

      </div>

    </div> <!-- ui_paddle -->

    <!-- ************************* -->
    <!-- ******            ******* -->
    <!-- ******   Paddle   ******* -->
    <!-- ******   Verify   ******* -->
    <!-- ******            ******* -->
    <!-- ************************* -->

    <div id='ui_paddleverify' style='display:none;'>


      <div style='width:100%; height:100%;'>

        <div class='pure-g row' style='width:100%; height:100%;' >
          <div class='pure-u-1-6 col' style=' position:absolute; top:10vh; margin-left:10vw; '>
            <button class='bstatus bkeyHuge' id='ui_paddleverify_btn'>Verifying Paddle</button>
          </div>
        </div>

      </div>

      <!--
      <br>
      <div class='pure-g'> </div>
      <br> <br> <br>
      <div class='pure-g'> </div>
      <br> <br> <br>

      <div class='pure-g'>
        <div class='pure-u-1-6'> <button class='bstatus'>Verifying Paddle</button> </div>
      </div>

      <br> <br> <br> 
      -->

    </div>

    <!-- ************************* -->
    <!-- ******            ******* -->
    <!-- ******   Unknown  ******* -->
    <!-- ******   Paddle   ******* -->
    <!-- ******            ******* -->
    <!-- ************************* -->

    <div id='ui_paddleunknown' style='display:none;'>

      <div style='width:100%; height:100%;'>

        <div class='pure-g row' style='width:100%; height:100%;' >

          <div class='pure-u-1-6 col' style=' position:absolute; top:10vh; margin-left:10vw; '>
            <button onmousedown='_beep();' class='bdropinp bkeyHuge' id='ui_paddleunknown_btn'>Unknown Paddle </button>
          </div>
        </div>

      </div>


    </div>

    <!-- ************************* -->
    <!-- ******            ******* -->
    <!-- ******    Dim     ******* -->
    <!-- ******            ******* -->
    <!-- ************************* -->

    <div id='ui_dim' style='display:none;'>

      <div style='width:100%; height:100%;'>

        <div class='pure-g row' style='width:100%; height:100%;' >
          <div class='pure-u-1-6 col' style=' position:absolute; top:2%; margin-left:2%; '>
            <button onmousedown='_beep();' class='bdropinp bkeyFull' id='ui_dim_btn'>Quick Dim Function, press anywhere to go back</button>
          </div>
        </div>

      </div>

    </div>

    <!-- ************************* -->
    <!-- ******            ******* -->
    <!-- ******   main     ******* -->
    <!-- ******            ******* -->
    <!-- ************************* -->


    <div id='ui_main' style='display:none;'>

      <div class='pure-g row4'>

        <div class='pure-u-1-6 col'>

          <div class='pure-g row'>

            <div class='pure-u col'>
              <button class='bdropinp bkeyNarrow' onmousedown='_beep();' id='ui_main_dim'>DIM</button>
            </div>

            <br>

            <div class='pure-u col'>
              <button class='bdisp bkeyTime' id='ui_main_time' style='color:#773333; font-family: monospace; font-size: 6.5vh;' >02:34</button>
            </div>

          </div>

        </div>

        <div class='pure-u-1-2 col'>
          <button class='invisiblock' id='ui_main_blockwindow'> </button>

          <div id='ui_main_status' class='textwindowmain'>
          </div>

       </div>

      </div>

      <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey btnprv' id='ui_main_prv'>PRV</button> </div>
      <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey btnnxt' id='ui_main_nxt'>NXT</button> </div>

      <div class='pure-g row4'>
        <div class='pure-u col'> <div style='height:10%;'></div> </div>
      </div>

      <div class='pure-g row' style='height:10vh;'></div>

      <div class='pure-g row4'>

        <div class='pure-u-1-4 col'> <button onmousedown='_beep();' class='bdropinp bkeym mny' id='ui_main_adult'>Adult $</button> </div>
        <div class='pure-u-1-4 col'> <button onmousedown='_beep();' class='bdropinp bkeym mny' id='ui_main_youth'>Youth $</button> </div>
        <div class='pure-u-1-4 col'> <button onmousedown='_beep();' class='bdropinp bkeym mny' id='ui_main_half'>Half $</button> </div>
        <div class='pure-u-1-4 col'> <button onmousedown='_beep();' class='bdropinp bkeym' id='ui_main_bulk'>Bulk $</button> </div>

      </div>

      <div class='pure-g row4'>

        <div class='pure-u-1-4 col'> <button onmousedown='_beep();' class='bdropinp bkeym mny' id='ui_main_bike'>Bike</button> </div>
        <div class='pure-u-1-4 col'> <button onmousedown='_beep();' class='bdropinp bkeym mny' id='ui_main_wheelchair'>Wheel Chair</button> </div>
        <div class='pure-u-1-4 col'> <button onmousedown='_beep();' class='bdropinp bkeym mny' id='ui_main_transfer'>X-fer</button> </div>
        <div class='pure-u-1-4 col'> <button onmousedown='_beep();' class='bdropinp bkeym' id='ui_main_menu'>Menu</button> </div>

      </div>

      <div id="mainstatus"></div>

    </div> <!-- ui_main -->

    <!-- ************************* -->
    <!-- ******            ******* -->
    <!-- ******   Bulk     ******* -->
    <!-- ******            ******* -->
    <!-- ************************* -->


    <div id='ui_bulk' style='display:none;'>

      <br>

      <div class='pure-g row4'>

        <div class='pure-u-1-4 col'> <button onmousedown='_beep();' class='bdropinp bkeym highlight' id='ui_bulk_misc'>$ + Misc</button> </div>
        <div class='pure-u-1-4 col'> <button onmousedown='_beep();' class='bdropinp bkeym' id='ui_bulk_passes'>Passes</button> </div>
        <div class='pure-u-1-4 col'> <button onmousedown='_beep();' class='bdropinp bkeym' id='ui_bulk_menu'>Main Menu</button> </div>
        <div class='pure-u-1-4 col'> <button onmousedown='_beep();' class='bdisp' style='font-size:7vh;'>BULK</button> </div>

      </div>

      <hr>

      <br> <br> <br> 

      <div id='ui_bulk_misc_tab' style='display:block;'>

        <div class='pure-g row4'>
          <div class='pure-u-1-3 col'> <button onmousedown='_beep();' class='bdropinp bkeyw mny' id='ui_bulk_adult'>Adult $</button> </div>
          <div class='pure-u-1-3 col'> <button onmousedown='_beep();' class='bdropinp bkeyw mny' id='ui_bulk_youth'>Youth $</button> </div>
          <div class='pure-u-1-3 col'> <button onmousedown='_beep();' class='bdropinp bkeyw mny' id='ui_bulk_half'>Half $</button> </div>
        </div>

        <div class='pure-g row4'></div>


        <div class='pure-g row4'>
          <div class='pure-u-1-3 col'> <button onmousedown='_beep();' class='bdropinp bkeyw mny' id='ui_bulk_event'>Event</button> </div>
          <div class='pure-u-1-3 col'> <button onmousedown='_beep();' class='bdropinp bkeyw mny' id='ui_bulk_transfer'>X-fer</button> </div>
          <div class='pure-u-1-3 col'> <button onmousedown='_beep();' class='bdropinp bkeyw mny' id='ui_bulk_interline'>InterLine</button> </div>
        </div>

      </div>

      <div id='ui_bulk_passes_tab' style='display:none;'>

        <div class='pure-g row4'>
          <div class='pure-u-1-3 col'> <button onmousedown='_beep();' class='bdropinp bkeyw mny' id='ui_bulk_schoola'>SchoolA ID</button> </div>
          <div class='pure-u-1-3 col'> <button onmousedown='_beep();' class='bdropinp bkeyw mny' id='ui_bulk_schoolb'>SchoolB ID</button> </div>
          <div class='pure-u-1-3 col'> <button onmousedown='_beep();' class='bdropinp bkeyw mny' id='ui_bulk_schoolc'>SchoolC ID</button> </div>
        </div>

        <div class='pure-g row4'></div>

        <div class='pure-g row4'>
          <div class='pure-u-1-3 col'> <button onmousedown='_beep();' class='bdropinp bkeyw mny' id='ui_bulk_orga'>Org A ID</button> </div>
          <div class='pure-u-1-3 col'> <button onmousedown='_beep();' class='bdropinp bkeyw mny' id='ui_bulk_orgb'>Org B ID</button> </div>
          <div class='pure-u-1-3 col'> <button onmousedown='_beep();' class='bdropinp bkeyw mny' id='ui_bulk_orgc'>Org C ID</button> </div>
        </div>

      </div>


    </div> <!-- ui_bulk -->

    <!-- ************************* -->
    <!-- ******            ******* -->
    <!-- ******    Bulk    ******* -->
    <!-- ******   Accept   ******* -->
    <!-- ******            ******* -->
    <!-- ************************* -->


    <div id='ui_bulkaccept' style='display:none;'>


      <br>

      <div class='pure-g row4'>

        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_bulkaccept_1'>1</button> </div>
        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_bulkaccept_2'>2</button> </div>
        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_bulkaccept_3'>3</button> </div>


        <div class='pure-u-1-6 col'> </div>
        <div class='pure-u-1-6 col'> 
          <button class="bdropinp bkeyw" id='ui_bulkaccept_faretype' style='display:block;'>...</button>


        </div>

      </div>

      <br>

      <div class='pure-g row4'>

        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_bulkaccept_4'>4</button> </div>
        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_bulkaccept_5'>5</button> </div>
        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_bulkaccept_6'>6</button> </div>


        <div class='pure-u-1-6 col'> <p><button onmousedown='_beep();' class='bdisp' style='display:block;' id='ui_driver_drivertext'>#</button></p> </div>
        <div class='pure-u-1-6 col'> 
          <button class="bdropinp bkeyw" id='ui_bulkaccept_count' style='display:block;'></button>
        </div>

      </div>

      <br>

      <div class='pure-g row4'>

        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_bulkaccept_7'>7</button> </div>
        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_bulkaccept_8'>8</button> </div>
        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_bulkaccept_9'>9</button> </div>

        <div class='pure-u-1-6 col'> </div>
        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkeyw' id='ui_bulkaccept_ok'>Ok</button> </div>

      </div>

      <br>

      <div class='pure-g row4'>

        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_bulkaccept_clr'>Clr</button> </div>
        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_bulkaccept_0'>0</button> </div>
        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkey ltyellow' id='ui_bulkaccept_bksp'>Bksp</button> </div>

        <div class='pure-u-1-6 col'> </div>
        <div class='pure-u-1-6 col'> <button onmousedown='_beep();' class='bdropinp bkeyw' id='ui_bulkaccept_cancel'>Cancel</button> </div>

      </div>


    </div> <!-- ui_bulk -->


    <!-- ************************* -->
    <!-- ******            ******* -->
    <!-- ******   Fare     ******* -->
    <!-- ******   Menu     ******* -->
    <!-- ******            ******* -->
    <!-- ************************* -->


    <div id='ui_fareoverride' style='display:none;'>

      <br>

      <div class='pure-g row4'>

        <div class='pure-u-1-4 col'> <button onmousedown='_beep();' class='bdropinp bkeym highlight' id='ui_fareoverride_misc'>$ + Misc</button> </div>
        <div class='pure-u-1-4 col'> <button onmousedown='_beep();' class='bdropinp bkeym' id='ui_fareoverride_passes'>Passes</button> </div>
        <div class='pure-u-1-4 col'> <button onmousedown='_beep();' class='bdropinp bkeym' id='ui_fareoverride_menu'>Main Menu</button> </div>
        <div class='pure-u-1-4 col'> <button onmousedown='_beep();' class='bdropinp bkeym logout' id='ui_fareoverride_logout' style='float:center;'>Logout</button> </div>

      </div>

      <hr>

      <br> <br> <br> 

      <div id='ui_fareoverride_misc_tab' style='display:block;'>

        <div class='pure-g row4'>
          <div class='pure-u-1-3 col'> <button onmousedown='_beep();' class='bdropinp bkeyw mny' id='ui_fareoverride_adult'>Adult $</button> </div>
          <div class='pure-u-1-3 col'> <button onmousedown='_beep();' class='bdropinp bkeyw mny' id='ui_fareoverride_youth'>Youth $</button> </div>
          <div class='pure-u-1-3 col'> <button onmousedown='_beep();' class='bdropinp bkeyw mny' id='ui_fareoverride_half'>Half $</button> </div>
        </div>


        <div class='pure-g row4'>
          <div class='pure-u-1-3 col'> <button onmousedown='_beep();' class='bdropinp bkeyw mny' id='ui_fareoverride_bike'>Bike</button> </div>
          <div class='pure-u-1-3 col'> <button onmousedown='_beep();' class='bdropinp bkeyw mny' id='ui_fareoverride_wheelchair'>Wheel Chair</button> </div>
          <div class='pure-u-1-3 col'> <button onmousedown='_beep();' class='bdropinp bkeyw mny' id='ui_fareoverride_transfer'>X-fer</button> </div>
        </div>


        <div class='pure-g row4'>
          <div class='pure-u-1-3 col'> </div>
          <div class='pure-u-1-3 col'> <button onmousedown='_beep();' class='bdropinp bkeyw mny' id='ui_fareoverride_event'>Event</button> </div>
          <div class='pure-u-1-3 col'> <button onmousedown='_beep();' class='bdropinp bkeyw mny' id='ui_fareoverride_interline'>Interline</button> </div>
        </div>

      </div>

      <div id='ui_fareoverride_passes_tab' style='display:none;'>

        <div class='pure-g row4'>
          <div class='pure-u-1-3 col'> <button onmousedown='_beep();' class='bdropinp bkeyw mny' id='ui_fareoverride_schoola'>SchoolA ID</button> </div>
          <div class='pure-u-1-3 col'> <button onmousedown='_beep();' class='bdropinp bkeyw mny' id='ui_fareoverride_schoolb'>SchoolB ID</button> </div>
          <div class='pure-u-1-3 col'> <button onmousedown='_beep();' class='bdropinp bkeyw mny' id='ui_fareoverride_schoolc'>SchoolC ID</button> </div>
        </div>

        <div class='pure-g row4'></div>

        <div class='pure-g row4'>
          <div class='pure-u-1-3 col'> <button onmousedown='_beep();' class='bdropinp bkeyw mny' id='ui_fareoverride_orga'>OrgA ID</button> </div>
          <div class='pure-u-1-3 col'> <button onmousedown='_beep();' class='bdropinp bkeyw mny' id='ui_fareoverride_orgb'>OrgB ID</button> </div>
          <div class='pure-u-1-3 col'> <button onmousedown='_beep();' class='bdropinp bkeyw mny' id='ui_fareoverride_orgc'>OrgC</button> </div>
        </div>

      </div>


    </div> <!-- ui_fareoverride -->


  </body>

  <script src='js/moment.js'></script>

  <script src='js/jquery.js'></script>
  <script src='js/jquery-ui.js'></script>

  <script src='js/diu_ui_site_specific.js'></script>
  <script src='js/diu_ui.js'></script>

</html>