one time upload

device/Desktop/css/gui.css

@@ -0,0 +1,102 @@
+.title {
+  font-family: monospace;
+  font-size:28px;
+  color: #81c9e3;
+}
+.intro {
+  font-family: monospace;
+  font-size: 18px; 
+  color: white;
+
+}
+
+body{
+    background-image: url('https://i.pinimg.com/originals/9c/8b/33/9c8b33f7348e1c07a4eb7025f69902da.gif');
+    background-repeat: repeat;
+    padding:0;
+    margin:0;
+}
+#titlebox {
+  border-radius: 25px;
+  background-image: linear-gradient(to right, #12755e , #a69e12);
+  margin: 0 auto;
+  padding: 15px; 
+  width: 25%;
+  flex-wrap: wrap;
+  overflow: hidden;
+}
+#textbox {
+  border-radius: 25px;
+  background-image: linear-gradient(to bottom right, #127531 , #a612a6);
+  margin: 0 auto; 
+  padding: 50px; 
+  width: 50%;
+  display: flex;
+  flex-wrap: wrap;
+
+}
+.button {
+  background-color: #C061CF;
+  border: none;
+  border-radius: 25px;
+  padding: 15px 25px;
+  width: 15%;
+  text-align: center;
+  font-size: 15px;
+  margin: 4px 2px;
+  cursor: pointer;
+  -webkit-animation: color-change 2s infinite;
+  -moz-animation: color-change 2s infinite;
+  -o-animation: color-change 2s infinite;
+  -ms-animation: color-change 2s infinite;
+  animation: color-change 2s infinite;
+  overflow: hidden; 
+}
+#audio1 {
+ width: 35px;
+  height: 35px;
+  background-image: url('https://static.thenounproject.com/png/684787-200.png');
+  background-size: cover;
+  background-color:#e39681;
+  cursor: pointer;
+  transition: 0.2s;
+}
+#audio1:hover{
+  background-color: #e3b781;
+}
+@-webkit-keyframes color-change {
+    0% { color: orange; }
+    30% { color: yellow; }
+	45% { color: lightgreen; }
+	90% { color: purple; }
+	100% { color: pink; }
+}
+@-moz-keyframes color-change {
+    0% { color: orange; }
+    30% { color: yellow; }
+	45% { color: lightgreen; }
+	90% { color: purple; }
+	100% { color: pink; }
+}
+@-ms-keyframes color-change {
+    0% { color: orange; }
+    30% { color: yellow; }
+	45% { color: lightgreen; }
+	90% { color: purple; }
+	100% { color: pink; }
+}
+@-o-keyframes color-change {
+    0% { color: orange; }
+    30% { color: yellow; }
+	45% { color: lightgreen; }
+	90% { color: purple; }
+	100% { color: pink; }
+}
+@keyframes color-change {
+	0% { color: orange; }
+    30% { color: yellow; }
+	45% { color: lightgreen; }
+	90% { color: purple; }
+	100% { color: pink; }
+}
+

device/Desktop/css/gui.old.css

@@ -0,0 +1,102 @@
+.title {
+  font-family: monospace;
+  font-size:28px;
+  color: #d47f68;
+}
+.intro {
+  font-family: monospace;
+  font-size: 18px; 
+  color: white;
+
+}
+
+body{
+    background-image: url('https://i.pinimg.com/originals/9c/8b/33/9c8b33f7348e1c07a4eb7025f69902da.gif');
+    background-repeat: repeat;
+    padding:0;
+    margin:0;
+}
+#titlebox {
+  border-radius: 25px;
+  background-image: linear-gradient(to right, #12755e , #a69e12);
+  margin: 0 auto;
+  padding: 15px; 
+  width: 30%;
+  flex-wrap: wrap;
+  overflow: hidden;
+}
+#textbox {
+  border-radius: 25px;
+  background-image: linear-gradient(to bottom right, #127531 , #a612a6);
+  margin: 0 auto; 
+  padding: 50px; 
+  width: 50%;
+  display: flex;
+  flex-wrap: wrap;
+
+}
+.button {
+  background-color: #C061CF;
+  border: none;
+  border-radius: 25px;
+  padding: 15px 25px;
+  width: 15%;
+  text-align: center;
+  font-size: 15px;
+  margin: 4px 2px;
+  cursor: pointer;
+  -webkit-animation: color-change 2s infinite;
+  -moz-animation: color-change 2s infinite;
+  -o-animation: color-change 2s infinite;
+  -ms-animation: color-change 2s infinite;
+  animation: color-change 2s infinite;
+  overflow: hidden; 
+}
+#audio1 {
+ width: 30px;
+  height: 30px;
+  background-image: url('https://www.freeiconspng.com/thumbs/sound-off-icon/sound-off-music-mute-off-sound-speaker-volume-icon-16.png');
+  background-size: cover;
+  background-color:#e39681;
+}
+@-webkit-keyframes color-change {
+    0% { color: red; }
+	25% { color: orange; }
+    50% { color: yellow; }
+	80% { color: green; }
+    90% { color: blue; }
+	100% { color: purple; }
+}
+@-moz-keyframes color-change {
+    0% { color: red; }
+	25% { color: orange; }
+    50% { color: yellow; }
+	80% { color: green; }
+    90% { color: blue; }
+	100% { color: purple; }
+}
+@-ms-keyframes color-change {
+    0% { color: red; }
+	25% { color: orange; }
+    50% { color: yellow; }
+	80% { color: green; }
+    90% { color: blue; }
+	100% { color: purple; }
+}
+@-o-keyframes color-change {
+    0% { color: red; }
+	25% { color: orange; }
+    50% { color: yellow; }
+	80% { color: green; }
+    90% { color: blue; }
+	100% { color: purple; }
+}
+@keyframes color-change {
+    0% { color: red; }
+	25% { color: orange; }
+    50% { color: yellow; }
+	80% { color: green; }
+    90% { color: blue; }
+	100% { color: purple; }
+}
+

