<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet"
	href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css' integrity='sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ' crossorigin='anonymous'>
<style>

body {

}

#menu {
	width: 100%;
	height: 36px;
	/*background-color: red; /* For browsers that do not support gradients */
	background-image: linear-gradient(#00F768, #185D32);
	/* Standard syntax (must be last) */
	user-select: none;
	position: fixed;
}

#home {
	width: 94px;
	vertical-align: center;
	float: left;
	padding: 6px;
	cursor: pointer;
	color: white;
}

#home:hover {
	background-color: #0B0D0A;
	transition: 0.7s;
}

#developing {
	width: 142px;
	vertical-align: center;
	float: left;
	padding: 6px;
	cursor: pointer;
	color: white;
}

#developing:hover {
	background-color: #0B0D0A;
	transition: 0.7s;
}

#info {
	width: 129px;
	vertical-align: center;
	float: left;
	padding: 6px;
	cursor: pointer;
	color: white;
}

#info:hover {
	background-color: #0B0D0A;
	transition: 0.7s;
}

#loc {
	width: 112px;
	vertical-align: center;
	float: left;
	padding: 6px;
	cursor: pointer;
	color: white;
}

#loc:hover {
	background-color: #0B0D0A;
	transition: 0.7s;
}

#music {
	width: 112px;
	vertical-align: center;
	float: left;
	padding: 6px;
	cursor: pointer;
	color: white;
}

#music:hover {
	background-color: #0B0D0A;
	transition: 0.7s;
}
#search {

padding-top: 3.5px;
    align: center;
    height: 34.4px;
    float: left;
	color: white;
}

.fivem {
	margin-left: 204px;
	margin-top: 36px;
	padding: 6px;
	opacity: 0;
	width: 129px;
	height: 36px;
	background-color: #7DF481;
	/* For browsers that do not support gradients */
	border-bottom: 1px solid #11772D;
	cursor: pointer;
	visibility: hidden;
	color: white;
	transition: visibility 0s linear 300ms, opacity 300ms; position: absolute;
}

.fivem:hover {
	transition: 0.7s;
	background-color: #ace600;
}

.fivem--display {
	opacity: 1;
	visibility: visible;
	transition: opacity 500ms linear, visibility 0s linear;
}
.discord {
	margin-left: 204px;
	margin-top: 72px;
	padding: 6px;
	opacity: 0;
	width: 129px;
	height: 36px;
	background-color: #7DF481;
	/* For browsers that do not support gradients */
	border-bottom: 1px solid #11772D;
	cursor: pointer;
	visibility: hidden;
	color: white;
	transition: visibility 0s linear 300ms, opacity 300ms; position: absolute
}

.discord:hover {
	transition: 0.7s;
	background-color: #ace600;
}

.discord--display {
	opacity: 1;
	visibility: visible;
	transition: opacity 500ms linear, visibility 0s linear;
}
.minecraft {
	margin-left: 204px;
	margin-top: 108px;
	padding: 6px;
	opacity: 0;
	width: 129px;
	height: 36px;
	background-color: #7DF481;
	/* For browsers that do not support gradients */
	border-bottom: 1px solid #11772D;
	cursor: pointer;
	visibility: hidden;
	color: white;
	transition: visibility 0s linear 300ms, opacity 300ms; position: absolute
}

.minecraft:hover {
	transition: 0.7s;
	background-color: #ace600;
}

.minecraft--display {
	opacity: 1;
	visibility: visible;
	transition: opacity 500ms linear, visibility 0s linear;
}
.lua {
	margin-left: 333px;
	margin-top: 36px;
	padding: 6px;
	opacity: 0;
	width: 129px;
	height: 36px;
	background-color: #7DF481;
	/* For browsers that do not support gradients */
	border-bottom: 1px solid #11772D;
	cursor: pointer;
	visibility: hidden;
	color: white;
	transition: visibility 0s linear 300ms, opacity 300ms; position: absolute
}

.lua:hover {
	transition: 0.7s;
	background-color: #ace600;
}

.lua--display {
	opacity: 1;
	visibility: visible;
	transition: opacity 500ms linear, visibility 0s linear;
}
.c {
	margin-left: 333px;
	margin-top: 72px;
	padding: 6px;
	opacity: 0;
	width: 129px;
	height: 36px;
	background-color: #7DF481;
	/* For browsers that do not support gradients */
	border-bottom: 1px solid #11772D;
	cursor: pointer;
	visibility: hidden;
	color: white;
	transition: visibility 0s linear 300ms, opacity 300ms; position: absolute
}

.c:hover {
	transition: 0.7s;
	background-color: #ace600;
}

