<!DOCTYPE html>
<html lang="en">

<?php include 'includes/styles.php'; ?>
<title>Portal Tutorials | School Portal Nigeria | Empowering Schools</title>

<body>
<?php include 'includes/header.php';?>

<section class="hero">
    <h1 data-aos="fade-up">Portal tutorials</h1>
    <p data-aos="fade-up" data-aos-delay="100">On this page you will find comprehensive videos that will help you understand how to use the different features of School Portal.</p>
</section>

<!-- start show available portal tutorial videos -->
<section class="tutorial-section">
    <h2 data-aos="fade-up">Software Installation</h2>
    
    <div class="tutorial-container">
        <div class="tutorial-column" data-aos="fade-up" data-aos-delay="100">
            <div class="tutorial-item" onclick="openModal('Installing the Application', 'Learn how to install the School Portal application on your server.', 'https://www.youtube.com/embed/example1')">
                <h3>Installing the Application</h3>
                <p>Learn how to install the School Portal application on your server.</p>
                <div class="video-wrapper">
                    <div class="video-overlay"></div>
                    <iframe src="https://www.youtube.com/embed/example1" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
            
            <div class="tutorial-item" onclick="openModal('Database Configuration', 'Step-by-step guide to configure your database settings.', 'https://www.youtube.com/embed/example2')">
                <h3>Database Configuration</h3>
                <p>Step-by-step guide to configure your database settings.</p>
                <div class="video-wrapper">
                    <div class="video-overlay"></div>
                    <iframe src="https://www.youtube.com/embed/example2" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
            
            <div class="tutorial-item" onclick="openModal('User Account Setup', 'Creating and managing user accounts for different roles.', 'https://www.youtube.com/embed/example3')">
                <h3>User Account Setup</h3>
                <p>Creating and managing user accounts for different roles.</p>
                <div class="video-wrapper">
                    <div class="video-overlay"></div>
                    <iframe src="https://www.youtube.com/embed/example3" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
            
            <div class="tutorial-item" onclick="openModal('System Settings Configuration', 'Configuring system-wide settings for optimal performance.', 'https://www.youtube.com/embed/example4')">
                <h3>System Settings Configuration</h3>
                <p>Configuring system-wide settings for optimal performance.</p>
                <div class="video-wrapper">
                    <div class="video-overlay"></div>
                    <iframe src="https://www.youtube.com/embed/example4" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
        </div>
        
        <div class="tutorial-column" data-aos="fade-up" data-aos-delay="200">
            <div class="tutorial-item" onclick="openModal('Admin Panel Overview', 'Complete walkthrough of the admin panel features and options.', 'https://www.youtube.com/embed/example5')">
                <h3>Admin Panel Overview</h3>
                <p>Complete walkthrough of the admin panel features and options.</p>
                <div class="video-wrapper">
                    <div class="video-overlay"></div>
                    <iframe src="https://www.youtube.com/embed/example5" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
            
            <div class="tutorial-item" onclick="openModal('Managing Classes and Sections', 'How to create and organize classes and sections in the system.', 'https://www.youtube.com/embed/example6')">
                <h3>Managing Classes and Sections</h3>
                <p>How to create and organize classes and sections in the system.</p>
                <div class="video-wrapper">
                    <div class="video-overlay"></div>
                    <iframe src="https://www.youtube.com/embed/example6" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
            
            <div class="tutorial-item" onclick="openModal('Subject Management', 'Creating and assigning subjects to classes and teachers.', 'https://www.youtube.com/embed/example7')">
                <h3>Subject Management</h3>
                <p>Creating and assigning subjects to classes and teachers.</p>
                <div class="video-wrapper">
                    <div class="video-overlay"></div>
                    <iframe src="https://www.youtube.com/embed/example7" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
            
            <div class="tutorial-item" onclick="openModal('Student Enrollment Process', 'Step-by-step guide to enrolling new students in the system.', 'https://www.youtube.com/embed/example8')">
                <h3>Student Enrollment Process</h3>
                <p>Step-by-step guide to enrolling new students in the system.</p>
                <div class="video-wrapper">
                    <div class="video-overlay"></div>
                    <iframe src="https://www.youtube.com/embed/example8" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
        </div>
        
        <div class="tutorial-column" data-aos="fade-up" data-aos-delay="300">
            <div class="tutorial-item" onclick="openModal('Teacher Account Management', 'Creating and managing teacher accounts and their privileges.', 'https://www.youtube.com/embed/example9')">
                <h3>Teacher Account Management</h3>
                <p>Creating and managing teacher accounts and their privileges.</p>
                <div class="video-wrapper">
                    <div class="video-overlay"></div>
                    <iframe src="https://www.youtube.com/embed/example9" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
            
            <div class="tutorial-item" onclick="openModal('Result Processing', 'How to input, calculate, and manage student results.', 'https://www.youtube.com/embed/example10')">
                <h3>Result Processing</h3>
                <p>How to input, calculate, and manage student results.</p>
                <div class="video-wrapper">
                    <div class="video-overlay"></div>
                    <iframe src="https://www.youtube.com/embed/example10" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
            
            <div class="tutorial-item" onclick="openModal('CBT Exam Setup', 'Creating and managing computer-based tests in the system.', 'https://www.youtube.com/embed/example11')">
                <h3>CBT Exam Setup</h3>
                <p>Creating and managing computer-based tests in the system.</p>
                <div class="video-wrapper">
                    <div class="video-overlay"></div>
                    <iframe src="https://www.youtube.com/embed/example11" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
            
            <div class="tutorial-item" onclick="openModal('Generating Reports', 'How to generate and customize student and class reports.', 'https://www.youtube.com/embed/example12')">
                <h3>Generating Reports</h3>
                <p>How to generate and customize student and class reports.</p>
                <div class="video-wrapper">
                    <div class="video-overlay"></div>
                    <iframe src="https://www.youtube.com/embed/example12" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- end show available portal tutorial videos -->

<!-- Video Modal -->
<div id="videoModal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal()">&times;</span>
        <h3 id="modalTitle"></h3>
        <p id="modalDescription"></p>
        <div class="modal-video-wrapper">
            <iframe id="modalVideo" src="" frameborder="0" allowfullscreen></iframe>
        </div>
    </div>
</div>

<div class="whatsapp-float" onclick="window.open('https://wa.me/2348106405712', '_blank')">
    <i class="fab fa-whatsapp"></i>
</div>

<?php include 'includes/footer.php'; ?>
</body>

</html>