<!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 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="15px">
<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 UNMASKING TOOLBOX -->
<div id="box-tools-masking" class="side-box hide">
<h5>Mask Pattern : </h5>
<input id="mask-pattern" type="text" readonly value="Pattern 0">
<div class="toolbox">
<div id="btn-mask-min" class="minus"><img src="img/minus.png"></div>
<div id="btn-mask-plus" class="plus"><img src="img/plus.png"></div>
</div>
<div class="clear"></div>
<h5>Mask Pattern Area : </h5>
<button id="btn-mask-show-pattern-area" class="toggle">Show</button>
<div class="clear"></div>
<div class="space"></div>
<center><button id="btn-tools-mask" class="toggle">Unmask Data</button></center>
</div>
<!-- END DATA UNMASKING 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-mask-table" 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>
<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-unmasking">
<h5>Data Unmasking</h5>
<h6>Analyze QR code with its modules unmasked</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>
<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>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>
<input id="decode-message" type="text" readonly>
<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 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 LOAD JAVASCRIPT -->
<script type="text/javascript" src="js/jquery.min.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/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>
<!-- 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>