-
Notifications
You must be signed in to change notification settings - Fork 14
/
Copy pathindex.html
134 lines (111 loc) · 5.87 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wifi-QR-Poster | Generate a poster with password & QR Code for your Wifi network</title>
<meta property="og:image" content="img/example.png">
<link rel="stylesheet" type="text/css" href="css/screen.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="css/print.css" media="print"/>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div class="container hidden-print">
<a href="https://github.com/georgjaehnig/wifi-qr-poster"><img style="position: absolute; top: 0; right: 0; border: 0; z-index: 999;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
<div class="row">
<div class="col-sm-9">
<h1>Wifi-QR-Poster</h1>
<p class="lead">Generate a poster with password & QR Code for your Wifi network. Your guests then only need to scan it with their phone. No more "how's the password spelled?"-hassle!</p>
<p>Your guests' phone needs a QR-Code reader. On Android, you may need to install an extra app, I recommend <a href="https://play.google.com/store/apps/details?id=com.google.zxing.client.android">Barcode Scanner for Android</a>. On iPhone simply <a href="https://mashtips.com/share-wifi-network-with-qr-code/">use the core Camera app</a>.</p>
<p>When scanned, the Wifi network will be immediately recognized and you will be asked to connect with it. Just try it out with the code aside.</p>
<form class="form-horizontal" >
<div class="form-group">
<label class="col-xs-3 control-label" for="ssid">SSID</label>
<div class="col-xs-9">
<input type="text" class="form-control" id="ssid" placeholder="SSID"/>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label" for="key">Password</label>
<div class="col-xs-9">
<input type="text" class="form-control" id="key" placeholder="Password" />
<span class="help-block">Will not be stored, even not sent outside the browser.</span>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label" for="encryption">Encryption</label>
<div class="col-xs-9">
<select class="form-control" id="encryption">
<option value="WPA">WPA/WPA2</option>
<option>WEP</option>
<option>nopass</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-3 col-xs-9">
<div class="checkbox">
<label>
<input type="checkbox" id="hidden"> Network is hidden / invisible
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-3 col-xs-9">
<div class="checkbox">
<label>
<input type="checkbox" id="hide-key"> Hide password on poster
<span class="help-block">Password will still be readable from the QR code!</span>
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-3 col-xs-9">
<button type="button" class="btn btn-primary" onclick="generate();">Preview & Print</button>
</div>
</div>
</form>
</div>
<div class="example thumbnail col-sm-3"><img src="img/example.png"></div>
</div>
<footer class="footer">
<p>Send <a href="https://jaehnig.org/#contact">feedback</a>.</p>
</footer>
</div><!-- /.container -->
<div class="print">
<div class="wifi">
<img src="img/wifi.svg" />
</div>
<div class="ssid">
<span class="text"></span>
</div>
<div class="key">
<span class="img">
<img src="img/key.svg" />
</span>
<span class="text"></span>
</div>
<div id="qrcode"></div>
<div class="source">Generated on https://georgjaehnig.github.io/wifi-qr-poster/</div>
</div>
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-92556342-1', { 'anonymize_ip': true, 'storage': 'none' } );
ga('send', 'pageview');
</script>
</body>
</html>