index.html

<!doctype html> 
<html lang="en">
  <head> 
    <!-- PWA META -->
    <link rel="manifest" href="manifest.json">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- iPhone(first generation or 2G), iPhone 3G, iPhone 3GS -->
  	<link rel="apple-touch-icon" sizes="57x57" href="img/touch-icon-iphone.png">
  	<!-- iPad and iPad mini @1x -->
  	<link rel="apple-touch-icon" sizes="76x76" href="img/touch-icon-ipad.png">
  	<!-- iPhone 4, iPhone 4s, iPhone 5, iPhone 5c, iPhone 5s, iPhone 6, iPhone 6s, iPhone 7, iPhone 7s, iPhone8 -->
  	<link rel="apple-touch-icon" sizes="120x120" href="img/touch-icon-iphone-retina.png">
  	<!-- iPad and iPad mini @2x -->
  	<link rel="apple-touch-icon" sizes="152x152" href="img/touch-icon-ipad-retina.png">
  	<!-- iPad Pro -->
  	<link rel="apple-touch-icon" sizes="167x167" href="img/  touch-icon-ipad-pro.png">
  	<!-- iPhone X, iPhone 8 Plus, iPhone 7 Plus, iPhone 6s Plus, iPhone 6 Plus -->
  	<link rel="apple-touch-icon" sizes="180x180" href="img/touch-icon-iphone-6-plus.png">
  	<!-- Android Devices High Resolution -->
  	<link rel="icon" sizes="192x192" href="img/icon-hd.png">
  	<!-- Android Devices Normal Resolution -->
  	<link rel="icon" sizes="128x128" href="img/icon.png">
  	<!-- Favicon for browsers -->
    <link rel="shortcut icon" href="img/favico.ico">
    <!-- Splashscreen 
    <link href="img/splash_750.png" sizes="750x1334" rel="apple-touch-startup-image" />-->
    <!-- OTHER META -->
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta content="utf-8" http-equiv="encoding">
    <meta name="Koen D. Berends" contents>
    <!-- disable caching. replace with service workr later -->
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    

    <title>River intervention explorer</title>

    <!-- GOOGLE FONTS -->
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> 
    <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Oswald:200" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
     
    <!-- EXTERNAL STYLE SHEETS-->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
          integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
          crossorigin=""/> 
    <link rel="stylesheet" type="text/css" href="css/thirdparty/leaflet-velocity.css"/>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/flick/jquery-ui.css">

    
    <!-- LOCAL STYLE SHEETS-->
    <link rel="stylesheet" type="text/css" href="css/dark-theme.css" id="theme_css"/>
    <link rel="stylesheet" type="text/css" href="css/explore.css"/>
    <link rel="stylesheet" type="text/css" href="css/flatslider.css"/>
    <link rel="stylesheet" type="text/css" href="css/steadyflow.css"/>
    <link rel="stylesheet" type="text/css" href="css/ui.css"/>
    <link rel="stylesheet" type="text/css" href="css/map.css"/>
    <link rel="stylesheet" type="text/css" href="css/thirdparty/perfect-scrollbar.css"/>
  </head>