.c--display {
	opacity: 1;
	visibility: visible;
	transition: opacity 500ms linear, visibility 0s linear;
}
.python {
	margin-left: 333px;
	margin-top: 72px;
	padding: 6px;
	opacity: 0;
	width: 129px;
	height: 36px;
	background-color: #7DF481;
	/* For browsers that do not support gradients */
	border-bottom: 1px solid #11772D;
	cursor: pointer;
	visibility: hidden;
	color: white;
	transition: visibility 0s linear 300ms, opacity 300ms; position: absolute
}

.python:hover {
	transition: 0.7s;
	background-color: #ace600;
}

.python--display {
	opacity: 1;
	visibility: visible;
	transition: opacity 500ms linear, visibility 0s linear;
}
.javascript {
	margin-left: 333px;
	margin-top: 108px;
	padding: 6px;
	opacity: 0;
	width: 129px;
	height: 36px;
	background-color: #7DF481;
	/* For browsers that do not support gradients */
	border-bottom: 1px solid #11772D;
	cursor: pointer;
	visibility: hidden;
	color: white;
	transition: visibility 0s linear 300ms, opacity 300ms; position: absolute
}

.javascript:hover {
	transition: 0.7s;
	background-color: #ace600;
}

.javascript--display {
	opacity: 1;
	visibility: visible;
	transition: opacity 500ms linear, visibility 0s linear;
}
.bukkit {
	margin-left: 333px;
	margin-top: 108px;
	padding: 6px;
	opacity: 0;
	width: 129px;
	height: 36px;
	background-color: #7DF481;
	/* For browsers that do not support gradients */
	border-bottom: 1px solid #11772D;
	cursor: pointer;
	visibility: hidden;
	color: white;
	transition: visibility 0s linear 300ms, opacity 300ms; position: absolute
}

.bukkit:hover {
	transition: 0.7s;
	background-color: #ace600;
}

.bukkit--display {
	opacity: 1;
	visibility: visible;
	transition: opacity 500ms linear, visibility 0s linear;
}
.spigot {
	margin-left: 333px;
	margin-top: 144px;
	padding: 6px;
	opacity: 0;
	width: 129px;
	height: 36px;
	background-color: #7DF481;
	/* For browsers that do not support gradients */
	border-bottom: 1px solid #11772D;
	cursor: pointer;
	visibility: hidden;
	color: white;
	transition: visibility 0s linear 300ms, opacity 300ms; position: absolute
}

.spigot:hover {
	transition: 0.7s;
	background-color: #ace600;
}

.spigot--display {
	opacity: 1;
	visibility: visible;
	transition: opacity 500ms linear, visibility 0s linear;
}
.bungee {
	margin-left: 333px;
	margin-top: 180px;
	padding: 6px;
	opacity: 0;
	width: 129px;
	height: 36px;
	background-color: #7DF481;
	/* For browsers that do not support gradients */
	border-bottom: 1px solid #11772D;
	cursor: pointer;
	visibility: hidden;
	color: white;
	transition: visibility 0s linear 300ms, opacity 300ms; position: absolute
}

.bungee:hover {
	transition: 0.7s;
	background-color: #ace600;
}

.bungee--display {
	opacity: 1;
	visibility: visible;
	transition: opacity 500ms linear, visibility 0s linear;
}
.r_arrow{
    float:right;
}

</style>


<center>
	<div id="menu">
		<div style="width: 100px; float: left; opacity: 0;">p</div>
		<div id="home" onclick="javascript:window.location='/index.php';">
			<i class="fa fa-home"></i> Acasa <font size="2px;"></font>
		</div>
		<div style="width: 10px; float: left; opacity: 0;">p</div>
		<div id="developing">
			<i class="fas fa-code"></i> Developing <font size="2px;">&#9660;</font>
		</div>
		<div style="width: 10px; float: left; opacity: 0;">p</div>


	</div>
</center>
<div id="fivem" class="fivem">FiveM <span class="r_arrow">&#9654;</span></div>
    <div id="lua" class="lua" onclick="javascript:window.location='/fivem/lua';">LUA</div>
    <div id="c" class="c" onclick="javascript:window.location='/fivem/c';">C#</div>
<div id="discord" class="discord">Discord <span class="r_arrow">&#9654;</span></div>
    <div id="python" class="python" onclick="javascript:window.location='/discord/python';">Python</div>
    <div id="javascript" class="javascript" onclick="javascript:window.location='/discord/javascript';">JavaScript</div>
<div id="minecraft" class="minecraft">Minecraft <span class="r_arrow">&#9654;</span></div>
    <div id="bukkit" class="bukkit" onclick="javascript:window.location='/minecraft/bukkit';">Bukkit</div>
    <div id="spigot" class="spigot" onclick="javascript:window.location='/minecraft/spigotmc';">SpigotMC</div>
    <div id="bungee" class="bungee" onclick="javascript:window.location='/minecraft/bungeecord';">BungeeCord</div>





<center>


</center>
<center>
	<p id="location"></p>
</center>
</div>
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
	src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script>
//music = new Audio("https://dorar.at/LARGE/PuretuneMp3/8YaFXvR_MqOcmlSy6Fgibw/1538877600/201405/183.mp3");
music2 = new Audio("musics/faded.mp3");
function StartMusic(){
	music2.play();
}
function StopMusic(){
	music2.pause();
}
function go_users(){
	window.location = "http://www.magic-zone.site/users.php";
}
function go_showroom(){
	window.location = "http://www.magic-zone.site/home/showroom.php";
}

var getIp = function() {
    $.getJSON("https://jsonip.com?callback=?", function(data) {
    	document.getElementById("location").innerHTML = 'IP-ul tau este: ' + data.ip;
    });
  };
function geoFindMe() {
	  var output = document.getElementById("location");

	  if (!navigator.geolocation){
	    output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
	    return;
	  }

	  function success(position) {
	    var latitude  = position.coords.latitude;
	    var longitude = position.coords.longitude;

	    output.innerHTML = '<p>Latitudinea(Paralela) este: ' + latitude + '° <br>Longitudinea(Meridianul) este: ' + longitude + '°</p><br><a style="color:blue;" href="https://www.google.com/maps/place/' + latitude + '+,+' + longitude + '/@43,89.9978113,17z/data=!3m1!4b1!4m5!3m4!1s0x0:0x0!8m2!3d43!4d90" target="_blank">Locatia pe harta!</a>';
		//alert('<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>');
	    var img = new Image();
	    img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false<br><a href = \"https://www.google.com/maps/place/" + latitude + "+,+" + longitude + "/@43,89.9978113,17z/data=!3m1!4b1!4m5!3m4!1s0x0:0x0!8m2!3d43!4d90\">Locatia pe harta!</a> ";

	    //output.appendChild(img);
	  }

	  function error() {
	    output.innerHTML = "Unable to retrieve your location";
	  }

	  output.innerHTML = "<p>Locating…</p>";

	  navigator.geolocation.getCurrentPosition(success, error);
	}
//dev
$("body").click(function(e) {
    if (e.target.id!="developing" && e.target.id!="fivem" && e.target.id!="discord" && e.target.id!="minecraft") {
    	if($(".fivem").css("visibility") == "visible"){
    		$('.fivem').toggleClass('fivem--display');
			$('.discord').toggleClass('discord--display');
			$('.minecraft').toggleClass('minecraft--display');
    	}
    	else{

    	}
    }
    else if (e.target.id == "developing"){
    	$('.fivem').toggleClass('fivem--display');
		$('.discord').toggleClass('discord--display');
		$('.minecraft').toggleClass('minecraft--display');
    }
});
//fivem
$("body").click(function(e) {
    if (e.target.id != "fivem") {
    	if($(".lua").css("visibility") == "visible"){
    		$('.lua').toggleClass('lua--display');
			$('.c').toggleClass('c--display');
    	}
    	else{

    	}
    }
    else if (e.target.id == "fivem"){
    	$('.lua').toggleClass('lua--display');
		$('.c').toggleClass('c--display');
    }
});
//dis
$("body").click(function(e) {
    if (e.target.id != "discord") {
    	if($(".python").css("visibility") == "visible"){
    		$('.python').toggleClass('python--display');
			$('.javascript').toggleClass('javascript--display');
    	}
    	else{

    	}
    }
    else if (e.target.id == "discord"){
    	$('.python').toggleClass('python--display');
		$('.javascript').toggleClass('javascript--display');
    }
});
//mc
$("body").click(function(e) {
    if (e.target.id != "minecraft") {
    	if($(".bukkit").css("visibility") == "visible"){
    		$('.bukkit').toggleClass('bukkit--display');
			$('.spigot').toggleClass('spigot--display');
			$('.bungee').toggleClass('bungee--display');
    	}
    	else{

    	}
    }
    else if (e.target.id == "minecraft"){
    	$('.bukkit').toggleClass('bukkit--display');
		$('.spigot').toggleClass('spigot--display');
		$('.bungee').toggleClass('bungee--display');
    }
});


console.log("%cATENTIE!", "color:red; font-size: 72px;")
console.log("%cAcest spatiu este pentru Dezvoltatorii JavaScript. Daca ai auzit ca aici poti hack-uii site-uri totul este fals. Nimic din ce modifici aici nu va afecta in vreun fel site-ul!", "color:blue; font-size: 16px;");
console.log("%cScrie asta: alert('Acesta este primul meu JavaScript!');", "color:green; font-size: 16px;")
</script>