snyk-labs · dogeared · Dec 20, 2024
diff --git a/crawl/Inconsolata-Regular.ttf b/crawl/Inconsolata-Regular.ttf
diff --git a/crawl/crawl.html b/crawl/crawl.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.min.js"></script>
+    <script id="usercentrics-cmp" src="https://app.usercentrics.eu/browser-ui/latest/bundle.js" data-ruleset-id="XF1swFzzASeKmr" async></script>
+    <link rel="stylesheet" type="text/css" href="/styles/mainstyle.css">
+    <meta charset="utf-8" />
+
+  </head>
+  <body>
+        <!-- Google Tag Manager (noscript) -->
+        <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T8QMQW9"
+          height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+        <!-- End Google Tag Manager (noscript) -->
+
+        <nav>
+          <img src="/images/snyk-default-solid.svg" alt="Snyk Logo" class="logo">
+          <button class="button-secondary">
+            <a href="/main" style="text-decoration: none; color: inherit;">Launch Vuln Vortex Game</a>              
+          </button>
+          <div class="button-container">
+            <button class="button-secondary">
+              <a href="https://app.snyk.io/login" style="text-decoration: none; color: inherit;">
+                Sign up
+              </a>
+            </button>
+            <button class="button">
+              <a href="https://snyk.io/schedule-a-demo/" style="text-decoration: none; color: inherit;">
+                Book a live demo
+              </a>
+            </button>
+          </div>
+        </nav>
+    <script src="crawlsketch.js"></script>
+    <script>
+      setTimeout(function () {window.location.href = "/main";}, 30000);
+      let stateCheck = setInterval(() => {
+        if (document.getElementsByTagName("main")) {
+          clearInterval(stateCheck);
+          document.getElementsByTagName("main")[0].addEventListener("click", function() {
+            window.location.href = "/main";
+          });
+        }
+      }, 100);
+    </script>
+  </body>
+</html>
diff --git a/crawl/crawlsketch.js b/crawl/crawlsketch.js
@@ -0,0 +1,27 @@
+var y, z = 0, crawlFont;
+function preload() {
+  crawlFont = loadFont('Inconsolata-Regular.ttf');
+}
+
+function setup() {
+  createCanvas(windowWidth, windowHeight, WEBGL);
+  y = height/2-400;
+}
+
+function draw() {
+    background(0);
+    push();
+    textFont(crawlFont);
+    translate(0, y, z);
+    rotateX(PI/4);
+    textAlign(CENTER, TOP);
+    textSize(width/12);
+    fill(253, 88, 163);
+    text("Episode IV\nVULN VORTEX",0,0);
+    textSize(width/20);
+    var w = width*0.8;
+    text("In a world where code powers everything, a rogue AI named Glitch has unleashed chaos.\n\nSystems are crumbling as vulnerabilities spread like wildfire.\n\nNow, it's up to you to stop the collapse. With Patch by your side, you'll dive into the corrupted code, dodge dangerous bugs, and wield powerful tools to fight back.\n\nThe fate of the software ecosystem is in your hands. Are you ready to jump in, take control of Patch, and secure the code before it's too late?", -w/2,width/4,w,height*20);
+    pop();
+    y -= height/600;
+    z -= height/600;
+}
diff --git a/run.js b/run.js
@@ -126,13 +126,18 @@ app.get('/game-over', (req, res, next) => {
   return redirectHomeWithQueryParams(req, res, next);
 });
 
