PNG  IHDR pHYs   OiCCPPhotoshop ICC profilexڝSgTS=BKKoR RB&*! J!QEEȠQ, !{kּ> H3Q5 B.@ $pd!s#~<<+"x M0B\t8K@zB@F&S`cbP-`'{[! eDh;VEX0fK9-0IWfH  0Q){`##xFW<+*x<$9E[-qWW.(I+6aa@.y24x6_-"bbϫp@t~,/;m%h^ uf@Wp~<5j>{-]cK'Xto(hw?G%fIq^D$.Tʳ?D*A, `6B$BB dr`)B(Ͱ*`/@4Qhp.U=pa( Aa!ڈbX#!H$ ɈQ"K5H1RT UH=r9\F;2G1Q= C7F dt1r=6Ыhڏ>C03l0.B8, c˱" VcϱwE 6wB aAHXLXNH $4 7 Q'"K&b21XH,#/{C7$C2'ITFnR#,4H#dk9, +ȅ3![ b@qS(RjJ4e2AURݨT5ZBRQ4u9̓IKhhitݕNWGw Ljg(gwLӋT071oUX**| J&*/Tު UUT^S}FU3S ԖUPSSg;goT?~YYLOCQ_ cx,!k u5&|v*=9C3J3WRf?qtN (~))4L1e\kXHQG6EYAJ'\'GgSSݧ M=:.kDwn^Loy}/TmG X $ <5qo</QC]@Caaᄑ.ȽJtq]zۯ6iܟ4)Y3sCQ? 0k߬~OCOg#/c/Wװwa>>r><72Y_7ȷOo_C#dz%gA[z|!?:eAAA!h쐭!ΑiP~aa~ 'W?pX15wCsDDDޛg1O9-J5*>.j<74?.fYXXIlK9.*6nl {/]py.,:@LN8A*%w% yg"/6шC\*NH*Mz쑼5y$3,幄'L Lݛ:v m2=:1qB!Mggfvˬen/kY- BTZ(*geWf͉9+̳ې7ᒶKW-X潬j9(xoʿܔĹdff-[n ڴ VE/(ۻCɾUUMfeI?m]Nmq#׹=TR+Gw- 6 U#pDy  :v{vg/jBFS[b[O>zG499?rCd&ˮ/~јѡ򗓿m|x31^VwwO| (hSЧc3- cHRMz%u0`:o_F@8N ' p @8N@8}' p '#@8N@8N pQ9p!i~}|6-ӪG` VP.@*j>[ K^<֐Z]@8N'KQ<Q(`s" 'hgpKB`R@Dqj '  'P$a ( `D$Na L?u80e J,K˷NI'0eݷ(NI'؀ 2ipIIKp`:O'`ʤxB8Ѥx Ѥx $ $P6 :vRNb 'p,>NB 'P]-->P T+*^h& p '‰a ‰ (ĵt#u33;Nt̵'ޯ; [3W ~]0KH1q@8]O2]3*̧7# *p>us p _6]/}-4|t'|Smx= DoʾM×M_8!)6lq':l7!|4} '\ne t!=hnLn (~Dn\+‰_4k)0e@OhZ`F `.m1} 'vp{F`ON7Srx 'D˸nV`><;yMx!IS钦OM)Ե٥x 'DSD6bS8!" ODz#R >S8!7ّxEh0m$MIPHi$IvS8IN$I p$O8I,sk&I)$IN$Hi$I^Ah.p$MIN$IR8I·N "IF9Ah0m$MIN$IR8IN$I 3jIU;kO$ɳN$+ q.x* tEXtComment

Viewing File: /home/u456810272/domains/etfcareer.org/public_html/admin/sample3/index.php

<?php
// ============================================
// ETF CAREER - LANDING PAGE
// ============================================

session_start();
ob_start();

// Error reporting for debugging
error_reporting(E_ALL);
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);

