r002 · r002 · Jun 20, 2021 · Jun 24, 2021 · Jun 25, 2021 · Jul 1, 2021
diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>Sprint Hala 🍍 (Thu - 6/10/21)</title>
+    <title>Sprint Jambul 🍑 (Thursday - 7/29/21)</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
   <body style="visibility: hidden;">

diff --git a/public/study-group.html b/public/study-group.html
@@ -1,49 +1,10 @@
-<!DOCTYPE html>
-<html>
+<!doctype html>
+
+<html lang="en">
   <head>
     <meta charset="utf-8">
     <title>Study Group 00</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <style>
-      @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500&display=swap');
-      @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
-
-      * {
-        font-family: 'IBM Plex Mono', monospace;
-        font-size: 14px;
-        line-height: 21px;
-      }
-
-      a:link {
-        color: #2f87f8;
-        text-decoration: none;
-      }
-
-      a:visited {
-        color: #2f87f8;
-        text-decoration: none;
-      }
-
-      a:hover {
-        color: #2f87f8;
-        text-decoration: underline;
-      }
-
-      a:active {
-        color: red;
-      }
-
-      body {
-        background-color: #0d1117;
-        color: white;
-        margin: 0;
-        padding: 0;
-      }
-
-      .octicon {
-        fill: #a5b5bb;
-      }
-    </style>
   </head>
   <body>
     <div id="root"></div>

