You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
90 lines
3.3 KiB
HTML
90 lines
3.3 KiB
HTML
12 years ago
|
<!DOCTYPE html>
|
||
|
|
|
||
|
|
<html class="no-js no-browser" lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||
|
|
<title>{{pkg.displayName}} {{pkg.version}} · Demo</title>
|
||
|
|
<meta name="description" content="demo for the jQuery plug in jQuery.qrcode (http://larsjung.de/qrcode/)">
|
||
|
|
<meta name="author" content="Lars Jung">
|
||
|
|
<meta name="viewport" content="width=device-width">
|
||
|
|
<link rel="author" href="http://plus.google.com/106403733398479106535">
|
||
|
|
<link rel="shortcut icon" href="icon-16.ico">
|
||
|
|
<link rel="apple-touch-icon" href="icon-48.png" type="image/png">
|
||
|
|
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700' rel='stylesheet'>
|
||
|
|
<link href='styles.css' rel='stylesheet'>
|
||
|
|
<script src="jquery-1.10.2.js"></script>
|
||
|
|
<script src="jquery.qrcode.js"></script>
|
||
|
|
<script src="ff-range.js"></script>
|
||
|
|
<script src="scripts.js"></script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="container"></div>
|
||
|
|
|
||
|
|
<div class="control left">
|
||
|
|
<a id="banner" href="http://larsjung.de/qrcode/">{{pkg.displayName}} · Demo</a>
|
||
|
|
<hr/>
|
||
|
|
<label for="render">RENDER MODE</label>
|
||
|
|
<select id="render">
|
||
|
|
<option value="canvas" selected="selected">Canvas</option>
|
||
|
|
<option value="image">Image</option>
|
||
|
|
<option value="div">DIV</option>
|
||
|
|
</select>
|
||
|
|
<hr/>
|
||
|
|
<label for="size">SIZE:</label>
|
||
|
|
<input id="size" type="range" value="400" min="100" max="1000" step="50" />
|
||
|
|
<label for="color">COLOR</label>
|
||
|
|
<input id="color" type="color" value="#333333" />
|
||
|
|
<label for="bg-color">BACKGROUND COLOR</label>
|
||
|
|
<input id="bg-color" type="color" value="#ffffff" />
|
||
|
|
<label for="text">CONTENT</label>
|
||
|
|
<textarea id="text">http://larsjung.de/qrcode/</textarea>
|
||
|
|
<hr/>
|
||
|
|
<label for="minversion">MINVERSION:</label>
|
||
|
|
<input id="minversion" type="range" value="5" min="1" max="10" step="1" />
|
||
|
|
<label for="eclevel">ERROR CORRECTION LEVEL</label>
|
||
|
|
<select id="eclevel">
|
||
|
|
<option value="L">L - Low (7%)</option>
|
||
|
|
<option value="M">M - Medium (15%)</option>
|
||
|
|
<option value="Q">Q - Quartile (25%)</option>
|
||
|
|
<option value="H" selected="selected">H - High (30%)</option>
|
||
|
|
</select>
|
||
|
|
<label for="quiet">QUIET ZONE:</label>
|
||
|
|
<input id="quiet" type="range" value="1" min="0" max="4" step="1" />
|
||
|
|
<label for="radius">CORNER RADIUS (not in Opera):</label>
|
||
|
|
<input id="radius" type="range" value="50" min="0" max="50" step="10" />
|
||
|
|
<hr/>
|
||
|
|
<a id="download" download="qrcode.png">DOWNLOAD</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="control right">
|
||
|
|
<label for="mode">MODE</label>
|
||
|
|
<select id="mode">
|
||
|
|
<option value="0">0 - Normal</option>
|
||
|
|
<option value="1">1 - Label-Strip</option>
|
||
|
|
<option value="2" selected="selected">2 - Label-Box</option>
|
||
|
|
<option value="3">3 - Image-Strip</option>
|
||
|
|
<option value="4">4 - Image-Box</option>
|
||
|
|
</select>
|
||
|
|
<hr/>
|
||
|
|
<label for="label">LABEL</label>
|
||
|
|
<input id="label" type="text" value="jQuery.qrcode" />
|
||
|
|
<label for="font">FONT</label>
|
||
|
|
<input id="font" type="text" value="Ubuntu" />
|
||
|
|
<label for="fontsize">FONT HEIGHT:</label>
|
||
|
|
<input id="fontsize" type="range" value="11" min="1" max="20" step="1" />
|
||
|
|
<label for="fontcolor">FONT COLOR:</label>
|
||
|
|
<input id="fontcolor" type="color" value="#ff9818" />
|
||
|
|
<hr/>
|
||
|
|
<label for="image">IMAGE</label>
|
||
|
|
<input id="image" type="file" />
|
||
|
|
<label for="imagesize">IMAGE HEIGHT:</label>
|
||
|
|
<input id="imagesize" type="range" value="13" min="1" max="30" step="1" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<img id="img-buffer" src="dummy.png" />
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|