Scribd
Upload
42 views8 pages

Login HTML

Panel login

Uploaded by

zgftmkhd42
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
42 views8 pages

Login HTML

Panel login

Uploaded by

zgftmkhd42
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XXITER Login</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
background: #0a0a0a;
color: white;
font-family: 'Arial', sans-serif;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}

/* Animated background with geometric patterns */


.background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1)
1px, transparent 1px),
radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.1)
1px, transparent 1px),
radial-gradient(circle at 60% 20%, rgba(255, 255, 255, 0.1)
1px, transparent 1px),
radial-gradient(circle at 30% 80%, rgba(255, 255, 255, 0.1)
1px, transparent 1px);
z-index: 1;
}

.background::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.05)
50%, transparent 60%),
linear-gradient(-45deg, transparent 40%, rgba(255, 255, 255, 0.05)
50%, transparent 60%);
background-size: 100px 100px;
animation: moveLines 20s linear infinite;
}
@keyframes moveLines {
0% { transform: translate(0, 0); }
100% { transform: translate(100px, 100px); }
}

/* Network nodes */
.node {
position: absolute;
width: 4px;
height: 4px;
background: white;
border-radius: 50%;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.node:nth-child(1) { top: 10%; left: 15%; animation: pulse 3s infinite; }


.node:nth-child(2) { top: 20%; right: 20%; animation: pulse 3s infinite
0.5s; }
.node:nth-child(3) { bottom: 30%; left: 25%; animation: pulse 3s infinite
1s; }
.node:nth-child(4) { bottom: 15%; right: 15%; animation: pulse 3s infinite
1.5s; }
.node:nth-child(5) { top: 50%; left: 10%; animation: pulse 3s infinite
2s; }
.node:nth-child(6) { top: 60%; right: 10%; animation: pulse 3s infinite
2.5s; }

@keyframes pulse {
0%, 100% { opacity: 0.3; transform: scale(1); }
50% { opacity: 1; transform: scale(1.5); }
}

/* Connection lines */
.connection {
position: absolute;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255,
0.2), transparent);
transform-origin: left center;
}

.connection:nth-child(7) {
top: 15%;
left: 15%;
width: 200px;
transform: rotate(25deg);
animation: fadeInOut 4s infinite;
}

.connection:nth-child(8) {
top: 60%;
right: 20%;
width: 150px;
transform: rotate(-30deg);
animation: fadeInOut 4s infinite 1s;
}

.connection:nth-child(9) {
bottom: 25%;
left: 25%;
width: 180px;
transform: rotate(45deg);
animation: fadeInOut 4s infinite 2s;
}

@keyframes fadeInOut {
0%, 100% { opacity: 0; }
50% { opacity: 0.6; }
}

.login-container {
background: rgba(20, 20, 20, 0.9);
border: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 40px;
width: 400px;
max-width: 90vw;
backdrop-filter: blur(10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
z-index: 10;
position: relative;
}

.logo {
text-align: center;
margin-bottom: 40px;
}

.logo h1 {
font-size: 48px;
font-weight: bold;
letter-spacing: 3px;
color: white;
text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
margin-bottom: 5px;
}

.logo .subtitle {
font-size: 24px;
font-weight: bold;
color: #ff4444;
letter-spacing: 2px;
text-shadow: 0 0 15px rgba(255, 68, 68, 0.5);
}

.form-group {
margin-bottom: 25px;
}

.form-input {
width: 100%;
padding: 15px 20px;
background: transparent;
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
color: white;
font-size: 16px;
transition: all 0.3s ease;
}

.form-input:focus {
outline: none;
border-color: rgba(255, 255, 255, 0.5);
box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}

.form-input::placeholder {
color: rgba(255, 255, 255, 0.5);
}

.checkbox-group {
display: flex;
justify-content: space-between;
margin-bottom: 30px;
}

.checkbox-item {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
}

.checkbox {
width: 18px;
height: 18px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 3px;
background: transparent;
position: relative;
cursor: pointer;
}

.checkbox input {
opacity: 0;
position: absolute;
cursor: pointer;
}

.checkbox input:checked + .checkmark {


background: #ff4444;
border-color: #ff4444;
}

.checkbox input:checked + .checkmark::after {


content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 12px;
font-weight: bold;
}

.checkmark {
width: 100%;
height: 100%;
border-radius: 3px;
transition: all 0.3s ease;
}

.checkbox-label {
font-size: 14px;
color: rgba(255, 255, 255, 0.8);
user-select: none;
}

.login-button {
width: 100%;
padding: 15px;
background: rgba(60, 60, 60, 0.8);
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
color: white;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
margin-bottom: 25px;
}

.login-button:hover {
background: rgba(80, 80, 80, 0.9);
border-color: rgba(255, 255, 255, 0.4);
box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1);
}

