<!DOCTYPE html>
<html lang="pt">
  <head>
    <%- include ('../partials/head')%>
    <script src="https://cdn.lordicon.com/bhenfmcm.js"></script>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css"
      --
    />
    <link rel="stylesheet" href="./style.css" />

    <!-- Custom Styles -->
    <link rel="stylesheet" href="desktop.css" />
  </head>
  <body>
    <%- include ('../partials/navBar')%>

    <!-- main box  -->
    <section class="container-main" id="mainbox">
      <div class="main">
        <!-- header  -->
        <header class="header">
          <div class="file">
            <label for="inputFileNameToSaveAs">Save as:</label>
            <input
              class="input"
              id="inputFileNameToSaveAs"
              placeholder="Enter Name"
              value="index.html"
              autocomplete="off"
            />
          </div>
          <div class="button">
            <button class="runbtn" id="runbtn" onclick="runcode()">RUN</button>
          </div>
        </header>
        <textarea
          id="inputTextToSave"
          class="codebox"
          placeholder="Write Here Code"
        >
&lt;h1&gt;Hello, PD.io&lt;/h1&gt;
      </textarea
        >
        <footer class="footer-main">
          <div class="loadfile">
            <input type="file" id="fileUpload" />
          </div>
        </footer>
      </div>
    </section>

    <!-- output display  -->
    <div class="output-container">
      <div id="output">
        <div class="header">
          <button class="backbtn" onclick="backPage()">Return</button>
        </div>
        <iframe id="display"></iframe>
      </div>
    </div>

    <!-- footer  -->
    <footer id="footer">
      <div class="copyright"></div>
    </footer>

    <!-- Project -->
    <script src="main.js"></script>
    <script>
      function backPage() {
        const home = document.querySelector("#mainbox");
        const header = document.querySelector("#mainbox header");
        const code = document.querySelector("#output");

        code.style.removeProperty("display");
        home.style.removeProperty("display");
        header.style.removeProperty("display");
      }
    </script>
  </body>
</html>

<!--
font-family: 'Dosis', sans-serif;
font-family: 'Silkscreen', cursive;
font-family: 'Raleway', sans-serif;
-->