device/Desktop/js/console.js

@@ -0,0 +1,4 @@
+  console.log(`41 76 69 61 74 69 6f 6e`);
+  console.log(`boi wat da hell boi? `);
+  console.log(`A hex number!? Oh no! what should i do with this kind of information??`);
+

device/Desktop/pcindex.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+<title id="title"></title>
+<link rel="icon" href="img/S.png" type="image/icon type">
+<link rel="stylesheet" type="text/css" href="css/gui.css">
+<script src="js/console.js"></script>
+
+<body>
+<center>                         
+<p id="demo"></p>
+<p class="title" id="titlebox">Skoupidia</p>
+<p id="demo"></p>
+<p class="intro" id="textbox">Hi and Welcome to Skoupidia!<br><br>This website is for me to compIle all my Science Computer assigNment into a single webpage or Some sort of portfolio :P. Nothing advance have been coded. Everything are the same cliche high school assignment. You know, BMI calculator, average of number given.. that kind of stuff.<br><br>To be frank, I sPEnt a lot of my time on this stuff and when it come to Class presentation, it only goes for around 3-4 minutes. Not worth iT.<br>Therefore why this page exist. I don't want all my time wasted just like that.<br><br>-Danish ( ͡~ ͜ʖ ͡°)
+<br><br><br><br>
+<button id="audio1" onClick="playPause()" title="Love on a Roll - Guy Trevino and Friends">
+  <audio src="file/LOR.mp3"; autoplay></audio>
+</button>
+<span style="color: #e39681">👈 Hey you! Click that button please..</span>
+</p>
+<p id="demo"></p>
+
+
+<button style="font-size:18px; font-family: monospace;" class="button" href="javascript:void(0)" id="modurl" onclick="popURL()">Projects</button>
+<button style="font-size:18px; font-family: monospace;" class="button" href="javascript:void(0)" id="modsocial" onclick="popSocial()">Links</button>
+<button style="font-size:18px; font-family: monospace;" class="button" href="javascript:void(0)" id="modother" onclick="popOther()">Others</button>
+
+<p id="demo"></p>
+
+
+</center>
+
+<!-- I don't know how to make it work on single script. Had to separate it -->
+<script>
+  var titles = ['Skoupidia', 'Garbage', 'Scrap', 'Debitage', 'Haha long title! U cant actually read this unless you view the page source. By the time you are reading this, its not worth it. [Btw u should check the console for some sort of a key]. U are wasting your time reading this. Cause U arent supposed to & cant see the rest'];
+  var title = titles[Math.floor(Math.random() * titles.length)] // pick random item
+  document.title = title
+</script>
+<script>
+var aud = document.getElementById("audio1").children[0];
+  var isPlaying = false;
+  aud.pause();
+
+  function playPause() {
+    if (isPlaying) {
+      aud.pause();
+    } else {
+      aud.play();
+    }
+    isPlaying = !isPlaying;
+  }
+
+</script>
+<script>
+window.onbeforeunload = function () {
+  window.scrollTo(0, 0);
+}
+</script>
+
+</body>
+</html>