// ============================================
// DATABASE CONFIGURATION
// ============================================
$host = "localhost";
$dbname = "u456810272_etfcareer";
$username = "u456810272_etfcareer";
$password = "Global@#980";

// Create database connection
$pdo = null;
try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8mb4", $username, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $pdo->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    // Try to create database if it doesn't exist
    try {
        $pdo = new PDO("mysql:host=$host;charset=utf8mb4", $username, $password);
        $pdo->exec("CREATE DATABASE IF NOT EXISTS `$dbname` CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci");
        $pdo->exec("USE `$dbname`");
        
        // Reconnect with database
        $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8mb4", $username, $password);
        $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        
        // Create admin table
        $pdo->exec("CREATE TABLE IF NOT EXISTS admins (
            id INT AUTO_INCREMENT PRIMARY KEY,
            name VARCHAR(100) NOT NULL,
            email VARCHAR(255) NOT NULL UNIQUE,
            password VARCHAR(255) NOT NULL,
            role ENUM('admin','staff') DEFAULT 'admin',
            status TINYINT(1) DEFAULT 1,
            created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
        ) ENGINE=InnoDB");
        
        // Insert default admin if not exists
        $stmt = $pdo->prepare("SELECT id FROM admins WHERE email = 'admin@etfcareer.org'");
        $stmt->execute();
        if (!$stmt->fetch()) {
            $hashedPassword = password_hash('admin123', PASSWORD_DEFAULT);
            $pdo->prepare("INSERT INTO admins (name, email, password, role, status) VALUES (?, ?, ?, 'admin', 1)")
                ->execute(['Super Admin', 'admin@etfcareer.org', $hashedPassword]);
        }
        
    } catch (PDOException $e2) {
        die("Database setup failed: " . $e2->getMessage() . "<br>Please check your database credentials.");
    }
}

// ============================================
// AUTHENTICATION FUNCTIONS
// ============================================
function isLoggedIn() {
    return isset($_SESSION['admin_id']) && !empty($_SESSION['admin_id']);
}

// Redirect to dashboard if already logged in
if (isLoggedIn()) {
    header("Location: dashboard.php");
    exit;
}

// ============================================
// HANDLE LOGIN & REGISTRATION
// ============================================
$login_error = '';
$register_error = '';
$register_success = '';

// Handle Login
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['login'])) {
    $email = trim($_POST['email'] ?? '');
    $password = $_POST['password'] ?? '';
    
    if (empty($email) || empty($password)) {
        $login_error = 'Please enter both email and password';
    } else {
        // Check if email exists
        $stmt = $pdo->prepare("SELECT * FROM admins WHERE email = ? LIMIT 1");
        $stmt->execute([$email]);
        $admin = $stmt->fetch();
        
        if ($admin) {
            // Verify password
            if (password_verify($password, $admin['password'])) {
                if ($admin['status'] == 1) {
                    $_SESSION['admin_id'] = $admin['id'];
                    $_SESSION['admin_email'] = $admin['email'];
                    $_SESSION['admin_name'] = $admin['name'];
                    $_SESSION['admin_role'] = $admin['role'];
                    header("Location: dashboard.php");
                    exit;
                } else {
                    $login_error = 'Your account is deactivated';
                }
            } else {
                $login_error = 'Invalid password';
            }
        } else {
            $login_error = 'No account found with this email';
        }
    }
}

