Merge pull request #57 from aidan-yip/preview

Added new icons and links

Author: aidan-yip

dark_style.css

@@ -49,7 +49,8 @@
     background: rgb(0, 79, 42);
   }
 
-  #photos, #settings {
+  #photos,
+  #settings {
     background: rgb(36, 36, 36);
     background: linear-gradient(0deg, rgb(23, 23, 23) 0%, rgb(63, 63, 63) 100%);
   }
@@ -64,7 +65,15 @@
     background: linear-gradient(0deg, rgb(133, 60, 0) 0%, rgb(117, 0, 0) 100%);
   }
 
-  #facebook, #twitter, #google, #pq, #spotify, #soundcloud, #band, #apple {
+  #facebook,
+  #twitter,
+  #google,
+  #pq,
+  #spotify,
+  #soundcloud,
+  #band,
+  #apple,
+  #audio_tri {
     background: rgb(25, 25, 25);
     background: linear-gradient(
       0deg,
@@ -106,4 +115,21 @@
     );
   }
 
+  #newave {
+    background: rgb(129, 135, 149);
+    background: linear-gradient(
+      318deg,
+      rgba(129, 135, 149, 1) 0%,
+      rgba(0, 44, 65, 1) 100%
+    );
+  }
+
+  #skrem {
+    background: rgb(114, 136, 114);
+    background: radial-gradient(
+      circle,
+      rgba(114, 136, 114, 1) 0%,
+      rgba(41, 61, 41, 1) 100%
+    );
+  }
 }

index.html

@@ -92,33 +92,33 @@
         <!--row 3-->
         <div
           class="app_icon_scroll"
-          id=""
+          id="newave"
           data-tilt
           data-tilt-glare
           data-tilt-max-glare="0.6"
           data-tilt-scale="113%"
         >
-          <img src="" id="" />
+          <img src="./public/app_icons/nw_logo.png" id="newave_img" />
         </div>
         <div
           class="app_icon_scroll"
-          id=""
+          id="skrem"
           data-tilt
           data-tilt-glare
           data-tilt-max-glare="0.6"
           data-tilt-scale="113%"
         >
-          <img src="" id="" />
+          <img src="./public/app_icons/skrem.png" id="skrem_img" />
         </div>
         <div
           class="app_icon_scroll"
-          id=""
+          id="audio_tri"
           data-tilt
           data-tilt-glare
           data-tilt-max-glare="0.6"
           data-tilt-scale="113%"
         >
-          <img src="" id="" />
+          <img src="./public/app_icons/audio_tri.png" id="audio_tri_img" />
         </div>
       </div>
     </div>
@@ -194,7 +194,7 @@
           />
         </div>
       </div>
-      <!-- app row 5 across -->
+      <!-- app row 1 across -->
       <div id="scroll_container">
         <div
           class="app_icon_scroll"
@@ -260,7 +260,7 @@
           <img src="./public/app_icons/icons8-x-480.png" id="twitter_img" />
         </div>
 
-        <!-- app row 5 across -->
+        <!-- app row 2 across -->
 
         <div
           class="app_icon_scroll"
@@ -330,7 +330,7 @@
           />
         </div>
 
-        <!-- app row 5 across -->
+        <!-- app row 3 across -->
 
         <div
           class="app_icon_scroll"
@@ -387,7 +387,7 @@
           <img src="./public/app_icons/icons8-github-480.png" id="github_img" />
         </div>
 
-        <!-- app row 5 across -->
+        <!-- app row 4 across -->
 
         <div
           class="app_icon_scroll"

public/app_icons/audio_tri.png

@@ -85,6 +85,10 @@ const folder_back = document.getElementById("folder_back");
 const app_folder = document.getElementById("app_folder");
 const folder_open = document.getElementById("app_folder_open");
 
+const newave = document.getElementById("newave");
+const skrem = document.getElementById("skrem");
+const audio_tri = document.getElementById("audio_tri");
+
 //Folder inner
 const mac = document.getElementById("mac");
 const ios = document.getElementById("ios");
@@ -677,3 +681,39 @@ ios.addEventListener("keypress", function (event) {
     ios.click();
   }
 });
+
+newave.onclick = () => {
+  location.href = "https://www.instagram.com/newave_oceans_official/";
+};
+
+//Enter = onClick event
+newave.addEventListener("keypress", function (event) {
+  if (event.key === "Enter") {
+    event.preventDefault();
+    newave.click();
+  }
+});
+
+skrem.onclick = () => {
+  location.href = "https://www.instagram.com/skremzy/";
+};
+
+//Enter = onClick event
+skrem.addEventListener("keypress", function (event) {
+  if (event.key === "Enter") {
+    event.preventDefault();
+    skrem.click();
+  }
+});
+
+audio_tri.onclick = () => {
+  location.href = "https://www.instagram.com/audio_phobia/";
+};
+
+//Enter = onClick event
+audio_tri.addEventListener("keypress", function (event) {
+  if (event.key === "Enter") {
+    event.preventDefault();
+    audio_tri.click();
+  }
+});

public/app_icons/nw_logo.png

@@ -498,6 +498,35 @@ img {
   width: 47%;
 }
 
+#newave {
+  background: rgb(185, 236, 247);
+  background: linear-gradient(
+    318deg,
+    rgba(185, 236, 247, 1) 0%,
+    rgba(12, 125, 212, 1) 100%
+  );
+}
+
+#newave_img {
+  width: 50%;
+}
+
+#skrem {
+  background: #5bdfa8;
+}
+
+#skrem_img {
+  width: 39%;
+}
+
+#audio_tri {
+  background: #000000;
+}
+
+#audio_tri_img {
+  width: 47%;
+}
+
 /* hover */
 .app_icon:hover {
   cursor: pointer;