Version 2.1 (now with QR-codes)

JanJastrow · Jul 6, 2014 · 7ade77e · 7ade77e
1 parent 9f24298
commit 7ade77e
Show file tree

Hide file tree

Showing 4 changed files with 170 additions and 31 deletions.
diff --git a/config.php b/config.php
@@ -1,30 +1,57 @@
 <?php
 
 /*
-// Configure your own wifi(s)
+// Configure your own wifi(s) here
 */
 
+// name your company, apartment-name, whatever
 $organization = "Schwerkraftlabor.de";
+// choose an identifier (not that important)
 $identifier = "de.schwerkraftlabor.wlan";
 
 $arr_wlan = array(
 					array(
+						// the SSID (Name) of your WiFi
 						'name' => 'Schwerkraftlabor Alpha',
+						// the password
 						'pass' => 'Douglas42',
+						// the encryption-method
 						'sec' => 'WPA2',
+						// the 802.11-standards
 						'standards' => 'n/a',
+						// the frequency (5Ghz / 2.4 GHz)
 						'freq' => '5',
+						// is the WiFi hidden?
 						'hidden' => false,
+						// a description for this WiFi
 						'description' => '– IN WIFI WE TRUST! –',
 					),
+
+					// If you got only 1 WiFi you can delete the following part:
+					// or change the configuration to your own needs.
+
 					array(
+						// the SSID (Name) of your WiFi
 						'name' => 'Schwerkraftlabor Beta',
+						// the password
 						'pass' => 'Douglas42',
+						// the encryption-method
 						'sec' => 'WPA2',
+						// the 802.11-standards
 						'standards' => 'n/g',
+						// the frequency (5Ghz / 2.4 GHz)
 						'freq' => '2.4',
+						// is the WiFi hidden?
 						'hidden' => false,
+						// a description for this WiFi
 						'description' => '– IN WIFI WE TRUST! –',
 					),
+
+					// delete to this line (^ above)
+
 				);
+
+
+// this counts the number of WiFis (nothing to change here)
+$wificount = count($arr_wlan);
 ?>
diff --git a/img/bg.png b/img/bg.png
diff --git a/index.php b/index.php
@@ -1,5 +1,6 @@
 <?php
-// include config
+// includes the config
+// make your changes there!
 require 'config.php';
 
 ?>
@@ -15,30 +16,28 @@
 	padding: 0;
 }
 
