<head>
  <title><%= name %></title>
  <link rel="icon" type="image/x-icon" href="<%= app.logo %>">
  <link rel="stylesheet" href="../public/tailwind.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://unpkg.com/@popperjs/core@2.10.1/dist/umd/popper.min.js"></script>

  <!-- Inter font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
</head><!-- Begin loading the pile of shit called Heliactyl -->
<style>
  .alertify-notifier .ajs-message.ajs-success {
    color: #71747a;
    padding: 13px 7px;
    background: #e5e7eb;
    border-radius: 24px;
    text-align: center;
    font-weight: 500;
  }
</style>
<style>
  .spinner {
    position: fixed;
    top: 10px;
    right: 10px;
    width: 30px;
    border: 3px solid #474c55;
    border-radius: 50%;
    border-top: 3px solid white;
    width: 22px;
    height: 22px;
    -webkit-animation: spin 0.5s linear infinite;
    /* Safari */
    animation: spin 0.5s linear infinite;
    opacity: 0;
    transition: opacity 0.5s;
  }

  /* Safari */
  @-webkit-keyframes spin {
    0% {
      -webkit-transform: rotate(0deg);
    }

    100% {
      -webkit-transform: rotate(360deg);
    }
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }
</style>
<div id="spinner" class="hidden spinner mt-2 mr-2"></div>
<!-- Static sidebar for desktop -->
<div class="md:flex md:w-24 md:flex-col md:fixed md:inset-y-0">
  <!-- This is so that the testing alert isn't in the way of the sidebar -->
  <!-- Sidebar component, swap this element with another sidebar if you like -->
  <div class="flex-1 flex flex-col min-h-0 object-cover bg-transparent border-dashed border-r-2 border-[#162027]">
    <div class="flex-1 flex flex-col p-4 overflow-y-auto">
      <nav class="hs-accordion-group navbar-nav flex-1 space-y-1 px-2" data-hs-accordion-always-open>
        <div class="pb-2.5"></div>

        <% if (req.query.platform && req.query.platform == "account") { %>

        <!-- inactive: hosting -->
        <div x-data="{ open: false }">
          <a @mouseenter="open = true" @mouseleave="open = false" href="../dashboard" class="transition bg-[#0a9875]/10 text-<%= theme.buttoncolor %> backdrop-blur hover:text-<%= theme.buttoncolor %> group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
              <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15a4.5 4.5 0 0 0 4.5 4.5H18a3.75 3.75 0 0 0 1.332-7.257 3 3 0 0 0-3.758-3.848 5.25 5.25 0 0 0-10.233 2.33A4.502 4.502 0 0 0 2.25 15Z" />
            </svg>                          
          </a>
          <div x-show="open" x-transition:enter="transition ease-out duration-300"
          x-transition:enter-start="opacity-0 transform scale-90"
          x-transition:enter-end="opacity-100 transform scale-100"
          x-transition:leave="transition ease-in duration-300"
          x-transition:leave-start="opacity-100 transform scale-100"
          x-transition:leave-end="opacity-0 transform scale-90"
          class="absolute rounded-2xl z-50 bg-[#141d23] shadow border-t border-white/10 px-4 py-2.5 text-sm text-white font-medium tracking-tight mt-3"
          style="display: none;">
          Hosting
         </div>
        </div>

        <!-- active: account -->
        <div x-data="{ open: false }">
          <a @mouseenter="open = true" @mouseleave="open = false" href="../profile?platform=account" class="transition bg-[#0a9875]/10 mt-4 text-<%= theme.buttoncolor %> backdrop-blur hover:text-<%= theme.buttoncolor %> group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
              <path stroke-linecap="round" stroke-linejoin="round" d="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Zm6-10.125a1.875 1.875 0 1 1-3.75 0 1.875 1.875 0 0 1 3.75 0Zm1.294 6.336a6.721 6.721 0 0 1-3.17.789 6.721 6.721 0 0 1-3.168-.789 3.376 3.376 0 0 1 6.338 0Z" />
            </svg>                    
          </a>
          <div x-show="open" x-transition:enter="transition ease-out duration-300"
          x-transition:enter-start="opacity-0 transform scale-90"
          x-transition:enter-end="opacity-100 transform scale-100"
          x-transition:leave="transition ease-in duration-300"
          x-transition:leave-start="opacity-100 transform scale-100"
          x-transition:leave-end="opacity-0 transform scale-90"
          class="absolute rounded-2xl z-50 bg-[#141d23] shadow border-t border-white/10 px-4 py-2.5 text-sm text-white font-medium tracking-tight mt-3"
          style="display: none;">
          Account
         </div>
        </div>

        <% } else { %>     
        <!-- active: hosting -->
        <div x-data="{ open: false }">
          <a @mouseenter="open = true" @mouseleave="open = false" href="../dashboard" class="transition bg-[#0a9875]/10 text-<%= theme.buttoncolor %> backdrop-blur hover:text-<%= theme.buttoncolor %> group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
              <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15a4.5 4.5 0 0 0 4.5 4.5H18a3.75 3.75 0 0 0 1.332-7.257 3 3 0 0 0-3.758-3.848 5.25 5.25 0 0 0-10.233 2.33A4.502 4.502 0 0 0 2.25 15Z" />
            </svg>                          
          </a>
          <div x-show="open" x-transition:enter="transition ease-out duration-300"
          x-transition:enter-start="opacity-0 transform scale-90"
          x-transition:enter-end="opacity-100 transform scale-100"
          x-transition:leave="transition ease-in duration-300"
          x-transition:leave-start="opacity-100 transform scale-100"
          x-transition:leave-end="opacity-0 transform scale-90"
          class="absolute rounded-2xl z-50 bg-[#141d23] shadow border-t border-white/10 px-4 py-2.5 text-sm text-white font-medium tracking-tight mt-3"
          style="display: none;">
          Hosting
         </div>
        </div>

        <!-- inaactive: account -->
        <div x-data="{ open: false }">
          <a @mouseenter="open = true" @mouseleave="open = false" href="../profile?platform=account" class="transition opacity-70 bg-white/5 mt-4 text-white/70 backdrop-blur hover:text-white group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
              <path stroke-linecap="round" stroke-linejoin="round" d="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Zm6-10.125a1.875 1.875 0 1 1-3.75 0 1.875 1.875 0 0 1 3.75 0Zm1.294 6.336a6.721 6.721 0 0 1-3.17.789 6.721 6.721 0 0 1-3.168-.789 3.376 3.376 0 0 1 6.338 0Z" />
            </svg>                       
          </a>
          <div x-show="open" x-transition:enter="transition ease-out duration-300"
          x-transition:enter-start="opacity-0 transform scale-90"
          x-transition:enter-end="opacity-100 transform scale-100"
          x-transition:leave="transition ease-in duration-300"
          x-transition:leave-start="opacity-100 transform scale-100"
          x-transition:leave-end="opacity-0 transform scale-90"
          class="absolute rounded-2xl z-50 bg-[#141d23] shadow border-t border-white/10 px-4 py-2.5 text-sm text-white font-medium tracking-tight mt-3"
          style="display: none;">
          Account
         </div>
        </div>

        <% } %>
        <div x-data="{ open: false }">
          <a @mouseenter="open = true" @mouseleave="open = false" href="<%= discordserver %>" class="transition opacity-70 bg-white/5 mt-4 text-white/70 backdrop-blur hover:text-white group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
              <path stroke-linecap="round" stroke-linejoin="round" d="M8.625 12a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 0 1-2.555-.337A5.972 5.972 0 0 1 5.41 20.97a5.969 5.969 0 0 1-.474-.065 4.48 4.48 0 0 0 .978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25Z" />
            </svg>                      
          </a>
          <div x-show="open" x-transition:enter="transition ease-out duration-300"
          x-transition:enter-start="opacity-0 transform scale-90"
          x-transition:enter-end="opacity-100 transform scale-100"
          x-transition:leave="transition ease-in duration-300"
          x-transition:leave-start="opacity-100 transform scale-100"
          x-transition:leave-end="opacity-0 transform scale-90"
          class="absolute rounded-2xl z-50 bg-[#141d23] shadow border-t border-white/10 px-4 py-2.5 text-sm text-white font-medium tracking-tight mt-3"
          style="display: none;">
          Discord server
         </div>
        </div>
      </nav>
    </div>
  </div>
