Matrex

1,771 0 Forms Metehan Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

Matrex

Recommended

17 November 2023

20 June 2025

HTML Login Registration Form with 3D Card Effect

12 December 2025

FNAF Pizzeria Simulator

HTML

CSS

body, html {

height: 100%;

margin: 0;

padding: 0;

overflow: hidden;

font-family: 'Courier New', monospace;

}

#matrix-canvas {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: -1;

}

.login-container {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

text-align: center;

z-index: 1;

}

h1 {

color: #00FF00;

text-shadow: 0 0 10px #00FF00;

margin-bottom: 20px;

}

.input-field {

margin: 20px 0;

}

input {

background: rgba(0, 0, 0, 0.5);

border: none;

border-bottom: 2px solid #00FF00;

color: #00FF00;

font-size: 16px;

padding: 10px;

width: 250px;

outline: none;

transition: border-color 0.3s;

}

input:focus {

border-color: #008000;

}

input::placeholder {

color: rgba(0, 255, 0, 0.5);

}

button {

background: none;

border: 2px solid #00FF00;

color: #00FF00;

padding: 10px 20px;

cursor: pointer;

font-size: 16px;

transition: all 0.3s ease;

}

button:hover {

background: #00FF00;

color: black;

}

JS

const canvas = document.getElementById('matrix-canvas');

const ctx = canvas.getContext('2d');

canvas.height = window.innerHeight;

canvas.width = window.innerWidth;

const matrixChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%^&*()_+-={}[]|\\:;"\'<>,.?/';

const fontSize = 16;

const columns = canvas.width / fontSize;

const drops = [];

for (let i = 0; i < columns; i++) {

drops[i] = 1;

}

function draw() {

ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';

ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = '#0F0';

ctx.font = fontSize + 'px monospace';

for (let i = 0; i < drops.length; i++) {

const text = matrixChars[Math.floor(Math.random() * matrixChars.length)];

ctx.fillText(text, i * fontSize, drops[i] * fontSize);

if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {

drops[i] = 0;

}

drops[i]++;

}

}

setInterval(draw, 33);

document.getElementById('loginForm').addEventListener('submit', function(event) {

event.preventDefault();

alert('Giriş yapıldı!');

});

Comments 0

…