芝麻web文件管理V1.00

编辑当前文件:/home/unicorntechnolog/public_html/bdswiss/trading-central.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Trading Central | BDSwiss</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <link rel="icon" type="image/png" sizes="16x16" href="img/logo/logo-dark.png">
    <link rel="icon" type="image/png" sizes="32x32" href="img/logo/logo-dark.png">
    <link rel="apple-touch-icon" sizes="180x180" href="img/logo/logo-dark.png">
    <link rel="manifest" href="/site.webmanifest">
    <style>
       /* ===== CSS VARIABLES ===== */
        :root {
            /* Primary Colors */
            --primary-red: #A11318;
            --primary-red-light: #BA161C;
            --primary-red-bright: #FC4F54;
            --primary-red-medium: #ED1C24;
            --primary-red-dark: #D41920;
            
            /* Secondary Colors */
            --accent-gold: #DBA551;
            --accent-gold-light: #EDCA7E;
            --accent-gold-bright: #F4D48D;
            --accent-gold-medium: #F4D081;
            --accent-gold-dark: #F3B62E;
            
            /* Neutral Colors */
            --white: #FFFFFF;
            --light-gray: #E2E2E2;
            --medium-gray: #E5E7EB;
            --dark-gray: #6B7280;
            --text-dark: #1a1a1a;
            --bg-light: #F5F5F5;
            
            /* Typography */
            --font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            
            /* Transitions */
            --transition-fast: 0.3s ease;
            --transition-medium: 0.5s ease;
            
            /* Shadows */
            --shadow-light: 0 2px 10px rgba(0, 0, 0, 0.1);
            --shadow-medium: 0 5px 15px rgba(0, 0, 0, 0.1);
            --shadow-dark: 0 8px 25px rgba(0, 0, 0, 0.15);
            
            /* Border Radius */
            --radius-small: 5px;
            --radius-medium: 10px;
            --radius-large: 20px;
        }

/* ===== RESET AND BASE STYLES ===== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

html {
            scroll-behavior: smooth;
        }

body {
            font-family: var(--font-primary);
            line-height: 1.6;
            color: var(--text-dark);
            background-color: var(--white);
            overflow-x: hidden;
        }

a {
            text-decoration: none;
            color: inherit;
            transition: var(--transition-fast);
        }

ul {
            list-style: none;
        }

img {
            max-width: 100%;
            height: auto;
            display: block;
        }

.container {
            width: 100%;
            max-width: 1300px;
            margin: 0 auto;
            padding: 0 15px;
        }

/* ===== UTILITY CLASSES ===== */
        .text-gradient {
            background: linear-gradient(252deg, var(--primary-red) 24.5%, var(--primary-red-light) 28.3%, 
                          var(--primary-red-bright) 49.64%, var(--primary-red-medium) 54.88%, 
                          var(--primary-red-dark) 59.74%, var(--primary-red) 76.77%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-weight: 700;
        }

.text-gradient-gold {
            background: linear-gradient(252deg, var(--accent-gold) 24.5%, var(--accent-gold-light) 28.3%, 
                          var(--accent-gold-bright) 49.64%, var(--accent-gold-medium) 54.88%, 
                          var(--accent-gold-dark) 59.74%, var(--accent-gold) 76.77%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-weight: 700;
        }

.btn-primary {
            background: linear-gradient(217deg, var(--primary-red) 16.39%, var(--primary-red-light) 21.4%, 
                          var(--primary-red-bright) 49.58%, var(--primary-red-medium) 56.49%, 
                          var(--primary-red-dark) 62.9%, var(--primary-red) 85.39%);
            border: double 2px transparent;
            padding: 12px 24px;
            border-radius: var(--radius-small);
            color: var(--white);
            font-weight: 600;
            display: inline-block;
            transition: var(--transition-fast);
            font-size: 14px;
            text-align: center;
            cursor: pointer;
            box-shadow: var(--shadow-light);
        }

.btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-medium);
        }

.btn-secondary {
            background: linear-gradient(217deg, var(--accent-gold) 16.39%, var(--accent-gold-light) 21.4%, 
                          var(--accent-gold-bright) 49.58%, var(--accent-gold-medium) 56.49%, 
                          var(--accent-gold-dark) 62.9%, var(--accent-gold) 85.39%);
            border: double 2px transparent;
            padding: 12px 24px;
            border-radius: var(--radius-small);
            color: var(--text-dark);
            font-weight: 600;
            display: inline-block;
            transition: var(--transition-fast);
            font-size: 14px;
            text-align: center;
            cursor: pointer;
            box-shadow: var(--shadow-light);
        }

