diff --git a/css/loading.css b/css/loading.css new file mode 100644 index 00000000..306f485f --- /dev/null +++ b/css/loading.css @@ -0,0 +1,206 @@ +:root { + --hue: 223; + --bg: hsl(var(--hue), 90%, 5%); + --infinity-dur: 0.3s; +} + +html { + background: var(--bg); +} + +body { + margin: 0; + padding: 0; + box-sizing: border-box; + animation: fadein 1s; +} + +.loading { + min-height: 100vh; + display: flex; + position: relative; + justify-content: center; + align-items: center; + z-index: 6; + pointer-events: none; +} + +.loading-icon { + justify-self: center; + display: block; + position: absolute; +} + +.loading-icon img { + width: 256; + height: 256; + scale: 0.6; + pointer-events: visiblePainted; +} + +.loading-tip { + font-family: 'Flexi IBM VGA True (437)'; + font-weight: 400; + text-rendering: optimizelegibility; + color: #009400; + font-size: 40px; + min-height: 50px; + display: flex; + margin-bottom: 12rem; +} + +.loading-infinity { + display: flex; + align-items: center; + justify-content: center; +} + +.infinity { + width: 16em; + height: 8em; + padding-top: 10em; + background-color: rgba(0, 0, 0, 0); +} + +.infinity-track { + stroke: hsl(var(--hue), 90%, 90%); + transition: stroke var(--infinity-dur); +} + +.worm1, +.worm2 { + animation: worm1 2s linear infinite; +} + +.worm2 { + animation-name: worm2; +} + +@keyframes worm1 { + from { + stroke-dashoffset: 0; + } + + 50% { + animation-timing-function: steps(1); + stroke-dashoffset: -358; + } + + 50.01% { + animation-timing-function: linear; + stroke-dashoffset: 358; + } + + to { + stroke-dashoffset: 0; + } +} + +@keyframes worm2 { + from { + stroke-dashoffset: 358; + } + + 50% { + stroke-dashoffset: 0; + } + + to { + stroke-dashoffset: -358; + } +} + +@keyframes fadein { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +@font-face { + font-family: 'Flexi IBM VGA True (437)'; + src: url('../fonts/Flexi_IBM_VGA_True_437.woff2') format('woff2'), + url('../fonts/Flexi_IBM_VGA_True_437.woff') format('woff'), + url('../fonts/Flexi_IBM_VGA_True_437.svg#Flexi_IBM_VGA_True_437') format('svg'); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +section { + height: 100%; + width: 100%; + position: absolute; + top: 0; + left: 0; + z-index: 5; + overflow: hidden; +} + +.particles { + background: var(--bg); +} + +.hexagonGrid { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: hidden; + z-index: 9; +} + +.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: #3dd429; + 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 new file mode 100644 index 00000000..6112c386 --- /dev/null +++ b/css/style.css @@ -0,0 +1,15 @@ +:root { + --bg: hsl(var(--hue),90%,5%); + --fg: hsl(var(--hue),90%,95%); +} + +html { + background: var(--bg); +} + +body { + margin: 0; + padding: 0; + box-sizing: border-box; + animation: fadein 1s; +} \ No newline at end of file diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 00000000..819d1ba5 Binary files /dev/null and b/favicon.ico differ diff --git a/fonts/Flexi_IBM_VGA_True_437.svg b/fonts/Flexi_IBM_VGA_True_437.svg new file mode 100644 index 00000000..563584c3 --- /dev/null +++ b/fonts/Flexi_IBM_VGA_True_437.svg @@ -0,0 +1,926 @@ + + + + +Created by FontForge 20170731 at Sun Nov 29 14:36:17 2020 + By Aleksey,,, +(c) 2020 VileR + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/fonts/Flexi_IBM_VGA_True_437.woff b/fonts/Flexi_IBM_VGA_True_437.woff new file mode 100644 index 00000000..b9e9cc89 Binary files /dev/null and b/fonts/Flexi_IBM_VGA_True_437.woff differ diff --git a/fonts/Flexi_IBM_VGA_True_437.woff2 b/fonts/Flexi_IBM_VGA_True_437.woff2 new file mode 100644 index 00000000..7b20e27c Binary files /dev/null and b/fonts/Flexi_IBM_VGA_True_437.woff2 differ diff --git a/fonts/VGA.ttf b/fonts/VGA.ttf new file mode 100644 index 00000000..052fddd3 Binary files /dev/null and b/fonts/VGA.ttf differ diff --git a/imgs/icon.png b/imgs/icon.png new file mode 100644 index 00000000..1f92630c Binary files /dev/null and b/imgs/icon.png differ diff --git a/imgs/secret-icon.png b/imgs/secret-icon.png new file mode 100644 index 00000000..00c09f9e Binary files /dev/null and b/imgs/secret-icon.png differ diff --git a/index.html b/index.html index 75c78618..d9b88593 100644 --- a/index.html +++ b/index.html @@ -5,11 +5,60 @@ - + + - +
+
+
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ +
+
+
+ + +
+
+ \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 00000000..e69de29b diff --git a/js/loading.js b/js/loading.js new file mode 100644 index 00000000..c1db61f6 --- /dev/null +++ b/js/loading.js @@ -0,0 +1,229 @@ +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 = tips[Math.floor(Math.random() * tips.length)]; +} + +let changeTip = setInterval(() => { + changeLoadingTip(); +}, 3000); + +document.onload = () => { + //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; + console.log(mouse.radius); +}); + +document.onmousemove = (function(event) { + 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 = '#72C100'; + 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 = '#72C100'; + 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"; +})();