-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
153 lines (112 loc) · 4.89 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Generate a QR Code with custom pixellated ASCII text superimposed.">
<title>QRupted QR Codes</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/style.css">
<script>
(function(s,q,e,a,u,k,y){
s._sqSettings={site_id:'30ab0522-5a9f-4bd3-840e-584b84380622'};
u=q.getElementsByTagName('head')[0];
k=q.createElement('script');
k.src=e+s._sqSettings.site_id;
u.appendChild(k);
})(window,document,'https://cdn.squeaky.ai/g/0.4.0/script.js?');
</script>
</head>
<body>
<div class="container">
<header>
<h1>QRupted - Corrupted QR Codes</h1>
</header>
<p>Generate a QR Code with a pixellated ASCII text "artistic embellishment" superimposed! Enter the QR data to encode, and some text to overlay on the resulting image. Due to built-in QR-Code error correction, the encoded data is still accessible, despite the "corruption" of the overlayed word!</p>
<!-- Form and QR Code -->
<div class="row">
<!-- Form -->
<div class="col-md-7 col-sm-5">
<form class="form-horizontal">
<fieldset>
<legend>Data Storage Information</legend>
<div class="form-group">
<label for="qr-data" class="col-md-2 control-label">QRCode Embedded Info</label>
<div class="col-md-10">
<textarea class="form-control" rows="3" id="qr-data" placeholder="Enter the text to store in the QR code">https://www.olliebennett.co.uk/</textarea>
</div>
</div>
</fieldset>
<fieldset>
<legend>Overlay Text Options</legend>
<div class="form-group">
<label for="qr-overlay" class="col-md-2 control-label">Text:</label>
<div class="col-md-10">
<input type="text" class="form-control" id="qr-overlay" placeholder="Enter a short text to overlay" value="OLLIE">
</div>
</div>
<div class="form-group">
<label for="qr-overlay" class="col-md-2 control-label">Font:</label>
<div class="col-md-10">
<select class="form-control" id="qr-overlay-font">
<option value="default">Default</option>
<option value="small_caps">Small Caps</option>
</select>
</div>
</div>
<div class="form-group checkbox">
<div class="col-md-offset-2 col-md-10">
<label>
<input type="checkbox" id="qr-overlay-border" checked /> Show Border Around Text
</label>
</div>
</div>
<div class="form-group checkbox">
<div class="col-md-offset-2 col-md-10">
<label>
<input type="checkbox" id="qr-overlay-transparency" /> Transparent Overlay Text
</label>
</div>
</div>
</fieldset>
<fieldset>
<legend>Advanced Options</legend>
<div class="form-group">
<label for="qr-format-canvas" class="col-md-2 control-label">Format:</label>
<div class="col-md-10">
<label class="radio-inline">
<input type="radio" id="qr-format-canvas" name="qr-format" value="canvas" checked> Canvas
</label>
<label class="radio-inline">
<input type="radio" id="qr-format-div" name="qr-format" value="div"> HTML (DIV)
</label>
<label class="radio-inline">
<input type="radio" id="qr-format-image" name="qr-format" value="image"> Image
</label>
</div>
</div>
</fieldset>
</form>
</div>
<!-- QR Code -->
<div class="col-md-5 col-sm-7" id="qr-container">
<div id="qr"></div>
</div>
</div>
<!-- Footer -->
<div class="alert alert-danger" id="error-container">
<p>An error occurred: <span id="error-msg"></span></p>
</div>
<div class="alert alert-warning">
<p>Remember to verify your QR Code still works (check it with your phone)!</p>
<p>If broken, try enabling transparency and/or removing the border of the overlay text. Your overlayed text may also be too long.</p>
</div>
<div class="alert alert-info">
<p><span>Created by <a href="https://www.olliebennett.co.uk/">Ollie Bennett</a>.</span><span class="pull-right">Raise issues or contribute via <a href="https://github.com/olliebennett/qrupted">GitHub</a></span></p>
</div>
</div><!-- .container -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="assets/symbols/default.js"></script>
<script src="assets/symbols/small_caps.js"></script>
<script src="assets/qrcode.js"></script>
<script src="assets/script.js"></script>