Firebase auth

.gitignore

@@ -1 +1,5 @@
-.DS_Store
+.DS_Store
+node_modules
+package.json
+package-lock.json
+app.js

assets/css/style.css

@@ -19,7 +19,7 @@ form h3 {
   display: flex;
   justify-content: center;
   padding: 25px !important;
-  margin: 15px 0;
+  margin-bottom: 15px;
 }
 .jumbotron img {
   margin-right: 40px;
@@ -35,13 +35,43 @@ form h3 {
   margin-right: 15px;
   flex: 1;
 }
-
-#event-genre {
+body {
+  background: url(../images/kuva4_nettiin.jpg) center;
+}
+#favorites {
+  display: none;
+}
+.signDiv {
+  display: flex;
+  justify-content: space-between;
+}
+#signIn,
+#favorites,
+#out {
+  margin: 10px 0;
+}
+#out {
+  display: none;
+}
+#event-genre,
+#signIn,
+#favorites,
+.fav,
+#out {
   height: 38px;
   width: 150px;
   background-color: black;
+  border-radius: 5px;
   color: white;
 }
+.greet {
+  font-size: 18pt;
+  color: whitesmoke;
+}
+a {
+  color: indigo;
+  margin: 5px 0;
+}
 .main-carousel {
   padding: 10px;
   margin-bottom: 50px;
@@ -65,11 +95,47 @@ form h3 {
   width: 50%;
   padding: 0 !important;
 }
-.eventDiv {
+.h {
+  margin-bottom: 10px;
+  padding-top: 5px;
+}
+button {
+  cursor: pointer;
+}
+#close,
+.h {
+  text-align: center;
+}
+.favList,
+#close {
+  background-color: black;
+  border-radius: 5px;
+  color: red;
+}
+.favList {
+  padding: 5px 15px;
+}
+#close {
+  padding: 0 10px;
+}
+.eventDiv,
+#savedEvents {
   background-color: rgba(250, 219, 200, 0.8);
   padding: 15px;
   margin: 10px;
+  display: flex;
+  flex-direction: column;
+}
+#savedEvents {
+  display: none;
+  border-radius: 5px;
+  flex-direction: column;
+}
+.rowEvents {
+  display: flex;
+  justify-content: space-between;
 }
+
 .image {
   width: 100%;
 }
@@ -98,24 +164,23 @@ form h3 {
 }
 
 #mainbody {
-  display: none;
+  /*  display: none; */
 }
 
 #intro {
-  margin-left:0;
-  height:100vh;
-  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
-  overflow:hidden;
+  margin-left: 0;
+  height: 100vh;
+  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
+  overflow: hidden;
 }
 
-
 .color {
   display: grid;
-  grid-template-columns: repeat(10,auto);
+  grid-template-columns: repeat(10, auto);
 }
 
 .div {
-  height:100vh;
+  height: 100vh;
 }
 #test-0 {
   font-size: 5em;
@@ -125,8 +190,8 @@ form h3 {
   opacity: 0;
   z-index: 2;
 }
-#logo{
-  width:10%;
+#logo {
+  width: 10%;
 }
 #test-1 {
   font-size: 5em;
@@ -169,28 +234,21 @@ form h3 {
   z-index: 2;
 }
 
-#playlistDiv
-{
- width: 100%;
- display: flex;
- justify-content: space-around;
- margin-top: 2%;
-
+#playlistDiv {
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  margin-top: 2%;
 }
 
-#playlist
-{
- width: 25%;
- position: relative;
-
+#playlist {
+  width: 25%;
+  position: relative;
 }
 
-#playlist img
-{
-
-   max-width: 100%;
-   max-height: 100%;
-   height: auto;
-   width: auto;
-
+#playlist img {
+  max-width: 100%;
+  max-height: 100%;
+  height: auto;
+  width: auto;
 }

assets/javascript/animate.js

