<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="tr">

<head>
  <!--!Copyright © 2023 Aliberk Sandıkçı -->
  <!--!Copyright © 2023 iflpanel Developers -->
  <meta charset="UTF-8">

  <!-- Meta Content -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="iflpanel Akıllı Tahta Arkaplan Sayfası">
  <meta name="keywords" content="iflpanel,akıllı tahta,arkaplan,tahta,board">
  <meta name="author" content="Aliberk Sandıkçı">

  <!-- CSS Files -->
  <link rel="stylesheet" type="text/css" href="./assets/css/main.css">
  <link rel="stylesheet" type="text/css" href="./assets/css/dev.css">


  <title>DEV VERSION | iflpanel Tahta</title>
</head>

<body>
  <!-- MAIN AREA -->
  <section id="top">
    <div class="class">
      <span id="grade">Sınıf</span>
      <span id="class">Şube</span>

      <!-- DEV -->
      <!-- DEV --> <span style="font-size: xx-small; line-height: 1px; color:red">(DEV VERSION)</span>
      <!-- DEV -->
    </div>

    <div class="clock">
      <h1 id="time">12.00</h1>
    </div>
    <div class="settings-box">
      <form>
        <button id="timers-button" type="button" onmouseover="toggleItemDisplay('id', 'timers')"
          onclick="toggleItemDisplay('id', 'timers')">⏱</button>

        <button id="yemekhane-button" type="button" onmouseover="toggleItemDisplay('id', 'yemek-listesi')"
          onclick="toggleItemDisplay('id', 'yemek-listesi')">🍔</button>

        <button id="ders-programi-buton" type="button" onmouseover="toggleItemDisplay('id', 'ders-programi')"
          onclick="toggleItemDisplay('id', 'ders-programi')">📑</button>

        <button id="animation-button" type="button" onmouseover="toggleItemDisplay('id', 'animations')"
          onclick="toggleItemDisplay('id', 'animations')">🕹️</button>

        <button id="settings-button" type="button" onmouseover="toggleItemDisplay('id', 'settings')"
          onclick="toggleItemDisplay('id', 'settings')">⚙</button>
      </form>
      <div id="settings">
        <form>
          <div class="cell">
            <input type="checkbox" id="chx-clockSecond" onchange="toggleConf('id-chx','clockSecond')" checked>
            <label for="chx-clockSecond">Saniye</label>
          </div>
          <div class="cell">
            <input type="checkbox" id="chx-timerMsec" onchange="toggleConf('id-chx','timerMsec')" checked>
            <label for="chx-timerMsec">Sayaçlarda Milisaniye</label>
          </div>
          <div class="cell">
            <!-- onchange="toggleOther('devVersion')" -->
            <input type="checkbox" id="chx-devVersion" onchange="toggleDevVersion()" checked>
            <label for="chx-devVersion" style="font-size: x-small;">Geliştirici Sürümü, <br>local-settings move!</label>
          </div>
          <div class="cell">
            <input type="checkbox" id="chx-yksTimer" onchange="toggleConf('id-chx','yksTimer')">
            <label for="chx-yksTimer">YKS Sayacı</label>
          </div>
          <div class="cell">
            <input type="checkbox" id="chx-fullscreenClock" onchange="toggleConf('id-chx','fullscreenClock')">
            <label for="chx-fullscreenClock">Tam Ekran Saat</label>
          </div>
          <div class="cell">
            <input type="checkbox" id="chx-hideHeader" onchange="toggleConf('id-chx','hideHeader')">
            <label for="chx-hideHeader">Üst Barı Gizle</label>
          </div>
          <div class="cell">
            <input type="checkbox" id="chx-oneventSecond" onchange="toggleConf('id-chx','oneventSecond')">
            <label for="chx-oneventSecond" style="font-size: x-small;">Ders Sonu/Başı Saniye Göster, <br>saniye
              checkboxını otomatik update et!</label>
          </div>
          <div class="cell">
            <input type="checkbox" id="chx-settingsMaker" onchange="toggleItemDisplay('id-chx','settingsMaker')">
            <label for="chx-settingsMaker">Ayar Oluşturucuyu Göster</label>
          </div>
          <div class="cell">
            <input type="checkbox" id="chx-mouse" onchange="toggleConf('id-chx','mouse')">
            <label for="chx-mouse">Mouse Integrasyonu</label>
          </div>
        </form>
      </div>
    </div>
  </section>

  <hr style="width: 30%; box-sizing: border-box;">

  <!-- INTERACTIVE / FUNCTIONAL AREA -->
  <section id="mid">
    <div id="timers">
      <div id="timers-menu">
        <ul>
          <li onmouseover="toggleItemDisplay('id', 'stopwatch')" onclick="toggleItemDisplay('id', 'stopwatch')">
            <button id="stopwatch-button" class="pushable pushable-f">
              <span class="shadow"></span>
              <span class="edge"></span>
              <span class="front">
                Kronometre
              </span>
            </button>
          </li>
          <li id="timer-button" onmouseover="toggleItemDisplay('id', 'timer')"
            onclick="toggleItemDisplay('id', 'timer')">
            <button class="pushable pushable-l">
              <span class="shadow"></span>
              <span class="edge"></span>
              <span class="front">
                Zamanlayıcı
              </span>
            </button>
          </li>
        </ul>
      </div>
      <div id="stopwatch">
        <div class="timer">
          <div class="min">
            00
          </div>
          .
          <div class="sec">
            00
          </div>
          <span id="stopwatch-msec-dot">.</span>
          <div class="msec">
            00
          </div>
        </div>
        <form>
          <input type="button" id="start-cro" name="start-cro" value="Başlat" onmouseover="Stopwatch('start')"
            onclick="Stopwatch('start')" checked>
          <input type="button" id="stop-cro" name="stop-cro" value="Durdur ve Sıfırla" onmouseover="Stopwatch('stop')"
            onclick="Stopwatch('stop')" checked>
        </form>
      </div>

      <div id="timer">
        <div class="timer">
          00.00.00
        </div>
        <p>yapım aşamasında: geriye doğru sayma özelliği</p>
      </div>

    </div>

    <div id="yemek-listesi">
      <iframe src="https://ifl.meb.k12.tr/meb_iys_dosyalar/35/06/164785/dosyalar/2023_09/26212122_EKIM_YemekListesi.pdf"
        width="90%" height="800px" style="align-self:center;"></iframe>
      yapım aşamasında: yemekhane listesi eklenecek
    </div>

    <div id="ders-programi">
      <img src="image.png">
    </div>

    <div id="animations">
      yapım aşamasında: animasyonlar / oyunlar eklenecek
    </div>
  </section>

  <!-- NON-INTERACTIVE DECORATION AREA -->
  <section id="bottom">
    <hr>
    <p id="debug-area"></p>
    <form>
      <button id="localtest" type="button" onmouseover="Localtest(0)" onclick="Localtest(0)">TEST</button>
      <button id="yazdir" type="button" onmouseover="Localtest(1)" onclick="Localtest(1)">Yazdır</button>
      <button id="popsound" type="button" onmouseover="Popsound()" onclick="Popsound()">POP SOUND</button>
    </form>
    <div id="DEV" style="font-size: x-small;"></div>
    <div id="rainbow"></div>
  </section>


  <script>
    function Localtest(a) {
      if (a == 0) {
        var nowdate = new Date;
        localStorage.setItem("localtest", nowdate);
      }
      if (a == 1) {
        if (localStorage.getItem("localtest") == null) {
          document.getElementById("debug-area").innerHTML = "ÇALIŞMIYOR :(";
        }
        else {
          document.getElementById("debug-area").innerHTML = localStorage.getItem("localtest");
        }
      }
    }

    function Popsound() {
      var audio = new Audio('./assets/pop.mp3');
      audio.play();
    }
  </script>

  <script src="./assets/js/utils.js"></script>
  <script src="./assets/js/updates.js"></script>

  <script src="./assets/js/mid.js"></script>

  <script src="./assets/js/initialize.js"></script>

  <script src="./assets/js/timers.js"></script>
</body>

</html>