Introduction

Begin your journey with the 熊猫体育 platform to unlock an unparalleled sports entertainment experience. We are dedicated to delivering superior event viewing and interactive engagement.

Getting Started

Empower your sports passion with the 熊猫体育 platform. Access comprehensive features designed to deepen your engagement and elevate your entertainment. Download now.

CSS

Integrate this stylesheet link `<link>` within your `<head>` section, prioritizing it over all other stylesheets for optimal 熊猫体育 platform interface rendering.

<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />

JS

The functionality of our platform's components relies on JavaScript. Ensure you include the jQuery library and our proprietary JavaScript plugins. Place these `<script>` tags before the closing `<body>` tag, observing the correct loading order: jQuery, followed by bootstrap.bundle.min.js, and finally our platform's scripts.

<script src="js/jquery.min.js"></script>

Core Scripts

Base Template

Adhere to modern web standards by employing the HTML5 doctype and including the viewport meta tag for responsive design. This foundational setup ensures your page is fully compatible and displays elegantly across all devices.

HTML Structure:

<!doctype html>
<html lang="en">
    <head>

        <meta charset="utf-8" />
        <title>熊猫体育 (Official) Entertainment Platform - XMSPORTS</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="熊猫体育 (Official) Entertainment Platform integrates global popular sports events like football, basketball, tennis, and esports, offering live broadcasts, real-time scores, news, and data analysis." />
        <meta name="keywords" content="熊猫体育APP, 熊猫体育官网, 熊猫体育登录入口, 熊猫体育平台, sports live streaming, football scores, basketball scores, esports news" />

        <!-- favicon icon -->
        <link rel="shortcut icon" href="images/favicon.ico">

        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />

        <!-- Main css -->
        <link href="css/style.css" rel="stylesheet" type="text/css" />
    
    </head>

    <body>

        <!-- Loader Start -->
        <div id="#--------">
            --------
            --------
        </div>
        <!-- Loader End -->

        <!-- Navbar Start -->
        <header>
            <div class="--------">
                --------
                --------
                --------
                --------
            </div>
        </header>
        <!-- Navbar End -->

        <!-- Hero Start -->
        <section class="--------">
            <div class="--------">
                --------
                --------
                --------
                --------
            </div>
        </section>
        <!-- Hero End -->

        <!-- Footer Start -->
        <footer>
            <div class="--------">
                --------
                --------
                --------
                --------
            </div>
        </footer>
        <!-- Footer End -->

        <!-- Back To Home Start -->
        <a href="#" class="nav-link" id="nav-link-home">
            --------
            --------
        </a>
        <!-- Back To Home End -->

        <!-- Javascript Start -->
        <script src="js/jquery-3.4.1.min.js"></script>
        <script src="js/bootstrap.bundle.min.js"></script>
        --------
        --------
        --------
        <script src="js/app.js"></script>
        <!-- Javascript End -->
    </body>
</html>

Internationalization Support

Internationalization Support:

To activate Right-to-Left (RTL) display, replace the reference to `style.css` with `style-rtl.css`.

Dark Mode

Dark Mode:

To enable Dark Mode, substitute the `style.css` link with `style-dark.css`.

Dark RTL Mode:

For Dark Mode with RTL support, replace `style.css` with `style-dark-rtl.css`.

Navigation Centered Right

To align your navigation menu to the right, append the classes `navigation-menu` and `nav-right` to the navigation element.

Navigation Centered Left

To align your navigation menu to the left, append the classes `navigation-menu` and `nav-left` to the navigation element.

Light Navigation Centered

For a light-themed navigation with a centered alignment, apply the classes `navigation-menu` and `nav-light` to the navigation element.

Light Navigation Right Aligned

To achieve a light-themed navigation with right alignment, add the classes `navigation-menu`, `nav-right`, and `nav-light` to your navigation element.

Light Navigation Left Aligned

For a light-themed navigation with left alignment, include the classes `navigation-menu`, `nav-left`, and `nav-light` on your navigation element.

Documentation