<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PubliBet - Fun & Entertainment</title>
    <style>
        /* Global styles */
        :root {
            --primary: #4a6bff;
            --secondary: #ff6b6b;
            --dark: #2c3e50;
            --light: #ecf0f1;
            --accent: #ffd166;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: var(--light);
            color: var(--dark);
            line-height: 1.6;
        }
        
        /* Header styles */
        header {
            background: linear-gradient(135deg, var(--primary), #8a6bff);
            color: white;
            padding: 20px 0;
            text-align: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
        }
        
        .logo {
            font-size: 28px;
            font-weight: bold;
            text-decoration: none;
            color: white;
        }
        
        .logo span {
            color: var(--accent);
        }
        
        nav ul {
            display: flex;
            list-style: none;
        }
        
        nav ul li {
            margin-left: 30px;
        }
        
        nav ul li a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s;
        }
        
        nav ul li a:hover {
            color: var(--accent);
        }
        
        /* Hero section */
        .hero {
            height: 500px;
            background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
                        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='500' viewBox='0 0 1200 500'%3E%3Crect width='1200' height='500' fill='%23333'/%3E%3Ccircle cx='200' cy='250' r='100' fill='%23f44336'/%3E%3Ccircle cx='500' cy='250' r='100' fill='%234caf50'/%3E%3Ccircle cx='800' cy='250' r='100' fill='%232196f3'/%3E%3Ccircle cx='1100' cy='250' r='100' fill='%23ff9800'/%3E%3Ctext x='600' y='400' font-family='Arial' font-size='72' font-weight='bold' text-anchor='middle' fill='white'%3EGame On!%3C/text%3E%3C/svg%3E") center/cover;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            color: white;
            text-align: center;
        }
        
        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }
        
        .hero-content {
            position: relative;
            max-width: 800px;
            padding: 0 20px;
            z-index: 1;
        }
        
        .hero h1 {
            font-size: 48px;
            margin-bottom: 20px;
        }
        
        .hero p {
            font-size: 18px;
            margin-bottom: 30px;
        }
        
        .btn {
            display: inline-block;
            background-color: var(--accent);
            color: var(--dark);
            padding: 12px 24px;
            border-radius: 50px;
            font-weight: bold;
            text-decoration: none;
            transition: transform 0.3s, background-color 0.3s;
        }
        
        .btn:hover {
            transform: translateY(-3px);
            background-color: #ffe066;
        }
        
        /* Featured content section */
        .featured {
            padding: 80px 0;
            background-color: white;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        .section-header {
            text-align: center;
            margin-bottom: 60px;
        }
        
        .section-header h2 {
            font-size: 36px;
            color: var(--primary);
            margin-bottom: 15px;
        }
        
        .section-header p {
            color: #7f8c8d;
            max-width: 700px;
            margin: 0 auto;
        }
        
        .cards {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 30px;
        }
        
        .card {
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s;
            width: 350px;
        }
        
        .card:hover {
            transform: translateY(-10px);
        }
        
        .card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        
        .card-content {
            padding: 20px;
        }
        
        .card h3 {
            margin-bottom: 10px;
            color: var(--dark);
        }
        
        .card p {
            color: #7f8c8d;
            margin-bottom: 15px;
        }
        
        /* Games section */
        .games {
            background-color: var(--light);
            padding: 80px 0;
        }
        
        .game-container {
            background-color: white;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            margin-top: 40px;
        }
        
        .game-title {
            text-align: center;
            margin-bottom: 20px;
            color: var(--primary);
        }
        
        .emoji-memory {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            max-width: 600px;
            margin: 0 auto;
        }
        
        .card-memory {
            height: 100px;
            background-color: var(--primary);
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0; /* Hide emoji initially */
            transition: background-color 0.3s, transform 0.3s;
        }
        
        .card-memory:hover {
            transform: scale(1.05);
        }
        
        .card-memory.flipped {
            font-size: 40px;
            background-color: white;
        }
        
        .card-memory.matched {
            background-color: var(--accent);
            cursor: default;
        }
        
        /* Newsletter */
        .newsletter {
            background-color: var(--primary);
            color: white;
            padding: 80px 0;
            text-align: center;
        }
        
        .newsletter h2 {
            margin-bottom: 20px;
        }
        
        .newsletter p {
            margin-bottom: 30px;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .newsletter-form {
            display: flex;
            max-width: 500px;
            margin: 0 auto;
        }
        
        .newsletter-form input {
            flex: 1;
            padding: 15px;
            border: none;
            border-radius: 50px 0 0 50px;
            outline: none;
            font-size: 16px;
        }
        
        .newsletter-form button {
            padding: 15px 25px;
            background-color: var(--accent);
            color: var(--dark);
            border: none;
            border-radius: 0 50px 50px 0;
            cursor: pointer;
            font-weight: bold;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        
        .newsletter-form button:hover {
            background-color: #ffe066;
        }
        
        /* Footer */
        footer {
            background-color: var(--dark);
            color: white;
            padding: 50px 0;
        }
        
        .footer-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 40px;
        }
        
        .footer-column {
            flex: 1;
            min-width: 200px;
        }
        
        .footer-column h3 {
            color: var(--accent);
            margin-bottom: 20px;
            font-size: 20px;
        }
        
        .footer-column ul {
            list-style: none;
        }
        
        .footer-column ul li {
            margin-bottom: 10px;
        }
        
        .footer-column ul li a {
            color: #bdc3c7;
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .footer-column ul li a:hover {
            color: white;
        }
        
        .social-icons {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }
        
        .social-icon {
            width: 40px;
            height: 40px;
            background-color: rgba(255,255,255,0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            color: white;
            transition: background-color 0.3s;
        }
        
        .social-icon:hover {
            background-color: var(--accent);
            color: var(--dark);
        }
        
        .copyright {
            text-align: center;
            margin-top: 50px;
            color: #bdc3c7;
            border-top: 1px solid rgba(255,255,255,0.1);
            padding-top: 20px;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .nav-container {
                flex-direction: column;
            }
            
            nav ul {
                margin-top: 20px;
            }
            
            nav ul li {
                margin: 0 10px;
            }
            
            .hero h1 {
                font-size: 36px;
            }
            
            .emoji-memory {
                grid-template-columns: repeat(3, 1fr);
            }
            
            .newsletter-form {
                flex-direction: column;
            }
            
            .newsletter-form input,
            .newsletter-form button {
                width: 100%;
                border-radius: 50px;
                margin-bottom: 10px;
            }
        }
    </style>
</head>
<body>
    <!-- Header -->
    <header>
        <div class="nav-container">
            <a href="#" class="logo">Publi<span>Bet</span></a>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#games">Games</a></li>
                    <li><a href="#entertainment">Entertainment</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- Hero section -->
    <section class="hero">
        <div class="hero-content">
            <h1>Welcome to PubliBet</h1>
            <p>Your ultimate destination for exciting games and interactive entertainment. Explore our growing collection of fun games designed to challenge your skills and brighten your day!</p>
            <a href="#games" class="btn">Start Playing</a>
        </div>
    </section>

    <!-- Featured content -->
    <section class="featured" id="entertainment">
        <div class="container">
            <div class="section-header">
                <h2>Featured Games</h2>
                <p>Check out our most popular games that everyone's playing!</p>
            </div>
            <div class="cards">
                <div class="card">
                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='350' height='200' viewBox='0 0 350 200'%3E%3Crect width='350' height='200' fill='%23673ab7'/%3E%3Ccircle cx='175' cy='100' r='60' fill='%23ffd700'/%3E%3Cpath d='M175 60 L195 100 L165 80 L185 80 L155 100 Z' fill='%23000'/%3E%3Ctext x='175' y='160' font-family='Arial' font-size='24' text-anchor='middle' fill='white'%3EPacman Adventure%3C/text%3E%3C/svg%3E" alt="Pacman Game">
                    <div class="card-content">
                        <h3>Arcade Classics</h3>
                        <p>Enjoy reimagined versions of your favorite classic arcade games with modern twists and challenges.</p>
                        <a href="#" class="btn">Play Now</a>
                    </div>
                </div>
                <div class="card">
                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='350' height='200' viewBox='0 0 350 200'%3E%3Crect width='350' height='200' fill='%234caf50'/%3E%3Crect x='50' y='50' width='40' height='40' fill='%23f44336'/%3E%3Crect x='100' y='50' width='40' height='40' fill='%232196f3'/%3E%3Crect x='150' y='50' width='40' height='40' fill='%23ffeb3b'/%3E%3Crect x='200' y='50' width='40' height='40' fill='%23ff9800'/%3E%3Crect x='250' y='50' width='40' height='40' fill='%239c27b0'/%3E%3Ctext x='175' y='140' font-family='Arial' font-size='24' text-anchor='middle' fill='white'%3EPuzzle Challenge%3C/text%3E%3C/svg%3E" alt="Puzzle Game">
                    <div class="card-content">
                        <h3>Puzzle Challenges</h3>
                        <p>Test your brain with our collection of mind-bending puzzles, from easy to expert difficulty.</p>
                        <a href="#" class="btn">Challenge Yourself</a>
                    </div>
                </div>
                <div class="card">
                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='350' height='200' viewBox='0 0 350 200'%3E%3Crect width='350' height='200' fill='%23ff5722'/%3E%3Ccircle cx='100' cy='100' r='40' fill='%23e91e63'/%3E%3Ccircle cx='175' cy='100' r='40' fill='%233f51b5'/%3E%3Ccircle cx='250' cy='100' r='40' fill='%2300bcd4'/%3E%3Ctext x='175' y='160' font-family='Arial' font-size='24' text-anchor='middle' fill='white'%3ETrivia Masters%3C/text%3E%3C/svg%3E" alt="Trivia Game">
                    <div class="card-content">
                        <h3>Trivia Masters</h3>
                        <p>Show off your knowledge in various categories including sports, movies, music, history and more.</p>
                        <a href="#" class="btn">Start Quiz</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Games section -->
    <section class="games" id="games">
        <div class="container">
            <div class="section-header">
                <h2>Play Our Games</h2>
                <p>Have some fun with our collection of interactive games!</p>
            </div>
            
            <!-- Memory Match Game -->
            <div class="game-container">
                <h3 class="game-title">Memory Match</h3>
                <p style="text-align: center; margin-bottom: 20px;">Flip the cards and find matching pairs. Test your memory and concentration!</p>
                <div class="emoji-memory" id="memory-game">
                    <!-- Cards will be generated by JavaScript -->
                </div>
            </div>
            
            <!-- More Games Preview -->
            <div style="margin-top: 60px;">
                <h3 style="text-align: center; margin-bottom: 30px; color: var(--primary);">More Games Coming Soon</h3>
                <div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;">
                    <div style="text-align: center; max-width: 200px;">
                        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%23f44336'/%3E%3Cpath d='M35 35 L35 165 L165 165 L165 35 Z' fill='white' stroke='%23333' stroke-width='4'/%3E%3Ccircle cx='65' cy='65' r='15' fill='%23333'/%3E%3Ccircle cx='135' cy='65' r='15' fill='%23333'/%3E%3Cpath d='M65 120 C65 145, 135 145, 135 120' fill='none' stroke='%23333' stroke-width='8'/%3E%3C/svg%3E" alt="Dice Game" style="width: 100%; border-radius: 10px;">
                        <h4 style="margin-top: 10px;">Dice Challenge</h4>
                    </div>
                    <div style="text-align: center; max-width: 200px;">
                        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%232196f3'/%3E%3Ccircle cx='100' cy='100' r='70' fill='%23ffffff' stroke='%23333' stroke-width='5'/%3E%3Cpath d='M100 40 L100 100 L140 130' fill='none' stroke='%23333' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E" alt="Time Challenge" style="width: 100%; border-radius: 10px;">
                        <h4 style="margin-top: 10px;">Time Challenge</h4>
                    </div>
                    <div style="text-align: center; max-width: 200px;">
                        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%23673ab7'/%3E%3Cpath d='M40 40 L40 160 L160 160 L160 40 Z' fill='%23ffffff' stroke='%23333' stroke-width='3'/%3E%3Cpath d='M70 70 L130 70 M70 100 L130 100 M70 130 L130 130 M70 70 L70 130 M100 70 L100 130 M130 70 L130 130' stroke='%23333' stroke-width='3'/%3E%3Ccircle cx='70' cy='70' r='15' fill='%23f44336'/%3E%3Ccircle cx='130' cy='130' r='15' fill='%234caf50'/%3E%3C/svg%3E" alt="Strategy Game" style="width: 100%; border-radius: 10px;">
                        <h4 style="margin-top: 10px;">Strategy Master</h4>
                    </div>
                    <div style="text-align: center; max-width: 200px;">
                        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%23009688'/%3E%3Cpath d='M60 170 L100 40 L140 170 Z' fill='%23ffffff' stroke='%23333' stroke-width='5'/%3E%3Ccircle cx='100' cy='150' r='10' fill='%23f44336'/%3E%3C/svg%3E" alt="Adventure Game" style="width: 100%; border-radius: 10px;">
                        <h4 style="margin-top: 10px;">Adventure Quest</h4>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Newsletter section -->
    <section class="newsletter">
        <div class="container">
            <h2>Stay Updated</h2>
            <p>Subscribe to our newsletter to receive updates on new games, entertainment, and exclusive content.</p>
            <form class="newsletter-form">
                <input type="email" placeholder="Enter your email address">
                <button type="submit">Subscribe</button>
            </form>
        </div>
    </section>

    <!-- Footer -->
    <footer id="contact">
        <div class="container">
            <div class="footer-container">
                <div class="footer-column">
                    <h3>PubliBet</h3>
                    <p>Your premier destination for entertaining games and interactive experiences. We're dedicated to bringing fun and excitement to your digital life.</p>
                    <div class="social-icons">
                        <a href="#" class="social-icon">FB</a>
                        <a href="#" class="social-icon">TW</a>
                        <a href="#" class="social-icon">IG</a>
                        <a href="#" class="social-icon">YT</a>
                    </div>
                </div>
                <div class="footer-column">
                    <h3>Quick Links</h3>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#games">Games</a></li>
                        <li><a href="#entertainment">Entertainment</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>Game Categories</h3>
                    <ul>
                        <li><a href="#">Arcade Games</a></li>
                        <li><a href="#">Card Games</a></li>
                        <li><a href="#">Puzzle Games</a></li>
                        <li><a href="#">Trivia Games</a></li>
                        <li><a href="#">Strategy Games</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>Contact Us</h3>
                    <ul>
                        <li>Email: info@publibet.net</li>
                    </ul>
                </div>
            </div>
            <div class="copyright">
                <p>&copy; 2025 PubliBet. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // Memory Game
        document.addEventListener('DOMContentLoaded', function() {
            const memoryGame = document.getElementById('memory-game');
            const emojis = ['🎮', '🎵', '🎬', '🎨', '📚', '🎯', '🎭', '🎪'];
            const gameEmojis = [...emojis, ...emojis]; // Duplicate for pairs
            
            // Shuffle array
            function shuffle(array) {
                for (let i = array.length - 1; i > 0; i--) {
                    const j = Math.floor(Math.random() * (i + 1));
                    [array[i], array[j]] = [array[j], array[i]];
                }
                return array;
            }
            
            // Shuffle the emojis
            const shuffledEmojis = shuffle(gameEmojis);
            
            // Create cards
            shuffledEmojis.forEach(emoji => {
                const card = document.createElement('div');
                card.classList.add('card-memory');
                card.innerHTML = emoji;
                card.dataset.emoji = emoji;
                memoryGame.appendChild(card);
            });
            
            // Game variables
            let hasFlippedCard = false;
            let lockBoard = false;
            let firstCard, secondCard;
            let matches = 0;
            
            // Flip card function
            function flipCard() {
                if (lockBoard) return;
                if (this === firstCard) return;
                
                this.classList.add('flipped');
                
                if (!hasFlippedCard) {
                    // First click
                    hasFlippedCard = true;
                    firstCard = this;
                    return;
                }
                
                // Second click
                secondCard = this;
                checkForMatch();
            }
            
            // Check for match
            function checkForMatch() {
                let isMatch = firstCard.dataset.emoji === secondCard.dataset.emoji;
                
                if (isMatch) {
                    disableCards();
                    matches++;
                    
                    // Check if all pairs are matched
                    if (matches === emojis.length) {
                        setTimeout(() => {
                            alert('Congratulations! You won the game!');
                            resetGame();
                        }, 500);
                    }
                } else {
                    unflipCards();
                }
            }
            
            // Disable cards
            function disableCards() {
                firstCard.classList.add('matched');
                secondCard.classList.add('matched');
                
                firstCard.removeEventListener('click', flipCard);
                secondCard.removeEventListener('click', flipCard);
                
                resetBoard();
            }
            
            // Unflip cards
            function unflipCards() {
                lockBoard = true;
                
                setTimeout(() => {
                    firstCard.classList.remove('flipped');
                    secondCard.classList.remove('flipped');
                    
                    resetBoard();
                }, 1000);
            }
            
            // Reset board
            function resetBoard() {
                [hasFlippedCard, lockBoard] = [false, false];
                [firstCard, secondCard] = [null, null];
            }
            
            // Reset game
            function resetGame() {
                memoryGame.innerHTML = '';
                matches = 0;
                
                const newShuffledEmojis = shuffle(gameEmojis);
                
                newShuffledEmojis.forEach(emoji => {
                    const card = document.createElement('div');
                    card.classList.add('card-memory');
                    card.innerHTML = emoji;
                    card.dataset.emoji = emoji;
                    card.addEventListener('click', flipCard);
                    memoryGame.appendChild(card);
                });
            }
            
            // Add event listeners to cards
            document.querySelectorAll('.card-memory').forEach(card => {
                card.addEventListener('click', flipCard);
            });
        });
    </script>
</body>
</html>