.footer {
text-align: center;
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
}

.footer a {
color: #ff4444;
text-decoration: none;
font-weight: bold;
margin-left: 10px;
transition: all 0.3s ease;
}

.footer a:hover {
color: #ff6666;
text-shadow: 0 0 10px rgba(255, 68, 68, 0.5);
}

@media (max-width: 480px) {


.login-container {
padding: 30px 20px;
}

.logo h1 {
font-size: 36px;
}
.logo .subtitle {
font-size: 20px;
}
}
</style>
</head>
<body>
<div class="background">
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="connection"></div>
<div class="connection"></div>
<div class="connection"></div>
</div>

<div class="login-container">
<div class="logo">
<h1>XXITER</h1>
<div class="subtitle">XIT</div>
</div>

<form id="loginForm">
<div class="form-group">
<input type="text" class="form-input" placeholder="Enter Your
Username" required>
</div>

<div class="form-group">
<input type="password" class="form-input" id="passwordField"
placeholder="Enter Your Password" required>
</div>

<div class="checkbox-group">
<div class="checkbox-item">
<div class="checkbox">
<input type="checkbox" id="savePassword">
<div class="checkmark"></div>
</div>
<label for="savePassword" class="checkbox-label">Save
Password</label>
</div>

<div class="checkbox-item">
<div class="checkbox">
<input type="checkbox" id="showPassword">
<div class="checkmark"></div>
</div>
<label for="showPassword" class="checkbox-label">Show
Password</label>
</div>
</div>

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


</form>
<div class="footer">
Join Our Official Channel
<a href="#" onclick="joinChannel()">Join Now</a>
</div>
</div>

<script>
// Show/Hide password functionality
[Link]('showPassword').addEventListener('change',
function() {
const passwordField = [Link]('passwordField');
if ([Link]) {
[Link] = 'text';
} else {
[Link] = 'password';
}
});

// Form submission
[Link]('loginForm').addEventListener('submit', function(e)
{
[Link]();
const button = [Link]('.login-button');
const originalText = [Link];

[Link] = 'LOGGING IN...';


[Link] = 'rgba(255, 68, 68, 0.3)';

setTimeout(() => {
[Link] = 'LOGIN SUCCESSFUL!';
[Link] = 'rgba(0, 255, 0, 0.3)';

setTimeout(() => {
[Link] = originalText;
[Link] = 'rgba(60, 60, 60, 0.8)';
}, 2000);
}, 1500);
});

// Join channel function


function joinChannel() {
alert('Redirecting to official channel...');
}

// Add some interactive particles on click


[Link]('click', function(e) {
createParticle([Link], [Link]);
});

function createParticle(x, y) {
const particle = [Link]('div');
[Link] = 'fixed';
[Link] = x + 'px';
[Link] = y + 'px';
[Link] = '4px';
[Link] = '4px';
[Link] = '#ff4444';
[Link] = '50%';
[Link] = 'none';
[Link] = '1000';
[Link] = 'particleFloat 1s ease-out forwards';

[Link](particle);

setTimeout(() => {
[Link]();
}, 1000);
}

// Add particle animation


const style = [Link]('style');
[Link] = `
@keyframes particleFloat {
0% {
opacity: 1;
transform: translate(0, 0) scale(1);
}
100% {
opacity: 0;
transform: translate(${[Link]() * 100 - 50}px, $
{[Link]() * 100 - 50}px) scale(0);
}
}
`;
[Link](style);
</script>
</body>
</html>

You might also like