<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>loveridge.gg</title>
  <!-- Link to Lato font -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap">
  <!-- Tailwind CSS -->
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css'>
  <!-- Font Awesome -->
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css'>
  <!-- Custom CSS -->
  <link rel="stylesheet" href="./style.css">
  <!-- GSAP -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script>
  <style>
    body {
      font-family: 'Share Tech Mono', sans-serif;
;
    }
  </style>
</head>
<body>

  <canvas id="demo-canvas"></canvas>

  <div id="overlay" class="overlay">
    <div class="overlay-content">
      <h2>Enter PIN</h2>
      <input
        type="password"
        id="pin-input"
        class="pin-input"
        placeholder="PIN"
        maxlength="4"
      />
      <div id="pin-feedback" class="pin-feedback"></div>
    </div>
  </div>
  
  

  <div class="main-container flex items-center justify-center gap-4">

  <!-- Wrap both sections in a common flex container -->
  <div class="main-container flex items-center justify-center gap-4">
    <!-- Time and Day Section -->
    <div class="time-container flex flex-col h-full p-4 gap-2 justify-center">
      <div class="time glass p-2 text-3xl text-center" id="time">23:50</div>
      <div class="day glass p-2 text-2xl text-center" id="day">Fri</div>
      <div class="glass p-2 text-2xl text-center" id="date">01/01/2024</div>
    </div>
  
    <!-- Buttons Section -->
    <div class="items-container glass flex flex-col p-4 gap-2 justify-center">
      
<div class="items flex flex-wrap p-4 gap-2 justify-center">
    <a target="_blank" href="https://chatgpt.com/" class="w-24 shadow item flex flex-col items-center p-4">
        <i class="fa-solid fa-robot text-3xl"></i>
        <div>ChatGPT</div>
    </a>
    <a target="_blank" href="https://discordanalytics.xyz/dash" class="w-24 shadow item flex flex-col items-center p-4">
        <i class="fa-brands fa-discord text-3xl"></i>
        <div>Bot Analytics</div>
    </a>
    <a target="_blank" href="https://logs.jdf.gg" class="w-24 shadow item flex flex-col items-center p-4">
        <i class="fa-solid fa-terminal text-3xl"></i>
        <div>Bot Console</div>
    </a>
    <a target="_blank" href="https://app.simplelogin.io/" class="w-24 shadow item flex flex-col items-center p-4">
        <i class="fa-solid fa-user-shield text-3xl"></i>
        <div>Simple Login</div>
    </a>
    <!-- AT Training Button with sub-items -->
    <div class="training-container">
        <div class="w-24 shadow item flex flex-col items-center p-4" onclick="toggleSubItems(0)">
            <i class="fa-solid fa-chalkboard-teacher text-3xl"></i>
            <div>AT Training</div>
        </div>
        <div class="sub-items" id="sub-items-0">
            <a href="dragon_training.html" class="w-20 shadow sub-item flex flex-col items-center p-2">
                <i class="fa-solid fa-dragon text-2xl"></i>
                <div>Dragon</div>
            </a>
            <a href="prostudy_training.html" class="w-20 shadow sub-item flex flex-col items-center p-2">
                <i class="fa-solid fa-book text-2xl"></i>
                <div>ProStudy</div>
            </a>
        </div>
    </div>
</div>

    </div>
  </div>
  
  <script src="./script.js"></script>
  <script src="./background.js"></script>
</body>
</html>
