<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
        <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>ipeqi</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Favicon -->
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <!-- Bootstrap 5 (CSS) -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">

    <!-- Modernizr (optional, can be removed if not needed) -->
      <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/bootstrap-responsive.min.css">
        <link rel="stylesheet" href="css/main.css">
    <script src="js/vendor/modernizr-2.6.2.min.js"></script>

    <style>
        /* Parallax container styling */
        #parallax-container {
            position: relative;
            width: 100%;
            height: 500px; /* adjust as needed */
            overflow: hidden;
        }
        #parallax-container > div {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="main_controller" class="container main-page bg-blue">

        <!-- Normal page content -->
        <?php // include('views/pagestructure.php'); ?>

        <!-- Layers and plants (your PHP content still loads here) -->
        <?php include('views/controller.php'); ?>

        <!-- Example parallax container -->
        <div id="parallax-container">
            <div data-depth="0.2">Layer 1</div>
            <div data-depth="0.6">Layer 2</div>
            <div data-depth="1.0">Layer 3</div>
        </div>

    </div><!-- #main_controller -->

    <!-- jQuery (latest version over HTTPS) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" defer></script>

    <!-- Bootstrap 5 (JS bundle includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" defer></script>

    <!-- Other JS plugins -->
    <script src="js/plugins.js" defer></script>
    <script src="js/main.js" defer></script>

    <!-- Parallax.js -->
    <script src="https://cdn.jsdelivr.net/npm/parallax-js@3.1.0/dist/parallax.min.js"></script>

    <!-- Page-specific script -->
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Init Parallax.js
            var scene = document.getElementById('parallax-container');
            if (scene) {
                var parallaxInstance = new Parallax(scene, {
                    relativeInput: true,
                    hoverOnly: true,
                    scalarY: 0,   // disable vertical movement
                    scalarX: 20   // adjust horizontal sensitivity
                });
            }

            // Bootstrap popovers for plants
            $('.plant').popover({
                animation: true,
                trigger: 'hover'
            });
        });
    </script>
</body>
</html>