Webleb - HTML UI Elements - Uma página inicial perfeita projetada com Leon Matrex

HTML

<!DOCTYPE html>

<head>

<title> MASTEX.net Login Page - Leon Matrix Theme</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Courier New', monospace;

}

body {

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

background: linear-gradient(135deg, #041504, #072d07);

padding: 20px;

color: #0f0;

}

.container {

display: flex;

width: 800px;

min-height: 450px;

border-radius: 20px;

overflow: hidden;

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

border: 1px solid #0f0;

}

.login-section {

flex: 1;

padding: 40px;

background: #020e02;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

color: #0f0;

}

.logo {

margin-bottom: 30px;

}

.logo h1 {

color: #0f0;

font-size: 38px;

letter-spacing: 2px;

font-weight: bold;

text-shadow: 0 0 5px #0f0, 0 0 10px #0f0;

}

.logo p {

color: #0c0;

font-size: 14px;

text-align: center;

margin-top: 5px;

}

.form-group {

width: 100%;

margin-bottom: 20px;

}

.form-group label {

display: block;

margin-bottom: 8px;

color: #0c0;

font-size: 14px;

}

.input-field {

position: relative;

width: 100%;

}

.input-field i {

position: absolute;

left: 15px;

top: 50%;

transform: translateY(-50%);

color: #0a0;

}

.input-field input {

width: 100%;

padding: 12px 15px 12px 40px;

border: 1px solid #0a0;

border-radius: 8px;

outline: none;

font-size: 16px;

transition: all 0.3s;

background-color: rgba(0, 20, 0, 0.7);

color: #0f0;

}

.input-field input:focus {

border-color: #0f0;

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

}

.checkbox-container {

display: flex;

justify-content: space-between;

align-items: center;

width: 100%;

margin-bottom: 20px;

}

.remember-me {

display: flex;

align-items: center;

color: #0c0;

}

.remember-me input {

margin-right: 8px;

}

.forgot-password {

color: #0f0;

text-decoration: none;

font-size: 14px;

}

.forgot-password:hover {

text-decoration: underline;

text-shadow: 0 0 5px #0f0;

}

.login-button {

width: 100%;

padding: 12px;

border: none;

background: #0a0;

color: #000;

font-size: 18px;

font-weight: bold;

border-radius: 8px;

cursor: pointer;

transition: 0.3s;

margin-bottom: 20px;

text-transform: uppercase;

letter-spacing: 1px;

}

.login-button:hover {

background: #0f0;

transform: translateY(-2px);

box-shadow: 0 4px 12px rgba(0, 255, 0, 0.3);

}

.login-button:active {

transform: translateY(0);

}

.alternative-login {

text-align: center;

width: 100%;

}

.alternative-login p {

color: #0a0;

margin-bottom: 15px;

position: relative;

}

.alternative-login p::before,

.alternative-login p::after {

content: "";

position: absolute;

top: 50%;

width: 30%;

height: 1px;

background-color: #030;

}

.alternative-login p::before {

left: 0;

}

.alternative-login p::after {

right: 0;

}

.social-buttons {

display: flex;

justify-content: center;

gap: 15px;

}

.social-button {

display: flex;

align-items: center;

justify-content: center;

width: 40px;

height: 40px;

border-radius: 50%;

background: #031703;

transition: 0.3s;

cursor: pointer;

color: #0f0;

border: 1px solid #0a0;

}

.social-button:hover {

background: #052605;

transform: translateY(-2px);

box-shadow: 0 0 10px rgba(0, 255, 0, 0.4);

}

.fingerprint-section {

flex: 1;

background: linear-gradient(135deg, #052605, #010801);

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

color: #0f0;

padding: 40px;

position: relative;

}

/* Matrix Rain Effect */

.fingerprint-section::before {

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: linear-gradient(to bottom, rgba(0, 20, 0, 0.9), rgba(0, 10, 0, 0.95));

opacity: 0.3;

}

.fingerprint-title {

text-align: center;

margin-bottom: 30px;

z-index: 1;

}

.fingerprint-title h2 {

font-size: 24px;

margin-bottom: 10px;

color: #0f0;

text-shadow: 0 0 5px #0f0;

}

.fingerprint-title p {

font-size: 14px;

opacity: 0.8;

}

.fingerprint-box {

width: 150px;

height: 150px;

border-radius: 50%;

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

display: flex;

justify-content: center;

align-items: center;

position: relative;

cursor: pointer;

margin-bottom: 30px;

z-index: 1;

border: 1px solid #0a0;

}

.fingerprint-box::before {

content: '';

width: 120px;

height: 120px;

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

border-radius: 50%;

position: absolute;

animation: pulse 2s infinite;

}

@keyframes pulse {

0% {

transform: scale(1);

opacity: 1;

}

100% {

transform: scale(1.5);

opacity: 0;

}

.fingerprint-icon {

width: 80px;

height: 80px;

background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%2300ff00" d="M256 64C150 64 64 150 64 256s86 192 192 192 192-86 192-192S362 64 256 64zM96 256c0-88.4 71.6-160 160-160 37.8 0 72.6 13.1 100.1 35.1-42.6 15.3-96.6 48.1-137.2 88.7-46.3 46.3-79.9 118.4-87.6 169-21.8-27.4-35.2-62.1-35.3-99.8zm128 144c-44.1 0-80-35.9-80-80 0-8.8-7.2-16-16-16s-16 7.2-16 16c0 61.8 50.2 112 112 112 8.8 0 16-7.2 16-16s-7.2-16-16-16zm60.1-124.5c-1.8 0-3.5.5-5.1 1.5-10.3 6.4-21.7 9.9-33.6 9.9-35.2 0-64-28.8-64-64 0-17.3 7-33.4 19.5-45.5 4.7-4.6 5.4-11.5 2.3-16.7-.4-.8-.9-1.5-1.7-2.2-2.8-2.8-7.2-3.4-10.7-1.6-17.7 9.1-32.2 23.9-42.3 42.4-14.6 27-18.1 60.9-8.9 88.6 13.8 41.4 55.1 69.2 100.8 69.2 12.3 0 24.2-2.1 35.5-6.1 5.1-1.8 8.4-6.7 8.4-12.1 0-7.1-5.7-12.9-12.9-12.9z"/></svg>');

background-size: contain;

background-repeat: no-repeat;

background-position: center;

z-index: 1;

}

.fingerprint-instruction {

text-align: center;

font-size: 14px;

opacity: 0.9;

z-index: 1;

}

.signup-link {

margin-top: 20px;

text-align: center;

z-index: 1;

}

.signup-link a {

color: #0f0;

text-decoration: none;

font-weight: bold;

}

.signup-link a:hover {

text-decoration: underline;

text-shadow: 0 0 5px #0f0;

}

/* Responsive Design */

@media (max-width: 768px) {

.container {

flex-direction: column;

width: 100%;

}

.fingerprint-section {

padding: 30px;

}

/* Matrix code rain animation */

.matrix-code {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

pointer-events: none;

z-index: 0;

overflow: hidden;

}

.code-column {

position: absolute;

top: -100px;

font-size: 12px;

color: #0f0;

text-shadow: 0 0 5px #0f0;

white-space: nowrap;

opacity: 0.7;

animation: codeRain linear infinite;

}

@keyframes codeRain {

0% {

transform: translateY(-100px);

}

100% {

transform: translateY(450px);

}

</style>

</head>

<body>

<h1>MASTEX.net</h1>

<p>Your Personal Security Portal</p>

</div>

<label for="username">Username</label>

</div>

<label for="password">Password</label>

</div>

<label for="remember">Remember me</label>

</div>

<a href="#" class="forgot-password">Forgot Password?</a>

</div>

<button type="submit" class="login-button">Login</button>

<p>Or login with</p>

</div>

</div>

</div>

</form>

</div>

<h2>Biometric Login</h2>

<p>Quick and secure access to your account</p>

</div>

</div>

Touch the sensor to verify your identity

</div>

<p>Don't have an account? <a href="#">Sign Up</a></p>

</div>

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

// Form validation

const loginForm = document.getElementById('login-form');

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

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

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

e.preventDefault();

let isValid = true;

if (!usernameInput.value.trim()) {

isValid = false;

highlightError(usernameInput);

} else {

removeError(usernameInput);

}

if (!passwordInput.value.trim()) {

isValid = false;

highlightError(passwordInput);

} else {

removeError(passwordInput);

}

if (isValid) {

// Show login success message

alert('Login successful!');

// In a real app, you would send the credentials to your server here

}

});

function highlightError(input) {

input.style.borderColor = '#0f0';

input.style.boxShadow = '0 0 0 3px rgba(0, 255, 0, 0.2)';

}

function removeError(input) {

input.style.borderColor = '#0a0';

input.style.boxShadow = 'none';

}

// Fingerprint login animation

const fingerprintLogin = document.getElementById('fingerprint-login');

fingerprintLogin.addEventListener('click', function() {

this.style.transform = 'scale(0.95)';

setTimeout(() => {

this.style.transform = 'scale(1)';

// Simulate fingerprint scanning

setTimeout(() => {

this.style.backgroundColor = 'rgba(0, 255, 0, 0.3)';

// Show login success message

setTimeout(() => {

alert('Biometric authentication successful!');

// In a real app, you would authenticate with a server here

}, 1000);

}, 1500);

}, 200);

});

// Matrix rain effect

function createMatrixRain() {

const matrixContainer = document.getElementById('matrix-code');

const containerWidth = matrixContainer.offsetWidth;

const containerHeight = matrixContainer.offsetHeight;

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

// Create columns

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

const column = document.createElement('div');

column.className = 'code-column';

column.style.left = Math.random() * containerWidth + 'px';

column.style.animationDuration = 3 + Math.random() * 5 + 's';

// Create random characters

const columnLength = 10 + Math.floor(Math.random() * 15);

let columnContent = '';

for (let j = 0; j < columnLength; j++) {

columnContent += characterSet.charAt(Math.floor(Math.random() * characterSet.length)) + '<br>';

}

column.innerHTML = columnContent;

matrixContainer.appendChild(column);

}

// Initialize matrix effect

createMatrixRain();

});

</script>

</body>

</html>

CSS

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Courier New', monospace;

}