</div>
<div class="md:flex md:w-56 md:flex-col md:fixed md:inset-y-0 ml-24">
  <!-- This is so that the testing alert isn't in the way of the sidebar -->
  <!-- Sidebar component, swap this element with another sidebar if you like -->
  <div class="flex-1 flex flex-col min-h-0 object-cover bg-transparent border-dashed border-r-2 border-[#162027]">
    <div class="flex-1 flex flex-col p-4 overflow-y-auto">
      <nav class="hs-accordion-group navbar-nav flex-1 px-2 space-y-1" data-hs-accordion-always-open>
        <div class="pb-3"></div>
        <% if (req.query.platform && req.query.platform == "account") { %>
        <span class="uppercase text-gray-400 tracking-widest text-xs pb-4 "> YOUR ACCOUNT</span>
        <% } else { %>
        <span class="uppercase text-gray-400 tracking-widest text-xs pb-4 "> HOSTING & CLOUD</span>
        <% } %>
        <div class="pb-4"></div>

        <% if (req.query.platform && req.query.platform == "account") { %>
          <a href="../profile?platform=account" class="nav-link transition text-gray-400 backdrop-blur hover:text-white group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 mr-2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Zm6-10.125a1.875 1.875 0 1 1-3.75 0 1.875 1.875 0 0 1 3.75 0Zm1.294 6.336a6.721 6.721 0 0 1-3.17.789 6.721 6.721 0 0 1-3.168-.789 3.376 3.376 0 0 1 6.338 0Z" />
            </svg>                            
            Profile
          </a>
          <a href="../credentials?platform=account" class="nav-link transition text-gray-400 backdrop-blur hover:text-white group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 mr-2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" />
            </svg>                       
             Credentials
          </a>
        <% } else { %>
        <a href="../dashboard" class="nav-link transition text-gray-400 backdrop-blur hover:text-white group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 mt-0.5 h-5">
            <path fill-rule="evenodd" d="M3 6a3 3 0 0 1 3-3h2.25a3 3 0 0 1 3 3v2.25a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6Zm9.75 0a3 3 0 0 1 3-3H18a3 3 0 0 1 3 3v2.25a3 3 0 0 1-3 3h-2.25a3 3 0 0 1-3-3V6ZM3 15.75a3 3 0 0 1 3-3h2.25a3 3 0 0 1 3 3V18a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-2.25Zm9.75 0a3 3 0 0 1 3-3H18a3 3 0 0 1 3 3V18a3 3 0 0 1-3 3h-2.25a3 3 0 0 1-3-3v-2.25Z" clip-rule="evenodd" />
          </svg>          
          → Dashboard
        </a>
        <a href="../servers" class="nav-link transition text-gray-400 backdrop-blur hover:text-white group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 17.25v-.228a4.5 4.5 0 0 0-.12-1.03l-2.268-9.64a3.375 3.375 0 0 0-3.285-2.602H7.923a3.375 3.375 0 0 0-3.285 2.602l-2.268 9.64a4.5 4.5 0 0 0-.12 1.03v.228m19.5 0a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3m19.5 0a3 3 0 0 0-3-3H5.25a3 3 0 0 0-3 3m16.5 0h.008v.008h-.008v-.008Zm-3 0h.008v.008h-.008v-.008Z" />
          </svg>                        
          → Servers
        </a>
        <% if (admin == true) { %>
          <a href="../admin" class="nav-link transition text-gray-400 backdrop-blur hover:text-white group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 mt-0.5 h-5" fill="currentColor" class="w-5 mt-0.5 h-5">
              <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" />
            </svg>                    
            → Admin Panel
          </a>
        <% } %>
  
        <a href="../afk" class="nav-link transition text-gray-400 backdrop-blur hover:text-white group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6" fill="currentColor" class="w-5 mt-0.5 h-5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z" />
          </svg>
                  
          → Afk Page
        </a>
        <a href="../store" class="nav-link transition text-gray-400 backdrop-blur hover:text-white group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6" fill="currentColor" class="w-5 mt-0.5 h-5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 21v-7.5a.75.75 0 0 1 .75-.75h3a.75.75 0 0 1 .75.75V21m-4.5 0H2.36m11.14 0H18m0 0h3.64m-1.39 0V9.349M3.75 21V9.349m0 0a3.001 3.001 0 0 0 3.75-.615A2.993 2.993 0 0 0 9.75 9.75c.896 0 1.7-.393 2.25-1.016a2.993 2.993 0 0 0 2.25 1.016c.896 0 1.7-.393 2.25-1.015a3.001 3.001 0 0 0 3.75.614m-16.5 0a3.004 3.004 0 0 1-.621-4.72l1.189-1.19A1.5 1.5 0 0 1 5.378 3h13.243a1.5 1.5 0 0 1 1.06.44l1.19 1.189a3 3 0 0 1-.621 4.72M6.75 18h3.75a.75.75 0 0 0 .75-.75V13.5a.75.75 0 0 0-.75-.75H6.75a.75.75 0 0 0-.75.75v3.75c0 .414.336.75.75.75Z" />
          </svg>                    
          → Store
        </a>
        <a href="../news" class="nav-link transition text-gray-400 backdrop-blur hover:text-white group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg">          
          <svg xmlns="http://www.w3.org/2000/svg"fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6" fill="currentColor" class="w-5 mt-0.5 h-5">
            <path fill-rule="evenodd" d="M2 5a2 2 0 012-2h8a2 2 0 012 2v10a2 2 0 002 2H4a2 2 0 01-2-2V5zm3 1h6v4H5V6zm6 6H5v2h6v-2z" clip-rule="evenodd" />
            <path d="M15 7h1a2 2 0 012 2v5.5a1.5 1.5 0 01-3 0V7z" />
          </svg>
          → Announcments
        </a>
            </ul>
          </div>
        </li>
        <% } %>
  
      </nav>

      <div class="flex-shrink-0 flex bg-transparent transition justify-between">
      </div>

    </div>
  </div>