// Handle Registration
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['register'])) {
    $name = trim($_POST['name'] ?? '');
    $email = trim($_POST['email'] ?? '');
    $password = $_POST['password'] ?? '';
    $confirm_password = $_POST['confirm_password'] ?? '';
    
    $validationErrors = [];
    if (empty($name)) $validationErrors[] = 'Name is required';
    if (empty($email) || !filter_var($email, FILTER_VALIDATE_EMAIL)) $validationErrors[] = 'Valid email is required';
    if (empty($password)) $validationErrors[] = 'Password is required';
    if (strlen($password) < 6) $validationErrors[] = 'Password must be at least 6 characters';
    if ($password !== $confirm_password) $validationErrors[] = 'Passwords do not match';
    
    if (empty($validationErrors)) {
        $stmt = $pdo->prepare("SELECT id FROM admins WHERE email = ?");
        $stmt->execute([$email]);
        
        if ($stmt->fetch()) {
            $register_error = 'Email already registered';
        } else {
            $hashed_password = password_hash($password, PASSWORD_DEFAULT);
            $stmt = $pdo->prepare("INSERT INTO admins (name, email, password, role, status) VALUES (?, ?, ?, 'admin', 1)");
            
            if ($stmt->execute([$name, $email, $hashed_password])) {
                $register_success = "Registration successful! Please login.";
            } else {
                $register_error = "Registration failed. Please try again.";
            }
        }
    } else {
        $register_error = implode('<br>', $validationErrors);
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ETF Career - Complete Business Dashboard Solution</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
            min-height: 100vh;
            color: white;
        }
        
        .landing-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
        }
        
        /* Navigation */
        .landing-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 0;
            margin-bottom: 4rem;
        }
        
        .logo {
            font-size: 2rem;
            font-weight: bold;
            color: white;
            display: flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
        }
        
        .logo i {
            color: #ff6f00;
        }
        
        .logo:hover {
            opacity: 0.9;
        }
        
        .nav-buttons {
            display: flex;
            gap: 1rem;
            align-items: center;
        }
        
        .btn {
            padding: 0.8rem 2rem;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            font-size: 1rem;
            font-weight: 600;
            transition: all 0.3s;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            justify-content: center;
        }
        
        .btn-dashboard {
            background: #ff6f00;
            color: white;
            border: 2px solid #ff6f00;
        }
        
        .btn-dashboard:hover {
            background: #ff8f00;
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(255, 111, 0, 0.3);
        }
        
        .btn-login {
            background: transparent;
            color: white;
            border: 2px solid white;
        }
        
        .btn-login:hover {
            background: white;
            color: #283593;
        }
        
        .btn-register {
            background: #4CAF50;
            color: white;
            border: 2px solid #4CAF50;
        }
        
        .btn-register:hover {
            background: #45a049;
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(76, 175, 80, 0.3);
        }
        
        /* Hero Section */
        .hero-section {
            text-align: center;
            padding: 3rem 0;
            margin-bottom: 4rem;
        }
        
        .hero-section h1 {
            font-size: 3.5rem;
            margin-bottom: 1.5rem;
            line-height: 1.2;
        }
        
        .hero-section p {
            font-size: 1.3rem;
            max-width: 700px;
            margin: 0 auto 2rem;
            opacity: 0.9;
            line-height: 1.6;
        }
        
        .hero-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            margin-top: 2rem;
            flex-wrap: wrap;
        }
        
        /* Dashboard Preview */
        .dashboard-preview {
            margin: 4rem 0;
            text-align: center;
        }
        
        .dashboard-preview h2 {
            font-size: 2.2rem;
            margin-bottom: 1rem;
        }
        
        .preview-image {
            max-width: 100%;
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
            border: 5px solid rgba(255,255,255,0.1);
            margin: 2rem 0;
        }
        
        /* Features Grid */
        .features-section {
            margin: 4rem 0;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 3rem;
            font-size: 2.2rem;
        }
        
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-bottom: 3rem;
        }
        
        .feature-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 2rem;
            text-align: center;
            transition: transform 0.3s;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .feature-card:hover {
            transform: translateY(-10px);
            background: rgba(255, 255, 255, 0.15);
        }
        
        .feature-icon {
            font-size: 2.5rem;
            color: #ff6f00;
            margin-bottom: 1rem;
        }
        
        .feature-card h3 {
            margin-bottom: 1rem;
            font-size: 1.3rem;
        }
        
        .feature-card p {
            opacity: 0.8;
            line-height: 1.5;
        }
        
        /* Call to Action */
        .cta-section {
            text-align: center;
            padding: 4rem 0;
            margin: 4rem 0;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 20px;
        }
        
        .cta-section h2 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }
        
        .cta-section p {
            font-size: 1.2rem;
            max-width: 600px;
            margin: 0 auto 2rem;
            opacity: 0.9;
        }
        
        /* Auth Modal */
        .auth-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.8);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            padding: 1rem;
        }
        
        .auth-content {
            background: white;
            border-radius: 15px;
            width: 100%;
            max-width: 450px;
            overflow: hidden;
            color: #333;
            animation: modalSlide 0.3s ease;
        }
        
        @keyframes modalSlide {
            from { transform: translateY(-50px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        
        .auth-header {
            background: #283593;
            padding: 1.5rem;
            text-align: center;
            color: white;
        }
        
        .auth-header h2 {
            margin: 0;
        }
        
        .auth-body {
            padding: 2rem;
        }
        
        .auth-tabs {
            display: flex;
            margin-bottom: 1.5rem;
            border-bottom: 2px solid #eee;
        }
        
        .auth-tab {
            flex: 1;
            padding: 1rem;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 1rem;
            color: #666;
            font-weight: 500;
        }
        
        .auth-tab.active {
            color: #283593;
            border-bottom: 3px solid #283593;
        }
        
        .auth-form {
            display: none;
        }
        
        .auth-form.active {
            display: block;
        }
        
        .form-group {
            margin-bottom: 1.2rem;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            color: #555;
            font-weight: 500;
        }
        
        .form-control {
            width: 100%;
            padding: 0.8rem;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
            transition: border 0.3s;
        }
        
        .form-control:focus {
            outline: none;
            border-color: #283593;
        }
        
        .btn-auth {
            width: 100%;
            padding: 0.8rem;
            background: #283593;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.3s;
        }
        
        .btn-auth:hover {
            background: #1a237e;
        }
        
        .btn-close {
            position: absolute;
            top: 10px;
            right: 10px;
            background: none;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
        }
        
        .alert {
            padding: 1rem;
            border-radius: 5px;
            margin-bottom: 1rem;
        }
        
        .alert-success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .alert-danger {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .switch-text {
            text-align: center;
            margin-top: 1rem;
            color: #666;
        }
        
        .switch-text a {
            color: #283593;
            text-decoration: none;
            font-weight: 500;
        }
        
        .switch-text a:hover {
            text-decoration: underline;
        }
        
        .demo-credentials {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 5px;
            padding: 1rem;
            margin: 1rem 0;
            font-size: 0.9rem;
        }
        
        .demo-credentials h4 {
            margin-bottom: 0.5rem;
            color: #283593;
        }
        
        /* Dashboard Stats Preview */
        .stats-preview {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 1rem;
            margin: 2rem 0;
        }
        
        .stat-preview-card {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 1rem;
            text-align: center;
        }
        
        .stat-preview-number {
            font-size: 1.8rem;
            font-weight: bold;
            color: #ff6f00;
            margin-bottom: 0.5rem;
        }
        
        .stat-preview-label {
            font-size: 0.9rem;
            opacity: 0.8;
        }
        
        /* Footer */
        .footer {
            text-align: center;
            padding: 2rem 0;
            margin-top: 4rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.7);
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .landing-nav {
                flex-direction: column;
                gap: 1rem;
                margin-bottom: 2rem;
            }
            
            .nav-buttons {
                flex-wrap: wrap;
                justify-content: center;
            }
            
            .hero-section h1 {
                font-size: 2.5rem;
            }
            
            .hero-section p {
                font-size: 1.1rem;
            }
            
            .hero-buttons {
                flex-direction: column;
                align-items: center;
            }
            
            .btn {
                width: 100%;
                max-width: 300px;
            }
            
            .features-grid {
                grid-template-columns: 1fr;
            }
            
            .stats-preview {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (max-width: 480px) {
            .nav-buttons {
                flex-direction: column;
                width: 100%;
            }
            
            .btn {
                width: 100%;
            }
            
            .stats-preview {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="landing-container">
        <!-- Navigation -->
        <nav class="landing-nav">
            <a href="#" class="logo">
                <i class="fas fa-chart-line"></i>
                <span>ETF Career</span>
            </a>
            <div class="nav-buttons">
                <a href="#" class="btn btn-dashboard" onclick="showAuthModal('login')">
                    <i class="fas fa-tachometer-alt"></i>
                    Dashboard
                </a>
                <a href="#" class="btn btn-login" onclick="showAuthModal('login')">
                    <i class="fas fa-sign-in-alt"></i>
                    Login
                </a>
                <a href="#" class="btn btn-register" onclick="showAuthModal('register')">
                    <i class="fas fa-user-plus"></i>
                    Register
                </a>
            </div>
        </nav>
        
        <!-- Hero Section -->
        <div class="hero-section">
            <h1>Complete Business Dashboard Solution</h1>
            <p>Manage all your business operations in one powerful platform. Everything you need for modern business management with 17+ integrated features.</p>
            
            <div class="stats-preview">
                <div class="stat-preview-card">
                    <div class="stat-preview-number">17+</div>
                    <div class="stat-preview-label">Features</div>
                </div>
                <div class="stat-preview-card">
                    <div class="stat-preview-number">24/7</div>
                    <div class="stat-preview-label">Access</div>
                </div>
                <div class="stat-preview-card">
                    <div class="stat-preview-number">100%</div>
                    <div class="stat-preview-label">Secure</div>
                </div>
                <div class="stat-preview-card">
                    <div class="stat-preview-number">Free</div>
                    <div class="stat-preview-label">Forever Plan</div>
                </div>
            </div>
            
            <div class="hero-buttons">
                <a href="#" class="btn btn-dashboard" onclick="showAuthModal('register')">
                    <i class="fas fa-rocket"></i>
                    Get Started Free
                </a>
                <a href="#" class="btn btn-login" onclick="showAuthModal('login')">
                    <i class="fas fa-tachometer-alt"></i>
                    Go to Dashboard
                </a>
            </div>
        </div>
        
        <!-- Dashboard Preview -->
        <div class="dashboard-preview">
            <h2>Powerful Dashboard Interface</h2>
            <p>Experience the complete business management dashboard with all features at your fingertips.</p>
            <div class="preview-image">
                <!-- This would be an actual dashboard screenshot in production -->
                <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); height: 300px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem;">
                    <i class="fas fa-chart-line fa-3x"></i>
                    <div style="margin-left: 20px;">
                        <div>ETF Career Dashboard Preview</div>
                        <small>Real-time analytics & management</small>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Features Section -->
        <div class="features-section">
            <h2 class="section-title">All-in-One Platform Features</h2>
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-box"></i>
                    </div>
                    <h3>Product Management</h3>
                    <p>Manage inventory, categories, and product details with ease.</p>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-shopping-cart"></i>
                    </div>
                    <h3>Order Processing</h3>
                    <p>Handle orders, track status, and manage customer purchases.</p>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-credit-card"></i>
                    </div>
                    <h3>Payment Gateway</h3>
                    <p>Secure payment processing with multiple gateway support.</p>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-user-tie"></i>
                    </div>
                    <h3>HR & Payroll</h3>
                    <p>Employee management, payroll processing, and HR operations.</p>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <h3>Accounts</h3>
                    <p>Complete accounting and financial transaction tracking.</p>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-robot"></i>
                    </div>
                    <h3>AI Assistant</h3>
                    <p>Smart AI chat assistant for business intelligence.</p>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-ticket-alt"></i>
                    </div>
                    <h3>Support Tickets</h3>
                    <p>Customer support ticket management system.</p>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-chart-bar"></i>
                    </div>
                    <h3>Analytics & Reports</h3>
                    <p>Detailed business analytics and report generation.</p>
                </div>
            </div>
        </div>
        
        <!-- Call to Action -->
        <div class="cta-section">
            <h2>Ready to Transform Your Business?</h2>
            <p>Join thousands of businesses already using ETF Career Dashboard to manage their operations efficiently.</p>
            <div class="hero-buttons">
                <a href="#" class="btn btn-dashboard" onclick="showAuthModal('register')" style="padding: 1rem 3rem; font-size: 1.2rem;">
                    <i class="fas fa-rocket"></i>
                    Start Free Trial
                </a>
                <a href="#" class="btn btn-login" onclick="showAuthModal('login')" style="padding: 1rem 3rem; font-size: 1.2rem;">
                    <i class="fas fa-tachometer-alt"></i>
                    Access Dashboard
                </a>
            </div>
        </div>
        
        <!-- Footer -->
        <div class="footer">
            <p>&copy; <?php echo date('Y'); ?> ETF Career Dashboard. All rights reserved.</p>
            <p style="margin-top: 0.5rem;">Complete business management solution | <a href="#" style="color: #ff6f00; text-decoration: none;" onclick="showAuthModal('login')">Login</a> | <a href="#" style="color: #4CAF50; text-decoration: none;" onclick="showAuthModal('register')">Register</a></p>
        </div>
    </div>
    
    <!-- Auth Modal -->
    <div id="authModal" class="auth-modal">
        <div class="auth-content">
            <div class="auth-header">
                <h2 id="authModalTitle">Access Dashboard</h2>
                <button class="btn-close" onclick="closeAuthModal()">&times;</button>
            </div>
            
            <div class="auth-body">
                <div class="auth-tabs">
                    <button class="auth-tab active" onclick="showAuthForm('login')">Login to Dashboard</button>
                    <button class="auth-tab" onclick="showAuthForm('register')">Create Account</button>
                </div>
                
                <?php if ($login_error): ?>
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-circle"></i> <?php echo htmlspecialchars($login_error); ?>
                </div>
                <?php endif; ?>
                
                <?php if ($register_error): ?>
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-circle"></i> <?php echo htmlspecialchars($register_error); ?>
                </div>
                <?php endif; ?>
                
                <?php if ($register_success): ?>
                <div class="alert alert-success">
                    <i class="fas fa-check-circle"></i> <?php echo htmlspecialchars($register_success); ?>
                </div>
                <?php endif; ?>
                
                <!-- Login Form -->
                <form id="loginForm" class="auth-form active" method="POST">
                    <div class="demo-credentials">
                        <h4><i class="fas fa-key"></i> Demo Credentials:</h4>
                        <p><strong>Email:</strong> admin@etfcareer.org</p>
                        <p><strong>Password:</strong> admin123</p>
                    </div>
                    
                    <div class="form-group">
                        <label><i class="fas fa-envelope"></i> Email Address</label>
                        <input type="email" name="email" class="form-control" placeholder="Enter your email" value="admin@etfcareer.org" required>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-lock"></i> Password</label>
                        <input type="password" name="password" class="form-control" placeholder="Enter your password" value="admin123" required>
                    </div>
                    <button type="submit" name="login" class="btn-auth">
                        <i class="fas fa-sign-in-alt"></i> Login to Dashboard
                    </button>
                    <div class="switch-text">
                        Don't have an account? <a href="#" onclick="showAuthForm('register')">Create one here</a>
                    </div>
                </form>
                
                <!-- Register Form -->
                <form id="registerForm" class="auth-form" method="POST">
                    <input type="hidden" name="register" value="1">
                    <div class="demo-credentials">
                        <h4><i class="fas fa-info-circle"></i> Quick Registration</h4>
                        <p>Create your account in 30 seconds and access all features immediately.</p>
                    </div>
                    
                    <div class="form-group">
                        <label><i class="fas fa-user"></i> Full Name</label>
                        <input type="text" name="name" class="form-control" placeholder="Enter your full name" required>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-envelope"></i> Email Address</label>
                        <input type="email" name="email" class="form-control" placeholder="Enter your email" required>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-lock"></i> Password</label>
                        <input type="password" name="password" class="form-control" placeholder="Minimum 6 characters" required>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-lock"></i> Confirm Password</label>
                        <input type="password" name="confirm_password" class="form-control" placeholder="Confirm your password" required>
                    </div>
                    <button type="submit" class="btn-auth">
                        <i class="fas fa-user-plus"></i> Create Account & Continue to Dashboard
                    </button>
                    <div class="switch-text">
                        Already have an account? <a href="#" onclick="showAuthForm('login')">Login here</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <script>
        // Auth Modal Functions
        function showAuthModal(type) {
            const modal = document.getElementById('authModal');
            if (modal) {
                modal.style.display = 'flex';
                showAuthForm(type);
                
                // Add a class to body to prevent scrolling
                document.body.style.overflow = 'hidden';
            }
        }
        
        function closeAuthModal() {
            const modal = document.getElementById('authModal');
            if (modal) {
                modal.style.display = 'none';
                // Restore scrolling
                document.body.style.overflow = 'auto';
            }
        }
        
        function showAuthForm(type) {
            // Hide all forms
            document.querySelectorAll('.auth-form').forEach(form => {
                form.classList.remove('active');
            });
            
            // Remove active from all tabs
            document.querySelectorAll('.auth-tab').forEach(tab => {
                tab.classList.remove('active');
            });
            
            // Show selected form
            const form = document.getElementById(type + 'Form');
            if (form) {
                form.classList.add('active');
            }
            
            // Activate selected tab
            document.querySelectorAll('.auth-tab').forEach(tab => {
                if (tab.textContent.toLowerCase().includes(type) || 
                    (type === 'login' && tab.textContent.includes('Login')) ||
                    (type === 'register' && tab.textContent.includes('Create'))) {
                    tab.classList.add('active');
                }
            });
            
            // Update modal title
            const title = document.getElementById('authModalTitle');
            if (title) {
                title.textContent = type === 'login' ? 'Login to Dashboard' : 'Create New Account';
            }
        }
        
        // Close modal when clicking outside
        document.addEventListener('click', function(e) {
            if (e.target.classList.contains('auth-modal')) {
                closeAuthModal();
            }
        });
        
        // Close with Escape key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                closeAuthModal();
            }
        });
        
        // Auto-focus first input in modal when opened
        const authModal = document.getElementById('authModal');
        if (authModal) {
            authModal.addEventListener('shown', function() {
                const activeForm = document.querySelector('.auth-form.active');
                if (activeForm) {
                    const firstInput = activeForm.querySelector('input');
                    if (firstInput) firstInput.focus();
                }
            });
        }
        
        // Smooth scroll for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                }
            });
        });
        
        // Dashboard button animation
        document.addEventListener('DOMContentLoaded', function() {
            const dashboardButtons = document.querySelectorAll('.btn-dashboard');
            dashboardButtons.forEach(btn => {
                btn.addEventListener('mouseenter', function() {
                    this.style.transform = 'translateY(-5px) scale(1.05)';
                });
                btn.addEventListener('mouseleave', function() {
                    this.style.transform = 'translateY(0) scale(1)';
                });
            });
            
            // Add pulse animation to main CTA button
            const mainCTA = document.querySelector('.hero-buttons .btn-dashboard');
            if (mainCTA) {
                setInterval(() => {
                    mainCTA.style.boxShadow = '0 10px 30px rgba(255, 111, 0, 0.4)';
                    setTimeout(() => {
                        mainCTA.style.boxShadow = '0 10px 20px rgba(255, 111, 0, 0.3)';
                    }, 1000);
                }, 2000);
            }
        });
        
        // Auto-show login modal if there's an error
        <?php if ($login_error || $register_error): ?>
        window.onload = function() {
            showAuthModal('<?php echo $login_error ? "login" : "register"; ?>');
        };
        <?php endif; ?>
    </script>
</body>
</html>
Back to Directory=ceiIENDB`