<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Belner - Games & Tools</title>
    <meta name="keywords" content="Belner, Belner games, Belner tools, online games, free online games, word search, bingo, snake rush, quizify, verdictly, AI verdicts, entertainment tools, free PDF editor, UltraPDF, AudioForge, extract audio, trim audio, online puzzles, online quizzes, word grid, puzzle games, trivia games, snake game, online PDF tools, free audio tool, play games online, free games, free tools, download PDF, audio extractor, puzzle hunt, word game, word hunt, grid game, online fun, multiplayer games, brain games, quiz challenges">
    <meta name="description" content="Belner is your ultimate free online platform for games, entertainment, and tools! Play exciting games like WordSearch, Bingo, SnakeRush, and Quizify. Try Verdictly for AI verdicts on everyday drama. Access powerful online tools like UltraPDF and AudioForge. All games and tools are completely free—no downloads required.">

    <link rel="icon" href="/favicon.ico" sizes="any" type="image/png">
    <link rel="apple-touch-icon" href="/favicon.png">

    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js"></script>
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8618668022481236"
     crossorigin="anonymous"></script>
</head>

<body>
    <div id="top"></div>

    <header class="app-header">
        <div class="header-left">
            <a href="#" class="brand-link" aria-label="Go to top">
                <img src="Contents/favicon.png" alt="Belner Logo" class="brand-logo">
                <span class="brand-title">Belner</span>
            </a>
        </div>

        <div class="header-right">
            <button class="lang-btn" aria-label="Change language">
                <i class="fa-solid fa-globe"></i>
            </button>

            <div class="lang-dropdown">
                <button data-lang="en">English</button>
                <button data-lang="de">Deutsch</button>
                <button data-lang="fr">Français</button>
                <button data-lang="es">Español</button>
                <button data-lang="it">Italiano</button>
                <button data-lang="ru">Русский</button>
            </div>
        </div>
    </header>

    <div class="app-container">

        <nav class="left-panel" aria-label="Main navigation">
            <div class="left-header">
                <button class="mobile-close" aria-label="Close menu">✕</button>
            </div>

            <div class="menu">
                <div class="menu-item search-item" data-menu="search">
                    <button class="search-btn">
                        <span class="icon"><i class="fa-solid fa-magnifying-glass"></i></span>
                        <span class="label"></span>
                    </button>

                    <div class="search-input-container">
                        <input type="search" data-i18n-placeholder="search_placeholder" placeholder="Search apps" aria-label="Search apps" />
                    </div>
                </div>

                <div class="menu-item has-submenu" data-menu="all-tools">
                    <button data-tab="nav-games" class="active">
                        <span class="icon"><i class="fa-solid fa-layer-group"></i></span>
                        <span class="label" data-i18n="menu_all_tools">All Tools</span>
                    </button>
                </div>

                <div class="menu-item has-submenu" data-menu="games">
                    <button data-tab="nav-games">
                        <span class="icon"><i class="fa-solid fa-gamepad"></i></span>
                        <span class="label" data-i18n="menu_games">Games</span>
                    </button>

                    <div class="submenu">
                        <a href="https://wordsearch.belner.co.in" target="_blank">Word Search</a>
                        <a href="https://bingo.belner.co.in" target="_blank">Bingo</a>
                        <a href="https://snakerush.belner.co.in" target="_blank">Snake Rush</a>
                        <a href="https://quizify.belner.co.in" target="_blank">Quizify</a>
                    </div>
                </div>

                <div class="menu-item has-submenu" data-menu="productivity">
                    <button data-tab="nav-games">
                        <span class="icon"><i class="fa-solid fa-briefcase"></i></span>
                        <span class="label" data-i18n="menu_productivity">Productivity</span>
                    </button>

                    <div class="submenu">
                        <a href="https://ultrapdf.belner.co.in" target="_blank">UltraPDF</a>
                    </div>
                </div>

                <div class="menu-item has-submenu" data-menu="media">
                    <button data-tab="nav-games">
                        <span class="icon"><i class="fa-solid fa-music"></i></span>
                        <span class="label" data-i18n="menu_media">Media & Music</span>
                    </button>

                    <div class="submenu">
                        <a href="https://audioforge.belner.co.in" target="_blank">AudioForge</a>
                    </div>
                </div>

                <div class="menu-item has-submenu" data-menu="entertainment">
                    <button data-tab="nav-entertainment">
                        <span class="icon"><i class="fa-solid fa-face-laugh-beam"></i></span>
                        <span class="label" data-i18n="menu_entertainment">Entertainment</span>
                    </button>

                    <div class="submenu">
                        <a href="https://verdictly.belner.co.in" target="_blank">Verdictly</a>
                    </div>
                </div>
            </div>
        </nav>

        <main class="right-panel" role="main" tabindex="0">

            <section id="all-tools-panel" role="tabpanel">
                <header class="hero">
                    <canvas id="particleCanvas"></canvas>
                    <div class="hero-content">
                        <h1 data-i18n="hero_title">Your World. Seamlessly Connected.</h1>
                        <p data-i18n="hero_desc">Access games, productivity apps, media, entertainment, and utilities effortlessly everything you need in one intuitive platform.</p>
                    </div>
                </header>

                <nav class="panel-nav">
                    <button data-panel="games" class="active" data-i18n="tab_games">Games</button>
                    <button data-panel="productivity" data-i18n="tab_productivity">Productivity</button>
                    <button data-panel="media" data-i18n="tab_media">Media & Music</button>
                    <button data-panel="entertainment" data-i18n="tab_entertainment">Entertainment</button>
                </nav>

                <div id="all-tools-games-list"></div>
                <div id="all-tools-tools-list"></div>
            </section>

            <section id="games-panel" role="tabpanel" aria-labelledby="games-tab">
                <div class="game-list" aria-label="Game list">

                    <div class="game-card" tabindex="0" data-game='{
                        "title": "Word Search",
                        "subtitleKey": "subtitle_wordsearch",
                        "icon": "Contents/word.png",
                        "url": "https://wordsearch.belner.co.in",
                        "banner": "Contents/word.png"
                    }'>
                        <div class="banner-card">
                            <img src="Contents/word.png" alt="Word Search" />
                            <div class="banner-overlay">
                                <div class="banner-title">Word Search</div>
                                <div class="banner-subtitle" data-i18n="subtitle_wordsearch">3 Levels & Themed Word Puzzles</div>
                            </div>
                        </div>
                    </div>

                    <div class="game-card" tabindex="0" data-game='{
                        "title": "Bingo",
                        "subtitleKey": "subtitle_bingo",
                        "icon": "Contents/bingo.png",
                        "url": "https://bingo.belner.co.in",
                        "banner": "Contents/bingo.png"
                    }'>
                        <div class="banner-card">
                            <img src="Contents/bingo.png" alt="Bingo" />
                            <div class="banner-overlay">
                                <div class="banner-title">Bingo</div>
                                <div class="banner-subtitle" data-i18n="subtitle_bingo">Play Solo or Multiplayer</div>
                            </div>
                        </div>
                    </div>

                    <div class="game-card" tabindex="0" data-game='{
                        "title": "Snake Rush",
                        "subtitleKey": "subtitle_snake",
                        "icon": "Contents/snake.png",
                        "url": "https://snakerush.belner.co.in",
                        "banner": "Contents/snake.png"
                    }'>
                        <div class="banner-card">
                            <img src="Contents/snake.png" alt="Snake Rush" />
                            <div class="banner-overlay">
                                <div class="banner-title">Snake Rush</div>
                                <div class="banner-subtitle" data-i18n="subtitle_snake">Classic Snake Adventure</div>
                            </div>
                        </div>
                    </div>

                    <div class="game-card" tabindex="0" data-game='{
                        "title": "Quizify",
                        "subtitleKey": "subtitle_quiz",
                        "icon": "Contents/quiz.png",
                        "url": "https://quizify.belner.co.in",
                        "banner": "Contents/quiz.png"
                    }'>
                        <div class="banner-card">
                            <img src="Contents/quiz.png" alt="Quizify" />
                            <div class="banner-overlay">
                                <div class="banner-title">Quizify</div>
                                <div class="banner-subtitle" data-i18n="subtitle_quiz">Fun Trivia Across Multiple Categories</div>
                            </div>
                        </div>
                    </div>

                </div>
            </section>

            <section id="tools-panel" role="tabpanel" aria-labelledby="tools-tab" hidden>
                <div class="game-list" aria-label="Tools list">

                    <div class="game-card" tabindex="0" data-game='{
                        "title": "UltraPDF",
                        "subtitleKey": "subtitle_ultrapdf",
                        "icon": "Contents/ultrapdf.png",
                        "url": "https://ultrapdf.belner.co.in",
                        "banner": "Contents/ultrapdf.png"
                    }'>
                        <div class="banner-card">
                            <img src="Contents/ultrapdf.png" alt="UltraPDF" />
                            <div class="banner-overlay">
                                <div class="banner-title">UltraPDF</div>
                                <div class="banner-subtitle" data-i18n="subtitle_ultrapdf">All-in-One PDF Tools</div>
                            </div>
                        </div>
                    </div>

                    <div class="game-card" tabindex="0" data-game='{
                        "title": "AudioForge",
                        "subtitleKey": "subtitle_audioforge",
                        "icon": "Contents/audioforge.png",
                        "url": "https://audioforge.belner.co.in",
                        "banner": "Contents/audioforge.png"
                    }'>
                        <div class="banner-card">
                            <img src="Contents/audioforge.png" alt="AudioForge" />
                            <div class="banner-overlay">
                                <div class="banner-title">AudioForge</div>
                                <div class="banner-subtitle" data-i18n="subtitle_audioforge">Audio & Video Conversion Made Easy</div>
                            </div>
                        </div>
                    </div>

                </div>
            </section>

            <section id="entertainment-panel" role="tabpanel" aria-labelledby="entertainment-tab" hidden>
                <div class="game-list entertainment-feature-list" aria-label="Entertainment tools list">

                    <div class="game-card verdictly-feature-card" tabindex="0" data-game='{
                        "title": "Verdictly",
                        "subtitleKey": "subtitle_verdictly",
                        "icon": "Contents/verdictly.png",
                        "url": "https://verdictly.belner.co.in",
                        "banner": "Contents/verdictly.png"
                    }'>
                        <div class="banner-card verdictly-banner-card">
                            <img src="Contents/verdictly.png" alt="Verdictly" />
                            <span class="new-tag">NEW</span>

                            <div class="verdictly-card-copy">
                                <span class="verdictly-kicker">AI Entertainment</span>
                                <h3>Verdictly</h3>
                                <p>AI verdicts for everyday drama</p>
                            </div>

                            <div class="banner-overlay">
                                <div class="banner-title">Verdictly</div>
                                <div class="banner-subtitle" data-i18n="subtitle_verdictly">AI verdicts for everyday drama</div>
                            </div>
                        </div>
                    </div>

                </div>
            </section>

            <section class="category-strip">
                <div class="category-info">
                    <h3 data-i18n="category_title">Online Games and Tools at Belner</h3>
                    <p data-i18n="category_desc">
                        Discover the latest and best web games and tools.
                        Play instantly without downloads or interruptions.
                        Everything runs directly in your browser.
                    </p>
                </div>

                <div class="category-grid">
                    <div class="category-tile" data-category="puzzle" data-i18n="cat_puzzle">Puzzle</div>
                    <div class="category-tile" data-category="arcade" data-i18n="cat_arcade">Arcade</div>
                    <div class="category-tile" data-category="trivia" data-i18n="cat_trivia">Trivia</div>
                    <div class="category-tile" data-category="documents" data-i18n="cat_documents">Documents</div>
                    <div class="category-tile" data-category="media" data-i18n="cat_media">Media</div>
                    <div class="category-tile" data-category="entertainment" data-i18n="cat_entertainment">Entertainment</div>
                </div>
            </section>

            <div id="all-tools-section" class="centered-box">
                <h2 class="section-title" data-i18n="all_tools_title">All Tools</h2>

                <div class="all-tools-row">
                    <h3 class="all-tools-genre" data-i18n="genre_games">Games</h3>
                    <div class="all-tools-list" id="all-tools-games-row"></div>
                </div>

                <div class="all-tools-row">
                    <h3 class="all-tools-genre" data-i18n="genre_productivity">Productivity</h3>
                    <div class="all-tools-list" id="all-tools-productivity-row"></div>
                </div>

                <div class="all-tools-row">
                    <h3 class="all-tools-genre" data-i18n="genre_media">Media & Music</h3>
                    <div class="all-tools-list" id="all-tools-media-row"></div>
                </div>

                <div class="all-tools-row">
                    <h3 class="all-tools-genre" data-i18n="genre_entertainment">Entertainment</h3>
                    <div class="all-tools-list" id="all-tools-entertainment-row"></div>
                </div>

                <div class="all-tools-row">
                    <div class="all-tools-list" id="all-tools-utilities-row"></div>
                </div>
            </div>

            <section class="trust-section" style="background-image: url('Contents/trust-bg.png');">
                <div class="trust-container">
                    <h2 data-i18n="trust_title">Trusted by Thousands of Users Worldwide</h2>
                    <div class="trust-cards">
                        <div class="trust-card">
                            <i class="fa-solid fa-shield-halved"></i>
                            <h3 data-i18n="trust_secure">Secure & Private</h3>
                            <p data-i18n="trust_secure_desc">Your data is protected with industry-standard encryption.</p>
                        </div>
                        <div class="trust-card">
                            <i class="fa-solid fa-thumbs-up"></i>
                            <h3 data-i18n="trust_reliable">Reliable & Verified</h3>
                            <p data-i18n="trust_reliable_desc">All games and tools are thoroughly tested for quality.</p>
                        </div>
                        <div class="trust-card">
                            <i class="fa-solid fa-globe"></i>
                            <h3 data-i18n="trust_accessible">Accessible Anywhere</h3>
                            <p data-i18n="trust_accessible_desc">Play games and use tools instantly on any device.</p>
                        </div>
                    </div>
                </div>
            </section>

            <section class="testimonial-section" style="background-image: url('Contents/testimonial-bg.png');">
                <div class="testimonial-container">
                    <h2 data-i18n="testimonials_title">What Our Users Say</h2>
                    <div class="testimonial-cards">

                        <div class="testimonial-card">
                            <img src="Contents/user1.png" alt="Aarav Sharma">
                            <p data-i18n="testimonial_1">“Belner makes everything so smooth and fast. I can access games and tools instantly without any hassle.”</p>
                            <h4>- Aarav Sharma</h4>
                        </div>

                        <div class="testimonial-card">
                            <img src="Contents/user2.png" alt="Priya K.">
                            <p data-i18n="testimonial_2">“The platform is secure, easy to use, and perfect for both productivity and entertainment.”</p>
                            <h4>- Priya K.</h4>
                        </div>

                        <div class="testimonial-card">
                            <img src="Contents/user1.png" alt="Michael R.">
                            <p data-i18n="testimonial_3">“I love how simple and intuitive everything is. Games load instantly, and tools are super reliable.”</p>
                            <h4>- Michael R.</h4>
                        </div>

                        <div class="testimonial-card">
                            <img src="Contents/user2.png" alt="Priya Patel">
                            <p data-i18n="testimonial_4">“I love how simple Belner is to use. No installations, no delays.”</p>
                            <h4>- Riya Patel</h4>
                        </div>

                        <div class="testimonial-card">
                            <img src="Contents/user2.png" alt="Emily S.">
                            <p data-i18n="testimonial_5">“Belner is my go-to for online tools. Everything I need is available instantly and works perfectly.”</p>
                            <h4>- Emily S.</h4>
                        </div>

                    </div>
                </div>
            </section>
        </main>
    </div>

    <footer class="footer-section" id="contact">
        <p>
            <span class="footer-copy">© Belner 2026</span>
            <a href="/Contents/privacy_policy.html" data-i18n="footer_privacy">Privacy Policy</a> |
            <a href="/Contents/terms_of_service.html" data-i18n="footer_terms">Terms of Service</a> |
            <a href="/Contents/faq.html" data-i18n="footer_faq">FAQ</a> |
            <a href="/Contents/contact.html" data-i18n="footer_contact">Contact</a>
        </p>
    </footer>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const cards = document.querySelectorAll('.game-card');

            cards.forEach(card => {
                const gameData = card.getAttribute('data-game');
                if (!gameData) return;

                const bannerCard = card.querySelector('.banner-card');
                if (!bannerCard) return;

                if (gameData.includes('Grammix')) {
                    if (bannerCard.querySelector('.coming-soon-tag')) return;

                    const tag = document.createElement('div');
                    tag.className = 'coming-soon-tag';
                    tag.textContent = 'Coming Soon';
                    bannerCard.appendChild(tag);
                }

                if (gameData.includes('Verdictly')) {
                    if (bannerCard.querySelector('.new-tag')) return;

                    const tag = document.createElement('span');
                    tag.className = 'new-tag';
                    tag.textContent = 'NEW';
                    bannerCard.appendChild(tag);
                }
            });
        });
    </script>

    <style>
        .coming-soon-tag,
        .new-tag {
            position: absolute;
            top: 10px;
            right: 10px;
            color: white;
            font-weight: bold;
            font-family: inherit;
            font-size: 0.8rem;
            padding: 4px 10px;
            border-radius: 6px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.4);
            pointer-events: none;
            z-index: 10;
        }

        .coming-soon-tag {
            background: linear-gradient(135deg, #ff0000, #000000);
        }

        .new-tag {
            background: linear-gradient(135deg, #00c853, #00695c);
        }

        #entertainment-panel .entertainment-feature-list {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 70px 20px 90px;
        }

        #entertainment-panel .verdictly-feature-card {
            width: min(620px, 92vw);
            transform: translateY(0);
            transition: transform 0.25s ease, filter 0.25s ease;
        }

        #entertainment-panel .verdictly-feature-card:hover {
            transform: translateY(-6px);
            filter: brightness(1.08);
        }

        #entertainment-panel .verdictly-banner-card {
            position: relative;
            min-height: 310px;
            border-radius: 28px;
            overflow: hidden;
            border: 1px solid rgba(255,255,255,0.18);
            background:
                radial-gradient(circle at 20% 20%, rgba(255, 180, 60, 0.24), transparent 34%),
                radial-gradient(circle at 80% 30%, rgba(34, 211, 238, 0.15), transparent 35%),
                linear-gradient(135deg, rgba(20,20,20,0.96), rgba(4,4,4,0.98));
            box-shadow:
                0 24px 60px rgba(0,0,0,0.55),
                0 0 42px rgba(0, 200, 140, 0.14);
        }

        #entertainment-panel .verdictly-banner-card::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                linear-gradient(90deg, rgba(0,0,0,0.72), rgba(0,0,0,0.12), rgba(0,0,0,0.82)),
                linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.78));
            z-index: 1;
        }

        #entertainment-panel .verdictly-banner-card::after {
            content: "";
            position: absolute;
            inset: 12px;
            border-radius: 22px;
            border: 1px solid rgba(255,255,255,0.12);
            pointer-events: none;
            z-index: 3;
        }

        #entertainment-panel .verdictly-banner-card img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.88;
            transform: scale(1.04);
            filter: saturate(1.12) contrast(1.06);
        }

        #entertainment-panel .verdictly-card-copy {
            position: absolute;
            left: 32px;
            bottom: 34px;
            z-index: 4;
            max-width: 420px;
            color: white;
            text-align: left;
        }

        #entertainment-panel .verdictly-kicker {
            display: inline-flex;
            margin-bottom: 12px;
            padding: 6px 10px;
            border-radius: 999px;
            background: rgba(255,255,255,0.12);
            border: 1px solid rgba(255,255,255,0.14);
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: #d9fff4;
            backdrop-filter: blur(8px);
        }

        #entertainment-panel .verdictly-card-copy h3 {
            margin: 0;
            font-size: clamp(2rem, 5vw, 3.4rem);
            line-height: 0.95;
            font-weight: 900;
            letter-spacing: -0.04em;
            text-shadow: 0 8px 24px rgba(0,0,0,0.55);
        }

        #entertainment-panel .verdictly-card-copy p {
            margin: 12px 0 0;
            font-size: 1rem;
            color: rgba(255,255,255,0.82);
            font-weight: 600;
        }

        #entertainment-panel .verdictly-banner-card .banner-overlay {
            display: none;
        }

        #entertainment-panel .verdictly-banner-card .new-tag {
            top: 18px;
            right: 18px;
            z-index: 5;
            background: linear-gradient(135deg, #00e676, #00796b);
            box-shadow: 0 0 24px rgba(0, 230, 118, 0.35);
        }

        @media (max-width: 768px) {
            #entertainment-panel .entertainment-feature-list {
                padding: 44px 14px 60px;
            }

            #entertainment-panel .verdictly-banner-card {
                min-height: 250px;
                border-radius: 22px;
            }

            #entertainment-panel .verdictly-card-copy {
                left: 22px;
                right: 22px;
                bottom: 26px;
            }
        }
    </style>

    <script src="language.js"></script>
    <script src="script.js"></script>
</body>
</html>