</div>

<!-- Search system -->
<%- include('../components/search') %>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var currentPageUrl = window.location.href;

    // Get all navigation links
    var navLinks = document.querySelectorAll('.nav-link');

    // Loop through each navigation link
    navLinks.forEach(function(link) {
      // Get the href attribute of the link
      var linkUrl = link.getAttribute('href');

      // Check if the current page URL contains the link URL
      if (currentPageUrl.includes(linkUrl.replace('../', '/'))) {
        // Remove all existing classes
        link.className = 'nav-link';

        // Add the specified classes
        link.classList.add(
          'transition',
          'text-<%= theme.buttoncolor %>',
          'bg-<%= theme.buttoncolor %>/5',
          'shadow',
          'group',
          'flex',
          'items-center',
          'px-3',
          'py-2.5',
          'text-sm',
          'font-semibold',
          'rounded-lg'
        );
      }
    });
  });
</script>
<style>
  .hidden {
    display: none;
  }

  .modal {
    display: none;
    /* Initially hide the modal */
    position: fixed;
    z-index: 50;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #f3f4f6;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .newAccountModal {
    position: fixed;
    z-index: 50;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .newAccountContent {
    transition: opacity 0.2s ease-in-out;
    /* Added transition for opacity */
    background-color: #fff;
    margin: 15% auto;
    padding: 48px;
    width: 30%;
    border-radius: 24px;
  }

  .modal-content {
    opacity: 0;
    /* Initially hide the modal content */
    transition: opacity 0.2s ease-in-out;
    /* Added transition for opacity */
    background-color: #fff;
    margin: 15% auto;
    padding: 48px;
    width: 30%;
    border-radius: 24px;
  }

  @media (max-width: 768px) {
    .modal-content {
      width: 80%;
    }
  }

  .modal.show {
    display: block;
    /* Show the modal when it has the 'show' class */
  }

  .modal-content.visible {
    opacity: 1;
    /* Show the modal content when it has the 'visible' class */
  }
</style>

<script>
  var options = {
    classname: 'loadingbar',
    id: 'loadingbar'
  };
  var nanobar = new Nanobar(options);
  // Show the spinner with a smooth transition
  var spinner = document.getElementById('spinner');
  spinner.style.opacity = '1';
  // Simulate a slower loading progress
  function simulateLoading() {
    nanobar.go(10); // Change this value to control the loading speed
    setTimeout(function() {
      nanobar.go(50);
    }, 190); // Delay the progress update
    setTimeout(function() {
      nanobar.go(100);
      // Hide the spinner with a smooth transition
      spinner.style.opacity = '0';
    }, 400); // Another delay
  }
  simulateLoading();
</script>
<style>
  .loadingbar .bar {
    background: #0a9875;
    -webkit-box-shadow: 0px 4px 38px -15px #0a9875;
    -moz-box-shadow: 0px 4px 38px -15px #0a9875;
    box-shadow: 0px 4px 38px -15px #0a9875;
    height: 1.85px;
  }
</style>
<style>
  #skeleton-loader {
    display: none;
  }

  #skeleton-loader.active {
    display: block;
  }
</style>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    // Get references to the skeleton loader and content elements
    const skeletonLoader = document.getElementById("skeleton-loader");
    const content = document.getElementById("content");

    // Function to show the skeleton loader and hide the content
    function showSkeletonLoader() {
      skeletonLoader.classList.add("active");
      content.style.display = "none";
    }

    // Function to hide the skeleton loader and show the content
    function hideSkeletonLoader() {
      skeletonLoader.classList.remove("active");
      content.style.display = "block";
    }

    // Show the skeleton loader immediately (initial state)
    showSkeletonLoader();
    setTimeout(hideSkeletonLoader, 250);
  });
</script>
<script src="./preline/dist/preline.js"></script>
