Merge pull request #126 from jsheunis/404-game

MNT: add gooey to index page
datalad · May 12, 2023 · 74ef8d5 · 74ef8d5
2 parents 20265e0 + 21af416
commit 74ef8d5
Show file tree

Hide file tree

Showing 5 changed files with 294 additions and 141 deletions.
diff --git a/content/img/404_bg.svg b/content/img/404_bg.svg
diff --git a/content/img/gooey_pts04_scale1600.mp4 b/content/img/gooey_pts04_scale1600.mp4
diff --git a/content/pages/index.html b/content/pages/index.html
@@ -144,12 +144,15 @@ <h1>Create Structure</h1>
 <div id="use-datalad" class="spacer-dlgrey"></div>
 
 <!-- SECTION: USE DATALAD -->
+
 <div id="console" class="info-card reverse">
   <div class="card-text use-datalad">
     <h1>Use DataLad</h1>
     <p>
-      DataLad is a free and open source command line tool with a Python API and is compatible with
-      all major operating systems. Use DataLad to:
+      DataLad is a free and open source Python-based tool that is compatible with
+      all major operating systems. It can be used via its
+      <a onclick="selectUseDataLad('gooey', 'click')">Graphical User Interface</a> or via the
+      <a onclick="selectUseDataLad('console', 'click')">command line</a> to:
     </p>
     <ul class="main-list">
       <li><span class="icon-code"></span>&nbsp;&nbsp;<code>create</code> new datasets locally</li>
@@ -164,8 +167,8 @@ <h1>Use DataLad</h1>
       <span class="icon-laptop"></span>&nbsp;&nbsp;Try out DataLad</a>
   </div>
   <div class="card-img use-datalad">
-    <img src="img/console.svg" alt="Computer console">
-    <div class="typewriter-text">
+    <img src="img/console.svg" alt="Computer console" id="console_img">    
+    <div class="typewriter-text"  id="typed_text">
       <p style="--n:26; --d:0">datalad create <em>my_dataset</em></p>
       <p style="--n:29; --d:1">datalad save <em>-m "hello world"</em></p>
       <p style="--n:26; --d:2">datalad push <em>--to location</em></p>
@@ -174,6 +177,14 @@ <h1>Use DataLad</h1>
       <p style="--n:24; --d:4">datalad get <em>example.txt</em></p>
       <p style="--n:25; --d:5">datalad drop <em>example.txt</em></p>
     </div>
+    <video autoplay muted loop id="gooey_video">
+      <source src="img/gooey_pts04_scale1600.mp4" type="video/mp4">
+      Your browser does not support the video tag.
+    </video>
+    <div class="show-use"> 
+      <input type="radio" name="useDataLad" value="console" onclick="selectUseDataLad(this.value, 'click')" id="console-select" checked><label for="console-select"></label>
+      <input type="radio" name="useDataLad" value="gooey" onclick="selectUseDataLad(this.value, 'click')" id="gooey-select"><label for="gooey-select"></label>
+    </div>
   </div>
 </div>
 

diff --git a/content/static/scripts.js b/content/static/scripts.js
@@ -63,4 +63,61 @@ function copyCode(text) {
   navigator.clipboard.writeText(text)
     .then(() => { })
     .catch((error) => { alert(`Copy failed! ${error}`) })
+}
+
+// Change "Use DataLad" display
+var gooeyVideo = document.getElementById("gooey_video");
+gooeyVideo.style.display = "none";
+var timer = null
+var interval = 20000
+startTimer()
+
+function startTimer() {
+  if (timer !== null) return;
+  timer = setInterval(toggleUseDataLadRadio, interval);
+}
+
+function stopTimer() {
+  clearInterval(timer);
+  timer = null
+}
+
+function resetTimer() {
+  stopTimer()
+  startTimer()
+}
+
+function selectUseDataLad(val, src) {
+  // Grab elements
+  var consoleImg = document.getElementById("console_img");
+  var typedText = document.getElementById("typed_text");
+  var gooeyVideo = document.getElementById("gooey_video");
+  // Set display
+  if (val==="console") {
+    consoleImg.style.display = "";
+    typedText.style.display = "";
+    gooeyVideo.style.display = "none";
+  } else {
+    consoleImg.style.display = "none";
+    typedText.style.display = "none";
+    gooeyVideo.style.display = "";
+  }
+  if (src==="click") {
+    resetTimer()
+  }
+
+}
+
+function toggleUseDataLadRadio() {
+  var radioConsole = document.getElementById("console-select");
+  var radioGooey = document.getElementById("gooey-select");
+  if (radioConsole.checked) {
+    radioConsole.checked = false;
+    radioGooey.checked = true;
+    selectUseDataLad("gooey", "timer")
+  } else {
+    radioGooey.checked = false;
+    radioConsole.checked = true;
+    selectUseDataLad("console", "timer")
+  }
 }
diff --git a/theme/static/css/style.css b/theme/static/css/style.css
@@ -769,6 +769,15 @@ svg.hero-svg {
   box-shadow: 0 7px 11px -1px #7A7A7A;
   border-radius: 0.4em;
 }
+.card-img.use-datalad video {
+  height: auto;
+  width: 90%;
+  max-width: 700px;
+  box-shadow: 0 7px 11px -1px #7A7A7A;
+  border-radius: 0.4em;
+  margin-bottom: 1em;
+  margin-top: 1em;
+}
 .typewriter-text {
   position: absolute;
   top: 50%;
@@ -1613,4 +1622,28 @@ img.no-overflow {
   padding-bottom: 1em;
   text-align: center;
   justify-content: center;
-}
+}
+
+.show-use input[type=radio] {
+  display: none
+}
+.show-use input[type=radio] + label {
+  border: 1px solid var(--datalad-grey);
+  background-color: white;
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  position: static;
+  display: inline-block;
+}
+.show-use input[type=radio]:hover + label {
+  background-color: #f6f6f6;
+}
+.show-use input[type=radio]:checked + label {
+  background-color: var(--datalad-yellow);
+}
+
+.show-use input[type=radio]:checked + label {
+  background-color: var(--datalad-yellow);
+}
+