body {

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

background: linear-gradient(135deg, #041504, #072d07);

padding: 20px;

color: #0f0;

}

.container {

display: flex;

width: 800px;

min-height: 450px;

border-radius: 20px;

overflow: hidden;

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

border: 1px solid #0f0;

}

.login-section {

flex: 1;

padding: 40px;

background: #020e02;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

color: #0f0;

}

.logo {

margin-bottom: 30px;

}

.logo h1 {

color: #0f0;

font-size: 38px;

letter-spacing: 2px;

font-weight: bold;

text-shadow: 0 0 5px #0f0, 0 0 10px #0f0;

}

.logo p {

color: #0c0;

font-size: 14px;

text-align: center;

margin-top: 5px;

}

.form-group {

width: 100%;

margin-bottom: 20px;

}

.form-group label {

display: block;

margin-bottom: 8px;

color: #0c0;

font-size: 14px;

}

.input-field {

position: relative;

width: 100%;

}

.input-field i {

position: absolute;

left: 15px;

top: 50%;

transform: translateY(-50%);

color: #0a0;

}

.input-field input {

width: 100%;

padding: 12px 15px 12px 40px;

border: 1px solid #0a0;

border-radius: 8px;

outline: none;

font-size: 16px;

transition: all 0.3s;

background-color: rgba(0, 20, 0, 0.7);

color: #0f0;

}

.input-field input:focus {

border-color: #0f0;

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

}

.checkbox-container {

display: flex;

justify-content: space-between;

align-items: center;

width: 100%;

margin-bottom: 20px;

}

.remember-me {

display: flex;

align-items: center;

color: #0c0;

}

.remember-me input {

margin-right: 8px;

}

.forgot-password {

color: #0f0;

text-decoration: none;

font-size: 14px;

}

.forgot-password:hover {

text-decoration: underline;

text-shadow: 0 0 5px #0f0;

}

.login-button {

width: 100%;

padding: 12px;

border: none;

background: #0a0;

color: #000;

font-size: 18px;

font-weight: bold;

border-radius: 8px;

cursor: pointer;

transition: 0.3s;

margin-bottom: 20px;

text-transform: uppercase;

letter-spacing: 1px;

}

.login-button:hover {

background: #0f0;

transform: translateY(-2px);

box-shadow: 0 4px 12px rgba(0, 255, 0, 0.3);

}

.login-button:active {

transform: translateY(0);

}

.alternative-login {

text-align: center;

width: 100%;

}

.alternative-login p {

color: #0a0;

margin-bottom: 15px;

position: relative;

}

.alternative-login p::before,

.alternative-login p::after {

content: "";

position: absolute;

top: 50%;

width: 30%;

height: 1px;

background-color: #030;

}

.alternative-login p::before {

left: 0;

}

.alternative-login p::after {

right: 0;

}

.social-buttons {

display: flex;

justify-content: center;

gap: 15px;

}

.social-button {

display: flex;

align-items: center;

justify-content: center;

width: 40px;

height: 40px;

border-radius: 50%;

background: #031703;

transition: 0.3s;

cursor: pointer;

color: #0f0;

border: 1px solid #0a0;

}

.social-button:hover {

background: #052605;

transform: translateY(-2px);

box-shadow: 0 0 10px rgba(0, 255, 0, 0.4);

}

.fingerprint-section {

flex: 1;

background: linear-gradient(135deg, #052605, #010801);

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

color: #0f0;

padding: 40px;

position: relative;

}

/* Matrix Rain Effect */

.fingerprint-section::before {

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: linear-gradient(to bottom, rgba(0, 20, 0, 0.9), rgba(0, 10, 0, 0.95));

opacity: 0.3;

}

.fingerprint-title {

text-align: center;

margin-bottom: 30px;

z-index: 1;

}

.fingerprint-title h2 {

font-size: 24px;

margin-bottom: 10px;

color: #0f0;

text-shadow: 0 0 5px #0f0;

}

.fingerprint-title p {

font-size: 14px;

opacity: 0.8;

}

.fingerprint-box {

width: 150px;

height: 150px;

border-radius: 50%;

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

display: flex;

justify-content: center;

align-items: center;

position: relative;

cursor: pointer;

margin-bottom: 30px;

z-index: 1;

border: 1px solid #0a0;

}

.fingerprint-box::before {

content: '';

width: 120px;

height: 120px;

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

border-radius: 50%;

position: absolute;

animation: pulse 2s infinite;

}

@keyframes pulse {

0% {

transform: scale(1);

opacity: 1;

}

100% {

transform: scale(1.5);

opacity: 0;

}

.fingerprint-icon {

width: 80px;

height: 80px;

background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%2300ff00" d="M256 64C150 64 64 150 64 256s86 192 192 192 192-86 192-192S362 64 256 64zM96 256c0-88.4 71.6-160 160-160 37.8 0 72

JS

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

// Form validation

const loginForm = document.getElementById('login-form');

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

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

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

e.preventDefault();

let isValid = true;

if (!usernameInput.value.trim()) {

isValid = false;

highlightError(usernameInput);

} else {

removeError(usernameInput);

}

if (!passwordInput.value.trim()) {

isValid = false;

highlightError(passwordInput);

} else {

removeError(passwordInput);

}

if (isValid) {

// Show login success message

alert('Login successful!');

// In a real app, you would send the credentials to your server here

}

});

function highlightError(input) {

input.style.borderColor = '#f5c518';

input.style.boxShadow = '0 0 0 3px rgba(245, 197, 24, 0.2)';

}

function removeError(input) {

input.style.borderColor = '#333';

input.style.boxShadow

Uma página inicial perfeita projetada com Leon Matrex

Recomendado

Pena caindo

Jogo de apanhador de torradas

HTML

CSS

JS

Recomendado

Pena caindo

Jogo de apanhador de torradas

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS