From 98becc2af22d192add6e6b4f752eccc32007de47 Mon Sep 17 00:00:00 2001
From: Evan Pratten <ewpratten@gmail.com>
Date: Thu, 4 Apr 2019 16:20:20 -0400
Subject: [PATCH] added animation

---
 css/animations.css    | 153 ++++++++++++++++++++++++++++++++++++++++++
 css/main.css          |  65 +++++++++++-------
 devmon.html           |  58 ++++++++++++++++
 index.html            |  20 ++++--
 js/content-rizer.js   |  55 +++++++++++++++
 js/devrant-monitor.js |  20 ++++++
 js/links.js           |  22 ++++++
 7 files changed, 362 insertions(+), 31 deletions(-)
 create mode 100644 css/animations.css
 create mode 100644 devmon.html
 create mode 100644 js/content-rizer.js
 create mode 100644 js/devrant-monitor.js
 create mode 100644 js/links.js

diff --git a/css/animations.css b/css/animations.css
new file mode 100644
index 0000000..a8596ca
--- /dev/null
+++ b/css/animations.css
@@ -0,0 +1,153 @@
+
+/* Animations */
+@keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+/* Firefox < 16 */
+@-moz-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+/* Internet Explorer */
+@-ms-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+@keyframes fadeout {
+    from { opacity: 1;  }
+    to   { opacity: 0; }
+}
+
+/* Firefox < 16 */
+@-moz-keyframes fadeout {
+    from { opacity: 1; }
+    to   { opacity: 0; }
+}
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes fadeout {
+    from { opacity: 1; }
+    to   { opacity: 0; }
+}
+
+/* Internet Explorer */
+@-ms-keyframes fadeout {
+    from { opacity: 1; }
+    to   { opacity: 0; }
+}
+
+@keyframes slideleft {
+    from { left: 0;  }
+    to   { left: -100vw; }
+}
+
+/* Firefox < 16 */
+@-moz-keyframes slideleft {
+    from { left: 0;  }
+    to   { left: -100vw; }
+}
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes slideleft {
+    from { left: 0;  }
+    to   { left: -100vw; }
+}
+/* Internet Explorer */
+@-ms-keyframes slideleft {
+    from { left: 0;  }
+    to   { left: -100vw; }
+}
+
+@keyframes slideright {
+    from { left: -30vw;  }
+    to   { left: 0; }
+}
+
+/* Firefox < 16 */
+@-moz-keyframes slideright {
+    from { left: -30vw;  }
+    to   { left: 0; }
+}
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes slideright {
+    from { left: -30vw;  }
+    to   { left: 0; }
+}
+/* Internet Explorer */
+@-ms-keyframes slideright {
+    from { left: -30vw;  }
+    to   { left: 0; }
+}
+
+@keyframes slideup {
+    from { top: -100vh;  }
+    to   { top: 0; }
+}
+
+/* Firefox < 16 */
+@-moz-keyframes slideup {
+    from { top: -100vh;  }
+    to   { top: 0; }
+}
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes slideup {
+    from { top: -100vh;  }
+    to   { top: 0; }
+}
+/* Internet Explorer */
+@-ms-keyframes slideup {
+    from { top: -100vh;  }
+    to   { top: 0; }
+}
+
+/* Animation helpers */
+.fade-out{
+    -webkit-animation: fadeout 0.5s; /* Safari, Chrome and Opera > 12.1 */
+       -moz-animation: fadeout 0.5s; /* Firefox < 16 */
+        -ms-animation: fadeout 0.5s; /* Internet Explorer */
+         -o-animation: fadeout 0.5s; /* Opera < 12.1 */
+            animation: fadeout 0.5s;
+  animation-fill-mode: forwards; 
+}
+
+.slide-left{
+        -webkit-animation: slideleft 1s; /* Safari, Chrome and Opera > 12.1 */
+           -moz-animation: slideleft 1s; /* Firefox < 16 */
+            -ms-animation: slideleft 1s; /* Internet Explorer */
+             -o-animation: slideleft 1s; /* Opera < 12.1 */
+                animation: slideleft 1s;
+      animation-fill-mode: forwards; 
+}
+
+.slide-right{
+    -webkit-animation: slideright 1s; /* Safari, Chrome and Opera > 12.1 */
+       -moz-animation: slideright 1s; /* Firefox < 16 */
+        -ms-animation: slideright 1s; /* Internet Explorer */
+         -o-animation: slideright 1s; /* Opera < 12.1 */
+            animation: slideright 1s;
+  /* animation-fill-mode: forwards;  */
+}
+
+.slide-up{
+    -webkit-animation: slideup 2s; /* Safari, Chrome and Opera > 12.1 */
+       -moz-animation: slideup 2s; /* Firefox < 16 */
+        -ms-animation: slideup 2s; /* Internet Explorer */
+         -o-animation: slideup 2s; /* Opera < 12.1 */
+            animation: slideup 2s;
+  animation-fill-mode: forwards; 
+}
+.hidden{
+    display:none !important;
+}
\ No newline at end of file
diff --git a/css/main.css b/css/main.css
index 3e5f4e1..de2e15f 100644
--- a/css/main.css
+++ b/css/main.css
@@ -10,13 +10,25 @@ canvas {
 }
 
 html {
+    overflow: scroll;
+    overflow-x: hidden;
     scroll-behavior: smooth;
 }