@@ -1,10 +1,10 @@
-function gradientChange(){
-  for(i=0; i<10; i++){
-  var newDiv = $("<div>");
-  newDiv.addClass('div');
-  newDiv.addClass('c'+i);
-  $(".color").append(newDiv);
-}
+function gradientChange() {
+  for (i = 0; i < 10; i++) {
+    var newDiv = $("<div>");
+    newDiv.addClass("div");
+    newDiv.addClass("c" + i);
+    $(".color").append(newDiv);
+  }
 }
 gradientChange();
 
@@ -13,85 +13,97 @@ var step = 1;
 
 var purpleCount = 0;
 //   Change Color to create a gradient wave flow of colors
-function dynoColor(){
-  for(i=0; i<10; i++){
-    var red = 25*i + count;
-    var green = 25*i + count;
+function dynoColor() {
+  for (i = 0; i < 10; i++) {
+    var red = 25 * i + count;
+    var green = 25 * i + count;
     var blue = 25 * i + count;
-    $(".c"+i).css("backgroundColor", "rgb(" + red + "," + green + "," + blue + ")");
+    $(".c" + i).css(
+      "backgroundColor",
+      "rgb(" + red + "," + green + "," + blue + ")"
+    );
   }
-  count=count+step*1.5;
+  count = count + step * 1.5;
 }
-var dyno = setInterval(dynoColor,50);
-
-function purpleColor(){
+var dyno = setInterval(dynoColor, 50);
 
-    for(i=0; i<10; i++){
-    var red =  5*i + 230 - purpleCount;
-    var green = 5*i + 210  - purpleCount;
-    var blue =  5*i+ 250 - purpleCount;
-    $(".c"+i).css("backgroundColor", "rgb(" + red + "," + green + "," + blue + ")");
+function purpleColor() {
+  for (i = 0; i < 10; i++) {
+    var red = 5 * i + 230 - purpleCount;
+    var green = 5 * i + 210 - purpleCount;
+    var blue = 5 * i + 250 - purpleCount;
+    $(".c" + i).css(
+      "backgroundColor",
+      "rgb(" + red + "," + green + "," + blue + ")"
+    );
   }
-  purpleCount = purpleCount+step * 3;
+  purpleCount = purpleCount + step * 3;
 }
 
-
-
-
-
+//         tl.add ({
+//           targets: '.div',
+//           width:'100%',
+//           opacity:'0.8',
+//           delay:anime.stagger(100)
+//         })
 
 // Anime.js Animations
 var tl = anime.timeline({
-    easing: 'easeOutExpo',
-    duration: 750
-  })
+  easing: "easeOutExpo",
+  duration: 750
+});
 
-  tl.add ({
-    targets: '.div',
-    width:'100%',
-    opacity:'0.8',
-    delay:anime.stagger(100)
-  })
-
-  tl.add ({
-    targets: '.c3, .c4, .c5, .c6, .c7, .c8, .c9',
-    width: '75%',
-    opacity: '0.8',
-  })
+tl.add({
+  targets: ".div",
+  width: "100%",
+  opacity: "0.8",
+  delay: anime.stagger(100)
+});
 
-  tl.add ({
-    targets: '.c0, .c1, .c2',
-    width: '0%',
-    opacity: '0.8',
-  })
-  tl.add ({
-    targets: '#test-0',
-    top:'16%',
-    opacity: 1,
-    delay:anime.stagger(500)
-  })
-  for (i=0; i<6;i++){
-  tl.add ({
-    targets: '#test-1, #test-2, #test-3, #test-4, #test-5',
-    top:'20%',
+tl.add({
+  targets: ".c3, .c4, .c5, .c6, .c7, .c8, .c9",
+  width: "75%",
+  opacity: "0.8"
+});
+
+tl.add({
+  targets: ".c0, .c1, .c2",
+  width: "0%",
+  opacity: "0.8"
+});
+tl.add({
+  targets: "#test-0",
+  top: "16%",
+  opacity: 1,
+  delay: anime.stagger(500)
+});
+for (i = 0; i < 6; i++) {
+  tl.add({
+    targets: "#test-1, #test-2, #test-3, #test-4, #test-5",
+    top: "20%",
     opacity: 1,
-    delay:anime.stagger(500)
-  })
+    delay: anime.stagger(500)
+  });
 }
 
-function funBackground(){
-$("body").addClass('uk-animation-fade');
-$("body").css("background", "url('assets/images/kuva4_nettiin.jpg')");
+function funBackground() {
+  $("body").addClass("uk-animation-fade");
+  $("body").css("background", "url('assets/images/kuva4_nettiin.jpg')");
 }
-function loadMain(){
-clearInterval(dyno);
-setInterval(purpleColor,50);
-$("#intro").addClass('animated lightSpeedOut delay-1s').delay(2000).fadeOut();
-setTimeout(funBackground,2500);
-$("#mainbody").delay(2500).fadeIn();
-console.log("Fade out")  
+function loadMain() {
+  clearInterval(dyno);
+  setInterval(purpleColor, 50);
+  $("#intro")
+    .addClass("animated lightSpeedOut delay-1s")
+    .delay(2000)
+    .fadeOut();
+  setTimeout(funBackground, 2500);
+  $("#mainbody")
+    .delay(2500)
+    .fadeIn();
+  console.log("Fade out");
 }
-$(document).ready(function(){
-setTimeout(loadMain,7000);
-console.log("doc ready chk")
-});
+$(document).ready(function() {
+  setTimeout(loadMain, 7000);
+  console.log("doc ready chk");
+});