flomero · flomero · Jan 20, 2025 · Jan 20, 2025 · Jan 20, 2025 · Jan 20, 2025
diff --git a/config/complete.conf b/config/complete.conf
diff --git a/default/400.html b/default/400.html
diff --git a/default/index.html b/default/index.html
diff --git a/examples/complete/404.html b/examples/complete/404.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Error 404 - Page Not Found</title>
+	<style>
+		body {
+			background-color: #f1f1f1;
+			color: #333;
+			font-family: Arial, sans-serif;
+			margin: 0;
+			padding: 0;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			height: 100vh;
+			text-align: center;
+		}
+		.glitch {
+			position: relative;
+			color: #333;
+			font-size: 2em;
+			font-weight: bold;
+			animation: glitch 1s infinite;
+		}
+		@keyframes glitch {
+			0% {
+				text-shadow: 2px 2px #ff0000, -2px -2px #00ff00;
+			}
+			20% {
+				text-shadow: -2px -2px #ff0000, 2px 2px #00ff00;
+			}
+			40% {
+				text-shadow: 2px -2px #ff0000, -2px 2px #00ff00;
+			}
+			60% {
+				text-shadow: -2px 2px #ff0000, 2px -2px #00ff00;
+			}
+			80% {
+				text-shadow: 2px 2px #ff0000, -2px -2px #00ff00;
+			}
+			100% {
+				text-shadow: -2px -2px #ff0000, 2px 2px #00ff00;
+			}
+		}
+	</style>
+</head>
+<body>
+<div>
+	<div class="glitch">ERROR 404</div>
+	<p class="glitch">Page Not Found</p>
+</div>
+</body>
+</html>
diff --git a/examples/complete/complete.conf b/examples/complete/complete.conf
@@ -0,0 +1,55 @@
+http {
+    server {
+        listen 80;
+        server_name localhost 127.0.0.1;
+
+        root /examples/complete;
+        index /index.html;
+
+        client_max_body_size 1024m;
+        client_body_buffer_size 1024k;
+        client_header_buffer_size 1024k;
+
+        request_timeout 10m;
+
+        error_page 404 /404.html;
+
+        location / {
+            allow_methods GET;
+            autoindex on;
+        }
+
+        location /test/scripts {
+            allow_methods GET POST;
+            autoindex on;
+             cgi .py /usr/bin/python3;
+        }
+    }
+
+        server {
+            listen 8080;
+            server_name localhost 127.0.0.1;
+
+            root /examples/complete;
+            index /newindex.html;
+
+            client_max_body_size 1024m;
+            client_body_buffer_size 1024k;
+            client_header_buffer_size 1024k;
+
+            request_timeout 10m;
+
+            error_page 404 /404.html;
+
+            location / {
+                allow_methods GET;
+                autoindex on;
+            }
+
+            location /test/scripts {
+                allow_methods GET POST;
+                autoindex on;
+                 cgi .py /usr/bin/python3;
+            }
+        }
+}
diff --git a/default/favicon.ico → examples/complete/favicon.ico b/default/favicon.ico → examples/complete/favicon.ico
diff --git a/examples/complete/index.html b/examples/complete/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Webserv</title>
+	<link rel="stylesheet" href="styles.css">
+</head>
+<body>
+<header id="matrixHeader" class="glitch">Webserv</header>
+<canvas id="matrixCanvas"></canvas>
+<footer id="matrixFooter" class="glitch">Flo Fischer   ~    Louen Gréau     ~    Johannes Moritz</footer>
+<script src="script.js"></script>
+</body>
+</html>
diff --git a/examples/complete/newindex.html b/examples/complete/newindex.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Complete different website :)</title>
+	<link rel="stylesheet" href="styles.css">
+</head>
+<body>
+<header id="matrixHeader" class="glitch">Different Index</header>
+<canvas id="matrixCanvas"></canvas>
+<footer id="matrixFooter" class="glitch">Flo Fischer   ~    Louen Gréau     ~    Johannes Moritz</footer>
+<script src="script.js"></script>
+</body>
+</html>
diff --git a/examples/complete/script.js b/examples/complete/script.js
@@ -0,0 +1,86 @@
+// Canvas and Context Setup
+const canvas = document.getElementById('matrixCanvas');
+const ctx = canvas.getContext('2d');
+
+// Matrix Effect Variables
+const fontSize = 16;
+let columns = Math.floor(canvas.width / fontSize);
+let drops = Array(columns).fill(1);
+
+// Resize Canvas to Fullscreen and Update Matrix Variables
+function resizeCanvas() {
+	canvas.width = window.innerWidth;
+	canvas.height = window.innerHeight;
+	columns = Math.floor(canvas.width / fontSize);
+	drops = Array(columns).fill(1);
+}
+
+resizeCanvas();
+window.addEventListener('resize', resizeCanvas);
+
+// Expanded Character Set
+const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-=[]{}|;:\'",.<>?/`~';
+
+// Matrix Drawing Function
+function drawMatrix() {
+	ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
+	ctx.fillRect(0, 0, canvas.width, canvas.height);
+	ctx.font = `${fontSize}px monospace`;
+
+	for (let i = 0; i < drops.length; i++) {
+		const text = letters.charAt(Math.floor(Math.random() * letters.length));
+		const x = i * fontSize;
+		const y = drops[i] * fontSize;
+
+		// Default Dark Green Text
+		ctx.fillStyle = '#003300';
+		ctx.fillText(text, x, y);
+
+		// Reset if Characters Reach Bottom
+		if (y > canvas.height && Math.random() > 0.975) {
+			drops[i] = 0;
+		}
+
+		drops[i]++;
+	}
+
+	requestAnimationFrame(drawMatrix);
+}
+
+// Start Matrix Animation
+drawMatrix();
+
+// Header Glitch Effect
+const glitchElements = document.querySelectorAll('.glitch');
+
+// Random Glitch Effect for Elements
+function addGlitchEffect() {
+	glitchElements.forEach(element => {
+		const glitchChance = Math.random();
+		if (glitchChance > 0.8) {
+			element.style.opacity = Math.random() > 0.5 ? '0.8' : '1';
+
+			// Change individual letters
+			const originalText = element.textContent;
+			let glitchedText = '';
+			for (let i = 0; i < originalText.length; i++) {
+				if (Math.random() > 0.7) {
+					glitchedText += letters.charAt(Math.floor(Math.random() * letters.length));
+				} else {
+					glitchedText += originalText[i];
+				}
+			}
+			element.textContent = glitchedText;
+
+			// Revert back to original text after a short delay
+			setTimeout(() => {
+				element.textContent = originalText;
+			}, 200);
+		} else {
+			element.style.opacity = '1';
+		}
+	});
+}
+
+// Apply Glitch Effect at Random Intervals
+setInterval(addGlitchEffect, 500);