<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Privacy Policy for Vulpes, a Discord bot. Learn how we collect, use, and protect your information.">
  <title>Vulpes - Privacy Policy</title>
  <link rel="icon" href="icon.png">
  <style>
    body {
      margin: 0;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #131314;
      color: #eee;
      padding: 20px;
      line-height: 1.6;
    }
    a {
      color: #00aaff;
      text-decoration: none;
      transition: color 0.3s ease;
    }
    a:hover {
      color: #0077cc;
      text-decoration: underline;
    }
    h1, h2 {
      color: #fff;
      font-weight: 600;
    }
    h2 {
      margin-top: 40px;
      border-bottom: 2px solid #fff;
      padding-bottom: 10px;
      font-size: 1.4em;
    }
    h1 {
      font-size: 2em;
    }
    p {
      margin-bottom: 15px;
      font-size: 1.1em;
    }
    ul {
      padding-left: 30px;
      list-style-type: disc;
    }
    li {
      margin-bottom: 10px;
      font-size: 1.1em;
    }
    .highlight {
      color: #00ffaa;
      font-weight: 700;
    }
    .container {
      max-width: 900px;
      margin: auto;
      background-color: #1e1e1f;
      padding: 30px 40px;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    }
    .popup {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 95%;
      max-width: 800px;
      background-color: #282828;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
      z-index: 1000;
    }
    .popup-header {
      font-size: 22px;
      font-weight: bold;
      margin-bottom: 20px;
      color: #fff;
      border-bottom: 2px solid #fff;
      padding-bottom: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .popup-header a {
      color: #fff;
      text-decoration: none;
    }
    .popup-header a:hover {
      color: #eee;
      text-decoration: underline;
    }
    .popup-content {
      font-size: 17px;
      line-height: 1.6;
      color: #eee;
    }
    .close-button {
      cursor: pointer;
      font-size: 24px;
      color: #aaa;
      transition: color 0.3s ease;
    }
    .close-button:hover {
      color: #fff;
    }
    .overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.8);
      z-index: 999;
    }
    .footer {
      margin-top: 40px;
      text-align: center;
      font-size: 1em;
      color: #999;
    }
    iframe {
      width: 100%;
      height: 500px;
      border: none;
    }
    @media (max-width: 768px) {
      .container {
        padding: 20px 25px;
      }
      .popup {
        width: 95%;
        padding: 25px;
      }
      .popup-header {
        font-size: 20px;
      }
      .popup-content {
        font-size: 16px;
      }
      h2 {
        font-size: 1.3em;
      }
      h1 {
        font-size: 1.8em;
      }
      p, li {
        font-size: 1em;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <p>By using the AI built into Vulpes ("Ava"), you also agree to the <a href="#" id="privacyPolicyLink">Shapes.inc Privacy Policy</a>.</p>
    <h1>Vulpes - Privacy Policy</h1>
    <p>This Privacy Policy outlines the methods by which Vulpes ("The Bot", "Bot") collects, uses and protects your information through Discord. We are committed to protecting your privacy and maintaining transparency in our information practices.</p>
    
    <h2>1. What We Collect</h2>
    <p>We collect the following types of information:</p>
    <ul>
      <li>Your <span class="highlight">Username</span> & <span class="highlight">UserID</span></li>
      <li>Your <span class="highlight">use of the bot's commands</span></li>
    </ul>
    
    <h2>2. Use of Information</h2>
    <p>The use of your information:</p>
    <ul>
      <li><strong>Username:</strong> For <span class="highlight">database purposes</span>.</li>
      <li><strong>UserID:</strong> For <span class="highlight">database purposes</span> and <span class="highlight">handling customer service or notifying you of bug fixes, updates</span>.</li>
      <li><strong>Commands Usage:</strong> We <span class="highlight">collect this to ensure the most popular commands get improvements, and bug fixes</span>.</li>
    </ul>
    
    <h2>3. Information Sharing and Disclosure</h2>
    <ul>
      <li>We do not share or disclose any information collected through Vulpes except as described in this Privacy Policy or with your explicit consent.</li>
    </ul>
    
    <h2>4. Updates to the Privacy Policy</h2>
    <ul>
      <li>We have the right to change or update this Privacy Policy at any time, and any changes/updates will be posted on the Vulpes Support Server.</li>
    </ul>
    
    <h2>5. Contacting Us</h2>
    <p>If you have any questions or concerns about this Privacy Policy or would like to contact us. Please use the following method(s):</p>
    <ul>
      <li>Vulpes Support Server</li>
    </ul>
    
    <div class="footer">
      <p><em>Last updated: 2/3/2025</em></p>
    </div>
  </div>

  <div class="overlay" id="overlay"></div>
  <div class="popup" id="popup">
    <div class="popup-header">
      <span>Viewing: <a href="https://wiki.shapes.inc/shape-essentials/guidelines-and-privacy/privacy-policy" target="_blank" rel="noopener noreferrer">https://wiki.shapes.inc/shape-essentials/guidelines-and-privacy/privacy-policy</a></span>
      <span class="close-button" id="closeButton">×</span>
    </div>
    <div class="popup-content">
      <iframe src="https://wiki.shapes.inc/shape-essentials/guidelines-and-privacy/privacy-policy" sandbox="allow-same-origin allow-scripts"></iframe>
    </div>
  </div>

  <script>
    const privacyPolicyLink = document.getElementById('privacyPolicyLink');
    const popup = document.getElementById('popup');
    const overlay = document.getElementById('overlay');
    const closeButton = document.getElementById('closeButton');

    privacyPolicyLink.addEventListener('click', (event) => {
      event.preventDefault();
      popup.style.display = 'block';
      overlay.style.display = 'block';
    });

    closeButton.addEventListener('click', () => {
      popup.style.display = 'none';
      overlay.style.display = 'none';
    });

    overlay.addEventListener('click', () => {
      popup.style.display = 'none';
      overlay.style.display = 'none';
    });
  </script>
</body>
</html>