Merge pull request #80 from bnidevs/frontend

A Bunch of Random CSS Updates
bnidevs · Nov 15, 2020 · c957fb0 · c957fb0
2 parents c0457e4 + d8503f0
commit c957fb0
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 41 deletions.
diff --git a/frontend/assets/Halloween.jpg b/frontend/assets/Halloween.jpg
diff --git a/frontend/assets/new_year.png b/frontend/assets/new_year.png
diff --git a/frontend/assets/no_preview.png b/frontend/assets/no_preview.png
diff --git a/frontend/assets/pumpkin.png b/frontend/assets/pumpkin.png
diff --git a/frontend/assets/tree.png b/frontend/assets/tree.png
diff --git a/frontend/index.html b/frontend/index.html
@@ -100,7 +100,7 @@ <h1>The Hotbox</h1>
     		| Switch Theme
 			<select name="themetoggle" id="themeSwitch" onchange="toggleTheme()">
 				<option value="1">Light Mode</option>
-			  <option value="2">Dark Mode</option>
+			    <option value="2">Dark Mode</option>
 				<option value="3">Halloween</option>
 				<option value="4">Thanksgiving</option>
 				<option value="5">Christmas</option>

diff --git a/frontend/js/index.js b/frontend/js/index.js
@@ -82,7 +82,7 @@ function checkFileSize() {
 function getImgPreview() {
   var paramspayload = {"videofilename":videofilename}
 
-  document.getElementById("preview-image").src="assets/Halloween.jpg";
+  document.getElementById("preview-image").src="assets/no_preview.png";
 
   var lambdaParams = {
     FunctionName: '035225278288:function:thehotboximagepreview',
@@ -141,22 +141,33 @@ function toggleTheme(){
   var themeID = document.getElementById("themeSwitch").value;
   if(themeID == 1){
     document.documentElement.className="light-mode";
+    document.getElementsByTagName("h1")[0].style.color = "black";
+    document.getElementsByTagName("footer")[0].style.color = "black";
   }
   else if(themeID == 2){
     document.documentElement.className="dark-mode";
+    document.getElementsByTagName("h1")[0].style.color = "white";
+    document.getElementsByTagName("footer")[0].style.color = "white";
   }
   else if(themeID == 3){
     document.documentElement.className="halloween";
+    document.getElementsByTagName("h1")[0].style.color = "#FF7000";
+    document.getElementsByTagName("footer")[0].style.color = "#FF7000";
   }
   else if(themeID == 4){
     document.documentElement.className="thanksgiving";
+    document.getElementsByTagName("h1")[0].style.color = "#FAF16A";
+    document.getElementsByTagName("footer")[0].style.color = "#FAF16A";
   }
   else if(themeID == 5){
     document.documentElement.className="christmas";
-    document.getElementsByTagName("h1")[0].style.color = "green";
+    document.getElementsByTagName("h1")[0].style.color = "#00cc00";
+    document.getElementsByTagName("footer")[0].style.color = "white";
   }
   else if(themeID == 6){
     document.documentElement.className="newyears";
+    document.getElementsByTagName("h1")[0].style.color = "hotpink";
+    document.getElementsByTagName("footer")[0].style.color = "white";
   }
 }
 
@@ -181,7 +192,6 @@ function checkDate(){
   toggleTheme();
 }
 
-
 var shorten_float = (f) => {
   return f.toFixed(2);
 }

diff --git a/frontend/style/progress.css b/frontend/style/progress.css
@@ -1,3 +1,29 @@
+html, body {
+  height: 100%;
+  font-family: Optima, sans-serif;
+  font-style: ;
+  font-size: 1vw;
+}
+
+footer {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+}
+
+a {
+  color: dodgerblue;
+}
+
+div {
+  margin-bottom: 20px;
+}
+
+div:last-child{
+  margin-bottom: none;
+}
+
 .column {
   display: flex;
   flex-direction: column;
@@ -10,6 +36,10 @@
   max-width: 350px;
 }
 
+.row:nth-child(odd){
+  color:var(--secondary-color);
+}
+
 .split {
   justify-content: space-between;
 }
@@ -23,6 +53,7 @@
   max-width: 300px;
 }
 
+
 #preview-wrapper {
   margin-left: 60px;
   text-align: center;
@@ -41,23 +72,8 @@
   display: none;
 }
 
-footer {
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  text-align: center;
-}
-
-a {
-  color: dodgerblue;
-}
-
-.row:nth-child(odd){
-  color:var(--secondary-color);
-}
-
-html, body{
-  height: 100%;
+#themeSwitch{
+  vertical-align: text-bottom;
 }
 
 :root {
@@ -82,38 +98,41 @@ html, body{
   background-color: black;
   color: #FF7000;
   --secondary-color: #FF7000;
-}
+  background-image: url("../assets/pumpkin.png");
+  background-repeat: no-repeat;
+  background-position: absolute;
+  background-position: left bottom;
+  background-size: 21vw;}
 
 .thanksgiving{
-  background-color: #130A00;
+  background-color: #261a0d;
   color: #FAF16A;
   --secondary-color: #FAF16A;
   background-image: url("../assets/turkey.png");
   background-repeat: no-repeat;
   background-position: absolute;
   background-position: right bottom;
-  background-size: auto;
+  background-size: 24vw;
 }
 
 .christmas{
-  background-color: #000013;
+  background-color: #003c58;
   color: red;
-  --secondary-color:green;
+  --secondary-color:#00cc00;
+  background-image: url("../assets/tree.png");
+  background-repeat: no-repeat;
+  background-position: absolute;
+  background-position: left bottom;
+  background-size: 24vw;
 }
 
 .newyears{
-  background-color: #14054c;
-  color: #ffd376;
-  --secondary-color: #ffd376;
-}
-
-#themeSwitch{
-  vertical-align: text-bottom;
-}
-div {
-  margin-bottom: 20px;
-}
-
-div:last-child{
-  margin-bottom: none;
-}
+  background-color: #00406f;
+  color: white;
+  --secondary-color: hotpink;
+  background-image: url("../assets/new_year.png");
+  background-repeat: no-repeat;
+  background-position: absolute;
+  background-position: right bottom;
+  background-size: 24vw;
+}