From 2b0dd71d1885b2225815a588e649931683a9dd5b Mon Sep 17 00:00:00 2001
From: ilia <nil.nil.polack@gmail.com>
Date: Thu, 30 Oct 2025 00:14:57 +0100
Subject: [PATCH] add docs/index.html to redirect to docs/html/index.html

---
 docs/Cell.js      |  46 +++++++
 docs/Grid.js      | 144 +++++++++++++++++++
 docs/PerlinFog.js |  83 +++++++++++
 docs/index.html   |  92 +++++++++++++
 docs/style.css    | 342 ++++++++++++++++++++++++++++++++++++++++++++++
 5 files changed, 707 insertions(+)
 create mode 100644 docs/Cell.js
 create mode 100644 docs/Grid.js
 create mode 100644 docs/PerlinFog.js
 create mode 100644 docs/index.html
 create mode 100644 docs/style.css

diff --git a/docs/Cell.js b/docs/Cell.js
new file mode 100644
index 00000000..9af6ef24
--- /dev/null
+++ b/docs/Cell.js
@@ -0,0 +1,46 @@
+class Cell {
+	constructor(p5, i, j, size) {
+		this.p5 = p5;
+		this.printed = false;
+		this.gridPos = this.p5.createVector(i, j);
+		this.realPos = this.p5.createVector(i * size, j * size);
+		this.n = 0.0;
+		this.size = size;
+		this.group = 0;; 
+	}
+
+	putChar(color) {
+		let p = this.p5;
+		let chars = ['.', ':', '-', '=', '+', '*', '#', '%', '@'];
+		let index;
+		if (this.printed)
+			index = p.floor((1 - this.n) * chars.length);
+		else
+			index = p.floor(this.n * chars.length);
+		p.textSize(this.size);
+		if (this.printed)
+			color = 255 - color;
+		p.fill(color);
+		p.text(chars[index], this.realPos.x, this.realPos.y);
+	}
+
+	draw(color, alpha) {
+		let p = this.p5;
+		if (this.printed)
+			color = 255 - color;
+		p.fill(color, 20, 89, alpha);
+		p.rect(this.realPos.x, this.realPos.y, this.size);
+	}
+
+	contains(px, py) {
+		if (px >= this.realPos.x && px <= this.realPos.x + this.size &&
+			py >= this.realPos.y && py <= this.realPos.y + this.size ) {
+			return true;
+		}
+		return false;
+	}
+
+	changeColor() {
+		this.draw(34, 89, 244);
+	}
+}
diff --git a/docs/Grid.js b/docs/Grid.js
new file mode 100644
index 00000000..2d3c8b95
--- /dev/null
+++ b/docs/Grid.js
@@ -0,0 +1,144 @@
+// Created by Ilia:Ilia@hazardous.net
+
+// parent: is id of html element
+// Hold a buffer
+class Grid {
+	constructor (p5, width, height, cellsize, parent) {
+		this.p5	= p5;
+      	this.buffer;
+		this.ctx;
+		this.cells;
+		this.noise = {x:1, y:5000, z:0};
+		this.cellSize;
+		this.blur;
+		this.saturation;
+		this.tones;
+		this.init(width, height, cellsize, parent);
+	}
+
+	init(width, height, size, parent) {
+		let p = this.p5;
+		this.noise = {x:1, y:5000, z:0};
+		if(width > max_width){
+			this.ctx = p.resizeCanvas(max_width , height);
+		} else if (width <= max_width) {
+			this.ctx = p.resizeCanvas(width, height);
+		}
+		this.cellSize = size;
+		this.buffer = p.createGraphics(width, height);
+		this.cells = [];
+		this.res = {x:this.p5.floor(width / size) + 1,
+					y:this.p5.floor(height / size) + 1};
+		for (let i = 0; i < this.res.x; i++) {
+			for (let j = 0; j < this.res.y; j++) {
+				let index = i + j * this.res.y;
+				this.cells.push(new Cell(p, i, j, size, 0));
+			}
+		}
+	}
+
+	// Print text on buffer
+	text_to_buffer(str, align, x, y, textSize) {
+		let buffer = this.buffer;
+		let p = this.p5;
+		let xOff, yOff;
+		buffer.fill(0);
+		buffer.textSize(textSize);
+		buffer.textFont("Ubuntu");
+		buffer.textLeading(2);
+		buffer.textStyle(p.BOLDITALIC);
+		let textWidth = buffer.textWidth(str);
+		let textHeight = (p.textAscent() + p.textDescent()); // * (lines.lenght + 1);
+		if (align == "justify") {
+			xOff = (p.width - textWidth) / 2;
+			yOff = 0;
+		} else if (align == "center") {
+			xOff = (p.width - textWidth) / 2
+			yOff = (p.height - textHeight) / 2;
+		}
+		buffer.text(str, xOff + x, yOff + y);
+	}
+	
+	img_to_buffer(img, x, y) { 
+		this.buffer.background(255);
+		this.buffer.image(img, x, y, 3 * img.width, 3 * img.height);
+	}
+	// calc average color of the buffer on each cell
+	average_color(buffer, cell) {
+		let total = 0;
+		let cellSize = cell.size;
+		for (let x = cell.realPos.x; x < cell.realPos.x + cellSize; x++) {
+			for (let y = cell.realPos.y; y < cell.realPos.y + cellSize; y++) {
+				let pixelIndex = (x + y * buffer.width) * 4;
+				let greyShade = (	buffer.pixels[pixelIndex] +
+									buffer.pixels[pixelIndex + 1] +
+									buffer.pixels[pixelIndex + 2]) / 3;
+				total += greyShade;
+			}
+		}
+		return (total / (cellSize * cellSize));
+	}
+
+	// Print buffer on cells of grid
+	buffer_to_grid(threshold, group) {
+		let buffer = this.buffer;
+
+		buffer.loadPixels();
+		let cellSize = this.cellSize;
+		for (let cell of this.cells) {
+			let average = this.average_color(buffer, cell);
+			if (average <= threshold) {
+				cell.printed = true;
+				cell.group = group;
+			}
+		}
+		buffer.clear();
+    buffer.background(255); // optional: make opaque
+	}
+
+	run_noise(amount) {
+		let p = this.p5;
+		let index, n;
+
+		this.noise.x = 1;
+		for (let i = 0; i < this.res.x; i++) {
+			this.noise.y = 99;
+			for (let j = 0 ; j < this.res.y; j++) {
+				n = p.noise(this.noise.x, this.noise.y, this.noise.z)
+				index = j + i * this.res.y;
+				this.cells[index].n = n;
+				this.noise.y += amount;
+			}
+			this.noise.x += amount;
+		}
+	}
+
+	display(option, alpha) {
+		let p = this.p5;
+		let blr = this.blur;
+		let sat = this.saturation;
+		let ton = this.tones;
+		for (let cell of this.cells) {
+			let color = p.floor(p.map(cell.n, 0, 1, -sat, ton + sat)) * (255 / ton);
+			cell.n += p.random(-blr, blr);
+			if (option == "noise") {
+				cell.draw(color, alpha);
+			} else if (option == "char") {
+				cell.putChar();
+			}
+		};
+	}
+	
+	shadeFrom(x,y){
+		let p = this.p5;
+		let center = p.createVector(this.res / 2, this.res/2)
+		let radius = 50
+		for (let i = 0; i < this.res.x; i++) {
+			for (let j = 0; j < this.res.y; j++) {
+				let pos = p.createVector(i,j)
+				let dist = pos.dist(center)
+				if(dist>radius) this.cells[i+j*this.res.y].alpha = 255;
+			}
+		}
+	}
+}
diff --git a/docs/PerlinFog.js b/docs/PerlinFog.js
new file mode 100644
index 00000000..2f3a8d9d
--- /dev/null
+++ b/docs/PerlinFog.js
@@ -0,0 +1,83 @@
+// made by Hazardous.editorial -- Ilia
+
+function PerlinFog(p, option = {}) {
+    let		grid 
+	let		mouse;
+    let		cell_size = option.cellSize || 5;			// size of cells in px
+	const	noise_precision = 16;	// Nois Precisions [1 - 32]
+	const	cursor_size = 80;		// size of Halo effect around the cursor
+	let		parent;
+	let w, h; 
+	p.setup = function () {
+		parent = p._userNode;
+		w = window.innerWidth;
+		h = window.innerHeight;
+		p.createCanvas(w, h).parent(parent);
+		p.noCursor();
+		p.frameRate(10);
+		p.noiseDetail(noise_precision);
+		p.noStroke();
+		p.pixelDensity(1);
+		grid = new Grid(p, w, h, cell_size, parent)
+		grid.init(w, h, cell_size, parent);
+		grid.saturation = 1;	// [0 - 100]
+		grid.blur = 0.08;		//noisy blur effect (randomness)
+		grid.tones = 10;		// shades of grey
+		p.printText(grid, 60);
+		grid.run_noise(0.01);
+		grid.display("noise", 255);
+	};
+
+	p.draw = function() {
+		//p.background(0).clear();
+		mouse = p.createVector(p.mouseX, p.mouseY)
+		grid.run_noise(0.01);
+		for (let cell of grid.cells) {
+			let dist = mouse.dist(cell.realPos);
+			if (dist < cursor_size) {
+				cell.n += p.map(dist, 0, cursor_size, 0.25, 0);
+			}
+		}
+		grid.display("noise", 50);
+		grid.noise.z += 0.008; 
+	};
+
+	p.windowResized = function () {
+    if (!grid) return; // prevent crash
+		w = window.innerWidth;
+		h = window.innerHeight;
+		p.resizeCanvas(w, h); // 🔧 resize canvas!
+		// cell_size = Math.floor(w * 0.01);
+		grid.init(w, h, cell_size, parent);
+		grid.run_noise(0.01);
+		grid.display("noise", 255);
+		p.printText(grid, 30);
+	};
+
+	p.printInfos = function(x, y) {
+		p.fill(255)
+		p.textSize(14);
+		p.text("size: ", 30 + x, 30 + y);
+		p.text(cell_size, 70 + x, 30 + y);
+		p.text("frame Rate: " + Math.round(p.frameRate()), 30 + x, 44 + y);
+	}
+
+	p.printText = function(grid, size) {
+		grid.buffer.background(255);
+		let fontSize = p.floor(0.0833 * window.innerWidth - 1.65);
+		if (window.innerWidth > 600)
+			grid.text_to_buffer("HAZARDOUS  ÉDiTORiAL","justify", 0, 160, fontSize);
+		else
+			grid.text_to_buffer("HAZARDOUS  ÉDiTORiAL","justify", 0, 100, fontSize);
+		grid.buffer_to_grid(180, "title");
+	}
+
+	p.handleClick = function(grid, mouse) {
+		console.log("mouse has been clicked");
+	}
+
+	p.mouseClicked = function() {
+		p.handleClick(grid, mouse);
+	}
+};
+
diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 00000000..d60f84d8
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="Eng">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+	<title>// HAZARDOUS - IRC server//</title>
+	<!-- STYLES --> 
+	<link href="style.css" rel="stylesheet">
+	<!-- <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet"> -->
+
+	<!-- JAVASCRIPT -->
+	<!-- <script src="p5/includes/p5.min.js"></script> -->
+    <script src="https://cdn.jsdelivr.net/npm/p5@1.11.11/lib/p5.min.js"></script>
+	<script src="Cell.js"></script>
+	<script src="Grid.js"></script>
+	<script src="PerlinFog.js" id="sketch"></script>
+	<script>
+		let max_width = 9999;
+    let img;
+		const options = {cellSize: 5};
+
+		function p5_start(sketch) {
+			if (p5_sketch) {
+				p5_sketch.remove(); // Remove old sketch
+			}
+			p5_sketch = new p5(sketch, options);
+		}
+
+		//customize PerlinFog sketch
+		// const options = { cellSize: Math.floor(window.innerWidth * 0.01) };
+
+		function PerlinFog_index(p, options) {
+
+      p.preload = function() {
+      img = p.loadImage(
+        'hazardousirc.png',
+        // success callback
+        () => console.log("✅ Image loaded successfully"),
+        // error callback
+        (err) => {
+          console.warn("⚠️ Could not load image:", err);
+          img = null; // fallback so the rest of the sketch keeps working
+        }
+      );
+    };
+			// Call the original function to set up everything
+			const original = PerlinFog(p, options);
+			// Override the printText function
+			p.printText = function(grid) {
+				grid.buffer.background(255);
+				let fontSize = p.floor(0.093 * window.innerWidth - 1.65);
+				let imgPosH = p.floor(0.093 * window.innerHeight - 1.65);
+				let heightDiff = fontSize - (fontSize / 2);
+        if (img) {
+          grid.img_to_buffer(img, window.innerWidth / 2 - (3 * img.width)  / 2, imgPosH - fontSize + 20);
+          grid.buffer_to_grid(110, "title");
+        }
+				grid.text_to_buffer("HAZARDOUS","center", 0, -heightDiff + 160, fontSize);
+				grid.text_to_buffer("- IRC server -","center", 0, heightDiff + 160, fontSize * 0.8);
+				grid.buffer_to_grid(180, "title");
+			};
+
+			p.handleClick = function(grid, mouse) {
+				for (let cell of grid.cells) {
+					if (mouse.dist(cell.realPos) < 190 && cell.group == "title") {
+						window.location.href = "html/index.html";
+						break ;
+					}
+				}
+			}
+			p.touchEnded = function () {
+				p.handleClick(grid, mouse);
+				return false; // Prevent default iOS behavior like double-tap zoom
+			};
+
+			return original;
+		}
+
+		window.onload = function () {
+			new p5(PerlinFog_index, 'background'); 
+		};
+	</script>
+
+</head>
+
+<body>
+		<div id="background" style="pointer-events: auto; touch-action: auto; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;"></div>
+</body>
+
+</html>
diff --git a/docs/style.css b/docs/style.css
new file mode 100644
index 00000000..9b081d03
--- /dev/null
+++ b/docs/style.css
@@ -0,0 +1,342 @@
+*{
+	background: none;
+	color: rgb(24, 30, 115);
+	font-size: 16pt;
+    background: transparent;
+	padding: 0;
+  	margin: 0; /* reset spacing instead of forcing center */
+}
+
+html, body {  
+  height: auto;
+  min-height: 100vh;
+  position: relative;
+  border-top: 1px solid transparent; /* Prevents margin collapse */
+}
+
+h1 {
+	padding: 1rem 0; 
+	font-size: 2.2rem;
+	font-weight:bolder;
+	text-decoration: underline overline;
+}
+h2 {
+	font-size: 1.8rem;
+	font-weight:bolder;
+	text-decoration: underline;
+}
+
+p {
+	font-size: 1.2rem;;
+	padding: 0 0 0.5rem 0;
+}
+
+h3 {
+	font-size: 1.5rem;
+	text-decoration: underline;
+}
+main {
+  position: relative;
+  margin: 0 auto 0 auto;
+  background-image: url('images/wrinkled-paper-white.jpg');
+  z-index: 1;  /* in front */
+  padding: 150px 0;
+  max-width: 1500px;
+}
+
+article {
+	padding: 1rem;
+	text-align: center;
+	background-color: transparent;
+}
+
+article #paypal-button-container {
+  margin: 1rem auto;
+  display: inline-block;
+}
+
+section {
+/*	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); */
+	display: flex;
+	width: 100%;
+	margin: 40px 0;
+	overflow: hidden;
+	align-items: flex-start;
+	align-items: stretch; /* <--- ensures image fills full height */
+}
+
+.left .text {
+  text-align: left; /* override center alignment */
+  padding-right: 1rem;
+}
+
+.right .text {
+  text-align: right; /* override center alignment */
+  padding-left: 1rem;
+}
+
+section img {
+	width: 90%;
+	mix-blend-mode: multiply;
+}
+
+section .image {
+  width: 33.33%;
+  border: 5px;
+  border-image: url('images/wrinkled-paper-white.jpg');
+  background-size: cover;      /* zoom & crop */
+  background-position: center; /* center image */
+  background-repeat: no-repeat;
+}
+
+section .p5cnv {
+	width: 33.33%;
+	height: auto;
+	display: flex;
+	align-items: stretch;
+}
+
+section .text{
+  width: 66%;
+  padding: 0 1rem;
+}
+
+section .text a {
+  display: block;
+  width: fit-content;
+  margin: 0 auto 0 auto; /* top margin + horizontal centering */
+}
+
+#header {
+	mix-blend-mode: multiply;
+    position: relative; /* This is crucial for z-index to work */
+	z-index: 4;
+}
+
+#header img {
+    display: block; /* Removes any spacing issues */
+	width: 100%;
+}
+
+#nav::before {
+    content: '';
+    position: absolute;
+    top: -580px;		/* Overflow upward */
+    left: 0; 			/* Overflow leftward */
+    right: 0; 			/* Overflow rightward */
+    bottom: -150px; 	/* Overflow downward */
+    background-image: url('images/header_web.png');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    z-index: -1; /* Behind the nav content */
+}
+
+#nav {
+	display: flex;
+	position: -webkit-sticky;
+	position: sticky;
+	top: 0; 
+	height: 50px;
+	color: white;
+	width:100%;
+	justify-content: center;
+	align-items: center;
+	overflow: visible;
+	z-index:3;
+}
+
+#nav ul {
+	width: 100%;
+	display: flex;
+/*	flex-wrap: wrap;             /* allow wrapping */
+    list-style: none; /* optional: removes bullet points */
+	align-items: center;
+	/*justify-content: center; /* centers items horizontally */
+	justify-content: space-evenly; 
+    /*gap: 2rem; /* optional spacing between items */
+	box-sizing: border-box;
+  overflow: visible;
+}
+
+#background {
+  position: absolute;
+  top: 0; left: 0;
+  min-height: 100vh;
+  z-index: -1; /* optional: puts it behind other elements */
+  width: 100%;
+  height: 100%;
+  background-image: url('images/wrinkled-paper-white.jpg');
+  background-size: cover;      /* zoom & crop */
+  background-position: center; /* center image */
+  background-repeat: no-repeat;
+}
+
+#sketch-container {
+    display: flex;           /* Enable flexbox */
+    justify-content: center; /* Center horizontally */
+    align-items: center;     /* Center vertically */
+    width: 200px;
+    height: 100vh;           /* Full viewport height */
+    padding: 0;              /* Remove padding (auto isn't valid) */
+	margin: 0 auto;
+}
+
+#deskboard {
+	padding: 0;
+	margin: 0; 
+	overflow: hidden;
+}
+
+
+
+.collection-menu {
+  display: flex;
+  justify-content: space-evenly;
+  list-style: none;
+  background: #f9f9f9;
+  border-top: 1px solid #ddd;
+  align-items: stretch;
+}
+
+.collection-menu li {
+	display:flex;
+	cursor: pointer;        /* show hand on hover */
+	padding: 10px;
+	flex-direction: column;       /* Stack text vertically */
+	align-items: center;          /* Vertical alignment */
+	justify-content: center;      /* Horizontal alignment */
+	flex: 1;
+	background: rgba(255, 255, 255, 0.1);
+	transition: background 0.3s, transform 0.2s;
+}
+
+.collection-menu li:hover {
+  background: rgba(0, 0, 0, 0.3);
+  transform: scale(1.05);
+}
+
+.gallery {
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
+	display: grid;
+	z-index: 1;
+	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+	gap: 0.2rem 0.2rem;
+	background-color: rgba(255,255,255,0.9);
+	  background-image: url('images/wrinkled-paper-white.jpg');
+}
+
+.item {
+  position: relative; /* Add this - creates positioning context */
+  display: block; /* ensure block-level */
+  overflow: hidden; /* prevents any overflow */
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
+}
+
+/* Iamage and p5 canvas inside items */
+.item .p5cnv {
+  aspect-ratio: 1 / 1.414; /* A4 aspect ratio */
+  width: 100%;
+  object-fit: cover;
+  /*border-radius: 10px;*/
+  /*box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);*/
+  transition: transform 0.3s;
+  overflow: hidden;
+}
+
+.item img {
+  aspect-ratio: 1 / 1.4142; /* A4 aspect ratio */
+  width: 100%;
+  height: 100%; /* Add this to fill full height */
+  object-fit: cover;
+  transition: transform 0.3s;
+}
+.item .caption {
+	display: none;
+}
+/*
+.item .caption {
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.7);
+  color: white;
+  padding: 5px 10px;
+  border-radius: 4px;
+  font-size: 14px;
+  z-index: 0; 
+  opacity: 0;
+  top: 50%; left: 50%; transform: translate(-50%, -50%);
+}*/
+
+.item img:hover {
+  transform: scale(1.20);
+}
+
+.lightbox {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.85);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s ease;
+}
+
+.lightbox.active {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.lightbox-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 90%;
+  max-height: 90%;
+}
+
+.lightbox-content img {
+  max-width: 100%;
+  max-height: 80vh;
+  border-radius: 8px;
+  box-shadow: 0 0 20px rgba(0,0,0,0.5);
+  border: 4px solid white;
+}
+
+.lightbox-content .caption {
+  margin-top: 0.5rem;
+  color: #fff;
+  font-size: 1rem;
+  text-align: center;
+  max-width: 100%;
+}
+
+.lightbox-close {
+  position: absolute;
+  top: 20px;
+  right: 30px;
+  font-size: 2rem;
+  background: none;
+  color: white;
+  border: none;
+  cursor: pointer;
+  z-index: 99;
+}
+.uneven-borderBis {
+  clip-path: polygon(
+    0% 0%,  /* Top-left */
+    10% 0%,  /* Top */
+    90% 5%,  /* Top-right */
+    100% 15%, 
+    95% 100%, /* Bottom-right */
+    5% 90%   /* Bottom-left */
+  );
+  filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
+  box-shadow:2px solid black;
+  border: 2px solid black;
+}