From 4e402e826546d3b8d66bb61f4fb80984260a116e Mon Sep 17 00:00:00 2001
From: Sarah M Brown <brownsarahm@uri.edu>
Date: Wed, 16 Aug 2023 10:59:07 -0400
Subject: [PATCH 1/2] set up for animation

---
 _static/buttons.html    |  10 ++
 _static/custom.css      | 247 +++++++++++++++++++++++++++++++---------
 _static/play_pause.html |  10 ++
 _templates/layout.html  |  86 +++++++++++---
 pechakucha.md           |  12 ++
 5 files changed, 299 insertions(+), 66 deletions(-)
 create mode 100644 _static/buttons.html
 create mode 100644 _static/play_pause.html

diff --git a/_static/buttons.html b/_static/buttons.html
new file mode 100644
index 0000000..feb57fc
--- /dev/null
+++ b/_static/buttons.html
@@ -0,0 +1,10 @@
+<!-- a container for the buttons -->
+<div class="controls">
+    <!-- the btn,  btn-dark, and btn-info classes come from Bootstrap-->
+<input class='btn btn-dark' id="pageview" type="button" value="X" onclick="closeFullscreen()"/>
+
+<input class='btn btn-info' id="presentation" type="button" value="Present" onclick="openFullscreen()"/>
+
+<!-- the fucntions called by buttons are defined in layout.html -->
+
+</div>
\ No newline at end of file
diff --git a/_static/custom.css b/_static/custom.css
index b44f654..4407d0c 100644
--- a/_static/custom.css
+++ b/_static/custom.css
@@ -23,6 +23,7 @@ figure.profile-pic img {
 .focusareas {
     font-size: .9em;
     font-weight: bold;
+    text-transform: uppercase;
 }
 
 .whatido {
@@ -31,14 +32,14 @@ figure.profile-pic img {
 
 .major {
     margin-top: 1em;
+    text-justify: inter-character;
+    text-align: justify;
 }
 
 .gradyear {
     margin-top: 1em;
 }
 
-
-
 /* Sidebar for blog archive / each post */
 ul.ablog-archive {
     padding-left: 0px;
@@ -123,77 +124,188 @@ div.timeline div.entry.right::after {
     left: -.5em;
 }
 
-/* * {
-    box-sizing: border-box;
-} */
-
 
 .slide {
-    display: none;
+    /* display: none; */
+    animation-name: fade;
+    animation-duration: 1.5s;
+}
+
+
+H1.pechakucha {
+    display:none;
+}
 
+/* Fading animation */
+.fade {
     animation-name: fade;
     animation-duration: 1.5s;
 }
 
-img {
-    vertical-align: middle;
+
+
+/* Fancy Admonition stuff */
+div.admonition.codeicon>.admonition-title:after {
+    content: "\f121";
+    /* the fa-code icon */
 }
 
-/* Slideshow container */
-.slideshow-container {
-    /* max-width: 1000px; */
-    position: relative;
-    margin: auto;
+div.admonition.git>.admonition-title:after {
+    content: "\f126";
+    /* the fa-github icon */
 }
 
-/* Caption text */
-.text {
-    color: #f2f2f2;
-    font-size: 15px;
-    padding: 8px 12px;
-    position: absolute;
-    bottom: 8px;
+/*  define the blue  cards*/
+div.sd-card.blue {
+    border-color: navy;
+    border-width: 5px;
+    box-shadow: lightblue;
+}
+
+div.sd-card.blue div.sd-card-header{
+    background-color:  lightblue;
+    color: navy;
+}
+
+div.sd-card.blue div.sd-card-footer{
+    color: lightblue;
+    background-color: navy;
+}
+
+/*  define the pink  cards*/
+div.sd-card.pink {
+    border-color: hotpink;
+    border-width: 5px;
+    box-shadow:  pink;
+}
+div.sd-card.pink div.sd-card-header {
+    background-color:  pink;
+}
+
+/*  define the pink slides*/
+div.sd-card.pink div.sd-card-footer{
+    border-color: hotpink;
+    background-color: lightpink;
+    color:darkmagenta;
+}
+
+
+div.admonition.blue>.admonition-title:before {
+    background-color: navy;
+}
+
+div.admonition.blue>.admonition-title:after {
+    color: skyblue;
+}
+
+/* pink admonition ------------------------------ */
+/*  this sets  */
+div.admonition.pink {
+    border-color: pink;
+}
+
+div.admonition.pink>.admonition-title:before {
+    background-color:magenta;
+}
+
+div.admonition.pink>.admonition-title:after {
+    color:maroon;
+}
+
+/* presentation mode -------------------------------- */
+
+/* hide footer in fullscreen */
+#slideshow:fullscreen div.sd-card-footer{
+    display: none;
+}
+
+#slideshow:not(:fullscreen) div.sd-card-footer {
+    display: inherit;
+}
+
+
+/* #slideshow:fullscreen{
+    overflow: hidden;
+} */
+
+/* the background in full screen mode */
+#slideshow::backdrop {
+    background-color: darkblue;
+}
+
+
+#slideshow:not(:fullscreen) .controls {
+    text-align: right;
+}
+
+/* put controls inthe bottom right of the screen and 
+       on top of the slides in fullscreen */
+#slideshow:fullscreen div.controls {
+   position:absolute;
+   bottom:0px;
+   right: 0px;
+   z-index: 100; /* this line is functional*/
+}
+
+
+
+/* maximize cards in fullscreen */
+/*  maximize carousel so that cards can be maxed*/
+#slideshow:fullscreen div.sd-cards-carousel {
+    height: 100%;
+    overflow: hidden;
+}
+
+
+/*  maximize the cards  in  full screen only*/
+#slideshow:fullscreen div.sd-card {
+    height: 100%;
     width: 100%;
-    text-align: center;
+    /* text-align: center;
+    vertical-align: middle; */
+    display: block;
 }
 
