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