Webleb - UI Elements - Matrix eklentil giriş sayfası

HTML

<!DOCTYPE html>

<head>

<title>Matrix Kayıt Formu</title>

<style>

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Share Tech Mono', monospace;

}

body {

min-height: 100vh;

display: flex;

align-items: center;

justify-content: center;

background: #000;

padding: 20px;

position: relative;

overflow: hidden;

}

/* Matrix Yağmur Efekti */

canvas {

position: fixed;

top: 0;

left: 0;

z-index: 0;

}

.container {

max-width: 500px;

width: 100%;

background: rgba(0, 20, 0, 0.8);

padding: 25px;

border-radius: 16px;

box-shadow: 0 0 20px #00ff00, 0 0 30px rgba(0, 255, 0, 0.3);

position: relative;

z-index: 1;

backdrop-filter: blur(5px);

border: 1px solid rgba(0, 255, 0, 0.2);

}

.progress-bar {

display: flex;

justify-content: space-between;

margin-bottom: 30px;

position: relative;

}

.progress-bar::before {

content: '';

position: absolute;

height: 2px;

width: 100%;

background: #003300;

top: 50%;

transform: translateY(-50%);

z-index: 0;

}

.progress-step {

width: 35px;

height: 35px;

background: #000;

border: 2px solid #00ff00;

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

font-weight: 500;

position: relative;

z-index: 1;

transition: all 0.3s ease;

color: #00ff00;

}

.progress-step.active {

border-color: #00ff00;

background: #003300;

box-shadow: 0 0 15px #00ff00;

color: #fff;

}

.form-step {

display: none;

}

.form-step.active {

display: block;

animation: glitch 0.3s ease;

}

.input-group {

margin-bottom: 20px;

}

.input-group label {

display: block;

margin-bottom: 5px;

color: #00ff00;

font-size: 14px;

text-shadow: 0 0 5px #00ff00;

}

.input-group input {

width: 100%;

padding: 12px;

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

border: 1px solid #00ff00;

border-radius: 8px;

font-size: 15px;

transition: all 0.3s ease;

color: #00ff00;

}

.input-group input:focus {

outline: none;

box-shadow: 0 0 10px #00ff00;

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

}

.btn-group {

display: flex;

gap: 10px;

margin-top: 25px;

}

.btn {

padding: 12px 24px;

border: 1px solid #00ff00;

border-radius: 8px;

font-size: 15px;

font-weight: 500;

cursor: pointer;

transition: all 0.3s ease;

background: transparent;

color: #00ff00;

text-shadow: 0 0 5px #00ff00;

}

.btn-next {

margin-left: auto;

}

.btn:hover {

background: rgba(0, 255, 0, 0.1);

box-shadow: 0 0 15px #00ff00;

}

.form-title {

text-align: center;

margin-bottom: 25px;

color: #00ff00;

font-size: 24px;

font-weight: 600;

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

}

@keyframes glitch {

0% {

transform: translate(0);

}

20% {

transform: translate(-2px, 2px);

}

40% {

transform: translate(-2px, -2px);

}

60% {

transform: translate(2px, 2px);

}

80% {

transform: translate(2px, -2px);

}

100% {

transform: translate(0);

}

/* Matrix yağmur efekti için placeholder */

input::placeholder {

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

}

</style>

</head>

<body>

</div>

<h2 class="form-title">Sisteme Giriş</h2>

<label>E-posta</label>

</div>

<label>Şifre</label>

</div>

<label>Şifre Tekrar</label>

</div>

<button type="button" class="btn btn-next">İLERİ ></button>

</div>

<h2 class="form-title">Operatör Bilgileri</h2>

</div>

<label>Soyad</label>

</div>

</div>

<button type="button" class="btn btn-next">İLERİ ></button>

</div>

<h2 class="form-title">Matrix Bağlantıları</h2>

</div>

</div>

<label>Operatör Seri No</label>

</div>

<button type="submit" class="btn btn-next">GİRİŞ ></button>

</div>

</form>

</div>

// Matrix yağmur efekti

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

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

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

const letters = 'ABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZ';

const numbers = '0123456789';

const characters = letters + numbers;

const fontSize = 10;

const columns = canvas.width/fontSize;

const drops = [];

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

drops[x] = 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 = characters.charAt(Math.floor(Math.random() * characters.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);

// Form işlemleri

document.addEventListener('DOMContentLoaded', function() {

const form = document.getElementById('signupForm');

const nextBtns = document.querySelectorAll('.btn-next');

const prevBtns = document.querySelectorAll('.btn-prev');

const formSteps = document.querySelectorAll('.form-step');

const progressSteps = document.querySelectorAll('.progress-step');

let formStepsNum = 0;

nextBtns.forEach(btn => {

btn.addEventListener('click', () => {

if (formStepsNum < formSteps.length - 1) {

formStepsNum++;

updateFormSteps();

updateProgressbar();

}

});

prevBtns.forEach(btn => {

btn.addEventListener('click', () => {

formStepsNum--;

updateFormSteps();

updateProgressbar();

});

function updateFormSteps() {

formSteps.forEach(step => {

step.classList.remove('active');

});

formSteps[formStepsNum].classList.add('active');

}

function updateProgressbar() {

progressSteps.forEach((step, idx) => {

if (idx <= formStepsNum) {

step.classList.add('active');

} else {

step.classList.remove('active');

}

});

}

form.addEventListener('submit', (e) => {

e.preventDefault();

alert('Matrix\'e hoş geldiniz!');

});

// Pencere boyutu değiştiğinde canvas'ı yeniden boyutlandır

window.addEventListener('resize', () => {

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

});

</script>

</body>

</html>

CSS

/* style.css */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Share Tech Mono', monospace;

}

body {

min-height: 100vh;

display: flex;

align-items: center;

justify-content: center;

background: #000;

padding: 20px;

position: relative;

overflow: hidden;

}

canvas {

position: fixed;

top: 0;

left: 0;

z-index: 0;

}

.container {

max-width: 500px;

width: 100%;

background: rgba(0, 20, 0, 0.8);

padding: 25px;

border-radius: 16px;

box-shadow: 0 0 20px #00ff00, 0 0 30px rgba(0, 255, 0, 0.3);

position: relative;

z-index: 1;

backdrop-filter: blur(5px);

border: 1px solid rgba(0, 255, 0, 0.2);

}

.progress-bar {

display: flex;

justify-content: space-between;

margin-bottom: 30px;

position: relative;

}

.progress-bar::before {

content: '';

position: absolute;

height: 2px;

width: 100%;

background: #003300;

top: 50%;

transform: translateY(-50%);

z-index: 0;

}

.progress-step {

width: 35px;

height: 35px;

background: #000;

border: 2px solid #00ff00;

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

font-weight: 500;

position: relative;

z-index: 1;

transition: all 0.3s ease;

color: #00ff00;

}

.progress-step.active {

border-color: #00ff00;

background: #003300;

box-shadow: 0 0 15px #00ff00;

color: #fff;

}

.form-step {

display: none;

}

.form-step.active {

display: block;

animation: glitch 0.3s ease;

}

.input-group {

margin-bottom: 20px;

}

.input-group label {

display: block;

margin-bottom: 5px;

color: #00ff00;

font-size: 14px;

text-shadow: 0 0 5px #00ff00;

}

.input-group input {

width: 100%;

padding: 12px;

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

border: 1px solid #00ff00;

border-radius: 8px;

font-size: 15px;

transition: all 0.3s ease;

color: #00ff00;

}

.input-group input:focus {

outline: none;

box-shadow: 0 0 10px #00ff00;

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

}

.btn-group {

display: flex;

gap: 10px;

margin-top: 25px;

}

.btn {

padding: 12px 24px;

border: 1px solid #00ff00;

border-radius: 8px;

font-size: 15px;

font-weight: 500;

cursor: pointer;

transition: all 0.3s ease;

background: transparent;

color: #00ff00;

text-shadow: 0 0 5px #00ff00;

}

.btn-next {

margin-left: auto;

}

.btn:hover {

background: rgba(0, 255, 0, 0.1);

box-shadow: 0 0 15px #00ff00;

}

.form-title {

text-align: center;

margin-bottom: 25px;

color: #00ff00;

font-size: 24px;

font-weight: 600;

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

}

@keyframes glitch {

0% {

transform: translate(0);

}

20% {

transform: translate(-2px, 2px);

}

40% {

transform: translate(-2px, -2px);

}

60% {

transform: translate(2px, 2px);

}

80% {

transform: translate(2px, -2px);

}

100% {

transform: translate(0);

}

input::placeholder {

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

}

JS

// script.js

// Matrix yağmur efekti için canvas ayarları

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

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

// Canvas boyutlarını pencere boyutuna ayarla

function resizeCanvas() {

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

}

resizeCanvas();

// Matrix karakterleri

const letters = 'ABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZ';

const numbers = '0123456789';

const characters = letters + numbers;

const fontSize = 10;

const columns = canvas.width/fontSize;

// Her sütun için damla pozisyonları

const drops = Array(Math.floor(columns)).fill(1);

// Matrix yağmur efekti çizim fonksiyonu

function drawMatrix() {

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 = characters.charAt(Math.floor(Math.random() * characters.length));

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

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

drops[i] = 0;

drops[i]++;

}

// Matrix animasyonunu başlat

setInterval(drawMatrix, 33);

// Form işlemleri

document.addEventListener('DOMContentLoaded', function() {

// Form elementlerini seç

const form = document.getElementById('signupForm');

const nextBtns = document.querySelectorAll('.btn-next');

const prevBtns = document.querySelectorAll('.btn-prev');

const formSteps = document.querySelectorAll('.form-step');

const progressSteps = document.querySelectorAll('.progress-step');

let formStepsNum = 0;

// İleri butonları için event listener

nextBtns.forEach(btn => {

btn.addEventListener('click', () => {

if (formStepsNum < formSteps.length - 1) {

formStepsNum++;

updateFormSteps();

updateProgressbar();

}

});

// Geri butonları için event listener

prevBtns.forEach(btn => {

btn.addEventListener('click', () => {

formStepsNum--;

updateFormSteps();

updateProgressbar();

});

// Form adımlarını güncelle

function updateFormSteps() {

formSteps.forEach(step => {

step.classList.remove('active');

});

formSteps[formStepsNum].classList.add('active');

}

// İlerleme çubuğunu güncelle

function updateProgressbar() {

progressSteps.forEach((step, idx) => {

if (idx <= formStepsNum) {

step.classList.add('active');

} else {

step.classList.remove('active');

}

});

}

// Form gönderimi

form.addEventListener('submit', (e) => {

e.preventDefault();

// Form verilerini işleme

const formData = new FormData(form);

const data = Object.fromEntries(formData);

console.log('Form Data:', data);

alert('Matrix\'e hoş geldiniz!');

});

// Pencere boyutu değiştiğinde canvas'ı yeniden boyutlandır

window.addEventListener('resize', () => {

resizeCanvas();

// Damla pozisyonlarını yeni boyuta göre güncelle

drops.length = Math.floor(canvas.width/fontSize);

drops.fill(1);

});

Matrix eklentil giriş sayfası

Recommended

Hover state symphony

aku

Pure CSS3 Star Wars Lightsaber Checkboxes

HTML

CSS

JS

Recommended

Hover state symphony

aku

Pure CSS3 Star Wars Lightsaber Checkboxes

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS