Webleb - fragmentos de código - Una página de inicio matricial creada con índices.

HTML

<!DOCTYPE html>

<head>

<title>Professional Login Portal</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

body {

background: linear-gradient(

45deg,

#FFD700, /* Sarı */

#FF4444, /* Kırmızı */

#4169E1, /* Mavi */

#32CD32, /* Yeşil */

#FFA500, /* Turuncu */

#8B4513  /* Kahverengi */

);

background-size: 600% 600%;

animation: gradientBG 20s ease infinite;

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

font-family: Arial, sans-serif;

}

@keyframes gradientBG {

0% {background-position: 0% 50%;}

50% {background-position: 100% 50%;}

100% {background-position: 0% 50%;}

}

.container {

width: 400px;

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

backdrop-filter: blur(10px);

padding: 40px;

border-radius: 20px;

box-shadow: 0 0 30px rgba(0,0,0,0.3);

border: 2px solid rgba(255, 255, 255, 0.1);

animation: float 6s ease-in-out infinite;

}

@keyframes float {

0% {transform: translateY(0px);}

50% {transform: translateY(-20px);}

100% {transform: translateY(0px);}

}

.leon-logo {

width: 120px;

height: 120px;

margin: 0 auto 30px;

background: linear-gradient(45deg, #FFD700, #FF4444);

border-radius: 25px;

position: relative;

overflow: hidden;

animation: roar 3s ease infinite;

box-shadow: 0 0 20px rgba(0,0,0,0.3);

}

@keyframes roar {

0% {transform: scale(1) rotate(0deg);}

25% {transform: scale(1.1) rotate(-5deg);}

50% {transform: scale(1) rotate(0deg);}

75% {transform: scale(1.1) rotate(5deg);}

100% {transform: scale(1) rotate(0deg);}

}

.leon-logo::after {

content: "LEON";

position: absolute;

top: 50%;

left: 50%;

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

font-size: 24px;

font-weight: bold;

color: white;

text-shadow: 2px 2px 4px rgba(0,0,0,0.5);

}

h2 {

text-align: center;

margin-bottom: 30px;

color: white;

font-size: 28px;

text-transform: uppercase;

letter-spacing: 3px;

text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

}

.input-group {

margin-bottom: 25px;

position: relative;

}

input {

width: 100%;

padding: 15px 20px;

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

border: none;

border-radius: 10px;

color: white;

font-size: 16px;

transition: all 0.3s ease;

outline: none;

}

input::placeholder {

color: rgba(255, 255, 255, 0.7);

}

input:focus {

background: rgba(255, 255, 255, 0.2);

box-shadow: 0 0 15px rgba(255,255,255,0.2);

}

button {

width: 100%;

padding: 15px;

background: linear-gradient(45deg, #FFD700, #FF4444);

border: none;

border-radius: 10px;

color: white;

font-size: 16px;

font-weight: bold;

cursor: pointer;

transition: all 0.3s ease;

text-transform: uppercase;

letter-spacing: 2px;

box-shadow: 0 5px 15px rgba(0,0,0,0.2);

}

button:hover {

transform: translateY(-3px);

box-shadow: 0 8px 20px rgba(0,0,0,0.3);

}

button:active {

transform: translateY(2px);

}

.forgot {

text-align: center;

margin-top: 20px;

}

.forgot a {

color: white;

text-decoration: none;

font-size: 14px;

transition: all 0.3s ease;

position: relative;

}

.forgot a:hover {

text-shadow: 0 0 10px white;

}

.forgot a::after {

content: '';

position: absolute;

width: 100%;

height: 2px;

bottom: -4px;

left: 0;

background: white;

transform: scaleX(0);

transition: transform 0.3s ease;

}

.forgot a:hover::after {

transform: scaleX(1);

}

#message {

text-align: center;

margin-top: 20px;

padding: 10px;

border-radius: 5px;

font-size: 14px;

transition: all 0.3s ease;

}

.matrix-effect {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

pointer-events: none;

z-index: -1;

opacity: 0.3;

}

@media (max-width: 480px) {

.container {

width: 90%;

padding: 20px;

}

.leon-logo {

width: 100px;

height: 100px;

}

h2 {

font-size: 24px;

}

</style>

</head>

<body>

<h2>Matrix Portal</h2>

</div>

</div>

<button type="submit">Giriş Yap</button>

</form>

<a href="#" id="forgotPassword">Şifremi Unuttum</a>

</div>

</div>

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

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

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

const colors = ['#FFD700', '#FF4444', '#4169E1', '#32CD32', '#FFA500', '#8B4513'];

const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%";

const fontSize = 14;

const columns = canvas.width/fontSize;

const drops = [];

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

drops[i] = 1;

}

function drawMatrix() {

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

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

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

const colorIndex = Math.floor(Math.random() * colors.length);

ctx.fillStyle = colors[colorIndex];

ctx.font = fontSize + "px monospace";

const text = letters.charAt(Math.floor(Math.random() * letters.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(drawMatrix, 35);

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

e.preventDefault();

const username = document.getElementById('username').value;

const password = document.getElementById('password').value;

const message = document.getElementById('message');

if(username === "admin" && password === "12345") {

message.style.color = "#4CAF50";

message.style.background = "rgba(76, 175, 80, 0.1)";

message.textContent = "Giriş başarılı! Yönlendiriliyorsunuz...";

setTimeout(() => {

message.textContent = "Hoş geldiniz!";

}, 2000);

} else {

message.style.color = "#FF4444";

message.style.background = "rgba(255, 68, 68, 0.1)";

message.textContent = "Kullanıcı adı veya şifre hatalı!";

// Shake animation for container

const container = document.querySelector('.container');

container.style.animation = 'none';

container.offsetHeight; // Trigger reflow

container.style.animation = 'shake 0.5s ease';

}

});

document.getElementById('forgotPassword').addEventListener('click', function(e) {

e.preventDefault();

const message = document.getElementById('message');

message.style.color = "#FFA500";

message.style.background = "rgba(255, 165, 0, 0.1)";

message.textContent = "Şifre sıfırlama bağlantısı e-posta adresinize gönderildi.";

});

window.addEventListener('resize', function() {

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

});

</script>

</body>

</html>

CSS

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

body {

background: linear-gradient(

45deg,

#FFD700, /* Sarı */

#FF4444, /* Kırmızı */

#4169E1, /* Mavi */

#32CD32, /* Yeşil */

#FFA500, /* Turuncu */

#8B4513  /* Kahverengi */

);

background-size: 600% 600%;

animation: gradientBG 20s ease infinite;

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

font-family: Arial, sans-serif;

}

@keyframes gradientBG {

0% {background-position: 0% 50%;}

50% {background-position: 100% 50%;}

100% {background-position: 0% 50%;}

}

.container {

width: 400px;

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

backdrop-filter: blur(10px);

padding: 40px;

border-radius: 20px;

box-shadow: 0 0 30px rgba(0,0,0,0.3);

border: 2px solid rgba(255, 255, 255, 0.1);

animation: float 6s ease-in-out infinite;

}

@keyframes float {

0% {transform: translateY(0px);}

50% {transform: translateY(-20px);}

100% {transform: translateY(0px);}

}

.leon-logo {

width: 120px;

height: 120px;

margin: 0 auto 30px;

background: linear-gradient(45deg, #FFD700, #FF4444);

border-radius: 25px;

position: relative;

overflow: hidden;

animation: roar 3s ease infinite;

box-shadow: 0 0 20px rgba(0,0,0,0.3);

}

@keyframes roar {

0% {transform: scale(1) rotate(0deg);}

25% {transform: scale(1.1) rotate(-5deg);}

50% {transform: scale(1) rotate(0deg);}

75% {transform: scale(1.1) rotate(5deg);}

100% {transform: scale(1) rotate(0deg);}

}

.leon-logo::after {

content: "LEON";

position: absolute;

top: 50%;

left: 50%;

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

font-size: 24px;

font-weight: bold;

color: white;

text-shadow: 2px 2px 4px rgba(0,0,0,0.5);

}

h2 {

text-align: center;

margin-bottom: 30px;

color: white;

font-size: 28px;

text-transform: uppercase;

letter-spacing: 3px;

text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

}

.input-group {

margin-bottom: 25px;

position: relative;

}

input {

width: 100%;

padding: 15px 20px;

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

border: none;

border-radius: 10px;

color: white;

font-size: 16px;

transition: all 0.3s ease;

outline: none;

}

input::placeholder {

color: rgba(255, 255, 255, 0.7);

}

input:focus {

background: rgba(255, 255, 255, 0.2);

box-shadow: 0 0 15px rgba(255,255,255,0.2);

}

button {

width: 100%;

padding: 15px;

background: linear-gradient(45deg, #FFD700, #FF4444);

border: none;

border-radius: 10px;

color: white;

font-size: 16px;

font-weight: bold;

cursor: pointer;

transition: all 0.3s ease;

text-transform: uppercase;

letter-spacing: 2px;

box-shadow: 0 5px 15px rgba(0,0,0,0.2);

}

button:hover {

transform: translateY(-3px);

box-shadow: 0 8px 20px rgba(0,0,0,0.3);

}

button:active {

transform: translateY(2px);

}

.forgot {

text-align: center;

margin-top: 20px;

}

.forgot a {

color: white;

text-decoration: none;

font-size: 14px;

transition: all 0.3s ease;

position: relative;

}

.forgot a:hover {

text-shadow: 0 0 10px white;

}

.forgot a::after {

content: '';

position: absolute;

width: 100%;

height: 2px;

bottom: -4px;

left: 0;

background: white;

transform: scaleX(0);

transition: transform 0.3s ease;

}

.forgot a:hover::after {

transform: scaleX(1);

}

#message {

text-align: center;

margin-top: 20px;

padding: 10px;

border-radius: 5px;

font-size: 14px;

transition: all 0.3s ease;

}

.matrix-effect {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

pointer-events: none;

z-index: -1;

opacity: 0.3;

}

@media (max-width: 480px) {

.container {

width: 90%;

padding: 20px;

}

.leon-logo {

width: 100px;

height: 100px;

}

h2 {

font-size: 24px;

}

JS

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

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

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

const colors = ['#FFD700', '#FF4444', '#4169E1', '#32CD32', '#FFA500', '#8B4513'];

const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%";

const fontSize = 14;

const columns = canvas.width/fontSize;

const drops = [];

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

drops[i] = 1;

}

function drawMatrix() {

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

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

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

const colorIndex = Math.floor(Math.random() * colors.length);

ctx.fillStyle = colors[colorIndex];

ctx.font = fontSize + "px monospace";

const text = letters.charAt(Math.floor(Math.random() * letters.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(drawMatrix, 35);

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

e.preventDefault();

const username = document.getElementById('username').value;

const password = document.getElementById('password').value;

const message = document.getElementById('message');

if(username === "admin" && password === "12345") {

message.style.color = "#4CAF50";

message.style.background = "rgba(76, 175, 80, 0.1)";

message.textContent = "Giriş başarılı! Yönlendiriliyorsunuz...";

setTimeout(() => {

message.textContent = "Hoş geldiniz!";

}, 2000);

} else {

message.style.color = "#FF4444";

message.style.background = "rgba(255, 68, 68, 0.1)";

message.textContent = "Kullanıcı adı veya şifre hatalı!";

// Shake animation for container

const container = document.querySelector('.container');

container.style.animation = 'none';

container.offsetHeight; // Trigger reflow

container.style.animation = 'shake 0.5s ease';

}

});

document.getElementById('forgotPassword').addEventListener('click', function(e) {

e.preventDefault();

const message = document.getElementById('message');

message.style.color = "#FFA500";

message.style.background = "rgba(255, 165, 0, 0.1)";

message.textContent = "Şifre sıfırlama bağlantısı e-posta adresinize gönderildi.";

});

window.addEventListener('resize', function() {

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

});

Una página de inicio matricial creada con índices.

Recomendado

Estructura HTML de la animación de carga CSS

Efecto de botón de burbuja

Un código de bachir123

HTML

CSS

JS

Recomendado

Estructura HTML de la animación de carga CSS

Efecto de botón de burbuja

Un código de bachir123

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS