<?php
    include '../../include/menu.php';
    include '../../include/layout.php';
?>
<link href="https://fonts.googleapis.com/css?family=Acme&display=swap" rel="stylesheet">
<style>

    .titlu{
        margin-top: 104px;
        margin-left: 110px;
        font-family: 'Acme', sans-serif;
        font-size: 72px;
    }
    introducere{
        margin-top: 104px;
        font-family: 'Acme', sans-serif;
        font-size: 20px;
    }
    rand{
        margin-left: 110px;
    }
    .docs{
        margin-left: 110px;
        margin-top: 50px;
        font-family: 'Acme', sans-serif;
        font-size: 35px;
    }
    .button {
  display: inline-block;
  border-radius: 4px;
  background-color: #0ac077;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 10px;
  padding: 12px;
  width: 150px;
  transition: all 0.5s;
  cursor: pointer;
  margin-left: 110px;
  height:54px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}
.button:focus{
outline: 0;
}
body, html {
    height: 100%;
    margin: 0;
    overflow: hidden;
}
iframe {
    width: 500px;
    height: 500px;
}
iframe.fullScreen {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
</style>
<h1 class="titlu">LUA</h1>
<introducere>
    <rand>LUA este cel mai folosit limbaj de programare pentru resursele(scripturile) de FiveM.</rand><br>
    <rand>Pentru inceput trebuie sa invatati baisics of LUA. Pentru cei care cunosc limbajul, puteti trece direct la partea in care intervine FiveM-ul.</rand><br>
    <rand>Acum trebuie sa alegem un framework, adica un sistem care pune in legatura majoritatea resurselor de pe un server! Frameworkuri disponibile: ESX si vRP.</rand><br>
    <rand>Mai jos puteti gasi Docs/Documentation(adica documentatiile despre limbaje de programare/API-uri).</rand>
</introducere>
<h2 class="docs">Docs</h2>
<button onclick="openFullscreen();" class="button" style="vertical-align:middle"><span>LUA Docs</span></button>
<iframe style="display: none" src="https://www.lua.org/docs.html" id="lua_docs"></iframe>
<p>
<button onclick="openFullscreen2();" class="button" style="vertical-align:middle"><span>LUA FiveM Docs</span></button>
<iframe style="display: none" src="https://docs.fivem.net/scripting-manual/runtimes/lua/" id="lua_fivem_docs"></iframe>
<p>
<button onclick="openFullscreen3();" class="button" style="vertical-align:middle"><span>ESX Docs</span></button>
<iframe style="display: none" src="https://esx-org.github.io" id="esx_docs"></iframe>
<p>
<button onclick="openFullscreen3();" class="button" style="vertical-align:middle"><span>vRP Docs</span></button>
<iframe style="display: none" src="https://esx-org.github.io" id="vrp_docs"></iframe>

<script>

var elem = document.getElementById("lua_docs");
var elem2 = document.getElementById("lua_fivem_docs");
var elem3 = document.getElementById("esx_docs");
var elem3 = document.getElementById("vrp_docs");

function openFullscreen() {
elem.style.display="block";
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
    elem.msRequestFullscreen();
  }
}
function openFullscreen2() {
elem2.style.display="block";
  if (elem2.requestFullscreen) {
    elem2.requestFullscreen();
  } else if (elem2.mozRequestFullScreen) { /* Firefox */
    elem2.mozRequestFullScreen();
  } else if (elem2.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
    elem2.webkitRequestFullscreen();
  } else if (elem2.msRequestFullscreen) { /* IE/Edge */
    elem2.msRequestFullscreen();
  }
}
function openFullscreen3() {
elem3.style.display="block";
  if (elem3.requestFullscreen) {
    elem3.requestFullscreen();
  } else if (elem3.mozRequestFullScreen) { /* Firefox */
    elem3.mozRequestFullScreen();
  } else if (elem3.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
    elem3.webkitRequestFullscreen();
  } else if (elem3.msRequestFullscreen) { /* IE/Edge */
    elem3.msRequestFullscreen();
  }
}
function openFullscreen4() {
elem4.style.display="block";
  if (elem4.requestFullscreen) {
    elem4.requestFullscreen();
  } else if (elem4.mozRequestFullScreen) { /* Firefox */
    elem4.mozRequestFullScreen();
  } else if (elem4.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
    elem4.webkitRequestFullscreen();
  } else if (elem4.msRequestFullscreen) { /* IE/Edge */
    elem4.msRequestFullscreen();
  }
}
if (document.addEventListener)
{
    document.addEventListener('webkitfullscreenchange', exitHandler, false);
    document.addEventListener('mozfullscreenchange', exitHandler, false);
    document.addEventListener('fullscreenchange', exitHandler, false);
    document.addEventListener('MSFullscreenChange', exitHandler, false);
}

function exitHandler()
{
    if (document.webkitIsFullScreen === false)
    {
        elem.style.display="none";
        elem2.style.display="none";
        elem3.style.display="none";
        elem4.style.display="none";
    }
    else if (document.mozFullScreen === false)
    {
        ///fire your event
    }
    else if (document.msFullscreenElement === false)
    {
        ///fire your event
    }
}
</script>