<!DOCTYPE html>
<html lang="en" data-theme="winter">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <% if (pageTitle === '') { %>
    <title>Qtools</title>
    <% } else { %>
    <title><%= pageTitle %> | Qtools</title>
    <% } %>
    <link rel="stylesheet" href="/styles/output.css" />
    <script src="/js/helpers.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/theme-change@2.0.2/index.js"></script>
    <link rel="shortcut icon" href="/images/favicon.png" type="image/x-icon" />
  </head>
  <body>
    <!-- Navbar -->
    <div class="navbar bg-base-300">
      <div class="navbar-start">
        <div class="dropdown">
          <label tabindex="0" class="btn btn-ghost lg:hidden">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-5 w-5"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M4 6h16M4 12h8m-8 6h16"
              />
            </svg>

            <!-- Hamburger menu (sm/md) -->
          </label>
          <ul
            tabindex="0"
            class="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-300 rounded-box w-52"
          >
            <li>
              <a href="/#tools" rel="noopener noreferrer">All Tools</a>
            </li>
            <li>
              <a href="/#pricing" rel="noopener noreferrer">Pricing</a>
            </li>
            <li>
              <a href="/api" target="_blank" rel="noopener noreferrer">API</a>
            </li>
            <li><a href="/#about" rel="noopener noreferrer">About</a></li>
            <li>
              <a
                href="/login"
                rel="noopener noreferrer"
                class="navbar-login-button btn btn-primary mx-1 btn-sm px-1 py-1 my-1 text-primary-content"
                >Get Started</a
              >
            </li>
          </ul>
        </div>

        <!-- Qtools heading / top left text on navbar -->
        <a
          href="/"
          rel="noopener noreferrer"
          class="btn btn-ghost normal-case text-2xl"
        >
          <div class="text-primary text-5xl">Q</div>
          tools</a
        >
      </div>

      <!-- navbar center (lg) -->
      <div class="navbar-center hidden lg:flex">
        <ul class="menu menu-horizontal px-1">
          <li>
            <a href="/#tools" rel="noopener noreferrer">All Tools</a>
          </li>
          <li>
            <a href="/#pricing" rel="noopener noreferrer">Pricing</a>
          </li>
          <li>
            <a href="/api" target="_blank" rel="noopener noreferrer">API</a>
          </li>
          <li>
            <a href="/#about" rel="noopener noreferrer">About</a>
          </li>
        </ul>
      </div>

      <!-- Get Started (lg) and theme change button -->
      <div class="navbar-end px-1 py-1">
        <a
          href="/login"
          rel="noopener noreferrer"
          class="navbar-login-button btn btn-primary mx-1 btn-xs hidden lg:btn-sm lg:flex"
          >Get Started</a
        >

        <!-- Theme Change Button -->
        <label class="swap swap-rotate rounded-box mx-1 lg:mx-2 md:mx-2">
          <!-- this hidden checkbox controls the state -->
          <input
            type="checkbox"
            data-toggle-theme="night,winter"
            data-act-class="ACTIVECLASS"
          />

          <!-- sun icon -->
          <svg
            class="swap-on fill-primary w-6 h-6"
            xmlns="http://www.w3.org/2000/svg"
            height="1em"
            viewBox="0 0 512 512"
          >
            <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
            <style>
              svg {
                fill: #047aff;
              }
            </style>
            <path
              d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM160 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z"
            />
          </svg>

          <!-- moon icon -->
          <svg
            class="swap-off fill-primary w-6 h-6"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
          >
            <path
              d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"
            />
          </svg>
        </label>
      </div>
    </div>

    <!-- Body -->
    <%- body %>

    <!-- Footer -->
    <footer
      class="footer footer-center p-10 bg-base-300 text-base-content rounded"
    >
      <div class="grid grid-flow-col gap-4">
        <a
          class="link link-hover"
          href="https://github.com/HarshRaj2717/Qtools"
          target="_blank"
          rel="noopener noreferrer"
          >GitHub</a
        >
        <a
          class="link link-hover"
          href="/api"
          target="_blank"
          rel="noopener noreferrer"
          >API</a
        >
      </div>
      <div class="grid grid-flow-col gap-4">
        <a
          class="link link-hover"
          href="http://hraj.dev"
          target="_blank"
          rel="noopener noreferrer"
          >About me</a
        >
        <a
          class="link link-hover"
          href="https://hraj.dev/contact"
          target="_blank"
          rel="noopener noreferrer"
          >Contact</a
        >
        <a
          class="link link-hover"
          href="https://www.linkedin.com/in/harshraj2717/"
          target="_blank"
          rel="noopener noreferrer"
          >LinkedIn</a
        >
      </div>
      <div>
        <p>
          Copyright © <span id="year"></span> - All right reserved by Harsh Raj
        </p>
      </div>
    </footer>

    <!-- Finding current year and writing it to the footer's copyright text -->
    <script>
      document.querySelector("#year").textContent = new Date().getFullYear();
    </script>

    <!-- Checking user log-in status -->
    <script>
      accountCheck();
    </script>

    <!-- Logging "about me" to browser's console -->
    <script>
      console.log(`
  Designed and developed by :

  ██╗  ██╗ █████╗ ██████╗ ███████╗██╗  ██╗
  ██║  ██║██╔══██╗██╔══██╗██╔════╝██║  ██║
  ███████║███████║██████╔╝███████╗███████║
  ██╔══██║██╔══██║██╔══██╗╚════██║██╔══██║
  ██║  ██║██║  ██║██║  ██║███████║██║  ██║
  ╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═╝╚══════╝╚═╝  ╚═╝
  ██████╗  █████╗      ██╗
  ██╔══██╗██╔══██╗     ██║
  ██████╔╝███████║     ██║
  ██╔══██╗██╔══██║██   ██║
  ██║  ██║██║  ██║╚█████╔╝
  ╚═╝  ╚═╝╚═╝  ╚═╝ ╚════╝ 
  https://hraj.dev/

`);
    </script>
  </body>
</html>
