qrazybox/index.html

610 lines
22 KiB
HTML

<!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>&rsaquo;</h2>
</div>
<div class="float-nav right noselect">
<h2>&lsaquo;</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>
<div id="qr-result" class="hide">
<canvas id="qr-result-canvas"></canvas>
<p>
<textarea id="qr-result-dump" readonly></textarea>
</div>
</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>
<button id="new-btn-import-txt" class="big">Import from Text</button>
<div class="clear"></div>
<input type="file" class="invisible" id="import-img">
<input type="file" class="invisible" id="import-txt">
<canvas id="hidden-canvas" class="hide"></canvas>
<img src="#" id="hidden-img" class="hide">
<textarea id="hidden-txt" class="hide"></textarea>
<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 PATCHING BITS RECOVERY OVERLAY -->
<div class="overlay hide" id="div-patching-recovery">
<center>
<div class="box large">
<h3 id="div-patching-recovery-title"></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-patch-rec-error" class="hide">
<h5 class="left">Error : </h5>
<textarea spellcheck="false" readonly style="width:100%;"></textarea>
</div>
<div id="div-patch-rec-data">
<h5>Bits before recovery : </h5>
<textarea spellcheck="false" id="patch-rec-before" readonly style="width:100%;"></textarea>
<h5>Bits after recovery : </h5>
<textarea spellcheck="false" id="patch-rec-after" readonly style="width:100%;"></textarea>
</div>
<div id="div-patch-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-patch-rec-apply">Apply</button>
<button id="btn-patch-rec-cancel">Cancel</button>
</div>
<div class="clear"></div>
</div>
</center>
</div>
<!-- END PATCHING 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>