diff --git a/crawl/Inconsolata-Regular.ttf b/crawl/Inconsolata-Regular.ttf
new file mode 100644
index 0000000..592ccd2
Binary files /dev/null and b/crawl/Inconsolata-Regular.ttf differ
diff --git a/crawl/crawl.html b/crawl/crawl.html
new file mode 100644
index 0000000..3eb4f9d
--- /dev/null
+++ b/crawl/crawl.html
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/crawl/crawlsketch.js b/crawl/crawlsketch.js
new file mode 100644
index 0000000..527aada
--- /dev/null
+++ 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;
+}
\ No newline at end of file
diff --git a/run.js b/run.js
index 9b4b32f..fee3552 100644
--- 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
new file mode 100644
index 0000000..2eeb66f
--- /dev/null
+++ 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;
+ }
\ No newline at end of file
diff --git a/template.html b/template.html
index 4c43b54..c77a1a5 100644
--- a/template.html
+++ b/template.html
@@ -45,106 +45,7 @@
src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"
>
-
+