<body> 

  <!-- Loader --> 
  <div id="loader-wrapper">
    <div id="welcometext">
      
      <!--<a id=startapp href="#"> Start here!</a>-->

    </div>
    <div id="loadtext"></div>
    <div id="loader"></div>
    <img id="loadlogo" onclick="location.reload();" src="img/rivercarelogo_grey.svg">
    <div class="loader-section section-left"></div>
    <div class="loader-section section-right"></div>
  </div>

  <!-- Banner
  <div id="banner">
    <img id="bannerbackground" src="img/popup_background.svg">
    <div id="summary">
      Human intervention in rivers is increasingly supported by computer model predictions. Due to limited observations of extreme events and the challenges related to predicting the future, it is recommended to quantify the uncertainty of model predictions. However, this is is not done in practice as the computational costs for such computations are often prohibitative. It is therefore unknown how model uncertainty affects model predictions of human intervention, even though human intervention in rivers has a large impact on society and the environment. The aim of this thesis is to improve the understanding of uncertainty surrounding model predictions of effect studies. We approached this as follows.
    First, we developed a method to significantly decrease the computational burden of uncertainty quantification (80%-95% in our case studies). Second, we quantified the uncertainty of archetypical spatial interventions and demonstrated that the uncertainty (expressed as the 90% confidence interval) of the effect is between 20% to 40% of the mean effect. So, for an intervention with a average water level decrease of 20 cm, 90% percent of model simulations will be between 17 cm and 23 cm. Next, we studied whether calibration could potentially mitigate the sources of uncertainty. Results showed that this was not the case; in fact, we showed that errors in model assumptions (such as a too simplistic vegetation model) increase uncertainty. Finally we compare model simulations with thirty years of hydraulic observations. Results showed that the uncertainty in observations are too great to discern the effect of human intervention. The accuracy of model simulations could therefore not independently be verified.
    The recommended approach going forward is to explicitly quantify and communicate the uncertainty of model predictions. The methods and insights developed in this thesis contribute toward this goal.
      
    </div>
  </div> -->

  <!-- Background map -->
  <div id="map" class="map"></div>   

  <!-- Main content-->
  <main class="container overlay">
    <!-- NAVIGATION -->
  	<nav role="navigation">
  	  	<div id="menuToggle">
  		    <input id="hiddenmenucheckbox" type="checkbox">
  		    <!-- Hamburger spans  -->
  		    <span></span>
  		    <span></span>
  		    <span></span>
        </div>
  	</nav>
    <!-- app navigator -->
    <div id="appnavigation">
      <span id="app-story"><i class="fas fa-book-reader"></i></span>
      <!--<span id="app-explore"><i class="fas fa-compass"></i></span>-->
      <span id="app-article"><i class="fas fa-graduation-cap"></i></span>
      <span id="app-info"><i class="fas fa-info"></i></span>
      <span id="app-settings"><a target=”_blank” href="https://kbase.ncr-web.org/rivercare"><img src="img/favico.ico"/></a></span>
    </div>

    <!-- Map Controls -->
    <div id="MapTopbar">
      <div id="AppTitle">RIVER INTERVENTION EXPLORER</div>
      <div id="MapTopBarBackground"></div>
      <div id="MapTopFlexUI">
        <div id="Scenarioselector">
          <div class='cssmenu'>
            <ul>
               <li class='has-sub'><a id="MenuCurrentIntervention" href='#'>Choose intervention</a>
                  <ul>
                     <li class='no-sub'><a id="exploreShowReference" class="str_ref" href='#'>No Intervention</a></li>
                     <li class='no-sub'><a id="exploreShowSmooth" class="str_smooth" href='#'>Mowing floodplains</a></li>
                     <li class='no-sub'><a id="exploreShowRelo" class="str_relo" href='#'>Dike relocation</a></li>
                     <li class='no-sub'><a id="exploreShowGroynlow" class="str_groynlow" href='#'>Groyne lowering</a></li>
                     <li class='no-sub'><a id="exploreShowMinemblow" class="str_minemblow" href='#'>Embankment lowering</a></li>
                     <li class='no-sub'><a id="exploreShowSidechan" class="str_sidechan" href='#'>Side channels</a></li>
                     <li class='no-sub'><a id="exploreShowFlplow" class="str_flplow" href='#'>Floodplain lowering</a></li>
                  </ul>
               </li>
            </ul>
          </div>
        </div>
        <div id="MapButtons">
          <div class='map-ui-button' id='MapZoom'><i class="fas fa-search-plus"></i></div>
          <div class='map-ui-button' id='MapTheme'><i class="fas fa-adjust"></i></div>
          <div class='map-ui-button' id='MapLang'><img class='storycanvasimage' src="img/flag_english.svg"/></div>
        </div>
      </div>
    </div>

    <!-- Main UI elements -->
    <div id='leftbar'>

      <!-- The map clone -->
      
      <div id="map_clone" class="clonemap"></div>
      <div id="glass_leftbar" class="glass"></div>
      <!-- Glass effect -->
      
        
        <!-- Explore app -->
        <div id="ExplorePanel" class='panel'>
          <div><svg id="ExploreCanvas" class='canvas'></svg></div>
          
          <div id="ExploreScroll" class='scroll textframe'>
            <div id="vis"></div>
              <div id='InterventionDescription'></div>
          </div>
        </div> <!-- /explorepanel -->

        <!-- Flow app -->
        <div id="FlowPanel" class='panel'>
          <div><svg id="FlowCanvas" class='canvas'></svg></div>
  	    </div>

      <!-- Story app -->     
      <div id="StoryPanel" class='panel'>
        <div id="StoryCanvas" class='canvas' style="font-size:144px; text-align:center;">
          <img class='storycanvasimage' src="img/waal_outline_withandries.svg"/>
        </div>
        
        <div id="StoryOptions">
          <div id="StoryProgress">
          <div class='progress-inside'></div>
        </div>
            <i id="buttonStoryPrevious" class="fas fa-step-backward"></i>
            <i id="buttonStoryReset" class="fas fa-fast-backward"></i>
            <i id="buttonStoryOverview" class="fas fa-home"></i>
            <i id="buttonStoryNext" class="fas fa-step-forward"></i>
        </div>
        <div id="StoryOverview" class='storytext'></div>
        <div id="StoryScroll">
          <div id="StoryFrame">

            <div id="StoryCarousel"></div> 
          </div> 
        </div>
      </div>

      <!-- About app -->
      <div id='AboutPanel' class='panel'>
      	<div id="AboutContent">
          </div>
      </div> <!-- about -->

      <!-- Special app -->
      <div id='SpecialPanel' class='panel'>
        <div id="SpecialContent">
        </div>
      </div> <!-- Special -->

      <!-- Paper app -->
      <div id="PaperPanel" class='panel'>
        <div id="PaperContent"></div>
      </div> 
    </div> <!-- leftbar-->
  </main>

  <!-- FOOTER -->

  <div id='version-number-box'>
    <span id="version-number-ui"> Bladieblabla </span>
    <span id="version-number-map"> Bladieblabla </span>
    <span id="version-number-flow"> Bladieblabla </span>
    <span id="version-number-explore"> Bladieblabla </span>
  </div>
  <footer>
      <img src="img/footerlogo.svg" class="logo-footer">
  </footer>


<!-- TMP-->

<!-- LOAD THIRDPARTY JS -->
<script type='text/javascript' src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type='text/javascript' src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script type='text/javascript' src="js/thirdparty/jquery-ui-slider-pips.js"></script>
<script type='text/javascript' src="js/thirdparty/jquery.ui.touch-punch.min.js"></script>
<script type='text/javascript' src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
<script type='text/javascript' src="js/thirdparty/leaflet-velocity.js"></script>
<script type='text/javascript' src="js/thirdparty/L.Map.Sync.js"></script>
<script type='text/javascript' src="js/thirdparty/d3.js"></script>
<script type='text/javascript' src="https://d3js.org/d3-timer.v1.min.js"></script>
<script type='text/javascript' src="js/thirdparty/perfect-scrollbar.js"></script>
<script type='text/javascript' src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script>
<script type='text/javascript' src="https://unpkg.com/tooltip.js/dist/umd/tooltip.min.js"></script>

<!-- LOAD APP -->
<script src="js/startup.js" type="module"></script>

<!-- older browsers like IE don't support modules -->
<script type='text/javascript' nomodule src='js/fallback.js'></script>

</body>
</html>