<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exec Role Play</title>

    <!-- Favicon -->
    <link rel="icon" href="/icon.png" type="image/png" sizes="16x16">

    <!-- Primary Meta Tags -->
    <title>🚀Exec Role Play - Лучший сервер в игре Garry's mod! 🎅🏻</title>
    <meta name="title" content="🚀Exec Role Play - Лучший сервер в игре Garry's mod! 🎅🏻" />
    <meta name="description" content="🎁 Подарки новым игрокам! ✅

    🎄 Зимняя Карта 🎉

    ❄️Новогодние Ивенты 😎" />

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://execrp.rf.gd/" />
    <meta property="og:title" content="🚀Exec Role Play - Лучший сервер в игре Garry's mod! 🎅🏻" />
    <meta property="og:description" content="🎁 Подарки новым игрокам! ✅

    🎄 Зимняя Карта 🎉

    ❄️Новогодние Ивенты 😎" />
    <meta property="og:image" content="https://i.imgur.com/L3ZZW9a.png" />

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:url" content="https://execrp.rf.gd/" />
    <meta property="twitter:title" content="🚀Exec Role Play - Лучший сервер в игре Garry's mod! 🎅🏻" />
    <meta property="twitter:description" content="🎁 Подарки новым игрокам! ✅

    🎄 Зимняя Карта 🎉

    ❄️Новогодние Ивенты 😎" />
    <meta property="twitter:image" content="https://i.imgur.com/L3ZZW9a.png" />

    <style>
        body {
            margin: 0;
            padding: 0;
            background: black;
            color: white;
            font-family: Arial, sans-serif;
            overflow: hidden;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            cursor: default;
        }

        #background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            filter: brightness(20%);
            z-index: -2;
            transition: opacity 1s ease-in-out;
        }

        #background.fade-out {
            opacity: 0;
        }

        #snow-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

        .center-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            z-index: 10;
        }

        .center-content h1 {
            margin: 0 0 20px;
            font-size: 48px;
            font-weight: bold;
            color: white;
        }

        
        .center-content .project-history {
          /*background-color: rgba(0, 0, 0, 0.7); удаляем черный фон */
          border: 1px solid white;
          border-radius: 8px;
          padding: 20px;
          margin: 0 auto;
          max-width: 600px;
          box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
          text-align: center;
          backdrop-filter: blur(15px); /* добавляем размытие */
         }
        
        .center-content .project-history h2 {
          font-size: 24px;
          margin-bottom: 15px;
          color: white;
        }
          
        .center-content .project-history p {
          font-size: 16px;
          line-height: 1.6;
          margin-bottom: 10px;
          color: white;
          text-align: left;
          font-weight: bold;
          font-style: italic;
           overflow: hidden;
            white-space: normal;
            word-wrap: break-word;
        }
        
        .center-content .project-history p span.execrp {
            color: lightgreen;
        }
        
        .center-content .project-history p span {
            display: inline-block;
        }
        
         .center-content .project-history span.red {
            color: red;
        }
        
         .center-content .project-history span.gold {
            color: gold;
        }
        
         .center-content .project-history span.blue {
            color: lightblue;
        }

        .footer {
            position: absolute;
            bottom: 10px;
            width: 100%;
            text-align: center;
            font-size: 14px;
            z-index: 10;
        }

        @media (max-width: 768px) {
            
            
            .center-content .project-history {
                max-width: 90%;
                padding: 15px;
            }
             .center-content .project-history h2 {
              font-size: 20px;
             }
             .center-content .project-history p {
              font-size: 14px;
            }
        }
    </style>
