मैट्रेक्स

1179 Metehan

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

26 March 2025

साइकिल व्यवसाय के लिए लैंडिंग पृष्ठ

23 June 2025

भाषा को आगे बढाओ

30 July 2025

वीज़ा कार्ड चेकआउट पृष्ठ HTML टेम्पलेट

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ı!');

});

अनुशंसित

साइकिल व्यवसाय के लिए लैंडिंग पृष्ठ

भाषा को आगे बढाओ

वीज़ा कार्ड चेकआउट पृष्ठ HTML टेम्पलेट

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS