added logout button

index.php

@@ -26,10 +26,15 @@ session_start();
 		<button class="tlacitko" onclick="move('./map.php', true)">Mapa</button>
 		<button class="tlacitko" onclick="move('https://earth.google.com/web/@49.71686994,13.64771387,395.10185485a,550.97177309d,35y,0h,0t,0r', false)">Google Earth</button>
 		<button class="tlacitko" onclick="move('./autori.php', true)">Autoři</button>
+
 		<div id="login_buttons">
 			<button class="tlacitko" onclick="show_login()">Přihlášení</button>
 			<button class="tlacitko" onclick="show_register()">Registrace</button>
 		</div>
+
+		<form method="post">
+			<input id="logout_button" class="tlacitko" type="submit" name="logout_button" value="Odhlásit se"></div>
+		</form>
 	</nav>
 	<textarea id="textPole" placeholder="..." readonly>Železárny Hrádek u Rokycan jsou významným průmyslovým podnikem v České republice. Jejich historie sahá až do 16. století, kdy byla založena první huť. Specializovaly se na výrobu železa a oceli a byly známé svými kvalitními kovovými výrobky. Železárnám Hrádek byly v průběhu let prováděny stavební úpravy a modernizace, aby udržely krok s technologickým vývojem. Bohužel, v současnosti se železárny potýkají s problémy kvůli jejich majiteli Zdeňkovi Zemkovi. Zdeněk Zemek byl obviněn ze spáchání podvodů a obžalován státním zástupcem. Je třeba zajistit ochranu hodnoty a dědictví železáren Hrádek a obnovit důvěru ve spravedlivý průběh podnikání.</textarea>
 
@@ -78,6 +83,12 @@ session_start();
 			}
 		}
 
+		if (isset($_POST["logout_button"]))
+		{
+			unset($_SESSION["username"]);
+			echo "<script>logout()</script>";
+		}
+
 		function login($uname)
 		{
 			if ($uname != null)

res/index/script.js

@@ -73,4 +73,14 @@ function set_login_uname(uname)
 {
     document.getElementById("login_indicator").style.visibility = "visible";
     document.getElementById("login_indicator").innerText += " " + uname;
+
+    document.getElementById("login_buttons").style.visibility = "hidden";
+    document.getElementById("logout_button").style.visibility = "visible";
+}
+
+function logout()
+{
+    document.getElementById("login_buttons").style.visibility = "visible";
+    document.getElementById("logout_button").style.visibility = "hidden";
+    document.getElementById("login_indicator").style.visibility = "hidden";
 }

res/index/style.css

@@ -6,6 +6,7 @@ body
     -o-background-size: cover;
     background-size: cover;
     user-select: none;
+    overflow: hidden;
 }
 
 #textPole
@@ -86,11 +87,23 @@ body
     padding-top: 7vh;
 }
 
+#login_buttons
+{
+    margin-top: 5vh;
+}
+
 #login_buttons *
 {
     width: 17vh;
 }
 
+#logout_button
+{
+    visibility: hidden;
+    position: absolute;
+    margin-top: -8.05vh;
+}
+
 #login_indicator
 {
     visibility: hidden;