Countdown ⏰

posit-conf-2023 · Sep 18, 2023 · 65b82c2 · 65b82c2
1 parent 08ba97c
commit 65b82c2
Show file tree

Hide file tree

Showing 122 changed files with 3,554 additions and 211 deletions.
diff --git a/slides/00-introduction.html b/slides/00-introduction.html
@@ -319,6 +319,8 @@
       margin-right: 0; 
     }
   </style>
+  <link href="00-introduction_files/libs/countdown-0.4.0/countdown.css" rel="stylesheet">
+  <script src="00-introduction_files/libs/countdown-0.4.0/countdown.js"></script>
 </head>
 <body class="quarto-light">
   <div class="reveal">
@@ -380,14 +382,22 @@ <h2>Meet the Teaching Team</h2>
 <p>🥴 color: Orange</p>
 </div>
 </div>
-</section></section>
-<section>
-<section id="meet-each-other" class="title-slide slide level1 center">
-<h1>Meet each other!</h1>
+</section>
+<section id="meet-each-other" class="slide level2">
+<h2>Meet each other!</h2>
 <p>Favorite color?</p>
 <p>Least favorite color?</p>
+<div class="cell">
+<div class="cell-output-display">
+<div class="countdown" id="timer_1cbf5685" data-update-every="1" tabindex="0" style="right:0;bottom:0;">
+<div class="countdown-controls"><button class="countdown-bump-down">−</button><button class="countdown-bump-up">+</button></div>
+<code class="countdown-time"><span class="countdown-digits minutes">03</span><span class="countdown-digits colon">:</span><span class="countdown-digits seconds">00</span></code>
+</div>
+</div>
+</div>
 <div class="fragment">
 <p><a href="https://github.com/posit-conf-2023/creative-coding/discussions/1">github.com/posit-conf-2023/creative-coding/discussions/1</a></p>
+<p>“Welcome to Steal like an Rtist: Creative Coding in R! 🎨💻”</p>
 </div>
 </section>
 <section id="schedule" class="slide level2">
@@ -720,6 +730,44 @@ <h2>Communication Strategy</h2>
         ]
       });
     </script>
