<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vil.wtf</title>
    <!-- Discord Meta Tags -->
    <meta property="og:title" content="Vil.wtf">
    <meta property="og:description" content="Share and discover famous or infamous discord packing clips across many discord servers.">
    <meta property="og:image" content="https://assets-global.website-files.com/6257adef93867e50d84d30e2/636e0a6a49cf127bf92de1e2_icon_clyde_blurple_RGB.png">
    <meta property="og:url" content="https://vil.wtf">
    <meta name="theme-color" content="#7C3AED">
    <!-- Styles and Fonts -->
    <link rel="stylesheet" href="styles.css">
    <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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body class="dark-theme">
    <header class="site-header">
        <nav class="nav-container glass-effect">
            <div class="logo-container">
                <img src="https://assets-global.website-files.com/6257adef93867e50d84d30e2/636e0a6a49cf127bf92de1e2_icon_clyde_blurple_RGB.png" alt="Discord Logo" class="logo pulse-animation">
                <h1 class="gradient-text">Vil.wtf</h1>
            </div>
            <div class="nav-links">
                <div class="search-container glass-effect">
                    <input type="text" id="searchInput" placeholder="Search clips..." class="search-input">
                    <button id="searchBtn" class="search-btn hover-effect">
                        <svg viewBox="0 0 24 24" class="btn-icon">
                            <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
                        </svg>
                    </button>
                </div>
                <button id="loginBtn" class="auth-btn glass-effect hover-effect">
                    <svg viewBox="0 0 24 24" class="btn-icon">
                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/>
                    </svg>
                    Login
                </button>
                <button id="uploadBtn" class="upload-btn glass-effect hover-effect" style="display: none;">
                    <svg viewBox="0 0 24 24" class="btn-icon">
                        <path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/>
                    </svg>
                    Upload Clip
                </button>
            </div>
        </nav>
    </header>

    <main class="main-container">
        <div id="authModal" class="modal backdrop-blur" style="display: none;">
            <div class="modal-content auth-modal glass-effect">
                <div class="auth-tabs">
                    <button class="tab-btn active glass-effect" data-tab="login">Login</button>
                    <button class="tab-btn glass-effect" data-tab="signup">Sign Up</button>
                </div>
                
                <form id="authForm" class="auth-form">
                    <div id="loginTab" class="tab-content active">
                        <h2 class="gradient-text">Welcome Back!</h2>
                        <div class="input-group floating-label">
                            <input type="text" id="loginUsername" required>
                            <label for="loginUsername">Username</label>
                        </div>
                        <div class="input-group floating-label">
                            <input type="password" id="loginPassword" required>
                            <label for="loginPassword">Password</label>
                        </div>
                        <button type="submit" data-action="login" class="submit-btn gradient-btn">Login</button>
                    </div>
                    
                    <div id="signupTab" class="tab-content">
                        <h2 class="gradient-text">Create Account</h2>
                        <div class="input-group floating-label">
                            <input type="text" id="signupUsername" required>
                            <label for="signupUsername">Username</label>
                        </div>
                        <div class="input-group floating-label">
                            <input type="password" id="signupPassword" required>
                            <label for="signupPassword">Password</label>
                        </div>
                        <div class="input-group floating-label">
                            <input type="password" id="confirmPassword" required>
                            <label for="confirmPassword">Confirm Password</label>
                        </div>
                        <div class="tos-agreement">
                            <input type="checkbox" id="tosCheckbox" required>
                            <label for="tosCheckbox">I agree to the <a href="/tos.html" target="_blank">Terms of Service</a></label>
                        </div>
                        <button type="submit" data-action="signup" class="submit-btn gradient-btn">Create Account</button>
                    </div>
                </form>
            </div>
        </div>

        <div id="uploadModal" class="modal backdrop-blur" style="display: none;">
            <div class="modal-content upload-modal glass-effect">
                <h2 class="gradient-text">Share Your Clip</h2>
                <form id="uploadForm" class="upload-form">
                    <div class="file-upload-container">
                        <label for="clipFile" class="file-upload-label glass-effect">
                            <svg viewBox="0 0 24 24" class="upload-icon">
                                <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/>
                            </svg>
                            <span>Choose a video file</span>
                        </label>
                        <input type="file" id="clipFile" accept="video/*" required>
                    </div>
                    <div class="input-group floating-label">
                        <input type="text" id="clipTitle" required>
                        <label for="clipTitle">Title</label>
                    </div>
                    <div class="input-group floating-label">
                        <textarea id="clipDescription" rows="4"></textarea>
                        <label for="clipDescription">Description</label>
                    </div>
                    <div class="input-group">
                        <label for="clipCategories">Categories (comma-separated)</label>
                        <input type="text" id="clipCategories" placeholder="gaming, funny, highlights">
                    </div>
                    <div class="thumbnail-preview" id="thumbnailPreview"></div>
                    <div class="tos-agreement">
                        <input type="checkbox" id="uploadTosCheckbox" required>
                        <label for="uploadTosCheckbox">I confirm this content follows the <a href="/tos.html" target="_blank">Terms of Service</a></label>
                    </div>
                    <button type="submit" class="submit-btn gradient-btn">Upload Clip</button>
                </form>
            </div>
        </div>

        <div id="clipsContainer" class="clips-grid masonry-grid">
            <!-- Clips will be dynamically added here -->
        </div>
    </main>

    <footer class="site-footer glass-effect">
        <div class="footer-content">
            <div class="footer-links">
                <a href="/tos.html" class="footer-link">Terms of Service</a>
                <a href="/privacy.html" class="footer-link">Privacy Policy</a>
                <a href="/about.html" class="footer-link">About Us</a>
                <a href="/contact.html" class="footer-link">Contact</a>
            </div>
            <div class="footer-copyright">
                <p>&copy; 2024 Vil.wtf. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <script src="app.js"></script>
</body>
</html>