﻿﻿
<!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, 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 and tools! Play exciting games like WordSearch, Bingo, SnakeRush, and Quizify. Access powerful online tools like UltraPDF for editing PDFs and AudioForge for extracting and trimming audio. All games and tools are completely free—no downloads required. Start playing, creating, and exploring with Belner today!">

    <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"> <!-- External CSS file -->
    <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>


        <!-- Language Switcher -->
        <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>
                    <!-- Input shown only when panel is expanded -->
                    <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="games">
                    <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>

                    <!-- SUBMENU -->
                    <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="games">
                    <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>

                    <!-- SUBMENU -->
                    <div class="submenu">
                        <a href="https://ultrapdf.belner.co.in" target="_blank">UltraPDF</a>
                    </div>
                </div>

                <div class="menu-item has-submenu" data-menu="games">
                    <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>

                    <!-- SUBMENU -->
                    <div class="submenu">
                        <a href="https://audioforge.belner.co.in" target="_blank">AudioForge</a>
                    </div>
                </div>

                <div class="menu-item has-submenu" data-menu="games">
                    <button data-tab="nav-games">
                        <span class="icon"><i class="fa-solid fa-wrench"></i></span>
                        <span class="label" data-i18n="menu_utilities">Utilities</span>
                    </button>

                    <!-- SUBMENU -->
                    <div class="submenu">
                        <a href="https://belner.co.in/" target="_blank">Grammix</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, 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="utilities" data-i18n="tab_utilities">Utilities</button>

                </nav>
                <!-- Placeholder for Games in All Tools -->
                <div id="all-tools-games-list"></div>
                <!-- Placeholder for Smart Tools in All Tools -->
                <div id="all-tools-tools-list"></div>
            </section>


            <!-- Games Content -->
            <section id="games-panel" role="tabpanel" aria-labelledby="games-tab">
                <div class="game-list" aria-label="Game list">

                    <!-- Word Search -->
                    <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="play-overlay">PLAY</div>-->
                            <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>

                    <!-- Bingo -->
                    <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="play-overlay">PLAY</div>-->
                            <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>

                    <!-- Snake Rush -->
                    <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="play-overlay">PLAY</div>-->
                            <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>

                    <!-- Quizzify -->
                    <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="Quizzify" />
                            <!--<div class="play-overlay">PLAY</div>-->
                            <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>


            <!-- Other Tools Content -->
            <section id="tools-panel" role="tabpanel" aria-labelledby="tools-tab" hidden>
                <div class="game-list" aria-label="Tools list">
                    <!-- UltraPDF -->
                    <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>


                    <!-- AudioForge -->
                    <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>


                    <!-- Grammix -->
                    <div class="game-card" tabindex="0" data-game='{
                          "title": "Grammix",
                          "subtitleKey": "subtitle_grammar",
                          "icon": "Contents/grammar.png",
                          "url": "https://belner.co.in/",
                          "banner": "Contents/grammar.png"
                        }'>

                        <div class="banner-card">
                            <img src="Contents/grammar.png" alt="Grammix" />
                            <div class="coming-soon">Coming Soon</div> <!-- New overlay -->
                            <div class="banner-overlay">
                                <div class="banner-title">Grammix</div>
                                <div class="banner-subtitle" data-i18n="subtitle_grammar">Enhance writing & Paraphrase effortlessly</div>
                            </div>
                        </div>

                    </div>
                </div>
            </section>

            <!-- ===============================
                 CATEGORY STRIP SECTION
            ================================ -->
            <section class="category-strip">

                <!-- Left info card -->
                <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>

                <!-- Category tiles -->
                <div class="category-grid">
                    <!-- Games style categories -->
                    <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">Creative</div>-->
                </div>
            </section>

            <div id="all-tools-section" class="centered-box">
                <h2 class="section-title" data-i18n="all_tools_title">All Tools</h2>

                <!-- Games Row -->
                <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>

                <!-- Productivity Row -->
                <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>

                <!-- Media Row -->
                <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>

                <!-- Utilities Row -->
                <div class="all-tools-row">
                    <h3 class="all-tools-genre" data-i18n="genre_utilities">Utilities</h3>
                    <div class="all-tools-list" id="all-tools-utilities-row"></div>
                </div>
            </div>


            <!-- ==========================
                 TRUST SECTION
            =========================== -->
            <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 () {
            // Find the Grammix card
            const cards = document.querySelectorAll('.game-card');
            cards.forEach(card => {
                const gameData = card.getAttribute('data-game');
                if (gameData && gameData.includes('Grammix')) {
                    // Avoid duplicate tag
                    if (card.querySelector('.coming-soon-tag')) return;

                    // Create the coming soon tag
                    const tag = document.createElement('div');
                    tag.className = 'coming-soon-tag';
                    tag.textContent = 'Coming Soon';

                    // Position it inside the banner overlay
                    const overlay = card.querySelector('.banner-overlay');
                    if (overlay) {
                        overlay.appendChild(tag);
                    }
                }
            });
        });
    </script>


    <style>
        /* Coming Soon tag styling – red to black gradient, bold site font */
        .coming-soon-tag {
            position: absolute;
            top: 10px;
            right: 10px;
            background: linear-gradient(135deg, #ff0000, #000000); /* red to black */
            color: white;
            font-weight: bold; /* bold using site font */
            font-family: inherit; /* inherit site font */
            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;
        }
    </style>


    <script src="language.js"></script>
    <script src="script.js"></script>
</body>

</html>














