From 3527be6a8912a411c716b59438fb9896d8925e76 Mon Sep 17 00:00:00 2001
From: MonkeyGG2 <spinosaurus882@gmail.com>
Date: Thu, 17 Aug 2023 20:08:59 +0530
Subject: [PATCH] added new background and added cards

---
 css/loading-old.css     |  65 +++++++++++
 css/loading.css         |  70 -----------
 css/style.css           |  64 +++++++++++
 index.html              |  96 ++++++++--------
 js/bg.js                | 160 ++++++++++++++++++++++++++
 index.js => js/index.js |   0
 js/loading-old.js       | 249 ++++++++++++++++++++++++++++++++++++++++
 js/loading.js           | 232 +++----------------------------------
 8 files changed, 603 insertions(+), 333 deletions(-)
 create mode 100644 css/loading-old.css
 create mode 100644 js/bg.js
 rename index.js => js/index.js (100%)
 create mode 100644 js/loading-old.js

diff --git a/css/loading-old.css b/css/loading-old.css
new file mode 100644
index 00000000..7c5d2f9c
--- /dev/null
+++ b/css/loading-old.css
@@ -0,0 +1,65 @@
+.hexagonGrid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    z-index: 1;
+
+    /* this makes browser use GPU acceleration for blur */
+    will-change: contents;
+
+    filter: blur(2.5px);
+}
+
+.hexagonGrid .row {
+    display: inline-flex;
+    margin-top: -32px;
+    margin-left: -50px;
+}
+
+.hexagonGrid .row:nth-child(even) {
+    margin-left: 2px;
+}
+
+.hexagonGrid .row .hexagon {
+    position: relative;
+    width: 100px;
+    height: 110px;
+    margin: 4px 2px;
+    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+}
+
+.hexagonGrid .row .hexagon::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--bg);
+    opacity: 0.95;
+    transition: 1s;
+}
+
+.hexagonGrid .row .hexagon::after {
+    content: "";
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    bottom: 4px;
+    left: 4px;
+    background: var(--bg);
+    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+}
+
+.hexagonGrid .row .hexagon:hover::before {
+    background: #72acb1;
+    opacity: 1;
+    transition: 0s;
+}
+
+.hexagonGrid .row .hexagon:hover::after {
+    background: var(--bg);
+}
\ No newline at end of file
diff --git a/css/loading.css b/css/loading.css
index b755fffc..12e55b96 100644
--- a/css/loading.css
+++ b/css/loading.css
@@ -141,74 +141,4 @@ section {
     top: 0;
     left: 0;
     overflow: hidden;
-}
-
-.particles {
-    background: var(--bg);
-}
-
-.hexagonGrid {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    z-index: 1;
-
-    /* this makes browser use GPU acceleration for blur */
-    will-change: contents;
-
-    filter: blur(2.5px);
-}
-
-.hexagonGrid .row {
-    display: inline-flex;
-    margin-top: -32px;
-    margin-left: -50px;
-}
-
-.hexagonGrid .row:nth-child(even) {
-    margin-left: 2px;
-}
-
-.hexagonGrid .row .hexagon {
-    position: relative;
-    width: 100px;
-    height: 110px;
-    margin: 4px 2px;
-    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
-}
-
-.hexagonGrid .row .hexagon::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: var(--bg);
-    opacity: 0.95;
-    transition: 1s;
-}
-
-.hexagonGrid .row .hexagon::after {
-    content: "";
-    position: absolute;
-    top: 4px;
-    right: 4px;
-    bottom: 4px;
-    left: 4px;
-    background: var(--bg);
-    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
-}
-
-.hexagonGrid .row .hexagon:hover::before {
-    background: #72acb1;
-    opacity: 1;
-    transition: 0s;
-}
-
-.hexagonGrid .row .hexagon:hover::after {
-    background: var(--bg);
 }
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 6abdd38b..cb2f8a65 100644
--- a/css/style.css
+++ b/css/style.css
@@ -36,4 +36,68 @@ body.noscript {
     background-color: black;
     color: white;
     z-index: 999;
+}
+
+#particles {
+    position: absolute;
+    z-index: 0;
+    background: var(--bg);
+    margin: 0;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 100vw;
+    overflow: hidden;
+    filter: blur(2px);  
+}
+
+.homepage {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 10;
+}
+
+h1 {
+    z-index: 50;
+    margin-left: 2.5%;
+    position: absolute;
+}
+
+.card-row {
+    display: flex;
+    flex-direction: row;
+    width: 90%;
+    margin-top: 12.5%;
+}
+
+.column {
+    text-align: center;
+    float: left;
+    width: 25%;
+    padding: 0 10px;
+    cursor: pointer;
+}
+
+button {
+    text-decoration: none;
+    background: transparent;
+    border: none;
+    color: var(--font-color);
+    padding: 0;
+    margin: 0;
+}
+
+.card {
+    box-shadow: 0 4px 8px 0 hsl(from var(--button-color) h s l);
+    padding: 16px;
+    text-align: center;
+    background-color: var(--bg-second);
+    border-radius: 50px;
+    font-size: 150%;
+    color: var(--font-color);
+    transition: all 0.2s ease-in;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 5fe54bdf..f20b4d4b 100644
--- a/index.html
+++ b/index.html
@@ -6,15 +6,14 @@
     <meta name="keywords" content="games, gamez, unblocked, unblocked games, tunnel rush, run 3, run, 3, hacks, chrome dino unblocked, chrome dino, chrome dinosaur, dinosaur game, dinosaur, chrome hacks, chrome dino hacks, chrome dinosaur hacks, chrome dino game hack, unblocked game site, idle breakout, idle breakout hack, idle breakout save, idle breakout code, idle breakout save generator, idle breakout unblocked, 2048, 2048 unblocked, 2048 no ads, no ads, ads, 2048 high score, cookie clicker, cookie clicker unblocked, cookie clicker github, cookie clicker no ads, flappy bird, flappy bird no ads, flappy bird unblocked, flash games, flash, bloons, bloons tower defense, bloons td, bloons td 1, bloons td 2, bloons td 3, bloons td 4, bloons td 5, bloons td 6, online, duck life, duck life 1, duck life 2, ducklife 3, factory balls, learn to fly, learn to fly game, raft wars, the impossible quiz, this is the only level, impossible quiz, impossible quiz online, impossible quiz answers, impossible quiz question, imposible quiz, quiz, quiz answers, hextris, retrobowl, retrobowl unblocked, retrobowl online, rooftop snipers, rooftop snipers unblocked, slope, slope online, slope unblocked, slope unblocked site, slope unblocked no ads, slope unblocked google site, slope unblocked online, slope unblocked school, smart ball, tunnel rush, tunnel rush online, tunnel rush unblocked, tunnel rush unblocked site, tunnel rush unblocked no ads, tunnel rush unblocked google site, slope google site, tunnel rush google site, tunnel rush unblocked online, tunnel rush unblocked school">
     <meta name="og:image" content="favicon.png">
 
-    <!--changed this so there isnt a flash of no css-->
-    <link href="css/loading.css" rel="stylesheet" type="text/css"> 
-    <link href="css/style.css" rel="stylesheet" type="text/css"> 
-    
-
-    <!-- not sure why this isnt <script src="js/loading.js"></script> -->
-    <!-- <script src="js/loading.js"></script> if you replace the below with this the image loads but the hexagons disappear completely-->
+    <!-- preloading some resources -->
     <link href="js/loading.js" rel="preload" as="script">
     <link href="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js" rel="preload" as="script">
+    <link href="css/loading.css" rel="preload" as="style" type="text/css"> 
+
+    <!-- now loading css -->
+    <link href="css/loading.css" rel="stylesheet" type="text/css"> 
+    <link href="css/style.css" rel="stylesheet" type="text/css">
 </head>
 <body>
     <noscript>
@@ -26,10 +25,6 @@
     <div class="loading">
         <div>
             <div class="loading-tip">
-                <script>
-                    const tips = ["Press CTRL+C to cloak your current tab","Press CTRL+M to mask your current tab", "Press CTRL+B to go back to the home page", "Join our discord server!", "Make sure to enable popups for automatic cloak", "Why are you here?"]
-                    document.getElementsByClassName("loading-tip")[0].textContent = "Loading...\n" + tips[Math.floor(Math.random() * tips.length)];
-                </script>
             </div>
             <div class="loading-infinity">
                 <br>
@@ -65,48 +60,51 @@
             <img src="imgs/icon.png" alt="MonkeyGG2 Icon" onclick="this.src = 'imgs/secret-icon.png'">
         </div>
     </div>
-    <div>
-    </div>
     <section id="everything-else">
         <h1>MonkeyGG2</h1>
-        <canvas class="particles"></canvas>
-        
-        <div class="hexagonGrid"></div>
+        <div id="particles"></div>
 
-        <!-- TEMPORARY!!! increases loading times to demonstrate loading screen -->
-        <img src="https://random.imagecdn.app/1500/1500" alt="random image">
+        <div class="homepage">
+            <div class="card-row">
+                <div class="column">
+                    <button>
+                        <div class="card">
+                            <img src="" alt="">
+                            <h5>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore repellat blanditiis exercitationem nesciunt enim esse nihil aliquam deserunt ratione, rerum possimus placeat consequuntur excepturi repudiandae tenetur eos ut delectus fuga?</h5>
+                        </div>
+                    </button>
+                </div>
+                <div class="column">
+                    <button>
+                        <div class="card">
+                            <img src="" alt="">
+                            <h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, ut molestias sapiente corrupti odio vitae in illum consectetur nam veniam. Quis explicabo exercitationem vitae asperiores esse libero, voluptates magnam praesentium.</h5>
+                        </div>
+                    </button>
+                </div>
+                <div class="column">
+                    <button>
+                        <div class="card">
+                            <img src="" alt="">
+                            <h5>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, fugit placeat. Esse, accusamus amet in accusantium minus debitis fuga? Rem, eius. Laudantium, accusantium? Deleniti suscipit sint, doloremque sed enim ipsum?</h5>
+                        </div>
+                    </button>
+                </div>
+                <div class="column">
+                    <button>
+                        <div class="card">
+                            <img src="" alt="">
+                            <h5>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis explicabo provident quae similique placeat. Magni commodi odit dolorum sed eaque impedit animi explicabo dignissimos? Id dolorem eum et nisi expedita!</h5>
+                        </div>
+                    </button>
+                </div>
+            </div>
+        </div>
     </section>
 
-    <!-- loading.js file and jQuery are preloaded -->
-    <!-- they are loaded before though? -->
-    <script>
-        const loading = document.createElement("script");
-        loading.src = "js/loading.js";
-        document.body.appendChild(loading);
-
-        const jquery = document.createElement("script");
-        jquery.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js";
-        document.body.appendChild(jquery);
-        
-        jquery.onload = () => {            
-            $(window).on("load", () => {
-                $(".track").attr("stroke", "url(#grad2)");
-                $(".worm1").hide();
-                $(".worm2").hide();
-
-                $(".loading").fadeOut({
-                    duration: 300,
-                    /*complete: () => {
-                        setTimeout(500, () => {
-                            $("#everything-else").fadeIn({
-                                duration: 500,
-                                easing: "easeInOutSine"
-                            });
-                        });
-                    }*/
-                });
-            });
-        }
-    </script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js" defer></script>
+    <script src="js/loading.js" defer></script>
+    <script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.min.js' defer></script>
+    <script src="js/bg.js" defer></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/js/bg.js b/js/bg.js
new file mode 100644
index 00000000..b7a32033
--- /dev/null
+++ b/js/bg.js
@@ -0,0 +1,160 @@
+/*--------------------
+Vars
+--------------------*/
+const deg = a => Math.PI / 180 * a;
+const rand = (v1, v2) => Math.floor(v1 + Math.random() * (v2 - v1));
+const opt = {
+  particles: window.width / 500 ? 1000 : 500,
+  noiseScale: 0.005,
+  angle: Math.PI / 180 * -90,
+  h1: rand(0, 360),
+  h2: rand(0, 360),
+  s1: rand(20, 90),
+  s2: rand(20, 90),
+  l1: rand(30, 80),
+  l2: rand(30, 80),
+  strokeWeight: 2,
+  tail: 82 };
+
+const Particles = [];
+let time = 0;
+document.body.addEventListener("click", () => {
+  opt.h1 = rand(0, 360);
+  opt.h2 = rand(0, 360);
+  opt.s1 = rand(20, 90);
+  opt.s2 = rand(20, 90);
+  opt.l1 = rand(30, 80);
+  opt.l2 = rand(30, 80);
+  opt.angle += deg(random(60, 60)) * (Math.random() > 0.5 ? 1 : -1);
+
+  for (let p of Particles) {
+    p.randomize();
+  }
+});
+
+/*--------------------
+Particle
+--------------------*/
+class Particle {
+  constructor(x, y) {
+    this.x = x;
+    this.y = y;
+    this.lx = x;
+    this.ly = y;
+    this.vx = 0;
+    this.vy = 0;
+    this.ax = 0;
+    this.ay = 0;
+    this.hueSem = Math.random();
+    this.hue = this.hueSem > 0.5 ? 20 + opt.h1 : 20 + opt.h2;
+    this.sat = this.hueSem > 0.5 ? opt.s1 : opt.s2;
+    this.light = this.hueSem > 0.5 ? opt.l1 : opt.l2;
+    this.maxSpeed = this.hueSem > 0.5 ? 3 : 2;
+  }
+
+  randomize() {
+    this.hueSem = Math.random();
+    this.hue = this.hueSem > 0.5 ? 20 + opt.h1 : 20 + opt.h2;
+    this.sat = this.hueSem > 0.5 ? opt.s1 : opt.s2;
+    this.light = this.hueSem > 0.5 ? opt.l1 : opt.l2;
+    this.maxSpeed = this.hueSem > 0.5 ? 3 : 2;
+  }
+
+  update() {
+    this.follow();
+
+    this.vx += this.ax;
+    this.vy += this.ay;
+
+    var p = Math.sqrt(this.vx * this.vx + this.vy * this.vy);
+    var a = Math.atan2(this.vy, this.vx);
+    var m = Math.min(this.maxSpeed, p);
+    this.vx = Math.cos(a) * m;
+    this.vy = Math.sin(a) * m;
+
+    this.x += this.vx;
+    this.y += this.vy;
+    this.ax = 0;
+    this.ay = 0;
+
+    this.edges();
+  }
+
+  follow() {
+    let angle =
+    noise(
+    this.x * opt.noiseScale,
+    this.y * opt.noiseScale,
+    time * opt.noiseScale) *
+
+    Math.PI *
+    0.5 +
+    opt.angle;
+
+    this.ax += Math.cos(angle);
+    this.ay += Math.sin(angle);
+  }
+
+  updatePrev() {
+    this.lx = this.x;
+    this.ly = this.y;
+  }
+
+  edges() {
+    if (this.x < 0) {
+      this.x = width;
+      this.updatePrev();
+    }
+    if (this.x > width) {
+      this.x = 0;
+      this.updatePrev();
+    }
+    if (this.y < 0) {
+      this.y = height;
+      this.updatePrev();
+    }
+    if (this.y > height) {
+      this.y = 0;
+      this.updatePrev();
+    }
+  }
+
+  render() {
+    stroke(`hsla(${this.hue}, ${this.sat}%, ${this.light}%, .5)`);
+    line(this.x, this.y, this.lx, this.ly);
+    this.updatePrev();
+  }}
+
+
+/*--------------------
+Setup
+--------------------*/
+function setup() {
+  let canvas = createCanvas(windowWidth, windowHeight);
+  canvas.parent("particles");
+
+  for (let i = 0; i < opt.particles; i++) {
+    Particles.push(new Particle(Math.random() * width, Math.random() * height));
+  }
+  strokeWeight(opt.strokeWeight);
+}
+
+/*--------------------
+Draw
+--------------------*/
+function draw() {
+  time++;
+  background(0, 100 - opt.tail);
+
+  for (let p of Particles) {
+    p.update();
+    p.render();
+  }
+}
+
+/*--------------------
+Resize
+--------------------*/
+function windowResized() {
+  resizeCanvas(windowWidth, windowHeight);
+}
\ No newline at end of file
diff --git a/index.js b/js/index.js
similarity index 100%
rename from index.js
rename to js/index.js
diff --git a/js/loading-old.js b/js/loading-old.js
new file mode 100644
index 00000000..fb44a03f
--- /dev/null
+++ b/js/loading-old.js
@@ -0,0 +1,249 @@
+// hexagons will be used as a separate theme later
+
+function changeLoadingTip() {
+    const tips = ["Press CTRL+C to cloak your current tab","Press CTRL+M to mask your current tab", "Press CTRL+B to go back to the home page", "Join our discord server!", "Make sure to enable popups for automatic cloak", "Why are you here?"]
+    const element = document.getElementsByClassName("loading-tip")[0];
+
+    element.textContent =  "Loading... \n" + tips[Math.floor(Math.random() * tips.length)];
+}
+
+changeLoadingTip();
+$("#everything-else").hide();
+
+let changeTip = setInterval(() => {
+    changeLoadingTip();
+}, 3000);
+
+$(window).on("load", () => {
+    $(".track").attr("stroke", "url(#grad2)");
+    $(".worm1").hide();
+    $(".worm2").hide();
+    clearInterval(changeTip);
+
+    $(".loading").fadeOut({
+        duration: 300,
+        complete: () => {
+            setTimeout(() => {
+                $("#everything-else").fadeIn({
+                    duration: 500,
+                    easing: "swing"
+                }, 200);
+                hexagonGrid();
+            }, 100);
+        }
+    });
+});
+
+// PARTICLES
+const cvs = document.getElementsByClassName('particles')[0];
+const ctx = cvs.getContext('2d');
+
+cvs.width = window.innerWidth;
+cvs.height = window.innerHeight;
+
+let particlesArray;
+
+let mouse = {
+    x: null,
+    y: null,
+    radius: 170
+}
+
+window.addEventListener('mousemove', function(event) {
+    mouse.x = event.x;
+    mouse.y = event.y;
+    mouse.radius = 170;
+});
+
+document.onmousemove = (function(_) {
+    var onmousestop = function() {
+        mouse.radius = 0;
+    }, thread;
+
+    return function() {
+        clearTimeout(thread);
+        thread = setTimeout(onmousestop, 10);
+    };
+})();
+
+
+class Particle {
+    constructor(x, y, directionX, directionY, size, color) {
+        this.x = x;
+        this.y = y;
+        this.directionX = directionX;
+        this.directionY = directionY;
+        this.size = size;
+        this.color = color;
+    }
+
+    draw() {
+        ctx.beginPath();
+        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2, false);
+        ctx.fillStyle = '#a3f6fd';
+        ctx.fill();
+    }
+
+    update() {
+        if (this.x > cvs.width || this.x < 0) {
+            this.directionX = -this.directionX;
+        }
+
+        if (this.y > cvs.height || this.y < 0) {
+            this.directionY = -this.directionY;
+        }
+
+        let dx = mouse.x - this.x;
+        let dy = mouse.y - this.y;
+        let distance = Math.sqrt(dx * dx + dy * dy);
+        if (distance < mouse.radius + this.size) {
+            if (mouse.x < this.x && this.x < cvs.width - this.size * 10) {
+                this.x += 10;
+            }
+
+            if (mouse.x > this.x && this.x > this.size * 10) {
+                this.x -= 10;
+            }
+
+            if (mouse.y < this.y && this.y < cvs.height - this.size * 10) {
+                this.y += 10;
+            }
+
+            if (mouse.y > this.y && this.y > this.size * 10) {
+                this.y -= 10;
+            }
+        }
+        this.x += this.directionX;
+        this.y += this.directionY;
+
+        this.draw();
+    }
+}
+
+function init() {
+    particlesArray = [];
+    let numberOfParticles = (cvs.height * cvs.width) / 9000;
+    for (let i = 0; i < numberOfParticles * 0.25; i++) {
+        let size = (Math.random() * 35) + 1;
+        let x = (Math.random() * ((innerWidth - size * 2) - (size * 2)) + size * 2);
+        let y = (Math.random() * ((innerWidth - size * 2) - (size * 2)) + size * 2);
+        let directionX = (Math.random() * 5) - 2.5;
+        let directionY = (Math.random() * 5) - 2.5;
+        let color = '#a3f6fd';
+        particlesArray.push(new Particle(x, y, directionX, directionY, size, color));
+    }
+}
+
+function connect() {
+    let opacityValue = 1;
+    for (let i = 0; i < particlesArray.length; i++) {
+        for (let j = i; j < particlesArray.length; j++) {
+            let distance = ((particlesArray[i].x - particlesArray[j].x) * (particlesArray[i].x - particlesArray[j].x)) + ((particlesArray[i].y - particlesArray[j].y) * (particlesArray[i].y - particlesArray[j].y));
+
+            if (distance < (cvs.width/ 7) * (cvs.height / 7)) {
+                opacityValue = 1 - (distance / 20000);
+                ctx.strokeStyle = 'rgba(159, 253, 50,' + opacityValue + ')';
+                ctx.lineWidth = 1;
+                ctx.beginPath();
+                ctx.moveTo(particlesArray[i].x, particlesArray[i].y);
+                ctx.lineTo(particlesArray[j].x, particlesArray[j].y);
+                ctx.stroke();
+            }
+        }
+    }
+}
+
+function animate() {
+    requestAnimationFrame(animate);
+    ctx.clearRect(0, 0, innerWidth, innerHeight);
+    for (let i = 0; i < particlesArray.length; i++) {
+        particlesArray[i].update();
+    }
+    connect();
+}
+
+window.addEventListener('resize', function() {
+    cvs.width = innerWidth;
+    cvs.height = this.innerHeight;
+    mouse.radius = 170;
+    init();
+});
+
+window.addEventListener('mouseout', function() {
+    mouse.x = undefined;
+    mouse.y = undefined;
+});
+
+init();
+animate();
+
+// HEXAGON GRID
+function hexagonGrid() {
+  const HEXAGON_GRID = document.getElementsByClassName("hexagonGrid")[0];
+  const CONTAINER = HEXAGON_GRID.parentNode;
+
+  let wall = {
+    width: CONTAINER.offsetWidth,
+    height: CONTAINER.offsetHeight
+  };
+
+  let rowsNumber = Math.ceil(wall.height / 80);
+  let columnsNumber = Math.ceil(wall.width / 100) + 1;
+
+  HEXAGON_GRID.innerHTML = "";
+
+  for (let i = 0; i < rowsNumber; i++) {
+    let row = document.createElement("div");
+    row.className = "row";
+    HEXAGON_GRID.appendChild(row);
+  }
+
+  let rows = HEXAGON_GRID.querySelectorAll(".row");
+
+  for (let i = 0; i < rows.length; i++) {
+    for (let j = 0; j < columnsNumber; j++) {
+      let hexagon = document.createElement("div");
+      hexagon.className = "hexagon";
+      rows[i].appendChild(hexagon);
+    }
+  }
+}
+
+hexagonGrid();
+
+window.addEventListener('resize', function() {
+  hexagonGrid();
+});
+
+// FPS METER
+(function () {
+  let previousTime = Date.now();
+  let frames = 0;
+  let refreshRate = 1000;
+
+  let fpsMeter = document.createElement("div");
+  fpsMeter.id = "fpsMeter";
+  document.body.appendChild(fpsMeter);
+
+  requestAnimationFrame(function loop() {
+    const TIME = Date.now();
+    frames++;
+    if (TIME > previousTime + refreshRate) {
+      let fps = Math.round((frames * refreshRate) / (TIME - previousTime));
+      previousTime = TIME;
+      frames = 0;
+      fpsMeter.innerHTML = "FPS: " + fps * (1000 / refreshRate);
+    }
+    requestAnimationFrame(loop);
+  });
+
+  fpsMeter.style.position = "fixed";
+  fpsMeter.style.top = "25px";
+  fpsMeter.style.right = "25px";
+  fpsMeter.style.background = "rgba(0, 0, 0, 0.5)";
+  fpsMeter.style.padding = "10px";
+  fpsMeter.style.color = "rgba(255, 255, 255, 0.75)";
+  fpsMeter.style.fontFamily = "Monospace";
+  fpsMeter.style.fontSize = "24px";
+  fpsMeter.style.zIndex = "10000";
+})();
diff --git a/js/loading.js b/js/loading.js
index af381978..f5f801f0 100644
--- a/js/loading.js
+++ b/js/loading.js
@@ -5,224 +5,28 @@ function changeLoadingTip() {
     element.textContent =  "Loading... \n" + tips[Math.floor(Math.random() * tips.length)];
 }
 