.btn-secondary:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-medium);
        }

.section-title {
            text-align: center;
            margin-bottom: 50px;
        }

.section-title h2 {
            font-size: 2.5rem;
            margin-bottom: 15px;
        }

.section-title p {
            font-size: 1.1rem;
            color: var(--dark-gray);
            max-width: 700px;
            margin: 0 auto;
        }

/* ===== HERO SECTION ===== */
        .hero-section-about {
            background: linear-gradient(135deg, rgba(240, 240, 240, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
            position: relative;
            padding: 100px 0;
            min-height: 600px;
            display: flex;
            align-items: center;
            overflow: hidden;
        }

.hero-section-about::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('img/tools/shares.png') no-repeat center right;
            background-size: contain;
            opacity: 0.1;
            z-index: 1;
        }

.hero-section-about > .container {
            position: relative;
            z-index: 2;
        }

.hero-title-about h1 {
            font-size: 3rem;
            margin-bottom: 20px;
            line-height: 1.2;
        }

.hero-title-about p {
            font-size: 1.2rem;
            color: var(--dark-gray);
            margin-bottom: 30px;
        }

.hero-about-img {
            display: flex;
            justify-content: center;
            align-items: center;
        }

.hero-about-img img {
            max-width: 100%;
            border-radius: var(--radius-medium);
            box-shadow: var(--shadow-medium);
        }

/* ===== EDUCATION SECTION ===== */
        .education-section {
            padding: 80px 0;
        }

.education-section h2 {
            font-size: 2.5rem;
            margin-bottom: 20px;
        }

.education-section p {
            font-size: 1.1rem;
            color: var(--dark-gray);
            margin-bottom: 20px;
        }

.education-image {
            display: flex;
            justify-content: center;
            align-items: center;
        }

.education-image img {
            max-width: 100%;
            border-radius: var(--radius-medium);
            box-shadow: var(--shadow-medium);
        }

/* ===== LIST STYLES ===== */
        .education-list {
            list-style: none;
            padding-left: 0;
        }

.education-list li {
            display: flex;
            align-items: flex-start;
            margin-bottom: 20px;
            padding: 15px;
            border-radius: var(--radius-small);
            background-color: rgba(10, 39, 113, 0.05);
            transition: var(--transition-fast);
        }

.education-list li:hover {
            background-color: rgba(10, 39, 113, 0.1);
            transform: translateX(5px);
        }

.education-list li img {
            width: 30px;
            height: 30px;
            margin-right: 15px;
            flex-shrink: 0;
        }
         .education-list li .me-2 img {
            filter: hue-rotate(320deg) saturate(3) brightness(0.8);

}

.education-list li p {
            margin: 0;
            font-size: 1rem;
        }

/* ===== TRADING CENTRAL SECTION ===== */
        .trading-central-section {
            padding: 80px 0;
            background: linear-gradient(135deg, rgba(240, 240, 240, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
            background-blend-mode: multiply;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;
        }

.trading-central-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1;
        }

.trading-central-section > .container {
            position: relative;
            z-index: 2;
        }

.trading-central-section h2 {
            color: var(--dark-gray);
            margin-bottom: 20px;
        }

.trading-central-section p {
            color: var(--dark-gray);
            font-size: 1.1rem;
            margin-bottom: 20px;
        }

/* ===== RESPONSIVE STYLES ===== */
        @media (max-width: 992px) {
            .hero-title-about h1 {
                font-size: 2.5rem;
            }
            
            .education-section h2 {
                font-size: 2rem;
            }
            
            .feature-card {
                margin-bottom: 20px;
            }
        }

@media (max-width: 768px) {
            .hero-title-about h1 {
                font-size: 2rem;
            }
            
            .education-section h2 {
                font-size: 1.8rem;
            }
            
            .hero-section-about, .education-section, .trading-central-section, .feature-cards-section {
                padding: 60px 0;
            }
            
            .education-list li {
                flex-direction: column;
                text-align: center;
            }
            
            .education-list li img {
                margin-right: 0;
                margin-bottom: 10px;
            }
        }
    </style>
</head>
<body>

<?php include 'common/header.php'; ?>

<section class="hero-section-about">
        <div class="container">
            <div class="row row-cols-1 row-cols-lg-2 g-4 g-lg-5 align-items-center">
                <div class="col d-flex justify-content-center flex-column text-col">
                    <div class="hero-title-about">
                        <h1 class="text-gradient">Use Trading Central to Guide Your Decisions</h1>
                        <p>Use Trading Central's state-of-the-art tools to enhance your trades. Improve your trading tactics with up-to-date information and professional analysis to make better decisions.</p>
                    </div>
                    <div class="buttom-box mb-4">
                        <div><a href="#" class="btn-primary mx-3 nextjs-link">Open Live Account</a></div>
                    </div>
                </div>
                <div class="col d-flex justify-content-center align-items-center">
                    <div class="hero-about-img d-flex justify-content-center align-items-center">
                        <img src="img/tools/shares.png" alt="Trading Central">
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="education-section">
        <div class="container">
            <div class="row row-cols-1 row-cols-lg-2 g-4 g-lg-5 align-items-center">
                <div class="col">
                    <div class="education-image">
                        <img src="img/tools/trading_centerl_.png" alt="Trading Central">
                    </div>
                </div>
                <div class="col d-flex justify-content-center align-items-center">
                    <div>
                        <h2 class="text-gradient">Trading Central</h2>
                        <p>With Trading Central, you can access independent research and top-notch analysis to improve your investment strategy and open up a world of opportunities. Traders of all skill levels can improve their trading with the help of AI-powered analytics, an intuitive interface, and professional investment insights. With up-to-date, pertinent information at your fingertips, you can confidently explore international marketplaces.</p>
                        <ul class="education-list mt-4">
                            <li>
                                <div class="me-2"><img src="img/common-imgs/svgviewer-output (39).svg" alt="Discover"></div>
                                <div>
                                    <p class="m-0">Discover untapped market potential</p>
                                </div>
                            </li>
                            <li>
                                <div class="me-2"><img src="img/common-imgs/svgviewer-output (39).svg" alt="Develop"></div>
                                <div>
                                    <p class="m-0">Develop your trade timing skills.</p>
                                </div>
                            </li>
                            <li>
                                <div class="me-2"><img src="img/common-imgs/svgviewer-output (39).svg" alt="Get Intelligence"></div>
                                <div>
                                    <p class="m-0">Get new market intelligence</p>
                                </div>
                            </li>
                            <li>
                                <div class="me-2"><img src="img/common-imgs/svgviewer-output (39).svg" alt="Manage Risk"></div>
                                <div>
                                    <p class="m-0">Manage your risk well.</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="trading-central-section" >
        <div class="container">
            <div class="row row-cols-1 row-cols-lg-2 g-4 g-lg-5 align-items-center">
                <div class="col d-flex justify-content-center align-items-center">
                    <div>
                        <h2 class="text-gradient">Economic Calendar</h2>
                        <p>Gain access to many market insights through a completely customised trading experience. To remain ahead of any opportunity, easily manage open and closed positions, take advantage of a wide range of analytical tools, and personalise market alerts.</p>
                        <p>Stay ahead in the forex market by planning your trades around these events, understanding their potential market impact, and making informed decisions. Whether you're a beginner or an experienced trader, the Economic Calendar is an essential resource for navigating the dynamic world of forex trading.</p>
                        <div class="mt-4"><a href="#" class="btn-primary nextjs-link"> Learn more </a></div>
                    </div>
                </div>
                <div class="col d-flex justify-content-center align-items-center">
                    <div class="education-image">
                        <img src="img/tools/economic (1).png" alt="Economic Calendar">
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="education-section">
        <div class="container">
            <div class="row row-cols-1 row-cols-lg-2 g-4 g-lg-5 align-items-center">
                <div class="col d-flex justify-content-center align-items-center">
                    <div class="education-image">
                        <img src="img/tools/equity-capital-markets-noor-capital.original.png" alt="Education">
                    </div>
                </div>
                <div class="col d-flex justify-content-center align-items-center">
                    <div>
                        <h2 class="text-gradient">Education</h2>
                        <p>Forex trading is an ever-evolving landscape that requires a solid foundation of knowledge to navigate effectively. Understanding the mechanics of currency markets, key terminologies, and trading strategies is the first step toward mastering the art of forex trading.</p>
                        <p>From exploring how currency pairs work to analyzing market trends and risk management techniques, forex education empowers traders to make informed decisions with confidence. Whether you're deciphering candlestick patterns or diving into the fundamentals of market psychology, a comprehensive learning journey equips you with the skills to thrive in the fast-paced world of foreign exchange trading.</p>
                        <div class="mt-4"><a href="#" class="btn-primary nextjs-link"> Learn more </a></div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <?php include 'common/footer.php'; ?>

// Observe elements for animation
            const elementsToAnimate = document.querySelectorAll('.feature-card, .education-image, .hero-about-img, .education-list li');
            elementsToAnimate.forEach(el => {
                el.style.opacity = 0;
                el.style.transform = 'translateY(20px)';
                el.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
                observer.observe(el);
            });
        });
    </script>
</body>
</html>