Merge pull request #7 from 8-bit-sheep/about

About
8-bit-sheep · Aug 2, 2019 · fd3860e · fd3860e
2 parents 4a8d721 + 6feb434
commit fd3860e
Show file tree

Hide file tree

Showing 9 changed files with 123 additions and 2 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/Yle-logo.png b/Yle-logo.png
diff --git a/about.css b/about.css
@@ -0,0 +1,72 @@
+#about-container {
+  width: 50rem;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  max-width: 500px;
+  margin: 0 auto;
+  padding: 5rem;
+}
+
+#headline {
+  display: flex;
+
+  width: 50rem;
+}
+
+h1 {
+  color: #7badb6;
+}
+
+img {
+  display: block;
+  width: auto;
+  height: auto;
+}
+
+.text {
+  font-size: 1.8rem;
+  margin-bottom: 3rem;
+  width: 50rem;
+  z-index: 2;
+  position: relative;
+  top: -5.5rem;
+  text-align: justify;
+  text-justify: inter-word;
+}
+
+#family-pic {
+  width: 50rem;
+  z-index: 1;
+}
+#sheep {
+  width: 30rem;
+  height: 17rem;
+}
+
+:root {
+  background-color: black;
+}
+
+* {
+  color: white;
+}
+
+#continue-btn {
+  background-color: #7badb6;
+  color: white;
+  width: 30rem;
+}
+
+#yle-logo {
+  width: 5rem;
+}
+
+#made-possible {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-top: 10rem;
+}
diff --git a/about.html b/about.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>About</title>
+    <link rel="stylesheet" href="app.css" />
+    <link rel="stylesheet" href="about.css" />
+  </head>
+  <body>
+    <div id="about-container">
+      <div id="headline">
+        <h1>About this project...</h1>
+        <img src="sheep-logo.gif" alt="sheep logo" id="sheep" />
+      </div>
+
+      <img src="family-pic.jpg" alt="lamb family pic" id="family-pic" />
+      <div class="text">
+        <h4>
+          The Summer Lambs Project is a cooperation between 8-bit-sheep and Eija
+          Moisala at Yleisradio. The idea was to offer summer jobs to high
+          schoolers, teach them to code JavaScript and give them a sense of
+          working in tech. This *very cool* website is the product of that
+          summer. Enjoy!
+        </h4>
+      </div>
+      <a href="index.html?about=seen" class="btn" id="continue-btn"
+        >Continue to *very cool* quiz</a
+      >
+      <div id="made-possible">
+        <h4>Thank you</h4>
+        <img src="Yle-logo.png" alt="logo" id="yle-logo" />
+        <h4>for making this possible!</h4>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/family-pic.jpg b/family-pic.jpg
diff --git a/game.html b/game.html
@@ -43,7 +43,8 @@ <h2 id="question"></h2>
                                 <p class="choice-text" data-number="2"></p>
                             </div>
                             <div class="choice-container">
-                                <p class="choice-prefix">3</p>                                    <p class="choice-text" data-number="3"></p>
+                                <p class="choice-prefix">3</p>                                    
+                                <p class="choice-text" data-number="3"></p>
                             </div>
                             <div class="choice-container">
                                 <p class="choice-prefix">4</p>

diff --git a/highscores.js b/highscores.js
@@ -11,7 +11,7 @@ d3.csv(
   const params = parseUrlParameters(window.location.search);
   const id = params.contentId;
   let ranking = highscores.filter(x => x.contentId === id);
-  ranking.push(params);
+ranking.push(params);
   ranking = [...new Set(ranking)]
     .sort((a, b) => parseInt(b.score) - parseInt(a.score))
     .slice(0, 10);

diff --git a/index.js b/index.js
@@ -1,6 +1,16 @@
 const contentBox = document.getElementById("content-box");
 const home = document.getElementById("home");
+const d = new Date();
+const cookieString = `about=seen; expires=${d.setTime(
+  d.getTime() + 365 * 24 * 60 * 60 * 1000
+)}`;
+const cookie = document.cookie || "";
+console.log(cookie);
 let questions = [];
+if (!cookie && !window.location.search) {
+  document.cookie = cookieString;
+  window.location.assign("about.html");
+}
 d3.csv(
   "https://docs.google.com/spreadsheets/d/e/2PACX-1vSfBk-rwrIauBPn7iuoLXBxP2sSYOXRYCbJ2GflzSK6wxGVGDr_fAqORJ0JWPdajFLxnGegmrlI26HB/pub?output=csv"
 ).then(data => {

diff --git a/sheep-logo.gif b/sheep-logo.gif