+changeLoadingTip();
+$("#everything-else").hide();
+
 let changeTip = setInterval(() => {
     changeLoadingTip();
 }, 3000);
 
-document.onload = () => {
-    //clearInterval(changeTip);
-}
+$(window).on("load", () => {
+    $(".track").attr("stroke", "url(#grad2)");
+    $(".worm1").hide();
+    $(".worm2").hide();
+    clearInterval(changeTip);
 
-// PARTICLES
-const cvs = document.getElementsByClassName('particles')[0];
-const ctx = cvs.getContext('2d');
-
-cvs.width = window.innerWidth;
-cvs.height = window.innerHeight;
-
-let particlesArray;
-
-let mouse = {
-    x: null,
-    y: null,
-    radius: 170
-}
-
-window.addEventListener('mousemove', function(event) {
-    mouse.x = event.x;
-    mouse.y = event.y;
-    mouse.radius = 170;
-});
-
-document.onmousemove = (function(_) {
-    var onmousestop = function() {
-        mouse.radius = 0;
-    }, thread;
-
-    return function() {
-        clearTimeout(thread);
-        thread = setTimeout(onmousestop, 10);
-    };
-})();
-
-
-class Particle {
-    constructor(x, y, directionX, directionY, size, color) {
-        this.x = x;
-        this.y = y;
-        this.directionX = directionX;
-        this.directionY = directionY;
-        this.size = size;
-        this.color = color;
-    }
-
-    draw() {
-        ctx.beginPath();
-        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2, false);
-        ctx.fillStyle = '#a3f6fd';
-        ctx.fill();
-    }
-
-    update() {
-        if (this.x > cvs.width || this.x < 0) {
-            this.directionX = -this.directionX;
+    $(".loading").fadeOut({
+        duration: 300,
+        complete: () => {
+            setTimeout(() => {
+                $("#everything-else").fadeIn({
+                    duration: 500,
+                    easing: "swing"
+                }, 200);
+            }, 100);
         }
-
-        if (this.y > cvs.height || this.y < 0) {
-            this.directionY = -this.directionY;
-        }
-
-        let dx = mouse.x - this.x;
-        let dy = mouse.y - this.y;
-        let distance = Math.sqrt(dx * dx + dy * dy);
-        if (distance < mouse.radius + this.size) {
-            if (mouse.x < this.x && this.x < cvs.width - this.size * 10) {
-                this.x += 10;
-            }
-
-            if (mouse.x > this.x && this.x > this.size * 10) {
-                this.x -= 10;
-            }
-
-            if (mouse.y < this.y && this.y < cvs.height - this.size * 10) {
-                this.y += 10;
-            }
-
-            if (mouse.y > this.y && this.y > this.size * 10) {
-                this.y -= 10;
-            }
-        }
-        this.x += this.directionX;
-        this.y += this.directionY;
-
-        this.draw();
-    }
-}
-
-function init() {
-    particlesArray = [];
-    let numberOfParticles = (cvs.height * cvs.width) / 9000;
-    for (let i = 0; i < numberOfParticles * 0.25; i++) {
-        let size = (Math.random() * 35) + 1;
-        let x = (Math.random() * ((innerWidth - size * 2) - (size * 2)) + size * 2);
-        let y = (Math.random() * ((innerWidth - size * 2) - (size * 2)) + size * 2);
-        let directionX = (Math.random() * 5) - 2.5;
-        let directionY = (Math.random() * 5) - 2.5;
-        let color = '#a3f6fd';
-        particlesArray.push(new Particle(x, y, directionX, directionY, size, color));
-    }
-}
-
-function connect() {
-    let opacityValue = 1;
-    for (let i = 0; i < particlesArray.length; i++) {
-        for (let j = i; j < particlesArray.length; j++) {
-            let distance = ((particlesArray[i].x - particlesArray[j].x) * (particlesArray[i].x - particlesArray[j].x)) + ((particlesArray[i].y - particlesArray[j].y) * (particlesArray[i].y - particlesArray[j].y));
-
-            if (distance < (cvs.width/ 7) * (cvs.height / 7)) {
-                opacityValue = 1 - (distance / 20000);
-                ctx.strokeStyle = 'rgba(159, 253, 50,' + opacityValue + ')';
-                ctx.lineWidth = 1;
-                ctx.beginPath();
-                ctx.moveTo(particlesArray[i].x, particlesArray[i].y);
-                ctx.lineTo(particlesArray[j].x, particlesArray[j].y);
-                ctx.stroke();
-            }
-        }
-    }
-}
-
-function animate() {
-    requestAnimationFrame(animate);
-    ctx.clearRect(0, 0, innerWidth, innerHeight);
-    for (let i = 0; i < particlesArray.length; i++) {
-        particlesArray[i].update();
-    }
-    connect();
-}
-
-window.addEventListener('resize', function() {
-    cvs.width = innerWidth;
-    cvs.height = this.innerHeight;
-    mouse.radius = 170;
-    init();
+    });
 });
-
-window.addEventListener('mouseout', function() {
-    mouse.x = undefined;
-    mouse.y = undefined;
-});
-
-init();
-animate();
-
-// HEXAGON GRID
-function hexagonGrid() {
-  const HEXAGON_GRID = document.getElementsByClassName("hexagonGrid")[0];
-  const CONTAINER = HEXAGON_GRID.parentNode;
-
-  let wall = {
-    width: CONTAINER.offsetWidth,
-    height: CONTAINER.offsetHeight
-  };
-
-  let rowsNumber = Math.ceil(wall.height / 80);
-  let columnsNumber = Math.ceil(wall.width / 100) + 1;
-
-  HEXAGON_GRID.innerHTML = "";
-
-  for (let i = 0; i < rowsNumber; i++) {
-    let row = document.createElement("div");
-    row.className = "row";
-    HEXAGON_GRID.appendChild(row);
-  }
-
-  let rows = HEXAGON_GRID.querySelectorAll(".row");
-
-  for (let i = 0; i < rows.length; i++) {
-    for (let j = 0; j < columnsNumber; j++) {
-      let hexagon = document.createElement("div");
-      hexagon.className = "hexagon";
-      rows[i].appendChild(hexagon);
-    }
-  }
-}
-
-hexagonGrid();
-
-window.addEventListener('resize', function() {
-  hexagonGrid();
-});
-
-// FPS METER
-(function () {
-  let previousTime = Date.now();
-  let frames = 0;
-  let refreshRate = 1000;
-
-  let fpsMeter = document.createElement("div");
-  fpsMeter.id = "fpsMeter";
-  document.body.appendChild(fpsMeter);
-
-  requestAnimationFrame(function loop() {
-    const TIME = Date.now();
-    frames++;
-    if (TIME > previousTime + refreshRate) {
-      let fps = Math.round((frames * refreshRate) / (TIME - previousTime));
-      previousTime = TIME;
-      frames = 0;
-      fpsMeter.innerHTML = "FPS: " + fps * (1000 / refreshRate);
-    }
-    requestAnimationFrame(loop);
-  });
-
-  fpsMeter.style.position = "fixed";
-  fpsMeter.style.top = "25px";
-  fpsMeter.style.right = "25px";
-  fpsMeter.style.background = "rgba(0, 0, 0, 0.5)";
-  fpsMeter.style.padding = "10px";
-  fpsMeter.style.color = "rgba(255, 255, 255, 0.75)";
-  fpsMeter.style.fontFamily = "Monospace";
-  fpsMeter.style.fontSize = "24px";
-  fpsMeter.style.zIndex = "10000";
-})();