<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="icon" href="img/icon.png"> <title>QRazyBox - QR Code Analysis and Recovery Toolkit</title> </head> <body> <!-- START LOADER OVERLAY --> <div class="loader"> <div> <img src="img/icon.png" class="logo"> <br><br><br> <img src="img/preloader.gif" class="animated"> </div> </div> <!-- END LOADER OVERLAY --> <!-- START HEADER MENU --> <div class="header noselect"> <div class="left"> <img src="img/icon.png" class="icon"> <h3>QRazyBox</h3> </div> <div class="right" id="header-menu"> <a id="menu-new" href="javascript:void(0);"><h4>New</h4></a> <a id="menu-load" href="javascript:void(0);"><h4>Load</h4></a> <a id="menu-save" href="javascript:void(0);"><h4>Save</h4></a> <a id="menu-tools" href="javascript:void(0);"><h4>Tools</h4></a> <a id="menu-help" href="help/index.html" target="_blank"><h4>Help</h4></a> <a id="menu-about" href="javascript:void(0);" onclick="$('#div-about').show();"><h4>About</h4></a> </div> <img src="img/bars.png" class="menu-bar right"> </div> <!-- END HEADER MENU --> <!-- START SIDE FLOATING NAVIGATION --> <div class="float-nav left noselect"> <h2>›</h2> </div> <div class="float-nav right noselect"> <h2>‹</h2> </div> <!-- END SIDE FLOATING NAVIGATION --> <!-- START FOOTER TOOLBOX --> <div class="footer noselect hide"> <div class="mode-indicator"> <button id="mobile-editor-mode" class="active">Editor</button> <button id="mobile-decode-mode">Decode</button> </div> </div> <!-- END FOOTER TOOLBOX --> <!-- START LEFT TOOLBOX --> <div class="left-box"> <div style="height:60px;"></div> <div class="side-box noselect" id="box-mode"> <center><button id="btn-switch-mode" style="width:100%;">Editor Mode</button></center> </div> <!-- START EDITOR TOOLBOX --> <div class="side-box noselect" id="box-work"> <div id="div-tool-work"> <h5>Painter :</h5> <div class="painter-box" id="painter-box"> <div class="active" index="0" id="painter-black"><img src="img/pixel-black.png"></div> <div index="1" id="painter-white"><img src="img/pixel-white.png"></div> <div index="2" id="painter-eraser"><img src="img/eraser-tool.png"></div> </div> <div class="painter-box"> <div id="painter-fill"><img src="img/fill-tool.png"></div> </div> <div class="clear"></div> <h5>QR-Code version :</h5> <input id="qr-version" type="text" readonly value="21x21 (ver. 1)"> <div class="toolbox"> <div id="btn-version-min" class="minus"><img src="img/minus.png"></div> <div id="btn-version-plus" class="plus"><img src="img/plus.png"></div> </div> </div> <div class="clear"></div> <h5>Module Size :</h5> <input id="qr-size" type="text" readonly value="10px"> <div class="toolbox"> <div id="btn-size-min" class="minus"><img src="img/minus.png"></div> <div id="btn-size-plus" class="plus"><img src="img/plus.png"></div> </div> <div class="clear"></div> <div id="div-tool-result" class="hide"> <h5>Grey Modules :</h5> <button class="toggle active" id="btn-show-grey-pixel">Show</button> <h5>QR Decoder :</h5> <button id="btn-qr-decode">Decode</button> <h6 id="h6-brute-force-msg">*Decoding will brute-forcing <br>possible format info pattern</h6> <div class="clear"></div> <!--<h5>Save as Image :</h5> <button class="" id="btn-save-as-image">Download</button>--> </div> </div> <!-- END EDITOR TOOLBOX --> <!-- START EXTRACT QR INFO TOOLBOX --> <div id="box-tools-extract" class="side-box hide"> <h5>Error Correction log : </h5> <button id="btn-extract-show-rs" class="toggle">Show</button> <h5>Decoding Error : </h5> <div class="clear"></div> <button id="btn-extract-show-error" class="toggle">Show</button> <div class="clear"></div> <div class="space"></div> <div><center><button id="btn-tools-extract">Back to editor</button></center></div> </div> <!-- END EXTRACT QR INFO TOOLBOX --> <!-- START DATA SEQUENCE TOOLBOX --> <div id="box-tools-analysis" class="side-box hide"> <h5>Value : </h5> <input type="text" value="" class="full" id="data-analysis-value"> <div class="clear"></div> <h5>Type : </h5> <input type="text" readonly value="" class="full read-only" id="data-analysis-type"> <div class="clear"></div> <h5>Decoded data : </h5> <input type="text" readonly value="" class="full read-only" id="data-analysis-decoded"> <div class="clear"></div> <div class="space"></div> </div> <!-- END DATA SEQUENCE TOOLBOX --> </div> <!-- END LEFT TOOLBOX --> <!-- START RIGHT TOOLBOX --> <div class="right-box"> <div style="height:60px;"></div> <!-- START IMAGE SAMPLE TOOLBOX --> <div class="side-box noselect" id="box-sample"> <h5>Original Sample :</h5> <div class="sample-box"> <img src="#" id="img-sample"> </div> <input id="sample-file" type="file" class="hide"> <div class="space"></div> <center> <label for="sample-file" class="sample-btn"> Load Sample </label> </center> </div> <!-- END IMAGE SAMPLE TOOLBOX --> <!-- START HISTORY TOOLBOX --> <div class="side-box noselect" id="box-history"> <h5>History :</h5> <div class="history"> </div> </div> <!-- END HISTORY TOOLBOX --> </div> <!-- END RIGHT TOOLBOX --> <!-- START MAIN WORKSPACE --> <div class="main"> <div class="qr-box"> <table id="qr-table" class="qr-tab"></table> <table id="qr-overlay" class="qr-tab"></table> <canvas id="qr-result" class="hide"></canvas> </div> <div id="div-extract" class="div-extract hide"> </div> </div> <!-- END MAIN WORKSPACE --> <!-- START WELCOME PAGE OVERLAY --> <div class="overlay" id="home-box"> <center> <div class="box"> <h1 class="title">QRazyBox</h1> <div class="space"></div> <button id="home-new" class="big yellow">New Project</button> <button id="home-load" class="big green">Load Existing Project</button> <div class="space"></div> </div> </center> </div> <!-- END WELCOME PAGE OVERLAY --> <!-- START NEW OVERLAY --> <div class="overlay hide" id="div-new"> <center> <div class="box"> <h3>New Project</h3> <div class="space"></div> <button id="new-btn-new" class="big">New blank QR code</button> <button id="new-btn-import-img" class="big">Import from Image</button> <div class="clear"></div> <input type="file" class="invisible" id="import-img"> <canvas id="hidden-canvas" class="hide"></canvas> <img src="#" id="hidden-img" class="hide"> <div class="clear"></div> <div class="space small"></div> <label for="import-img" class="hide"></label> <div class="clear"></div> <div class="space"></div> <button onclick="$('#div-new').hide();">Close</button> </div> </center> </div> <!-- END NEW OVERLAY --> <!-- START SAVE OVERLAY --> <div class="overlay hide" id="div-save"> <center> <div class="box"> <h3>Save Project</h3> <div class="space"></div> <h5>Save As : </h5> <input type="text" placeholder="Enter project name" id="save-name"> <button class="left" onclick="saveProject($('#save-name').val());">Save</button> <div class="clear"></div> <div id="div-save-ext"> <h5>Save in existing project : </h5> <div class="project-list" id="list-save"> </div> </div> <div class="space"></div> <button onclick="$('#div-save').hide();">Close</button> </div> </center> </div> <!-- END SAVE OVERLAY --> <!-- START TOOLS OVERLAY --> <div class="overlay hide" id="div-tools"> <center> <div class="box"> <h3>Tools List</h3> <div class="space"></div> <div class="project-list noselect" id="list-tools"> <div id="tools-extract"> <h5>Extract QR Information</h5> <h6>Force decode and get information about the current QR code as much as possible</h6> </div> <div id="tools-rs-decoder"> <h5>Reed-Solomon Decoder</h5> <h6>Errors and Erasures correction by decoding Reed-Solomon blocks</h6> </div> <div id="tools-brute-force"> <h5>Brute-force Format Info Pattern</h5> <h6>Try all possibilities of Format Info Pattern when decoding</h6> </div> <div id="tools-masking"> <h5>Data Masking</h5> <h6>Simulate data masking (XOR) with Mask pattern</h6> </div> <div id="tools-pad-recovery"> <h5>Padding Bits Recovery</h5> <h6>Recover missing bits by placing terminator and padding bits</h6> </div> <div id="tools-data-analysis"> <h5>Data Sequence Analysis (<i>Experimental</i>)</h5> <h6>Analyze data sequence of QR code</h6> </div> </div> <div class="space"></div> <button onclick="$('#div-tools').hide();">Close</button> </div> </center> </div> <!-- END TOOLS OVERLAY --> <!-- START LOAD OVERLAY --> <div class="overlay hide" id="div-load"> <center> <div class="box"> <h3>Load Project</h3> <div class="space"></div> <div class="project-list" id="list-load"> </div> <div class="space"></div> <button onclick="$('#div-load').hide();">Close</button> </div> </center> </div> <!-- END LOAD OVERLAY --> <!-- START ABOUT OVERLAY --> <div class="overlay hide" id="div-about"> <center> <div class="box"> <h3>About</h3> <div class="space"></div> <div class="clear"></div> <h4 id="txt-version">QRazyBox v0.1.0</h4> <h6>QR Code Analysis and Recovery Toolkit</h6> <div class="space"></div> <p>Written by : Merricx</p> <p>License : MIT</p> <br> <p>Issues or pull requests : </p> <p><a href="https://github.com/merricx/qrazybox/">https://github.com/merricx/qrazybox/</a></p> <br> <p><i>QR Code is registered trademark of DENSO WAVE Inc.</i></p> <div class="space"></div> <button onclick="$('#div-about').hide();">Close</button> </div> </center> </div> <!-- END ABOUT OVERLAY --> <!-- START QR DECODER OVERLAY --> <div class="overlay hide" id="div-decode"> <center> <div class="box"> <h3>QR Decoder</h3> <div class="space"></div> <h5>Decoded Message : </h5> <textarea id="decode-message" spellcheck="false" style="width: 100%; margin: 0;" readonly></textarea> <div class="clear"></div> <div id="div-decode-error" class="hide"> <h5>Error : </h5> <input id="decode-error" type="text" readonly> </div> <div class="clear"></div> <div class="space"></div> <button onclick="$('#div-decode').hide();">Close</button> </div> </center> </div> <!-- END QR DECODER OVERLAY --> <!-- START BRUTE-FORCE-FORMAT-INFO OVERLAY --> <div class="overlay hide" id="div-brute-force-loader"> <center> <div class="box"> <h3>Brute-force Format Info Pattern</h3> <div class="space"></div> <div id="brute-force-content" class="hide"> <div class="clear"></div> <h5>Decoded Message : </h5> <input id="brute-force-decoded-data" type="text" readonly> <div class="clear"></div> <h5 id="brute-force-ecc">Error Correction Level : <span></span></h5> <h5 id="brute-force-mask">Mask Pattern : <span></span></h5> <div class="paging"> <button id="btn-brute-force-counter-prev"> < </button> <h5 id="brute-force-result-counter">1 of 1 result</h5> <button id="btn-brute-force-counter-next"> > </button> </div> </div> <h5 id="brute-force-msg-wait">Brute-forcing...</h5> <h5 id="brute-force-msg-fail" class="hide">No message found in any possible format info patterns. Check the data modules and try again.</h5> <div class="clear"></div> <div class="space"></div> <button class="hide" id="btn-brute-force-apply-pattern" onclick="$('#div-brute-force-loader').hide();">Apply</button> <!--<button id="btn-brute-force-close">Close</button>--> </div> <div id="brute-force-hidden-content"> </div> </center> </div> <!-- END BRUTE-FORCE-FORMAT-INFO OVERLAY --> <!-- START FORMAT INFORMATION PATTERN OVERLAY --> <div class="overlay hide" id="format-information-box"> <center> <div class="box"> <h3>Format Info Pattern</h3> <div class="space"></div> <div id="format-info-msg" class="hide"> <h5>Format info pattern is currently set to be Brute-forced.</h5> </div> <div id="format-info-content"> <select class="select" id="select-format-info-pos"> <option value="TOP_LEFT">Top Left</option> <option value="TOP_RIGHT">Top Right</option> <option value="BOTTOM_LEFT">Bottom Left</option> </select> <div class="space"></div> <table id="qr-format-info" class="qr-tab"> </table> <div class="space"></div> <div class="row"> <div class="col"> <h5 class="left">Error Correction Level:</h5> </div> <div class="col"> <div id="slider-ecc" class="slider"> <div id="ecc-l">L</div> <div id="ecc-m">M</div> <div id="ecc-q">Q</div> <div id="ecc-h">H</div> </div> </div> </div> <div class="clear"></div> <div class="row"> <div class="col"> <h5 class="left">Mask Pattern :</h5> </div> <div class="col"> <div id="slider-mask" class="slider"> <div id="mask-0">0</div> <div id="mask-1">1</div> <div id="mask-2">2</div> <div id="mask-3">3</div> <div id="mask-4">4</div> <div id="mask-5">5</div> <div id="mask-6">6</div> <div id="mask-7">7</div> </div> </div> </div> </div> <div class="clear space"></div> <button id="btn-save-info">Save</button> <button onclick="$('#format-information-box').hide();">Cancel</button> </div> </center> </div> <!-- END FORMAT INFORMATION PATTERN OVERLAY --> <!-- START REED-SOLOMON DECODER OVERLAY --> <div class="overlay hide" id="div-rs-decoder"> <center> <div class="box"> <h3>Reed-Solomon Decoder</h3> <div class="space"></div> <div id="rs-decoder-page-1" class="hide"> <div class="left"> </div> <h6 class="left"><i>Note: Input must be in Decimal value and separated by comma</i></h6> </div> <div id="rs-decoder-page-2" class="hide"> <h5>Decoded Reed-Solomon blocks : </h5> <input type="text" id="rs-decoder-output" readonly> <div class="clear"></div> <h5>Final data string : </h5> <textarea readonly spellcheck="false" id="rs-decoder-final-msg" class="left" rows="5"></textarea> <div class="clear"></div> <h6 class="left invisible" id="rs-decoder-error">ERROR: Error here!!!</h6> </div> <div class="clear"></div> <div class="space"></div> <div class="right"> <button id="btn-rs-decoder-prev" class="hide">Back</button> <button id="btn-rs-decoder-next">Decode</button> <!--<button id="btn-rs-decoder-apply" class="hide">Apply</button>--> </div> <button class="left" onclick="$('#div-rs-decoder').hide();">Close</button> <div class="clear"></div> </div> </center> </div> <!-- END REED-SOLOMON DECODER OVERLAY --> <!-- START DATA MASKING OVERLAY --> <div class="overlay hide" id="div-data-masking"> <center> <div class="box"> <h3>Data Masking</h3> <div class="space"></div> <div class="row"> <div class="col"> <h5 class="left">Mask Pattern :</h5> </div> <div class="col"> <div class="slider" id="data-masking-slider"> <div data="0">0</div> <div data="1">1</div> <div data="2">2</div> <div data="3">3</div> <div data="4">4</div> <div data="5">5</div> <div data="6">6</div> <div data="7">7</div> </div> </div> </div> <div class="clear"></div> <div class="space"></div> <button class="left" onclick="$('#div-data-masking').hide();">Close</button> <button class="right" id="btn-data-masking-apply">Apply</button> <div class="clear"></div> </div> </center> </div> <!-- END DATA MASKING OVERLAY --> <!-- START PADDING BITS RECOVERY OVERLAY --> <div class="overlay hide" id="div-padding-recovery"> <center> <div class="box large"> <h3>Padding Bits Recovery</h3> <div class="space"></div> <div class="preview-box left"> <table id="qr-dummy" class="qr-tab"></table> </div> <div class="left"> <div id="div-pad-rec-error" class="hide"> <h5 class="left">Error : </h5> <textarea spellcheck="false" readonly style="width:100%;"></textarea> </div> <div id="div-pad-rec-data"> <h5>Bits before recovery : </h5> <textarea spellcheck="false" id="pad-rec-before" readonly style="width:100%;"></textarea> <h5>Bits after recovery : </h5> <textarea spellcheck="false" id="pad-rec-after" readonly style="width:100%;"></textarea> </div> <div id="div-pad-rec-warning" class="hide"> <h5 class="left">Warning : </h5> <textarea spellcheck="false" readonly style="width:100%;"></textarea> </div> <h6><i>Note : Recovered modules are marked with green color</i></h6> <div class="space"></div> <button id="btn-pad-rec-apply">Apply</button> <button id="btn-pad-rec-cancel">Cancel</button> </div> <div class="clear"></div> </div> </center> </div> <!-- END PADDING BITS RECOVERY OVERLAY --> <!-- START WARNING OVERLAY --> <div class="warning hide"> <center><h3>Sorry, but QRazyBox doesn't work on mobile!</h3></center> </div> <!-- END WARNING OVERLAY --> <!-- START LOAD JAVASCRIPT --> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/modernizr-custom.js"></script> <script type="text/javascript" src="js/table.js"></script> <script type="text/javascript" src="js/sqrd.js"></script> <script type="text/javascript" src="js/reedsolomon.js"></script> <script type="text/javascript" src="js/qr.js"></script> <script type="text/javascript" src="js/jsqrcode/grid.js"></script> <script type="text/javascript" src="js/jsqrcode/version.js"></script> <script type="text/javascript" src="js/jsqrcode/detector.js"></script> <script type="text/javascript" src="js/jsqrcode/formatinf.js"></script> <script type="text/javascript" src="js/jsqrcode/errorlevel.js"></script> <script type="text/javascript" src="js/jsqrcode/bitmat.js"></script> <script type="text/javascript" src="js/jsqrcode/datablock.js"></script> <script type="text/javascript" src="js/jsqrcode/bmparser.js"></script> <script type="text/javascript" src="js/jsqrcode/datamask.js"></script> <script type="text/javascript" src="js/jsqrcode/rsdecoder.js"></script> <script type="text/javascript" src="js/jsqrcode/gf256poly.js"></script> <script type="text/javascript" src="js/jsqrcode/gf256.js"></script> <script type="text/javascript" src="js/jsqrcode/decoder.js"></script> <script type="text/javascript" src="js/jsqrcode/qrcode.js"></script> <script type="text/javascript" src="js/jsqrcode/findpat.js"></script> <script type="text/javascript" src="js/jsqrcode/alignpat.js"></script> <script type="text/javascript" src="js/jsqrcode/databr.js"></script> <script type="text/javascript" src="js/main.js"></script> <script type="text/javascript"> //Detect mobile browsers (http://stackoverflow.com/questions/11381673/detecting-a-mobile-browser) and support detection for some HTML5 features var is_mobile = false; (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) is_mobile = true;})(navigator.userAgent||navigator.vendor||window.opera); if(is_mobile) $(".warning").show(); //Detect unsupported HTML features using Modernizr else if(!Modernizr.canvas || !Modernizr.fileinput || !Modernizr.filereader || !Modernizr.imgcrossorigin || !Modernizr.json || !Modernizr.localstorage) $(".warning").show().find("h3").html("Please, upgrade your browser to use QRazyBox.<br>Unfortunately, your browser doesn't support some features that used by this tool."); $(window).load(function(){ $(".loader").delay(1000).fadeOut(); }) </script> <!-- END LOAD JAVASCRIPT --> <!-- START NOSCRIPT TAG --> <noscript> <div> <center><h4>Please enable your Javascript to use this tool.</h4></center> </div> </noscript> <!-- END NOSCRIPT TAG --> </body> </html>