<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Haven - The Wizard's Realm</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            background-color: #2b0937;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            overflow-y: auto;
            color: white;
        }

        /* Dynamic Background */
        .background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, #4b0082, #9590e7, #8a2be2, #9b30ff);
            background-size: 400% 400%;
            animation: gradientAnimation 15s ease infinite;
            z-index: -1;
            filter: blur(10px);
        }

        @keyframes gradientAnimation {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* Header Section */
        .header {
            text-align: center;
            padding: 5rem 2rem;
            color: white;
            text-shadow: 0 0 20px #9590e7, 0 0 30px #8a2be2;
            animation: fadeIn 3s ease-in-out;
        }

        .header h1 {
            font-size: 3rem;
            text-transform: uppercase;
            font-weight: bold;
            letter-spacing: 5px;
        }

        .header p {
            font-size: 1.25rem;
            margin-top: 1rem;
            letter-spacing: 2px;
        }

        .btn-primary {
            display: inline-block;
            margin-top: 2rem;
            padding: 12px 30px;
            background: #9590e7;
            color: white;
            font-weight: bold;
            text-decoration: none;
            border-radius: 5px;
            transition: 0.3s ease-in-out;
            box-shadow: 0 0 20px #9590e7;
        }

        .btn-primary:hover {
            background: #9b30ff;
            transform: scale(1.1);
            box-shadow: 0 0 30px #9b30ff;
        }

        /* Navigation Bar */
        nav {
            position: fixed;
            top: 0;
            width: 100%;
            padding: 1rem;
            background: rgba(0, 0, 0, 0.6);
            box-shadow: 0 2px 10px rgba(255, 255, 255, 0.1);
            z-index: 1000;
        }

        .navbar {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
        }

        .navbar a {
            color: white;
            text-decoration: none;
            font-size: 1.2rem;
            letter-spacing: 1px;
            font-weight: bold;
            position: relative;
            transition: color 0.3s ease;
        }

        .navbar a:hover {
            color: #9590e7;
        }

        /* Section Styling */
        section {
            padding: 80px 20px;
            text-align: center;
            padding-top: 120px; /* Adjust for fixed navbar */
        }

        .features {
            background: rgba(255, 255, 255, 0.1);
            box-shadow: 0 0 50px rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            backdrop-filter: blur(5px);
            margin: 30px 0;
        }

        .features h2 {
            font-size: 2.5rem;
            color: white;
            margin-bottom: 30px;
            text-shadow: 0 0 15px #9b30ff;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
            padding: 0 20px;
        }

        .feature-card {
            background: rgba(0, 0, 0, 0.7);
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 0 40px rgba(255, 255, 255, 0.2);
        }

        .feature-card h3 {
            color: #9590e7;
            font-size: 1.8rem;
            margin-bottom: 15px;
        }

        .feature-card p {
            color: white;
            font-size: 1.1rem;
            line-height: 1.6;
        }

        /* Footer */
        footer {
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 20px;
            text-align: center;
            position: relative;
        }

        footer a {
            color: #9590e7;
            text-decoration: none;
            font-weight: bold;
        }

        footer a:hover {
            color: #9b30ff;
        }

        /* Scroll Animation */
        @keyframes fadeIn {
            0% { opacity: 0; transform: translateY(20px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        /* Modal Styles */
        /* The Modal (background) */
        .modal {
            display: none; /* Hidden by default */
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.7);
            transition: opacity 0.3s ease;
        }

        /* Modal Content */
        .modal-content {
            background-color: #2b0937;
            margin: 10% auto;
            padding: 30px;
            border: 1px solid #fff;
            width: 80%; /* Adjust the width for smaller screens */
            max-width: 700px; /* Set a maximum width on larger screens */
            color: white;
            border-radius: 15px;
            box-shadow: 0 0 30px rgba(255, 255, 255, 0.2);
            transform: scale(0.8);
            animation: modalEntrance 0.5s ease-in-out forwards;
        }

        /* Modal Open Animation */
        @keyframes modalEntrance {
            0% { transform: scale(0.8); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }

        /* Close Button */
        .close {
            color: white;
            font-size: 2rem;
            font-weight: bold;
            position: absolute;
            top: 10px;
            right: 20px;
            cursor: pointer;
        }

        /* Modal Content Styling */
        .modal-content h2 {
            font-size: 2rem;
            margin-bottom: 1rem;
            text-align: center;
            color: #9b30ff;
            text-transform: uppercase;
        }

        .modal-content p {
            font-size: 1rem;
            line-height: 1.6;
            margin-bottom: 1.5rem;
        }

        .modal-content ul {
            margin-top: 1rem;
            list-style-type: none;
            padding-left: 20px;
        }

        .modal-content ul li {
            margin: 0.5rem 0;
            font-size: 1.1rem;
            color: #e0e0e0;
        }

        .modal-content ul li::before {
            content: "✔️";
            margin-right: 10px;
            color: #9b30ff;
        }

        /* Responsive Design */
        @media screen and (max-width: 768px) {
            .modal-content {
                width: 80%;
            }
        }
    </style>
</head>
<body>
    <div class="background"></div>

    <header class="header">
        <h1>Haven</h1>
        <p>The Wizard's Realm Awaits You</p>
        <a href="#invite" class="btn-primary">Summon Haven</a>
    </header>

    <nav>
        <div class="navbar">
            <a href="#">Home</a>
            <a href="#features">Features</a>
            <a href="#invite">Summon</a>
            <a href="#support">Support</a>
            <a href="#" id="privacy-policy-link">Privacy Policy</a>
            <a href="#" id="terms-of-service-link">Terms of Service</a>
        </div>
    </nav>

    <main>
        <section id="features" class="section">
            <h2>Magical Features</h2>
            <div class="features">
                <div class="features-grid">
                    <div class="feature-card">
                        <h3>Enchanted Realms</h3>
                        <p>Explore an ever-expanding collection of magical worlds designed for both solo adventurers and teams.</p>
                    </div>
                    <div class="feature-card">
                        <h3>Seamless Interactions</h3>
                        <p>Engage with powerful wizards and fellow players using our intuitive, easy-to-use interface.</p>
                    </div>
                    <div class="feature-card">
                        <h3>Unique Abilities</h3>
                        <p>Unlock and wield powerful spells that change the course of your adventures.</p>
                    </div>
                </div>
            </div>
        </section>

        <section id="invite" class="section">
            <h2>Join the Wizard's Realm</h2>
            <p>Are you ready to embark on a magical journey? Click below to summon your adventure.</p>
            <a href="#" class="btn-primary">Join the Wizard's Realm</a>
        </section>

        <section id="support" class="section">
            <h2>Need Assistance?</h2>
            <p>Contact our support for any magical or technical issues.</p>
        </section>
    </main>

    <footer>
        <p>&copy; 2025 Haven. All rights reserved.</p>
    </footer>

    <!-- Privacy Policy Modal -->
    <div id="privacy-policy-modal" class="modal">
        <div class="modal-content">
            <span class="close" id="close-privacy-policy">&times;</span>
            <h2>Privacy Policy</h2>
            <p>At Haven, we take your privacy seriously. This Privacy Policy explains what data we collect, how we use it, and how we protect it. By using Haven, you agree to the collection and use of information in accordance with this policy.</p>
            
            <h3>Data Collection</h3>
            <p>Haven may collect certain types of data to ensure the smooth functioning of the bot. This includes:</p>
            <ul>
                <li><strong>User Data:</strong> When you invite the bot to your Discord server, we may collect the server's name, ID, and basic information about its configuration.</li>
                <li><strong>Message Data:</strong> We may collect messages and commands issued to the bot for moderation and functionality purposes. This data is only used for providing bot services and is not shared with third parties.</li>
                <li><strong>Interaction Data:</strong> We may collect data about how you interact with the bot (e.g., command usage, features accessed) to improve functionality.</li>
                <li><strong>Discord Profile Data:</strong> With your permission, Haven may collect publicly available information about your Discord profile, such as your username and avatar.</li>
            </ul>

            <br><h3>Data Usage</h3>
            <p>We use the collected data for the following purposes:</p>
            <ul>
                <li><strong>Bot Functionality:</strong> To provide and improve Haven’s features, such as moderation, economy system, and custom commands.</li>
                <li><strong>Support:</strong> To provide assistance and support for bot-related issues or inquiries.</li>
                <li><strong>Security:</strong> To detect and prevent misuse of the bot, including unauthorized access or actions within servers.</li>
            </ul>

            <br><h3>Data Retention</h3>
            <p>We will retain your data only for as long as necessary to fulfill the purposes outlined in this Privacy Policy, unless a longer retention period is required or permitted by law.</p>

            <h3>Data Security</h3>
            <p>We implement appropriate technical and organizational measures to protect your data from unauthorized access, disclosure, alteration, or destruction. However, no method of data transmission over the internet or electronic storage is completely secure, and we cannot guarantee absolute security.</p>

            <h3>Third-Party Services</h3>
            <p>Haven does not share your data with third parties, except where required to provide the bot's services (e.g., with Discord for the bot to function properly). We do not sell or rent your data to any third parties.</p>

            <h3>Your Rights</h3>
            <p>You have the right to access, update, or delete the data we have collected about you. If you wish to exercise these rights, please contact us through our support server.</p>

            <h3>GDPR Compliance</h3>
            <p>If you are located in the European Union (EU) or the European Economic Area (EEA), your data is processed in accordance with the General Data Protection Regulation (GDPR). This gives you certain rights concerning your personal data, including:</p>
            <ul>
                <li><strong>Right to Access:</strong> You have the right to request a copy of the personal data we hold about you.</li>
                <li><strong>Right to Rectification:</strong> You have the right to correct any inaccuracies or omissions in the personal data we hold.</li>
                <li><strong>Right to Erasure:</strong> You have the right to request the deletion of your personal data under certain conditions.</li>
                <li><strong>Right to Restrict Processing:</strong> You have the right to limit the processing of your personal data.</li>
                <li><strong>Right to Data Portability:</strong> You have the right to receive your personal data in a structured, commonly used, and machine-readable format, and to transmit it to another service provider.</li>
                <li><strong>Right to Object:</strong> You have the right to object to the processing of your personal data under certain circumstances.</li>
            </ul>
            <p><br>If you wish to exercise any of these rights, please contact us through our support server.</p>
        </div>
    </div>

    <!-- Terms of Service Modal -->
    <div id="terms-of-service-modal" class="modal">
        <div class="modal-content">
            <span class="close" id="close-terms-of-service">&times;</span>
            <h2>Terms of Service</h2>
            <p>By using our services, you agree to the following terms and conditions:</p>
            <ul>
                <li>Content you create on the platform remains your intellectual property.</li>
                <li>We reserve the right to modify the terms at any time.</li>
                <li>Our services are intended for users above 13 years of age.</li>
            </ul>
        </div>
    </div>

    <script>
        // Modal functionality
        const privacyPolicyLink = document.getElementById('privacy-policy-link');
        const termsOfServiceLink = document.getElementById('terms-of-service-link');
        const closePrivacyPolicy = document.getElementById('close-privacy-policy');
        const closeTermsOfService = document.getElementById('close-terms-of-service');
        const privacyPolicyModal = document.getElementById('privacy-policy-modal');
        const termsOfServiceModal = document.getElementById('terms-of-service-modal');

        privacyPolicyLink.onclick = () => {
            privacyPolicyModal.style.display = 'block';
        };

        termsOfServiceLink.onclick = () => {
            termsOfServiceModal.style.display = 'block';
        };

        closePrivacyPolicy.onclick = () => {
            privacyPolicyModal.style.display = 'none';
        };

        closeTermsOfService.onclick = () => {
            termsOfServiceModal.style.display = 'none';
        };

        // For footer links as well
        const privacyPolicyFooter = document.getElementById('privacy-policy-footer');
        const termsOfServiceFooter = document.getElementById('terms-of-service-footer');

        privacyPolicyFooter.onclick = () => {
            privacyPolicyModal.style.display = 'block';
        };

        termsOfServiceFooter.onclick = () => {
            termsOfServiceModal.style.display = 'block';
        };
    </script>
</body>
</html>