diff --git a/public/studydash.html b/public/studydash.html
@@ -0,0 +1,123 @@
+<!doctype html>
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>StudyDash - Jambul</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <div id="root"></div>
+    <div id="attribution"></div>
+    <div id="footer"></div>
+
+    <section class="stage">
+      <svg height="390" width="550" id="mountains">
+        <polygon points="300,390 190,90 320,130 400,340" fill="#5d2042" />
+        <polygon points="0,340 108,190 194,100 201,120 301,390" fill="#320e40" />
+        <polygon points="14,348 117,174 194,102 172,377" fill="#3b1642" fill-opacity="0.8" />
+        <polygon points="120,174 194,102 233,206 144,275" fill="#3d1744" fill-opacity="0.9" />
+
+        <polygon points="233,206 288,177 324,214" fill="#421943" />
+        <polygon points="233,206 324,214 247,245" fill="#3e1743" />
+        <polygon points="247,245 324,214 360,360" fill="#411842" />
+        <polygon points="324,214 288,177 350,210" fill="#632242" />
+        <polygon points="324,214 350,210 360,360" fill="#652343" />
+
+        <g id="apex">
+          <polygon points="108,190 170,40 194,100" fill="#aeacb9" />
+          <polygon points="170,40 234,6 260,70 288,178 194,102" fill="#ceced8" />
+          <polygon points="234,6 290,80 320,132 288,178" fill="#ffffed" />
+        </g>
+      </svg>
+
+      <svg height="347" width="168" id="cloud1">
+        <g>
+          <polygon points="0,30 8,19 27,18 22,36 9,37" fill="#d5d6e2" />
+          <polygon points="0,30 9,37 3,50" fill="#c7c2d1" />
+          <polygon points="3,50 9,37 22,36 33,44 14,55" fill="#a8a9b7" />
+          <polygon points="14,55 33,44 36,52 23,58" fill="#7a7789" />
+          <polygon points="27,18 22,36 33,44" fill="#acabb9" />
+
+          <polygon points="31,11 51,4 66,1 83,13 83,23 78,23" fill="#fff6e7" />
+          <polygon points="27,18 31,11 54,6 56,32 33,40 29,36" fill="#d0d0dc" />
+          <polygon points="29,36 58,65 42,67 31,57" fill="#9694a3" />
+          <polygon points="33,40 56,32 75,37 58,65" fill="#a2a1b1" />
+          <polygon points="58,65 75,37 82,57" fill="#9897a7" />
+          <polygon points="56,32 54,6 80,14 82,57 75,37" fill="#d7d6e2" />
+
+          <polygon points="80,15 84,17 88,30 85,50 81,51" fill="#9d9da9" />
+          <polygon points="90,16 82,20 81,31 95,35" fill="#cdcdda" />
+          <polygon points="81,31 82,47 95,35" fill="#a2a2b0" />
+          <polygon points="82,47 95,35 105,45 91,53" fill="#878892" />
+          <polygon points="105,45 95,35 106,22" fill="#fbe5d5" />
+          <polygon points="106,22 95,35 90,16" fill="#dbd6dd" />
+        </g>
+      </svg>
+
+      <svg height="347" width="168" id="cloud2">
+        <g transform="scale(0.5)">
+          <polygon points="0,30 8,19 27,18 22,36 9,37" fill="#d5d6e2" />
+          <polygon points="0,30 9,37 3,50" fill="#c7c2d1" />
+          <polygon points="3,50 9,37 22,36 33,44 14,55" fill="#a8a9b7" />
+          <polygon points="14,55 33,44 36,52 23,58" fill="#7a7789" />
+          <polygon points="27,18 22,36 33,44" fill="#acabb9" />
+
+          <polygon points="31,11 51,4 66,1 83,13 83,23 78,23" fill="#fff6e7" />
+          <polygon points="27,18 31,11 54,6 56,32 33,40 29,36" fill="#d0d0dc" />
+          <polygon points="29,36 58,65 42,67 31,57" fill="#9694a3" />
+          <polygon points="33,40 56,32 75,37 58,65" fill="#a2a1b1" />
+          <polygon points="58,65 75,37 82,57" fill="#9897a7" />
+          <polygon points="56,32 54,6 80,14 82,57 75,37" fill="#d7d6e2" />
+
+          <polygon points="80,15 84,17 88,30 85,50 81,51" fill="#9d9da9" />
+          <polygon points="90,16 82,20 81,31 95,35" fill="#cdcdda" />
+          <polygon points="81,31 82,47 95,35" fill="#a2a2b0" />
+          <polygon points="82,47 95,35 105,45 91,53" fill="#878892" />
+          <polygon points="105,45 95,35 106,22" fill="#fbe5d5" />
+          <polygon points="106,22 95,35 90,16" fill="#dbd6dd" />
+        </g>
+      </svg>
+
+      <svg id="ground"></svg>
+
+      <svg id="hills" width="700" height="170">
+        <polygon points="480,70 530,100 560,90 516,40" fill="#9b9d57" />
+        <polygon points="480,70 530,100 412,84" fill="#7d8f57" />
+        <polygon points="530,100 412,84 360,138" fill="#748857" />
+        <polygon points="360,138 240,140 320,82" fill="#748857" />
+
+        <polygon points="412,84 360,140 320,82" fill="#88945a" />
+        <polygon points="320,82 240,140 210,64" fill="#597252" />
+        <polygon points="300,78 100,100 0,104 170,58" fill="#4f654f" />
+        <polygon points="172,58 145,40 122,48 66,79 0,104" fill="#536a50" />
+      </svg>  
+      <canvas id="sky"></canvas>
+    </section>
+    <script>
+      var sky = document.getElementById("sky");
+      sky.width = document.body.clientWidth;
+      sky.height = document.body.clientHeight;
+
+      if (sky.getContext){
+        var skyContext = sky.getContext("2d");
+
+        var radius = 2;
+
+        for(var star = 0; star < 50; star++){ 
+            var min = ( Math.random() * 30 + 5 ) / 10;
+            var max = sky.width - radius;
+
+            var centerX = Math.floor(Math.random() * (max - min + 1)) + min;
+            var centerY = Math.floor(Math.random() * (max - min + 1)) + min;
+
+            skyContext.beginPath();
+            skyContext.arc(centerX, centerY, min, 0, 2 * Math.PI);
+
+            skyContext.fillStyle = "rgb(255, 255, 255)";
+            skyContext.fill();
+        }
+      }
+    </script>
+  </body>
+</html>
diff --git a/public/v1/index.html b/public/v1/index.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>StudyDash QA | v1 "Imbe"</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+      html, body {
+        margin: 0;
+        height: 100%;
+      }
+
+      #wrapper {
+        display: grid;
+        grid-template-rows: 50px 1fr;
+        grid-gap: 10px;
+        background: red;
+        height: 100%;
+        width: 100%;
+      }
+
+      #urlFrame {
+        display: flex;
+        padding: 12px;
+        background: yellow;
+        color: black;
+      }
+
+      .urlLabel {
+        font-weight: bold;
+        /* width: 135px; */
+        padding-top: 0px;
+        padding-right: 10px;
+        white-space: nowrap;
+      }
+
+      #urlBox {
+        width: 50%;
+        font-size: 18px;
+      }
+
+      #buildVersions {
+        font-size: 18px;
+      }
+
+      #bodyFrame {
+        height: 100%;
+        width: 100%;
+        background: black;
+      }
+    </style>
+    <script>
+      function setTopUrl (url) {
+        const m = url.match(/^.*d=(\d{4}-\d{2})$/)
+        if (m?.[1]) { // Eg. m[1] = 2021-06
+          const root = "/v1"
+          history.pushState({}, '', `${root}/?d=${m[1]}`)
+        }
+      }
+
+      window.addEventListener("message", (event) => {
+        // console.log(">> Message received!", event)
+        document.getElementById("urlBox").value = event.data
+        setTopUrl(event.data)
+      }, false);
+
+      window.onload = () => {
+        // If topUrl has `d?=` set, honor it
+        const m = window.location.href.match(/^.*d=(\d{4}-\d{2})$/)
+        const d = m?.[1] ? `/?d=${m[1]}` : ""
+
+        const s = window.location.href.includes("localhost")
+          ? "http://localhost:3000/studygroup" + d 
+          : "https://captains-log--pr47-sprint-imbe-7qvtjsud.web.app/studydash" + d
+        document.getElementById('bodyFrame').setAttribute("src", s)
+      }
+
+      function navigate() {
+        console.log('>> navigate:', document.getElementById('buildVersions').value)
+        window.location = document.getElementById('buildVersions').value
+      }
+    </script>
+  </head>
+  <body>
+    <div id="wrapper">
+      <div id="urlFrame">
+        <div class="urlLabel">
+          <select name="buildVersions" id="buildVersions" onchange="navigate()">
+            <option value="/v1" selected>Latest QA Build v1 ("Imbe")</option>
+            <option value="/v2">Latest QA Build v2 ("Jambul")</option>
+          </select>
+        </div> <input type="text" id="urlBox" readonly />
+      </div>
+      <iframe id="bodyFrame" frameborder="0"></iframe>
+    </div>
+  </body>
+</html>
diff --git a/public/v2/index.html b/public/v2/index.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>StudyDash QA | v2 "Jambul"</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+      html, body {
+        margin: 0;
+        height: 100%;
+      }
+
+      #wrapper {
+        display: grid;
+        grid-template-rows: 50px 1fr;
+        grid-gap: 10px;
+        background: red;
+        height: 100%;
+        width: 100%;
+      }
+
+      #urlFrame {
+        display: flex;
+        padding: 12px;
+        background: yellow;
+        color: black;
+      }
+
+      .urlLabel {
+        font-weight: bold;
+        /* width: 135px; */
+        padding-top: 0px;
+        padding-right: 10px;
+        white-space: nowrap;
+      }
+
+      #urlBox {
+        width: 50%;
+        font-size: 18px;
+      }
+
+      #buildVersions {
+        font-size: 18px;
+      }
+
+      #bodyFrame {
+        height: 100%;
+        width: 100%;
+        background: black;
+      }
+    </style>
+    <script>
+      function setTopUrl (url) {
+        const m = url.match(/^.*d=(\d{4}-\d{2})$/)
+        if (m?.[1]) { // Eg. m[1] = 2021-06
+          const root = "/v2"
+          history.pushState({}, '', `${root}/?d=${m[1]}`)
+        }
+      }
+
+      window.addEventListener("message", (event) => {
+        // console.log(">> Message received!", event)
+        document.getElementById("urlBox").value = event.data
+        setTopUrl(event.data)
+      }, false);
+
+      window.onload = () => {
+        // If topUrl has `d?=` set, honor it
+        const m = window.location.href.match(/^.*d=(\d{4}-\d{2})$/)
+        const d = m?.[1] ? `/?d=${m[1]}` : ""
+
+        const s = window.location.href.includes("localhost")
+          ? "http://localhost:3000/studydash" + d 
+          : "https://captains-log--pr49-sprint-jambul-dbuvx4za.web.app/studydash" + d
+        document.getElementById('bodyFrame').setAttribute("src", s)
+      }
+
+      function navigate() {
+        console.log('>> navigate:', document.getElementById('buildVersions').value)
+        window.location = document.getElementById('buildVersions').value
+      }
+    </script>
+  </head>
+  <body>
+    <div id="wrapper">
+      <div id="urlFrame">
+        <div class="urlLabel">
+          <select name="buildVersions" id="buildVersions" onchange="navigate()">
+            <option value="/v1">Latest QA Build v1 ("Imbe")</option>
+            <option value="/v2" selected>Latest QA Build v2 ("Jambul")</option>
+          </select>
+        </div> <input type="text" id="urlBox" readonly />
+      </div>
+      <iframe id="bodyFrame" frameborder="0"></iframe>
+    </div>
+  </body>
+</html>