<!DOCTYPE html>
<html lang="en">
        <style>
        /* Login Page Specific Styles */
        .login-hero {
            background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
            color: #fff;
            padding: 100px 0 60px;
            position: relative;
            overflow: unset;
        }
        .login-hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('assets/img/bg/slide2.jpg') center/cover no-repeat;
            opacity: 0.2;
            z-index: 1;
        }
        .login-hero .container {
            position: relative;
            z-index: 2;
        }
        .login-hero h1 {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 15px;
            color: #fff;
        }
        .login-hero p {
            font-size: 1.1rem;
            max-width: 700px;
            margin: 0 auto;
            opacity: 0.9;
        }
        .breadcrumb {
            background: transparent;
            justify-content: center;
            margin-bottom: 30px;
        }
        .breadcrumb-item a {
            color: #f7921a;
            text-decoration: none;
        }
        .breadcrumb-item.active {
            color: #fff;
        }
        .breadcrumb-item+.breadcrumb-item::before {
            color: #fff;
        }

        /* Login Content Section */
        .login-content {
            padding: 80px 0;
            background: #f9f9f9;
        }
        .login-container {
            background: #fff;
            border-radius: 12px;
            padding: 50px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
            max-width: 500px;
            margin: 0 auto;
        }
        .login-header {
            text-align: center;
            margin-bottom: 40px;
        }
        .login-header h2 {
            font-size: 2rem;
            font-weight: 700;
            color: #333;
            margin-bottom: 10px;
        }
        .login-header p {
            color: #666;
            font-size: 1rem;
        }
        .form-group {
            margin-bottom: 25px;
        }
        .form-label {
            font-weight: 600;
            color: #333;
            margin-bottom: 8px;
            display: block;
        }
        .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 1rem;
            transition: all 0.3s ease;
        }
        .form-control:focus {
            border-color: #f7921a;
            box-shadow: 0 0 0 2px rgba(247, 146, 26, 0.2);
            outline: none;
        }
        .password-input-container {
            position: relative;
        }
        .password-toggle {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: #777;
            cursor: pointer;
        }
        .remember-forgot {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
        }
        .remember-me {
            display: flex;
            align-items: center;
        }
        .remember-me input {
            margin-right: 8px;
        }
        .forgot-password {
            color: #f7921a;
            text-decoration: none;
            font-size: 0.9rem;
        }
        .forgot-password:hover {
            text-decoration: underline;
        }
        .login-btn {
            width: 100%;
            padding: 14px;
            background: #f7921a;
            color: #fff;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: 25px;
        }
        .login-btn:hover {
            background: #e07b00;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(247, 146, 26, 0.3);
        }
        .login-divider {
            text-align: center;
            position: relative;
            margin: 30px 0;
        }
        .login-divider::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 1px;
            background: #eee;
        }
        .login-divider span {
            background: #fff;
            padding: 0 15px;
            color: #777;
            font-size: 0.9rem;
        }
        .social-login {
            display: flex;
            gap: 15px;
            margin-bottom: 30px;
        }
        .social-btn {
            flex: 1;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .social-btn:hover {
            border-color: #f7921a;
            transform: translateY(-2px);
        }
        .social-btn.google {
            color: #DB4437;
        }
        .social-btn.apple {
            color: #000;
        }
        .register-link {
            text-align: center;
            margin-top: 20px;
        }
        .register-link a {
            color: #f7921a;
            text-decoration: none;
            font-weight: 600;
        }
        .register-link a:hover {
            text-decoration: underline;
        }
        .alert {
            padding: 12px 15px;
            border-radius: 8px;
            margin-bottom: 25px;
            display: none;
        }
        .alert-error {
            background: #ffe6e6;
            color: #d93025;
            border-left: 4px solid #d93025;
        }
        .alert-success {
            background: #e6f4ea;
            color: #137333;
            border-left: 4px solid #137333;
        }

        /* Back to Top Button */
        .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            background: #f7921a;
            color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            cursor: pointer;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            z-index: 1000;
            box-shadow: 0 4px 12px rgba(247, 146, 26, 0.3);
        }
        .back-to-top.visible {
            opacity: 1;
            visibility: visible;
        }
        .back-to-top:hover {
            background: #e07b00;
            transform: translateY(-3px);
        }

        /* Responsive Adjustments */
        @media (max-width: 768px) {
            .login-hero h1 {
                font-size: 2.2rem;
            }
            .login-container {
                padding: 30px 20px;
            }
            .social-login {
                flex-direction: column;
            }
            .back-to-top {
                bottom: 20px;
                right: 20px;
                width: 45px;
                height: 45px;
            }
        }

        @media (max-width: 576px) {
            .login-hero {
                padding: 80px 0 40px;
            }
            .login-content {
                padding: 60px 0;
            }
            .login-container {
                padding: 25px 15px;
            }
            .remember-forgot {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }
        }
    </style>
