<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Click to Enter</title>
    <link rel="stylesheet" href="styles.css">


    <script src="https://cdn.jsdelivr.net/npm/vanilla-tilt@1.7.0/dist/vanilla-tilt.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/particles.js"></script>
    <script src="https://shoppy.gg/api/embed.js"></script>
</head>
<body>

    <div id="particles-js"></div>

    <div id="marquee-container">
        <div class="scrolling-text">
            Special thanks to contributors: <span class="highlight">Yxzs</span>, <span class="highlight">Dave!</span>, <span class="highlight">Jine</span>
        </div>
    </div>
    
    <a href="#" class="full-page-button" id="enter-button">
        <div class="button-content">
            Click to Enter
        </div>
    </a>

    <div id="assembly-screen" class="hidden">
        <h1 class="main-title">ASSEMBLY</h1>
        <h2 class="sub-title">EXTERNAL</h2>
        
        <div class="image-container">
            <div class="image-and-button">
                <img id="assembly-image" src="https://i.imgur.com/PZnjEdH.png" alt="Assembly" />
                <div class="button-group">
                    <a href="https://assembly.instatus.com/" target="_blank">
                        <button class="soon-button">STATUS</button>
                    </a>
                    <a href="https://dsc.gg/assembly" target="_blank">
                    <button class="soon-button" >BUY</button>
                </a>
            </a>
            <a href="https://docs.assembly.lol" target="_blank">
            <button class="soon-button" >DOCS</button>
        </a>
                </div>
            </div>
        </div>
    </div>

    
    
    <script src="script.js"></script>


    
    <script>

        
        document.addEventListener('DOMContentLoaded', function() {
            VanillaTilt.init(document.querySelectorAll("#assembly-image"), {
                max: 30,          
                speed: 700,      
                glare: true,     
                "max-glare": 0.6, 
                scale: 1.1,       
                reverse: true,   
            });
        });
        particlesJS("particles-js", {
            "particles": {
            "number": {
                "value": 50,
                "density": {
                "enable": true,
                "value_area": 789.14764163227279
                }
            },
            "color": {
                "value": "#ffffff"
            },
            "shape": {
                "type": "circle",
                "stroke": {
                "width": 0,
                "color": "#000000"
                },
                "polygon": {
                "nb_sides": 5
                },
                "image": {
                "src": "img/github.svg",
                "width": 100,
                "height": 100
                }
            },
            "opacity": {
                "value": 0.79927153781200905,
                "random": false,
                "anim": {
                "enable": true,
                "speed": 0.2,
                "opacity_min": 0,
                "sync": false
                }
            },
            "size": {
                "value": 2,
                "random": true,
                "anim": {
                "enable": true,
                "speed": 1.6,
                "size_min": 0,
                "sync": false
                }
            },
            "line_linked": {
                "enable": false,
                "distance": 150,
                "color": "#ffffff",
                "opacity": 0.4,
                "width": 1
            },
            "move": {
                "enable": true,
                "speed": 0.1,
                "direction": "none",
                "random": true,
                "straight": false,
                "out_mode": "out",
                "bounce": false,
                "attract": {
                "enable": false,
                "rotateX": 600,
                "rotateY": 1200
                }
            }
            },
            "interactivity": {
            "detect_on": "canvas",
            "events": {
                "onhover": {
                "enable": true,
                "mode": "bubble"
                },
                "onclick": {
                "enable": true,
                "mode": "push"
                },
                "resize": true
            },
            "modes": {
                "grab": {
                "distance": 400,
                "line_linked": {
                    "opacity": 1
                }
                },
                "bubble": {
                "distance": 83.91608391608392,
                "size": 1,
                "duration": 3,
                "opacity": 1,
                "speed": 1
                },
                "repulse": {
                "distance": 200,
                "duration": 0.4
                },
                "push": {
                "particles_nb": 4
                },
                "remove": {
                "particles_nb": 2
                }
            }
            },
            "retina_detect": true
        });
    </script>
</body>
</html>
