index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-175675890-1"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'UA-175675890-1');
    </script>
    
    <meta charset="utf-8">
    <meta name="description" content="AliceVision is a Photogrammetric Computer Vision framework for 3D Reconstruction and Camera Tracking."/>
    <meta name="keywords" content="AliceVision,Meshroom,Computer Vision,Photogrammetry,Photogrammetric Computer Vision,3D Reconstruction,Camera Tracking,HDR,Panorama,Library,Software,Application,Open Source"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>AliceVision | Photogrammetric Computer Vision Framework</title>
    <link rel="shortcut icon" type="image/x-icon" href="img/icon.png" />
    <!-- css -->
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" type="text/css">

  </head>
  <body>
    <!-- navigation -->
    <nav id="component_navigation" class="navbar navbar-default navbar-fixed-top pmd-navbar"></nav>
    <!-- page content -->
    <div id="view">
      <section class="white_panel">
        <div class="container">
          <div class="row">
            <div class="col-md-6 col-md-offset-3">
              <h1 class="text-center strong_margin">Loading...</h1>
            </div>
          </div>
        </div>
      </section>
    </div>
    <!-- footer -->
    <footer id="component_footer"></footer>
    <!-- JQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Bootstrap js -->
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <!-- Owl carousel js -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
    <!-- Propeller js -->
    <script type="text/javascript" src="js/propeller.min.js"></script>
    <!-- Router & Components -->
    <script type="text/javascript">

    // simple router
    window.router = new function() {
        this.routes = [];
        this.hash = "";

        this.naviguate = function() {
            this.hash = window.location.hash.substr(1).split("/");

            if(this.hash[0] in this.routes)
                this.routes[this.hash[0]]();
            else
                $("#view").load("./view/home.html");

            // restart propeller ripple effect
            $(".pmd-ripple-effect").on("mousedown touchstart",function(a){var b=$(this);$(".ink").remove(),0===b.find(".ink").length&&b.append("<span class='ink'></span>");var c=b.find(".ink");if(c.removeClass("animate"),!c.height()&&!c.width()){var d=Math.max(b.outerWidth(),b.outerHeight());c.css({height:d,width:d})}var e=a.pageX-b.offset().left-c.width()/2,f=a.pageY-b.offset().top-c.height()/2;c.css({top:f+"px",left:e+"px"}).addClass("animate"),setTimeout(function(){c.remove()},1500)});
            $(document).scrollTop(0);

            // same page link
            window.setTimeout(function() {
                $(".ref_link").click(function () {
                    $ref = $(this.getAttribute("data-ref"));
                    $parent = $ref.parent().addClass("transition current");
                    window.setTimeout(function() { $parent.removeClass("current"); }, 2000);
                    $('html, body').animate({ scrollTop: $ref.offset().top - 100 }, 1000);
                })
            }, 500);
        }

        this.add_route = function(route, action) {
            this.routes[route] = action;
        }

        this.get_route_params = function(level) {
            return this.hash[level];
        }
    };

    // routes
    window.router.add_route('', function () {
        $("#view").load("./view/home.html");
        document.title  = "AliceVision | Photogrammetric Computer Vision Framework";
    });

    window.router.add_route('meshroom', function () {
        $("#view").load("view/meshroom.html");
        document.title  = "AliceVision | Meshroom - 3D Reconstruction Software";
    });

    window.router.add_route('photogrammetry', function () {
        $("#view").load("view/photogrammetry.html");
        document.title  = "AliceVision | Photogrammetry Pipeline";
    });

    window.router.add_route('history', function () {
        $("#view").load("view/history.html");
        document.title  = "AliceVision | Photogrammetry History";
    });
    window.router.add_route('results', function () {
        $("#view").load("view/results.html");
        document.title  = "AliceVision | Framework Results";
    });
    window.router.add_route('contributing', function () {
      $("#view").load("view/contributing.html");
      document.title  = "AliceVision | Contributing";
    });
    window.router.add_route('about', function () {
        $("#view").load("view/about.html");
        document.title  = "AliceVision | About";
    });


    $(window).bind('hashchange',  function () {
        window.router.naviguate();
    });

    window.router.naviguate();

    // load page components
    $("#component_navigation").load("./component/nav.html");
    $("#component_footer").load("./component/footer.html");

    </script>
  </body>
</html>