<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SeptOne - Home Screen</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- 
  <div id="boot-screen" style="display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; background-color: #000; color: white; font-size: 1.5em; flex-direction: column;">
    <p>SeptOne OS is booting...</p>
    <div class="loader"></div> 
  </div> -->

    <div
      id="fullscreen-modal"
      style="
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 1002;
      "
    >
      <p>For the best experience, please enter fullscreen mode.</p>
      <button onclick="enterFullscreen()">Enter Fullscreen</button>
    </div>

    <div id="desktop">
      <!--
     -->
      <h1 id="clock">00:00</h1>
    </div>

    <div id="menu">
      <div class="inner-menu">
        <h1 style="padding: 10px">SeptOne</h1>
        <div class="app-grid">
          <div class="app-icon" onclick="launch_cal()">
            <img
              src="https://cdn.glitch.global/f287810e-971a-4adc-9350-315294d683b2/calendar.png?v=1735927733715"
              alt="Apps Icon"
            />
            <span>Calendar</span>
          </div>
          <div class="app-icon" onclick="launch_msg()">
            <img
              src="https://cdn.glitch.global/f287810e-971a-4adc-9350-315294d683b2/msg.png?v=1735927710873"
              alt="Files Icon"
            />
            <span>Messanger</span>
          </div>
          <div class="app-icon" onclick="launch_pomodoro()">
            <img
              src="https://cdn.glitch.global/f287810e-971a-4adc-9350-315294d683b2/pomodoro.png?v=1735999651970"
              alt="Files Icon"
            />
            <span>Pomodoro</span>
          </div>

          <div class="app-icon" onclick="launch_doc()">
            <img
              src="https://cdn.glitch.global/f287810e-971a-4adc-9350-315294d683b2/document.png?v=1735933094649"
              alt="Files Icon"
            />

            <span>Documents</span>
          </div>

          <div class="app-icon" onclick="launch_settings()">
            <img
              src="https://cdn.glitch.global/f287810e-971a-4adc-9350-315294d683b2/settings.png"
              alt="Settings Icon"
            />
            <span>Settings</span>
          </div>
        </div>
      </div>
    </div>

    <div id="taskbar">
      <span><button id="tsk-btn" onclick="menu()">SeptOne</button></span>
    </div>

    <script src="winbox.bundle.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>