-/* Number text (1/3 etc) */
-.numbertext {
-    color: #f2f2f2;
-    font-size: 12px;
-    padding: 8px 12px;
-    position: absolute;
-    top: 0;
+#slideshow:not(:fullscreen) div.sd-card {
+    height: inherit;
 }
 
-/* The dots/bullets/indicators */
-.dot {
-    height: 15px;
-    width: 15px;
-    margin: 0 2px;
-    background-color: #bbb;
-    border-radius: 50%;
-    display: inline-block;
-    transition: background-color 0.6s ease;
+/* center the images in fullscreen */
+#slideshow:fullscreen div.sd-card img{
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    max-height: 800px;
+    transform: translateX(-50%) translateY(-50%);
 }
 
-.active {
-    background-color: #717171;
+#slideshow:not(:fullscreen) div.sd-card img {
+    position: relative;
 }
 
-H1.pechakucha {
+/* site view button only on in fullscreen */
+#slideshow:not(:fullscreen) #pageview{
     display:none;
 }
 
-/* Fading animation */
-.fade {
-    animation-name: fade;
-    animation-duration: 1.5s;
+#slideshow:fullscreen #pageview{
+    display:block;
 }
 
+/* presentation button off in fullscreen */
+#slideshow:fullscreen #presentation{
+    display: none;
+}
+
+#slideshow:not(:fullscreen) #presentation{
+    display: block;
+}
+
+
+/* slide animation opacity */
 @keyframes fade {
     from {
-        opacity: .4
+        opacity: .1
     }
 
     to {
@@ -201,13 +313,46 @@ H1.pechakucha {
     }
 }
 
+/* slide animation slide in */
+@keyframes slidein {
+    from {
+        margin-left: 100%;
+        width: 300%;
+    }
+
+    to {
+        margin-left: 0%;
+        width: 100%;
+    }
+}
+
+/* slide in from right then out to left */
+/*  to ue this one, set duration to 20s */
+@keyframes slideinout {
+    0% {
+        margin-left: 100%;
+        width: 300%;
+    }
+
+    5% {
+        margin-left: 0%;
+        width: 100%;
+    }
+
+    95% {
+        margin-left: 0%;
+        width: 100%;
+    }
+
+    100% {
+        margin-left: -100%;
+        width: 300%;
+    }
+}
+
 /* On smaller screens, decrease text size */
 @media only screen and (max-width: 300px) {
     .text {
         font-size: 11px
     }
-}
-git add xxx.png
-git commit -m 'add png file'
-git remote add origin https://github.com/xxx.git
-git push -u origin master
+}
\ No newline at end of file
diff --git a/_static/play_pause.html b/_static/play_pause.html
new file mode 100644
index 0000000..509dd3b
--- /dev/null
+++ b/_static/play_pause.html
@@ -0,0 +1,10 @@
+<!-- a container for the buttons -->
+<div class="controls">
+<!-- the btn,  btn-dark, and btn-info classes come from Bootstrap-->
+<input class='btn btn-dark' id="pause" type="button" value="Pause" onclick="pauseSlideShow()" />
+
+<input class='btn btn-info' id="play" type="button" value="Present" onclick="playSlideShow()" />
+
+<!-- the fucntions called by buttons are defined in layout.html -->
+
+</div>
\ No newline at end of file
diff --git a/_templates/layout.html b/_templates/layout.html
index b463c43..3d4850a 100644
--- a/_templates/layout.html
+++ b/_templates/layout.html
@@ -1,37 +1,93 @@
 {% extends '!layout.html' %}
 
 {% block footer %}
+<!--  the stuff above here makes your pages work regularly -->
+<!--  the stuff below here puts javascript on all of the pages -->
 
 <script>
+    // this section is javascript, not HTML evn though it's in the HTML file
     let slideIndex = 0;
     let slides = document.getElementsByClassName("slide");
