<?php
$domain = '/kuai/';
?>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Khalifa University AI Hub</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
        <meta name="viewport" content= "width=device-width, initial-scale=1.0"> 
        <link rel="shortcut icon" href="assets/img/favicon.png">

        <!--fonts-->

        <!--styles--> 
        <link href="<?= $domain ?>assets/scss/reset_css.css?v=1.0" type="text/css"  rel="stylesheet"/>
        <link href="<?= $domain ?>assets/scss/style.css?v=2.01" type="text/css" rel="stylesheet"/>
        <link href="<?= $domain ?>assets/scss/responsive/style-responsive.css?v=3.0" type="text/css" rel="stylesheet"/>

        <!-- Include the jQuery library (local or CDN) -->
        <script src="<?= $domain ?>assets/js/jquery-latest.min.js"></script>


        <link rel="stylesheet" href="<?= $domain ?>assets/plugins/owlcarousel/assets/owl.carousel.min.css">
        <link rel="stylesheet" href="<?= $domain ?>assets/plugins/owlcarousel/assets/owl.theme.default.min.css">

        <script src="<?= $domain ?>assets/plugins/owlcarousel/owl.carousel.min.js"></script> 
        <?php
        if ($page !== 'home') {
            ?>        
            <link type="text/css" rel="Stylesheet" href="<?= $domain ?>assets/scss/inside.css" />
            <link href="<?= $domain ?>assets/scss/responsive/inside-responsive.css?v=1.0" type="text/css" rel="stylesheet"/>
            <?php
        }
        ?>


    </head>  
    <body id="<?php echo $page; ?>-page" class="<?php echo($page !== 'home') ? 'inside ' : ''; ?>">

        <div class="slide-menu" id="slide-menu">
            <ul>
                <li><a href="#Why-ku">Why KU</a></li>        	        		 	
                <li><a href="#Programs">Programs</a></li>        	        		 	
                <li><a href="#Projects">Projects</a></li> 	          	        		 	
                <li><a href="#Partners">Partners</a></li>
                <li><a href="#News">News</a></li>
                <li><a href="#Governance">Governance</a></li>
                <!--<li><a href="#Resources">Resources</a></li>-->  
            </ul>
        </div>
        <script>
            $(document).ready(function () {
                $('#toggle-menu').click(function () {
                    $(this).toggleClass('active');
                    $('#slide-menu').toggleClass('active');
                });

                $('.slide-menu > ul > li.has-sub .tab').on('click', function () {
                    $(this).siblings('.sub-menu').slideToggle();
                    $(this).parent('li').toggleClass('active');
                });

                $('.sub-menu li.has-sub').click(function () {
                    $(this).children('ul').slideToggle();
                    $(this).toggleClass('active');
                });
            });
        </script>