Merge pull request #82 from bnidevs/frontend

Further Theme Updates

.gitignore

@@ -14,3 +14,5 @@
 # Dependency directories (remove the comment below to include it)
 # vendor/
 .DS_Store
+
+*.tmp.html

frontend/index.html

@@ -105,6 +105,7 @@ <h1>The Hotbox</h1>
 				<option value="4">Thanksgiving</option>
 				<option value="5">Christmas</option>
 				<option value="6">New Years</option>
+				<option value="7">Easter</option>
 			</select>
     	</p>
     </footer>

frontend/js/index.js

@@ -143,11 +143,13 @@ function toggleTheme(){
     document.documentElement.className="light-mode";
     document.getElementsByTagName("h1")[0].style.color = "black";
     document.getElementsByTagName("footer")[0].style.color = "black";
+    document.cookie = themeID.toString() + ";path=/";
   }
   else if(themeID == 2){
     document.documentElement.className="dark-mode";
     document.getElementsByTagName("h1")[0].style.color = "white";
     document.getElementsByTagName("footer")[0].style.color = "white";
+    document.cookie = themeID.toString() + ";path=/";
   }
   else if(themeID == 3){
     document.documentElement.className="halloween";
@@ -168,6 +170,11 @@ function toggleTheme(){
     document.documentElement.className="newyears";
     document.getElementsByTagName("h1")[0].style.color = "hotpink";
     document.getElementsByTagName("footer")[0].style.color = "white";
+  } 
+  else if(themeID == 7){
+    document.documentElement.className="easter";
+    document.getElementsByTagName("h1")[0].style.color = "darkmagenta";
+    document.getElementsByTagName("footer")[0].style.color = "darkmagenta";
   }
 }
 
@@ -180,14 +187,19 @@ function checkDate(){
   else if(month == 11){
     document.getElementById("themeSwitch").value=4;
   }
-  else if(month == 12){
+  else if(month == 12 && day <= 25){
     document.getElementById("themeSwitch").value=5;
   }
-  else if(month == 1){
+  else if((month == 12 && day > 25) || (month == 1 && day < 8)){
     document.getElementById("themeSwitch").value=6;
   }
+  else if((month == 3 && day > 21) || (month == 4 && day < 26)){
+    document.getElementById("themeSwitch").value=7;
+  }
   else{
-    return;
+  	var decoded_cookie = decodeURIComponent(document.cookie);
+  	var theme_value = decoded_cookie.substring(0,1);
+  	document.getElementById("themeSwitch").value = Number(theme_value);
   }
   toggleTheme();
 }

frontend/style/progress.css

@@ -53,7 +53,6 @@ div:last-child{
   max-width: 300px;
 }
 
-
 #preview-wrapper {
   margin-left: 60px;
   text-align: center;
@@ -97,7 +96,7 @@ div:last-child{
 .halloween{
   background-color: black;
   color: #FF7000;
-  --secondary-color: #FF7000;
+  --secondary-color: "#FF7000";
   background-image: url("../assets/pumpkin.png");
   background-repeat: no-repeat;
   background-position: absolute;
@@ -135,4 +134,15 @@ div:last-child{
   background-position: absolute;
   background-position: right bottom;
   background-size: 24vw;
+}
+
+.easter{
+  background-color: #9DCFDF;
+  color: orangered;
+  --secondary-color: darkmagenta;
+  background-image: url("../assets/easter.png");
+  background-repeat: no-repeat;
+  background-position: absolute;
+  background-position: right bottom;
+  background-size: 24vw;
 }