</head>
<body>
    <div id="background"></div>
    <canvas id="snow-canvas"></canvas>
    <div class="center-content">
        <h1>Exec Role Play</h1>
       
        <div class="project-history">
            <h2>История проекта</h2>
            <p id="text1"></p>
            <p id="text2"></p>
            <p id="text3"></p>
        </div>
    </div>

    <!-- Элемент для загрузки звука при наведении -->
    <audio id="hover-sound" src="https://www.dropbox.com/scl/fi/0cebmlar215319rl2734m/6a6ad928cfac061.mp3?rlkey=04i98wqesaq43v29v7d0kkbyo&st=edyfgukt&dl=1"></audio>

    <!-- Элемент для фоновой музыки -->
    <audio id="background-music" autoplay loop>
        <source src="https://www.dropbox.com/scl/fi/k8ug40v77r2fxno8tat1m/Exec-Role-Play-Remastered.mp3?rlkey=txham3r2jzs38yqyh3hnifrdo&st=x5jscgzh&dl=1" type="audio/mpeg">
        Ваш браузер не поддерживает элемент <code>audio</code>.
    </audio>

    <script>
        // Блокировка контекстного меню
        document.addEventListener('contextmenu', function(e) {
            e.preventDefault();
        });

        // Блокировка клавиш разработчика и Ctrl+S
        document.addEventListener('keydown', function(e) {
            if (
                e.key === 'F12' || // F12
                (e.ctrlKey && e.shiftKey && e.key === 'I') || // Ctrl + Shift + I
                (e.ctrlKey && e.shiftKey && e.key === 'C') || // Ctrl + Shift + C
                (e.ctrlKey && e.key === 'U') || // Ctrl + U
                (e.ctrlKey && e.key === 'S') // Ctrl + S
            ) {
                e.preventDefault();
            }
        });

        const canvas = document.getElementById('snow-canvas');
        const ctx = canvas.getContext('2d');
        const backgroundEl = document.getElementById('background');

        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        const particles = [];
        const backgroundImages = [
            'https://i.imgur.com/27LaZPg.jpeg',
            'https://i.imgur.com/iZvoPDR.png',
            'https://i.imgur.com/UD8QjCO.jpeg',
            'https://i.imgur.com/CdWvsx1.jpeg',
            'https://i.imgur.com/0gNF2s3.jpeg',
            'https://i.imgur.com/V02SbW1.jpeg',
            'https://i.imgur.com/LECMHB8.jpeg',
            'https://i.imgur.com/QlJbMIU.jpeg',
            'https://i.imgur.com/vb330rz.png',
            'https://i.imgur.com/p7tXLhg.jpeg',
            'https://i.imgur.com/QytmSbF.png',
            'https://i.imgur.com/J8rRCxG.png',
            'https://i.imgur.com/L64Ertb.jpeg',
            'https://i.imgur.com/wwgeh20.png',
            'https://i.imgur.com/jpEq5sK.jpeg',
            'https://i.imgur.com/ctHzf6V.jpeg',
            'https://i.imgur.com/Dfmkcyf.jpeg',
            'https://i.imgur.com/3jdD0oj.jpeg',
            'https://i.imgur.com/gAZJryE.png',
            'https://i.imgur.com/So5S2rC.png',
            'https://i.imgur.com/YcZZRgJ.png',
            'https://i.imgur.com/WVkO2Wl.png',
            'https://i.imgur.com/BdKpGhg.jpeg',
            'https://i.imgur.com/Oa0wdn5.jpeg',
            'https://i.imgur.com/YQrEzT7.png',
            'https://i.imgur.com/1FX4x2b.jpeg',
            'https://i.imgur.com/KChWKFh.jpeg',
            'https://i.imgur.com/iOB8JQt.jpeg',
            'https://i.imgur.com/wnusFj5.png'
        ];
        let currentImageIndex = 0;

        function createParticle(x, y, size, speedX, speedY) {
            return { x, y, size, speedX, speedY };
        }

        function initParticles() {
            for (let i = 0; i < 200; i++) {
                particles.push(createParticle(
                    Math.random() * canvas.width,
                    Math.random() * canvas.height,
                    Math.random() * 3 + 1,
                    Math.random() * 0.5 - 0.25,
                    Math.random() * 2 + 1
                ));
            }
        }

        function drawParticles() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = 'white';

            particles.forEach(p => {
                ctx.beginPath();
                ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
                ctx.fill();
            });
        }

        function updateParticles() {
            particles.forEach(p => {
                p.x += p.speedX;
                p.y += p.speedY;

                if (p.y > canvas.height) p.y = 0;
                if (p.x > canvas.width) p.x = 0;
                if (p.x < 0) p.x = canvas.width;
            });
        }

        function changeBackground() {
            backgroundEl.classList.add('fade-out');

            setTimeout(() => {
                currentImageIndex = (currentImageIndex + 1) % backgroundImages.length;
                backgroundEl.style.backgroundImage = `url('${backgroundImages[currentImageIndex]}')`;
                backgroundEl.classList.remove('fade-out');
            }, 1000);
        }

        canvas.addEventListener('mousemove', (e) => {
            particles.forEach(p => {
                const dx = p.x - e.clientX;
                const dy = p.y - e.clientY;
                const distance = Math.sqrt(dx * dx + dy * dy);

                if (distance < 100) {
                    p.x += dx / 50;
                    p.y += dy / 50;
                }
            });
        });

        function animate() {
            drawParticles();
            updateParticles();
            requestAnimationFrame(animate);
        }

        // Initial background setup
        backgroundEl.style.backgroundImage = `url('${backgroundImages[currentImageIndex]}')`;

        // Change background every 10 seconds
        setInterval(changeBackground, 10000);

        initParticles();
        animate();

        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            particles.length = 0;
            initParticles();
        });

        // Функция для воспроизведения звука при наведении
        function playSound() {
            const audio = document.getElementById('hover-sound');
            audio.currentTime = 0; // Перезапуск звука
            audio.play();
        }

        // Установка громкости фоновой музыки
        const backgroundMusic = document.getElementById('background-music');
        backgroundMusic.volume = 0.05; // Установка громкости на 5%
        
        // Effect Typing
        const text1Element = document.getElementById('text1');
        const text2Element = document.getElementById('text2');
        const text3Element = document.getElementById('text3');

      const text1 = `<i>Идея создания сервера <span class="execrp">Exec Role Play</span> зародилась у <span class="red">Фаршмака</span> в 2021 году, когда удаленное обучение из-за COVID-19 дало ему возможность заняться собственным проектом в Garry's Mod.</i>`;
        const text2 = `<i>Вскоре <span class="gold">Руби Шейхов</span>, признанный CEO и SMM-специалист, заметил потенциал и присоединился к команде, чтобы взять на себя управление и продвижение сервера.</i>`;
        const text3 = `<i>А <span class="blue">тимчис</span>, талантливый маппер, вносит свой вклад в создание уникальных игровых миров, получая за это от <span class="red">Фаршмака</span> еженедельные обеды (не деньгами, а натуралкой).</i>`;

        function typeWriter(text, element, speed = 50) {
          let i = 0;
          function addCharacter() {
            if (i < text.length) {
              element.innerHTML = text.slice(0, i+1);
              i++;
              setTimeout(addCharacter, speed);
            }
          }
          addCharacter();
        }
        
         function startTyping() {
          typeWriter(text1, text1Element, 30);
          setTimeout(() => {
                typeWriter(text2, text2Element, 30);
          }, text1.length * 30 + 500);
          setTimeout(() => {
                typeWriter(text3, text3Element, 30);
           }, (text1.length + text2.length) * 30 + 1000);
        }

        startTyping();
    </script>
</body>
</html>