Merge remote branch 'origin/master'

qistoph · Apr 27, 2013 · 8c4e198 · 8c4e198
2 parents 15325df + 2d8e0d8
commit 8c4e198
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 17 deletions.
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!doctype html/>
 <html>
 	<head>
 		<title>WiFi QR-code - Javascript</title>
@@ -63,7 +63,7 @@
 				border-spacing: 0;
 			}
 			/********** END RESET **********/
-			
+
 			body {
 				font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
 				font-size: 100%;
@@ -101,7 +101,7 @@
 			}
 
 			#content {
-				border: 1px solid #000;
+				border: 1px solid black;
 				float: left;
 				padding: 10px;
 				margin: 10px;
@@ -135,7 +135,11 @@
 				min-width: 335px;
 				width: 50%;
 			}
-
+
+			#spread {
+				margin-top: 10px;
+			}
+
 			input[type=text],
 			input[type=password] {
 				width: 100%;
@@ -168,6 +172,61 @@
 				vertical-align: bottom;
 			}
 		</style>
+
+		<style target="card" disabled="true">
+			/****** Print Card ******/
+
+			#card {
+				margin: 4mm;
+				width: 54mm;
+				height: 85mm;
+				border: 1px dashed black;
+				position: relative;
+				font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
+				font-size: 2.8mm;
+				line-height: 1;
+			}
+
+			#card #cardcontent {
+				margin: 2mm;
+				height: 80mm;
+				width: auto;
+				left: 0;
+				right: 0;
+				border: 1px solid black;
+				position: absolute;
+			}
+
+			#card #qrcode canvas {
+				width: 42mm;
+				height: 42mm;
+				margin: 3mm auto;
+				display: table;
+			}
+
+			#card #qrtitle {
+				margin: 0 3mm;
+				font-weight: bold;
+			}
+
+			#card #text {
+				margin: 3mm;
+			}
+
+			#card #about {
+				position: absolute;
+				left: 14mm;
+				bottom: 3mm;
+				font-size: 80%;
+			}
+
+			#card #wifilogo {
+				position: absolute;
+				left: 3mm;
+				bottom: 3mm;
+				width: 8mm;
+			}
+		</style>
 
 		<script>
 			// http://jeromeetienne.github.io/jquery-qrcode/
@@ -220,31 +279,37 @@
 					";";
 
 				divCanvas.empty().qrcode(url);
-				divText.html('<img src="wifi2.png" style="vertical-align:text-top;"> ' + $("#S").val() + ' (' + type + ')');
+				divText.html('' + $("#S").val() + ' (' + type + ')');
 			}
 
-			function printQR() {
-				var printWin = window.open('', 'qrcodewifi', '');
-				printWin.document.write('<doctype html><html><head><title>WiFi: ' + $("#S").val() + '</title></head><body>');
-				printWin.document.write('<div id="qrresult">');
+			window.printQR = function(targetWin) {
+				var printWin = window.open('', '_blank', '');
+
+				printWin.document.write('<!doctype html/><html><head><title>WiFi: ' + $("#S").val() + '</title></head><body>');
+				printWin.document.write('<div id="card">');
+				printWin.document.write('<div id="cardcontent">');
 				printWin.document.write('<div id="qrcode"></div>');
-				printWin.document.write('<div id="qrsub"></div>');
+				printWin.document.write('<div id="qrtitle"></div>');
+				printWin.document.write('<div id="text">Connect to the network by scanning the QR code above with your (Android) device.</div>');
+				printWin.document.write('<img src="wifi.png" id="wifilogo">');
+				printWin.document.write('<div id="about">Generate your WiFi QR at<br/>http://qistoph.github.io/WiFiQR</div>');
+				printWin.document.write('</div>');
 				printWin.document.write('</div>');
-				printWin.document.write('WiFi QR-code generator - http://qistoph.github.io/WiFiQR/');
 				printWin.document.write('</body></html>');
 
-				$("link, style, script").each(function() {
+				$("style[target='card']").each(function() {
 					$(printWin.document.head).append($(this).clone())
 				});
 
-				generateQR($("#qrcode", printWin.document), $("#qrsub", printWin.document));
+				generateQR($("#qrcode", printWin.document), $("#qrtitle", printWin.document));
 				printWin.print();
-				printWin.close();
+				//printWin.close();
 			}
 		</script>
 	</head>
 	<body>
-		<div>
+		<div id="fb-root"></div><script>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id; js.src = "http://connect.facebook.net/nl_NL/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>
+
 			<div id="content">
 				<div id="qrresult">
 					<div id="qrcode"></div>
@@ -276,6 +341,10 @@
 						<td><button onClick="generateQR($('#qrcode'), $('#qrsub'))">Generate</button> <button onClick="printQR()">Print</button></td>
 					</tr>
 				</table>
+				<div id="spread">
+					<a href="https://twitter.com/share" class="twitter-share-button" data-via="qistoph" data-hashtags="wifiqr">Tweet</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
+					<div class="fb-like" data-href="http://qistoph.github.io/WiFiQR/" data-send="false" data-layout="button_count" data-width="200" data-show-faces="false" data-font="tahoma"></div>
+				</div>
 			</div>
 			<div id="about">
 				<h1>WiFi QR-code - Javascript</h1>
@@ -308,8 +377,6 @@ <h1>License</h1>
 				</p>
 			</div>
 
-		</div>
-
 		<a href="https://github.com/qistoph/WiFiQR/" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
 	</body>
 </html>
diff --git a/wifi.png b/wifi.png
diff --git a/wifi2.png b/wifi2.png