-app.get("/", (req, res) => {
+app.get("/main", (req, res) => {
   err = null;
   buildGame();
   res.sendFile(__dirname + "/dist/index.html");
   render();
 });
 
+app.get("/", (req, res) => {
+  res.redirect("/crawl/crawl.html");
+});
+
+
 app.post("/error", (req, res) => {
   err = req.body;
   render();
@@ -198,6 +203,8 @@ app.use("/code", express.static("code"));
 app.use("/dist", express.static("dist"));
 app.use("/fonts", express.static("fonts"));
 app.use("/images", express.static("images"));
+app.use("/styles", express.static("styles"));
+app.use("/crawl", express.static("crawl"));
 // app.use(csurf({ cookie: true }));
 
 server.listen(port);

diff --git a/styles/mainstyle.css b/styles/mainstyle.css
@@ -0,0 +1,98 @@
+body {
+  background-color: #09052d;
+  color: #fff;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.canvas-holder {
+  background-color: #09052d;
+  width: 100%;
+  text-align: center;
+  margin: auto;
+}
+
+#game {
+  position: relative;
+  width: 100%;
+  text-align: center;
+  margin: 0 auto;
+  margin-top: 50px;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+#game:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+   /* Adjust the glow intensity */
+  box-shadow: 0 0 20px rgba(255, 1 255, 255, 0.2);
+   /* Add a slight blur effect */
+  filter: blur(5px);
+}
+
+
+nav {
+      /* background-color: white; */
+      background-color: rgba(3,3,40,.8);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 10px; /* Add padding for spacing */
+      padding-left: 25px;
+      padding-right: 25px;
+  }
+
+  .logo {
+      width: 100px; /* Adjust width as needed */
+  }
+
+  .button-container {
+      display: flex;
+  }
+
+  .button {
+      background-color: rgb(62, 162, 255); /* Blue color */
+      color: rgb(3, 3, 40);
+      line-height: 1.5;
+      padding: 10px 20px;
+      border: none;
+      border-color: #145deb;
+
+      cursor: pointer;
+      margin-left: 10px; /* Add spacing between buttons */
+
+      font-family: Roboto, sans-serif;
+      font-size: 1rem;
+      font-weight: 700;
+      border-radius: .25rem;
+      letter-spacing: .005rem;
+
+  }
+
+  .button-secondary {
+    background-color: rgb(62, 162, 255); /* Blue color */
+      color: rgb(3, 3, 40);
+      line-height: 1.5;
+      padding: 10px 20px;
+      border: none;
+      border-color: #145deb;
+
+      cursor: pointer;
+      margin-left: 10px; /* Add spacing between buttons */
+
+      font-family: Roboto, sans-serif;
+      font-size: 1rem;
+      font-weight: 700;
+      border-radius: .25rem;
+      letter-spacing: .005rem;
+  }
diff --git a/template.html b/template.html
@@ -45,106 +45,7 @@
       src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"
     ></script>
 
-    <style>
-      body {
-        background-color: #09052d;
-        color: #fff;
-        min-height: 100vh;
-        display: flex;
-        flex-direction: column;
-      }
-
-      .canvas-holder {
-        background-color: #09052d;
-        width: 100%;
-        text-align: center;
-        margin: auto;
-      }
-
-      #game {
-        position: relative;
-        width: 100%;
-        text-align: center;
-        margin: 0 auto;
-        margin-top: 50px;
-        border-radius: 10px;
-        box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
-        border: 2px solid rgba(255, 255, 255, 0.2);
-        cursor: not-allowed;
-        pointer-events: none;
-      }
-
-      #game:after {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        border-radius: inherit;
-         /* Adjust the glow intensity */
-        box-shadow: 0 0 20px rgba(255, 1 255, 255, 0.2);
-         /* Add a slight blur effect */
-        filter: blur(5px);
-      }
-
-
-      nav {
-            /* background-color: white; */
-            background-color: rgba(3,3,40,.8);
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 10px; /* Add padding for spacing */
-            padding-left: 25px;
-            padding-right: 25px;
-        }
-
-        .logo {
-            width: 100px; /* Adjust width as needed */
-        }
-
-        .button-container {
-            display: flex;
-        }
-
-        .button {
-            background-color: rgb(62, 162, 255); /* Blue color */
-            color: rgb(3, 3, 40);
-            line-height: 1.5;
-            padding: 10px 20px;
-            border: none;
-            border-color: #145deb;
-
-            cursor: pointer;
-            margin-left: 10px; /* Add spacing between buttons */
-
-            font-family: Roboto, sans-serif;
-            font-size: 1rem;
-            font-weight: 700;
-            border-radius: .25rem;
-            letter-spacing: .005rem;
-
-        }
-
-        .button-secondary {
-          background-color: rgb(62, 162, 255); /* Blue color */
-            color: rgb(3, 3, 40);
-            line-height: 1.5;
-            padding: 10px 20px;
-            border: none;
-            border-color: #145deb;
-
-            cursor: pointer;
-            margin-left: 10px; /* Add spacing between buttons */
-
-            font-family: Roboto, sans-serif;
-            font-size: 1rem;
-            font-weight: 700;
-            border-radius: .25rem;
-            letter-spacing: .005rem;
-        }
-    </style>
+    <link rel="stylesheet" type="text/css" href="/styles/mainstyle.css">
   </head>
 
   <body>