<!DOCTYPE html>
<html lang="en">
 <head>
 </head>
 <body translate="no">
  <div ng-app="demo" ng-controller="DemoCtrl as demoCtrl">
   <h1>
    ng-barcode
   </h1>
   <ng-barcode ng-barcode-background="{{demoCtrl.colorBackground}}" ng-barcode-code="code39" ng-barcode-color="{{demoCtrl.colorBarcode()}}" ng-barcode-input="{{demoCtrl.barcodeInput}}">
   </ng-barcode>
   <div class="text-field">
    <input ng-model="demoCtrl.barcodeInput" placeholder="Type and transform..." type="text"/>
   </div>
   <section>
    <div class="list-action">
     <h2 class="label">
      Color settings
     </h2>
     <input class="switch-input" id="id-name--1" ng-model="demoCtrl.showHex" type="checkbox"/>
     <label class="switch-label" for="id-name--1">
      HEX format
     </label>
    </div>
    <div class="flex" ng-if="!demoCtrl.showHex">
     <div class="input-range">
      <input max="255" min="0" ng-model="demoCtrl.rgb.r" type="range"/>
      <div>
       Red:
       <br/>
       {{demoCtrl.rgb.r}}
      </div>
     </div>
     <div class="input-range">
      <input max="255" min="0" ng-model="demoCtrl.rgb.g" type="range"/>
      <div>
       Green:
       <br/>
       {{demoCtrl.rgb.g}}
      </div>
     </div>
     <div class="input-range">
      <input max="255" min="0" ng-model="demoCtrl.rgb.b" type="range"/>
      <div>
       Blue:
       <br/>
       {{demoCtrl.rgb.b}}
      </div>
     </div>
    </div>
    <div class="text-field" ng-if="demoCtrl.showHex">
     <input ng-model="demoCtrl.hex" type="text"/>
     <div class="label">
      HEX
     </div>
    </div>
   </section>
  </div>
  <a class="github-corner" href="https://github.com/Zoimaru/ng-barcode" target="_blank">
  </a>
  <style>
   .github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}
  </style>
 </body>
</html>
