index.html 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. <html>
  2. <head>
  3. <title>BarcodeAPI.org</title>
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <meta name="keywords"
  6. content="barcode, barcode app, barcode generator, barcode api, qr code, qr code generator, code 128, code128, ean8, eac-8, ean13, ean-13, codabar, download barcode, barcodes, pdf, pdf 417">
  7. <meta name="description"
  8. content="Generate barcodes of nearly any type, scan it in the web browser, or download the generated images for free.">
  9. <link rel="icon" type="image/png" href="/static/favicon.png" />
  10. <script src="/static/index.js"></script>
  11. <link rel="stylesheet" type="text/css"
  12. href="/static/flexboxgrid.min.css" />
  13. <link rel="stylesheet" type="text/css" href="/static/index.css" />
  14. </head>
  15. <body onload="loadHash(); init();">
  16. <div class="wrap container-fluid">
  17. <div class="header row middle-xs between-xs">
  18. <div class="col-xs-12 col-sm-3">
  19. <div class="logo">
  20. <img src="/img/barcodeapi-logo.svg" alt="BarcodeAPI Logo"
  21. aria-label="Logo">
  22. </div>
  23. </div>
  24. <div class="header-share">
  25. <div class="row end-xs middle-xs">
  26. <div class="col-xs">
  27. <h4>
  28. GOT FEEDBACK?
  29. <br />
  30. <span class="feedback">feedback@barcodeapi.org</span>
  31. </h4>
  32. </div>
  33. <div class="share-icon email">
  34. <a
  35. href="mailto:feedback@barcodeapi.org?body=I%20love%20the%20new%20UI%21&amp;subject=Feedback%20about%20BarcodeAPI"
  36. target="_blank">
  37. <img src="/img/email.svg" alt="Share via Email"
  38. aria-label="Share Icon">
  39. </a>
  40. </div>
  41. </div>
  42. </div>
  43. </div>
  44. <div class="row main start-xs between-xs">
  45. <div class="choose-barcode-type col-xs-12 col-sm-6">
  46. <h3>CHOOSE YOUR BARCODE TYPE</h3>
  47. <div class="select-type" id="select-type">
  48. <a onclick="toggleOpenBarcodeTypes()">Select Barcode</a>
  49. </div>
  50. <div class="barcode-types" id="topnav">
  51. <a id="type-auto" onclick="setType('auto');"
  52. onmouseover="showCodeDescription('auto')">Auto</a>
  53. </div>
  54. <div class="col-xs-8 bulk-upload">
  55. <h4>Need more barcodes?</h4>
  56. <a href="/bulk.html" class="text-link">
  57. <img src="/img/barcode.svg" class="icon-first" />BULK BARCODE
  58. GENERATOR<img src="/img/chevron-right.svg" class="icon-last" />
  59. </a>
  60. </div>
  61. </div>
  62. <div class="display-barcode col-xs-12 col-sm-6">
  63. <div id="frame">
  64. <form onsubmit="return false;">
  65. <div class="row start-xs middle-xs">
  66. <div class="col-xs-9">
  67. <input id="text" class="barcode-text-input pulse-bg"
  68. onkeyup="delayGenCode()" type="text" placeholder="TRY ME!"
  69. autocomplete="off" maxlength="200"
  70. title="Enter a code for anything" />
  71. </div>
  72. <div class="col-xs-3">
  73. <input class="barcode-text-input-clear" type="reset"
  74. value="CLEAR" title="Clear text" />
  75. </div>
  76. </div>
  77. </form>
  78. <input aria-hidden="true" id="barcode_image_link" />
  79. <div id="message">Barcode link copied to clipboard.</div>
  80. <div id="barcode_wrapper">
  81. <img id="barcode_output" />
  82. </div>
  83. <div id="barcode_options" class="row middle-xs center-xs">
  84. <div class="barcode-icon" id="barcode_print">
  85. <a id="barcode_print_button" onclick="printCode()"
  86. title="Print Barcode">
  87. <img src="/img/print.svg" alt="Print barcode"
  88. aria-label="Print barcode">
  89. </a>
  90. </div>
  91. <div class="barcode-icon" id="barcode_link">
  92. <a id="barcode_link_button" onclick="copyBarcodeLink()"
  93. title="Get Link to Barcode">
  94. <img src="/img/chain.svg" alt="Get barcode link"
  95. aria-label="Get barcode link">
  96. </a>
  97. </div>
  98. <div class="barcode-icon" id="barcode_image">
  99. <a id="barcode_image_button" onclick="copyImageToClipboard()"
  100. title="Copy Barcode as Image">
  101. <img src="/img/image.svg" alt="Copy barcode image"
  102. aria-label="Copy barcode image">
  103. </a>
  104. </div>
  105. <div class="barcode-icon" id="barcode_download">
  106. <a id="barcode_download_button" target="_blank"
  107. title="Download Barcode Image">
  108. <img src="/img/file_download.svg" alt="Download barcode"
  109. aria-label="Download barcode">
  110. </a>
  111. </div>
  112. </div>
  113. </div>
  114. </div>
  115. </div>
  116. <!-- footer -->
  117. <div class="footer row middle-xs top-sm between-xs">
  118. <div class="col-xs-12 col-sm-8">
  119. <h5>
  120. Free, Open Source,
  121. <a href="https://git.mclarkdev.com/BarcodeAPI.org/server"
  122. target="_blank">BarcodeAPI.org</a>
  123. </h5>
  124. <p>
  125. Generate barcodes of nearly any type, scan it in the web browser,
  126. or download the generated images for free. BarcodeAPI.org is an
  127. open source barcode server capable of generating a wide range of
  128. barcodes over a RESTful HTTP server.
  129. <a href="/license.html">license</a>
  130. </p>
  131. </div>
  132. <div class="col-xs-12 col-sm-4">
  133. <div class="docs-link row start-xs end-sm">
  134. <a href="/manual.pdf" target="_blank" class="col-xs">
  135. <span class="docs-icon"><img src="/img/docs.svg"></span> <span>Read
  136. the Docs</span>
  137. </a>
  138. </div>
  139. </div>
  140. </div>
  141. </div>
  142. </body>
  143. </html>