-    if (slides.length > 0 ){
-        showSlides();
-    }
+    let slideTime = 5000;
+    // var slideInterval = setInterval(showSlides, slideTime);
+    // clearInterval(slideInterval);
+
+    // if (slides.length > 0 ){
+    //     showSlides();
+    // }
 
     function showSlides() {
         let i;
         let slides = document.getElementsByClassName("slide");
-        console.log('in')
-        console.log(slides.length)
-        console.log(slideIndex)
+        // console.log('in')
+        // console.log(slides.length)
+        // console.log(slideIndex)
 
         let dots = document.getElementsByClassName("dot");
         for (i = 0; i < slides.length; i++) {
-            console.log(i)
-            console.log('off')
+            // console.log(i)
+            // console.log('off')
             slides[i].style.display = "none";
         }
         slideIndex++;
         if (slideIndex > slides.length) { slideIndex = 1 }
         slides[slideIndex - 1].style.display = "block";
-        // for (i = 0; i < dots.length; i++) {
-        //     dots[i].className = dots[i].className.replace(" active", "");
-        // }
-        // slides[slideIndex - 1].style.display = "block";
-        // slides[slideIndex-1].setAttribute("style","display:block");
-        // dots[slideIndex - 1].className += " active";
-        setTimeout(showSlides, 5000); // Change image every 2 seconds
     }
+
+    // show all again if not playing
+    function showAll() {
+        let i;
+        let slides = document.getElementsByClassName("slide");
+
+        for (i = 0; i < slides.length; i++) {
+            slides[i].style.display = "block";
+        }
+    }
+
+//  make full screen mode
+    function openFullscreen() {
+        var elem = document.getElementById('slideshow');
+        console.log('fullscreen');
+            if (elem.requestFullscreen) {
+                elem.requestFullscreen();
+            } else if (elem.mozRequestFullScreen) { /* Firefox */
+                elem.mozRequestFullScreen();
+            } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
+                elem.webkitRequestFullscreen();
+            } else if (elem.msRequestFullscreen) { /* IE/Edge */
+                elem.msRequestFullscreen();
+            }
+        showSlides()
+        slideInterval = setInterval(showSlides, slideTime);
+    }
+
+
+    function closeFullscreen() {
+            if (document.exitFullscreen) {
+                document.exitFullscreen();
+            } else if (document.mozCancelFullScreen) { /* Firefox */
+                document.mozCancelFullScreen();
+            } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
+                document.webkitExitFullscreen();
+            } else if (document.msExitFullscreen) { /* IE/Edge */
+                document.msExitFullscreen();
+            }
+
+        clearInterval(slideInterval);
+        showAll();
+        }
+
+    // play without fullscreen
+    function playSlideShow() {
+        
+            showSlides()
+            slideInterval = setInterval(showSlides, slideTime);
+        }
+
+    function pauseSlideShow() {
+        
+            clearInterval(slideInterval);
+            showAll();
+        }
 </script>
 {% endblock %}
\ No newline at end of file
diff --git a/pechakucha.md b/pechakucha.md
index 9ec6716..24f6296 100644
--- a/pechakucha.md
+++ b/pechakucha.md
@@ -1,3 +1,15 @@
 # PechaKucha
 
+```{include} _static/play_pause.html
+```
+
+```{card} 
+:class-card: slide
 ![mental Health](_static/img/mentalhealth.jpg)
+```
+
+```{card} 
+:class-card: slide
+
+![rabbit](_static/20230717_160300.jpg)
+```
\ No newline at end of file

From b5968c2bf48b574433f7743fbfddf9803f6491d0 Mon Sep 17 00:00:00 2001
From: Sarah M Brown <brownsarahm@uri.edu>
Date: Wed, 16 Aug 2023 11:31:39 -0400
Subject: [PATCH 2/2] mv images

---
 _static/{ => img}/20230717_160300.jpg               | Bin
 _static/{ => img}/20230729_201918.jpg               | Bin
 ...e Survey Software Qualtrics Survey Solutions.png | Bin
 3 files changed, 0 insertions(+), 0 deletions(-)
 rename _static/{ => img}/20230717_160300.jpg (100%)
 rename _static/{ => img}/20230729_201918.jpg (100%)
 rename _static/{ => img}/Screenshot 2023-07-28 at 13-41-17 Online Survey Software Qualtrics Survey Solutions.png (100%)

diff --git a/_static/20230717_160300.jpg b/_static/img/20230717_160300.jpg
similarity index 100%
rename from _static/20230717_160300.jpg
rename to _static/img/20230717_160300.jpg
diff --git a/_static/20230729_201918.jpg b/_static/img/20230729_201918.jpg
similarity index 100%
rename from _static/20230729_201918.jpg
rename to _static/img/20230729_201918.jpg
diff --git a/_static/Screenshot 2023-07-28 at 13-41-17 Online Survey Software Qualtrics Survey Solutions.png b/_static/img/Screenshot 2023-07-28 at 13-41-17 Online Survey Software Qualtrics Survey Solutions.png
similarity index 100%
rename from _static/Screenshot 2023-07-28 at 13-41-17 Online Survey Software Qualtrics Survey Solutions.png
rename to _static/img/Screenshot 2023-07-28 at 13-41-17 Online Survey Software Qualtrics Survey Solutions.png