<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vulpes - Terms of Service</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">
        <h1 class="text-4xl font-bold mb-6">Vulpes - Terms of Service</h1>

        <p class="mb-2">Last Updated: December 7, 2024</p>

        <h2 class="text-2xl font-bold mt-6 mb-4">1. Agreement to Terms</h2>
        <p class="mb-4">By using the Vulpes Discord bot ("Bot", "the Bot" or "Vulpes"), you agree to be bound by these Terms of Service ("ToS"). If you do not agree with these ToS, you must not use the Bot.</p>

        <h2 class="text-2xl font-bold mt-6 mb-4">2. User Responsibilities</h2>
        <p class="mb-4">When using the Bot, you are expected to:</p>
        <ul class="list-disc pl-6 mb-4">
            <li>Use the Bot respectfully and in accordance with Discord’s <a href="https://discord.com/guidelines" target="_blank" class="highlight">Community Guidelines</a> and <a href="https://discord.com/terms" target="_blank" class="highlight">Terms of Service</a>.</li>
            <li>Treat all users with respect and refrain from any harassing, bullying, or abusive behavior.</li>
           <li>Adhere to Discord’s <a href="https://discord.com/terms" target="_blank" class="highlight">Terms of Service</a> and their <a href="https://discord.com/guidelines" target="_blank" class="highlight">Community Guidelines</a>.</li>
        </ul>

        <h2 class="text-2xl font-bold mt-6 mb-4">3. Prohibited Conduct</h2>
        <ul class="list-disc pl-6 mb-4">
            <li>Avoid excessive use of commands that may be perceived as spam or chat flooding.</li>
            <li>Do not use Vulpes to facilitate or engage in any illegal activities.</li>
            <li>Refrain from using commands in a manner that disrupts Discord servers or violates Discord’s Community Guidelines.</li>
            <li>Do not share sensitive or personal information through Vulpes without the explicit consent of the involved parties.</li>
            <li>Do not utilize Vulpes for phishing or scamming activities.</li>
            <li>Avoid command spamming or any attempts to crash the Bot.</li>
            <li>The use of Vulpes to initiate or participate in raids is strictly forbidden.</li>
            <li>Do not attempt to gain unauthorized access to the Bot's systems.</li>
        </ul>

        <h2 class="text-2xl font-bold mt-6 mb-4">4. Accountability</h2>
        <p class="mb-4">Users are responsible for any violations they commit. We reserve the right to take appropriate action, including restricting access to the Bot.</p>

         <h2 class="text-2xl font-bold mt-6 mb-4">5. Privacy Policy</h2>
        <p class="mb-4">We are committed to your privacy. Our data practices are detailed in our <a href="/privacy" target="_blank" class="highlight">Privacy Policy</a>.</p>

        <h2 class="text-2xl font-bold mt-6 mb-4">6. Changes to Terms</h2>
        <p class="mb-4">We may update these terms at any time. Notifications of changes will be posted on our <a href="/support" target="_blank" class="highlight">support server</a>.</p>

        <h2 class="text-2xl font-bold mt-6 mb-4">7. Contact Us</h2>
        <p class="mb-2">If you ave any questions, requests about this ToS, please reach out to us through the following methods:</p>
         <ul class="list-disc pl-6 mb-4">
           <li>Email (Response times may vary): <a href="mailto:anoxlemain@gmail.com" class="highlight">anoxlemain@gmail.com</a></li>
           <li>Discord: <span class="highlight">.hischosen</span></li>
        </ul>
    </div>
</body>
</html>