+::-webkit-scrollbar {
+    width: 0px;  /* remove scrollbar space */
+    background: transparent;  /* optional: just make scrollbar invisible */
+}
+/* optional: show position indicator in red */
+::-webkit-scrollbar-thumb {
+    background: #FF0000;
+}
 
 body{
     margin:0;
     padding:0;
     height:100%;
+
+    background-color: rgba(130, 130, 238, 0.299);
     
     -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
        -moz-animation: fadein 1s; /* Firefox < 16 */
@@ -52,6 +64,15 @@ article {
     
 }
 
+.back{
+    text-align:left;
+}
+
+.back a:hover, .back a:visited, .back a:link, .back a:active, .back a:any-link{
+    color:rgb(201, 201, 226);
+    margin:0;
+}
+
 .name-wrapper{
     margin:40;
 }
@@ -75,12 +96,19 @@ article {
 }
 
 .content-box{
-    max-width:60vw;
+    max-width:50vw;
     margin:auto;
     background-color: rgb(233, 233, 255);
     padding:10px;
     border-radius:10px;
     text-align:center;
+    border-style: solid;
+    border-color: #3f32ca;
+    border-width: 5px;
+}
+
+dashed{
+    color: #3f32ca;
 }
 
 .content-box-wrapper{
@@ -102,6 +130,9 @@ h1{
 .content{
     width:100%;
 }
+.thin{
+    width:0px !important;
+}
 
 .empty{
     width:30vw;
@@ -112,6 +143,10 @@ h1{
     height:5vh;
 }
 
+.four-height{
+    height:25vh;
+}
+
 .full-height{
     height:100vh;
     background:none;
@@ -136,6 +171,10 @@ a:hover, a:visited, a:link, a:active, a:any-link{
     margin-right:0;
 }
 
+li a:hover{
+    margin:0;
+}
+
 /* Set font size for small screen */
 @media only screen and (max-width: 600px) {
     .name{
@@ -188,27 +227,3 @@ a:hover, a:visited, a:link, a:active, a:any-link{
     }
 
 }
-
-/* Animations */
-@keyframes fadein {
-    from { opacity: 0; }
-    to   { opacity: 1; }
-}
-
-/* Firefox < 16 */
-@-moz-keyframes fadein {
-    from { opacity: 0; }
-    to   { opacity: 1; }
-}
-
-/* Safari, Chrome and Opera > 12.1 */
-@-webkit-keyframes fadein {
-    from { opacity: 0; }
-    to   { opacity: 1; }
-}
-
-/* Internet Explorer */
-@-ms-keyframes fadein {
-    from { opacity: 0; }
-    to   { opacity: 1; }
-}
diff --git a/devmon.html b/devmon.html
new file mode 100644
index 0000000..cb02693
--- /dev/null
+++ b/devmon.html
@@ -0,0 +1,58 @@
+<head id="site">
+    <title>RetryLife</title>
+
+    <link href="/css/animations.css" rel="stylesheet">
+    <link href="/css/main.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Germania+One" rel="stylesheet"> 
+    <link href="https://fonts.googleapis.com/css?family=Black+Ops+One" rel="stylesheet"> 
+    <link href="https://fonts.googleapis.com/css?family=Denk+One" rel="stylesheet"> 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+</head>
+<body >
+    <div id="particles-js" >
+        
+        <!-- Blank vertical space -->
+        <div class="full-height" id="blank"></div>
+        <!-- Main content -->
+        <table class="content">
+            <tr>
+                <td class="empty thin" id="blank top"></td>
+                <td class="info">
+                    <div class="content-box " id="content">
+                        <!-- Back button -->
+                        <div class="back"><a onclick="slidedown('/')">Back</a></div>
+
+                        <!-- Main text -->
+                        <div class="content-box-wrapper">
+                            <!-- Post time -->
+                            <h1><dashed>---</dashed> Post Gap <dashed>---</dashed></h1>
+                            <p>This is the amount of time between the last, and second last post on devrant</p>
+                            <h2 id="time">20s</h2>
+
+                            <!-- Newest post -->
+                            <h1><dashed>---</dashed> Newest Post <dashed>---</dashed></h1>
+                            <p>This is the rant id of the latest rant</p>
+                            <h2 id="id">0000</h2>
+
+                            <!-- ID Gap -->
+                            <h1><dashed>---</dashed> ID Gap <dashed>---</dashed></h1>
+                            <p>There is sometimes a gap between the id of each new rant form the last. This is the current gap</p>
+                            <h2 id="gap">0000</h2>
+
+
+                        </div>
+                    </div>
+                </td>
+            </tr>
+        </table>
+    </div>
+
+    <!-- JS -->
+    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
+    <script src="/js/particles.min.js"></script>
+    <script src="/js/main.js"></script>
+    <script src="/js/console.js"></script>
+    <script src="/js/links.js"></script>
+    <script src="/js/devrant-monitor.js"></script>
+    <script src="/js/content-rizer.js"></script>
+</body>
\ No newline at end of file
diff --git a/index.html b/index.html
index 8637431..f533b5a 100644
--- a/index.html
+++ b/index.html
@@ -1,17 +1,19 @@
 <head>
     <title>RetryLife</title>
 
+
+    <link href="/css/animations.css" rel="stylesheet">
     <link href="/css/main.css" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Germania+One" rel="stylesheet"> 
     <link href="https://fonts.googleapis.com/css?family=Black+Ops+One" rel="stylesheet"> 
     <link href="https://fonts.googleapis.com/css?family=Denk+One" rel="stylesheet"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
 </head>
-<body>
+<body >
     <div id="particles-js">
         <article>
             <!-- About Panel -->
-            <scetion><div class="about">
+            <scetion><div class="about" id="about">
 
                 <!-- Spacer -->
                 <div class="three-height"></div>
@@ -27,7 +29,6 @@
                 <div class="links">
                     <a href="https://github.com/ewpratten">GitHub</a><br>
                     <a href="https://twitter.com/ewpratten">Twitter</a><br>
-                    <!-- <a href="https://twitch.tv/retraxa">Twitch</a><br> -->
                     <a href="https://devrant.com/users/ewpratten">Devrant</a><br>
                     <a href="https://github.com/frc5024">Robotics</a><br>
                     <a href="#content">More</a>
@@ -57,14 +58,20 @@
                     <div class="content-box" id="content">
                         <div class="content-box-wrapper">
                             <!-- About Me -->
-                            <h1>--- About Me ---</h1>
+                            <h1><dashed>---</dashed> About Me <dashed>---</dashed></h1>
                             <p>I am a teenager who loves to write code and make stuff. I tend to spend my free time either programming or thinking about programming</p>
 
                             <!-- Robotics -->
-                            <h1>--- Robotics ---</h1>
+                            <h1><dashed>---</dashed> Robotics <dashed>---</dashed></h1>
                             <p>As a part of Raider Robotics (frc5024), I co-lead the programming team and help teach new programmers about programming in compiled languages, interfacing with hardware, and computer vision.</p>
 
-                            <!--  -->
+                            <!-- Projects -->
+                            <h1><dashed>---</dashed> Projects <dashed>---</dashed></h1>
+                            <p>Every year, I work on a large number of projects. Some of the interesting ones are listed here:</p>
+
+                            <li><a onclick="transition('https://github.com/frc5024')">Robotics Projects</a></li>
+                            <li><a onclick="transition('/devmon.html')">devRant API Status</a></li>
+
                         </div>
                     </div>
                 </td>
@@ -76,4 +83,5 @@
     <script src="/js/particles.min.js"></script>
     <script src="/js/main.js"></script>
     <script src="/js/console.js"></script>
+    <script src="/js/links.js"></script>
 </body>
\ No newline at end of file
diff --git a/js/content-rizer.js b/js/content-rizer.js
new file mode 100644
index 0000000..0def26b
--- /dev/null
+++ b/js/content-rizer.js
@@ -0,0 +1,55 @@
+async function slideup(){
+    var blank = document.getElementById("blank");
+    var site = document.getElementById("site");
+
+    if (screen && screen.width > 600) {
+        site.style = 'scroll-behavior: unset;';
+
+        window.location = "#top"
+
+        await sleep(400);
+        site.style = 'scroll-behavior: smooth;';
+
+        window.location = "#content"
+        await sleep(1000);
+    }
+    blank.style = "display:none!important;overflow: hidden; position:fixed; ";
+
+    console.log("slide");
+
+    return;
+}
+
+const scrollToTop = () => {
+    const c = document.documentElement.scrollTop || document.body.scrollTop;
+    if (c > 0) {
+      window.requestAnimationFrame(scrollToTop);
+      window.scrollTo(0, c - c);
+    }
+  };
+
+async function slidedown(link){
+    var blank = document.getElementById("blank");
+    var site = document.getElementById("site");
+
+    if (screen && screen.width > 600) {
+        blank.style = "display:block !important; ";
+
+        site.style = 'scroll-behavior: unset !important;';
+        window.location = "#content"
+
+        await sleep(20);
+
+        site.style = 'scroll-behavior: smooth !important;';
+        scrollToTop();
+
+        await sleep(500);
+    }
+
+    window.location = link;
+
+
+    return;
+}
+
+slideup();
\ No newline at end of file
diff --git a/js/devrant-monitor.js b/js/devrant-monitor.js
new file mode 100644
index 0000000..ebe0079
--- /dev/null
+++ b/js/devrant-monitor.js
@@ -0,0 +1,20 @@
+async function refreshStats() {
+    //get ids
+    var time = document.getElementById("time");
+    var gap = document.getElementById("gap");
+    var id = document.getElementById("id");
+
+    // loop
+    while (true) {
+        $.getJSON('https://api.retrylife.ca/devrant/rants/info', function (data) {
+            // console.log(data);
+            time.innerHTML = data["time_gap"] + "s";
+            id.innerHTML = data["newest_id"];
+            gap.innerHTML = data["id_gap"];
+        });
+
+        await sleep(5000);
+    }
+}
+
+refreshStats();
\ No newline at end of file
diff --git a/js/links.js b/js/links.js
new file mode 100644
index 0000000..7752240
--- /dev/null
+++ b/js/links.js
@@ -0,0 +1,22 @@
+function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+  
+async function transition(link){
+    var content = document.getElementById("content");
+    var about = document.getElementById("about");
+    var all = document.getElementById("body");
+
+    console.log(link);
+
+    if (screen && screen.width > 600) {
+        content.classList.add("fade-out");
+        await sleep(300);
+        about.classList.add("slide-left");
+        // all.classList.add("fade-out");
+        await sleep(1000);
+        // content.classList.add("hidden");
+    }
+    
+    window.location = link;
+}
\ No newline at end of file