<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vulpes - Privacy Policy</title>
  <link rel="icon" href="/icon.png">
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap" rel="stylesheet">
  <style>
    body {
      background-color: #131314;
      font-family: 'Lato', sans-serif;
      color: white;
    }
    
    .container {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      background-color: rgba(255, 255, 255, 0.05);
      border-radius: 15px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    
    h1, h2 {
      color: white;
    }
    
    .highlight {
      color: #6366f1;
      font-weight: bold;
    }
    
    a {
      color: #6366f1;
      text-decoration: none;
      transition: opacity 0.3s;
    }
    a:hover {
      opacity: 0.8;
      text-decoration: underline;
    }
    
    ::-webkit-scrollbar {
      width: 10px;
      background-color: #131314;
    }
    ::-webkit-scrollbar-track {
      background-color: #131314;
      border-radius: 10px;
    }
    ::-webkit-scrollbar-thumb {
      background-color: rgba(255, 255, 255, 0.2);
      border-radius: 10px;
      transition: background-color 0.3s ease;
    }
    ::-webkit-scrollbar-thumb:hover {
      background-color: rgba(255, 255, 255, 0.3);
    }
    
    .modal {
      display: none;
      position: fixed;
      z-index: 1;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0, 0, 0, 0.4);
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
    }
    .modal-content {
      background-color: #fefefe;
      margin: 5% auto;
      padding: 20px;
      border: 1px solid #888;
      width: 90%;
      height: 80%;
      max-width: none;
      max-height: none;
      border-radius: 15px;
      position: relative;
      transform: scale(0.7);
      opacity: 0;
      transition: all 0.3s ease-in-out;
    }
    .modal.show {
      opacity: 1;
    }
    .modal.show .modal-content {
      transform: scale(1);
      opacity: 1;
    }
    
    .close {
      color: #aaa;
      position: absolute;
      top: -2px;
      right: 10px;
      transform: translate(-5px, 5px);
      font-size: 28px;
      font-weight: bold;
      transition: color 0.2s;
    }
    .close:hover,
    .close:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
    }
    
    .powered-by {
      position: absolute;
      bottom: 10px;
      right: 20px;
      font-size: 12px;
      color: #888;
    }
    
    .clickable-link {
      text-decoration: underline;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      transition: opacity 0.3s;
    }
    .clickable-link:hover {
      opacity: 0.7;
    }
    .clickable-link i {
      margin-left: 5px;
      font-size: 0.8em;
    }
    
    iframe {
      border-radius: 5px;
    }
  </style>
  <script>
    function openPopup() {
      window.open('https://anoxle.github.io/vulpes/installcd', 'popup', 'width=500,height=700');
    }
    function openShapesPrivacy() {
      var modal = document.getElementById("shapesPrivacyModal");
      modal.style.display = "block";
      setTimeout(function() {
        modal.classList.add("show");
      }, 10);
    }
    function closeShapesPrivacy() {
      var modal = document.getElementById("shapesPrivacyModal");
      modal.classList.remove("show");
      setTimeout(function() {
        modal.style.display = "none";
      }, 300);
    }
    window.onclick = function(event) {
      var modal = document.getElementById("shapesPrivacyModal");
      if (event.target == modal) {
        closeShapesPrivacy();
      }
    }
  </script>
</head>
<body class="flex flex-col items-center min-h-screen pt-10">
  <div class="container mt-20">
    <p class="mb-4 text-center">By using the AI built into Vulpes ("Ava"), You also agreeing to 
      <a href="#" onclick="openShapesPrivacy()" class="clickable-link">
        Shapes.inc Privacy Policy
        <i class="fas fa-external-link-alt"></i>
      </a>
    </p>

    <h1 class="text-4xl font-bold mb-6">Vulpes - Privacy Policy</h1>

    <p class="mb-4">This Privacy Policy ("Privacy") outlines the methods by which Vulpes ("Bot") gathers, utilizes, and protects your information via Discord. We are committed to safeguarding your privacy and maintaining transparency in our data handling practices.</p>

    <h2 class="text-2xl font-bold mt-6 mb-4">1. Information We Collect and Use</h2>
    <p class="mb-2">To enhance & maintain our Bot we collect the following information:</p>
    <ul class="list-disc pl-6 mb-4">
      <li>Your <span class="highlight">User ID</span> and <span class="highlight">Username</span>
        <ul class="list-disc pl-6">
          <li> We collect them for <span class="highlight">databases</span> and to <span class="highlight">handle customer service</span> and send you updates/fixes/etc</li>
        </ul>
      </li>
      <li>Server IDs
        <ul class="list-disc pl-6">
          <li> We collect this for <span class="highlight">databases</span>.</li>
        </ul>
      </li>
    </ul>

    <h2 class="text-2xl font-bold mt-6 mb-4">2. Data Sharing and Disclosure</h2>
    <li class="mb-4">We do not share or disclose any information collected through Vulpes, except as mentioned in this Privacy Policy or with your explicit consent.</li>

    <h2 class="text-2xl font-bold mt-6 mb-4">3. Updates to the Privacy Policy</h2>
    <li class="mb-4">We reserve the right to modify or update this Privacy Policy at any time. Any modifications/updates will be communicated via the Vulpes Support Server.</li>

    <h2 class="text-2xl font-bold mt-6 mb-4">4. Contact Us</h2>
    <li class="mb-2">If you have any questions, concerns or requests regarding this Privacy Policy or wants to contact us. Please reach out to us through the following methods:</li>
    <ul class="list-disc pl-6 mb-4">
      <li>Discord: <span class="highlight">.hischosen</span></li>
      <li><span class="highlight">Vulpes Support Server</span></li>
    </ul>
  </div>

  <div id="shapesPrivacyModal" class="modal">
    <div class="modal-content">
      <span class="close" onclick="closeShapesPrivacy()">×</span>
      <h2>Shapes.inc Privacy Policy</h2>
      <iframe src="https://wiki.shapes.inc/shape-essentials/guidelines-and-privacy/privacy-policy" width="100%" height="85%"></iframe>
      <div class="powered-by">Powered by iWebView</div>
    </div>
 </div>
</body>
</html>