<?php 
    require_once('inc/head.php');
?>

<body class="home-4">
    
    
      <?php 
    require_once('inc/preloader.php');
    ?>
  <?php 
    require_once('inc/ticker.php');
    ?>

  <?php 
    require_once('inc/header.php');
?>


    <!-- START LOGIN HERO SECTION -->
    <section class="login-hero">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Login</li>
                        </ol>
                    </nav>
                    <h1 data-aos="fade-down" data-aos-duration="1000">Welcome Back</h1>
                    <p data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200">
                        Sign in to your Speedbitplus account to access your portfolio and trading tools.
                    </p>
                </div>
            </div>
        </div>
    </section>
    <!-- END LOGIN HERO SECTION -->

    <!-- START LOGIN CONTENT SECTION -->
    <section class="login-content">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-5 col-lg-6 col-md-8 col-12">
                    <div class="login-container" data-aos="fade-up" data-aos-duration="1000">
                        <div class="login-header">
                            <h2>Sign In</h2>
                            <p>Enter your credentials to access your account</p>
                        </div>

                        <!-- Error/Success Alert -->
                        <div class="alert alert-error" id="errorAlert">
                            Invalid email or password. Please try again.
                        </div>
                        <div class="alert alert-success" id="successAlert">
                            Login successful! Redirecting...
                        </div>

 <?php if(isset($_SESSION['user_verified']) && ($_SESSION['user_verified']==true)){ ?>
         <div class="alert alert-success" id="successAlert">
                              <h4>Email address verified..You can now login to your dashboard
            <center><a href="login.php"> <button class="btn btn-primary">Goto Login -></button> </a></center>
        </h4>
           </div>
      
</div>	
    
    <?php } ?>

                        <form id="loginForm">
                            <div class="form-group">
                                <label for="email" class="form-label">Email Address</label>
                                <input type="email" class="form-control" id="email" name="email" placeholder="Enter your email" required>
                            </div>

                            <div class="form-group">
                                <label for="password" class="form-label">Password</label>
                                <div class="password-input-container">
                                    <input type="password" class="form-control" id="password" name="password" placeholder="Enter your password" required>
                                    <button type="button" class="password-toggle" id="passwordToggle">
                                        <i class="fa fa-eye"></i>
                                    </button>
                                </div>
                            </div>

                            <div class="remember-forgot">
                                <div class="remember-me">
                                    <input type="checkbox" id="remember" name="remember">
                                    <label for="remember">Remember me</label>
                                </div>
                                <a href="forgot-password.html" class="forgot-password">Forgot Password?</a>
                            </div>

                            <button type="submit" class="login-btn">Sign In</button>
                        </form>

                        <!--<div class="login-divider">-->
                        <!--    <span>Or continue with</span>-->
                        <!--</div>-->

                        <!--<div class="social-login">-->
                        <!--    <button class="social-btn google">-->
                        <!--        <i class="fab fa-google"></i>-->
                        <!--        <span>Google</span>-->
                        <!--    </button>-->
                        <!--    <button class="social-btn apple">-->
                        <!--        <i class="fab fa-apple"></i>-->
                        <!--        <span>Apple</span>-->
                        <!--    </button>-->
                        <!--</div>-->

                        <div class="register-link">
                            <p>Don't have an account? <a href="register.html">Create one now</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- END LOGIN CONTENT SECTION -->

    <!-- Back to Top Button -->
    <div class="back-to-top" id="backToTop">
        <i class="fa fa-chevron-up"></i>
    </div>

   	 <?php 
    require_once('inc/footer.php');
    ?>	
    <!-- END FOOTER -->

 	 <?php 
    require_once('incx/script.php');
    ?>	
 
    
    <!-- Custom Scripts for Login Page -->
    	 <?php 
    require_once('incx/ticker.php');
    ?>	
	
	
  <?php 
    require_once('incx/preloader.php');
    ?>
    
    <script>
        $(document).ready(function(){
            // Initialize AOS
            AOS.init();

       

            // Back to Top Button
            const backToTopButton = $('#backToTop');
            
            $(window).scroll(function() {
                if ($(window).scrollTop() > 300) {
                    backToTopButton.addClass('visible');
                } else {
                    backToTopButton.removeClass('visible');
                }
            });
            
            backToTopButton.click(function() {
                $('html, body').animate({ scrollTop: 0 }, 800);
                return false;
            });

            // Password Toggle Visibility
            $('#passwordToggle').click(function() {
                const passwordInput = $('#password');
                const type = passwordInput.attr('type') === 'password' ? 'text' : 'password';
                passwordInput.attr('type', type);
                
                // Toggle eye icon
                $(this).find('i').toggleClass('fa-eye fa-eye-slash');
            });

            // Form Submission
            $('#loginForm').submit(function(e) {
                e.preventDefault();
                
                // Get form values
                const email = $('#email').val();
                const password = $('#password').val();
                const remember = $('#remember').is(':checked');
                
                // Simple validation
                if (!email || !password) {
                    showAlert('error', 'Please fill in all fields.');
                    return;
                }
                
                // Email validation
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!emailRegex.test(email)) {
                    showAlert('error', 'Please enter a valid email address.');
                    return;
                }
                
                // Simulate login process (replace with actual API call)
                simulateLogin(email, password, remember);
            });

            // Show alert message
            function showAlert(type, message) {
                const errorAlert = $('#errorAlert');
                const successAlert = $('#successAlert');
                
                if (type === 'error') {
                    errorAlert.text(message);
                    errorAlert.show();
                    successAlert.hide();
                } else {
                    successAlert.text(message);
                    successAlert.show();
                    errorAlert.hide();
                }
                
                // Auto hide after 5 seconds
                setTimeout(() => {
                    $('.alert').hide();
                }, 5000);
            }

            // Simulate login process
            function simulateLogin(email, password, remember) {
                // Show loading state
                const loginBtn = $('.login-btn');
                const originalText = loginBtn.text();
                loginBtn.html('<i class="fa fa-spinner fa-spin"></i> Signing In...');
                loginBtn.prop('disabled', true);
                
                
                $.post('/php/login.php',{
                    email:email, 
                    password:password,
                    remember:remember
                },function(r){
                    if(r.success){
                         showAlert('success', 'Login successful! Redirecting to your dashboard...');
                       
                         setTimeout(() => {
                            window.location.href=r.data.redirect;
                        }, 2000);
                        
                    }else{
                        loginBtn.text(originalText);
                        loginBtn.prop('disabled', false);
                        showAlert('error', r.message);
                    }
                })
                
            }

            // // Social login buttons
            // $('.social-btn.google').click(function() {
            //     alert('Google login would be implemented here.');
            // });
            
            // $('.social-btn.apple').click(function() {
            //     alert('Apple login would be implemented here.');
            // });


        });
    </script>
            <script src="assets/js/scripts.js"></script>

</body>
</html>