Merge pull request #69 from aidan-yip/preview

Added up arrow to homebar

.gitignore

@@ -2,3 +2,4 @@
 .DS_Store
 public/app_icons/.DS_Store
 public/.DS_Store
+public/.DS_Store

index.html

@@ -128,6 +128,7 @@
       </div>
     </div>
     <div id="background">
+      <img src="./public/icons/icons8-collapse-arrow-100.png" id="arrow_up" />
       <div id="home_bar">
         <div
           class="app_icon"
@@ -422,7 +423,10 @@
           data-tilt-max-glare="0.6"
           data-tilt-scale="113%"
         >
-          <img src="./public/app_icons/icons8-airpods-3-100.png" id="airpods_img" />
+          <img
+            src="./public/app_icons/icons8-airpods-3-100.png"
+            id="airpods_img"
+          />
         </div>
 
         <div

script.js

@@ -15,6 +15,9 @@ function check_mobile() {
   }
 }
 
+//Arrow
+const arrow_up = document.getElementById("arrow_up");
+
 let isMobile =
   /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
     navigator.userAgent
@@ -24,6 +27,7 @@ if (isMobile) {
   if (window.innerHeight > window.innerWidth) {
     alert("Please rotate to Landscape!");
   }
+  arrow_up.style.display = "none";
   console.log("Mobile device detected");
 }
 
@@ -357,6 +361,11 @@ home_bar.onmouseleave = () => {
 
 //Link onclick events
 
+//arrow
+arrow_up.onmouseover = () => {
+  arrow_up.style.cursor = "pointer";
+}
+
 //folder
 app_folder.onclick = () => {
   folder_back.style.pointerEvents = "all";

styles.css

@@ -139,9 +139,20 @@ body {
   transform: translateZ(20px);
 }
 
+#arrow_up {
+  width: 3%;
+  height: 35px;
+  z-index: 4;
+  position: relative;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 36%;
+  opacity: 70%;
+}
+
 #color_input {
   width: 50%;
-  height: 60%;
+  height: 70%;
   border: solid 3px #212121;
   border-radius: 10px;
   transform: translateZ(20px);
@@ -154,6 +165,7 @@ body {
 
 #background {
   display: flex;
+  flex-direction: column;
   justify-content: center;
   width: 100vw;
   height: 90vh;
@@ -706,6 +718,10 @@ img {
     display: none;
   }
 
+  #color_input {
+    height: 50%;
+  }
+
   input[type="range"] {
     -webkit-appearance: none;
     width: 80%;