<!DOCTYPE>
<html>

<head>
  {% block head %}
  {% endblock %}
  <meta charset="utf-16" />
  <title>{% block title %} {% endblock %}</title>
  <link href="{{ url_for('static', filename='css/common.css') }}" rel="stylesheet" />
  <link rel="shortcut icon" href="../static/img/logo2.ico" type="image/x-icon">

</head>

<body>
  <nav>
    <table id="menu">
      <tr>
        <td class='menuItem'><a href="{{ url_for('main') }}"><img src="../static/img/logo.png" alt="logo" width="50rem"
              height="50rem" style="margin: 15px;"></a></td>

        <td class='menuItem'><a href="{{ url_for('liste') }}">Lire des histoires</a></td>

        <td class='menuItem'><a href="{{ url_for('nouvelle') }}">Publier une histoire</a></td>
        <td class="menuItem"><a href="{{ url_for('don') }}"><img src="../static/img/paypal-logo.png" alt="paypal-logo"
              style="max-width: 50px; max-height: 50px; margin: 15px;"></a></td>
        <td class="menuItem2">
          <div class="changeTheme"><img src="../static/img/blackandwhite.png" alt="blackandwhite"
              style="max-width: 50px; max-height: 50px; margin: 10px;"></div>
          <div class="changeFont"><button id="dyslexique" style="margin: 10px;"><span>Mode Dyslexique</span></button>
          </div>
          <div class="slider">
            <div id="glissière" onclick="taille()" class="col">
              <input id="entree" type="range" oninput="taille()" min="100" max="300" class="slider">
            </div>
          </div>
        </td>
      </tr>
    </table>
  </nav>
  <div id="content">
    <div id="changingfontsize">
      {% block content %} {% endblock %}
    </div>
  </div>



  <script>
    const switchThemeBtn = document.querySelector('.changeTheme')
    let toggleTheme = 0;
    switchThemeBtn.addEventListener('click', () => {
      if (toggleTheme === 0) {
        document.documentElement.style.setProperty('--ecriture', '#f1f1f1');
        document.documentElement.style.setProperty('--background', '#262626');
        toggleTheme--;
      } else {
        document.documentElement.style.setProperty('--ecriture', '#262626');
        document.documentElement.style.setProperty('--background', '#f1f1f1');
        toggleTheme++;
      }
    })
  </script>
  <script>
    const switchFontBtn = document.querySelector('.changeFont')
    let toggle2Theme = 0;
    switchFontBtn.addEventListener('click', () => {
      if (toggle2Theme === 0) {
        document.documentElement.style.setProperty('--police', "OpenDyslexic");
        toggle2Theme--;
      } else {
        document.documentElement.style.setProperty('--police', "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif");
        toggle2Theme++;
      }
    })
  </script>
  <script>
    function toggleFullScreen() {
      if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen();
      } else if (document.exitFullscreen) {
        document.exitFullscreen();
      }
    }

    document.addEventListener("keydown", (e) => {
      if (e.key === "Enter") {
        toggleFullScreen();
      }
    }, false);
  </script>

  <!-- <script>
    function taille() {
      var entree = document.getElementById("entree");
      var elementpage = document.getElementById("changingfontsize");
      elementpage.style.fontSize = entree.value / 100 + "rem"
    }

  </script> -->

  <!-- <script>
    function taille2() {
      var entree2 = document.getElementById("entree");

      var parentDOM = document.getElementById("content");
      var testTarget = parentDOM.getElementsByClassName("changingfontsize")[0];
      testTarget.style.fontSize = entree2.value / 100 + "rem"
    }

  </script> -->

  <script>
    function taille() {
      var entree = document.getElementById("entree");
      var entree2 = document.getElementById("entree");
      var elementpage = document.getElementById("changingfontsize");
      elementpage.style.fontSize = entree.value / 100 + "rem"

      var parentDOM = document.getElementById("content");
      var testTarget = parentDOM.getElementsByClassName("changingfontsize")[0];
      testTarget.style.fontSize = entree2.value / 130 + "rem"
    }
  </script>


</body>

</html>