+
+    <script>
+      // htmlwidgets need to know to resize themselves when slides are shown/hidden.
+      // Fire the "slideenter" event (handled by htmlwidgets.js) when the current
+      // slide changes (different for each slide format).
+      (function () {
+        // dispatch for htmlwidgets
+        function fireSlideEnter() {
+          const event = window.document.createEvent("Event");
+          event.initEvent("slideenter", true, true);
+          window.document.dispatchEvent(event);
+        }
+
+        function fireSlideChanged(previousSlide, currentSlide) {
+          fireSlideEnter();
+
+          // dispatch for shiny
+          if (window.jQuery) {
+            if (previousSlide) {
+              window.jQuery(previousSlide).trigger("hidden");
+            }
+            if (currentSlide) {
+              window.jQuery(currentSlide).trigger("shown");
+            }
+          }
+        }
+
+        // hookup for slidy
+        if (window.w3c_slidy) {
+          window.w3c_slidy.add_observer(function (slide_num) {
+            // slide_num starts at position 1
+            fireSlideChanged(null, w3c_slidy.slides[slide_num - 1]);
+          });
+        }
+
+      })();
+    </script>
+
     <script id="quarto-html-after-body" type="application/javascript">
     window.document.addEventListener("DOMContentLoaded", function (event) {
       const toggleBodyColorMode = (bsSheetEl) => {

diff --git a/slides/00-introduction.qmd b/slides/00-introduction.qmd
@@ -58,14 +58,24 @@ execute:
 :::
 :::
 
-# Meet each other!
+## Meet each other!
 
 Favorite color?
 
 Least favorite color?
 
+```{r echo = FALSE}
+countdown::countdown(
+  minutes = 3,
+  color_running_background = "#b6d166",
+  color_finished_background = "#F2994A"
+)
+```
+
 ::: fragment
 [github.com/posit-conf-2023/creative-coding/discussions/1](https://github.com/posit-conf-2023/creative-coding/discussions/1)
+
+"Welcome to Steal like an Rtist: Creative Coding in R! 🎨💻"
 :::
 
 

diff --git a/slides/00-introduction_files/libs/countdown-0.4.0/countdown.css b/slides/00-introduction_files/libs/countdown-0.4.0/countdown.css
@@ -0,0 +1,144 @@
+.countdown {
+  background: inherit;
+  position: absolute;
+  cursor: pointer;
+  font-size: 3rem;
+  line-height: 1;
+  border-color: #ddd;
+  border-width: 3px;
+  border-style: solid;
+  border-radius: 15px;
+  box-shadow: 0px 4px 10px 0px rgba(50, 50, 50, 0.4);
+  -webkit-box-shadow: 0px 4px 10px 0px rgba(50, 50, 50, 0.4);
+  margin: 0.6em;
+  padding: 10px 15px;
+  text-align: center;
+  z-index: 10;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.countdown {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.countdown .countdown-time {
+  background: none;
+  font-size: 100%;
+  padding: 0;
+}
+.countdown-digits {
+  color: inherit;
+}
+.countdown.running {
+  border-color: #A0BB4BFF;
+  background-color: #b6d166;
+}
+.countdown.running .countdown-digits {
+  color: #2A3400FF;
+}
+.countdown.finished {
+  border-color: #DD862DFF;
+  background-color: #F2994A;
+}
+.countdown.finished .countdown-digits {
+  color: #442400FF;
+}
+.countdown.running.warning {
+  border-color: #CEAC04FF;
+  background-color: #E6C229;
+}
+.countdown.running.warning .countdown-digits {
+  color: #3A2F02FF;
+}
+
+.countdown.running.blink-colon .countdown-digits.colon {
+  opacity: 0.1;
+}
+
+/* ------ Controls ------ */
+.countdown:not(.running) .countdown-controls {
+  display: none;
+}
+
+.countdown-controls {
+  position: absolute;
+  top: -0.5rem;
+  right: -0.5rem;
+  left: -0.5rem;
+  display: flex;
+  justify-content: space-between;
+  margin: 0;
+  padding: 0;
+}
+
+.countdown-controls > button {
+  font-size: 1.5rem;
+  width: 1rem;
+  height: 1rem;
+  display: inline-block;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-family: monospace;
+  padding: 10px;
+  margin: 0;
+  background: inherit;
+  border: 2px solid;
+  border-radius: 100%;
+  transition: 50ms transform ease-in-out, 150ms opacity ease-in;
+  --countdown-transition-distance: 10px;
+}
+
+.countdown .countdown-controls > button:last-child {
+  transform: translate(calc(-1 * var(--countdown-transition-distance)), var(--countdown-transition-distance));
+  opacity: 0;
+  color: #2A3400FF;
+  background-color: #b6d166;
+  border-color: #A0BB4BFF;
+}
+
+.countdown .countdown-controls > button:first-child {
+  transform: translate(var(--countdown-transition-distance), var(--countdown-transition-distance));
+  opacity: 0;
+  color: #442400FF;
+  background-color: #F2994A;
+  border-color: #DD862DFF;
+}
+
+.countdown.running:hover .countdown-controls > button,
+.countdown.running:focus-within .countdown-controls > button{
+  transform: translate(0, 0);
+  opacity: 1;
+}
+
+.countdown.running:hover .countdown-controls > button:hover,
+.countdown.running:focus-within .countdown-controls > button:hover{
+  transform: translate(0, calc(var(--countdown-transition-distance) / -2));
+  box-shadow: 0px 2px 5px 0px rgba(50, 50, 50, 0.4);
+  -webkit-box-shadow: 0px 2px 5px 0px rgba(50, 50, 50, 0.4);
+}
+
+.countdown.running:hover .countdown-controls > button:active,
+.countdown.running:focus-within .countdown-controls > button:active{
+  transform: translate(0, calc(var(--coutndown-transition-distance) / -5));
+}
+
+/* ----- Fullscreen ----- */
+.countdown.countdown-fullscreen {
+  z-index: 0;
+}
+
+.countdown-fullscreen.running .countdown-controls {
+  top: 1rem;
+  left: 0;
+  right: 0;
+  justify-content: center;
+}
+
+.countdown-fullscreen.running .countdown-controls > button + button {
+  margin-left: 1rem;
+}