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_

10 апреля

базовый мусор с нейросети

11 апреля

@Юсер Время такое, все используют нейросеть.

Войти

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

В теме 3 сообщения

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

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

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

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

Юсер Новичок 3

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

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

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

sinvays Завсегдатый 76

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

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

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

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

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

Войти

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

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

Маркет