-html {
+body {
 	font-family: sans-serif;
-	background-image: url(img/bg.png);
+	background: #2694af;
+	font-size: 12pt;
 }
-
 a {
 	text-decoration: none;
+	color: #000;
 }
 
 h1 {
 	font-size: 1.5em;
-}
-@media only screen and (max-width: 320px) {
-	h1 {
-		font-size: 1.2em;
-	}
+	white-space: nowrap;
 }
 
-.install {
-	width: 230px;
-	margin: 1em .2em;
+a.profiles {
 	display: inline-block;
-	color: #000000;
-	padding: 10px 20px;
+}
+.profiles {
+	margin: 1em .2em;
+	color: #000;
+	padding: 1em 1em;
 	background: -webkit-gradient(linear, left top, left bottom, from(white), to(#e0e0e0));
 	background: -webkit-linear-gradient(top, white 0%, #e0e0e0);
 	background: -moz-linear-gradient(top, white 0%, #e0e0e0);
@@ -49,15 +48,39 @@
 	box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px -1px 0px rgba(255, 255, 255, 0.7);
 	text-shadow: 0px -1px 1px rgba(158, 158, 158, 0.2), 0px 1px 0px rgba(255, 255, 255, 0.3);
 }
-.install p {
+.profiles p {
 	margin: .5em 0;
 }
 
-.cog {
+.desktop .links {
+	display: inline-block;
+	border: 1px solid #aaa;
+	padding: 0.5em 4em 0.4em 0.5em;
+	background:rgba(255,255,255,0.3);
+}
+.mobile .links {
+	display: block;
+	border: 1px solid black;
+	padding: 0.5em 0.5em;
+	background:rgba(255,255,255,0.65);
+}
+
+.icon {
 	width: 12px;
 	height: 12px;
 }
 
+.password input{
+	border: 1px solid #bbb;
+	background: #fff;
+	font-size: 9pt;
+	padding: 5px;
+}
+
+.info {
+	font-size: 11pt;
+}
+
 .center {
 	position: absolute;
 	left: 50%;
@@ -66,35 +89,124 @@
 	-ms-transform: translate(-50%, -50%);
 	transform: translate(-50%, -50%);
 }
+.mobile {
+	margin: 4%;
+}
+
+@media only screen and (max-width: 320px) {
+	h1 {
+		font-size: 1.2em;
+	}
+	.headline {
+	}
+}
+
+.overlay {
+	height: 252px;
+	width: 252px;
+	margin: 0 auto;
+	background: white;
+	color: black;
+	padding: 10px;
+	z-index: 999;
+	display: none;
+	/* CSS 3 */
+	-webkit-border-radius: 10px;
+	-moz-border-radius: 10px;
+	-o-border-radius: 10px;
+	border-radius: 10px;
+}
+.overlay img {
+	margin: 10px;
+}
+.mask0 {
+	position: fixed;
+	top: 0;
+	left: 0;
+	background: rgba(0,0,0,0.65);
+	z-index: 510;
+	width: 100%;
+	height: 100%;
+	display: none;
+}
+.mask1 {
+	position: fixed;
+	top: 0;
+	left: 0;
+	background: rgba(0,0,0,0.65);
+	z-index: 520;
+	width: 100%;
+	height: 100%;
+	display: none;
+}
+#overlay0:target, #overlay0:target + .mask0 {
+	display: block;
+	opacity: 1;
+}
+#overlay1:target, #overlay1:target + .mask1 {
+	display: block;
+}
 </style>
 </head>
 <body>
 <?php
-#echo '<img src="qrcode.php" alt="QR-Code" />';
-if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod') || strstr($_SERVER['HTTP_USER_AGENT'],'Mac'))
+#if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod') || strstr($_SERVER['HTTP_USER_AGENT'],'Mac'))
+if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod'))
 {
-echo '<div class="center">';
+/*
+-- iOS Version
+*/
+echo '<div class="mobile">';
 $n = 0;
-while ($n <= (count($arr_wlan)-1) ) {
+while ($n <= ($wificount-1) ) {
 	echo '
-	<a href="mobileconfig.php?id='.$n.'" class="install">
+<div class="profiles">
 	<h1>'.$arr_wlan[$n]["name"].'</h1>
-	<p>802.11'.$arr_wlan[$n]["standards"].' – '.$arr_wlan[$n]["freq"].' GHz</p>
-	<p><object data="img/cog.svg" type="image/svg+xml" class="cog"></object>&nbsp;Install WiFi-profile</p>
-	</a>';
+	<p>802.11'.$arr_wlan[$n]["standards"].' – '.$arr_wlan[$n]["freq"].' GHz – '.$arr_wlan[$n]["sec"].'</p>
+	<p><a class="links" href="mobileconfig.php?id='.$n.'"><object data="img/cog.svg" type="image/svg+xml" class="icon"></object>&nbsp;Install WiFi-profile</a></p>
+	<p><a class="links" href="#overlay'.$n.'"><object data="img/cog.svg" type="image/svg+xml" class="icon"></object>&nbsp;Show QR-code</a></p>
+</div>';
 	$n++;
 }
 echo '</div>';
+$n = 0;
+while ($n <= ($wificount-1) ) {
+	echo '
+<div id="overlay'.$n.'" onclick="document.location=\'#\';" class="overlay center"><img src="qrcode.php?id='.$n.'" alt="QR-Code" /></div><div class="mask'.$n.'" onclick="document.location=\'#\';"></div>';
+	$n++;
+	}
+
 } else {
+/*
+-- Desktop Version
+*/
 echo '
-<div class="center">
-<div class="install">
-	<h1>Schwerkraftlabor&nbsp;WLAN</h1>
-	<p>(!)&nbsp;This site only works on iOS- and OS X-devices.</p>
-</div>
+<div class="center desktop">
+	<div class="profiles headline">
+	<h1>Schwerkraftlabor.de</h1>
 </div>
 ';
+$n = 0;
+while ($n <= ($wificount-1) ) {
+	echo '
+<div class="profiles">
+	<h1>'.$arr_wlan[$n]["name"].'</h1>
+	<p class="info">802.11'.$arr_wlan[$n]["standards"].' – '.$arr_wlan[$n]["freq"].' GHz – '.$arr_wlan[$n]["sec"].'-protected</p>
+	<p class="password">Password:&nbsp;<input type="text" onfocus="this.select()" value="'.$arr_wlan[$n]["pass"].'"></input></p>
+	<p><a class="links" href="#overlay'.$n.'"><object data="img/cog.svg" type="image/svg+xml" class="icon"></object>&nbsp;Show QR-code</a></p>
+</div>
+	';
+	$n++;
+}
+echo '</div>';
+$n = 0;
+while ($n <= ($wificount-1) ) {
+	echo '
+<div id="overlay'.$n.'" onclick="document.location=\'#\';" class="overlay center"><img src="qrcode.php?id='.$n.'" alt="QR-Code" /></div><div class="mask'.$n.'" onclick="document.location=\'#\';"></div>';
+	$n++;
+	}
 }
 ?>
+
 </body>
 </html>
diff --git a/qrcode.php b/qrcode.php
@@ -17,7 +17,7 @@
 	$wlan = (int) $_GET['id'];
 }
 
-$size = 5;
+$size = 8;
 $margin = 0;
 
 // Wifi is hidden?