index.qmd

---
page-layout: custom
lightbox: false
---

<!-- Scripts-->
```{=HTML} 

<script src="./js/jquery.js"></script>
<script src="./js/d3js-dvs.js"></script>
<script src="./js/index-array-by.js"></script>


<script src="./js/globe.gl.js"></script>
<script type="module" src="./js/my_globe.gl.js">  </script>

<!-- bootbox modals for Globe -->
<script src="./js/bootbox.js"></script>
<script src="./js/marked.js"></script>
```

<!-- content: globe, dude, text -->
```{=HTML} 

<div class="container" >

<div id="intro_start" class="intro w-75"> </div>

<div class="d-flex align-items-end" >

<div id="dude" class="flex-shrink-0 d-none d-lg-block " data-toggle="tooltip"  data-bs-html="true"
title= "
Explore our field studies by pushing <i class='fas fa-circle'></i> on the Globe! <br>
Points are locations of {{< var N_birds >}} individuals from {{< var N_species >}} shorebird species we've tracked. 
Visit <strong> /Projects/ </strong>  for more.
"
>
<img src="./CONTENT/main/dude.webp"  class="img-fluid img-right"> 
<hr>
</div>

<div id= "Earth" class="flex-shrink-0" > </div>

</div>


</div>


```


<!-- before body ends-->
```{=HTML} 


<script> 
// init bs tooltip  
$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip();   
});

</script>


<script>

$.get('/CONTENT/main/intro_start.md', function(txt) {
    const htmlContent = marked.parse(txt);
    $('#intro_start').html(htmlContent);
});

</script>

<!-- <script>
// let the dude talk
$(document).ready(function() {

    setTimeout(function() {
      $("#dude").tooltip('show');
    }, 2000); 
    setTimeout(function() {
    
    $('#dude').tooltip('hide');
    }, 8000);

  });

</script> -->


<script>
// intro text as modal
$(document).on('click', '.show-read-more', function(e) {

  $.get("/CONTENT/main/intro.md", function (intro_text) {

    bootbox.alert({
      animate       : false,
      scrollable    : true,
      size          : "xl",
      centerVertical: true,
      message       : marked.parse(intro_text),
      backdrop      : true,
      closeButton   : true, 
      
      onShow : function(e) {
        $('#dude').tooltip('hide');
        $(this).find('.modal-footer').remove();
        $('#intro_start').hide();
        $('#dude').css('opacity', '0.05');
        $('#Earth').css('opacity', '0.05');
      }, 

      onHide : function(e) {
        $('#intro_start').show();
        $('#dude').css('opacity', '1');
        $('#Earth').css('opacity', '1');
      }, 




    });
  });
})

</script>

<!-- <script>

$(document).ready(function(){
    $(".nav-footer").remove();
});

</script>   -->










```