CEF «Орёл и Решка»

2 марта

Привет! Сливаю вам CEF «Орёл и Решка».

Автор: я

Монета крутится

Создайте текстовый файл с любым названием, но добавьте расширение .html. Затем вставьте в него код, который приведен ниже.

Спойлер


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            background: transparent;
            overflow: hidden;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        .container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: linear-gradient(135deg, rgba(0,0,0,0.9) 0%, rgba(20,20,30,0.95) 100%);
            backdrop-filter: blur(5px);
        }
        
        .game-title {
            position: absolute;
            top: 30px;
            left: 0;
            width: 100%;
            text-align: center;
            color: #ffb94f;
            font-size: 32px;
            font-weight: bold;
            text-shadow: 0 0 20px rgba(255, 185, 79, 0.5);
            letter-spacing: 2px;
            animation: glow 2s ease-in-out infinite;
        }
        
        @keyframes glow {
            0%, 100% { text-shadow: 0 0 20px rgba(255, 185, 79, 0.5); }
            50% { text-shadow: 0 0 40px rgba(255, 185, 79, 0.8); }
        }
        
        .info-panel {
            position: absolute;
            top: 100px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(30, 30, 40, 0.8);
            backdrop-filter: blur(10px);
            padding: 15px 40px;
            border-radius: 50px;
            border: 1px solid rgba(255, 185, 79, 0.3);
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
            display: flex;
            gap: 60px;
            color: white;
            z-index: 10;
        }
        
        .player-info {
            text-align: center;
        }
        
        .player-name {
            font-size: 20px;
            color: #ffb94f;
            margin-bottom: 5px;
            font-weight: bold;
        }
        
        .player-bet {
            font-size: 18px;
            color: #ff9900;
        }
        
        .vs {
            font-size: 24px;
            font-weight: bold;
            color: #ffffff;
            text-shadow: 0 0 15px rgba(255,255,255,0.5);
            align-self: center;
        }
        
        .coin-container {
            position: relative;
            width: 300px;
            height: 300px;
            perspective: 1000px;
            margin: 50px auto;
            filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.6));
        }
        
        .coin {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            animation: coinFloat 3s ease-in-out infinite;
        }
        
        .coin.flipping {
            animation: coinFlip 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) infinite !important;
        }
        
        @keyframes coinFloat {
            0%, 100% { transform: translateY(0) rotateY(0); }
            50% { transform: translateY(-15px) rotateY(180deg); }
        }
        
        @keyframes coinFlip {
            0% { transform: rotateY(0) rotateX(0); }
            25% { transform: rotateY(720deg) rotateX(15deg); }
            50% { transform: rotateY(1440deg) rotateX(0); }
            75% { transform: rotateY(2160deg) rotateX(-15deg); }
            100% { transform: rotateY(2880deg) rotateX(0); }
        }
        
        .coin-side {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 80px;
            font-weight: bold;
            text-transform: uppercase;
            box-shadow: 0 0 30px rgba(0,0,0,0.3);
        }
        
        .heads {
            background: radial-gradient(circle at 30% 30%, #ffd700, #b8860b);
            color: #4a2c0d;
            transform: rotateY(0deg);
            border: 3px solid #fff5b0;
            text-shadow: 2px 2px 4px rgba(255,255,255,0.5);
        }
        
        .heads::before {
            content: "●";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 120px;
            opacity: 0.2;
            color: #fff5b0;
        }
        
        .tails {
            background: radial-gradient(circle at 70% 70%, #c0c0c0, #505050);
            color: #2f2f2f;
            transform: rotateY(180deg);
            border: 3px solid #e0e0e0;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }
        
        .tails::before {
            content: "●";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 120px;
            opacity: 0.2;
            color: #000000;
        }
        
        .result-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(8px);
            opacity: 0;
            transition: opacity 0.5s ease;
            pointer-events: none;
            z-index: 20;
        }
        
        .result-container.show {
            opacity: 1;
            pointer-events: all;
        }
        
        .result-text {
            font-size: 48px;
            font-weight: bold;
            margin-bottom: 20px;
            animation: resultPop 0.5s ease;
        }
        
        .winner-text {
            color: #ff9900;
            text-shadow: 0 0 30px rgba(255, 153, 0, 0.8);
        }
        
        .loser-text {
            color: #FF5733;
            text-shadow: 0 0 30px rgba(255, 87, 51, 0.8);
        }
        
        .result-amount {
            font-size: 36px;
            color: #ffffff;
            text-shadow: 0 0 20px rgba(255,255,255,0.5);
        }
        
        @keyframes resultPop {
            0% { transform: scale(0); opacity: 0; }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); opacity: 1; }
        }
        
        .particles {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }
        
        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: gold;
            border-radius: 50%;
            animation: particleFloat 2s ease-out forwards;
        }
        
        @keyframes particleFloat {
            0% {
                transform: translateY(0) scale(1);
                opacity: 1;
            }
            100% {
                transform: translateY(-100px) scale(0);
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <div class="container" id="container">
        <div class="game-title">ОРЛЯНКА</div>
        
        <div class="info-panel" id="infoPanel">
            <div class="player-info" id="player1Info">
                <div class="player-name" id="player1Name">Игрок 1</div>
                <div class="player-bet" id="player1Bet">0$</div>
            </div>
            <div class="vs">VS</div>
            <div class="player-info" id="player2Info">
                <div class="player-name" id="player2Name">Игрок 2</div>
                <div class="player-bet" id="player2Bet">0$</div>
            </div>
        </div>
        
        <div class="coin-container">
            <div class="coin" id="coin">
                <div class="coin-side heads">О</div>
                <div class="coin-side tails">Р</div>
            </div>
        </div>
        
        <div class="result-container" id="resultContainer">
            <div class="result-text" id="resultText"></div>
            <div class="result-amount" id="resultAmount"></div>
        </div>
        
        <div class="particles" id="particles"></div>
    </div>
    
    <script>
        const coin = document.getElementById('coin');
        const player1Name = document.getElementById('player1Name');
        const player2Name = document.getElementById('player2Name');
        const player1Bet = document.getElementById('player1Bet');
        const player2Bet = document.getElementById('player2Bet');
        const resultContainer = document.getElementById('resultContainer');
        const resultText = document.getElementById('resultText');
        const resultAmount = document.getElementById('resultAmount');
        const particles = document.getElementById('particles');
        
        let isFlipping = false;
        
        function createParticles() {
            for(let i = 0; i < 30; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                particle.style.left = Math.random() * 100 + '%';
                particle.style.top = Math.random() * 100 + '%';
                particle.style.background = `hsl(${Math.random() * 60 + 30}, 100%, 50%)`;
                particle.style.animationDelay = Math.random() * 0.5 + 's';
                particles.appendChild(particle);
                
                setTimeout(() => particle.remove(), 2000);
            }
        }
        
        window.external.on('init', (data) => {
            player1Name.textContent = data.player1;
            player2Name.textContent = data.player2;
            player1Bet.textContent = data.bet + '$';
            player2Bet.textContent = data.bet + '$';
            
            // Начинаем крутить монету
            coin.classList.add('flipping');
            isFlipping = true;
            createParticles();
        });
        
        window.external.on('result', (data) => {
            coin.classList.remove('flipping');
            isFlipping = false;
            
            // Останавливаем монету на нужной стороне
            const rotation = data.result === 0 ? 0 : 1800;
            coin.style.transform = `rotateY(${rotation}deg)`;
            
            // Показываем результат
            resultContainer.classList.add('show');
            
            if(data.winner === data.player1) {
                resultText.textContent = 'ПОБЕДИЛ ' + data.player1;
                resultText.className = 'result-text winner-text';
                resultAmount.textContent = '+' + (data.bet * 2) + '$';
            } else {
                resultText.textContent = 'ПОБЕДИЛ ' + data.player2;
                resultText.className = 'result-text winner-text';
                resultAmount.textContent = '+' + (data.bet * 2) + '$';
            }
            
            createParticles();
            
            // Закрываем окно через 4 секунды
            setTimeout(() => window.external.emit('close'), 4000);
        });
        
        // Эффекты при наведении
        coin.addEventListener('mouseenter', () => {
            if(!isFlipping) {
                coin.style.transform = 'scale(1.1)';
            }
        });
        
        coin.addEventListener('mouseleave', () => {
            if(!isFlipping) {
                coin.style.transform = 'scale(1)';
            }
        });
    </script>
</body>
</html>

Отредактировано 2 марта пользователем _bogdan_

Войти

CEF «Орёл и Решка»

В теме 1 сообщение

Daf Освоившийся 9

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Создать учетную запись

Войти

Последние посетители 0 пользователей онлайн

Похожий контент

Маркет