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

March 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>

Edited March 2 by _bogdan_

April 10

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

April 11

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

Sign In

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

3 posts in this topic

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

Share this post

Link to post

Share on other sites

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

Share this post

Link to post

Share on other sites

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

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Similar Content

Shop